Syntax lookup for various decorators

misc_docs/syntax/decorator_as.mdx

@@ -1,26 +1,36 @@
 ---
-test: "foo"
+id: "as-decorator"
+keywords: ["as", "decorator"]
+name: "@as"
+summary: "This is the `@as` decorator."
+category: "decorators"
 ---
 
-Use this decorator on record types to alias record names to a different JS attribute name.
+The `@as` decorator is commonly used on record types to alias record field names to a different JavaScript attribute name.
 
-This is mostly useful to map to JS attribute names that cannot be expressed in ReScript (such as keywords).
+This is useful to map to JavaScript attribute names that cannot be expressed in ReScript (such as keywords).
 
 ### Example
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```reason
+```res
 type action = {
-  [@bs.as "type"] _type: string,
-};
+  @as("type") type_: string
+}
+
+let action = {type_: "ADD_USER"}
 ```
 
 ```js
 var action = {
   type: "ADD_USER"
 };
 ```
+
 </CodeTab>
 
-Refer to the [Records as Objects](/docs/manual/latest/bind-to-js-object#bind-using-rescript-record) section for a more detailed explanation.
+### References
+
+* [Constrain Arguments Better](/docs/manual/latest/bind-to-js-function#constrain-arguments-better)
+* [Fixed Arguments](/docs/manual/latest/bind-to-js-function#fixed-arguments)

misc_docs/syntax/decorator_deriving.mdx

@@ -0,0 +1,52 @@
+---
+id: "deriving-decorator"
+keywords: ["deriving", "decorator"]
+name: "@deriving"
+summary: "This is the `@deriving` decorator."
+category: "decorators"
+---
+
+When the `@deriving` decorator is applied to a **record** type,
+it expands the type into a factory function plus a set of
+getter/setter functions for its fields.   
+
+> Note that this is an outdated decorator and you may no longer need to use it.
+> See [Convert Record Type to Abstract Record](/docs/manual/latest/generate-converters-accessors#convert-record-type-to-abstract-record) for more details.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@deriving(abstract)
+type person = {
+  name: string,
+  age: int,
+  job: string,
+}
+
+let joe = person(~name="Joe", ~age=20, ~job="teacher")
+
+let joeName = nameGet(joe)
+let joeAge = ageGet(joe)
+let joeJob = jobGet(joe)
+```
+
+```js
+var joe = {
+  name: "Joe",
+  age: 20,
+  job: "teacher"
+};
+
+var joeName = joe.name;
+var joeAge = joe.age;
+var joeJob = joe.job;
+```
+
+</CodeTab>
+
+### References
+
+* [Convert Record Type to Abstract Record](/docs/manual/latest/generate-converters-accessors#convert-record-type-to-abstract-record)
+

misc_docs/syntax/decorator_get.mdx

@@ -0,0 +1,31 @@
+---
+id: "get-decorator"
+keywords: ["get", "decorator"]
+name: "@get"
+summary: "This is the `@get` decorator."
+category: "decorators"
+---
+
+The `@get` decorator is used to bind to a property of an object.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type window
+@bs.val external window: window = "window"
+@bs.get external getName: window => string = "name"
+
+let name = getName(window)
+```
+
+```js
+var name = window.name;
+```
+
+</CodeTab>
+
+### References
+
+- [Bind using Special `@bs` Getters & Setters](/docs/manual/latest/bind-to-js-object#bind-using-special-bs-getters--setters)

misc_docs/syntax/decorator_get_index.mdx

@@ -0,0 +1,45 @@
+---
+id: "get-index-decorator"
+keywords: ["get", "index", "decorator"]
+name: "@get_index"
+summary: "This is the `@get_index` decorator."
+category: "decorators"
+---
+
+The `@get_index` decorator is used to access a dynamic property on an object,
+or an index of an array.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type t
+
+@new external create: unit => t = "Object"
+@set_index external set: (t, string, int) => unit = ""
+@get_index external get: (t, string) => int = ""
+
+let o = create()
+o->set("x", 1)
+o->set("y", 3)
+o->set("z", 5)
+
+let value = o->get("y")
+```
+
+```js
+var o = new Object();
+
+o["x"] = 1;
+o["y"] = 3;
+o["z"] = 5;
+
+var value = o["y"];
+```
+
+</CodeTab>
+
+### References
+
+- [Bind using Special `@bs` Getters & Setters](/docs/manual/latest/bind-to-js-object#bind-using-special-bs-getters--setters)

misc_docs/syntax/decorator_inline.mdx

@@ -0,0 +1,39 @@
+---
+id: "inline-decorator"
+keywords: ["inline", "decorator"]
+name: "@inline"
+summary: "This is the `@inline` decorator."
+category: "decorators"
+---
+
+The `@inline` decorator tells the compiler to inline its value
+in every place the binding is being used, rather than use a variable.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+module Colors = {
+  @inline
+  let green = "green"
+
+  @inline
+  let red = "red"
+}
+
+let allowedColors = [Colors.green, Colors.red]
+```
+
+```js
+var allowedColors = [
+  "green",
+  "red"
+];
+```
+
+</CodeTab>
+
+### References
+
+- [Inlining Constants](/docs/manual/latest/inlining-constants)

misc_docs/syntax/decorator_int.mdx

@@ -0,0 +1,35 @@
+---
+id: "int-decorator"
+keywords: ["int", "decorator"]
+name: "@int"
+summary: "This is the `@int` decorator."
+category: "decorators"
+---
+
+The `@int` decorator can be used with [polymorphic variants](/docs/manual/latest/polymorphic-variant) and the `@as` decorator on *externals* to modify the compiled JavaScript to use integers for the values instead of strings.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@val external setStatus: @int[
+  @as(0) #NotStarted |
+  @as(1) #Started |
+  @as(2) #Done 
+] => unit = "setStatus"
+
+setStatus(#Done)
+```
+
+```js
+setStatus(2);
+```
+
+</CodeTab>
+
+### References
+
+* [Constrain Arguments Better](/docs/manual/latest/bind-to-js-function#constrain-arguments-better)
+
+

misc_docs/syntax/decorator_meth.mdx

@@ -0,0 +1,45 @@
+---
+id: "meth-decorator"
+keywords: ["meth", "decorator"]
+name: "@meth"
+summary: "This is the `@meth` decorator."
+category: "decorators"
+---
+
+The `@meth` decorator is used to call a function on a JavaScript object,
+and avoid issues with currying.
+
+### Example
+
+Suppose we have the following JavaScript:
+
+```js
+function say (a, b) {
+  console.log(a, b);
+};
+
+var john = { 
+  say
+};
+```
+
+We can model and bind to this object as follows.
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type person = {@meth "say": (string, string) => unit}
+
+@val external john: person = "john"
+
+john["say"]("hey", "jude")
+```
+
+```js
+john.say("hey", "jude");
+```
+
+</CodeTab>
+
+
+

misc_docs/syntax/decorator_module.mdx

@@ -1 +1,32 @@
-used for [this](https://google.com) and [that](https://google.com)
+---
+id: "module-decorator"
+keywords: ["module", "decorator"]
+name: "@module"
+summary: "This is the `@module` decorator."
+category: "decorators"
+---
+
+The `@module` decorator is used to bind to a JavaScript module.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@module("path")
+external dirname: string => string = "dirname"
+
+let root = dirname("/User/github")
+```
+
+```js
+var Path = require("path");
+
+var root = Path.dirname("/User/github");
+```
+
+</CodeTab>
+
+### References
+
+* [Import from JavaScript](/docs/manual/latest/import-from-export-to-js#import-from-javascript)

misc_docs/syntax/decorator_new.mdx

@@ -1,34 +1,32 @@
-This decorator is used whenever you need to bind to a JS class constructor that requires the `new` keword for instantiation.
+---
+id: "new-decorator"
+keywords: ["new", "decorator"]
+name: "@new"
+summary: "This is the `@new` decorator."
+category: "decorators"
+---
+
+The `@new` decorator is used whenever you need to bind to a JavaScript
+class constructor that requires the `new` keword for instantiation.
+
+### Example
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
 ```res
 type t
-@bs.new external create: unit => t = "Date"
 
-create();
+@new external create: unit => t = "Date"
+
+let now = create()
 ```
 
 ```js
-new Date();
+var now = new Date();
 ```
 
 </CodeTab>
 
-When the object is not available on the global scope, combine it with `@module`:
-
-<CodeTab labels={["ReScript", "JS Output"]}>
-
-```res
-type t;
-@module @bs.new external book: unit => t = "Book";
+### References
 
-let myBook = book();
-```
-
-```js
-var Book = require("Book");
-var myBook = new Book();
-```
-
-</CodeTab>
+* [Bind to a JS Object That's a Class](/docs/manual/latest/bind-to-js-object#bind-to-a-js-object-thats-a-class)