From 743939c777eef77d0e8563339fc511fc50824c60 Mon Sep 17 00:00:00 2001
From: Kevan Stannard <kevan.stannard@ansarada.com>
Date: Sun, 10 Jan 2021 21:11:14 +1100
Subject: [PATCH 1/3] Add this decorator to syntax lookup

---
 misc_docs/syntax/decorator_this.mdx | 56 +++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 misc_docs/syntax/decorator_this.mdx

diff --git a/misc_docs/syntax/decorator_this.mdx b/misc_docs/syntax/decorator_this.mdx
new file mode 100644
index 000000000..5f32948c4
--- /dev/null
+++ b/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 model JavaScript functions that need a reference `this`.
+
+### 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 an "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)

From 10b9993c3c5ee04f65cf9d82b4c55743e36082ea Mon Sep 17 00:00:00 2001
From: Kevan Stannard <kevan.stannard@ansarada.com>
Date: Sun, 10 Jan 2021 21:45:34 +1100
Subject: [PATCH 2/3] Fix typo

---
 misc_docs/syntax/decorator_this.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/misc_docs/syntax/decorator_this.mdx b/misc_docs/syntax/decorator_this.mdx
index 5f32948c4..ff67e9948 100644
--- a/misc_docs/syntax/decorator_this.mdx
+++ b/misc_docs/syntax/decorator_this.mdx
@@ -22,7 +22,7 @@ type counter
 @set external setValue: (counter, int) => unit = "value"
 @get external getValue: counter => int = "value"
 
-// Functions that create an "increment" and "decrement" function properties which have access to "this"
+// 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"
 

From 3dafd5924cb07ad0c6b527d87394dee0758257fa Mon Sep 17 00:00:00 2001
From: Kevan Stannard <kevanstannard@gmail.com>
Date: Fri, 15 Jan 2021 20:31:01 +1100
Subject: [PATCH 3/3] Update misc_docs/syntax/decorator_this.mdx

Co-authored-by: Patrick Ecker <ryyppy@users.noreply.github.com>
---
 misc_docs/syntax/decorator_this.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/misc_docs/syntax/decorator_this.mdx b/misc_docs/syntax/decorator_this.mdx
index ff67e9948..1a443dfad 100644
--- a/misc_docs/syntax/decorator_this.mdx
+++ b/misc_docs/syntax/decorator_this.mdx
@@ -6,7 +6,7 @@ summary: "This is the `@this` decorator."
 category: "decorators"
 ---
 
-The `@this` decorator may be used to model JavaScript functions that need a reference `this`.
+The `@this` decorator may be used to bind to an **external** callback function that require access to a `this` context.
 
 ### Example