@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/core/css.js

@@ -1,19 +1,84 @@
+/** @type {Map<string, CSSStyleSheet>} */
+const cssStyleSheetsCache = new Map();
+
+/**
+ * @param {string} content
+ * @param {boolean} [useCache=true]
+ * @return {CSSStyleSheet}
+ */
+export function createCSSStyleSheet(content, useCache = true) {
+  if (useCache && cssStyleSheetsCache.has(content)) {
+    return cssStyleSheetsCache.get(content);
+  }
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(content);
+  if (useCache) {
+    cssStyleSheetsCache.set(content, sheet);
+  }
+  return sheet;
+}
+
+/** @type {Map<string, HTMLStyleElement>} */
+const styleElementCache = new Map();
+
+/** @type {Document} */
+let _inactiveDocument;
+
+/**
+ * @param {string} content
+ * @param {boolean} [useCache=true]
+ * @return {HTMLStyleElement}
+ */
+export function createHTMLStyleElement(content, useCache = true) {
+  let style;
+  if (useCache && styleElementCache.has(content)) {
+    style = styleElementCache.get(content);
+  } else {
+    _inactiveDocument ??= document.implementation.createHTMLDocument();
+    style = _inactiveDocument.createElement('style');
+    style.textContent = content;
+    if (useCache) {
+      styleElementCache.set(content, style);
+    }
+  }
+  return /** @type {HTMLStyleElement} */ (style.cloneNode(true));
+}
+
+/** @type {boolean} */
+let _cssStyleSheetConstructable;
+
+/**
+ * @param {string} content
+ * @param {boolean} [useCache=true]
+ */
+export function createCSS(content, useCache = true) {
+  if (_cssStyleSheetConstructable == null) {
+    try {
+      const sheet = createCSSStyleSheet(content, useCache);
+      _cssStyleSheetConstructable = true;
+      return sheet;
+    } catch {
+      _cssStyleSheetConstructable = false;
+    }
+  }
+  return _cssStyleSheetConstructable
+    ? createCSSStyleSheet(content, useCache)
+    : createHTMLStyleElement(content, useCache);
+}
+
 /**
  * @param {Iterable<HTMLStyleElement|CSSStyleSheet>} styles
+ * @param {boolean} [useCache=true]
  * @yields composed CSSStyleSheet
  * @return {Generator<CSSStyleSheet>} composed CSSStyleSheet
  */
