From 8740b4f87dcc608842fdb2953d85158b44f72e94 Mon Sep 17 00:00:00 2001
From: Luca Elin Haneklau <lhanekla@hellmann.com>
Date: Tue, 3 May 2022 22:30:42 +0200
Subject: [PATCH 1/2] update docs and message on template arrow and bind

---
 docs/rules/no-template-arrow.md | 27 ++++++++++++++++++++++-----
 docs/rules/no-template-bind.md  | 26 ++++++++++++++++++++++----
 src/rules/no-template-arrow.ts  |  3 +--
 src/rules/no-template-bind.ts   |  3 +--
 4 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/docs/rules/no-template-arrow.md b/docs/rules/no-template-arrow.md
index 69f6218..68a9543 100644
--- a/docs/rules/no-template-arrow.md
+++ b/docs/rules/no-template-arrow.md
@@ -7,14 +7,31 @@ loss.
 Instead, you should do something like so:
 
 ```ts
-_render() {
-  return html`<x-foo @event=${this._onClick}>`;
-}
+class MyElement extends LitElement {
+  render() {
+    return html`<x-foo @event=${this._onClick}>`;
+  }
 
-_onClick() { ... }
+  _onClick() { ... }
+}
 ```
 
-As lit will automatically bind it to the correct context.
+As LitElement will automatically bind event listeners to the correct context, or:
+
+```ts
+class MyElement extends LitElement {
+  constructor () {
+    super();
+    this.someFunc = this.someFunc.bind(this);
+  }
+  
+  render() {
+    return html`<x-foo .funcProp=${this.someFunc}>`;
+  }
+
+  someFunc() { ... }
+}
+```
 
 ## Rule Details
 
diff --git a/docs/rules/no-template-bind.md b/docs/rules/no-template-bind.md
index bac3686..db23863 100644
--- a/docs/rules/no-template-bind.md
+++ b/docs/rules/no-template-bind.md
@@ -7,14 +7,32 @@ loss.
 Instead, you should do something like so:
 
 ```ts
-_render() {
-  return html`<x-foo @event=${this._onClick}>`;
+class MyElement extends LitElement {
+  render() {
+    return html`<x-foo @event=${this._onClick}>`;
+  }
+
+  _onClick() { ... }
 }
+```
+
+As LitElement will automatically bind event listeners to the correct context, or:
 
-_onClick() { ... }
+```ts
+class MyElement extends LitElement {
+  constructor () {
+    super();
+    this.someFunc = this.someFunc.bind(this);
+  }
+  
+  render() {
+    return html`<x-foo .funcProp=${this.someFunc}>`;
+  }
+
+  someFunc() { ... }
+}
 ```
 
-As lit will automatically bind it to the correct context.
 
 ## Rule Details
 
diff --git a/src/rules/no-template-arrow.ts b/src/rules/no-template-arrow.ts
index b7230e5..1abbb33 100644
--- a/src/rules/no-template-arrow.ts
+++ b/src/rules/no-template-arrow.ts
@@ -20,8 +20,7 @@ const rule: Rule.RuleModule = {
     messages: {
       noArrow:
         'Arrow functions must not be used in templates, ' +
-        'a method should be passed directly like `${this.myMethod}` as it ' +
-        'will be bound automatically.'
+        'a method should be bound once in the constructor and passed directly like `${this.myMethod}`.'
     }
   },
 
diff --git a/src/rules/no-template-bind.ts b/src/rules/no-template-bind.ts
index e8e552a..545ec70 100644
--- a/src/rules/no-template-bind.ts
+++ b/src/rules/no-template-bind.ts
@@ -20,8 +20,7 @@ const rule: Rule.RuleModule = {
     messages: {
       noBind:
         '`.bind` must not be used in templates, ' +
-        'a method should be passed directly like `${this.myMethod}` as it ' +
-        'will be bound automatically.'
+        'a method should be bound once in the constructor and passed directly like `${this.myMethod}`.'
     }
   },
 

From 3eb46de0573edf3b3df035955eaf68977f0f7cc6 Mon Sep 17 00:00:00 2001
From: lucaelin <git@luca.lsys.ac>
Date: Sat, 7 May 2022 18:51:40 +0200
Subject: [PATCH 2/2] Update no-template-arrow message to mention event binding

---
 src/rules/no-template-arrow.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/rules/no-template-arrow.ts b/src/rules/no-template-arrow.ts
index 1abbb33..a4f88ee 100644
--- a/src/rules/no-template-arrow.ts
+++ b/src/rules/no-template-arrow.ts
@@ -19,8 +19,9 @@ const rule: Rule.RuleModule = {
     },
     messages: {
       noArrow:
-        'Arrow functions must not be used in templates, ' +
-        'a method should be bound once in the constructor and passed directly like `${this.myMethod}`.'
+        'Arrow functions should not be used in templates. ' +
+        'LitElement event bindings are bound automatically, ' + 
+        'otherwise a method/function should be bound outside the render method (e.g. in the constructor) beforehand'
     }
   },