@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/core/customTypes.js

@@ -1,8 +1,5 @@
 /** @typedef {import('./CustomElement').default} CustomElement */
 
-/** @type {WeakMap<HTMLElement, EventListener>} */
-const eventHandlerValues = new Map();
-
 /**
  * @see https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-attributes
  * @type {import('./typings.js').ObserverOptions<'function',EventListener, unknown>}
@@ -11,11 +8,10 @@ export const EVENT_HANDLER_TYPE = {
   type: 'function',
   reflect: 'read',
   value: null,
-  values: eventHandlerValues,
   parser(v) { return v; },
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue == null && newValue == null) return;
-    // Must continue if oldValue === newValue;
+    // Must continue even if oldValue === newValue;
     if (newValue == null) {
       this[name] = null;
       return;
@@ -49,39 +45,51 @@ export const WEAKREF_TYPE = {
   type: 'object',
   reflect: false,
   value: null,
-  values: weakRefValues,
   parser(v) { return new WeakRef(v); },
   get() {
-    return weakRefValues.get(this)?.deref();
+    if (weakRefValues.has(this)) {
+      return weakRefValues.get(this).deref();
+    }
+    return undefined;
   },
 };
 
-/** @type {WeakMap<any, Animation>} */
-const elementStylerLastAnimation = new WeakMap();
-/** @type {WeakMap<CustomElement, ElementStylerOptions>} */
-const elementStylerValues = new WeakMap();
-/** @type {WeakSet<any>} */
-const elementStylerHasQueue = new WeakSet();
-
 /**
  * @typedef {Object} ElementStylerOptions
- * @prop {string} target Target ID
+ * @prop {string|HTMLElement|null} target tag, element or null (host)
  * @prop {Keyframe} styles
  * @prop {EffectTiming} [timing]
  */
 
