@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/core/dom.js

@@ -1,180 +1,82 @@
+/* eslint-disable no-bitwise */
+
 /**
- * @param {Element} element
- * @param {string} className
- * @return {Element}
+ * @param {any} value
+ * @return {?string}
  */
-export function getChildElementByClass(element, className) {
-  const child = element.getElementsByClassName(className)[0];
-  if (child && child.parentElement !== element) {
-    return null;
+export function attrValueFromDataValue(value) {
+  switch (value) {
+    case undefined:
+    case null:
+    case false:
+      return null;
+    case true:
+      return '';
+    default:
+      return `${value}`;
   }
-  return child;
-}
-
-/** @return {boolean} */
-export function isRtl() {
-  return document.documentElement.dir === 'rtl';
 }
 
 /**
- * @param {EventTarget} eventTarget
- * @param {string} type
- * @param {Object} [detail]
- * @return {boolean}
+ * Converts property name to attribute name
+ * (Similar to DOMStringMap)
+ * @param {string} name
+ * @return {string}
  */
-export function dispatchDomEvent(eventTarget, type, detail) {
-  let event;
-  if (typeof CustomEvent === 'function') {
-    event = new CustomEvent(type, {
-      bubbles: true,
-      cancelable: true,
-      detail,
-    });
-  } else if (detail == null) {
-    if (typeof Event === 'function') {
-      event = new Event(type, {
-        bubbles: true,
-        cancelable: true,
-      });
-    } else {
-      event = document.createEvent('Event');
-      event.initEvent(type, true, true);
+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()}`;
     }
-  } else {
-    event = document.createEvent('CustomEvent');
-    event.initCustomEvent(type, true, true, detail);
-  }
-  return eventTarget.dispatchEvent(event);
+    return prev + curr;
+  });
 }
 
-/**
- * @param {Element} element
- * @param {function(Element, number):boolean|void} fn
- * @return {boolean}
- */
-export function iterateElementSiblings(element, fn) {
-  let distance = -1;
-  let sibling = element.previousElementSibling;
-  while (sibling) {
-    fn(sibling, distance);
-    sibling = sibling.previousElementSibling;
-    distance -= 1;
-  }
-  sibling = element.nextElementSibling;
-  distance = 1;
-  while (sibling) {
-    fn(sibling, distance);
-    sibling = sibling.nextElementSibling;
-    distance += 1;
-  }
-  return false;
-}
+const IS_FIREFOX = globalThis?.navigator?.userAgent.includes('Firefox');
 
 /**
  * @param {Element} element
- * @param {function(Element, number):boolean|void} fn
  * @return {boolean}
  */
-export function iterateSomeOfElementSiblings(element, fn) {
-  let distance = -1;
-  let sibling = element.previousElementSibling;
-  while (sibling) {
-    if (fn(sibling, distance)) {
-      return true;
-    }
-    sibling = sibling.previousElementSibling;
-    distance -= 1;
-  }
-  sibling = element.nextElementSibling;
-  distance = 1;
-  while (sibling) {
-    if (fn(sibling, distance)) {
-      return true;
-    }
-    sibling = sibling.previousElementSibling;
-    distance += 1;
-  }
-  return false;
-}
-
-/**
- * @param {Node} node
- * @param {boolean} [create]
- * @return {?Text}
- */
-export function getTextNode(node, create) {
-  for (const childNode of node.childNodes) {
-    if (childNode.nodeType === Node.TEXT_NODE) {
-      return /** @type {Text} */ (childNode);
-    }
+export function isFocused(element) {
+  if (!element) return false;
+  if (IS_FIREFOX && 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;
   }
-  if (!create) return null;
-  return node.appendChild(document.createTextNode(''));
+  if (document.activeElement === element) return true;
+  if (!element.isConnected) return false;
+  if (element?.getRootNode() === document) return false; // isInLightDOM
+  // console.debug('checking shadowdom', element, element.matches(':focus'));
+  return element.matches(':focus');
 }
 
 /**
- * @param {Node} node
- * @param {string} value
- * @return {?Text}
+ * @param {HTMLElement|Element} element
+ * @param {Parameters<HTMLElement['focus']>} [options]
+ * @return {boolean} Focus was successful
  */
-export function setTextNode(node, value) {
-  for (const childNode of node.childNodes) {
-    if (childNode.nodeType === Node.TEXT_NODE) {
-      if (value) {
-        childNode.nodeValue = value;
-      } else {
-        node.removeChild(childNode);
-      }
-      return /** @type {Text} */ (childNode);
-    }
+export function attemptFocus(element, ...options) {
+  if (!element) return false;
+  try {
+    // @ts-expect-error Use catch if not HTMLElement
+    element.focus(...options);
+  } catch (e) {
+    console.error(e);
+    return false;
+    // Ignore error.
   }
-  if (!value) return null;
-  return node.appendChild(document.createTextNode(value));
+  return isFocused(element);
 }
 
 /**
- * @param {HTMLElement} element
- * @param {boolean} [smooth=false]
- * @param {boolean} [rtl=false]
- * @return {void}
+ * @param {Element} element
+ * @return {boolean}
  */
-export function scrollToElement(element, smooth, rtl) {
-  if (!element) {
-    return;
-  }
-  const parent = element.parentElement;
-  if (!parent) {
-    return;
-  }
-
-  let targetScrollLeft = rtl
-    ? parent.scrollWidth + element.offsetLeft - element.offsetWidth
-    : element.offsetLeft;
-
-  const elementRect = element.getBoundingClientRect();
-  const parentRect = parent.getBoundingClientRect();
-  let subPixelScrollPosition = elementRect.left - parentRect.left;
-  if (subPixelScrollPosition < 0) {
-    subPixelScrollPosition = 0;
-  }
-  if (Math.abs(subPixelScrollPosition - targetScrollLeft) < 2) {
-    targetScrollLeft = subPixelScrollPosition;
-  }
-  if (parent.scrollLeft === targetScrollLeft) {
-    return;
-  }
-
-  if (parent.scrollTo) {
-    parent.scrollTo({
-      top: 0,
-      left: targetScrollLeft,
-      behavior: smooth ? 'smooth' : 'auto',
-    });
-    return;
-  }
-  parent.style.setProperty('scroll-behavior', 'auto');
-  parent.scrollLeft = targetScrollLeft;
-  requestAnimationFrame(() => {
-    parent.style.removeProperty('scroll-behavior');
-  });
+export function isRtl(element) {
+  return getComputedStyle(element).direction === 'rtl';
 }

package/core/identify.js

@@ -0,0 +1,40 @@
+const PREFIX = '_mdw-';
+
+/** @type {Set<string>} */
+const generatedUIDs = new Set();
+
+/** @return {string} */
+export function generateUID() {
+  const id = Math.random().toString(36).slice(2, 10);
+  if (generatedUIDs.has(id)) {
+    return generateUID();
+  }
+  generatedUIDs.add(id);
+  return id;
+}
+
+/**
+ * @param {Element} element
+ * @param {boolean} [mutate=false]
+ * @return {string}
+ */
+export function identifierFromElement(element, mutate) {
+  if (element.id) {
+    return element.id;
+  }
+  if (!mutate) {
+    return null;
+  }
+  const id = PREFIX + generateUID();
+  element.id = id;
+  return id;
+}
+
+/**
+ * @param {string} identifier
+ * @param {Element} element
+ * @return {boolean}
+ */
+export function identifierMatchesElement(identifier, element) {
+  return element.id === identifier;
+}

package/core/observe.js

@@ -0,0 +1,410 @@
+import { buildMergePatch, hasMergePatch } from '../utils/jsonMergePatch.js';
+
+import { attrNameFromPropName } from './dom.js';
+
+/** @typedef {import('./typings.js').ObserverPropertyType} ObserverPropertyType */
+
+/** @return {null} */
+const DEFAULT_NULL_PARSER = () => null;
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#boolean_coercion
+ * @param {any} v
+ * @return {boolean}
+ */
+const DEFAULT_BOOLEAN_PARSER = (v) => !!v;
+
+/**
+ * Doesn't support `BigInt` types
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#number_coercion
+ * @param {any} v
+ * @return {number}
+ */
+const DEFAULT_NUMBER_PARSER = (v) => +v;
+
+/**
+ * Doesn't support `Symbol` types
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion
+ * @param {any} v
+ * @return {string}
+ */
+const DEFAULT_STRING_PARSER = (v) => `${v}`;
+
+/**
+ * @template T
+ * @param {T} o
+ * @return {T}
+ */
+const DEFAULT_OBJECT_PARSER = (o) => o;
+
+/**
+ * @template T
+ * @param {T} a
+ * @param {T} b
+ * @return {boolean} true if equal
+ */
+export const DEFAULT_OBJECT_COMPARATOR = (a, b) => !hasMergePatch(a, b);
+
+/**
+ * @template T
+ * @param {T} a
+ * @param {T} b
+ * @return {boolean} true if equal
+ */
+export const DEFAULT_OBJECT_DIFF = (a, b) => buildMergePatch(a, b, 'object');
+
+/**
+ * @param {ObserverPropertyType} type
+ * @return {any}
+ */
+function emptyFromType(type) {
+  switch (type) {
+    case 'boolean':
+      return false;
+    case 'integer':
+    case 'float':
+      return 0;
+    case 'map':
+      return new Map();
+    case 'set':
+      return new Set();
+    case 'array':
+      return [];
+    case 'object':
+      return null;
+    default:
+    case 'string':
+      return '';
+  }
+}
+
+/**
+ * @param {ObserverPropertyType} type
+ * @return {any}
+ */
+function defaultParserFromType(type) {
+  switch (type) {
+    case 'boolean':
+      return DEFAULT_BOOLEAN_PARSER;
+    case 'integer':
+      // Calls ToNumber(x)
+      return Math.round;
+    case 'float':
+      return DEFAULT_NUMBER_PARSER;
+    case 'map':
+      return Map;
+    case 'set':
+      return Set;
+    case 'object':
+      return DEFAULT_OBJECT_PARSER;
+    case 'array':
+      return Array.from;
+    default:
+    case 'string':
+      return DEFAULT_STRING_PARSER;
+  }
+}
+
+/**
+ * @template {string} K
+ * @template {ObserverPropertyType} [T1=any]
+ * @template {any} [T2=import('./typings.js').ParsedObserverPropertyType<T1>]
+ * @param {K} name
+ * @param {T1|import('./typings.js').ObserverOptions<T1,T2>} [typeOrOptions='string']
+ * @param {any} object
+ * @return {import('./typings.js').ObserverConfiguration<T1,T2,K> & import('./typings.js').ObserverOptions<T1,T2>}
+ */
+export function parseObserverOptions(name, typeOrOptions, object) {
+  /** @type {Partial<import('./typings.js').ObserverOptions<T1,T2>>} */
+  const options = {
+    ...((typeof typeOrOptions === 'string') ? { type: typeOrOptions } : typeOrOptions),
+  };
+
+  let { enumerable, attr, reflect } = options;
+  const { type, empty, changedCallback } = options;
+
+  /** @type {ObserverPropertyType} */
+  let parsedType = type;
+  if (parsedType == null) {
+    // Use .value or .get() to parse type
+    const value = options.value ?? empty ?? options.get?.call(object ?? {}, object ?? {});
+    if (value == null) {
+      parsedType = 'string';
+    } else {
+      const parsed = typeof value;
+      parsedType = (parsed === 'number')
+        ? (Number.isInteger(value) ? 'integer' : 'number')
+        : parsed;
+    }
+  }
+
+  enumerable ??= name[0] !== '_';
+  reflect ??= enumerable ? parsedType !== 'object' : (attr ? 'write' : false);
+  attr ??= (reflect ? attrNameFromPropName(name) : null);
+
+  // if defined ? value
+  // else if boolean ? false
+  // else if onNullish ? false
+  // else if empty == null
+  const parser = options.parser ?? defaultParserFromType(parsedType);
+  let nullParser = options.nullParser;
+  let parsedEmpty = empty ?? null;
+  if (!nullParser) {
+    const nullable = options.nullable ?? (
+      parsedType === 'boolean'
+        ? false
+        : (empty == null));
+    if (nullable) {
+      nullParser = DEFAULT_NULL_PARSER;
+    } else {
+      parsedEmpty ??= emptyFromType(parsedType);
+      nullParser = parsedEmpty === null ? () => emptyFromType(parsedType) : () => parsedEmpty;
+    }
+  }
+
+  let isFn = options.is;
+  if (!isFn) {
+    isFn = parsedType === 'object'
+      ? DEFAULT_OBJECT_COMPARATOR
+      : Object.is;
+  }
+
+  const diff = 'diff' in options
+    ? options.diff
+    : ((parsedType === 'object') ? DEFAULT_OBJECT_DIFF : null);
+
+  return {
+    ...options,
+    type: parsedType,
+    is: isFn,
+    diff,
+    attr,
+    reflect,
+    readonly: options.readonly ?? false,
+    enumerable,
+    value: options.value ?? parsedEmpty,
+    parser,
+    nullParser,
+    key: name,
+    changedCallback,
+    watchers: options.watchers ?? [],
+    values: options.values ?? new WeakMap(),
+    validValues: options.validValues ?? new WeakMap(),
+    attributeChangedCallback: options.attributeChangedCallback,
+  };
+}
+
+const INIT_SYMBOL = Symbol('PROP_INIT');
+
+/** @type {Partial<import('./typings.js').ObserverConfiguration<?,?,?>>} */
+const DEFAULT_OBSERVER_CONFIGURATION = {
+  nullParser: DEFAULT_NULL_PARSER,
+  is: Object.is,
+  INIT_SYMBOL,
+};
+
+/**
+ * @this {import('./typings.js').ObserverConfiguration<?,?,?>}
+ * @param {*} value
+ */
+export function parsePropertyValue(value) {
+  let newValue = value;
+  newValue = value == null
+    ? this.nullParser.call(this, value)
+    : this.parser.call(this, newValue);
+}
+
+/**
+ * @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}}
+ */
+export function observeFunction(fn, arg0, ...args) {
+  const argPoked = new Set();
+  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);
+  /* 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,
+    defaultValue,
+    reusable,
+  };
+}
+
+/**
+ * @template {ObserverPropertyType} T1
+ * @template {any} T2
+ * @template {string} K
+ * @template [C=any]
+ * @param {C} object
+ * @param {K} key
+ * @param {import('./typings.js').ObserverOptions<T1, T2, C>} options
+ * @return {import('./typings.js').ObserverConfiguration<T1,T2,K,C>}
+ */
+export function defineObservableProperty(object, key, options) {
+  /** @type {import('./typings.js').ObserverConfiguration<T1,T2,K,C>} */
+  const config = {
+    ...DEFAULT_OBSERVER_CONFIGURATION,
+    ...parseObserverOptions(key, options, object),
+    changedCallback: options.changedCallback,
+  };
+
+  /**
+   * @param {T2} oldValue
+   * @param {T2} value
+   * @param {boolean} [commit=false]
+   * @return {boolean} changed
+   */
+  function detectChange(oldValue, value, commit) {
+    if (oldValue === value) return false;
+    if (config.get) {
+      // TODO: Custom getter vs parser
+    }
+    let newValue = value;
+    newValue = (value == null)
+      ? config.nullParser.call(this, value)
+      : config.parser.call(this, newValue);
+
+    let changes = newValue;
+    if (oldValue == null) {
+      if (newValue == null) return false; // Both nullish
+    } else if (newValue != null) {
+      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;
+    }
+
+    // Before changing, store old values of properties that will invalidate;
+
+    // Do no set if transient (getter)
+
+    config.values.set(this, newValue);
+    // console.log(key, 'value.set', newValue);
+    config.propChangedCallback?.call(this, key, oldValue, newValue, changes);
+    config.changedCallback?.call(this, oldValue, newValue, changes);
+    return true;
+  }
+  /**
+   * @this {C}
+   * @return {T2}
+   */
+  function internalGet() {
+    return config.values.has(this) ? config.values.get(this) : config.value;
+  }
+
+  /**
+   * @this {C}
+   * @param {T2} value
+   * @return {void}
+   */
+  function internalSet(value) {
+    const oldValue = this[key];
+    // console.log(key, 'internalSet', oldValue, '=>', value);
+    detectChange.call(this, oldValue, value, true);
+  }
+
+  /**
+   *
+   */
+  function onInvalidate() {
+    // console.log(key, 'onInvalidate', '???');
+    const oldValue = config.validValues.get(this);
+    const newValue = this[key];
+    // console.log(key, 'onInvalidate', oldValue, '=>', newValue);
+    detectChange.call(this, oldValue, newValue);
+  }
+
+  if (config.get) {
+    const { props } = observeFunction(config.get.bind(object), object, internalGet.bind(object));
+    // Set of watchers needed
+    // console.log(key, 'invalidates with', props);
+    config.watchers.push(
+      ...[...props].map((prop) => [prop, onInvalidate]),
+    );
+  }
+  /** @type {Partial<PropertyDescriptor>} */
+  const descriptor = {
+    enumerable: config.enumerable,
+    /**
+     * @this {C}
+     * @return {T2}
+     */
+    get() {
+      if (config.get) {
+        const newValue = config.get.call(this, this, internalGet.bind(this));
+        // Store value internally. Used by onInvalidate to get previous value
+        config.validValues.set(this, newValue);
+        return newValue;
+      }
+      return internalGet.call(this);
+    },
+    /**
+     * @this {C}
+     * @param {T2} value
+     * @return {void}
+     */
+    set(value) {
+      if (value === INIT_SYMBOL) {
+        // console.log(key, 'returning due to INIT');
+        return;
+      }
+      if (config.set) {
+        const oldValue = this[key];
+        config.set.call(this, value, internalSet.bind(this));
+        const newValue = this[key];
+        // Invalidate self
+        detectChange.call(this, oldValue, newValue);
+      } else {
+        internalSet.call(this, value);
+      }
+    },
+  };
+
+  Object.defineProperty(object, key, descriptor);
+
+  return config;
+}