@shortfuse/materialdesignweb 0.4.0 → 0.7.0

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;
+}

package/core/template.js

@@ -0,0 +1,121 @@
+import { generateUID } from './identify.js';
+
+/**
+ * Property are bound to an ID+Node
+ * Values are either getter or via an function
+ * @template {any} T
+ * @typedef {Object} InlineFunctionEntry
+ * @prop {(data:T) => any} fn
+ * @prop {Set<keyof T & string>} [props]
+ * @prop {T} [defaultValue]
+ */
+
+/** @type {Document} */
+let _inactiveDocument;
+
+/** @type {boolean} */
+let _cssStyleSheetConstructable;
+
+/**
+ * @param {string} [fromString]
+ * @return {DocumentFragment}
+ */
+export function generateFragment(fromString) {
+  _inactiveDocument ??= document.implementation.createHTMLDocument();
+  if (fromString == null) {
+    return _inactiveDocument.createDocumentFragment();
+  }
+  return _inactiveDocument.createRange().createContextualFragment(fromString);
+}
+
+/** @type {Map<string, InlineFunctionEntry<?>>} */
+export const inlineFunctions = new Map();
+
+/**
+ * @template T
+ * @typedef {Object} RenderOptions
+ * @prop {Object} context
+ * @prop {ParentNode} root
+ * @prop {Object<string, HTMLElement>} refs
+ */
+
+/**
+ * @param {(data: Partial<any>) => any} fn
+ * @return {string}
+ */
+export function addInlineFunction(fn) {
+  const internalName = `#${generateUID()}`;
+  inlineFunctions.set(internalName, { fn });
+  return `{${internalName}}`;
+}
+
+/**
+ * @param {TemplateStringsArray} array
+ * @param  {...(string)} substitutions
+ * @return {HTMLStyleElement|CSSStyleSheet}
+ */
+export function css(array, ...substitutions) {
+  const content = String.raw({ raw: array }, ...substitutions);
+  if (_cssStyleSheetConstructable == null) {
+    try {
+      const sheet = new CSSStyleSheet();
+      _cssStyleSheetConstructable = true;
+      sheet.replaceSync(content);
+      return sheet;
+    } catch {
+      _cssStyleSheetConstructable = false;
+    }
+  }
+  if (_cssStyleSheetConstructable) {
+    const sheet = new CSSStyleSheet();
+    _cssStyleSheetConstructable = true;
+    sheet.replaceSync(content);
+    return sheet;
+  }
+
+  _inactiveDocument ??= document.implementation.createHTMLDocument();
+  const style = _inactiveDocument.createElement('style');
+  style.textContent = content;
+  return style;
+}
+
+/**
+ * @template T1
+ * @template T2
+ * @param {TemplateStringsArray} strings
+ * @param  {...(string|DocumentFragment|Element|((this:T1, data:T2) => any))} substitutions
+ * @return {DocumentFragment}
+ */
+export function html(strings, ...substitutions) {
+  /** @type {Map<string, DocumentFragment|Element>} */
+  let tempSlots;
+  const replacements = substitutions.map((sub) => {
+    switch (typeof sub) {
+      case 'string': return sub;
+      case 'function': return addInlineFunction(sub);
+      case 'object': {
+        if (sub == null) {
+          console.warn(sub, 'is null', strings);
+          return '';
+        }
+        // Assume Element
+        const tempId = generateUID();
+        tempSlots ??= new Map();
+        tempSlots.set(tempId, sub);
+        return `<div id="${tempId}"></div>`;
+      }
+      default:
+        throw new Error(`Unexpected substitution: ${sub}`);
+    }
+  });
+  const compiledString = String.raw({ raw: strings }, ...replacements);
+  const fragment = generateFragment(compiledString);
+  if (tempSlots) {
+    for (const [id, element] of tempSlots) {
+      const slot = fragment.getElementById(id);
+      slot.replaceWith(element);
+    }
+  }
+
+  return fragment;
+}

package/core/typings.d.ts

