@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/core/Composition.js

@@ -1,12 +1,15 @@
 /* eslint-disable sort-class-members/sort-class-members */
+
+import CompositionAdapter from './CompositionAdapter.js';
 import { generateCSSStyleSheets, generateHTMLStyleElements } from './css.js';
-import { identifierFromElement } from './identify.js';
 import { observeFunction } from './observe.js';
+import { createEmptyComment, createEmptyTextNode } from './optimizations.js';
 import { generateFragment, inlineFunctions } from './template.js';
+import { generateUID } from './uid.js';
 
 /**
  * @template T
- * @typedef {Composition<?>|HTMLStyleElement|CSSStyleSheet|DocumentFragment|((this:T, changes:T) => any)|string} CompositionPart
+ * @typedef {Composition<?>|HTMLStyleElement|CSSStyleSheet|DocumentFragment|string} CompositionPart
  */
 
 /**
@@ -18,24 +21,363 @@ import { generateFragment, inlineFunctions } from './template.js';
 
 /**
  * @template T
- * @typedef {Object} WatcherBindEntry
- * @prop {Function} fn
- * @prop {Set<keyof T & string>} props
+ * @typedef {Object} RenderOptions
+ * @prop {T} [defaults] what
+ * @prop {T} [store] what
+ * @prop {DocumentFragment|HTMLElement|Element} [target] where
+ * @prop {ShadowRoot} [shadowRoot] where
+ * @prop {any} [context] `this` on callbacks/events
+ * @prop {any} [injections]
+ */
+
+/** @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>
+ * )} CompositionEventMap
+ */
+
+/**
+ * @template {any} T
+ * @template {keyof CompositionEventMap} [K = keyof CompositionEventMap]
+ * @typedef {{
+ * type?: K
+ * tag?: string,
+ * 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
- * @prop {string} id
- * @prop {number} nodeType
- * @prop {string} node
+ * @prop {string} [key]
+ * @prop {number} [index]
+ * @prop {string} tag
+ * @prop {string|number} subnode Index of childNode or attrName
+ * @prop {string[]} props
+ * @prop {string[][]} deepProps
  * @prop {boolean} [negate]
  * @prop {boolean} [doubleNegate]
- * @prop {Function} [fn]
- * @prop {Set<keyof T & string>} props
+ * @prop {Function} [expression]
+ * @prop {(options: RenderOptions<?>, element: Element, changes:any, data:any) => any} [render] custom render function
+ * @prop {CompositionEventListener<T>[]} [listeners]
+ * @prop {Composition<any>} [composition] // Sub composition templating (eg: array)
  * @prop {T} defaultValue
  */
 
+/** @typedef {any[]} RenderState */
+
+/**
+ * @typedef RenderGraphSearch
+ *  @prop {(state:InitializationState, changes:any, data:any) => any}  invocation
+ *  @prop {number}  cacheIndex
+ *  @prop {number}  searchIndex
+ *  @prop {string | Function | string[]}  query
+ *  @prop {Function}  [expression]
+ *  @prop {string}  prop
+ *  @prop {string[]}  deepProp
+ *  @prop {string[]}  propsUsed
+ *  @prop {string[][]}  deepPropsUsed
+ *  @prop {any} defaultValue
+ *  @prop {RenderGraphSearch}  [subSearch]
+ */
+
+/**
+ * @typedef RenderGraphAction
+ * @prop {(state:InitializationState, value:any, changes: any, data:any) => any} invocation
+ * @prop {number} [commentIndex]
+ * @prop {number} [nodeIndex]
+ * @prop {number} [cacheIndex]
+ * @prop {string} [attrName]
+ * @prop {any} [defaultValue]
+ * @prop {RenderGraphSearch} search
+ */
+
+/**
+ * @type {RenderGraphAction['invocation']}
+ * @this {RenderGraphAction}
+ */
+function writeDOMAttribute({ nodes }, value) {
+  const { nodeIndex, attrName } = this;
+  /** @type {Element} */
+  const element = nodes[nodeIndex];
+  switch (value) {
+    case undefined:
+    case null:
+    case false:
+      element.removeAttribute(attrName);
+      return false;
+    case true:
+      element.setAttribute(attrName, '');
+      return '';
+    default:
+      element.setAttribute(attrName, value);
+      return value;
+  }
+}
+
+/**
+ * @type {RenderGraphAction['invocation']}
+ * @this {RenderGraphAction}
+ */
+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 {
+    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({ nodeStates, nodes, comments }, value) {
+  const { commentIndex, nodeIndex } = this;
+  // 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();
+    comments[commentIndex] = comment;
+  }
+  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;
+  }
+}
+
+/**
+ * @type {RenderGraphAction['invocation']}
+ * @this {RenderGraphAction}
+ */
+function writeDOMHideNodeOnInit({ comments, nodeStates, nodes }) {
+  const { commentIndex, nodeIndex } = this;
+
+  const comment = createEmptyComment();
+  comments[commentIndex] = comment;
+  // eslint-disable-next-line no-bitwise
+  nodeStates[nodeIndex] |= 1;
+
+  nodes[nodeIndex].replaceWith(comment);
+}
+
+/**
+ * @param {RenderGraphSearch} search
+ * @param {Parameters<RenderGraphSearch['invocation']>} args
+ */
+function executeSearch(search, ...args) {
+  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,
+      // eslint-disable-next-line no-bitwise
+      dirty: ((searchState & 0b0010) === 0b0010),
+    };
+  }
+
+  // eslint-disable-next-line no-bitwise
+  searchStates[searchIndex] |= 0b0001;
+  let result;
+  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 };
+    }
+  }
+
+  // Overwrite cache and flag as dirty
+  caches[cacheIndex] = result;
+  // eslint-disable-next-line no-bitwise
+  searchStates[searchIndex] |= 0b0010;
+  return { value: result, dirty: true };
+}
+
+/**
+ * @type {RenderGraphSearch['invocation']}
+ * @this {RenderGraphSearch}
+ */
+function searchWithExpression({ options: { context, store, injections } }, changes, data) {
+  return this.expression.call(
+    context,
+    store ?? data,
+    injections,
+  );
+}
+
+/**
+ * @type {RenderGraphSearch['invocation']}
+ * @this {RenderGraphSearch}
+ */
+function searchWithProp(state, changes) {
+  return changes[this.prop];
+}
+
+/**
+ * @type {RenderGraphSearch['invocation']}
+ * @this {RenderGraphSearch}
+ */
+function searchWithDeepProp(state, changes, data) {
+  let scope = changes;
+  for (const prop of this.deepProp) {
+    if (scope === null) return null;
+    if (prop in scope === false) return undefined;
+    scope = scope[prop];
+  }
+  return scope;
+}
+
+/**
+ * @typedef InterpolateOptions
+ * @prop {Record<string,any>} [defaults] Default values to use for interpolation
+ * @prop {{iterable:string} & Record<string,any>} [injections] Context-specific injected properties. (Experimental)
+ */
+
+/**
+ * @typedef InitializationState
+ * @prop {Element} lastElement
+ * @prop {ChildNode} lastChildNode
+ * @prop {(Element|Text)[]} nodes
+ * @prop {any[]} caches
+ * @prop {Comment[]} comments
+ * @prop {Uint8Array} nodeStates
+ * @prop {Uint8Array} searchStates
+ * @prop {Element[]} refs
+ * @prop {number} lastChildNodeIndex
+ * @prop {RenderOptions<?>} options
+ */
+
 /** Splits: `{template}text{template}` as `['', 'template', 'text', 'template', '']` */
 const STRING_INTERPOLATION_REGEX = /{([^}]*)}/g;
 
