@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/core/Composition.js

@@ -22,12 +22,99 @@ import { generateUID } from './uid.js';
 /**
  * @template T
  * @typedef {Object} RenderOptions
+ * @prop {T} [defaults] what
  * @prop {T} [store] what
- * @prop {DocumentFragment|ShadowRoot|HTMLElement|Element} [target] where
+ * @prop {DocumentFragment|HTMLElement|Element} [target] where
+ * @prop {ShadowRoot} [shadowRoot] where
  * @prop {any} [context] `this` on callbacks/events
  * @prop {any} [injections]
  */
 
+/**
+ * @template T
+ * @typedef {{
+ *  target: Element|DocumentFragment,
+ *  byProp: (prop: keyof T & string, value:any, data?:Partial<T>) => void,
+ *  state: InitializationState,
+ * } &  ((changes:Partial<T>, data:T) => void)} RenderDraw
+ */
+
+/** @typedef {HTMLElementEventMap & { input: InputEvent; } } HTMLElementEventMapFixed */
+
+/**
+ * @typedef {(
+ * Pick<HTMLElementEventMapFixed,
+ *  'auxclick' |
+ *  'beforeinput' |
+ *  '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'
+ *  >
+ *  )} HTMLElementCancellableEventMap
+ */
+
+/**
+ * @typedef {(
+ *   HTMLElementEventMapFixed
+ *   & {[P in keyof HTMLElementCancellableEventMap as `~${P}`]: HTMLElementCancellableEventMap[P]}
+ *   & Record<string, Event|CustomEvent<any>>
+ * )} CompositionEventMap
+ */
+
+/**
+ * @template {any} T
+ * @template {keyof CompositionEventMap} [K = keyof CompositionEventMap]
+ * @typedef {{
+ * type?: K
+ * tag?: string|symbol,
+ * capture?: boolean;
+ * once?: boolean;
+ * passive?: boolean;
+ * signal?: AbortSignal;
+ * handleEvent?: (
+ *     this: T,
+ *     event: (K extends keyof CompositionEventMap ? CompositionEventMap[K] : Event) & {currentTarget:HTMLElement}
+ *   ) => any;
+ * prop?: string;
+ * deepProp?: string[],
+ * }} CompositionEventListener
+ */
+
+/**
+ * @template T
+ * @typedef {{
+ * [P in keyof CompositionEventMap]?: (keyof T & string)
+ *   | ((this: T, event: CompositionEventMap[P] & {currentTarget:HTMLElement}) => any)
+ *   | CompositionEventListener<T, P>
+ * }} CompositionEventListenerObject
+ */
+
 /**
  * @template {any} T
  * @typedef {Object} NodeBindEntry
@@ -41,7 +128,7 @@ import { generateUID } from './uid.js';
  * @prop {boolean} [doubleNegate]
  * @prop {Function} [expression]
  * @prop {(options: RenderOptions<?>, element: Element, changes:any, data:any) => any} [render] custom render function
- * @prop {import('./typings.js').CompositionEventListener<T>[]} [listeners]
+ * @prop {CompositionEventListener<T>[]} [listeners]
  * @prop {Composition<any>} [composition] // Sub composition templating (eg: array)
  * @prop {T} defaultValue
  */
@@ -52,9 +139,10 @@ import { generateUID } from './uid.js';
  * @typedef RenderGraphSearch
  *  @prop {(state:InitializationState, changes:any, data:any) => any}  invocation
  *  @prop {number}  cacheIndex
- *  @prop {number}  ranFlagIndex
- *  @prop {number}  dirtyIndex
+ *  @prop {number}  searchIndex
  *  @prop {string | Function | string[]}  query
+ *  @prop {boolean} [negate]
+ *  @prop {boolean} [doubleNegate]
  *  @prop {Function}  [expression]
  *  @prop {string}  prop
  *  @prop {string[]}  deepProp
@@ -73,16 +161,16 @@ import { generateUID } from './uid.js';
  * @prop {string} [attrName]
  * @prop {any} [defaultValue]
  * @prop {RenderGraphSearch} search
+ * @prop {InterpolateOptions['injections']} [injections]
  */
 
 /**
  * @type {RenderGraphAction['invocation']}
  * @this {RenderGraphAction}
  */
