Merge pull request #180 from kevanstannard/this-decorator-syntax

Add @this decorator to syntax lookup

Author: ryyppy

misc_docs/syntax/decorator_this.mdx

@@ -0,0 +1,56 @@
+---
+id: "this-decorator"
+keywords: ["this", "decorator"]
+name: "@this"
+summary: "This is the `@this` decorator."
+category: "decorators"
+---
+
+The `@this` decorator may be used to bind to an **external** callback function that require access to a `this` context.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type counter
+
+// Function to create an empty object
+@new external create: unit => counter = "Object"
+
+// Functions that set and get a "value" property
+@set external setValue: (counter, int) => unit = "value"
+@get external getValue: counter => int = "value"
+
+// Functions that create "increment" and "decrement" function properties which have access to "this"
+@set external setIncrement: (counter, @this (counter, int) => unit) => unit = "increment"
+@set external setDecrement: (counter, @this (counter, int) => unit) => unit = "decrement"
+
+// Use the functions above to create a counter instance
+let counter = create()
+setValue(counter, 0)
+setIncrement(counter, @this (me, amount) => me->setValue(me->getValue + amount))
+setDecrement(counter, @this (me, amount) => me->setValue(me->getValue - amount))
+```
+
+```js
+var counter = new Object()
+
+counter.value = 0
+
+counter.increment = function (amount) {
+  var me = this
+  me.value = (me.value + amount) | 0
+}
+
+counter.decrement = function (amount) {
+  var me = this
+  me.value = (me.value - amount) | 0
+}
+```
+
+</CodeTab>
+
+### References
+
+* [Modeling `this`-based Callbacks](/docs/manual/latest/bind-to-js-function#modeling-this-based-callbacks)