Convert static fields to getters for safari support

sukima · Oct 25, 2020 · 21302af · 21302af
1 parent 99b7d15
commit 21302af
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,10 @@ class MyCustomElement extends Component {
 
   count = tracked(0);
 
+  constructor() {
+    super();
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.timer = setInterval(() => this.count++, 1000);
@@ -28,7 +32,9 @@ class MyCustomElement extends Component {
     this.shadow.querySelector('output').value = this.count;
   }
 
-  static template = `<span>Counter: <output></output></span>`;
+  static get template() {
+    return `<span>Counter: <output></output></span>`;
+  }
 
 }
 

diff --git a/examples/1.html b/examples/1.html
@@ -12,6 +12,7 @@
   import { tracked } from '../tracking.js';
 
   class FooBar extends Component {
+
     foo = tracked(0);
 
     get bar() {
@@ -28,6 +29,7 @@
       this.shadow.querySelector('.foo').value = this.foo;
       this.shadow.querySelector('.bar').value = this.bar;
     }
+
   }
 
   FooBar.register();

diff --git a/examples/2.html b/examples/2.html
@@ -12,6 +12,7 @@
   import { tracked } from '../tracking.js';
 
   class FooBar extends Component {
+
     foo = tracked(0);
 
     get bar() {
@@ -29,11 +30,13 @@
       this.shadow.querySelector('.bar').value = this.bar;
     }
 
-    static template = `
-      <button class="go">+1</button>
-      <output class="foo"></output>
-      <output class="bar"></output>
-    `;
+    static get template() {
+      return `
+        <button class="go">+1</button>
+        <output class="foo"></output>
+        <output class="bar"></output>
+      `;
+    }
 
   }
 

diff --git a/examples/3.html b/examples/3.html
@@ -12,6 +12,7 @@
   import { tracked } from '../tracking.js';
 
   class FooBar extends Component {
+
     foo = tracked(0);
 
     get bar() {

diff --git a/examples/4.html b/examples/4.html
@@ -31,6 +31,7 @@
       this.shadow.querySelector('.foo').value = globalTrackable.foo;
       this.shadow.querySelector('.bar').value = this.bar;
     }
+
   }
 
   FooBar.register();

diff --git a/examples/5.html b/examples/5.html
@@ -40,6 +40,7 @@
       this.shadow.querySelector('.foo').value = getGlobalValue();
       this.shadow.querySelector('.bar').value = this.bar;
     }
+
   }
 
   FooBar.register();

diff --git a/examples/6.html b/examples/6.html
@@ -15,6 +15,10 @@
 
     count = tracked(0);
 
+    constructor() {
+      super();
+    }
+
     connectedCallback() {
       super.connectedCallback();
       this.timer = setInterval(() => this.count++, 1000);
@@ -29,7 +33,9 @@
       this.shadow.querySelector('output').value = this.count;
     }
 
-    static template = `<span>Counter: <output></output></span>`;
+    static get template() {
+      return `<span>Counter: <output></output></span>`;
+    }
 
   }
 

diff --git a/examples/7.html b/examples/7.html
@@ -31,9 +31,12 @@
   }
 
   class BlinknLights extends Component {
-    lights = new Set();
-    previousEmojiCount = 0;
     timer = tracked();
+    constructor() {
+      super();
+      this.lights = new Set();
+      this.previousEmojiCount = 0;
+    }
     connectedCallback() {
       super.connectedCallback();
       if (this.hasAttribute('autostart')) { this.start(); }
@@ -143,15 +146,14 @@
   }
 
   class PlayPauseButton extends Component {
-    static template = `<button type="button"></button>`;
     connectedCallback() {
       super.connectedCallback();
       this.clickHandler = () => this.toggle();
-      this.buttonElement.addEventListener('click', this.clickHandler);
+      this.buttonElement.addEventListener('mouseup', this.clickHandler);
     }
     disconnectedCallback() {
       super.disconnectedCallback();
-      this.buttonElement.removeEventListener('click', this.clickHandler);
+      this.buttonElement.removeEventListener('mouseup', this.clickHandler);
     }
     toggle() {
       let { runnableElement } = this;
@@ -169,6 +171,9 @@
       let id = this.getAttribute('for');
       return document.querySelector(`#${id}`);
     }
+    static get template() {
+      return `<button type="button"></button>`;
+    }
   }
 
   FpsMeter.register();

diff --git a/tracking.js b/tracking.js
@@ -5,7 +5,9 @@ let currentComputation = null;
 let onTagDirtied = () => {};
 
 class Tag {
-  [REVISION] = CURRENT_REVISION;
+  constructor() {
+    this[REVISION] = CURRENT_REVISION;
+  }
 }
 
 class TrackedProperty {