-/** @this {CustomElement} */
-function elementStylerRAFCallback() {
-  let previousAnimation = elementStylerLastAnimation.get(this);
-  const value = elementStylerValues.get(this);
+/** @type {WeakMap<CustomElement, Set<string>} */
+const queuedPropsByElement = new WeakMap();
+
+/** @type {WeakMap<CustomElement, Map<string, Animation>>} */
+const previousAnimationsByElement = new WeakMap();
+
+/**
+ * @param {string} name
+ * @this {CustomElement}
+ */
+function elementStylerMicrotaskCallback(name) {
+  const previousAnimations = previousAnimationsByElement.get(this);
+  /** @type {Animation} */
+  let previousAnimation;
+  if (previousAnimations?.has(name)) {
+    previousAnimation = previousAnimations.get(name);
+  }
+  const value = this[name];
   if (!value) {
     previousAnimation?.cancel();
     return;
   }
+  const { target, styles, timing } = value;
   /** @type {HTMLElement} */
-  const el = value.target ? this.composition.getElement(this.shadowRoot, value.target) : this;
-  const currentAnimation = el.animate(value.styles, {
-    ...value.timing,
+  const el = target
+    ? (typeof target === 'string' ? this.refs[target] : target)
+    : this;
+  const currentAnimation = el.animate(styles, {
+    ...timing,
     fill: 'forwards',
   });
   currentAnimation.onremove = () => {
@@ -93,22 +101,32 @@ function elementStylerRAFCallback() {
     previousAnimation?.cancel();
     previousAnimation = null;
   };
-  elementStylerLastAnimation.set(this, currentAnimation);
-  elementStylerHasQueue.delete(this);
+  if (previousAnimations) {
+    previousAnimations.set(name, currentAnimation);
+  } else {
+    previousAnimationsByElement.set(this, new Map([[name, currentAnimation]]));
+  }
+  queuedPropsByElement.get(this).delete(name);
 }
 
 /** @type {import('./typings.js').ObserverOptions<'object',ElementStylerOptions, CustomElement>} */
 export const ELEMENT_STYLER_TYPE = {
   type: 'object',
   reflect: false,
-  values: elementStylerValues,
   diff: null, // Skip computing entire change
-  changedCallback(oldValue, newValue) {
-    const hasQueue = elementStylerHasQueue.has(this);
+  propChangedCallback(name, oldValue, newValue) {
+    if (!this.isConnected) return;
+    const queuedProps = queuedPropsByElement.get(this);
+    let hasQueue = false;
+    if (queuedProps?.has(name)) {
+      hasQueue = true;
+    }
     if (!newValue) {
       if (!hasQueue) return;
-      console.warn('debug needed of cancel needed');
-      elementStylerHasQueue.delete(this);
+      console.warn('debug of cancel needed');
+      if (queuedProps) {
+        queuedProps.delete(name);
+      }
       return;
     }
 
@@ -117,9 +135,13 @@ export const ELEMENT_STYLER_TYPE = {
       return;
     }
 
+    if (queuedProps) {
+      queuedProps.add(name);
+    } else {
+      queuedPropsByElement.set(this, new Set([name]));
+    }
     // Animation styles may trickle in steps, so queue a microtask before doing any work.
     // Using requestAnimationFrame would fire one frame too late for CSS animations already scheduled
-    queueMicrotask(elementStylerRAFCallback.bind(this));
-    elementStylerHasQueue.add(this);
+    queueMicrotask(elementStylerMicrotaskCallback.bind(this, name));
   },
 };

package/{utils → core}/jsonMergePatch.js

@@ -9,8 +9,8 @@
  */
 export function applyMergePatch(target, patch) {
   if (target === patch) return target;
-  if (patch == null || typeof patch !== 'object') return patch;
-  if (target != null && typeof target !== 'object') {
+  if (target == null || patch == null || typeof patch !== 'object') return patch;
+  if (typeof target !== 'object') {
     target = {};
   }
   for (const [key, value] of Object.entries(patch)) {
@@ -28,26 +28,52 @@ export function applyMergePatch(target, patch) {
 /**
  * Creates a JSON Merge patch based
  * Allows different strategies for arrays
- *  - `clone`: Per spec, clones all entries with no inspection.
+ *  - `reference`: Per spec, returns array as is
+ *  - `clone`: Clones all entries with no inspection.
  *  - `object`: Convert to flattened, array-like objects. Requires
  *    consumer of patch to be aware of the schema beforehand.
  * @param {object|number|string|boolean} previous
  * @param {object|number|string|boolean} current
- * @param {'clone'|'object'} [arrayStrategy='clone']
+ * @param {'clone'|'object'|'reference'} [arrayStrategy='reference']
  * @return {any} Patch
  */
-export function buildMergePatch(previous, current, arrayStrategy = 'clone') {
+export function buildMergePatch(previous, current, arrayStrategy = 'reference') {
   if (previous === current) return null;
   if (current == null || typeof current !== 'object') return current;
   if (previous == null || typeof previous !== 'object') {
     return structuredClone(current);
   }
-  const isArray = Array.isArray(current);
-  if (isArray && arrayStrategy === 'clone') {
-    return structuredClone(current);
-  }
 
   const patch = {};
+  if (Array.isArray(current)) {
+    if (arrayStrategy === 'reference') {
+      return current;
+    }
+    // Assume previous is array
+    if (arrayStrategy === 'clone') {
+      return structuredClone(current);
+    }
+    for (const [index, value] of current.entries()) {
+      if (value == null) {
+        console.warn('Nullish value found at', index);
+        continue;
+      }
+      const changes = buildMergePatch(previous[index], value, arrayStrategy);
+      if (changes === null) {
+        continue;
+      } else {
+        patch[index] = changes;
+      }
+    }
+    // for (let i = current.length; i < previous.length; i++) {
+    //   patch[i] = null;
+    // }
+    if (current.length !== previous.length) {
+      patch.length = current.length;
+    }
+    return patch;
+  }
+
   const previousKeys = new Set(Object.keys(previous));
   for (const [key, value] of Object.entries(current)) {
     previousKeys.delete(key);
@@ -57,7 +83,7 @@ export function buildMergePatch(previous, current, arrayStrategy = 'clone') {
     }
     const changes = buildMergePatch(previous[key], value, arrayStrategy);
     if (changes === null) {
-      console.log('keeping', key);
+      // console.log('keeping', key);
     } else {
       patch[key] = changes;
     }
@@ -67,10 +93,6 @@ export function buildMergePatch(previous, current, arrayStrategy = 'clone') {
     console.log('removing', key);
   }
 
-  if (isArray && arrayStrategy === 'object' && current.length !== previous.length) {
-    patch.length = current.length;
-  }
-
   return patch;
 }
 

package/core/observe.js

@@ -1,6 +1,5 @@
-import { buildMergePatch, hasMergePatch } from '../utils/jsonMergePatch.js';
-
 import { attrNameFromPropName } from './dom.js';
+import { buildMergePatch, hasMergePatch } from './jsonMergePatch.js';
 
 /** @typedef {import('./typings.js').ObserverPropertyType} ObserverPropertyType */
 
@@ -43,15 +42,24 @@ const DEFAULT_OBJECT_PARSER = (o) => o;
  * @param {T} b
  * @return {boolean} true if equal
  */
-export const DEFAULT_OBJECT_COMPARATOR = (a, b) => !hasMergePatch(a, b);
+const DEFAULT_OBJECT_COMPARATOR = (a, b) => !hasMergePatch(a, b);
 
 /**
+ * Always invoke change on set
  * @template T
  * @param {T} a
  * @param {T} b
  * @return {boolean} true if equal
  */
-export const DEFAULT_OBJECT_DIFF = (a, b) => buildMergePatch(a, b, 'object');
+const DEFAULT_ARRAY_COMPARATOR = (a, b) => false;
+
+/**
+ * @template T
+ * @param {T} a
+ * @param {T} b
+ * @return {boolean} true if equal
+ */
+const DEFAULT_OBJECT_DIFF = (a, b) => buildMergePatch(a, b, 'reference');
 
 /**
  * @param {ObserverPropertyType} type
@@ -78,6 +86,48 @@ function emptyFromType(type) {
   }
 }
 
+/**
+ * @template {Object} T
+ * @param {T} proxyTarget
+ * @param {Set<string>} set
+ * @param {Set<string>} deepSet
+ * @param {string} [prefix]
+ * @return {T}
+ */
+function buildProxy(proxyTarget, set, deepSet, prefix) {
+  proxyTarget ??= {};
+  return new Proxy(proxyTarget, {
+    get(target, p) {
+      const value = target[p];
+      if (typeof p !== 'symbol') {
+        const arg = prefix ? `${prefix}.${p}` : p;
+        if (prefix) {
+          deepSet.add(arg);
+        } else {
+          set.add(arg);
+        }
+        if (typeof value === 'object' && value != null) {
+          console.debug('tried to arg poke object get', p, value);
+          return buildProxy(value, set, deepSet, arg);
+        }
+      }
+      return value;
+    },
+    has(target, p) {
+      const value = Reflect.has(target, p);
+      if (typeof p !== 'symbol') {
+        const arg = prefix ? `${prefix}.p` : p;
+        if (prefix) {
+          deepSet.add(arg);
+        } else {
+          set.add(arg);
+        }
+      }
+      return value;
+    },
+  });
+}
+
 /**
  * @param {ObserverPropertyType} type
  * @return {any}
@@ -98,7 +148,7 @@ function defaultParserFromType(type) {
     case 'object':
       return DEFAULT_OBJECT_PARSER;
     case 'array':
-      return Array.from;
+      return DEFAULT_OBJECT_PARSER;
     default:
     case 'string':
       return DEFAULT_STRING_PARSER;
@@ -166,7 +216,7 @@ export function parseObserverOptions(name, typeOrOptions, object) {
   if (!isFn) {
     isFn = parsedType === 'object'
       ? DEFAULT_OBJECT_COMPARATOR
-      : Object.is;
+      : ((parsedType === 'array') ? DEFAULT_ARRAY_COMPARATOR : Object.is);
   }
 
   const diff = 'diff' in options
@@ -217,57 +267,56 @@ export function parsePropertyValue(value) {
 
 /**
  * @param {(data: Partial<any>) => any} fn
- * @param {any} arg0
- * @param {any} args[]
  * @param {...any} args
  * @this {any}
- * @return {{props:Set<string>, defaultValue:any, reusable: boolean}}
+ * @return {{
+ *  props: {
+ *    this: string[],
+ *    args: string[][],
+ *  },
+ *  deepPropStrings: {
+ *   this: string[],
+ *   args: string[][],
+ *  },
+ *  deepProps: {
+ *   this: string[][],
+ *   args: string[][][],
+ *  },
+ *  defaultValue: any,
+ *  reusable: boolean,
+ * }}
  */
-export function observeFunction(fn, arg0, ...args) {
-  const argPoked = new Set();
+export function observeFunction(fn, ...args) {
+  /** @type {Set<string>} */
   const thisPoked = new Set();
-
-  /**
-   * @template {Object} T
-   * @param {T} proxyTarget
-   * @param {Set<string>} set
-   * @param {string} [prefix]
-   * @return {T}
-   */
-  function buildProxy(proxyTarget, set, prefix) {
-    return new Proxy(proxyTarget, {
-      get(target, p) {
-        const arg = prefix ? `${prefix}.${p}` : p;
-        set.add(arg);
-        const value = Reflect.get(target, p);
-        if (typeof value === 'object' && value != null) {
-          console.debug('tried to arg poke object get', p, value);
-          return buildProxy(value, set, arg);
-        }
-        return value;
-      },
-      has(target, p) {
-        const arg = prefix ? `${prefix}.p` : p;
-        set.add(arg);
-        const value = Reflect.has(target, p);
-        return value;
-      },
-    });
-  }
-
-  const argProxy = buildProxy(arg0, argPoked);
-  const thisProxy = buildProxy(this ?? arg0, thisPoked);
-  const defaultValue = fn.call(thisProxy, argProxy, ...args);
+  /** @type {Set<string>} */
+  const thisPokedDeep = new Set();
+
+  const argWatchers = args.map((arg) => {
+    const poked = new Set();
+    const pokedDeep = new Set();
+    const proxy = buildProxy(arg, poked, pokedDeep);
+    return { poked, pokedDeep, proxy };
+  });
+
+  const thisProxy = buildProxy(this ?? {}, thisPoked, thisPokedDeep);
+  const defaultValue = fn.apply(thisProxy, argWatchers.map((watcher) => watcher.proxy));
   /* Arrow functions can reused if they don't poke `this` */
   const reusable = fn.name ? true : !thisPoked.size;
 
-  const props = new Set([
-    ...argPoked,
-    ...thisPoked,
-  ]);
-
   return {
-    props,
+    props: {
+      this: [...thisPoked],
+      args: argWatchers.map((watcher) => [...watcher.poked]),
+    },
+    deepPropStrings: {
+      this: [...thisPokedDeep],
+      args: argWatchers.map((watcher) => [...watcher.pokedDeep]),
+    },
+    deepProps: {
+      this: [...thisPokedDeep].map((deepPropString) => deepPropString.split('.')),
+      args: argWatchers.map((watcher) => [...watcher.pokedDeep].map((deepPropString) => deepPropString.split('.'))),
+    },
     defaultValue,
     reusable,
   };
@@ -297,7 +346,6 @@ export function defineObservableProperty(object, key, options) {
    * @return {boolean} changed
    */
   function detectChange(oldValue, value) {
-    if (oldValue === value) return false;
     if (config.get) {
       // TODO: Custom getter vs parser
     }
@@ -310,12 +358,11 @@ export function defineObservableProperty(object, key, options) {
     if (oldValue == null) {
       if (newValue == null) return false; // Both nullish
     } else if (newValue != null) {
-      if (oldValue === newValue) return false;
+      // if (oldValue === newValue) return false;
       if (config.diff) {
         changes = config.diff.call(this, oldValue, newValue);
         if (changes == null) return false;
-      }
-      if (config.is.call(this, oldValue, newValue)) return false;
+      } else if (config.is.call(this, oldValue, newValue)) return false;
     }
 
     config.values.set(this, newValue);
@@ -356,15 +403,22 @@ export function defineObservableProperty(object, key, options) {
   if (config.get) {
     // Custom `get` uses computed values.
     // Invalidate computed value when dependent `prop` changes
-    const { props } = observeFunction(config.get.bind(object), object, internalGet.bind(object));
-    config.watchers.push(
-      ...[...props].map((prop) => [prop, onInvalidate]),
-    );
+    const observeResult = observeFunction(config.get.bind(object), object, internalGet.bind(object));
+    const uniqueProps = new Set([
+      ...observeResult.props.this,
+      ...observeResult.props.args[0],
+    ]);
+    for (const prop of uniqueProps) {
+      // @ts-ignore keyof C
+      config.watchers.push([prop, onInvalidate]);
+    }
+
     // TODO: May be able to cache value if props are present
   }
   /** @type {Partial<PropertyDescriptor>} */
   const descriptor = {
     enumerable: config.enumerable,
+    configurable: true,
     /**
      * @this {C}
      * @return {T2}

package/core/optimizations.js

@@ -0,0 +1,23 @@
+// Micro-optimized functions
+
+const BLANK_TEXT = new Text();
+const BLANK_COMMENT = new Comment();
+const BLANK_DIV = document.createElement('div');
+
+/** @return {Text} */
+export function createEmptyTextNode() {
+  // @ts-ignore
+  return BLANK_TEXT.cloneNode();
+}
+
+/** @return {HTMLDivElement} */
+export function createEmptyDiv() {
+  // @ts-ignore
+  return BLANK_DIV.cloneNode();
+}
+
+/** @return {Comment} */
+export function createEmptyComment() {
+  // @ts-ignore
+  return BLANK_COMMENT.cloneNode();
+}

package/core/template.js

@@ -1,4 +1,4 @@
-import { generateUID } from './identify.js';
+import { generateUID } from './uid.js';
 
 /**
  * Property are bound to an ID+Node
@@ -6,7 +6,10 @@ import { generateUID } from './identify.js';
  * @template {any} T
  * @typedef {Object} InlineFunctionEntry
  * @prop {(data:T) => any} fn
- * @prop {Set<keyof T & string>} [props]
+ * @prop {string[]} [props]
+ * @prop {string[][]} [deepProps]
+ * @prop {string[]} [injectionProps]
+ * @prop {string[][]} [injectionDeepProps]
  * @prop {T} [defaultValue]
  */
 
@@ -57,7 +60,7 @@ const styleElementCache = new Map();
 
 /**
  * @param {TemplateStringsArray} array
- * @param  {...(string)} substitutions
+ * @param  {...any} substitutions
  * @return {HTMLStyleElement|CSSStyleSheet}
  */
 export function css(array, ...substitutions) {
@@ -76,18 +79,20 @@ export function css(array, ...substitutions) {
   }
 
   if (_cssStyleSheetConstructable) {
-    let sheet = cssStyleSheetsCache.get(content);
-    if (!sheet) {
-      sheet = new CSSStyleSheet();
-      _cssStyleSheetConstructable = true;
-      sheet.replaceSync(content);
-      cssStyleSheetsCache.set(content, sheet);
+    if (cssStyleSheetsCache.has(content)) {
+      return cssStyleSheetsCache.get(content);
     }
+    const sheet = new CSSStyleSheet();
+    _cssStyleSheetConstructable = true;
+    sheet.replaceSync(content);
+    cssStyleSheetsCache.set(content, sheet);
     return sheet;
   }
 
-  let style = styleElementCache.get(content);
-  if (!style) {
+  let style;
+  if (styleElementCache.has(content)) {
+    style = styleElementCache.get(content);
+  } else {
     _inactiveDocument ??= document.implementation.createHTMLDocument();
     style = _inactiveDocument.createElement('style');
     style.textContent = content;
@@ -146,3 +151,4 @@ export function html(strings, ...substitutions) {
 
   return /** @type {DocumentFragment} */ (fragment.cloneNode(true));
 }
+