Syntax lookup for various decorators

misc_docs/syntax/decorator_as.mdx

@@ -1,26 +1,33 @@
 ---
-test: "foo"
+id: "as-decorator"
+keywords: ["as", "decorator", "record", "field", "alias", "object"]
+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 may be 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 mostly useful to map to JavaScript attribute names that cannot be expressed in ReScript (such as keywords).
 
-### Example
+For example:
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```reason
+```re
 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.
+It may also be used when declaring external [polymorphic variants](/docs/manual/latest/polymorphic-variant). See the `@string` and `@int` decorators for more details.

misc_docs/syntax/decorator_deriving.mdx

@@ -0,0 +1,202 @@
+---
+id: "deriving-decorator"
+keywords: ["deriving", "decorator", "record", "variant"]
+name: "@deriving"
+summary: "This is the `@deriving` decorator."
+category: "decorators"
+---
+
+The `@deriving(accessors)` decorator can be used to either:
+
+* Generate getter functions for a decorated **record** type, or 
+* Generate creator functions for constructors of a **variant** type.
+
+The `@deriving(abstract)` decorator creates:
+
+* An abstract type representing the "abstract record".
+* A creator function for the new abstract type, where labeled arguments represent the attributes of the record.
+* A set of setter / getter functions for each record attribute
+
+Note that when using the `@deriving(abstract)` decorator, the original record type will be removed.
+You'll need to use the newly created functions to create / get / set values of this type.
+
+Example of **record** accessors:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```re
+@deriving(accessors)
+type person = {
+  name: string,
+  age: int,
+}
+
+// This generates functions with signatures:
+// let name: (person) => string;
+// let age: (person) => int;
+
+let toString = (person): string => {
+  name(person) ++ " " ++ Belt.Int.toString(age(person))
+}
+
+let misha = {
+  name: "Misha",
+  age: 20,
+}
+
+let result = toString(misha)
+```
+
+```js
+function name(param) {
+  return param.name;
+}
+
+function age(param) {
+  return param.age;
+}
+
+function toString(person) {
+  return person.name + " " + String(person.age);
+}
+
+var misha = {
+  name: "Misha",
+  age: 20,
+};
+
+var result = toString(misha);
+```
+
+</CodeTab>
+
+Example of **variant** accessors:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```re
+@deriving(accessors)
+type action =
+  | SetName(string)
+  | SetAge(int)
+  | ClearAll
+
+// This generates functions with signatures:
+// let setName: (string) => action;
+// let age: (person) => int;
+
+let dispatch = action => {
+  switch action {
+  | SetName(name) => Js.log2("SetName", name)
+  | SetAge(age) => Js.log2("SetAge", age)
+  | ClearAll => Js.log("ClearAll")
+  }
+}
+
+dispatch(setName("Hello"))
+dispatch(setAge(123))
+dispatch(clearAll)
+```
+
+```js
+function setName(param_0) {
+  return {
+    TAG: /* SetName */ 0,
+    _0: param_0,
+  }
+}
+
+function setAge(param_0) {
+  return {
+    TAG: /* SetAge */ 1,
+    _0: param_0,
+  }
+}
+
+function dispatch(action) {
+  if (typeof action === "number") {
+    console.log("ClearAll")
+    return
+  }
+  if (action.TAG === /* SetName */ 0) {
+    console.log("SetName", action._0)
+    return
+  }
+  console.log("SetAge", action._0)
+}
+
+dispatch({
+  TAG: /* SetName */ 0,
+  _0: "Hello",
+})
+
+dispatch({
+  TAG: /* SetAge */ 1,
+  _0: 123,
+})
+
+dispatch(/* ClearAll */ 0)
+
+var clearAll = /* ClearAll */ 0
+```
+
+</CodeTab>
+
+Example of **abstract record** type:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```re
+@deriving(abstract)
+type person = {
+  name: string,
+  mutable age: int, // Use the mutable keyword for generating setters
+}
+
+// Generates the following:
+//
+// An abstract type, replacing the original type:
+//
+//   type person
+//
+// A type constructor:
+//
+//   let person: (~name: string, ~age: int) => person
+//
+// Getters:
+//
+//   let nameGet: (person) => string;
+//   let ageGet: (person) => int
+//
+// Setters (only mutable attributes)
+//
+//   let ageSet: (person, int) => unit
+
+let friend = person(~name="Misha", ~age=20)
+
+Js.log(friend->nameGet) // => "Misha"
+
+// Increase age by 1 via mutation
+friend->ageSet(friend->ageGet + 1)
+
+Js.log(friend->ageGet) // => 21
+
+// This will NOT be possible (original type has been removed)
+// let misha = {name: "Misha", age: 20}
+
+```
+
+```js
+var friend = {
+  name: "Misha",
+  age: 20
+};
+
+console.log(friend.name);
+
+friend.age = friend.age + 1 | 0;
+
+console.log(friend.age);
+```
+
+</CodeTab>

misc_docs/syntax/decorator_get.mdx

@@ -0,0 +1,35 @@
+---
+id: "get-decorator"
+keywords: ["get", "decorator", "property", "object", "bind"]
+name: "@get"
+summary: "This is the `@get` decorator."
+category: "decorators"
+---
+
+The `@get` decorator is used to bind to a property of an object.
+
+For example:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```re
+type element
+
+@scope("document") @val
+external createElement: string => element = "createElement"
+
+@get
+external getScrollTop: element => unit = "scrollTop"
+
+let div = createElement("div")
+let top = getScrollTop(div)
+```
+
+```js
+var div = document.createElement("div")
+var top = div.scrollTop
+```
+
+</CodeTab>
+
+

misc_docs/syntax/decorator_get_index.mdx

@@ -0,0 +1,72 @@
+---
+id: "get-index-decorator"
+keywords: ["get", "decorator", "array", "object", "index"]
+name: "@get_index"
+summary: "This is the `@get_index` decorator."
+category: "decorators"
+---
+
+The `@get_index` decorator is used to access a dynamic property or index.
+
+For example with an Array:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```re
+type t
+
+@new external create: int => t = "Array"
+@set_index external set: (t, int, string) => unit = ""
+@get_index external get: (t, int) => string = ""
+
+let a = create(3)
+a->set(0, "zero")
+a->set(1, "one")
+a->set(2, "two")
+
+let value = a->get(1)
+```
+
+```js
+var a = new Array(3);
+
+a[0] = "zero";
+a[1] = "one";
+a[2] = "two";
+
+var value = a[1];
+```
+
+</CodeTab>
+
+And an example with an object:
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```re
+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>
+