Convert to constructor syntax for safari support

sukima · Oct 24, 2020 · fc64aa5 · fc64aa5
1 parent 99b7d15
commit fc64aa5
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,10 @@ and allow you to make small and yet *performant* custom elements.
 ```js
 class MyCustomElement extends Component {
 
-  count = tracked(0);
+  constructor() {
+    super();
+    this.count = tracked(0);
+  }
 
   connectedCallback() {
     super.connectedCallback();

diff --git a/examples/1.html b/examples/1.html
@@ -12,14 +12,13 @@
   import { tracked } from '../tracking.js';
 
   class FooBar extends Component {
-    foo = tracked(0);
-
     get bar() {
       return `bar-${this.foo}`;
     }
 
     constructor() {
       super();
+      this.foo = tracked(0);
       this.shadow.querySelector('.go')
         .addEventListener('click', () => { this.foo += 1 });
     }

diff --git a/examples/2.html b/examples/2.html
@@ -12,14 +12,13 @@
   import { tracked } from '../tracking.js';
 
   class FooBar extends Component {
-    foo = tracked(0);
-
     get bar() {
       return `bar-${this.foo}`;
     }
 
     constructor() {
       super();
+      this.foo = tracked(0);
       this.shadow.querySelector('.go')
         .addEventListener('click', () => { this.foo += 1 });
     }

diff --git a/examples/3.html b/examples/3.html
@@ -12,14 +12,13 @@
   import { tracked } from '../tracking.js';
 
   class FooBar extends Component {
-    foo = tracked(0);
-
     get bar() {
       return `bar-${this.foo}`;
     }
 
     constructor() {
       super();
+      this.foo = tracked(0);
       this.shadow.querySelector('.go')
         .addEventListener('click', () => { this.foo += 1 });
     }

diff --git a/examples/6.html b/examples/6.html
@@ -13,7 +13,10 @@
 
   class MyCustomElement extends Component {
 
-    count = tracked(0);
+    constructor() {
+      super();
+      this.count = tracked(0);
+    }
 
     connectedCallback() {
       super.connectedCallback();

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;
+      this.timer = tracked();
+    }
     connectedCallback() {
       super.connectedCallback();
       if (this.hasAttribute('autostart')) { this.start(); }
@@ -92,16 +95,22 @@
   }
 
   class BlinknLight extends Component {
-    emoji = tracked(EMOJIES[0]);
+    constructor() {
+      super();
+      this.emoji = tracked(EMOJIES[0]);
+    }
     render() {
       this.shadow.querySelector('.emoji').textContent = this.emoji;
     }
   }
 
   class FpsMeter extends Component {
-    be = new Date();
-    running = false;
-    fps = tracked(0);
+    constructor() {
+      super();
+      this.be = new Date();
+      this.running = false;
+      this.fps = tracked(0);
+    }
     connectedCallback() {
       super.connectedCallback();
       this.start();

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 {