@joist/element 3.9.1 → 4.0.0-next.10

package/src/lib/template.ts

@@ -0,0 +1,115 @@
+const TOKEN_PREFIX = '#:';
+
+type Updater = () => void;
+class Updates extends Set<Updater> {}
+type TemplateValueGetter = (key: string) => string;
+
+export interface TemplateOpts {
+  value?: TemplateValueGetter;
+}
+
+export interface RenderOpts {}
+
+export function template(templateOpts?: TemplateOpts) {
+  // Track all nodes that can be updated and their associated property
+  let updates: Updates | null = null;
+
+  return function render<T extends HTMLElement>(this: T) {
+    if (!updates) {
+      updates = findUpdates(
+        this,
+        templateOpts?.value ?? ((key: string) => getTemplateValue(this, key))
+      );
+    } else {
+      for (let update of updates) {
+        update();
+      }
+    }
+  };
+}
+
+function findUpdates(el: HTMLElement, getter: TemplateValueGetter): Updates {
+  const iterator = document.createTreeWalker(el.shadowRoot ?? el, NodeFilter.SHOW_ELEMENT);
+  const updates = new Updates();
+
+  while (iterator.nextNode()) {
+    const res = trackElement(iterator.currentNode, updates, getter);
+
+    if (res !== null) {
+      iterator.currentNode = res;
+    }
+  }
+
+  return updates;
+}
+
+/**
+ * configures and tracks a given Node so that it can be updated in place later.
+ */
+function trackElement(node: Node, updates: Updates, getter: TemplateValueGetter): Node | null {
+  const element = node as Element;
+
+  for (let attr of element.attributes) {
+    const nodeValue = attr.value.trim();
+    const realAttributeName = attr.name.replace(TOKEN_PREFIX, '');
+
+    let update: Updater | null = null;
+
+    if (attr.name.startsWith(`${TOKEN_PREFIX}bind`)) {
+      update = () => {
+        const value = getter(attr.value);
+
+        if (element.textContent !== value) {
+          element.textContent = getter(attr.value);
+        }
+      };
+    } else if (attr.name.startsWith(TOKEN_PREFIX)) {
+      const isBooleanAttr = nodeValue.startsWith('!');
+      const isPositive = nodeValue.startsWith('!!');
+      const propertyKey = nodeValue.replaceAll('!', '');
+
+      if (isBooleanAttr) {
+        update = () => {
+          let value = isPositive ? !!getter(propertyKey) : !getter(propertyKey);
+
+          if (value) {
+            element.setAttribute(realAttributeName, '');
+          } else {
+            element.removeAttribute(realAttributeName);
+          }
+        };
+      } else {
+        const realAttribute = document.createAttribute(realAttributeName);
+        element.setAttributeNode(realAttribute);
+
+        update = () => {
+          const value = getter(nodeValue);
+
+          if (realAttribute.value !== value) {
+            realAttribute.value = value;
+          }
+        };
+      }
+    }
+
+    if (update) {
+      updates.add(update);
+
+      update();
+    }
+  }
+
+  return null;
+}
+
+export function getTemplateValue(obj: object, key: string) {
+  const parsed = key.split('.');
+
+  let pointer: any = obj;
+
+  for (let part of parsed) {
+    pointer = pointer[part];
+  }
+
+  return pointer;
+}

package/src/lib.ts

@@ -1,7 +1,7 @@
-export { ShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
-export { shadow } from './lib/shadow.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
-export { tagName } from './lib/tag-name.js';
 export { element } from './lib/element.js';
+export { query } from './lib/query.js';
+export { template, getTemplateValue } from './lib/template.js';
+export { ready } from './lib/lifecycle.js';

package/target/lib/attr.d.ts

@@ -1 +1,4 @@
-export declare function attr<This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>): ClassAccessorDecoratorResult<This, any>;
+export interface AttrOpts {
+    observed?: boolean;
+}
+export declare function attr(opts?: AttrOpts): <This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>) => ClassAccessorDecoratorResult<This, any>;

package/target/lib/attr.js

@@ -1,35 +1,56 @@
 import { metadataStore } from './metadata.js';
-export function attr({ get, set }, ctx) {
-    const name = String(ctx.name);
-    const meta = metadataStore.read(ctx.metadata);
-    meta.attrs.push(name);
-    return {
-        set(value) {
-            if (value === true) {
-                this.setAttribute(name, '');
-            }
-            else if (value === false) {
-                this.removeAttribute(name);
-            }
-            else {
-                this.setAttribute(name, String(value));
-            }
-            set.call(this, value);
-        },
-        get() {
-            const ogValue = get.call(this);
-            const attr = this.getAttribute(name);
-            if (attr !== null) {
-                if (attr === '') {
-                    return true;
+export function attr(opts) {
+    return function attrDecorator({ get, set }, ctx) {
+        const attrName = parseAttrName(ctx.name);
+        const meta = metadataStore.read(ctx.metadata);
+        meta.attrs.push({
+            propName: ctx.name,
+            attrName,
+            observe: opts?.observed ?? true
+        });
+        return {
+            set(value) {
+                if (value === true) {
+                    this.setAttribute(attrName, '');
+                }
+                else if (value === false) {
+                    this.removeAttribute(attrName);
+                }
+                else {
+                    this.setAttribute(attrName, String(value));
                 }
-                if (typeof ogValue === 'number') {
-                    return Number(attr);
+                set.call(this, value);
+            },
+            get() {
+                const ogValue = get.call(this);
+                const attr = this.getAttribute(attrName);
+                if (attr !== null) {
+                    if (attr === '') {
+                        return true;
+                    }
+                    if (typeof ogValue === 'number') {
+                        return Number(attr);
+                    }
+                    return attr;
                 }
-                return attr;
+                return ogValue;
             }
-            return ogValue;
-        }
+        };
     };
 }
+function parseAttrName(val) {
+    let value;
+    if (typeof val === 'symbol') {
+        if (val.description) {
+            value = val.description;
+        }
+        else {
+            throw new Error('Cannot handle Symbol property without description');
+        }
+    }
+    else {
+        value = val;
+    }
+    return value.toLowerCase().replaceAll(' ', '-');
+}
 //# sourceMappingURL=attr.js.map

package/target/lib/attr.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;IAExC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtB,OAAO;QACL,GAAG,CAAC,KAAc;YAChB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACnB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC9B,CAAC;iBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YACzC,CAAC;YAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC;QACD,GAAG;YACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAErC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;gBAElB,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;oBAChB,OAAO,IAAI,CAAC;gBACd,CAAC;gBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;oBAChC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;gBACtB,CAAC;gBAGD,OAAO,IAAI,CAAC;YACd,CAAC;YAGD,OAAO,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,MAAM,UAAU,IAAI,CAAC,IAAe;IAClC,OAAO,SAAS,aAAa,CAC3B,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;QAExC,MAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;YACd,QAAQ,EAAE,GAAG,CAAC,IAAI;YAClB,QAAQ;YACR,OAAO,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI;SAChC,CAAC,CAAC;QAEH,OAAO;YACL,GAAG,CAAC,KAAc;gBAChB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAClC,CAAC;qBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;oBAC3B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACxB,CAAC;YACD,GAAG;gBACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAEzC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;oBAElB,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;wBAChB,OAAO,IAAI,CAAC;oBACd,CAAC;oBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;wBAChC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;oBACtB,CAAC;oBAGD,OAAO,IAAI,CAAC;gBACd,CAAC;gBAGD,OAAO,OAAO,CAAC;YACjB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}