-export function* generateCSSStyleSheets(styles) {
+export function* generateCSSStyleSheets(styles, useCache = true) {
   for (const style of styles) {
     if (style instanceof HTMLStyleElement) {
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(style.textContent);
-      yield sheet;
+      yield createCSSStyleSheet(style.textContent, useCache);
     } else if (style.ownerNode) {
       console.warn('Stylesheet is part of style');
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync([...style.cssRules].map((r) => r.cssText).join(''));
-      yield sheet;
+      yield createCSSStyleSheet([...style.cssRules].map((r) => r.cssText).join(''), useCache);
     } else {
       yield style;
     }
@@ -21,14 +86,15 @@ export function* generateCSSStyleSheets(styles) {
 }
 
 /** @type {WeakMap<CSSStyleSheet, HTMLStyleElement>} */
-const styleElementWrappers = new WeakMap();
+const styleElementFromStyleSheetCache = new WeakMap();
 
 /**
  * @param {Iterable<HTMLStyleElement|CSSStyleSheet>} styles
+ * @param {boolean} [useCache=true]
  * @yields composed HTMLStyleElement
  * @return {Generator<HTMLStyleElement>} composed CSSStyleSheet
  */
-export function* generateHTMLStyleElements(styles) {
+export function* generateHTMLStyleElements(styles, useCache = true) {
   for (const style of styles) {
     if (style instanceof HTMLStyleElement) {
       yield style;
@@ -36,16 +102,56 @@ export function* generateHTMLStyleElements(styles) {
       // console.log('Cloning parent HTMLStyleElement instead');
       // @ts-ignore Skip cast
       yield style.ownerNode.cloneNode(true);
+    } else if (useCache && styleElementFromStyleSheetCache.has(style)) {
+      // @ts-ignore Skip cast
+      yield styleElementFromStyleSheetCache.get(style).cloneNode(true);
     } else {
-      let styleElement = styleElementWrappers.get(style);
-      if (!styleElement) {
-        console.warn('Manually constructing HTMLStyleElement', [...style.cssRules].map((r) => r.cssText).join('\n'));
-        styleElement = document.createElement('style');
-        styleElement.textContent = [...style.cssRules].map((r) => r.cssText).join('');
-        styleElementWrappers.set(style, styleElement);
+      console.warn('Manually constructing HTMLStyleElement', [...style.cssRules].map((r) => r.cssText).join('\n'));
+      const styleElement = document.createElement('style');
+      styleElement.textContent = [...style.cssRules].map((r) => r.cssText).join('');
+      if (useCache) {
+        styleElementFromStyleSheetCache.set(style, styleElement);
       }
+
       // @ts-ignore Skip cast
       yield styleElement.cloneNode(true);
     }
   }
 }
+
+/**
+ * @param {TemplateStringsArray|string} array
+ * @param  {...any} substitutions
+ * @return {HTMLStyleElement|CSSStyleSheet}
+ */
+export function css(array, ...substitutions) {
+  if (typeof array === 'string') return createCSS(array);
+  return createCSS(String.raw({ raw: array }, ...substitutions));
+}
+
+/**
+ * @param {TemplateStringsArray|string|HTMLStyleElement|CSSStyleSheet} styles
+ * @param  {...any} substitutions
+ * @return {HTMLStyleElement|CSSStyleSheet}
+ */
+export function addGlobalCss(styles, ...substitutions) {
+  /** @type {HTMLStyleElement|CSSStyleSheet} */
+  let compiled;
+  if (typeof styles === 'string') {
+    compiled = css(styles);
+  } else if (Array.isArray(styles)) {
+    compiled = css(/** @type {TemplateStringsArray} */ (styles), ...substitutions);
+  } else {
+    compiled = /** @type {HTMLStyleElement|CSSStyleSheet} */ (styles);
+  }
+
+  if (compiled instanceof HTMLStyleElement) {
+    document.head.append(compiled);
+  } else {
+    document.adoptedStyleSheets = [
+      ...document.adoptedStyleSheets,
+      compiled,
+    ];
+  }
+  return compiled;
+}

package/core/customTypes.js

@@ -1,21 +1,19 @@
 /** @typedef {import('./CustomElement').default} CustomElement */
 
-/** @type {WeakMap<HTMLElement, EventListener>} */
-const eventHandlerValues = new Map();
+import { attrNameFromPropName } from './dom.js';
 
 /**
  * @see https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-attributes
- * @type {import('./typings.js').ObserverOptions<'function',EventListener, unknown>}
+ * @type {import('./observe.js').ObserverOptions<'function',EventListener, unknown>}
  */
 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;
@@ -43,45 +41,66 @@ export const EVENT_HANDLER_TYPE = {
 const weakRefValues = new WeakMap();
 
 /**
- * @type {import('./typings.js').ObserverOptions<'object',HTMLElement>}
+ * @type {import('./observe.js').ObserverOptions<'object',HTMLElement>}
  */
 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);
+/**
+ * @typedef {Object} QueuedPropsMetadata
+ * @prop {boolean} initial
+ */
+
+/** @type {WeakMap<CustomElement, Map<string, QueuedPropsMetadata>>} */
+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 queuedProps = queuedPropsByElement.get(this);
+  const { initial } = queuedProps.get(name);
+  queuedProps.delete(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,
+    ...(initial ? { duration: 0 } : null),
     fill: 'forwards',
   });
   currentAnimation.onremove = () => {
@@ -93,33 +112,131 @@ 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]]));
+  }
 }
 
-/** @type {import('./typings.js').ObserverOptions<'object',ElementStylerOptions, CustomElement>} */
-export const ELEMENT_STYLER_TYPE = {
+/** @type {WeakMap<Element, Function[]>} */
+const pendingResizeCallbacks = new WeakMap();
+const pendingConnections = new ResizeObserver((entries) => {
+  for (const { target } of entries) {
+    if (pendingResizeCallbacks.has(target)) {
+      const callbacks = pendingResizeCallbacks.get(target);
+      pendingResizeCallbacks.delete(target);
+      pendingConnections.unobserve(target);
+      for (const callback of callbacks) {
+        callback();
+      }
+    }
+  }
+});
+
+/** @type {import('./observe.js').ObserverOptions<'object',ElementStylerOptions, CustomElement>} */
+export const ELEMENT_ANIMATION_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 (!newValue) {
-      if (!hasQueue) return;
-      console.warn('debug needed of cancel needed');
-      elementStylerHasQueue.delete(this);
-      return;
+      const previousAnimations = previousAnimationsByElement.get(this);
+      if (!previousAnimations?.has(name)) {
+        // Fast abort
+        return;
+      }
     }
+    const queuedProps = queuedPropsByElement.get(this);
 
-    if (hasQueue) {
-      // Already scheduled
-      return;
+    const initial = !this.isConnected;
+    if (queuedProps) {
+      if (queuedProps.has(name)) return;
+      queuedProps.set(name, { initial });
+    } else {
+      queuedPropsByElement.set(this, new Map([[name, { initial }]]));
     }
-
+    // TODO: Reuse callback instead constructing each tick
     // 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);
+    const callback = elementStylerMicrotaskCallback.bind(this, name);
+    if (this.isConnected) {
+      queueMicrotask(callback);
+    } else if (pendingResizeCallbacks.has(this)) {
+      pendingResizeCallbacks.get(this).push(callback);
+    } else {
+      pendingResizeCallbacks.set(this, [callback]);
+      pendingConnections.observe(this);
+    }
+  },
+};
+
+/**
+ * @type {WeakMap<CustomElement, Map<string, HTMLStyleElement|CSSStyleSheet>>}
+ */
+const styleReferences = new WeakMap();
+
+/** @type {boolean} */
+let useAdoptedStyleSheets = null;
+
+/** @type {import('./observe.js').ObserverOptions<'string',string, CustomElement>} */
+export const ELEMENT_STYLE_TYPE = {
+  type: 'string',
+  reflect: false,
+  /**
+   * @param {string|Record<keyof CSSStyleDeclaration & string, string|number>} value
+   * @return {string}
+   */
+  parser(value) {
+    if (!value || typeof value === 'string') {
+      return /** @type {string} */ (value);
+    }
+    return `:host{${
+      Object.entries(value).map(([key, rule]) => `${attrNameFromPropName(key)}:${rule}`)
+        .join(';')
+    }}`;
+  },
+  propChangedCallback(name, oldValue, newValue) {
+    let mapOfStyles;
+
+    /** @type {HTMLStyleElement|CSSStyleSheet} */
+    let styles;
+    if (styleReferences.has(this)) {
+      mapOfStyles = styleReferences.get(this);
+      if (mapOfStyles.has(name)) {
+        styles = mapOfStyles.get(name);
+      }
+    } else {
+      // Skip build if blank
+      if (!newValue) return;
+      mapOfStyles = new Map();
+      styleReferences.set(this, mapOfStyles);
+    }
+
+    useAdoptedStyleSheets ??= 'adoptedStyleSheets' in ShadowRoot.prototype;
+    if (!styles) {
+      if (useAdoptedStyleSheets) {
+        styles = new CSSStyleSheet();
+        this.shadowRoot.adoptedStyleSheets = [
+          ...this.shadowRoot.adoptedStyleSheets,
+          styles,
+        ];
+      } else {
+        const styleElement = this.ownerDocument.createElement('style');
+        this.shadowRoot.prepend(styleElement);
+        styles = styleElement;
+      }
+      mapOfStyles.set(name, styles);
+    }
+    if (newValue) {
+      if (useAdoptedStyleSheets) {
+        /** @type {CSSStyleSheet} */(styles).replaceSync(newValue);
+      } else if (newValue) {
+        /** @type {HTMLStyleElement} */(styles).textContent = newValue;
+      }
+      styles.disabled = false;
+    } else {
+      styles.disabled = true;
+    }
   },
 };

