@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/core/ICustomElement.d.ts

@@ -0,0 +1,288 @@
+/* eslint-disable no-use-before-define */
+
+import Composition from './Composition.js';
+import {
+  CompositionEventListener,
+  CompositionEventListenerObject,
+  HTMLTemplater,
+  ObserverOptions,
+  ObserverPropertyType,
+  ParsedObserverPropertyType,
+  ParsedProps,
+} from './typings.js';
+
+type ClassOf<T extends { prototype: unknown; } > = T;
+
+type CallbackArguments<T1 = any, T2 = T1> = {
+  composition: Composition<T1>;
+  html: HTMLTemplater<T1, Partial<T2>>;
+  inline: (fn: (this:T1, data: {[K in keyof T2]?: T2[K]}) => any) => string;
+  template: DocumentFragment;
+  element: T1;
+}
+
+type IDLParameter<C extends object> = {
+  [P in string] :
+    ObserverPropertyType
+    | ObserverOptions<ObserverPropertyType, unknown, C>
+    | ((this:C, data:Partial<C>, fn?: () => any) => any)
+};
+
+type ExtendedClass<T1 extends typeof ICustomElement, T2 extends abstract new (...args: any) => any> =
+  Omit<T1, 'prototype'> & T2;
+
+type ConstructorLess<T1 extends object, T2 extends abstract new (...args: any) => any> = T1 & T2;
+
+declare type DefinedPropertiesOf<T extends ({ prototype: unknown; } & (new (...args: any) => any)), P> =
+  {[K in keyof T]: T[K]}
+  & { new(): (...args: ConstructorParameters<T>) => InstanceType<T> & P}
+  & { prototype: T['prototype'] & P };
+
+type CompositionCallback<T1, T2=T1> = {
+    composed?: (this: T1, options: CallbackArguments<T1, T2>) => any,
+    constructed?: (this: T1, options: CallbackArguments<T1, T2>) => any,
+    connected?: (this: T1, options: CallbackArguments<T1, T2>) => any,
+    disconnected?: (this: T1, options: CallbackArguments<T1, T2>) => any,
+    props?: {
+      [P in keyof T1] : (
+      this: T1,
+      oldValue: T1[P],
+      newValue: T1[P],
+      changes:any,
+      element: T1
+      ) => any
+    },
+    attrs?: {[K in keyof any]: (
+      this: T1,
+      oldValue: string,
+      newValue: string,
+      element: T1
+      ) => unknown
+    },
+  } & {
+    [P in keyof T1 & string as `${P}Changed`]?: (
+      this: T1,
+      oldValue: T1[P],
+      newValue: T1[P],
+      changes:any,
+      element: T1
+      ) => any
+  }
+
+declare interface ICustomElementInstance extends HTMLElement {
+  ariaActiveDescendantElement: Element
+  propChangedCallback<
+    T extends ICustomElementInstance,
+    K extends string = string,
+  >(this:T,
+      name: K,
+      oldValue: K extends keyof T ? T[K] : unknown,
+      newValue: K extends keyof T ? T[K] : unknown,
+      changes?: K extends keyof T ? T[K] extends object ? Partial<T[K]> : T[K] : unknown): void;
+
+}
+
+interface ConstructorOf<T> {
+  new(): T;
+}
+
+export declare const ICustomElement: {
+  new(): ICustomElementInstance;
+  prototype: ICustomElementInstance;
+
+  _onComposeCallbacks: ((callback: CallbackArguments) => any)[];
+
+  _onConnectedCallbacks: ((callback: CallbackArguments) => any)[];
+
+  _onDisconnectedCallbacks: ((callback: CallbackArguments) => any)[];
+
+  _onConstructedCallbacks: ((callback: CallbackArguments) => any)[];
+
+  schema: Record<string, unknown>;
+
+  extend<T extends typeof ICustomElement>(this: T): T;
+
+  tsClassFix<T extends typeof ICustomElement>(this:T): T & (new (...args:any[]) => InstanceType<T>)
+
+  html<T extends typeof ICustomElement>(
+    this: T,
+    string: TemplateStringsArray,
+    // eslint-disable-next-line no-shadow
+    ...substitutions: (string|Element|((this:InstanceType<T>, data:InstanceType<T> & T['schema']) => any))[]
+    ): T
+
+  css<
+    T1 extends typeof ICustomElement,
+    T2 extends TemplateStringsArray|HTMLStyleElement|CSSStyleSheet>(
+    this: T1,
+    array: T2,
+    ...rest: T2 extends TemplateStringsArray ? string[] : (HTMLStyleElement|CSSStyleSheet)[]
+  ): T1
+
+  define<
+    CLASS extends typeof ICustomElement,
+    ARGS extends ConstructorParameters<CLASS>,
+    INSTANCE extends InstanceType<CLASS>,
+    PROPS extends {
+        [P in keyof any] :
+          {
+            enumerable?: boolean;
+            configurable?: boolean;
+            writable?: boolean;
+            value?: any;
+            get?: ((this: INSTANCE) => any);
+            set?: (this: INSTANCE, value: any) => void;
+          } | ((this: INSTANCE, ...args:any[]) => any)
+      },
+    VALUE extends {
+      [KEY in keyof PROPS]: PROPS[KEY] extends (...args2:any[]) => infer R ? R
+        : PROPS[KEY] extends TypedPropertyDescriptor<infer R> ? R : never
+    }>
+    (this: CLASS, props: PROPS & ThisType<PROPS & INSTANCE>): CLASS
+      & (new (...args: ARGS) => INSTANCE & VALUE)
+
+  observe<
+    CLASS extends typeof ICustomElement,
+    ARGS extends ConstructorParameters<CLASS>,
+    INSTANCE extends InstanceType<CLASS>,
+    PROPS extends IDLParameter<INSTANCE>,
+    VALUE extends {
+      [KEY in keyof PROPS]:
+      PROPS[KEY] extends (...args2:any[]) => infer R ? R
+          : PROPS[KEY] extends ObserverPropertyType ? ParsedObserverPropertyType<PROPS[KEY]>
+          : PROPS[KEY] extends {type: 'object'} & ObserverOptions<any, infer R> ? (unknown extends R ? object : R)
+          : PROPS[KEY] extends {type: ObserverPropertyType} ? ParsedObserverPropertyType<PROPS[KEY]['type']>
+          : PROPS[KEY] extends ObserverOptions<any, infer R> ? (unknown extends R ? string : R)
+          : never
+    },
+    > (this: CLASS, props: PROPS)
+      : CLASS & (new (...args: ARGS) => INSTANCE & VALUE)
+
+  props: typeof ICustomElement.observe;
+
+  set<
+    CLASS extends typeof ICustomElement,
+    ARGS extends ConstructorParameters<CLASS>,
+    INSTANCE extends InstanceType<CLASS>,
+    PROPS extends object>
+    (this: CLASS, source: PROPS & ThisType<PROPS & INSTANCE>, options?: Partial<PropertyDescriptor>)
+    : CLASS & (new(...args: ARGS) => INSTANCE & PROPS)
+
+  methods: typeof ICustomElement.set;
+
+  overrides<
+  CLASS extends typeof ICustomElement,
+  ARGS extends ConstructorParameters<CLASS>,
+  INSTANCE extends InstanceType<CLASS>,
+  PROPS extends Partial<INSTANCE>>
+  (this: CLASS, source: PROPS & ThisType<PROPS & INSTANCE>, options?: Partial<PropertyDescriptor>)
+  : CLASS & (new(...args: ARGS) => INSTANCE & PROPS)
+
+  expressions<
+    CLASS extends typeof ICustomElement,
+    ARGS extends ConstructorParameters<CLASS>,
+    INSTANCE extends InstanceType<CLASS>,
+    PROPS extends {
+      [K in keyof any]: ((this: INSTANCE, data?: INSTANCE & CLASS['schema']) => string|boolean|null)
+    }
+    >(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>):
+    CLASS & (new (...args: ARGS) => INSTANCE & PROPS)
+
+  defineStatic<
+    T1 extends typeof ICustomElement,
+    T2 extends IDLParameter<T1>>
+    (this: T1, props: T2):T1 & ParsedProps<T2>;
+
+  setStatic<
+    T1 extends typeof ICustomElement,
+    T2 extends {
+      [K in keyof any]: (
+        ((this:T1, ...args:any[]) => any)
+        |string|number|boolean|any[]|object)}
+    >
+    (this: T1, source: T2 & ThisType<T1 & T2>):T1 & T2;
+
+  autoRegister<T extends typeof ICustomElement>
+    (this: T, elementName: string): T;
+
+  setSchema<
+    T1 extends typeof ICustomElement,
+    T2 extends {[K in keyof any]: unknown}
+    >
+    (this: T1, schema: T2): T1 & {schema: T2};
+
+  register<T extends typeof ICustomElement>
+    (this: T, elementName?: string, force?: boolean): T;
+
+  append<
+    T extends typeof ICustomElement,
+    >
+    (this: T, ...parts: ConstructorParameters<typeof Composition<InstanceType<T>>>): T;
+
+  mixin<
+    BASE extends typeof ICustomElement,
+    FN extends (...args:any[]) => any,
+    RETURN extends ReturnType<FN>,
+    SUBCLASS extends ClassOf<RETURN>,
+    ARGS extends ConstructorParameters<SUBCLASS>,
+    BASE_INSTANCE extends InstanceType<BASE>,
+    SUBCLASS_INSTANCE extends InstanceType<SUBCLASS>>
+    (this: BASE, mixin: FN): SUBCLASS & BASE
+      & (new (...args: ARGS) => SUBCLASS_INSTANCE & BASE_INSTANCE)
+
+  events<T extends typeof ICustomElement>
+    (
+      this: T,
+      listeners?: CompositionEventListenerObject<InstanceType<T>>,
+      options?: Partial<CompositionEventListener<InstanceType<T>>>,
+    ): T;
+
+  childEvents<T extends typeof ICustomElement>
+    (
+      this: T,
+      listenerMap: {
+        [P in keyof any]: CompositionEventListenerObject<InstanceType<T>>
+      },
+      options?: Partial<CompositionEventListener<InstanceType<T>>>,
+    ): T;
+
+  on<
+    T1 extends typeof ICustomElement,
+    T2 extends InstanceType<T1>,
+    T3 extends CompositionCallback<T2, T2 & T1['schema']>,
+    T4 extends keyof T3,
+    >
+    (this: T1, name: T3|T4, callbacks?: T3[T4] & ThisType<T2>): T1
+
+  onPropChanged<
+    T1 extends typeof ICustomElement,
+    T2 extends InstanceType<T1>
+    >
+    (
+      this: T1,
+      options: {
+        [P in keyof T2]? : (
+        // eslint-disable-next-line no-shadow
+        this: T2,
+        oldValue: T2[P],
+        newValue: T2[P],
+        changes:any,
+        element: T2
+        ) => void
+      },
+    ): T1;
+
+  onAttributeChanged<T extends typeof ICustomElement>
+    (
+      this: T,
+      options: {
+        [x:string]: (
+        // eslint-disable-next-line no-shadow
+        this: InstanceType<T>,
+        oldValue: string,
+        newValue: string,
+        element: InstanceType<T>
+        ) => void
+      },
+    ): T;
+};

