@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/core/CustomElement.js

@@ -3,6 +3,7 @@
 import Composition from './Composition.js';
 import { ICustomElement } from './ICustomElement.js';
 import { attrNameFromPropName, attrValueFromDataValue } from './dom.js';
+import { applyMergePatch } from './jsonMergePatch.js';
 import { defineObservableProperty } from './observe.js';
 import { addInlineFunction, css, html } from './template.js';
 
@@ -175,14 +176,12 @@ export default class CustomElement extends ICustomElement {
    * @type {typeof ICustomElement['autoRegister']}
    */
   static autoRegister(elementName) {
-    if (elementName) {
-      this.elementName = elementName;
+    if (this.hasOwnProperty('defined') && this.defined) {
+      console.warn(this.elementName, 'already registered.');
+      // @ts-expect-error Can't cast T
+      return this;
     }
-    queueMicrotask(() => {
-      if (this.autoRegistration) {
-        this.register();
-      }
-    });
+    this.register(elementName);
     // @ts-expect-error Can't cast T
     return this;
   }
@@ -214,9 +213,7 @@ export default class CustomElement extends ICustomElement {
   }
 
   /**
-   * Extends base class into a new class.
-   * Use to avoid mutating base class.
-   * TODO: Add constructor arguments typing
+   * Fix for Typescript not parsing constructor params
    * @type {typeof ICustomElement.tsClassFix}
    */
   static tsClassFix() {
@@ -250,8 +247,8 @@ export default class CustomElement extends ICustomElement {
   static set(source, options) {
     Object.defineProperties(
       this.prototype,
-      Object.fromEntries(
-        Object.entries(source).map(([name, value]) => {
+      Object.fromEntries([
+        ...Object.entries(source).map(([name, value]) => {
           // Tap into .map() to avoid double iteration
           // Property may be redefined observable
           this.undefine(name);
@@ -266,7 +263,17 @@ export default class CustomElement extends ICustomElement {
             },
           ];
         }),
-      ),
+        ...Object.getOwnPropertySymbols(source).map((symbol) => [
+          symbol,
+          {
+            enumerable: false,
+            configurable: true,
+            value: source[symbol],
+            writable: true,
+            ...options,
+          },
+        ]),
+      ]),
     );
     // @ts-expect-error Can't cast T
     return this;
@@ -284,13 +291,7 @@ export default class CustomElement extends ICustomElement {
    * Registers class with window.customElements synchronously
    * @type {typeof ICustomElement['register']}
    */
-  static register(elementName, force = false) {
-    if (this.hasOwnProperty('defined') && this.defined && !force) {
-      console.warn(this.elementName, 'already registered.');
-      // @ts-expect-error Can't cast T
-      return this;
-    }
-
+  static register(elementName) {
     if (elementName) {
       this.elementName = elementName;
     }
@@ -414,10 +415,10 @@ export default class CustomElement extends ICustomElement {
 
   static undefine(name) {
     Reflect.deleteProperty(this.prototype, name);
-    const config = this.propList.get(name);
-    if (config && config.watchers.length) {
-      const propWatchers = this.propChangedCallbacks.get(name);
-      if (propWatchers) {
+    if (this.propList.has(name)) {
+      const config = this.propList.get(name);
+      if (config.watchers.length && this.propChangedCallbacks.has(name)) {
+        const propWatchers = this.propChangedCallbacks.get(name);
         for (const watcher of config.watchers) {
           const index = propWatchers.indexOf(watcher);
           if (index !== -1) {
@@ -473,6 +474,20 @@ export default class CustomElement extends ICustomElement {
       composed({ composition }) {
         for (const [key, listenerOptions] of Object.entries(listeners)) {
           const [, flags, type] = key.match(EVENT_PREFIX_REGEX);
+          // TODO: Make abstract
+          let prop;
+          /** @type {string[]} */
+          let deepProp = [];
+          if (typeof listenerOptions === 'string') {
+            const parsedProps = listenerOptions.split('.');
+            if (parsedProps.length === 1) {
+              prop = listenerOptions;
+              deepProp = [];
+            } else {
+              prop = parsedProps[0];
+              deepProp = parsedProps;
+            }
+          }
           composition.addCompositionEventListener({
             type,
             once: flags?.includes('1'),
@@ -482,7 +497,7 @@ export default class CustomElement extends ICustomElement {
               typeof listenerOptions === 'function'
                 ? { handleEvent: listenerOptions }
                 : (typeof listenerOptions === 'string'
-                  ? { prop: listenerOptions }
+                  ? { prop, deepProp }
                   : listenerOptions)
             ),
             ...(
@@ -500,9 +515,10 @@ export default class CustomElement extends ICustomElement {
 
   /** @type {typeof ICustomElement.childEvents} */
   static childEvents(listenerMap, options) {
-    for (const [id, listeners] of Object.entries(listenerMap)) {
+    for (const [tag, listeners] of Object.entries(listenerMap)) {
+      // @ts-expect-error Can't cast T
       this.events(listeners, {
-        id,
+        tag: attrNameFromPropName(tag),
         ...options,
       });
     }
@@ -511,6 +527,15 @@ export default class CustomElement extends ICustomElement {
     return this;
   }
 
+  /** @type {typeof ICustomElement.events} */
+  static rootEvents(listeners, options) {
+    // @ts-expect-error Can't cast T
+    return this.events(listeners, {
+      tag: Composition.shadowRootTag,
+      ...options,
+    });
+  }
+
   /** @type {typeof ICustomElement['on']} */
   static on(nameOrCallbacks, callback) {
     const callbacks = typeof nameOrCallbacks === 'string'
@@ -548,12 +573,11 @@ export default class CustomElement extends ICustomElement {
   /** @type {typeof ICustomElement['onPropChanged']} */
   static onPropChanged(options) {
     for (const [prop, callback] of Object.entries(options)) {
-      let array = this.propChangedCallbacks.get(prop);
-      if (!array) {
-        array = [];
-        this.propChangedCallbacks.set(prop, array);
+      if (this.propChangedCallbacks.has(prop)) {
+        this.propChangedCallbacks.get(prop).push(callback);
+      } else {
+        this.propChangedCallbacks.set(prop, [callback]);
       }
-      array.push(callback);
     }
 
     // @ts-expect-error Can't cast T
@@ -564,12 +588,11 @@ export default class CustomElement extends ICustomElement {
   static onAttributeChanged(options) {
     for (const [name, callback] of Object.entries(options)) {
       const lcName = name.toLowerCase();
-      let array = this.attributeChangedCallbacks.get(lcName);
-      if (!array) {
-        array = [];
-        this.attributeChangedCallbacks.set(lcName, array);
+      if (this.attributeChangedCallbacks.has(lcName)) {
+        this.attributeChangedCallbacks.get(lcName).push(callback);
+      } else {
+        this.attributeChangedCallbacks.set(lcName, [callback]);
       }
-      array.push(callback);
     }
 
     // @ts-expect-error Can't cast T
@@ -588,7 +611,7 @@ export default class CustomElement extends ICustomElement {
   /** @type {Composition<?>} */
   #composition;
 
-  /** @type {Map<string,null|[string,any]>} */
+  /** @type {Map<string,{stringValue:string, parsedValue:any}>} */
   _propAttributeCache;
 
   /** @type {import('./ICustomElement.js').CallbackArguments} */
@@ -604,33 +627,38 @@ export default class CustomElement extends ICustomElement {
 
     this.attachShadow({ mode: 'open', delegatesFocus: this.delegatesFocus });
 
-    this.composition.initialRender(this.shadowRoot, this);
+    /**
+     * Updates nodes based on data
+     * Expects data in JSON Merge Patch format
+     * @see https://www.rfc-editor.org/rfc/rfc7386
+     * @param {Partial<?>} changes
+     * @param {any} data
+     * @return {void}
+     */
+    this.render = this.composition.render(
+      this,
+      this,
+      {
+        store: this,
+        target: this.shadowRoot,
+        context: this,
+      },
+    );
 
     for (const callback of this.static._onConstructedCallbacks) {
       callback.call(this, this.callbackArguments);
     }
   }
 
-  /**
-   * Updates nodes based on data
-   * Expects data in JSON Merge Patch format
-   * @see https://www.rfc-editor.org/rfc/rfc7386
-   * @param {?} data
-   * @param {?} [store]
-   * @return {void}
-   */
-  render(data, store) {
-    // console.log('render', data);
-    this.composition.render(this.shadowRoot, data, this, store ? { ...this, store } : this);
-  }
-
   /** @type {InstanceType<typeof ICustomElement>['propChangedCallback']} */
   propChangedCallback(name, oldValue, newValue, changes = newValue) {
-    this.render({ [name]: changes });
+    if (!this.patching) {
+      this.render.byProp(name, changes, this);
+      // this.render({ [name]: changes });
+    }
 
-    const callbacks = this.static.propChangedCallbacks.get(name);
-    if (callbacks) {
-      for (const callback of callbacks) {
+    if (this.static._propChangedCallbacks.has(name)) {
+      for (const callback of this.static.propChangedCallbacks.get(name)) {
         callback.call(this, oldValue, newValue, changes, this);
       }
     }
@@ -642,9 +670,9 @@ export default class CustomElement extends ICustomElement {
    * @param {string|null} newValue
    */
   attributeChangedCallback(name, oldValue, newValue) {
-    const callbacks = this.static.attributeChangedCallbacks.get(name.toLowerCase());
-    if (callbacks) {
-      for (const callback of callbacks) {
+    const lcName = name.toLowerCase();
+    if (this.static.attributeChangedCallbacks.has(lcName)) {
+      for (const callback of this.static.attributeChangedCallbacks.get(lcName)) {
         callback.call(this, oldValue, newValue, this);
       }
     }
@@ -660,10 +688,10 @@ export default class CustomElement extends ICustomElement {
         return;
       }
 
-      const [stringValue] = this.attributeCache.get(name) ?? [null, null];
-      if (stringValue === newValue) {
-        // Attribute was changed via data change event. Ignore.
-        return;
+      let cacheEntry;
+      if (this.attributeCache.has(lcName)) {
+        cacheEntry = this.attributeCache.get(lcName);
+        if (cacheEntry.stringValue === newValue) return;
       }
 
       // @ts-expect-error any
@@ -679,7 +707,14 @@ export default class CustomElement extends ICustomElement {
       }
       // "Remember" that this attrValue equates to this data value
       // Avoids rewriting attribute later on data change event
-      this.attributeCache.set(name, [newValue, parsedValue]);
+      if (cacheEntry) {
+        cacheEntry.stringValue = newValue;
+        cacheEntry.parsedValue = parsedValue;
+      } else {
+        this.attributeCache.set(lcName, {
+          stringValue: newValue, parsedValue,
+        });
+      }
       // @ts-expect-error any
       this[config.key] = parsedValue;
       return;
@@ -697,19 +732,32 @@ export default class CustomElement extends ICustomElement {
    * @param {any} changes
    */
   _onObserverPropertyChanged(name, oldValue, newValue, changes) {
-    const { reflect, attr } = this.static.propList.get(name);
-    if (attr && (reflect === true || reflect === 'write')) {
-      const [, dataValue] = this.attributeCache.get(attr) ?? [null, null];
-      // Don't change attribute if data value is equivalent
-      // (eg: Boolean('foo') === true; Number("1.0") === 1)
-      if (dataValue !== newValue) {
-        const attrValue = attrValueFromDataValue(newValue);
-        // Cache attrValue to ignore attributeChangedCallback later
-        this.attributeCache.set(attr, [attrValue, newValue]);
-        if (attrValue == null) {
-          this.removeAttribute(attr);
+    if (this.static.propList.has(name)) {
+      const { reflect, attr } = this.static.propList.get(name);
+      if (attr && (reflect === true || reflect === 'write')) {
+        const lcName = attr.toLowerCase();
+        /** @type {{stringValue:string, parsedValue:any}} */
+        let cacheEntry;
+        let needsWrite = false;
+        if (this.attributeCache.has(lcName)) {
+          cacheEntry = this.attributeCache.get(lcName);
+          needsWrite = (cacheEntry.parsedValue !== newValue);
         } else {
-          this.setAttribute(attr, attrValue);
+        // @ts-ignore skip cast
+          cacheEntry = {};
+          this.attributeCache.set(lcName, cacheEntry);
+          needsWrite = true;
+        }
+        if (needsWrite) {
+          const stringValue = attrValueFromDataValue(newValue);
+          cacheEntry.parsedValue = newValue;
+          cacheEntry.stringValue = stringValue;
+          // Cache attrValue to ignore attributeChangedCallback later
+          if (stringValue == null) {
+            this.removeAttribute(attr);
+          } else {
+            this.setAttribute(attr, stringValue);
+          }
         }
       }
     }
@@ -718,8 +766,15 @@ export default class CustomElement extends ICustomElement {
     this.propChangedCallback(name, oldValue, newValue, changes);
   }
 
+  patch(patch) {
+    this.patching = true;
+    applyMergePatch(this, patch);
+    this.render(patch);
+    this.patching = false;
+  }
+
   /**
-   * Proxy object that returns shadow DOM elements by ID.
+   * Proxy object that returns shadow DOM elements by tag.
    * If called before interpolation (eg: on composed), returns from template
    * @return {Record<string,HTMLElement>}
    */
@@ -728,32 +783,40 @@ export default class CustomElement extends ICustomElement {
     return (this.#refsProxy ??= new Proxy({}, {
       /**
        * @param {any} target
-       * @param {string} id
+       * @param {string} tag
        * @return {Element}
        */
-      get: (target, id) => {
+      get: (target, tag) => {
         if (!this.#composition) {
           console.warn(this.static.name, 'Attempted to access references before composing!');
         }
         const composition = this.composition;
+        let element;
         if (!composition.interpolated) {
-          let element = this.#refsCompositionCache.get(id)?.deref();
-          if (element) return element;
-          const formattedId = attrNameFromPropName(id);
+          if (this.#refsCompositionCache.has(tag)) {
+            element = this.#refsCompositionCache.get(tag).deref();
+            if (element) return element;
+          }
+          const formattedTag = attrNameFromPropName(tag);
           // console.warn(this.tagName, 'Returning template reference');
-          element = composition.template.getElementById(formattedId);
+          element = composition.template.getElementById(formattedTag);
           if (!element) return null;
-          this.#refsCompositionCache.set(id, new WeakRef(element));
+          this.#refsCompositionCache.set(tag, new WeakRef(element));
           return element;
         }
-        let element = this.#refsCache.get(id)?.deref();
-        if (element) {
-          return element;
+        if (this.#refsCache.has(tag)) {
+          element = this.#refsCache.get(tag).deref();
+          if (element) {
+            return element;
+          }
         }
-        const formattedId = attrNameFromPropName(id);
-        element = composition.getElement(this.shadowRoot, formattedId);
+
+        const formattedTag = attrNameFromPropName(tag);
+        const tagIndex = this.composition.tags.indexOf(formattedTag);
+        element = this.render.state.refs[tagIndex];
+
         if (!element) return null;
-        this.#refsCache.set(id, new WeakRef(element));
+        this.#refsCache.set(tag, new WeakRef(element));
         return element;
       },
     }));