@shortfuse/materialdesignweb 0.8.0 → 0.9.1

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,17 +102,56 @@ export function* generateHTMLStyleElements(styles) {
       // console.log('Cloning parent HTMLStyleElement instead');
       // @ts-ignore Skip cast
       yield style.ownerNode.cloneNode(true);
-    } else if (styleElementWrappers.has(style)) {
+    } else if (useCache && styleElementFromStyleSheetCache.has(style)) {
       // @ts-ignore Skip cast
-      yield styleElementWrappers.get(style).cloneNode(true);
+      yield styleElementFromStyleSheetCache.get(style).cloneNode(true);
     } else {
       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('');
-      styleElementWrappers.set(style, styleElement);
+      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,8 +1,10 @@
 /** @typedef {import('./CustomElement').default} CustomElement */
 
+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, CustomElement>}
  */
 export const EVENT_HANDLER_TYPE = {
   type: 'function',
@@ -13,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) {
@@ -36,23 +53,23 @@ export const EVENT_HANDLER_TYPE = {
   },
 };
 
-const weakRefValues = new WeakMap();
+// const weakRefValues = new WeakMap();
 
-/**
- * @type {import('./typings.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
@@ -61,15 +78,22 @@ export const WEAKREF_TYPE = {
  * @prop {EffectTiming} [timing]
  */
 
-/** @type {WeakMap<CustomElement, Set<string>} */
+/**
+ * @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}
+ * @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);
@@ -78,6 +102,9 @@ function elementStylerMicrotaskCallback(name) {
   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();
@@ -90,6 +117,7 @@ function elementStylerMicrotaskCallback(name) {
     : this;
   const currentAnimation = el.animate(styles, {
     ...timing,
+    ...(initial ? { duration: 0 } : null),
     fill: 'forwards',
   });
   currentAnimation.onremove = () => {
@@ -106,42 +134,126 @@ function elementStylerMicrotaskCallback(name) {
   } 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 {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,
   diff: null, // Skip computing entire change
   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 of cancel needed');
-      if (queuedProps) {
-        queuedProps.delete(name);
+      const previousAnimations = previousAnimationsByElement.get(this);
+      if (!previousAnimations?.has(name)) {
+        // Fast abort
+        return;
       }
-      return;
-    }
-
-    if (hasQueue) {
-      // Already scheduled
-      return;
     }
+    const queuedProps = queuedPropsByElement.get(this);
 
+    const initial = !this.isConnected;
     if (queuedProps) {
-      queuedProps.add(name);
+      if (queuedProps.has(name)) return;
+      queuedProps.set(name, { initial });
     } else {
-      queuedPropsByElement.set(this, new Set([name]));
+      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(elementStylerMicrotaskCallback.bind(this, name));
+    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,8 @@ 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')) {
+  // @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.');
     return false;

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);
     }
   }
@@ -54,20 +59,25 @@ export function buildMergePatch(previous, current, arrayStrategy = 'reference')
       return structuredClone(current);
     }
     for (const [index, value] of current.entries()) {
-      if (value == null) {
-        console.warn('Nullish value found at', index);
+      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) {
-        continue;
-      } else {
+      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;
     }
@@ -77,20 +87,24 @@ export function buildMergePatch(previous, current, arrayStrategy = 'reference')
   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) {
+      // @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) {
-      // console.log('keeping', key);
-    } else {
+    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;
@@ -111,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;
     }