package/core/ICustomElement.js

@@ -0,0 +1 @@
+export class ICustomElement extends HTMLElement {}

package/core/css.js

@@ -0,0 +1,51 @@
+/**
+ * @param {Iterable<HTMLStyleElement|CSSStyleSheet>} styles
+ * @yields composed CSSStyleSheet
+ * @return {Generator<CSSStyleSheet>} composed CSSStyleSheet
+ */
+export function* generateCSSStyleSheets(styles) {
+  for (const style of styles) {
+    if (style instanceof HTMLStyleElement) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(style.textContent);
+      yield sheet;
+    } 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;
+    } else {
+      yield style;
+    }
+  }
+}
+
+/** @type {WeakMap<CSSStyleSheet, HTMLStyleElement>} */
+const styleElementWrappers = new WeakMap();
+
+/**
+ * @param {Iterable<HTMLStyleElement|CSSStyleSheet>} styles
+ * @yields composed HTMLStyleElement
+ * @return {Generator<HTMLStyleElement>} composed CSSStyleSheet
+ */
+export function* generateHTMLStyleElements(styles) {
+  for (const style of styles) {
+    if (style instanceof HTMLStyleElement) {
+      yield style;
+    } else if (style.ownerNode instanceof HTMLStyleElement) {
+      // console.log('Cloning parent HTMLStyleElement instead');
+      // @ts-ignore Skip cast
+      yield style.ownerNode.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);
+      }
+      // @ts-ignore Skip cast
+      yield styleElement.cloneNode(true);
+    }
+  }
+}

