@shortfuse/materialdesignweb 0.9.0 → 0.9.2

package/core/CustomElement.js

@@ -166,22 +166,22 @@ export default class CustomElement extends HTMLElement {
   /** @type {Map<string, import('./observe.js').ObserverConfiguration<?,?,?>>} */
   static _attrs = new Map();
 
-  /** @type {Map<string, Function[]>} */
+  /** @type {Map<string, Array<(this: any, ...args: any[]) => any>>} */
   static _propChangedCallbacks = new Map();
 
-  /** @type {Map<string, Function[]>} */
+  /** @type {Map<string, Array<(this: any, ...args: any[]) => any>>} */
   static _attributeChangedCallbacks = new Map();
 
-  /** @type {((callback: CallbackArguments) => any)[]} */
+  /** @type {Array<(callback: CallbackArguments) => any>} */
   static _onComposeCallbacks = [];
 
-  /** @type {((callback: CallbackArguments) => any)[]} */
+  /** @type {Array<(callback: CallbackArguments) => any>} */
   static _onConnectedCallbacks = [];
 
-  /** @type {((callback: CallbackArguments) => any)[]} */
+  /** @type {Array<(callback: CallbackArguments) => any>} */
   static _onDisconnectedCallbacks = [];
 
-  /** @type {((callback: CallbackArguments) => any)[]} */
+  /** @type {Array<(callback: CallbackArguments) => any>} */
   static _onConstructedCallbacks = [];
 
   static interpolatesTemplate = true;
@@ -314,7 +314,7 @@ export default class CustomElement extends HTMLElement {
    * @template {typeof CustomElement} T
    * @template {keyof T} K
    * @param {K} collection
-   * @param {T[K] extends (infer R)[] ? R : never} callback
+   * @param {Function} callback
    */
   static _addCallback(collection, callback) {
     if (!this.hasOwnProperty(collection)) {
@@ -336,10 +336,14 @@ export default class CustomElement extends HTMLElement {
    * }}
    */
   static append(...parts) {
-    this._addCallback('_onComposeCallbacks', ({ composition }) => {
+    this._onComposeCallbacks.push(({ composition }) => {
       composition.append(...parts);
     });
-    // @ts-expect-error Can't cast T
+
+    this._addCallback('_onComposeCallbacks', /** @type {(opts: CallbackArguments) => unknown} */ ((opts) => {
+      const { composition } = opts;
+      composition.append(...parts);
+    }));
     return this;
   }
 
@@ -348,7 +352,7 @@ export default class CustomElement extends HTMLElement {
    * May be called multiple times.
    * @type {{
    * <
-   *  T1 extends typeof CustomElement,
+   *  T1 extends (typeof CustomElement),
    *  T2 extends InstanceType<T1>,
    *  T3 extends CompositionCallback<T2, T2>['composed'],
    *  >
@@ -357,7 +361,6 @@ export default class CustomElement extends HTMLElement {
    */
   static recompose(callback) {
     this._addCallback('_onComposeCallbacks', callback);
-    // @ts-expect-error Can't cast T
     return this;
   }
 
@@ -365,7 +368,7 @@ export default class CustomElement extends HTMLElement {
    * Appends styles to composition
    * @type {{
    * <
-   *   T1 extends typeof CustomElement,
+   *   T1 extends (typeof CustomElement),
    *   T2 extends TemplateStringsArray|HTMLStyleElement|CSSStyleSheet|string>(
    *   this: T1,
    *   array: T2,
@@ -374,7 +377,8 @@ export default class CustomElement extends HTMLElement {
    * }}
    */
   static css(array, ...substitutions) {
-    this._addCallback('_onComposeCallbacks', ({ composition }) => {
+    this._addCallback('_onComposeCallbacks', /** @type {(opts: CallbackArguments) => unknown} */ ((opts) => {
+      const { composition } = opts;
       if (typeof array === 'string' || Array.isArray(array)) {
         // @ts-expect-error Complex cast
         composition.append(css(array, ...substitutions));
@@ -382,15 +386,13 @@ export default class CustomElement extends HTMLElement {
         // @ts-expect-error Complex cast
         composition.append(array, ...substitutions);
       }
-    });
+    }));
 
-    // @ts-expect-error Can't cast T
     return this;
   }
 
   /**
-   * Registers class asynchronously at end of current event loop cycle
-   * via `queueMicrotask`. If class is registered before then,
+   * Registers class with customElements. If class is registered before then,
    * does nothing.
    * @type {{
    * <T extends typeof CustomElement>(this: T, elementName: string): T;
@@ -399,11 +401,9 @@ export default class CustomElement extends HTMLElement {
   static autoRegister(elementName) {
     if (this.hasOwnProperty('defined') && this.defined) {
       console.warn(this.elementName, 'already registered.');
-      // @ts-expect-error Can't cast T
       return this;
     }
     this.register(elementName);
-    // @ts-expect-error Can't cast T
     return this;
   }
 
@@ -418,11 +418,11 @@ export default class CustomElement extends HTMLElement {
    * }}
    */
   static html(strings, ...substitutions) {
-    this._addCallback('_onComposeCallbacks', ({ composition }) => {
+    this._addCallback('_onComposeCallbacks', /** @type {(opts: CallbackArguments) => unknown} */ ((opts) => {
+      const { composition } = opts;
       // console.log('onComposed:html', strings);
       composition.append(html(strings, ...substitutions));
-    });
-    // @ts-expect-error Can't cast T
+    }));
     return this;
   }
 
@@ -471,7 +471,6 @@ export default class CustomElement extends HTMLElement {
    * }}
    */
   static readonly(source, options) {
-    // @ts-expect-error Can't cast T
     return this.set(source, { ...options, writable: false });
   }
 
@@ -511,6 +510,7 @@ export default class CustomElement extends HTMLElement {
           {
             enumerable: false,
             configurable: true,
+            // @ts-expect-error Can't index by symbol
             value: source[symbol],
             writable: true,
             ...options,
@@ -530,7 +530,7 @@ export default class CustomElement extends HTMLElement {
    *  FN extends (...args:any[]) => any,
    *  RETURN extends ReturnType<FN>,
    *  SUBCLASS extends ClassOf<RETURN>,
-   *  (this: BASE, mixin: FN): SUBCLASS & BASE
+   *  >(this: BASE, mixin: FN): SUBCLASS & BASE
    * }}
    */
   static mixin(mixin) {
@@ -551,7 +551,6 @@ export default class CustomElement extends HTMLElement {
     customElements.define(this.elementName, this);
     CustomElement.registrations.set(this.elementName, this);
     this.defined = true;
-    // @ts-expect-error Can't cast T
     return this;
   }
 
@@ -633,7 +632,9 @@ export default class CustomElement extends HTMLElement {
 
     this.propList.set(name, config);
 
-    if (attr && (reflect === true || reflect === 'read')) {
+    if (attr
+        && (reflect === true || reflect === 'read')
+        && (config.enumerable || !this.attrList.has(attr) || !this.attrList.get(attr).enumerable)) {
       this.attrList.set(attr, config);
     }
 
@@ -699,25 +700,40 @@ export default class CustomElement extends HTMLElement {
     return this;
   }
 
+  /**
+   * Assigns values directly to all instances (via prototype)
+   * @type {{
+   * <
+   *  CLASS extends typeof CustomElement,
+   *  ARGS extends ConstructorParameters<CLASS>,
+   *  INSTANCE extends InstanceType<CLASS>,
+   *  PROP extends string,
+   *  PROPS extends INSTANCE & Record<PROP, never>
+   *  >(this: CLASS, name: PROP):
+   *  CLASS & Class<PROPS,ARGS>
+   * }}
+   */
   static undefine(name) {
     Reflect.deleteProperty(this.prototype, name);
-    if (!this.propList.has(name)) return this;
-    const { watchers, attr, reflect } = this.propList.get(name);
-    if (watchers.length && this.propChangedCallbacks.has(name)) {
-      const propWatchers = this.propChangedCallbacks.get(name);
-      for (const watcher of watchers) {
-        const index = propWatchers.indexOf(watcher);
-        if (index !== -1) {
-          console.warn('Unwatching', name);
-          propWatchers.splice(index, 1);
+    if (this.propList.has(name)) {
+      const { watchers, attr, reflect } = this.propList.get(name);
+      if (watchers.length && this.propChangedCallbacks.has(name)) {
+        const propWatchers = this.propChangedCallbacks.get(name);
+        for (const [prop, watcher] of watchers) {
+          const index = propWatchers.indexOf(watcher);
+          if (index !== -1) {
+            console.warn('Unwatching', name);
+            propWatchers.splice(index, 1);
+          }
         }
       }
+      if (attr && (reflect === true || reflect === 'read')) {
+        this.attrList.delete(attr);
+      }
+      this.propList.delete(name);
     }
-    if (attr && (reflect === true || reflect === 'read')) {
-      this.attrList.delete(attr);
-    }
-    this.propList.delete(name);
 
+    // @ts-expect-error Can't cast T
     return this;
   }
 
@@ -770,6 +786,7 @@ export default class CustomElement extends HTMLElement {
         : (typeof typeOrOptions === 'string'
           ? { type: typeOrOptions }
           : typeOrOptions);
+      // @ts-expect-error Adding property to this
       defineObservableProperty(this, name, {
         reflect: false,
         ...options,
@@ -829,7 +846,6 @@ export default class CustomElement extends HTMLElement {
       },
     });
 
-    // @ts-expect-error Can't cast T
     return this;
   }
 
@@ -847,20 +863,17 @@ export default class CustomElement extends HTMLElement {
    */
   static childEvents(listenerMap, options) {
     for (const [tag, listeners] of Object.entries(listenerMap)) {
-      // @ts-expect-error Can't cast T
       this.events(listeners, {
         tag: attrNameFromPropName(tag),
         ...options,
       });
     }
 
-    // @ts-expect-error Can't cast T
     return this;
   }
 
   /** @type {typeof CustomElement['events']} */
   static rootEvents(listeners, options) {
-    // @ts-expect-error Can't cast T
     return this.events(listeners, {
       tag: Composition.shadowRootTag,
       ...options,
@@ -899,6 +912,7 @@ export default class CustomElement extends HTMLElement {
         default:
           if (name.endsWith('Changed')) {
             const prop = name.slice(0, name.length - 'Changed'.length);
+            // @ts-expect-error Computed key
             this.onPropChanged({ [prop]: fn });
             continue;
           }
@@ -907,7 +921,6 @@ export default class CustomElement extends HTMLElement {
       this._addCallback(arrayPropName, fn);
     }
 
-    // @ts-expect-error Can't cast T
     return this;
   }
 
@@ -942,7 +955,6 @@ export default class CustomElement extends HTMLElement {
       }
     }
 
-    // @ts-expect-error Can't cast T
     return this;
   }
 
@@ -976,7 +988,6 @@ export default class CustomElement extends HTMLElement {
       }
     }
 
-    // @ts-expect-error Can't cast T
     return this;
   }
 
@@ -992,6 +1003,11 @@ export default class CustomElement extends HTMLElement {
   /** @type {Composition<?>} */
   #composition;
 
+  #patching = false;
+
+  /** @type {Array<[string, any, CustomElement]>} */
+  #pendingPatchRenders = [];
+
   /** @type {Map<string,{stringValue:string, parsedValue:any}>} */
   _propAttributeCache;
 
@@ -1045,7 +1061,9 @@ export default class CustomElement extends HTMLElement {
    * }}
    */
   propChangedCallback(name, oldValue, newValue, changes = newValue) {
-    if (!this.patching) {
+    if (this.#patching) {
+      this.#pendingPatchRenders.push([name, changes, this]);
+    } else {
       this.render.byProp(name, changes, this);
       // this.render({ [name]: changes });
     }
@@ -1159,11 +1177,17 @@ export default class CustomElement extends HTMLElement {
     this.propChangedCallback(name, oldValue, newValue, changes);
   }
 
+  /** @param {any} patch */
   patch(patch) {
-    this.patching = true;
+    this.#patching = true;
     applyMergePatch(this, patch);
+    for (const [name, changes, state] of this.#pendingPatchRenders) {
+      if (name in patch) continue;
+      this.render.byProp(name, changes, state);
+    }
+    this.#pendingPatchRenders.slice(0, this.#pendingPatchRenders.length);
     this.render(patch);
-    this.patching = false;
+    this.#patching = false;
   }
 
   /**
@@ -1224,6 +1248,10 @@ export default class CustomElement extends HTMLElement {
 
   get unique() { return false; }
 
+  /**
+   * @template {CustomElement} T
+   * @this {T}
+   */
   get callbackArguments() {
     // eslint-disable-next-line no-return-assign
     return this._callbackArguments ??= {

package/core/customTypes.js

@@ -4,7 +4,7 @@ import { attrNameFromPropName } from './dom.js';
 
 /**
  * @see https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-attributes
- * @type {import('./observe.js').ObserverOptions<'function',EventListener, unknown>}
+ * @type {import('./observe.js').ObserverOptions<'function',EventListener, CustomElement>}
  */
 export const EVENT_HANDLER_TYPE = {
   type: 'function',
@@ -15,16 +15,31 @@ export const EVENT_HANDLER_TYPE = {
     if (oldValue == null && newValue == null) return;
     // Must continue even if oldValue === newValue;
     if (newValue == null) {
+      // @ts-expect-error Can't verify key
       this[name] = null;
       return;
     }
-    // Assign to temp element, allow it to parse and then copy result.
-    // Let browser parse instead of using eval()
-    // CSP Violations will be thrown by browser on failure and result in `null`
-    const button = document.createElement('button');
-    button.setAttribute('onclick', newValue);
-    const fn = button.onclick;
-    button.remove();
+    let fn;
+    try {
+      // Use eval to include scope
+      // https://blog.ltgt.net/html-event-handlers/
+      const scopedCode = 'with(this.ownerDocument ?? document){'
+      + 'with(this.form ?? {}){'
+      + `with(this){${newValue}}`
+      + '}'
+      + '}';
+      // eslint-disable-next-line no-new-func
+      fn = new Function(`return function ${name}(event){${scopedCode}}`)();
+    } catch {
+      // Assign to temp element, allow it to parse and then copy result.
+      // Let browser parse instead of using eval()
+      // CSP Violations will be thrown by browser on failure and result in `null`
+      const button = (this.ownerDocument ?? document).createElement('button');
+      button.setAttribute('onclick', newValue);
+      fn = button.onclick;
+    }
+
+    // @ts-expect-error Can't verify key
     this[name] = fn;
   },
   propChangedCallback(name, oldValue, newValue) {
@@ -38,23 +53,23 @@ export const EVENT_HANDLER_TYPE = {
   },
 };
 
-const weakRefValues = new WeakMap();
+// const weakRefValues = new WeakMap();
 
-/**
- * @type {import('./observe.js').ObserverOptions<'object',HTMLElement>}
- */
-export const WEAKREF_TYPE = {
-  type: 'object',
-  reflect: false,
-  value: null,
-  parser(v) { return new WeakRef(v); },
-  get() {
-    if (weakRefValues.has(this)) {
-      return weakRefValues.get(this).deref();
-    }
-    return undefined;
-  },
-};
+// /**
+//  * @type {import('./observe.js').ObserverOptions<'object',HTMLElement>}
+//  */
+// export const WEAKREF_TYPE = {
+//   type: 'object',
+//   reflect: false,
+//   value: null,
+//   parser(v) { return new WeakRef(v); },
+//   get() {
+//     if (weakRefValues.has(this)) {
+//       return weakRefValues.get(this).deref();
+//     }
+//     return undefined;
+//   },
+// };
 
 /**
  * @typedef {Object} ElementStylerOptions
@@ -75,8 +90,10 @@ const queuedPropsByElement = new WeakMap();
 const previousAnimationsByElement = new WeakMap();
 
 /**
- * @param {string} name
- * @this {CustomElement}
+ * @template {CustomElement} T
+ * @template {keyof T & string} K
+ * @param {K} name
+ * @this {T & Record<K, ElementStylerOptions|null>}
  */
 function elementStylerMicrotaskCallback(name) {
   const previousAnimations = previousAnimationsByElement.get(this);

package/core/dom.js

@@ -49,6 +49,7 @@ export const SAFARI_VERSION = CHROME_VERSION || !navigator.userAgent.includes('A
  */
 export function isFocused(element) {
   if (!element) return false;
+  // @ts-ignore runtime check
   if (FIREFOX_VERSION < 113 && element.constructor.formAssociated && element.hasAttribute('disabled')) {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1818287
     console.warn('Firefox bug 1818287: Disabled form associated custom element cannot receive focus.');

package/core/jsonMergePatch.js

@@ -8,17 +8,22 @@
  * @return {T1|T2|(T1 & T2)}
  */
 export function applyMergePatch(target, patch) {
+  // @ts-ignore Runtime check
   if (target === patch) return target;
   if (target == null || patch == null || typeof patch !== 'object') return patch;
   if (typeof target !== 'object') {
+    // @ts-ignore Forced cast to object
     target = {};
   }
   for (const [key, value] of Object.entries(patch)) {
     if (value == null) {
+      // @ts-ignore Runtime check
       if (key in target) {
+        // @ts-ignore T1 is always object
         delete target[key];
       }
     } else {
+      // @ts-ignore T1 is forced object
       target[key] = applyMergePatch(target[key], value);
     }
   }
@@ -55,20 +60,24 @@ export function buildMergePatch(previous, current, arrayStrategy = 'reference')
     }
     for (const [index, value] of current.entries()) {
       if (value === null) {
+        // @ts-ignore patch is ArrayLike
         patch[index] = null;
         continue;
       }
       if (value == null) {
         continue; // Skip undefined
       }
+      // @ts-ignore previous is ArrayLike
       const changes = buildMergePatch(previous[index], value, arrayStrategy);
       if (changes !== null) {
+        // @ts-ignore patch is ArrayLike
         patch[index] = changes;
       }
     }
     // for (let i = current.length; i < previous.length; i++) {
     //   patch[i] = null;
     // }
+    // @ts-ignore previous is ArrayLike
     if (current.length !== previous.length) {
       patch.length = current.length;
     }
@@ -79,20 +88,23 @@ export function buildMergePatch(previous, current, arrayStrategy = 'reference')
   for (const [key, value] of Object.entries(current)) {
     previousKeys.delete(key);
     if (value === null) {
+      // @ts-ignore patch is Object
       patch[key] = null;
       continue;
     }
     if (value == null) {
       continue; // Skip undefined
     }
+    // @ts-ignore previous is Object
     const changes = buildMergePatch(previous[key], value, arrayStrategy);
     if (changes !== null) {
+      // @ts-ignore patch is Object
       patch[key] = changes;
     }
   }
   for (const key of previousKeys) {
+    // @ts-ignore patch is Object
     patch[key] = null;
-    console.log('removing', key);
   }
 
   return patch;
@@ -113,9 +125,11 @@ export function hasMergePatch(target, patch) {
   }
   for (const [key, value] of Object.entries(patch)) {
     if (value == null) {
+      // @ts-ignore Runtime check
       if (key in target) {
         return true;
       }
+    // @ts-ignore T is object
     } else if (hasMergePatch(target[key], value)) {
       return true;
     }