@shortfuse/materialdesignweb 0.8.0 → 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,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, unknown>}
  */
 export const EVENT_HANDLER_TYPE = {
   type: 'function',
@@ -39,7 +41,7 @@ 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',
@@ -61,7 +63,12 @@ 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>>} */
@@ -78,6 +85,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 +100,7 @@ function elementStylerMicrotaskCallback(name) {
     : this;
   const currentAnimation = el.animate(styles, {
     ...timing,
+    ...(initial ? { duration: 0 } : null),
     fill: 'forwards',
   });
   currentAnimation.onremove = () => {
@@ -106,42 +117,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,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/core/jsonMergePatch.js

@@ -54,14 +54,15 @@ 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) {
+        patch[index] = null;
         continue;
       }
+      if (value == null) {
+        continue; // Skip undefined
+      }
       const changes = buildMergePatch(previous[index], value, arrayStrategy);
-      if (changes === null) {
-        continue;
-      } else {
+      if (changes !== null) {
         patch[index] = changes;
       }
     }
@@ -77,14 +78,15 @@ 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) {
+      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;
     }
   }