WIP [skip ci]

sukima · Oct 23, 2020 · 3b8a560 · 3b8a560
1 parent 05f8845
commit 3b8a560
Show file tree

Hide file tree

Showing 9 changed files with 486 additions and 24 deletions.
diff --git a/index.html → examples/1.html b/index.html → examples/1.html
@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>FancyPants Sample</title>
+  <title>FancyPants Example One</title>
   <script type="module">
 
-  import Component from './lib/component.js';
-  import { tracked } from './lib/tracking.js';
+  import Component from '../lib/component.js';
+  import { tracked } from '../lib/tracking.js';
 
   class FooBar extends Component {
     foo = tracked(0);
@@ -33,7 +33,7 @@
 </head>
 <body>
 
-  <h1>FancyPants Sample</h1>
+  <h1>FancyPants Example One</h1>
 
   <p><foo-bar></foo-bar></p>
   <p><foo-bar></foo-bar></p>
@@ -42,11 +42,6 @@ <h1>FancyPants Sample</h1>
     <button class="go">+1</button>
     <output class="foo"></output>
     <output class="bar"></output>
-    <ol class="list">
-      <li class="index">One</li>
-      <li class="index">Two</li>
-      <li class="index">Three</li>
-    </ol>
   </template>
 
 </body>

diff --git a/examples/2.html b/examples/2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>FancyPants Example Two</title>
+  <script type="module">
+
+  import Component from '../lib/component.js';
+  import { tracked } from '../lib/tracking.js';
+
+  class FooBar extends Component {
+    foo = tracked(0);
+
+    get bar() {
+      return `bar-${this.foo}`;
+    }
+
+    constructor() {
+      super();
+      this.shadow.querySelector('.go')
+        .addEventListener('click', () => { this.foo += 1 });
+    }
+
+    render() {
+      this.shadow.querySelector('.foo').value = this.foo;
+      this.shadow.querySelector('.bar').value = this.bar;
+    }
+
+    static template = `
+      <button class="go">+1</button>
+      <output class="foo"></output>
+      <output class="bar"></output>
+    `;
+
+  }
+
+  FooBar.register();
+
+  </script>
+</head>
+<body>
+
+  <h1>FancyPants Example Two</h1>
+
+  <p><foo-bar></foo-bar></p>
+  <p><foo-bar></foo-bar></p>
+
+</body>
+</html>
diff --git a/examples/3.html b/examples/3.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>FancyPants Example Three</title>
+  <script type="module">
+
+  import Component from '../lib/component.js';
+  import { tracked } from '../lib/tracking.js';
+
+  class FooBar extends Component {
+    foo = tracked(0);
+
+    get bar() {
+      return `bar-${this.foo}`;
+    }
+
+    constructor() {
+      super();
+      this.shadow.querySelector('.go')
+        .addEventListener('click', () => { this.foo += 1 });
+    }
+
+    render() {
+      this.shadow.querySelector('.foo').value = this.foo;
+      this.shadow.querySelector('.bar').value = this.bar;
+    }
+
+  }
+
+  FooBar.register('#different-id');
+
+  </script>
+</head>
+<body>
+
+  <h1>FancyPants Example Three</h1>
+
+  <p><foo-bar></foo-bar></p>
+  <p><foo-bar></foo-bar></p>
+
+  <template id="different-id">
+    <button class="go">+1</button>
+    <output class="foo"></output>
+    <output class="bar"></output>
+  </template>
+
+</body>
+</html>
diff --git a/examples/4.html b/examples/4.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>FancyPants Example Four</title>
+  <script type="module">
+
+  import Component from '../lib/component.js';
+  import { tracked, activateTracking } from '../lib/tracking.js';
+
+  const globalTrackable = activateTracking({
+    foo: tracked(0),
+  });
+
+  class FooBar extends Component {
+
+    get bar() {
+      return `bar-${globalTrackable.foo}`;
+    }
+
+    constructor() {
+      super();
+      this.shadow.querySelector('.go')
+        .addEventListener('click', () => { globalTrackable.foo += 1 });
+    }
+
+    render() {
+      this.shadow.querySelector('.foo').value = globalTrackable.foo;
+      this.shadow.querySelector('.bar').value = this.bar;
+    }
+  }
+
+  FooBar.register();
+
+  </script>
+</head>
+<body>
+
+  <h1>FancyPants Example Four</h1>
+
+  <p><foo-bar></foo-bar></p>
+  <p><foo-bar></foo-bar></p>
+
+  <template id="foo-bar">
+    <button class="go">+1</button>
+    <output class="foo"></output>
+    <output class="bar"></output>
+  </template>
+
+</body>
+</html>
diff --git a/examples/5.html b/examples/5.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>FancyPants Example Five</title>
+  <script type="module">
+
+  import Component from '../lib/component.js';
+  import { tracked, dirtyTag, consumeTag, createTag } from '../lib/tracking.js';
+
+  const globalTag = createTag();
+  let globalValue = 0;
+
+  function updateGlobalValue() {
+    dirtyTag(globalTag);
+    globalValue++;
+  }
+
+  function getGlobalValue() {
+    consumeTag(globalTag);
+    return globalValue;
+  }
+
+  class FooBar extends Component {
+
+    get bar() {
+      return `bar-${getGlobalValue()}`;
+    }
+
+    constructor() {
+      super();
+      this.shadow.querySelector('.go')
+        .addEventListener('click', updateGlobalValue);
+    }
+
+    render() {
+      this.shadow.querySelector('.foo').value = getGlobalValue();
+      this.shadow.querySelector('.bar').value = this.bar;
+    }
+  }
+
+  FooBar.register();
+
+  </script>
+</head>
+<body>
+
+  <h1>FancyPants Example Five</h1>
+
+  <p><foo-bar></foo-bar></p>
+  <p><foo-bar></foo-bar></p>
+
+  <template id="foo-bar">
+    <button class="go">+1</button>
+    <output class="foo"></output>
+    <output class="bar"></output>
+  </template>
+
+</body>
+</html>
diff --git a/examples/6.html b/examples/6.html
diff --git a/examples/7.html b/examples/7.html
diff --git a/lib/component.js b/lib/component.js
@@ -1,13 +1,20 @@
 import { scheduleRender, registerRenderer, unregisterRenderer } from './renderer.js';
-import { activateTracking, memoizeFunction } from './tracking.js';
+import { activateTracking, memoizeFunction, createTag, dirtyTag, consumeTag } from './tracking.js';
 
+const ATTRIBUTE_TAGS = Symbol('attribute tags');
 const RENDER = Symbol('memoized render');
 const templates = new Map();
 
 function dasherize(str) {
   return str.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase();
 }
 
+function makeTemplateElement(html = '') {
+  let element = document.createElement('template');
+  element.innerHTML = html;
+  return element;
+}
+
 export default class Component extends HTMLElement {
 
   constructor() {
@@ -16,6 +23,9 @@ export default class Component extends HTMLElement {
     this.shadow = this.attachShadow({ mode: 'open' });
     this.shadow.appendChild(template.content.cloneNode(true));
     this[RENDER] = memoizeFunction(() => this.render());
+    this[ATTRIBUTE_TAGS] = new Map(
+      (this.constructor.observedAttributes ?? []).map(i => [i, createTag()])
+    );
   }
 
   connectedCallback() {
@@ -28,8 +38,13 @@ export default class Component extends HTMLElement {
     unregisterRenderer(this[RENDER]);
   }
 
-  attributeChangedCallback() {
-    scheduleRender();
+  attributeChangedCallback(name) {
+    dirtyTag(this[ATTRIBUTE_TAGS].get(name));
+  }
+
+  getAttribute(name) {
+    consumeTag(this[ATTRIBUTE_TAGS].get(name));
+    return super.getAttribute(name);
   }
 
   render() {}
@@ -41,13 +56,9 @@ export default class Component extends HTMLElement {
     } else if (templatable instanceof Element) {
       templateFactory = () => templatable;
     } else if (this.template) {
-      templateFactory = () => {
-        let element = document.createElement('template');
-        element.innerHTML = this.template;
-        return element;
-      };
+      templateFactory = () => makeTemplateElement(this.template);
     } else {
-      templateFactory = () => queryable.querySelector(`#${this.tagName}`);
+      templateFactory = () => queryable.querySelector(`template#${this.tagName}`) ?? makeTemplateElement();
     }
     templates.set(this.tagName, templateFactory());
     customElements.define(this.tagName, this);

diff --git a/lib/renderer.js b/lib/renderer.js
@@ -1,7 +1,6 @@
 import { setOnTagDirtied } from './tracking.js';
 
 let renderScheduled = false;
-let currentlyRendering = false;
 const renderOperations = new Set();
 
 export function registerRenderer(renderFn) {
@@ -13,21 +12,16 @@ export function unregisterRenderer(renderFn) {
 }
 
 export function scheduleRender() {
-  if (currentlyRendering) {
-    throw new Error('scheduling a render while currently rendering is not supported');
-  }
   if (renderScheduled) { return; }
   renderScheduled = true;
   Promise.resolve().then(executeRenderOperations);
 }
 
 function executeRenderOperations() {
-  currentlyRendering = true;
   try {
     renderOperations.forEach(i => i());
   } finally {
     renderScheduled = false;
-    currentlyRendering = false;
   }
 }