Merge pull request #114 from reason-association/syntax-lookup-tool

Syntax lookup tool

misc_docs/syntax/controlflow_ifelse.mdx

@@ -0,0 +1,20 @@
+---
+id: "if-else"
+keywords: ["if", "else"]
+name: "if / else"
+summary: "This is the `if / else` control flow."
+category: "controlflow"
+---
+
+Use `if / else` expressions to express a value trough a `true` / `false` condition.
+
+```res
+let user = "Anna"
+
+let ret = if user === "Anna" {
+  "Hi Anna!"
+}
+else {
+  "Hi unknown!"
+}
+```

misc_docs/syntax/decorator_as.mdx

@@ -0,0 +1,36 @@
+---
+id: "as-decorator"
+keywords: ["as", "decorator"]
+name: "@as"
+summary: "This is the `@as` decorator."
+category: "decorators"
+---
+
+The `@as` decorator is commonly used on record types to alias record field names to a different JavaScript attribute name.
+
+This is useful to map to JavaScript attribute names that cannot be expressed in ReScript (such as keywords).
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type action = {
+  @as("type") type_: string
+}
+
+let action = {type_: "ADD_USER"}
+```
+
+```js
+var action = {
+  type: "ADD_USER"
+};
+```
+
+</CodeTab>
+
+### 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

@@ -0,0 +1,32 @@
+---
+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

@@ -0,0 +1,32 @@
+---
+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
+
+@new external create: unit => t = "Date"
+
+let now = create()
+```
+
+```js
+var now = new Date();
+```
+
+</CodeTab>
+
+### References
+
+* [Bind to a JS Object That's a Class](/docs/manual/latest/bind-to-js-object#bind-to-a-js-object-thats-a-class)