package/core/dom.js

@@ -17,6 +17,9 @@ export function attrValueFromDataValue(value) {
   }
 }
 
+/** @type {Map<string, string>} */
+let attrNameFromPropNameCache;
+
 /**
  * Converts property name to attribute name
  * (Similar to DOMStringMap)
@@ -24,18 +27,21 @@ export function attrValueFromDataValue(value) {
  * @return {string}
  */
 export function attrNameFromPropName(name) {
-  const attrNameWords = name.split(/([A-Z])/);
-  if (attrNameWords.length === 1) return name;
-  return attrNameWords.reduce((prev, curr) => {
-    if (prev == null) return curr;
-    if (curr.length === 1 && curr.toUpperCase() === curr) {
-      return `${prev}-${curr.toLowerCase()}`;
-    }
-    return prev + curr;
-  });
+  attrNameFromPropNameCache ??= new Map();
+  if (attrNameFromPropNameCache.has(name)) {
+    return attrNameFromPropNameCache.get(name);
+  }
+  // eslint-disable-next-line unicorn/prefer-string-replace-all
+  const value = name.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+  attrNameFromPropNameCache.set(name, value);
+  return value;
 }
 
-const IS_FIREFOX = globalThis?.navigator?.userAgent.includes('Firefox');
+export const CHROME_VERSION = Number.parseFloat(navigator.userAgent.match(/Chrome\/([\d.]+)/)?.[1]);
+export const FIREFOX_VERSION = Number.parseFloat(navigator.userAgent.match(/Firefox\/([\d.]+)/)?.[1]);
+export const SAFARI_VERSION = CHROME_VERSION || !navigator.userAgent.includes('AppleWebKit')
+  ? Number.NaN
+  : Number.parseFloat(navigator.userAgent.match(/Version\/([\d.]+)/)?.[1]);
 
 /**
  * @param {Element} element
@@ -43,7 +49,7 @@ const IS_FIREFOX = globalThis?.navigator?.userAgent.includes('Firefox');
  */
 export function isFocused(element) {
   if (!element) return false;
-  if (IS_FIREFOX && element.constructor.formAssociated && element.hasAttribute('disabled')) {
+  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.');
     return false;

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,37 +28,65 @@ 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) {
+        patch[index] = null;
+        continue;
+      }
+      if (value == null) {
+        continue; // Skip undefined
+      }
+      const changes = buildMergePatch(previous[index], value, arrayStrategy);
+      if (changes !== null) {
+        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);
-    if (value == null) {
-      console.warn('Nullish value found at', key);
+    if (value === null) {
+      patch[key] = null;
       continue;
     }
+    if (value == null) {
+      continue; // Skip undefined
+    }
     const changes = buildMergePatch(previous[key], value, arrayStrategy);
-    if (changes === null) {
-      console.log('keeping', key);
-    } else {
+    if (changes !== null) {
       patch[key] = changes;
     }
   }
@@ -67,10 +95,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;
 }