-function writeDOMAttribute(state, value) {
+function writeDOMAttribute({ nodes }, value) {
   const { nodeIndex, attrName } = this;
-  /** @type {Element} */
-  const element = state.nodes[nodeIndex];
+  const element = /** @type {Element} */ (nodes[nodeIndex]);
   switch (value) {
     case undefined:
     case null:
@@ -102,43 +190,97 @@ function writeDOMAttribute(state, value) {
  * @type {RenderGraphAction['invocation']}
  * @this {RenderGraphAction}
  */
-function writeDOMText(state, value) {
-  // @ts-ignore Skip cast
-  state.nodes[this.nodeIndex].data = value;
+function writeDynamicNode({ nodeStates, comments, nodes }, value) {
+  const { commentIndex, nodeIndex } = this;
+  const nodeState = nodeStates[nodeIndex];
+  // eslint-disable-next-line no-bitwise
+  const hidden = nodeState & 0b0001;
+  const show = value != null && value !== false;
+  if (!show) {
+    // Should be hidden
+    if (hidden) return;
+    // Replace whatever node is there with the comment
+    let comment = comments[commentIndex];
+    if (!comment) {
+      comment = createEmptyComment();
+      comments[commentIndex] = comment;
+    }
+    nodes[nodeIndex].replaceWith(comment);
+    // eslint-disable-next-line no-bitwise
+    nodeStates[nodeIndex] |= 0b0001;
+    return;
+  }
+  // Must be shown
+  // Update node first (offscreen rendering)
+  const node = nodes[nodeIndex];
+  // eslint-disable-next-line no-bitwise
+  const isDynamicNode = nodeState & 0b0010;
+
+  if (typeof value === 'object') {
+    // Not string data, need to replace
+    console.warn('Dynamic nodes not supported yet');
+  } else if (isDynamicNode) {
+    const textNode = new Text(value);
+    node.replaceWith(textNode);
+    nodes[nodeIndex] = textNode;
+    // eslint-disable-next-line no-bitwise
+    nodeStates[nodeIndex] &= ~0b0010;
+  } else {
+    /** @type {Text} */ (node).data = value;
+  }
+
+  // Updated, now set hidden state
+
+  if (hidden) {
+    const comment = comments[commentIndex];
+    comment.replaceWith(node);
+    // eslint-disable-next-line no-bitwise
+    nodeStates[nodeIndex] &= ~0b0001;
+  }
+  // Done
 }
 
 /**
  * @type {RenderGraphAction['invocation']}
  * @this {RenderGraphAction}
  */
-function writeDOMElementAttachedState(state, value) {
+function writeDOMElementAttachedState({ nodeStates, nodes, comments }, value) {
   const { commentIndex, nodeIndex } = this;
-  let comment = state.comments[commentIndex];
+  // eslint-disable-next-line no-bitwise
+  const hidden = nodeStates[nodeIndex] & 1;
+  const show = value != null && value !== false;
+  if (show === !hidden) return;
+
+  const element = nodes[nodeIndex];
+  let comment = comments[commentIndex];
   if (!comment) {
     comment = createEmptyComment();
-    state.comments[commentIndex] = comment;
+    comments[commentIndex] = comment;
   }
-  const element = state.nodes[nodeIndex];
-  const show = value != null && value !== false;
   if (show) {
     comment.replaceWith(element);
+    // eslint-disable-next-line no-bitwise
+    nodeStates[nodeIndex] &= ~0b0001;
   } else {
     element.replaceWith(comment);
+    // eslint-disable-next-line no-bitwise
+    nodeStates[nodeIndex] |= 0b0001;
   }
-  return show;
 }
 
 /**
  * @type {RenderGraphAction['invocation']}
  * @this {RenderGraphAction}
  */
-function writeDOMHideElementOnInit(state) {
+function writeDOMHideNodeOnInit({ comments, nodeStates, nodes }) {
   const { commentIndex, nodeIndex } = this;
 
   const comment = createEmptyComment();
-  state.comments[commentIndex] = comment;
+  comments[commentIndex] = comment;
+  // eslint-disable-next-line no-bitwise
+  nodeStates[nodeIndex] |= 1;
 
-  state.nodes[nodeIndex].replaceWith(comment);
+  nodes[nodeIndex].replaceWith(comment);
 }
 
 /**
@@ -146,37 +288,50 @@ function writeDOMHideElementOnInit(state) {
  * @param {Parameters<RenderGraphSearch['invocation']>} args
  */
 function executeSearch(search, ...args) {
-  const [state] = args;
-  const cachedValue = state.caches[search.cacheIndex];
-  if (state.ranFlags[search.ranFlagIndex]) {
+  const [{ caches, searchStates }] = args;
+  const { cacheIndex, searchIndex, subSearch, invocation } = search;
+  const cachedValue = caches[cacheIndex];
+  const searchState = searchStates[searchIndex];
+
+  // Ran   = 0b0001
+  // Dirty = 0b0010
+  // eslint-disable-next-line no-bitwise
+  if (searchState & 0b0001) {
     // Return last result
     return {
       value: cachedValue,
-      dirty: state.dirtyFlags[search.dirtyIndex],
+      // eslint-disable-next-line no-bitwise
+      dirty: ((searchState & 0b0010) === 0b0010),
     };
   }
-  state.ranFlags[search.ranFlagIndex] = true;
+
+  // eslint-disable-next-line no-bitwise
+  searchStates[searchIndex] |= 0b0001;
   let result;
-  if (search.subSearch) {
-    const subResult = executeSearch(search.subSearch, ...args);
-    // Use last cached value (if any)
-    if (!subResult.dirty && cachedValue !== undefined) {
-      state.dirtyFlags[search.dirtyIndex] = false;
-      return { value: cachedValue, dirty: false };
+  if (invocation) {
+    if (subSearch) {
+      const subResult = executeSearch(subSearch, ...args);
+      // Use last cached value (if any)
+      if (!subResult.dirty && cachedValue !== undefined) {
+        // eslint-disable-next-line no-bitwise
+        searchStates[searchIndex] &= ~0b0010;
+        return { value: cachedValue, dirty: false };
+      }
+      // Pass from subquery
+      result = search.invocation(subResult.value);
+    } else {
+      result = search.invocation(...args);
+    }
+    if ((result === undefined) || (cachedValue === result)) {
+      // Return from cache
+      return { value: result, dirty: false };
     }
-    // Pass from subquery
-    result = search.invocation(subResult.value);
-  } else {
-    result = search.invocation(...args);
-  }
-  if ((result === undefined) || (cachedValue === result)) {
-    // Returnf rom cache
-    return { value: result, dirty: false };
   }
 
   // Overwrite cache and flag as dirty
-  state.caches[search.cacheIndex] = result;
-  state.dirtyFlags[search.dirtyIndex] = true;
+  caches[cacheIndex] = result;
+  // eslint-disable-next-line no-bitwise
+  searchStates[searchIndex] |= 0b0010;
   return { value: result, dirty: true };
 }
 
@@ -184,11 +339,11 @@ function executeSearch(search, ...args) {
  * @type {RenderGraphSearch['invocation']}
  * @this {RenderGraphSearch}
  */
-function searchWithExpression(state, changes, data) {
+function searchWithExpression({ options: { context, store, injections } }, changes, data) {
   return this.expression.call(
-    state.options.context,
-    state.options.store ?? data,
-    state.options.injections,
+    context,
+    store ?? data,
+    injections,
   );
 }
 
@@ -196,7 +351,7 @@ function searchWithExpression(state, changes, data) {
  * @type {RenderGraphSearch['invocation']}
  * @this {RenderGraphSearch}
  */
-function searchWithProp(state, changes, data) {
+function searchWithProp(state, changes) {
   return changes[this.prop];
 }
 
@@ -216,23 +371,21 @@ function searchWithDeepProp(state, changes, data) {
 
 /**
  * @typedef InterpolateOptions
- * @prop {Object} [defaults] Default values to use for interpolation
- * @prop {{iterable:string} & Record<string,any>} [injections] Context-specific injected properties. (Experimental)
+ * @prop {Record<string,any>} [defaults] Default values to use for interpolation
+ * @prop {{iterable:string} & Record<string,any> & {index:number}} [injections] Context-specific injected properties. (Experimental)
  */
 
 /**
  * @typedef InitializationState
  * @prop {Element} lastElement
- * @prop {boolean} isShadowRoot
  * @prop {ChildNode} lastChildNode
  * @prop {(Element|Text)[]} nodes
  * @prop {any[]} caches
  * @prop {Comment[]} comments
- * @prop {boolean[]} ranFlags
- * @prop {boolean[]} dirtyFlags
- * @prop {Element[]} refs
+ * @prop {Uint8Array} nodeStates
+ * @prop {Uint8Array} searchStates
+ * @prop {HTMLElement[]} refs
  * @prop {number} lastChildNodeIndex
- * @prop {DocumentFragment} instanceFragment
  * @prop {RenderOptions<?>} options
  */
 
@@ -242,7 +395,6 @@ const STRING_INTERPOLATION_REGEX = /{([^}]*)}/g;
 /**
  * Returns event listener bound to shadow root host.
  * Use this function to avoid generating extra closures
- *
  * @this {HTMLElement}
  * @param {Function} fn
  */
@@ -317,13 +469,16 @@ function valueFromPropName(prop, source) {
   return value;
 }
 
+const compositionCache = new Map();
+
 /** @template T */
 export default class Composition {
-  #interpolationState = {
+  static EVENT_PREFIX_REGEX = /^([*1~]+)?(.*)$/;
+
+  _interpolationState = {
     nodeIndex: -1,
-    ranFlagIndex: 0,
+    searchIndex: 0,
     cacheIndex: 0,
-    dirtyIndex: 0,
     commentIndex: 0,
     /** @type {this['nodesToBind'][0]} */
     nodeEntry: null,
@@ -346,65 +501,49 @@ export default class Composition {
 
   /**
    * Index of searches by query (dotted notation for deep props)
-   *
    * @type {Map<Function|string, RenderGraphSearch>}
    */
-  searchByQuery = new Map();
+  searchByQuery;
 
   /**
    * Index of searches by query (dotted notation for deep props)
-   *
    * @type {Map<string, RenderGraphAction[]>}
    */
-  actionsByPropsUsed = new Map();
-
-  /** @type {RenderGraphAction[]} */
-  actions = [];
+  actionsByPropsUsed;
 
   /** @type {RenderGraphAction[]} */
   postInitActions = [];
 
   /** @type {Set<string>} */
-  tagsWithBindings = new Set();
+  tagsWithBindings;
 
   /**
    * Array of element tags
-   *
    * @type {string[]}
    */
   tags = [];
 
-  /**
-   * Array of property bindings sorted by tag/subnode
-   *
-   * @type {Set<string>}
-   */
-  watchedProps = new Set();
-
   /**
    * Data of arrays used in templates
    * Usage of a [mdw-for] will create an ArrayLike expectation based on key
    * Only store metadata, not actual data. Currently only needs length.
    * TBD if more is needed later
    * Referenced by property key (string)
-   *
-   * @type {CompositionAdapter}
+   * @type {CompositionAdapter<T>}
    */
   adapter;
 
   /**
    * Collection of events to bind.
    * Indexed by ID
-   *
-   * @type {Map<string|symbol, import('./typings.js').CompositionEventListener<any>[]>}
+   * @type {Map<string|symbol, CompositionEventListener<any>[]>}
    */
-  events = new Map();
+  events;
 
   /**
    * Snapshot of composition at initial state.
    * This fragment can be cloned for first rendering, instead of calling
    * of using `render()` to construct the initial DOM tree.
-   *
    * @type {DocumentFragment}
    */
   cloneable;
@@ -421,7 +560,6 @@ export default class Composition {
   /**
    * List of IDs used by template elements
    * May be needed to be removed when adding to non-DocumentFragment
-   *
    * @type {string[]}
    */
   allIds = [];
@@ -430,7 +568,8 @@ export default class Composition {
    * Collection of IDs used for referencing elements
    * Not meant for live DOM. Removed before attaching to document
    */
-  temporaryIds = new Set();
+  /** @type {Set<string>} */
+  temporaryIds;
 
   /** Flag set when template and styles have been interpolated */
   interpolated = false;
@@ -453,6 +592,24 @@ export default class Composition {
     yield this.template;
   }
 
+  /**
+   * @template T
+   * @param  {ConstructorParameters<typeof Composition<T>>} parts
+   * @return {Composition<T>}
+   */
+  static compose(...parts) {
+    for (const [cache, comp] of compositionCache) {
+      if (cache.length !== parts.length) continue;
+      if (parts.every((part, index) => part === cache[index])) {
+        return comp;
+      }
+    }
+
+    const composition = new Composition(...parts);
+    compositionCache.set(parts, composition);
+    return composition;
+  }
+
   /**
    * @param {CompositionPart<T>[]} parts
    */
@@ -472,13 +629,15 @@ export default class Composition {
     return this;
   }
 
-  /** @param {import('./typings.js').CompositionEventListener<T>} listener */
+  /** @param {CompositionEventListener<T>} listener */
   addCompositionEventListener(listener) {
     const key = listener.tag ?? '';
-    if (this.events.has(key)) {
-      this.events.get(key).push(listener);
+    // eslint-disable-next-line no-multi-assign
+    const events = (this.events ??= new Map());
+    if (events.has(key)) {
+      events.get(key).push(listener);
     } else {
-      this.events.set(key, [listener]);
+      events.set(key, [listener]);
     }
     return this;
   }
@@ -490,7 +649,7 @@ export default class Composition {
    * @return {void}
    */
   #bindCompositionEventListeners(tag, target, context) {
-    if (!this.events.has(tag)) return;
+    if (!this.events?.has(tag)) return;
     for (const event of this.events.get(tag)) {
       let listener;
       if (event.handleEvent) {
@@ -508,56 +667,66 @@ export default class Composition {
    * TODO: Add types and clean up closure leak
    * Updates component nodes based on data.
    * Expects data in JSON Merge Patch format
-   *
    * @see https://www.rfc-editor.org/rfc/rfc7386
    * @template {Object} T
    * @param {Partial<T>} changes what specifically
    * @param {T} [data]
    * @param {RenderOptions<T>} [options]
-   * @return {Function & {target:Element}} anchor
+   * @return {RenderDraw<T>} anchor
    */
   render(changes, data, options = {}) {
-    // console.log('render', changes, options);
     if (!this.interpolated) {
-      this.interpolate({ defaults: data ?? changes, injections: options?.injections });
+      this.interpolate({
+        defaults: data ?? changes,
+        ...options,
+      });
     }
 
     const instanceFragment = /** @type {DocumentFragment} */ (this.cloneable.cloneNode(true));
 
-    const target = options.target ?? instanceFragment.firstElementChild;
-
-    const isShadowRoot = target instanceof ShadowRoot;
+    const shadowRoot = options.shadowRoot;
+    const target = shadowRoot ?? options.target ?? instanceFragment.firstElementChild;
 
     /** @type {InitializationState} */
     const initState = {
-      instanceFragment,
       lastChildNode: null,
       lastChildNodeIndex: 0,
       lastElement: null,
-      isShadowRoot,
-      ranFlags: [],
+      nodeStates: new Uint8Array(this._interpolationState.nodeIndex + 1),
+      searchStates: new Uint8Array(this._interpolationState.searchIndex),
       comments: [],
       nodes: [],
       caches: this.initCache.slice(),
-      dirtyFlags: [],
       refs: [],
       options,
     };
 
-    const nodes = initState.nodes;
+    const { nodes, refs, searchStates, caches } = initState;
     for (const { tag, textNodes } of this.nodesToBind) {
-      const element = instanceFragment.getElementById(tag);
-      initState.refs.push(element);
-      nodes.push(element);
-      this.#bindCompositionEventListeners(tag, element, options.context);
-
-      if (!textNodes.length) continue;
+      /** @type {Text} */
+      let textNode;
+      if (tag === '') {
+        if (!textNodes.length) {
+          console.warn('why was root tagged?');
+          continue;
+        }
+        console.warn('found empty tag??');
+        refs.push(null);
+        nodes.push(null);
+        textNode = /** @type {Text} */ (instanceFragment.firstChild);
+      } else {
+        const element = instanceFragment.getElementById(tag);
+        refs.push(element);
+        nodes.push(element);
+        this.#bindCompositionEventListeners(tag, element, options.context);
+        if (!textNodes.length) continue;
+        textNode = /** @type {Text} */ (element.firstChild);
+      }
 
-      let textNode = element.firstChild;
       let currentIndex = 0;
       for (const index of textNodes) {
         while (index !== currentIndex) {
-          textNode = textNode.nextSibling;
+          textNode = /** @type {Text} */ (textNode.nextSibling);
           currentIndex++;
         }
         nodes.push(textNode);
@@ -570,32 +739,35 @@ export default class Composition {
       action.invocation(initState);
     }
 
+    /**
+     * @param {Partial<T>} changes
+     * @param {T} data
+     */
     const draw = (changes, data) => {
       let ranSearch = false;
       for (const prop of this.props) {
-        if (!this.actionsByPropsUsed.has(prop)) continue;
+        if (!this.actionsByPropsUsed?.has(prop)) continue;
         if (!(prop in changes)) continue;
         const actions = this.actionsByPropsUsed.get(prop);
         for (const action of actions) {
           ranSearch = true;
-          const result = executeSearch(action.search, initState, changes, data);
-          if (result.dirty) {
-            // console.log('dirty, updating from batch', initState.nodes[action.nodeIndex], 'with', result.value);
-            action.invocation(initState, result.value, changes, data);
+          const { dirty, value } = executeSearch(action.search, initState, changes, data);
+          if (dirty) {
+            // console.log('dirty, updating from batch', initState.nodes[action.nodeIndex], 'with', value);
+            action.invocation(initState, value, changes, data);
           }
         }
       }
       if (!ranSearch) return;
-      initState.ranFlags.fill(false);
-      initState.dirtyFlags.fill(false);
+      searchStates.fill(0);
     };
 
-    if (isShadowRoot) {
-      options.context ??= target.host;
-      if ('adoptedStyleSheets' in target) {
+    if (shadowRoot) {
+      options.context ??= shadowRoot.host;
+      if ('adoptedStyleSheets' in shadowRoot) {
         if (this.adoptedStyleSheets.length) {
-          target.adoptedStyleSheets = [
-            ...target.adoptedStyleSheets,
+          shadowRoot.adoptedStyleSheets = [
+            ...shadowRoot.adoptedStyleSheets,
             ...this.adoptedStyleSheets,
           ];
         }
@@ -611,34 +783,42 @@ export default class Composition {
       draw(changes, data);
     }
 
-    if (isShadowRoot) {
-      target.append(instanceFragment);
+    if (shadowRoot) {
+      shadowRoot.append(instanceFragment);
+      customElements.upgrade(shadowRoot);
     }
 
     draw.target = target;
+
+    /**
+     * @param {keyof T & string} prop
+     * @param {any} value
+     * @param {Partial<T>} [data]
+     */
     draw.byProp = (prop, value, data) => {
-      if (!this.actionsByPropsUsed.has(prop)) return;
+      if (!this.actionsByPropsUsed?.has(prop)) return;
       let ranSearch = false;
 
       // Update search
-      if (this.searchByQuery.has(prop)) {
+      if (this.searchByQuery?.has(prop)) {
         ranSearch = true;
         const search = this.searchByQuery.get(prop);
-        const cachedValue = initState.caches[search.cacheIndex];
+        const cachedValue = caches[search.cacheIndex];
         if (cachedValue === value) {
           return;
         }
-        initState.ranFlags[search.ranFlagIndex] = true;
-        initState.caches[search.cacheIndex] = value;
-        initState.dirtyFlags[search.dirtyIndex] = true;
+        caches[search.cacheIndex] = value;
+        searchStates[search.searchIndex] = 0b0011;
       }
 
+      /** @type {Partial<T>} */
       let changes;
       const actions = this.actionsByPropsUsed.get(prop);
       for (const action of actions) {
         if (action.search.query === prop) {
           action.invocation(initState, value);
         } else {
+          // @ts-expect-error Skip cast
           changes ??= { [prop]: value };
           data ??= changes;
           ranSearch = true;
@@ -651,8 +831,7 @@ export default class Composition {
       }
 
       if (!ranSearch) return;
-      initState.ranFlags.fill(false);
-      initState.dirtyFlags.fill(false);
+      searchStates.fill(0);
     };
     draw.state = initState;
     return draw;
@@ -660,7 +839,7 @@ export default class Composition {
 
   /**
    * @param {Attr|Text} node
-   * @param {Element} element
+   * @param {Element|null} [element]
    * @param {InterpolateOptions} [options]
    * @param {string} [parsedValue]
    * @return {true|undefined} remove node
@@ -683,7 +862,7 @@ export default class Composition {
       if (!nodeValue) return;
       const trimmed = nodeValue.trim();
       if (!trimmed) return;
-      if (attr) {
+      if (attr || element?.tagName === 'STYLE') {
         if (trimmed[0] !== '{') return;
         const { length } = trimmed;
         if (trimmed[length - 1] !== '}') return;
@@ -798,7 +977,7 @@ export default class Composition {
     /** @type {RenderGraphSearch} */
     let search;
 
-    if (this.searchByQuery.has(query)) {
+    if (this.searchByQuery?.has(query)) {
       search = this.searchByQuery.get(query);
     } else {
       // Has subquery?
@@ -806,7 +985,7 @@ export default class Composition {
       const isSubquery = subquery !== query;
       /** @type {RenderGraphSearch} */
       let subSearch;
-      if (isSubquery && this.searchByQuery.has(subquery)) {
+      if (isSubquery && this.searchByQuery?.has(subquery)) {
         subSearch = this.searchByQuery.get(subquery);
       } else {
         // Construct subsearch, even is not subquery.
@@ -846,7 +1025,7 @@ export default class Composition {
           }
           if (defaultValue == null && options?.injections) {
             defaultValue = valueFromPropName(parsedValue, options.injections);
-            console.log('default value from injection', parsedValue, { defaultValue });
+            // console.log('default value from injection', parsedValue, { defaultValue });
           }
         }
 
@@ -893,9 +1072,8 @@ export default class Composition {
           inlineFunctionOptions.deepProps = deepPropsUsed;
         }
         subSearch = {
-          cacheIndex: this.#interpolationState.cacheIndex++,
-          dirtyIndex: this.#interpolationState.dirtyIndex++,
-          ranFlagIndex: this.#interpolationState.ranFlagIndex++,
+          cacheIndex: this._interpolationState.cacheIndex++,
+          searchIndex: this._interpolationState.searchIndex++,
           query: subquery,
           defaultValue,
           subSearch: null,
@@ -910,9 +1088,8 @@ export default class Composition {
       }
       if (isSubquery) {
         search = {
-          cacheIndex: this.#interpolationState.cacheIndex++,
-          dirtyIndex: this.#interpolationState.dirtyIndex++,
-          ranFlagIndex: this.#interpolationState.ranFlagIndex++,
+          cacheIndex: this._interpolationState.cacheIndex++,
+          searchIndex: this._interpolationState.searchIndex++,
           query,
           subSearch,
           negate,
@@ -942,7 +1119,6 @@ export default class Composition {
     let subnode = null;
     let defaultValue = search.defaultValue;
     if (text) {
-      text.data = defaultValue;
       subnode = textNodeIndex;
     } else if (nodeName === 'mdw-if') {
       tag = this.#tagElement(element);
@@ -960,15 +1136,15 @@ export default class Composition {
     tag ??= this.#tagElement(element);
 
     // Node entry
-    let nodeEntry = this.#interpolationState.nodeEntry;
+    let nodeEntry = this._interpolationState.nodeEntry;
     if (!nodeEntry || nodeEntry.tag !== tag) {
       nodeEntry = {
         tag,
         textNodes: [],
       };
-      this.#interpolationState.nodeEntry = nodeEntry;
+      this._interpolationState.nodeEntry = nodeEntry;
       this.nodesToBind.push(nodeEntry);
-      this.#interpolationState.nodeIndex++;
+      this._interpolationState.nodeIndex++;
     }
 
     /** @type {RenderGraphAction} */
@@ -978,25 +1154,38 @@ export default class Composition {
     if (text) {
       nodeEntry.textNodes.push(textNodeIndex);
 
-      this.#interpolationState.nodeIndex++;
+      this._interpolationState.nodeIndex++;
       action = {
-        nodeIndex: this.#interpolationState.nodeIndex,
-        invocation: writeDOMText,
+        nodeIndex: this._interpolationState.nodeIndex,
+        commentIndex: this._interpolationState.commentIndex++,
+        invocation: writeDynamicNode,
         defaultValue,
         search,
       };
+      switch (typeof defaultValue) {
+        case 'string':
+          text.data = defaultValue;
+          break;
+        case 'number':
+          // Manually coerce to string (0 will be empty otherwise)
+          text.data = `${defaultValue}`;
+          break;
+        default:
+          text.data = '';
+          break;
+      }
     } else if (subnode) {
       action = {
-        nodeIndex: this.#interpolationState.nodeIndex,
-        attrName: subnode,
+        nodeIndex: this._interpolationState.nodeIndex,
+        attrName: /** @type {string} */ (subnode),
         defaultValue,
         invocation: writeDOMAttribute,
         search,
       };
     } else {
       action = {
-        nodeIndex: this.#interpolationState.nodeIndex,
-        commentIndex: this.#interpolationState.commentIndex++,
+        nodeIndex: this._interpolationState.nodeIndex,
+        commentIndex: this._interpolationState.commentIndex++,
         defaultValue,
         invocation: writeDOMElementAttachedState,
         search,
@@ -1004,13 +1193,15 @@ export default class Composition {
       if (!defaultValue) {
         this.postInitActions.push({
           ...action,
-          invocation: writeDOMHideElementOnInit,
+          invocation: writeDOMHideNodeOnInit,
         });
       }
     }
 
     this.addAction(action);
-    this.tagsWithBindings.add(tag);
+    // eslint-disable-next-line no-multi-assign
+    const tagsWithBindings = (this.tagsWithBindings ??= new Set());
+    tagsWithBindings.add(tag);
   }
 
   /**
@@ -1018,6 +1209,7 @@ export default class Composition {
    * @return {string}
    */
   #tagElement(element) {
+    if (!element) return '';
     let id = element.id;
     if (id) {
       if (!this.allIds.includes(id)) {
@@ -1025,7 +1217,9 @@ export default class Composition {
       }
     } else {
       id = generateUID();
-      this.temporaryIds.add(id);
+      // eslint-disable-next-line no-multi-assign
+      const temporaryIds = (this.temporaryIds ??= new Set());
+      temporaryIds.add(id);
       this.allIds.push(id);
       element.id = id;
     }
@@ -1034,11 +1228,10 @@ export default class Composition {
 
   /**
    * TODO: Subtemplating lacks optimization, though functional.
-   *   - Would benefit from custom type handler for arrays
+   * - Would benefit from custom type handler for arrays
    * to avoid multi-iteration change-detection.
-   *   - Could benefit from debounced/throttled render
-   *   - Consider remap of {item.prop} as {array[index].prop}
-   *
+   * - Could benefit from debounced/throttled render
+   * - Consider remap of {item.prop} as {array[index].prop}
    * @param {Element} element
    * @param {InterpolateOptions} options
    * @return {?Composition<?>}
@@ -1066,26 +1259,26 @@ export default class Composition {
     element.removeAttribute('mdw-for');
     // Create a new composition targetting element as root
 
-    const elementAnchor = document.createElement('template');
+    const elementAnchor = element.ownerDocument.createElement('template');
     element.replaceWith(elementAnchor);
     const tag = this.#tagElement(elementAnchor);
     // console.log('tagging placeholder element with', elementAnchor, tag);
 
-    let nodeEntry = this.#interpolationState.nodeEntry;
+    let nodeEntry = this._interpolationState.nodeEntry;
     if (!nodeEntry || nodeEntry.tag !== tag) {
       nodeEntry = {
         tag,
         textNodes: [],
       };
-      this.#interpolationState.nodeEntry = nodeEntry;
+      this._interpolationState.nodeEntry = nodeEntry;
       this.nodesToBind.push(nodeEntry);
-      this.#interpolationState.nodeIndex++;
-      console.log('adding node entry', tag, this.#interpolationState.nodeIndex);
+      this._interpolationState.nodeIndex++;
     }
 
     const newComposition = new Composition();
     newComposition.template.append(element);
     // Move uninterpolated element to new composition template.
+    /** @type {InterpolateOptions['injections']} */
     const injections = {
       ...options.injections,
       [valueName]: null,
@@ -1095,24 +1288,23 @@ export default class Composition {
     const propsUsed = [iterableName];
     /** @type {RenderGraphSearch} */
     const search = {
-      cacheIndex: this.#interpolationState.cacheIndex++,
-      dirtyIndex: this.#interpolationState.dirtyIndex++,
-      ranFlagIndex: this.#interpolationState.ranFlagIndex++,
+      cacheIndex: this._interpolationState.cacheIndex++,
+      searchIndex: this._interpolationState.searchIndex++,
+      query: null,
+      prop: null,
+      deepProp: null,
       propsUsed,
       deepPropsUsed: [[iterableName]],
       defaultValue: {},
-      invocation(state, changes, data) {
-        // Return unique to always specify dirty
-        return {};
-      },
+      invocation: null,
     };
 
     /** @type {RenderGraphAction} */
     const action = {
       defaultValue: null,
-      nodeIndex: this.#interpolationState.nodeIndex,
+      nodeIndex: this._interpolationState.nodeIndex,
       search,
-      commentIndex: this.#interpolationState.commentIndex++,
+      commentIndex: this._interpolationState.commentIndex++,
       injections,
       invocation(state, value, changes, data) {
         if (!newComposition.adapter) {
@@ -1120,7 +1312,7 @@ export default class Composition {
           const instanceAnchorElement = state.nodes[this.nodeIndex];
           const anchorNode = createEmptyComment();
           // Avoid leak
-          state.nodes[this.commentIndex] = anchorNode;
+          state.comments[this.commentIndex] = anchorNode;
           instanceAnchorElement.replaceWith(anchorNode);
           newComposition.adapter = new CompositionAdapter({
             anchorNode,
@@ -1145,8 +1337,9 @@ export default class Composition {
         const needTargetAll = newComposition.props.some((prop) => prop !== iterableName && prop in changes);
 
         adapter.startBatch();
-        if (!needTargetAll && !Array.isArray(changeList)) {
-          const iterator = Array.isArray(changeList) ? changeList.entries() : Object.entries(changeList);
+        let isArray;
+        if (!needTargetAll && !(isArray = Array.isArray(changeList))) {
+          const iterator = isArray ? changeList.entries() : Object.entries(changeList);
           // console.log('changeList render', iterator);
           for (const [key, change] of iterator) {
             if (key === 'length') continue;
@@ -1204,7 +1397,9 @@ export default class Composition {
     propsUsed.push(...newComposition.props);
     this.addSearch(search);
     this.addAction(action);
-    this.tagsWithBindings.add(tag);
+    // eslint-disable-next-line no-multi-assign
+    const tagsWithBindings = (this.tagsWithBindings ??= new Set());
+    tagsWithBindings.add(tag);
     // console.log('adding', iterable, 'bind to', this);
     // this.addBinding(iterable, entry);
     return newComposition;
@@ -1232,31 +1427,23 @@ export default class Composition {
       switch (node.nodeType) {
         case Node.ELEMENT_NODE:
           element = /** @type {Element} */ (node);
-          if (element instanceof HTMLTemplateElement) {
-            node = treeWalker.nextSibling();
+          if (element.tagName === 'TEMPLATE') {
+            while (element.contains(node = treeWalker.nextNode()));
             continue;
           }
-          if (node instanceof HTMLStyleElement) {
-            // Move style elements out of cloneable
-            if (node.parentNode === this.cloneable) {
-              this.styles.push(node);
-              node.remove();
-              node = treeWalker.nextSibling();
-              continue;
-            }
-            console.warn('<style> element not moved');
-          }
-          if (node instanceof HTMLScriptElement) {
+
+          if (element.tagName === 'SCRIPT') {
             console.warn('<script> element found.');
-            node.remove();
-            node = treeWalker.nextSibling();
+            while (element.contains(node = treeWalker.nextNode()));
             continue;
           }
 
           if (element.hasAttribute('mdw-for')) {
-            node = treeWalker.nextSibling();
+            while (element.contains(node = treeWalker.nextNode()));
             this.#interpolateIterable(element, options);
+            continue;
           } else {
+            // @ts-expect-error Bad typings
             const idAttr = element.attributes.id;
             if (idAttr) {
               this.#interpolateNode(idAttr, element, options);
@@ -1270,14 +1457,13 @@ export default class Composition {
 
           break;
         case Node.TEXT_NODE:
-          element = node.parentNode;
+          element = node.parentElement;
           if (this.#interpolateNode(/** @type {Text} */ (node), element, options)) {
             const nextNode = treeWalker.nextNode();
-            node.remove();
+            /** @type {Text} */ (node).remove();
             node = nextNode;
             continue;
           }
-
           break;
         default:
           throw new Error(`Unexpected node type: ${node.nodeType}`);
@@ -1296,10 +1482,12 @@ export default class Composition {
       );
     }
 
-    this.props = [...this.actionsByPropsUsed.keys()];
+    this.props = this.actionsByPropsUsed
+      ? [...this.actionsByPropsUsed.keys()]
+      : [];
 
     for (const id of this.allIds) {
-      if (!this.tagsWithBindings.has(id)) {
+      if (!this.tagsWithBindings?.has(id)) {
         this.nodesToBind.push({
           tag: id,
           textNodes: [],
@@ -1308,7 +1496,6 @@ export default class Composition {
     }
 
     this.tags = this.nodesToBind.map((n) => n.tag);
-
     this.interpolated = true;
 
     // console.log('Cloneable', [...this.cloneable.children].map((child) => child.outerHTML).join('\n'));
@@ -1321,7 +1508,9 @@ export default class Composition {
   addSearch(search) {
     this.searches.push(search);
     if (search.query) {
-      this.searchByQuery.set(search.query, search);
+      // eslint-disable-next-line no-multi-assign
+      const searchByQuery = (this.searchByQuery ??= new Map());
+      searchByQuery.set(search.query, search);
       this.initCache[search.cacheIndex] = search.defaultValue;
     }
     return search;
@@ -1332,12 +1521,13 @@ export default class Composition {
    * @return {RenderGraphAction}
    */
   addAction(action) {
-    this.actions.push(action);
+    // eslint-disable-next-line no-multi-assign
+    const actionsByPropsUsed = (this.actionsByPropsUsed ??= new Map());
     for (const prop of action.search.propsUsed) {
-      if (this.actionsByPropsUsed.has(prop)) {
-        this.actionsByPropsUsed.get(prop).push(action);
+      if (actionsByPropsUsed.has(prop)) {
+        actionsByPropsUsed.get(prop).push(action);
       } else {
-        this.actionsByPropsUsed.set(prop, [action]);
+        actionsByPropsUsed.set(prop, [action]);
       }
     }
     return action;