@@ -54,33 +396,23 @@ function buildShadowRootChildListener(fn) {
 }
 
 /**
- *
- * @param {Object} object
- * @param {'dot'|'bracket'} [syntax]
- * @param {Object} [target]
- * @param {string} [scope]
- * @return {Object}
+ * @example
+ *  propFromObject('foo', {foo:'bar'}) == ['foo', 'bar'];
+ * @param {string} prop
+ * @param {any} source
+ * @return {any}
  */
-function flattenObject(object, syntax = 'dot', target = {}, scope = '') {
-  for (const [key, value] of Object.entries(object)) {
-    if (!key) continue; // Blank keys are not supported;
-    const scopedKey = scope ? `${scope}.${key}` : key;
-    target[scopedKey] = value;
-    if (value != null && typeof value === 'object') {
-      flattenObject(value, syntax, target, scopedKey);
-    }
-  }
-  if (Array.isArray(object)) {
-    const scopedKey = scope ? `${scope}.length` : 'length';
-    target[scopedKey] = object.length;
+function propFromObject(prop, source) {
+  if (source) {
+    return source[prop];
   }
-  return target;
+  return undefined;
 }
 
 /**
  * @example
- *  entryFromPropName(
- *    'address.home.houseNumber',
+ *  deepPropFromObject(
+ *    ['address', 'home, 'houseNumber'],
  *    {
  *      address: {
  *        home: {
@@ -88,22 +420,25 @@ function flattenObject(object, syntax = 'dot', target = {}, scope = '') {
  *        },
  *      }
  *    }
- * ) === {value:35}
- * @param {string} prop
+ * ) == [houseNumber, 35]
+ * @param {string[]} nameArray
  * @param {any} source
- * @return {null|[string, any]}
+ * @return {any}
  */
-function entryFromPropName(prop, source) {
-  let value = source;
-  let child;
-  for (child of prop.split('.')) {
-    if (!child) throw new Error(`Invalid property: ${prop}`);
-    if (child in value === false) return null;
-    // @ts-ignore Skip cast
-    value = value[child];
+function deepPropFromObject(nameArray, source) {
+  if (!source) return undefined;
+  let scope = source;
+  let prop;
+  for (prop of nameArray) {
+    if (typeof scope === 'object') {
+      if (scope === null) return null;
+      if (!(prop in scope)) return undefined;
+      scope = scope[prop];
+    } else {
+      return scope[prop];
+    }
   }
-  if (value === source) return null;
-  return [child, value];
+  return scope;
 }
 
 /**
@@ -123,30 +458,76 @@ function valueFromPropName(prop, source) {
   return value;
 }
 
+const compositionCache = new Map();
+
 /** @template T */
 export default class Composition {
+  static EVENT_PREFIX_REGEX = /^([*1~]+)?(.*)$/;
+
+  _interpolationState = {
+    nodeIndex: -1,
+    searchIndex: 0,
+    cacheIndex: 0,
+    commentIndex: 0,
+    /** @type {this['nodesToBind'][0]} */
+    nodeEntry: null,
+  };
+
+  // eslint-disable-next-line symbol-description
+  static shadowRootTag = Symbol();
+
+  /** @type {{tag:string, textNodes: number[]}[]} */
+  nodesToBind = [];
+
+  /** @type {string[]} */
+  props = [];
+
+  /** @type {RenderGraphSearch[]} */
+  searches = [];
+
+  /** @type {any[]} */
+  initCache = [];
+
   /**
-   * Collection of property bindings.
-   * @type {Map<keyof T & string, Set<NodeBindEntry<?>>>}
+   * Index of searches by query (dotted notation for deep props)
+   * @type {Map<Function|string, RenderGraphSearch>}
    */
-  bindings = new Map();
+  searchByQuery;
+
+  /**
+   * Index of searches by query (dotted notation for deep props)
+   * @type {Map<string, RenderGraphAction[]>}
+   */
+  actionsByPropsUsed;
+
+  /** @type {RenderGraphAction[]} */
+  postInitActions = [];
+
+  /** @type {Set<string>} */
+  tagsWithBindings;
+
+  /**
+   * Array of element tags
+   * @type {string[]}
+   */
+  tags = [];
 
   /**
    * Data of arrays used in templates
-   * Usage of a [_for] will create an ArrayLike expectation based on key
+   * 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 {Map<keyof T & string, ArrayMetadata<T>}
+   * @type {CompositionAdapter}
    */
-  arrayMetadata = new Map();
+  adapter;
 
   /**
    * Collection of events to bind.
    * Indexed by ID
-   * @type {Map<string, Set<import('./typings.js').CompositionEventListener<any>>>}
+   * @type {Map<string|symbol, CompositionEventListener<any>[]>}
    */
-  events = new Map();
+  events;
 
   /**
    * Snapshot of composition at initial state.
@@ -156,14 +537,6 @@ export default class Composition {
    */
   cloneable;
 
-  /**
-   * Result of interpolation of the composition template.
-   * Includes all DOM elements, which is used to reference for adding and
-   * removing DOM elements during render.
-   * @type {DocumentFragment}
-   */
-  interpolation;
-
   /** @type {(HTMLStyleElement|CSSStyleSheet)[]} */
   styles = [];
 
@@ -173,25 +546,19 @@ export default class Composition {
   /** @type {DocumentFragment} */
   stylesFragment;
 
-  /** @type {((this:T, changes:T) => any)[]} */
-  watchers = [];
-
   /**
-   * Maintains a reference list of elements used by render target (root).
-   * When root is garbage collected, references are released.
-   * This includes disconnected elements.
-   * @type {WeakMap<Element|DocumentFragment, Map<string,HTMLElement>>}
+   * List of IDs used by template elements
+   * May be needed to be removed when adding to non-DocumentFragment
+   * @type {string[]}
    */
-  referenceCache = new WeakMap();
+  allIds = [];
 
   /**
-   * Part of interpolation phase.
-   * Maintains a reference list of conditional elements that were removed from
-   * `cloneable` due to default state. Used to reconstruct conditional elements
-   * with conditional children in default state as well (unlike `interpolation`).
-   * @type {Map<string, {element: Element, id: string, parentId: string, commentCache: WeakMap<Element|DocumentFragment,Comment>}>}
+   * Collection of IDs used for referencing elements
+   * Not meant for live DOM. Removed before attaching to document
    */
-  conditionalElementMetadata = new Map();
+  /** @type {Set<string>} */
+  temporaryIds;
 
   /** Flag set when template and styles have been interpolated */
   interpolated = false;
@@ -212,9 +579,24 @@ export default class Composition {
       yield part;
     }
     yield this.template;
-    for (const part of this.watchers) {
-      yield part;
+  }
+
+  /**
+   * @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;
   }
 
   /**
@@ -224,8 +606,6 @@ export default class Composition {
     for (const part of parts) {
       if (typeof part === 'string') {
         this.append(generateFragment(part.trim()));
-      } else if (typeof part === 'function') {
-        this.watchers.push(part);
       } else if (part instanceof Composition) {
         this.append(...part);
       } else if (part instanceof DocumentFragment) {
@@ -238,259 +618,272 @@ export default class Composition {
     return this;
   }
 
-  /** @param {import('./typings.js').CompositionEventListener<T>} listener */
+  /** @param {CompositionEventListener<T>} listener */
   addCompositionEventListener(listener) {
-    const key = listener.id ?? '';
-    let set = this.events.get(key);
-    if (!set) {
-      set = new Set();
-      this.events.set(key, set);
+    const key = listener.tag ?? '';
+    // eslint-disable-next-line no-multi-assign
+    const events = (this.events ??= new Map());
+    if (events.has(key)) {
+      events.get(key).push(listener);
+    } else {
+      events.set(key, [listener]);
     }
-    set.add(listener);
     return this;
   }
 
   /**
+   * @param {string|symbol} tag
+   * @param {EventTarget} target
+   * @param {any} [context]
+   * @return {void}
+   */
+  #bindCompositionEventListeners(tag, target, context) {
+    if (!this.events?.has(tag)) return;
+    for (const event of this.events.get(tag)) {
+      let listener;
+      if (event.handleEvent) {
+        listener = event.handleEvent;
+      } else if (event.deepProp.length) {
+        listener = deepPropFromObject(event.deepProp, this.interpolateOptions.defaults);
+      } else {
+        listener = propFromObject(event.prop, this.interpolateOptions.defaults);
+      }
+      target.addEventListener(event.type, context ? listener.bind(context) : listener, event);
+    }
+  }
+
+  /**
+   * 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
-   * @param {DocumentFragment|ShadowRoot} root where
-   * @param {Partial<?>} changes what
-   * @param {any} [context] who
-   * @param {Partial<?>} [store] If needed, where to grab extra props
-   * @return {void}
+   * @template {Object} T
+   * @param {Partial<T>} changes what specifically
+   * @param {T} [data]
+   * @param {RenderOptions<T>} [options]
+   * @return {Function & {target:Element}} anchor
    */
-  render(root, changes, context, store) {
-    if (!this.initiallyRendered) this.initialRender(root, changes);
-
-    if (!changes) return;
-
-    const fnResults = new WeakMap();
-    /** @type {WeakMap<Element, Set<string>>} */
-    const modifiedNodes = new WeakMap();
-
-    // Iterate data instead of bindings.
-    // TODO: Avoid double iteration and flatten on-the-fly
-    const flattened = flattenObject(changes);
-
-    for (const [key, rawValue] of Object.entries(flattened)) {
-      const entries = this.bindings.get(key);
-      if (!entries) continue;
-      for (const { id, node, nodeType, fn, props, negate, doubleNegate } of entries) {
-        /* 1. Find Element */
-
-        // TODO: Avoid unnecessary element creation.
-        // If element can be fully reconstructed with internal properties,
-        // skip recreation of element unless it actually needs to added to DOM.
-        // Requires tracing of all properties used by conditional elements.
-        const ref = this.getElement(root, id);
-        if (!ref) {
-          console.warn('Non existent id', id);
+  render(changes, data, options = {}) {
+    // console.log('render', changes, options);
+    if (!this.interpolated) {
+      this.interpolate({
+        defaults: data ?? changes,
+        ...options,
+      });
+    }
+
+    const instanceFragment = /** @type {DocumentFragment} */ (this.cloneable.cloneNode(true));
+
+    const shadowRoot = options.shadowRoot;
+    const target = shadowRoot ?? options.target ?? instanceFragment.firstElementChild;
+
+    /** @type {InitializationState} */
+    const initState = {
+      lastChildNode: null,
+      lastChildNodeIndex: 0,
+      lastElement: null,
+      nodeStates: new Uint8Array(this._interpolationState.nodeIndex + 1),
+      searchStates: new Uint8Array(this._interpolationState.searchIndex),
+      comments: [],
+      nodes: [],
+      caches: this.initCache.slice(),
+      refs: [],
+      options,
+    };
+
+    const { nodes, refs, searchStates, caches } = initState;
+    for (const { tag, textNodes } of this.nodesToBind) {
+      /** @type {Text} */
+      let textNode;
+      if (tag === '') {
+        if (!textNodes.length) {
+          console.warn('why was root tagged?');
           continue;
         }
-        if (!ref) continue;
-        if (modifiedNodes.get(ref)?.has(node)) {
-          // console.warn('Node already modified. Skipping', id, node);
-          continue;
+        console.warn('found empty tag??');
+        refs.push(null);
+        nodes.push(null);
+        textNode = 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 = element.firstChild;
+      }
+
+      let currentIndex = 0;
+      for (const index of textNodes) {
+        while (index !== currentIndex) {
+          textNode = textNode.nextSibling;
+          currentIndex++;
         }
+        nodes.push(textNode);
+      }
+    }
+    this.#bindCompositionEventListeners('', options.context);
+    this.#bindCompositionEventListeners(Composition.shadowRootTag, options.context.shadowRoot, options.context);
 
-        // if (!ref.parentElement && node !== '_if') {
-        //   if (ref.parentNode === root) {
-        //     console.debug('Offscreen? root? rendering', ref, node, ref.id, root.host.outerHTML);
-        //   } else {
-        //     console.debug('Offscreen rendering', ref, node, ref.id, root.host.outerHTML);
-        //   }
-        // }
-
-        /* 2. Compute value */
-        let value;
-        if (fn) {
-          if (fnResults.has(fn)) {
-            value = fnResults.get(fn);
-          } else {
-            const args = structuredClone(changes);
-            for (const prop of props) {
-              if (prop in flattened) continue;
-              let lastIndexOfDot = prop.lastIndexOf('.');
-              if (lastIndexOfDot === -1) {
-                // console.debug('injected shallow', prop);
-                args[prop] = store[prop];
-              } else {
-                // Relying on props being sorted...
-                console.debug('need deep', prop);
-                let entry;
-                let propSearchKey = prop;
-                let lastPropSearchKey = prop;
-                while (!entry) {
-                  entry = entryFromPropName(propSearchKey, args);
-                  if (entry) {
-                    const propName = lastPropSearchKey.slice(propSearchKey.length + 1);
-                    entry[1][propName] = valueFromPropName(lastPropSearchKey, store);
-                    break;
-                  }
-                  if (lastIndexOfDot === -1) break;
-                  lastPropSearchKey = prop;
-                  propSearchKey = prop.slice(0, lastIndexOfDot);
-                  lastIndexOfDot = propSearchKey.lastIndexOf(',');
-                }
-                if (!entry) {
-                  console.warn('what do?');
-                }
-              }
-            }
-            value = fn.call(context, args);
-            fnResults.set(fn, value);
+    for (const action of this.postInitActions) {
+      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 (!(prop in changes)) continue;
+        const actions = this.actionsByPropsUsed.get(prop);
+        for (const action of actions) {
+          ranSearch = true;
+          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);
           }
-        } else {
-          value = rawValue;
         }
-
-        /* 3. Operate on value */
-        if (doubleNegate) {
-          value = !!value;
-        } else if (negate) {
-          value = !value;
+      }
+      if (!ranSearch) return;
+      searchStates.fill(0);
+    };
+
+    if (shadowRoot) {
+      options.context ??= shadowRoot.host;
+      if ('adoptedStyleSheets' in shadowRoot) {
+        if (this.adoptedStyleSheets.length) {
+          shadowRoot.adoptedStyleSheets = [
+            ...shadowRoot.adoptedStyleSheets,
+            ...this.adoptedStyleSheets,
+          ];
         }
+      } else if (this.stylesFragment.hasChildNodes()) {
+        instanceFragment.prepend(this.stylesFragment.cloneNode(true));
+      }
+    } else {
+      options.context ??= target;
+    }
 
-        /* 4. Find Target Node */
-        if (nodeType === Node.TEXT_NODE) {
-          const index = (node === '#text')
-            ? 0
-            : Number.parseInt(node.slice('#text'.length), 10);
-          let nodesFound = 0;
-          for (const childNode of ref.childNodes) {
-            if (childNode.nodeType !== Node.TEXT_NODE) continue;
-            if (index !== nodesFound++) continue;
-            childNode.nodeValue = value ?? '';
-            break;
-          }
-          if (index > nodesFound) {
-            console.warn('Node not found, adding?');
-            ref.append(value);
-          }
-        } else if (node === '_if') {
-          const attached = root.contains(ref);
-          const orphaned = ref.parentElement == null && ref.parentNode !== root;
-          const shouldShow = value !== null && value !== false;
-          if (orphaned && ref.parentNode) {
-            console.warn('Orphaned with parent node?', id, { attached, orphaned, shouldShow }, ref.parentNode);
-          }
-          if (attached !== !orphaned) {
-            console.warn('Conditional state', id, { attached, orphaned, shouldShow });
-            console.warn('Not attached and not orphaned. Should do nothing?', ref, ref.parentElement);
-          }
-          if (shouldShow) {
-            if (orphaned) {
-              const metadata = this.conditionalElementMetadata.get(id);
-              if (!metadata) {
-                console.error(id);
-                throw new Error('Could not find conditional element metadata');
-              }
+    if (changes !== this.interpolateOptions.defaults) {
+      // Not default, overwrite nodes
+      draw(changes, data);
+    }
 
-              let comment = metadata.commentCache.get(root);
-              if (!comment) {
-                console.debug('Composition: Comment not cached, building first time');
-                const parent = metadata.parentId
-                  ? this.getElement(root, metadata.parentId)
-                  : root;
-                if (!parent) {
-                  console.error(id);
-                  throw new Error('Could not find reference parent!');
-                }
-
-                const commentText = `{#${id}}`;
-                for (const child of parent.childNodes) {
-                  if (child.nodeType !== Node.COMMENT_NODE) continue;
-                  if ((/** @type {Comment} */child).nodeValue === commentText) {
-                    comment = child;
-                    break;
-                  }
-                }
-                metadata.commentCache.set(this, comment);
-              }
-              if (comment) {
-                console.debug('Composition: Add', id, 'back', ref.outerHTML);
-                comment.replaceWith(ref);
-              } else {
-                console.warn('Could not add', id, 'back to parent');
-              }
-            }
-          } else if (!orphaned) {
-            const metadata = this.conditionalElementMetadata.get(id);
-            if (!metadata) {
-              console.error(id);
-              throw new Error(`Could not find conditional element metadata for ${id}`);
-            }
-            let comment = metadata.commentCache.get(root);
-            if (!comment) {
-              comment = new Comment(`{#${id}}`);
-              metadata.commentCache.set(this, comment);
-            }
-            console.debug('Composition: Remove', id, ref.outerHTML);
-            ref.replaceWith(comment);
-          }
-        } else if (value === false || value == null) {
-          ref.removeAttribute(node);
-        } else {
-          ref.setAttribute(node, value === true ? '' : value);
+    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;
+      let ranSearch = false;
+
+      // Update search
+      if (this.searchByQuery?.has(prop)) {
+        ranSearch = true;
+        const search = this.searchByQuery.get(prop);
+        const cachedValue = caches[search.cacheIndex];
+        if (cachedValue === value) {
+          return;
         }
+        caches[search.cacheIndex] = value;
+        searchStates[search.searchIndex] = 0b0011;
+      }
 
-        /* 5. Mark Node as modified */
-        let set = modifiedNodes.get(ref);
-        if (!set) {
-          set = new Set();
-          modifiedNodes.set(ref, set);
+      let changes;
+      const actions = this.actionsByPropsUsed.get(prop);
+      for (const action of actions) {
+        if (action.search.query === prop) {
+          action.invocation(initState, value);
+        } else {
+          changes ??= { [prop]: value };
+          data ??= changes;
+          ranSearch = true;
+          const result = executeSearch(action.search, initState, changes, data);
+          if (result.dirty) {
+            // console.debug('dirty, updating by prop', prop, initState.nodes[action.nodeIndex], 'with', result.value);
+            action.invocation(initState, result.value, changes, data);
+          }
         }
-        set.add(node);
       }
-    }
+
+      if (!ranSearch) return;
+      searchStates.fill(0);
+    };
+    draw.state = initState;
+    return draw;
   }
 
   /**
    * @param {Attr|Text} node
-   * @param {Element} element
-   * @param {Object} [defaults]
+   * @param {Element|null} [element]
+   * @param {InterpolateOptions} [options]
    * @param {string} [parsedValue]
-   * @return {boolean} Remove node
+   * @return {true|undefined} remove node
    */
-  #interpolateNode(node, element, defaults, parsedValue) {
+  #interpolateNode(node, element, options, parsedValue) {
     const { nodeValue, nodeName, nodeType } = node;
 
+    /** @type {Attr} */
+    let attr;
+    /** @type {Text} */
+    let text;
+    if (nodeType === Node.ATTRIBUTE_NODE) {
+      attr = /** @type {Attr} */ (node);
+    } else {
+      text = /** @type {Text} */ (node);
+    }
+
+    // Get template strings(s) in node if not passed
     if (parsedValue == null) {
-      if (!nodeValue) return false;
+      if (!nodeValue) return;
       const trimmed = nodeValue.trim();
-      if (!trimmed) return false;
-      if (nodeType === Node.ATTRIBUTE_NODE) {
-        if (trimmed[0] !== '{') return false;
+      if (!trimmed) return;
+      if (attr || element?.tagName === 'STYLE') {
+        if (trimmed[0] !== '{') return;
         const { length } = trimmed;
-        if (trimmed[length - 1] !== '}') return false;
+        if (trimmed[length - 1] !== '}') return;
         parsedValue = trimmed.slice(1, -1);
+        // TODO: Support segmented attribute values
       } else {
         // Split text node into segments
         // TODO: Benchmark indexOf pre-check vs regex
 
         const segments = trimmed.split(STRING_INTERPOLATION_REGEX);
-        if (segments.length < 3) return false;
+        if (segments.length < 3) return;
         if (segments.length === 3 && !segments[0] && !segments[2]) {
           parsedValue = segments[1];
         } else {
-          segments.forEach((segment, index) => {
+          for (const [index, segment] of segments.entries()) {
             // is even = is template string
             if (index % 2) {
-              const newNode = new Text();
-              node.before(newNode);
-              this.#interpolateNode(newNode, element, defaults, segment);
-            } else {
-              if (!segment) return; // blank
-              node.before(segment);
+              const newNode = createEmptyTextNode();
+              text.before(newNode);
+              this.#interpolateNode(newNode, element, options, segment);
+            } else if (segment) {
+              text.before(segment);
             }
-          });
-          // node.remove();
+          }
+          // eslint-disable-next-line consistent-return
           return true;
         }
       }
     }
 
+    // Check mutations
+
+    const query = parsedValue;
     const negate = parsedValue[0] === '!';
     let doubleNegate = false;
     if (negate) {
@@ -504,245 +897,552 @@ export default class Composition {
     let isEvent;
     let textNodeIndex;
 
-    if (nodeType === Node.TEXT_NODE) {
+    if (text) {
       // eslint-disable-next-line unicorn/consistent-destructuring
-      if (element !== node.parentElement) {
+      if (element !== text.parentElement) {
         console.warn('mismatch?');
-        element = node.parentElement;
+        element = text.parentElement;
       }
       textNodeIndex = 0;
-      let prev = node;
+      /** @type {ChildNode} */
+      let prev = text;
       while ((prev = prev.previousSibling)) {
-        if (prev.nodeType === Node.TEXT_NODE) {
-          textNodeIndex++;
-        }
+        textNodeIndex++;
       }
     } else {
       // @ts-ignore Skip cast
       // eslint-disable-next-line unicorn/consistent-destructuring
-      if (element !== node.ownerElement) {
+      if (element !== attr.ownerElement) {
         console.warn('mismatch?');
-        element = node.ownerElement;
+        element = attr.ownerElement;
       }
       if (nodeName.startsWith('on')) {
         // Do not interpolate inline event listeners
-        if (nodeName[2] !== '-') return false;
-        isEvent = true;
+        const hyphenIndex = nodeName.indexOf('-');
+        if (hyphenIndex === -1) return;
+        isEvent = hyphenIndex === 2;
       }
     }
 
-    const id = identifierFromElement(element, true);
-
     if (isEvent) {
+      element.removeAttribute(nodeName);
+      const tag = this.#tagElement(element);
       const eventType = nodeName.slice(3);
       const [, flags, type] = eventType.match(/^([*1~]+)?(.*)$/);
-      const options = {
+
+      let handleEvent;
+      /** @type {string} */
+      let prop;
+      /** @type {string[]} */
+      let deepProp = [];
+      if (parsedValue.startsWith('#')) {
+        handleEvent = inlineFunctions.get(parsedValue).fn;
+      } else {
+        const parsedProps = parsedValue.split('.');
+        if (parsedProps.length === 1) {
+          prop = parsedValue;
+          deepProp = [];
+        } else {
+          prop = parsedProps[0];
+          deepProp = parsedProps;
+        }
+      }
+
+      this.addCompositionEventListener({
+        tag,
+        type,
+        handleEvent,
+        prop,
+        deepProp,
         once: flags?.includes('1'),
         passive: flags?.includes('~'),
         capture: flags?.includes('*'),
-      };
+      });
 
-      element.removeAttribute(nodeName);
+      return;
+    }
 
-      let set = this.events.get(id);
-      if (!set) {
-        set = new Set();
-        this.events.set(id, set);
-      }
-      if (parsedValue.startsWith('#')) {
-        set.add({ type, handleEvent: inlineFunctions.get(parsedValue).fn, ...options });
+    /** @type {RenderGraphSearch} */
+    let search;
+
+    if (this.searchByQuery?.has(query)) {
+      search = this.searchByQuery.get(query);
+    } else {
+      // Has subquery?
+      const subquery = parsedValue;
+      const isSubquery = subquery !== query;
+      /** @type {RenderGraphSearch} */
+      let subSearch;
+      if (isSubquery && this.searchByQuery?.has(subquery)) {
+        subSearch = this.searchByQuery.get(subquery);
       } else {
-        set.add({ type, prop: parsedValue, ...options });
-      }
-      return false;
-    }
+        // Construct subsearch, even is not subquery.
+        /** @type {Function} */
+        let expression;
+        /** @type {string[]} */
+        let propsUsed;
+        /** @type {string[][]} */
+        let deepPropsUsed;
+        let defaultValue;
+        let prop;
+        let deepProp;
+        let invocation;
+
+        let inlineFunctionOptions;
+        // Is Inline Function?
+        if (parsedValue.startsWith('#')) {
+          inlineFunctionOptions = inlineFunctions.get(parsedValue);
+          if (!inlineFunctionOptions) {
+            console.warn(`Invalid interpolation value: ${parsedValue}`);
+            return;
+          }
+          expression = inlineFunctionOptions.fn;
+          invocation = searchWithExpression;
+          if (inlineFunctionOptions.props) {
+          // console.log('This function has already been called. Reuse props', inlineFunctionOptions, this);
+            propsUsed = inlineFunctionOptions.props;
+            deepPropsUsed = inlineFunctionOptions.deepProps;
+            defaultValue = inlineFunctionOptions.defaultValue ?? null;
+          } else {
+            defaultValue = inlineFunctionOptions.fn;
+          }
+        } else {
+          defaultValue = null;
+          if (options?.defaults) {
+            defaultValue = deepPropFromObject(parsedValue.split('.'), options.defaults) ?? null;
+          }
+          if (defaultValue == null && options?.injections) {
+            defaultValue = valueFromPropName(parsedValue, options.injections);
+            // console.log('default value from injection', parsedValue, { defaultValue });
+          }
+        }
+
+        if (!propsUsed) {
+          if (typeof defaultValue === 'function') {
+          // Value must be reinterpolated and function observed
+            const observeResult = observeFunction.call(this, defaultValue, options?.defaults, options?.injections);
+            const uniqueProps = new Set([
+              ...observeResult.props.this,
+              ...observeResult.props.args[0],
+              ...observeResult.props.args[1],
+            ]);
+            const uniqueDeepProps = new Set([
+              ...observeResult.deepPropStrings.this,
+              ...observeResult.deepPropStrings.args[0],
+            ]);
+            expression = defaultValue;
+            defaultValue = observeResult.defaultValue;
+            propsUsed = [...uniqueProps];
+            deepPropsUsed = [...uniqueDeepProps].map((deepPropString) => deepPropString.split('.'));
+            invocation = searchWithExpression;
+          // console.log(this.static.name, fn.name || parsedValue, combinedSet);
+          } else {
+          // property binding
+            const parsedProps = parsedValue.split('.');
+            if (parsedProps.length === 1) {
+              prop = parsedValue;
+              propsUsed = [prop];
+              invocation = searchWithProp;
+            } else {
+              propsUsed = [parsedProps[0]];
+              deepProp = parsedProps;
+              deepPropsUsed = [parsedProps];
+              invocation = searchWithDeepProp;
+            }
 
-    /** @type {Function} */
-    let fn;
-    /** @type {Set<string>} */
-    let props;
-
-    /** @type {any} */
-    let defaultValue;
-    let inlineFunctionOptions;
-    // Is Inline Function?
-    if (parsedValue.startsWith('#')) {
-      inlineFunctionOptions = inlineFunctions.get(parsedValue);
-      if (!inlineFunctionOptions) {
-        console.warn(`Invalid interpolation value: ${parsedValue}`);
-        return false;
+            // TODO: Rewrite property as deep with array index?
+          }
+        }
+
+        if (inlineFunctionOptions) {
+          inlineFunctionOptions.defaultValue = defaultValue;
+          inlineFunctionOptions.props = propsUsed;
+          inlineFunctionOptions.deepProps = deepPropsUsed;
+        }
+        subSearch = {
+          cacheIndex: this._interpolationState.cacheIndex++,
+          searchIndex: this._interpolationState.searchIndex++,
+          query: subquery,
+          defaultValue,
+          subSearch: null,
+          prop,
+          propsUsed,
+          deepProp,
+          deepPropsUsed,
+          invocation,
+          expression,
+        };
+        this.addSearch(subSearch);
       }
-      if (inlineFunctionOptions.props) {
-        console.log('This function has already been called. Reuse props', inlineFunctionOptions, this);
-        props = inlineFunctionOptions.props;
-        defaultValue = inlineFunctionOptions.defaultValue ?? null;
+      if (isSubquery) {
+        search = {
+          cacheIndex: this._interpolationState.cacheIndex++,
+          searchIndex: this._interpolationState.searchIndex++,
+          query,
+          subSearch,
+          negate,
+          doubleNegate,
+          prop: subSearch.prop,
+          deepProp: subSearch.deepProp,
+          propsUsed: subSearch.propsUsed,
+          deepPropsUsed: subSearch.deepPropsUsed,
+          defaultValue: doubleNegate ? !!subSearch.defaultValue
+            : (negate ? !subSearch.defaultValue : subSearch.defaultValue),
+          invocation(value) {
+            if (this.doubleNegate) return !!value;
+            if (this.negate) return !value;
+            console.warn('Unknown query mutation', this.query);
+            return value;
+          },
+        };
+        this.addSearch(search);
       } else {
-        defaultValue = inlineFunctionOptions.fn;
+        // Store as search instead
+        search = subSearch;
       }
-    } else {
-      defaultValue = valueFromPropName(parsedValue, defaults);
     }
 
-    if (!props) {
-      if (typeof defaultValue === 'function') {
-        // Value must be reinterpolated and function observed
-        const observeResult = observeFunction.call(this, defaultValue, defaults);
-        fn = defaultValue;
-        defaultValue = observeResult.defaultValue;
-        props = observeResult.props;
-        // console.log(this.static.name, fn.name || parsedValue, combinedSet);
+    // Tag
+    let tag;
+    let subnode = null;
+    let defaultValue = search.defaultValue;
+    if (text) {
+      subnode = textNodeIndex;
+    } else if (nodeName === 'mdw-if') {
+      tag = this.#tagElement(element);
+      element.removeAttribute(nodeName);
+      defaultValue = defaultValue != null && defaultValue !== false;
+    } else {
+      subnode = nodeName;
+      if (nodeName === 'id' || defaultValue == null || defaultValue === false) {
+        element.removeAttribute(nodeName);
       } else {
-        props = new Set([parsedValue]);
+        element.setAttribute(nodeName, defaultValue === true ? '' : defaultValue);
       }
     }
 
-    if (typeof defaultValue === 'symbol') {
-      console.warn(': Invalid binding:', parsedValue);
-      defaultValue = null;
-    }
+    tag ??= this.#tagElement(element);
 
-    if (doubleNegate) {
-      defaultValue = !!defaultValue;
-    } else if (negate) {
-      defaultValue = !defaultValue;
+    // Node entry
+    let nodeEntry = this._interpolationState.nodeEntry;
+    if (!nodeEntry || nodeEntry.tag !== tag) {
+      nodeEntry = {
+        tag,
+        textNodes: [],
+      };
+      this._interpolationState.nodeEntry = nodeEntry;
+      this.nodesToBind.push(nodeEntry);
+      this._interpolationState.nodeIndex++;
     }
 
-    if (inlineFunctionOptions) {
-      inlineFunctionOptions.defaultValue = defaultValue;
-      inlineFunctionOptions.props = props;
-    }
+    /** @type {RenderGraphAction} */
+    let action;
+
+    // Node Action
+    if (text) {
+      nodeEntry.textNodes.push(textNodeIndex);
 
-    // Bind
-    const parsedNodeName = textNodeIndex ? nodeName + textNodeIndex : nodeName;
-    const entry = { id, node: parsedNodeName, fn, props, nodeType, defaultValue, negate, doubleNegate };
-    for (const prop of props) {
-      let set = this.bindings.get(prop);
-      if (!set) {
-        set = new Set();
-        this.bindings.set(prop, set);
+      this._interpolationState.nodeIndex++;
+      action = {
+        nodeIndex: this._interpolationState.nodeIndex,
+        commentIndex: this._interpolationState.commentIndex++,
+        invocation: writeDynamicNode,
+        defaultValue,
+        search,
+      };
+      text.data = typeof defaultValue === 'string' ? defaultValue : '';
+    } else if (subnode) {
+      action = {
+        nodeIndex: this._interpolationState.nodeIndex,
+        attrName: subnode,
+        defaultValue,
+        invocation: writeDOMAttribute,
+        search,
+      };
+    } else {
+      action = {
+        nodeIndex: this._interpolationState.nodeIndex,
+        commentIndex: this._interpolationState.commentIndex++,
+        defaultValue,
+        invocation: writeDOMElementAttachedState,
+        search,
+      };
+      if (!defaultValue) {
+        this.postInitActions.push({
+          ...action,
+          invocation: writeDOMHideNodeOnInit,
+        });
       }
-      set.add(entry);
     }
 
-    // Mutate
+    this.addAction(action);
+    // eslint-disable-next-line no-multi-assign
+    const tagsWithBindings = (this.tagsWithBindings ??= new Set());
+    tagsWithBindings.add(tag);
+  }
 
-    if (nodeType === Node.TEXT_NODE) {
-      node.nodeValue = defaultValue ?? '';
-    } else if (nodeName === '_if') {
-      element.removeAttribute(nodeName);
-      if (defaultValue == null || defaultValue === false) {
-        // If default state is removed, mark for removal
-        return true;
+  /**
+   * @param {Element} element
+   * @return {string}
+   */
+  #tagElement(element) {
+    if (!element) return '';
+    let id = element.id;
+    if (id) {
+      if (!this.allIds.includes(id)) {
+        this.allIds.push(id);
       }
-    } else if (defaultValue == null || defaultValue === false) {
-      element.removeAttribute(nodeName);
     } else {
-      element.setAttribute(nodeName, defaultValue === true ? '' : defaultValue);
+      id = generateUID();
+      // eslint-disable-next-line no-multi-assign
+      const temporaryIds = (this.temporaryIds ??= new Set());
+      temporaryIds.add(id);
+      this.allIds.push(id);
+      element.id = id;
+    }
+    return id;
+  }
+
+  /**
+   * TODO: Subtemplating lacks optimization, though functional.
+   * - 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}
+   * @param {Element} element
+   * @param {InterpolateOptions} options
+   * @return {?Composition<?>}
+   */
+  #interpolateIterable(element, options) {
+    // TODO: Microbenchmark element.attributes
+    const forAttr = element.getAttribute('mdw-for');
+    const trimmed = forAttr?.trim();
+    if (!trimmed) {
+      console.warn('Malformed mdw-for found at', element);
+      return null;
     }
-    return false;
+
+    if (trimmed[0] !== '{') {
+      console.warn('Malformed mdw-for found at', element);
+      return null;
+    }
+    const { length } = trimmed;
+    if (trimmed[length - 1] !== '}') {
+      console.warn('Malformed mdw-for found at', element);
+      return null;
+    }
+    const parsedValue = trimmed.slice(1, -1);
+    const [valueName, iterableName] = parsedValue.split(/\s+of\s+/);
+    element.removeAttribute('mdw-for');
+    // Create a new composition targetting element as root
+
+    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;
+    if (!nodeEntry || nodeEntry.tag !== tag) {
+      nodeEntry = {
+        tag,
+        textNodes: [],
+      };
+      this._interpolationState.nodeEntry = nodeEntry;
+      this.nodesToBind.push(nodeEntry);
+      this._interpolationState.nodeIndex++;
+    }
+
+    const newComposition = new Composition();
+    newComposition.template.append(element);
+    // Move uninterpolated element to new composition template.
+    const injections = {
+      ...options.injections,
+      [valueName]: null,
+      index: null,
+    };
+
+    const propsUsed = [iterableName];
+    /** @type {RenderGraphSearch} */
+    const search = {
+      cacheIndex: this._interpolationState.cacheIndex++,
+      searchIndex: this._interpolationState.searchIndex++,
+      propsUsed,
+      deepPropsUsed: [[iterableName]],
+      defaultValue: {},
+      invocation: null,
+    };
+
+    /** @type {RenderGraphAction} */
+    const action = {
+      defaultValue: null,
+      nodeIndex: this._interpolationState.nodeIndex,
+      search,
+      commentIndex: this._interpolationState.commentIndex++,
+      injections,
+      invocation(state, value, changes, data) {
+        if (!newComposition.adapter) {
+          // console.log({ state.options });
+          const instanceAnchorElement = state.nodes[this.nodeIndex];
+          const anchorNode = createEmptyComment();
+          // Avoid leak
+          state.comments[this.commentIndex] = anchorNode;
+          instanceAnchorElement.replaceWith(anchorNode);
+          newComposition.adapter = new CompositionAdapter({
+            anchorNode,
+            composition: newComposition,
+            renderOptions: {
+              target: null,
+              context: state.options.context,
+              store: state.options.store,
+              injections: this.injections,
+            },
+          });
+        }
+        const { adapter } = newComposition;
+        const iterable = (data ?? state.options.store)[iterableName];
+        // Remove oversized
+        if (!iterable || iterable.length === 0) {
+          adapter.removeEntries();
+          return;
+        }
+        const changeList = changes[iterableName];
+        const innerChanges = { ...changes };
+        const needTargetAll = newComposition.props.some((prop) => prop !== iterableName && prop in changes);
+
+        adapter.startBatch();
+        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;
+            if (change === null) {
+              // console.warn('null?', 'remove?', key);
+              continue;
+            }
+            const index = (+key);
+            const resource = iterable[index];
+            innerChanges[valueName] = change;
+            this.injections[valueName] = resource;
+            this.injections.index = index;
+
+            adapter.renderData(index, innerChanges, data, resource, change);
+          }
+        } else {
+          if (!changeList) {
+            delete innerChanges[valueName];
+          }
+          // console.log('full array render', iterable);
+          for (const [index, resource] of iterable.entries()) {
+            let change;
+            if (changeList) {
+              // console.warn('full array render has changeList?', changeList);
+              if (!needTargetAll && !(index in changeList)) {
+                console.warn('huh?');
+                continue;
+              }
+              change = changeList[index];
+              if (change === null) {
+                // console.warn('remove?');
+                continue;
+              }
+              innerChanges[valueName] = change;
+            }
+            this.injections[valueName] = resource;
+            this.injections.index = index;
+
+            adapter.renderData(index, innerChanges, data, resource, change);
+            // adapter.renderIndex(index, innerChanges, data, resource);
+          }
+        }
+        adapter.stopBatch();
+
+        adapter.removeEntries(iterable.length);
+      },
+
+    };
+
+    newComposition.interpolate({
+      defaults: options.defaults,
+      injections,
+    });
+
+    propsUsed.push(...newComposition.props);
+    this.addSearch(search);
+    this.addAction(action);
+    // 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;
   }
 
   /**
-   * @param {Object} [defaults]
+   * @param {InterpolateOptions} [options]
    */
-  interpolate(defaults) {
+  interpolate(options) {
+    this.interpolateOptions = options;
     // console.log('Template', [...this.template.children].map((child) => child.outerHTML).join('\n'));
 
     // Copy template before working on it
     // Store into `cloneable` to split later into `interpolation`
     this.cloneable = /** @type {DocumentFragment} */ (this.template.cloneNode(true));
 
-    /**
-     * Track elements to be removed before using for cloning
-     * @type {Element[]}
-     */
-    const removalList = [];
-
     const TREE_WALKER_FILTER = 5; /* NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT */
 
     const treeWalker = document.createTreeWalker(this.cloneable, TREE_WALKER_FILTER);
+    /** Note: `node` and treeWalker.currentNode may deviate */
     let node = treeWalker.nextNode();
     while (node) {
       /** @type {Element} */
       let element = null;
-      let removeElement = false;
       switch (node.nodeType) {
         case Node.ELEMENT_NODE:
-          element = node;
-          if (element instanceof HTMLTemplateElement) {
-            node = treeWalker.nextSibling();
+          element = /** @type {Element} */ (node);
+          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;
           }
-          for (const attr of [...element.attributes].reverse()) {
-            if (attr.nodeName === '_if') {
-              // Ensure elements to be removed has identifiable parent
-              const id = identifierFromElement(element, true);
-              const parentId = element.parentElement
-                ? identifierFromElement(element.parentElement, true)
-                : null;
-              this.conditionalElementMetadata.set(id, {
-                element,
-                id,
-                parentId,
-                commentCache: new WeakMap(),
-              });
+
+          if (element.hasAttribute('mdw-for')) {
+            while (element.contains(node = treeWalker.nextNode()));
+            this.#interpolateIterable(element, options);
+            continue;
+          } else {
+            const idAttr = element.attributes.id;
+            if (idAttr) {
+              this.#interpolateNode(idAttr, element, options);
+              this.#tagElement(element);
+            }
+            for (const attr of [...element.attributes].reverse()) {
+              if (attr.nodeName === 'id') continue; // Already handled
+              this.#interpolateNode(attr, element, options);
             }
-            removeElement ||= this.#interpolateNode(attr, element, defaults);
           }
 
           break;
         case Node.TEXT_NODE:
-          element = node.parentNode;
-          if (this.#interpolateNode(/** @type {Text} */ (node), element, defaults)) {
+          element = node.parentElement;
+          if (this.#interpolateNode(/** @type {Text} */ (node), element, options)) {
             const nextNode = treeWalker.nextNode();
             node.remove();
             node = nextNode;
             continue;
           }
-
           break;
         default:
           throw new Error(`Unexpected node type: ${node.nodeType}`);
       }
-      if (removeElement) {
-        removalList.push(element);
-      }
       node = treeWalker.nextNode();
     }
 
-    // Split into `interpolation` before removing elements
-    /** @type {DocumentFragment} */
-    this.interpolation = /** @type {DocumentFragment} */ (this.cloneable.cloneNode(true));
-
-    // console.debug('Interpolated', [...this.interpolation.children].map((child) => child.outerHTML).join('\n'));
-
-    // Remove elements from `cloneable` and place comment placeholders
-    // Remove in reverse so conditionals within conditionals are properly isolated
-    for (const element of [...removalList].reverse()) {
-      const { id } = element;
-      element.replaceWith(new Comment(`{#${id}}`));
-    }
-
-    for (const watcher of this.watchers) {
-      this.bindWatcher(watcher, defaults);
-    }
-
     if ('adoptedStyleSheets' in document) {
       this.adoptedStyleSheets = [
         ...generateCSSStyleSheets(this.styles),
@@ -754,235 +1454,54 @@ export default class Composition {
       );
     }
 
-    this.interpolated = true;
+    this.props = this.actionsByPropsUsed
+      ? [...this.actionsByPropsUsed.keys()]
+      : [];
 
-    // console.log('Cloneable', [...this.cloneable.children].map((child) => child.outerHTML).join('\n'));
-  }
-
-  /**
-   * Updates component nodes based on data
-   * Expects data in JSON Merge Patch format
-   * @see https://www.rfc-editor.org/rfc/rfc7386
-   * @param {DocumentFragment|ShadowRoot} root where
-   * @param {Partial<?>} data what
-   * @return {void}
-   */
-  initialRender(root, data) {
-    if (!this.interpolated) this.interpolate(data);
-
-    if ('adoptedStyleSheets' in root) {
-      root.adoptedStyleSheets = [
-        ...root.adoptedStyleSheets,
-        ...this.adoptedStyleSheets,
-      ];
-    } else if (root instanceof ShadowRoot) {
-      root.append(this.stylesFragment.cloneNode(true));
-    } else {
-      // TODO: Support document styles
-      // console.warn('Cannot apply styles to singular element');
-    }
-
-    root.append(this.cloneable.cloneNode(true));
-
-    // console.log('Initial render', [...root.children].map((child) => child.outerHTML).join('\n'));
-
-    /** @type {EventTarget} */
-    const rootEventTarget = root instanceof ShadowRoot ? root.host : root;
-    // Bind events in reverse order to support stopImmediatePropagation
-    for (const [id, events] of [...this.events].reverse()) {
-      // Prepare all event listeners first
-      for (const entry of [...events].reverse()) {
-        let listener = entry.listener;
-        if (!listener) {
-          if (root instanceof ShadowRoot) {
-            listener = entry.handleEvent ?? valueFromPropName(entry.prop, data);
-            if (id) {
-              // Wrap to retarget this
-              listener = buildShadowRootChildListener(listener);
-            }
-            // Cache and reuse
-            entry.listener = listener;
-            // console.log('caching listener', entry);
-          } else {
-            throw new TypeError('Anonymous event listeners cannot be used in templates');
-            // console.warn('creating new listener', entry);
-            // listener = entry.handleEvent ?? ((event) => {
-            //   valueFromPropName(entry.prop, data)(event);
-            // });
-          }
-        }
-        const eventTarget = id ? root.getElementById(id) : rootEventTarget;
-        if (!eventTarget) {
-          // Element is not available yet. Bind on reference
-          console.debug('Composition: Skip bind events for', id);
-          continue;
-        }
-        eventTarget.addEventListener(entry.type, listener, entry);
+    for (const id of this.allIds) {
+      if (!this.tagsWithBindings?.has(id)) {
+        this.nodesToBind.push({
+          tag: id,
+          textNodes: [],
+        });
       }
     }
 
-    this.initiallyRendered = true;
-  }
+    this.tags = this.nodesToBind.map((n) => n.tag);
+    this.interpolated = true;
 
-  /**
-   * @param {string} id
-   * @param {Element} element
-   */
-  attachEventListeners(id, element) {
-    const events = this.events.get(id);
-    if (events) {
-      console.debug('attaching events for', id);
-    } else {
-      // console.log('no events for', id);
-      return;
-    }
-    for (const entry of [...this.events.get(id)].reverse()) {
-      const { listener } = entry;
-      if (!listener) {
-        throw new Error('Template must be interpolated before attaching events');
-      }
-      element.addEventListener(entry.type, listener, entry);
-    }
+    // console.log('Cloneable', [...this.cloneable.children].map((child) => child.outerHTML).join('\n'));
   }
 
   /**
-   * @param {Element|DocumentFragment} root
-   * @return {Map<string,Element>}
+   * @param {RenderGraphSearch} search
+   * @return {RenderGraphSearch}
    */
-  getReferences(root) {
-    let references = this.referenceCache.get(root);
-    if (!references) {
-      references = new Map();
-      this.referenceCache.set(root, references);
+  addSearch(search) {
+    this.searches.push(search);
+    if (search.query) {
+      // 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 references;
+    return search;
   }
 
   /**
-   * @param {ShadowRoot|DocumentFragment} root
-   * @param {string} id
-   * @return {Element}
+   * @param {RenderGraphAction} action
+   * @return {RenderGraphAction}
    */
-  getElement(root, id) {
-    const references = this.getReferences(root);
-    let element = references.get(id);
-    if (element) {
-      // console.log('Returning from cache', id);
-      return element;
-    }
-    if (element === null) return null; // Cached null response
-
-    // Undefined
-
-    // console.log('Search in DOM', id);
-    element = root.getElementById(id);
-
-    if (element) {
-      // console.log('Found in DOM', id);
-      references.set(id, element);
-      return element;
-    }
-
-    // Element not in DOM means child of conditional element
-    /** @type {Element} */
-    let anchorElement;
-
-    // Check if element is conditional
-    let cloneTarget = this.conditionalElementMetadata.get(id)?.element;
-
-    if (!cloneTarget) {
-      // Check if element even exists in interpolation
-      // Check interpolation (full-tree) first
-      const interpolatedElement = this.interpolation.getElementById(id);
-      if (!interpolatedElement) {
-        console.warn('Not in full-tree', id);
-        // Cache not in full composition
-        references.set(id, null);
-        return null;
-      }
-      // Iterate backgrounds until closest conditional element
-      // const anchorElementId = this.template.getElementById(id).closest('[_if]').id;
-      // anchorElement = this.references.get(anchorElementId)  this.interpolation.getElementById(anchorElementId).cloneNode(true);
-      let parentElement = interpolatedElement;
-      while ((parentElement = parentElement.parentElement) != null) {
-        const parentId = parentElement.id;
-        if (!parentId) {
-          console.warn('Parent does not have ID!');
-          cloneTarget = parentElement;
-          continue;
-        }
-
-        // Parent already referenced
-        const referencedParent = references.get(parentId);
-        if (referencedParent) {
-          // Element may have been removed without ever tree-walking
-          console.debug('Parent already referenced', parentId, '>', id);
-          anchorElement = referencedParent;
-          break;
-        }
-
-        const liveElement = root.getElementById(parentId);
-        if (liveElement) {
-          console.warn('Parent in DOM and not referenced', parentId, '>', id);
-          // Parent already in DOM. Cache reference
-          references.set(parentId, liveElement);
-          anchorElement = referencedParent;
-          break;
-        }
-
-        const conditionalParent = this.conditionalElementMetadata.get(parentId)?.element;
-        if (conditionalParent) {
-          console.debug('Found parent conditional element', parentId, '>', id);
-          cloneTarget = conditionalParent;
-          break;
-        }
-
-        cloneTarget = parentElement;
-      }
-    }
-
-    anchorElement ??= /** @type {Element} */ (cloneTarget.cloneNode(true));
-
-    // Iterate downwards and cache all references
-    let node = anchorElement;
-    const iterator = document.createTreeWalker(anchorElement, NodeFilter.SHOW_ELEMENT);
-    do {
-      const nodeIdentifier = node.id;
-      if (!element && nodeIdentifier === id) {
-        element = node;
-      }
-
-      if (nodeIdentifier) {
-        // console.debug('Caching element', nodeIdentifier);
-        references.set(nodeIdentifier, node);
-        if (cloneTarget) {
-          // Attach events regardless of DOM state.
-          // EventTargets should still fire even if not part of live document
-          this.attachEventListeners(id, element);
-        }
+  addAction(action) {
+    // eslint-disable-next-line no-multi-assign
+    const actionsByPropsUsed = (this.actionsByPropsUsed ??= new Map());
+    for (const prop of action.search.propsUsed) {
+      if (actionsByPropsUsed.has(prop)) {
+        actionsByPropsUsed.get(prop).push(action);
       } else {
-        console.warn('Could not cache node', node);
-      }
-    } while ((node = iterator.nextNode()));
-    return element;
-  }
-
-  /**
-   * @param {*} fn
-   * @param {any} defaults
-   * @return {boolean} reusable
-   */
-  bindWatcher(fn, defaults) {
-    const { props, defaultValue, reusable } = observeFunction(fn, defaults);
-    const entry = { fn, props, defaultValue };
-    for (const prop of props) {
-      let set = this.bindings.get(prop);
-      if (!set) {
-        set = new Set();
-        this.bindings.set(prop, set);
+        actionsByPropsUsed.set(prop, [action]);
       }
-      set.add(entry);
     }
-    return reusable;
+    return action;
   }
 }