package/core/customTypes.js

@@ -0,0 +1,125 @@
+/** @typedef {import('./CustomElement').default} CustomElement */
+
+/** @type {WeakMap<HTMLElement, EventListener>} */
+const eventHandlerValues = new Map();
+
+/**
+ * @see https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-attributes
+ * @type {import('./typings.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;
+    if (newValue == null) {
+      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();
+    this[name] = fn;
+  },
+  propChangedCallback(name, oldValue, newValue) {
+    const eventName = name.slice(2);
+    if (oldValue) {
+      this.removeEventListener(eventName, oldValue);
+    }
+    if (newValue) {
+      this.addEventListener(eventName, newValue);
+    }
+  },
+};
+
+const weakRefValues = new WeakMap();
+
+/**
+ * @type {import('./typings.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();
+  },
+};
+
+/** @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 {Keyframe} styles
+ * @prop {EffectTiming} [timing]
+ */
+
+/** @this {CustomElement} */
+function elementStylerRAFCallback() {
+  let previousAnimation = elementStylerLastAnimation.get(this);
+  const value = elementStylerValues.get(this);
+  if (!value) {
+    previousAnimation?.cancel();
+    return;
+  }
+  /** @type {HTMLElement} */
+  const el = value.target ? this.composition.getElement(this.shadowRoot, value.target) : this;
+  const currentAnimation = el.animate(value.styles, {
+    ...value.timing,
+    fill: 'forwards',
+  });
+  currentAnimation.onremove = () => {
+    previousAnimation?.effect.updateTiming({
+      fill: 'none',
+    });
+    // Destroy previous manually to avoid leak
+    previousAnimation?.finish();
+    previousAnimation?.cancel();
+    previousAnimation = null;
+  };
+  elementStylerLastAnimation.set(this, currentAnimation);
+  elementStylerHasQueue.delete(this);
+}
+
+/** @type {import('./typings.js').ObserverOptions<'object',ElementStylerOptions, CustomElement>} */
+export const ELEMENT_STYLER_TYPE = {
+  type: 'object',
+  reflect: false,
+  values: elementStylerValues,
+  diff: null, // Skip computing entire change
+  changedCallback(oldValue, newValue) {
+    const hasQueue = elementStylerHasQueue.has(this);
+    if (!newValue) {
+      if (!hasQueue) return;
+      console.warn('debug needed of cancel needed');
+      elementStylerHasQueue.delete(this);
+      return;
+    }
+
+    if (hasQueue) {
+      // Already scheduled
+      return;
+    }
+
+    // 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);
+  },
+};