@@ -0,0 +1,135 @@
+type ObserverPropertyType = 'string' | 'boolean' | 'map' | 'set' | 'float' | 'integer' | 'object' | 'function';
+
+type InlineTemplate<T1, T2=T1> = (fn: (this:T1, data: T2) => any) => string;
+
+type HTMLTemplater<T1, T2=T1> = ((
+  string: TemplateStringsArray, ...substitutions: (string|DocumentFragment|Element|((this:T1, data:T2) => any))[]
+) => DocumentFragment);
+
+type ParsedObserverPropertyType<T extends ObserverPropertyType> =
+  T extends 'boolean' ? boolean
+  : T extends 'string' ? string
+  : T extends 'float' | 'integer' ? number
+  : T extends 'object' ? any
+  : T extends 'function' ? (...args:any) => any
+  : unknown;
+
+type ObserverOptions<
+  T1 extends ObserverPropertyType,
+  T2 = any,
+  C extends object = any
+  > = {
+  type?: T1;
+  attr?: string;
+
+  /** Default true */
+  readonly?: boolean
+  enumerable?: boolean;
+
+  /** Defaults to false if type is boolean */
+  nullable?: boolean;
+
+  /** Empty value when not nullable */
+  empty?: T2;
+  /** Initial value (empty value if not specified) */
+  value?: T2;
+  values?: WeakMap<C, T2>;
+  reflect?: boolean | 'write' | 'read';
+  /** Function used when null passed */
+  changedCallback?: (this:C, oldValue:T2, newValue:T2, changes:any)=>any;
+  nullParser?: (this:C, value:null|undefined)=>T2;
+  parser?: (this:C, value:any)=>T2;
+  /** Function used when comparing */
+  diff?: (this:C, a:T2, b:T2)=> any,
+  is?: (this:C, a:T2, b:T2)=>boolean
+  get?: (this:C, data:Partial<C>, fn?: () => T2) => T2
+  set?: (this:C, value: T2, fn?:(value2: T2) => any) => any,
+  attributeChangedCallback?: (this:C, name:string, oldValue: string, newValue: string) => any;
+  propChangedCallback?: (this:C, name:string, oldValue: T2, newValue: T2, changes:any) => any;
+  validValues?: WeakMap<C, T2>;
+  watchers?: [keyof C, (this:C, ...args:any[]) => any][];
+}
+
+type ObserverConfiguration<
+  T1 extends ObserverPropertyType,
+  T2 = any,
+  K = string,
+  C extends object = any> = ObserverOptions<T1, T2, C> & {
+    key: K,
+    values?: WeakMap<C, T2>;
+    attrValues?: WeakMap<C, string>;
+  };
+
+type ParsedProps<T> = {
+  [P in keyof T]:
+    T[P] extends (...args:any[]) => infer T2 ? T2
+      : T[P] extends ObserverPropertyType
+      ? ParsedObserverPropertyType<T[P]>
+      : T[P] extends {type: ObserverPropertyType}
+      ? ParsedObserverPropertyType<T[P]['type']>
+      : T[P] extends ObserverOptions<null, infer T2>
+      ? unknown extends T2 ? string : T2
+      : never
+};
+
+type HTMLElementCancellableEventMap = Pick<HTMLElementEventMap,
+  'auxclick' |
+  'beforeinput' |
+  // 'cancel' |
+  'click' |
+  'compositionstart' |
+  'contextmenu' |
+  'drag' |
+  'dragenter' |
+  'dragover' |
+  'dragstart' |
+  'drop' |
+  'invalid' |
+  'keydown' |
+  'keypress' |
+  'keyup' |
+  'mousedown' |
+  'mousemove' |
+  'mouseout' |
+  'mouseover' |
+  'mouseup' |
+  'pointerdown' |
+  'pointermove' |
+  'pointerout' |
+  'pointerover' |
+  'pointerup' |
+  'reset' |
+  'selectstart' |
+  'submit' |
+  'touchend' |
+  'touchmove' |
+  'touchstart' |
+  'wheel'
+  >
+
+type CompositionEventMap = HTMLElementEventMap & {
+  [P in keyof HTMLElementCancellableEventMap as `~${P}`]: Omit<HTMLElementCancellableEventMap[P], 'preventDefault'>
+};
+
+type CompositionEventListener<T, K = keyof CompositionEventMap> = {
+  type?: K
+  id?: string,
+  capture?: boolean;
+  once?: boolean;
+  passive?: boolean;
+  signal?: AbortSignal;
+  handleEvent?: (
+      this: T,
+      event: (K extends keyof CompositionEventMap ? CompositionEventMap[K] : Event) & {currentTarget:HTMLElement}
+    ) => any;
+  prop?: keyof T & string;
+ };
+
+type CompositionEventListenerObject<T> =
+  {
+    [P in keyof CompositionEventMap]?: (keyof T & string)
+      | ((this: T, event: CompositionEventMap[P] & {currentTarget:HTMLElement}) => any)
+      | CompositionEventListener<T, P>
+  };
+
+export type dummyObject = {};

package/core/typings.js

@@ -0,0 +1 @@
+export {};

package/mixins/AriaReflectorMixin.js

@@ -0,0 +1,42 @@
+import { attrNameFromPropName } from '../core/dom.js';
+
+/** @param {typeof import('../core/CustomElement.js').default} Base */
+export default function AriaReflectorMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      _ariaRole: 'string',
+    }).methods({
+      /**
+       * @param {keyof HTMLElement & keyof ElementInternals} name
+       * @param {string} value
+       */
+      updateAriaProperty(name, value) {
+        if (this.elementInternals && name in this.elementInternals) {
+          this.elementInternals[name] = value;
+        } else if (name in this) {
+          this[name] = value;
+        } else {
+          console.warn('Unknown ARIA property', name);
+          /** @type {string} */
+          let attrName = name;
+          if (attrName.startsWith('aria')) {
+            attrName = `aria-${attrName.slice(4).toLowerCase()}`;
+          }
+          if (value == null) {
+            this.removeAttribute(name);
+          } else {
+            this.setAttribute(attrName, value);
+          }
+        }
+      },
+    })
+    .on({
+      _ariaRoleChanged(oldValue, newValue) {
+        this.updateAriaProperty('role', newValue);
+      },
+      constructed() {
+        this.updateAriaProperty('role', this._ariaRole);
+      },
+    });
+}