tungsten 0.1.72 → 0.2.0

package/dist/update/integrateUpdateVdom.js

@@ -1,1141 +0,0 @@
-import { IsHTMLElement } from "../DomNodes.js";
-import { DomRegion } from "../DomRegion.js";
-import { DomPointer } from "../DomPointer.js";
-import { ContentNodeComponentIsClassComponent, ContentNodeIsNonRendered, ContentNodeIsLiteral, ContentNodeIsHtml, ContentNodeIsComponent, ContentNodeIsArray, ContentNodeIsElement, ContentNodeElementHasValidKey } from "../ContentNode.js";
-import { StringIsHtmlEvent, htmlEvents } from "../htmlEvents.js";
-import { out, warn } from "../appOutput.js";
-import { getStyledContentFromFunctionComponent } from "../getStyledContentFromFunctionComponent.js";
-import { FunctionElement } from "../FunctionComponentStandIn.js";
-import { jssToCss } from "../style/jssToCss.js";
-import { htmlEventHandlerKey } from "../htmlEventHandlerKey.js";
-import { todo } from "../todo.js";
-import { $contentNull } from "../symbols.js";
-import { throwError } from "../throwError.js";
-import { $number, $string, RenderedContentNodeIsArray, RenderedContentNodeIsLiteral, makeRenderedContentNodeNonRendered, makeRenderedContentNodeHtml, makeRenderedContentNodeLiteral, RenderedContentNodeIsNonRendered, WideRenderedContentNodeIsArray, WideRenderedContentNodeIsLiteral, WideRenderedContentNodeIsHtml, WideRenderedContentNodeIsComponent, RenderedContentNodeSingleIsHead, RenderedContentNodeSingleIsComponent, RenderedContentNodeSingleIsHtml, RenderedContentNodeIsElement, RenderedContentNodeSingleIsLiteral } from "../RenderedContentNode.js";
-import { hasValidKey } from "../hasValidKey.js";
-import { $key, $props, $routeData, $routeParams, $type } from "../contentNodeSymbols.js";
-import { printComponentNamesInSource } from "../render/printComponentNameInSource.js";
-import { bindableHtmlElementsNumber, bindableHtmlElementsString } from "../components/bindable/bindableHtmlElements.js";
-import { checkedValueToBoolean } from "../checkedValueToBoolean.js";
-import { setCurrentComponent } from 'tungsten/hooks/setCurrentComponent.js';
-import { clearCurrentComponent } from 'tungsten/hooks/clearCurrentComponent.js';
-function debug(...texts) {
-  //console.log(...texts)
-  //console.log(getStackTrace().split('\n')[2])
-}
-const timing = false; // eslint-disable-line no-type-assertion/no-type-assertion
-// need to be adapted to work for func components?
-export async function integrateElementUpdateVdom(element, newContent) {
-  let startTime = 0;
-  if (timing) startTime = new Date().getMilliseconds();
-  debug(`integrateElementUpdateVdom`, element);
-  debug(`integrateElementUpdateVdom`, newContent);
-  //console.log('***** integrateElementUpdateVdom', element.constructor.name, '*****')
-  //console.log(newContent, element.__currentContent)
-  // if (element.constructor.name === 'ViewpointComponent') return { 
-  //     renderedContent: makeRenderedContentNodeNonRendered(),
-  //     nodesLength: 0
-  // }
-  //console.log('update element', element.constructor.name)
-  const instance = element.__instance;
-  // get the content tree that was previous rendered
-  if (element.__currentContent === $contentNull) {
-    throwError('integrateElementContent()', '__currentContent is $contentNull (element that is updating is missing info for current content)');
-  }
-  const currentContent = element.__currentContent;
-  debug(`${element.constructor.name} currentContent`, currentContent);
-  debug('firstElement', element.__domRegion?.firstElement);
-  debug('lastElement', element.__domRegion?.lastElement);
-  debug('currentContent', currentContent);
-  debug('newContent', newContent);
-  // get the information of where in the dom it was rendered
-  if (element.__domRegion === undefined) throwError('integrateUpdate()', '__domRegion in element was undefined');
-  const domRegion = element.__domRegion;
-  debug('element domRegion', domRegion);
-  //console.log('element domRegion', domRegion)
-  debug(`get position of first element for '${element.constructor.name}'`);
-  debug('dom region', domRegion);
-  const previousPositionOfFirstElement = domRegion.positionOfFirst();
-  //const previousPositionOfLastElement = domRegion.positionOfLast()
-  //const previousNodesLength = (previousPositionOfFirstElement >= 0) ? 1 + previousPositionOfLastElement - previousPositionOfFirstElement : 0
-  //console.log('previousPositionOfFirstElement', previousPositionOfFirstElement)
-  //console.log('previousPositionOfLastElement', previousPositionOfLastElement)
-  const domPointer = new DomPointer(domRegion.parent, previousPositionOfFirstElement);
-  // bump index by one to jump over start comment
-  domPointer.increment();
-  //console.log('dom pointer', domPointer)
-  //console.log('pointed element', domPointer.get())
-  const renderedTree = await applyUpdate({
-    tungstenElement: element,
-    instance,
-    newNode: newContent,
-    oldNode: currentContent,
-    domRegion,
-    domPointer,
-    parentNode: null // we only care about select elements for option elements, not components
-  });
-  //await integrateElementContent(element, content)
-  debug('renderedTree', renderedTree);
-  element.__currentContent = renderedTree;
-  debug(`for el '${element.constructor.name}'`, element);
-  //console.log('update element dom region?', domPointer.parent, domPointer.index)
-  // bump index by one to jump over end comment
-  domPointer.increment();
-  // domPointer
-  //const domIndexStart = domPointer.index
-  //const domIndexCount = domPointer.index - domIndexStart
-  element.__domRegion.updateByIndexes(previousPositionOfFirstElement, domPointer.index - 1);
-  debug(`${element.constructor.name} element.__domRegion`, element.__domRegion);
-  debug('firstElement', element.__domRegion?.firstElement);
-  debug('lastElement', element.__domRegion?.lastElement);
-  //console.log(`${element.constructor.name} element.__domRegion`, element.__domRegion)
-  //console.log('firstElement', element.__domRegion?.firstElement)
-  //console.log('lastElement', element.__domRegion?.lastElement)
-  //console.log('Current Content after update for element', element.constructor.name, 'is', element.__currentContent)
-  const newPositionOfFirstElement = domRegion.positionOfFirst();
-  const newPositionOfLastElement = domRegion.positionOfLast();
-  const newNodesLength = newPositionOfFirstElement >= 0 ? 1 + newPositionOfLastElement - newPositionOfFirstElement : 0;
-  //console.log('finished updating element. ', element.constructor.name, ' El positions:', newPositionOfFirstElement, newPositionOfLastElement)
-  if (timing) out(`Updated ${element.constructor.name} in ${new Date().getMilliseconds() - startTime}ms`);
-  // newNodesLength previousNodesLength
-  return {
-    renderedContent: renderedTree,
-    nodesLength: newNodesLength
-  };
-}
-function getKeyedOldChildren(array) {
-  const keyedChildren = {};
-  let i = 0;
-  for (const child of array) {
-    if (RenderedContentNodeIsElement(child) && child[$key] !== undefined && child[$key] !== null) {
-      keyedChildren[child[$key]] = [i, child];
-    }
-    i++;
-  }
-  return keyedChildren;
-}
-async function applyUpdate({
-  tungstenElement,
-  instance,
-  newNode,
-  oldNode,
-  domRegion,
-  domPointer,
-  parentNode
-}) {
-  //console.log('applyUpdate')
-  //console.log('newNode', newNode)
-  //console.log('oldNode', oldNode)
-  //console.log('parentNode', parentNode)
-  //console.log('domPointer.index', domPointer.index)
-  debug('existing node', oldNode);
-  if (ContentNodeIsNonRendered(newNode)) {
-    //console.log('DD delete node because current node is non rendered')
-    debug('DD delete node because current node is non rendered');
-    deleteNodeIfRendered(oldNode);
-    return makeRenderedContentNodeNonRendered();
-  } else if (ContentNodeIsArray(newNode)) {
-    //newNode
-    debug('*** Content node is array');
-    if (WideRenderedContentNodeIsArray(oldNode)) {
-      debug('*** old node is array');
-      //oldNode
-      //console.log('array update', newNode)
-      //console.log('old array', oldNode)
-      const keyedOldChildren = getKeyedOldChildren(oldNode);
-      const tempOldChildren = [...oldNode];
-      if (Object.keys(keyedOldChildren).length > 0) {
-        //console.log('handling a keyed array')
-        // Keyed arrays a bitch
-        // here is a load of code to deal with it
-        // We make a list of keyed entries from the old array
-        // New keyed items updated old items with matching keys, and then are moved to the correct spot
-        // Unkeyed items are compared to the item in the same place in the old array, and are then moved to the correct
-        // spot incase keyed items have changed the sequencing
-        // Each time an old item is updated, it is removed from a temp list of old nodes
-        // Any other nodes will have been shifting to the bottom by the inserting/moving approach
-        // and these are deleted at the end
-        // I hate you React, uggghhhh
-        // 1    // 1    Key is 1, Key 1 exists, Positions equal, Update old key 1
-        // 3    // 2    Key is 3, Old Key 3 exists, Positions not equal, update (first, because could be async), move
-        // 4    // 3    Key is 4, Old Key 4 exists, Positions not equal, update (first, because could be async), move
-        // 5    // 4    Key is 5, Old Key 5 exists, Positions not equal, update (first, because could be async), move
-        // un   // 5    Replace
-        // un   Trim
-        // 1    // 1    Key is 1, Key 1 exists, Positions equal, Update old key 1 (1,2,3,un,4,5,un)
-        // 3    // 2    Key is 3, Old Key 3 exists, Positions not equal, update (first, because could be async), move (1,3,2,un,4,5,un)
-        // un   // 3    No Key, Compare to 3rd item: Diff, create and insert (1,3,un',2,un,4,5,un)
-        // 4    // un   Key is 4, Old Key 4 exists, update, move (1,3,un',4,2,un,5,un)
-        // 5    // 4    Key is 5, Old Key 5 exists, Positions not equal, update (first, because could be async), move (1,3,un',4,5,2,un,un)
-        // un   // 5    No Key, Compare to 6th item: Diff, create and insert (1,3,un',4,5,un',2,un,un)
-        // un   // un   No Key, Might Match, Update, Move
-        // Trim excess  (1,3,un',4,5,un',2,un,un) Unused Keys: 2
-        //const usedKeys: Record<string | number, true> = {}
-        //const usedOldChildren 
-        // // check for keys
-        // const keyed = checkForKeys(newNode, oldNode)
-        // // extract children with keys into a keyed objected
-        // const newChildren = getKeyedAndUnkeyedChildren(newNode)
-        // const oldChildren = getKeyedAndUnkeyedRrenderedChildren(oldNode)
-        // update
-        const renderedNodes = [];
-        // do we need to start with keyed entries, then do non keyed?
-        let i = 0;
-        for (const childNode of newNode) {
-          //console.log('child node', childNode, ' of ', newNode)
-          let renderedContent;
-          let keyedOldChild;
-          if (ContentNodeIsElement(childNode) && ContentNodeElementHasValidKey(childNode) && (keyedOldChild = keyedOldChildren[childNode[$key]]) !== undefined) {
-            //console.log('update a keyed item', childNode)
-            const [oldChildIndex, oldChild] = keyedOldChild;
-            // create a throwaway DomPointer because we are going to manage our DomPointer differently
-            const tempDomPointer = new DomPointer(domPointer.parent, domPointer.index);
-            // update
-            renderedContent = await applyUpdate({
-              tungstenElement,
-              instance,
-              newNode: childNode,
-              oldNode: oldChild,
-              domRegion,
-              domPointer: tempDomPointer,
-              parentNode
-            });
-            // move
-            //console.log('moving the keyed item', childNode[$key])
-            moveRenderedContent(renderedContent, domPointer);
-            // delete oldChild from temp list
-            delete tempOldChildren[oldChildIndex];
-          } else {
-            //console.log('update an unkeyed item in a keyed array', childNode)
-            // create a throwaway DomPointer because we are going to manage our DomPointer differently
-            const tempDomPointer = new DomPointer(domPointer.parent, domPointer.index);
-            const oldChild = oldNode[i];
-            if (oldChild !== undefined && (!RenderedContentNodeIsElement(oldChild) || !hasValidKey(oldChild))) {
-              //console.log('update/replace a non keyed item', _nki)
-              //throwError('b', 'b')
-              // update/replace as required
-              renderedContent = await applyUpdate({
-                tungstenElement,
-                instance,
-                newNode: childNode,
-                oldNode: oldChild,
-                domRegion,
-                domPointer: tempDomPointer,
-                parentNode
-              });
-              // move -- we need to move it, because we may have removed or inserted elements
-              // pushing the original out of place
-              //console.log('moving the non keyed item', _nki)
-              moveRenderedContent(renderedContent, domPointer);
-              // remove replaced node from list
-              delete tempOldChildren[i];
-            } else {
-              //console.log('create a non keyed item', newNode)
-              //console.log('dp', domPointer)
-              //throwError('c', 'c')
-              // create
-              renderedContent = await createNode({
-                tungstenElement,
-                instance,
-                newNode: childNode,
-                domPointer,
-                parentNode
-              });
-            }
-          }
-          renderedNodes.push(renderedContent);
-          i++;
-        }
-        //console.log('to trim', [...tempOldChildren])
-        // trim
-        for (const oldChild of tempOldChildren) {
-          if (oldChild) {
-            //console.log('deleting old child', oldChild)
-            deleteNodeIfRendered(oldChild);
-          }
-        }
-        return renderedNodes;
-      } else {
-        const renderedNodes = [];
-        let i = 0;
-        for (const child of newNode) {
-          const oldChild = oldNode[i];
-          if (oldChild !== undefined) {
-            renderedNodes.push(await applyUpdate({
-              tungstenElement,
-              instance,
-              newNode: child,
-              oldNode: oldChild,
-              domRegion,
-              domPointer,
-              parentNode
-            }));
-          } else {
-            renderedNodes.push(await createNode({
-              tungstenElement,
-              instance,
-              newNode: child,
-              domPointer,
-              parentNode
-            }));
-          }
-          i++;
-        }
-        while (i < oldNode.length) {
-          //console.log('deleting old child 2', oldNode[i])
-          deleteNodeIfRendered(oldNode[i]);
-          i++;
-        }
-        return renderedNodes;
-      }
-    } else {
-      //console.log('DD delete node because current node is array and existing node is not', oldNode)
-      debug('DD delete node because current node is array and existing node is not');
-      deleteNodeIfRendered(oldNode);
-      // insert
-      // domRegion ???
-      // domPointer ???
-      // return Promise.all(newNode.map(
-      //     (x: ContentNode) => createNode({ 
-      //         tungstenElement,
-      //         instance,
-      //         newNode: x, 
-      //         domPointer
-      //     })
-      // ))
-      const renderedNodes = [];
-      for (const childNode of newNode) {
-        renderedNodes.push(await createNode({
-          tungstenElement,
-          instance,
-          newNode: childNode,
-          domPointer,
-          parentNode
-        }));
-      }
-      return renderedNodes;
-    }
-  } else if (ContentNodeIsLiteral(newNode)) {
-    //let domNode: Text
-    if (WideRenderedContentNodeIsLiteral(oldNode)) {
-      //console.log('setting dom text content to ', newNode.toString())
-      oldNode.domNode.textContent = newNode.toString();
-      domPointer.increment();
-      debug(`!!!!dom pointer index is`, domPointer.index, 'after updating literal  node');
-      return makeRenderedContentNodeLiteral(newNode, oldNode.domNode);
-    } else {
-      //console.log('DD delete node because current node is literal and existing node is not', oldNode)
-      debug('DD delete node because current node is literal and existing node is not');
-      deleteNodeIfRendered(oldNode);
-      // insert text node
-      debug(`!!!!dom pointer index is before creating literal`);
-      return createLiteral(newNode, domPointer);
-      //domNode = createTextElement(newNode.toString(), domPointer)
-      //return makeRenderedContentNodeLiteral(newNode, domNode)
-    }
-  } else if (ContentNodeIsHtml(newNode)) {
-    //newNode
-    //console.log('comparing html el', newNode, 'to', oldNode)
-    //console.log('applying an html node', newNode)
-    processHtmlNode(newNode, parentNode);
-    debug('old node is html', WideRenderedContentNodeIsHtml(oldNode));
-    if (WideRenderedContentNodeIsHtml(oldNode)) {
-      debug('node types', newNode[$type].toLocaleLowerCase(), oldNode[$type].toLocaleLowerCase(), newNode[$type].toLocaleLowerCase() === oldNode[$type].toLocaleLowerCase());
-    }
-    if (WideRenderedContentNodeIsHtml(oldNode) && newNode[$type].toLocaleLowerCase() === oldNode[$type].toLocaleLowerCase()) {
-      //newNode[$props].it = it
-      //console.log('updating html node', newNode[$type])
-      //console.log('old node', oldNode[$type])
-      debug('updating html node', newNode[$type]);
-      // !!!! update
-      const domNode = oldNode.domNode;
-      updateAttributes(newNode, oldNode, domNode);
-      domPointer.increment();
-      debug(`!!!!dom pointer index is`, domPointer.index, 'after updating html node');
-      // !!! handle children
-      const newChildren = newNode[$props].children;
-      //console.log(newNode[$type], 'children', newChildren)
-      const oldChildren = oldNode.renderedChildren;
-      //console.log('oldChildren', oldChildren)
-      const renderedChildren = await applyUpdate({
-        tungstenElement: tungstenElement,
-        instance,
-        newNode: newChildren,
-        oldNode: oldChildren,
-        domRegion: new DomRegion(domNode),
-        domPointer: new DomPointer(domNode, 0),
-        parentNode: newNode
-      });
-      return makeRenderedContentNodeHtml(newNode, domNode, renderedChildren);
-    } else {
-      //console.log('deleting node and creating html', newNode[$type], oldNode)
-      debug('deleting node and creating html node', newNode[$type], oldNode);
-      deleteNodeIfRendered(oldNode);
-      // insert html node
-      const renderedHtmlElement = await createHtmlElement(tungstenElement, instance, newNode, domPointer, parentNode);
-      return renderedHtmlElement;
-    }
-  } else if (ContentNodeIsComponent(newNode)) {
-    //console.log('Comp A', WideRenderedContentNodeIsComponent(oldNode))
-    if (WideRenderedContentNodeIsComponent(oldNode) && newNode[$type] === oldNode[$type] && (oldNode[$key] !== undefined && newNode[$key] !== undefined || oldNode[$key] === newNode[$key])) {
-      //console.log('updating tu el', newNode, oldNode[$key], newNode[$key])
-      // update
-      return updateComponent({
-        newNode,
-        parent: tungstenElement,
-        instance,
-        oldNode,
-        domPointer
-      });
-    } else {
-      //console.log('deleting and replacing node', oldNode)
-      console.log('deleting node and creating component', newNode[$type].constructor.name, oldNode);
-      debug('deleting node and creating component', newNode[$type].constructor.name, oldNode);
-      deleteNodeIfRendered(oldNode);
-      // insert new
-      //console.log('Creating tung comp in applyUpdate')
-      const renderedElement = await createTungstenComponent({
-        parent: tungstenElement,
-        instance,
-        node: newNode,
-        domPointer
-      });
-      debug('renderedElement', renderedElement);
-      return renderedElement;
-    }
-  }
-  // should never be reached
-  const n = newNode; // eslint-disable-line @typescript-eslint/no-unused-vars
-  return makeRenderedContentNodeNonRendered();
-}
-async function updateComponent({
-  newNode,
-  parent,
-  instance,
-  oldNode,
-  domPointer
-}) {
-  if (ContentNodeComponentIsClassComponent(newNode)) {
-    debug('updating component', newNode[$type].name);
-    return await updateClassComponent({
-      parent,
-      instance,
-      newNode,
-      oldNode: oldNode,
-      // eslint-disable-line no-type-assertion/no-type-assertion -- oldNode is proven to be class comp, because type is the same as newNode
-      domPointer
-    });
-  } else {
-    debug('updating function component', newNode[$type].name);
-    return await updateFunctionComponent({
-      parent,
-      instance,
-      newNode,
-      oldNode: oldNode,
-      // eslint-disable-line no-type-assertion/no-type-assertion -- oldNode is proven to be function comp, because type is the same as newNode
-      domPointer
-    });
-  }
-}
-function moveRenderedContent(renderedContent, domPointer) {
-  //console.log('moving, index', domPointer.index, renderedContent)
-  if (RenderedContentNodeIsArray(renderedContent)) {
-    for (const renderedContentChild of renderedContent) {
-      moveRenderedContent(renderedContentChild, domPointer);
-    }
-  } else if (RenderedContentNodeSingleIsLiteral(renderedContent)) {
-    moveDomNode(renderedContent.domNode, domPointer);
-  } else if (RenderedContentNodeSingleIsHtml(renderedContent)) {
-    moveDomNode(renderedContent.domNode, domPointer);
-  } else if (RenderedContentNodeSingleIsComponent(renderedContent)) {
-    //console.log('moving a rendered component')
-    if (renderedContent.element.__currentContent !== $contentNull) {
-      domPointer.increment(); // starting comment
-      moveRenderedContent(renderedContent.element.__currentContent, domPointer);
-      domPointer.increment(); // ending comment
-    }
-  } else if (RenderedContentNodeSingleIsHead(renderedContent)) {
-    throwError('moveRenderedContent()', 'Should not try to update the position of the html head');
-    //moveDomNode(renderedContent.domNode, domPointer)
-  } else {
-    renderedContent;
-    const n = renderedContent; // eslint-disable-line @typescript-eslint/no-unused-vars
-  }
-  //console.log('moving done, index', domPointer.index, renderedContent)
-}
-function moveDomNode(domNode, domPointer) {
-  //console.log('moving domNode', domNode)
-  if (domPointer.positionOf(domNode) !== domPointer.index) {
-    //console.log('document.activeElement', document.activeElement, domNode ==  document.activeElement,  domNode ===  document.activeElement)
-    const hasFocus = domNode === document.activeElement;
-    const activeElement = document.activeElement;
-    if (domPointer.index >= domPointer.parent.childNodes.length) {
-      //console.log('appending', domNode)
-      domPointer.parent.appendChild(domNode);
-    } else {
-      //console.log('inserting at', domPointer.index, domNode)
-      domPointer.parent.insertBefore(domNode, domPointer.parent.childNodes[domPointer.index]);
-    }
-    //console.log('had focus', hasFocus)
-    if (hasFocus) domNode.focus();
-    //console.log('post document.activeElement', document.activeElement)
-    if (activeElement) activeElement.focus(); // eslint-disable-line no-type-assertion/no-type-assertion -- activeElement was a focused dom node, so it should have a focus method??
-  }
-  domPointer.increment();
-}
-function deleteNodeIfRendered(node) {
-  //console.log('-deleteNodeIfRendered', node)
-  debug('-deleteNodeIfRendered', node);
-  if (node !== $contentNull && !RenderedContentNodeIsNonRendered(node)) {
-    //node
-    if (RenderedContentNodeIsArray(node)) {
-      debug('delete array of rendered nodes');
-      for (const child of node) {
-        deleteNodeIfRendered(child);
-      }
-    } else if (RenderedContentNodeIsLiteral(node)) {
-      node.domNode.remove();
-      // find text node
-      // and delete it?   
-    } else if (RenderedContentNodeSingleIsHead(node)) {
-      throwError('deleteNodeIfRendered', 'has been asked to remove the head node, this should not occur');
-    } else if (RenderedContentNodeSingleIsHtml(node)) {
-      debug('delete node html', node);
-      //node
-      node.domNode.remove();
-    } else if (RenderedContentNodeSingleIsComponent(node)) {
-      //console.log('***delete component', node.element.__currentContent)
-      debug('***delete component', node.element.__currentContent);
-      //console.log('***delete component', node.element.__currentContent)
-      //node
-      node.element.__delete();
-      deleteNodeIfRendered(node.element.__currentContent);
-      //console.log('deleting opening comment', node.openingComment)
-      node.openingComment.remove();
-      //console.log('deleting closing comment', node.closingComment)
-      node.closingComment.remove();
-      //console.log(`indicate to ${node.element.constructor.name} that it has been deleted`)
-      node.element.__deleted();
-      //todo('remove rendered component')
-    }
-  }
-}
-async function createNode({
-  tungstenElement,
-  instance,
-  newNode,
-  domPointer,
-  parentNode
-}) {
-  debug('-createNode');
-  //console.log('createNode', newNode)
-  debug('domPointer', domPointer.parent, domPointer.index);
-  if (ContentNodeIsNonRendered(newNode)) {
-    debug('node is NonRendered');
-    return makeRenderedContentNodeNonRendered();
-  } else if (ContentNodeIsArray(newNode)) {
-    debug('node is array');
-    const renderedNodes = [];
-    for (const childNode of newNode) {
-      renderedNodes.push(await createNode({
-        tungstenElement,
-        instance,
-        newNode: childNode,
-        domPointer,
-        parentNode
-      }));
-    }
-    return renderedNodes;
-  } else if (ContentNodeIsLiteral(newNode)) {
-    return createLiteral(newNode, domPointer);
-  } else if (ContentNodeIsHtml(newNode)) {
-    return await createHtmlElement(tungstenElement, instance, newNode, domPointer, parentNode);
-  } else if (ContentNodeIsComponent(newNode)) {
-    //console.log('Creating tung comp in createNode')
-    return await createTungstenComponent({
-      parent: tungstenElement,
-      instance,
-      node: newNode,
-      domPointer
-    });
-  }
-  const n = newNode; // eslint-disable-line @typescript-eslint/no-unused-vars
-  return makeRenderedContentNodeNonRendered();
-}
-function createComment({
-  text,
-  domPointer
-}) {
-  debug('-createComment');
-  //console.log('createComment', text)
-  const comment = document.createComment(text);
-  if (domPointer.index >= domPointer.parent.childNodes.length) {
-    domPointer.parent.appendChild(comment);
-  } else {
-    domPointer.parent.insertBefore(comment, domPointer.parent.childNodes[domPointer.index]);
-  }
-  domPointer.increment();
-  return comment;
-}
-export function processHtmlNode(node, parentNode) {
-  // insert value attr content into the textarea content
-  debug('processHtmlNode', node);
-  //console.log('processHtmlNode', node)
-  const props = node[$props];
-  // set a button without specified type to button, so buttons don't submit forms unless instructed to
-  if (node[$type] === 'button' && !props.type) props.type = 'button';
-  if (props.bind !== undefined) {
-    const eventName = 'onInput';
-    //// we have event handler code here as well as in addAttributes -- should this be moved to updateAttributes??
-    if (node[$type] in bindableHtmlElementsString) {
-      debug('binding');
-      const [bindObject, bindKey] = props.bind;
-      props.value = bindObject[bindKey] ?? ''; // nullish coalesce to avoid putting undef/null into elements
-      let handler;
-      if ('filter' in props) {
-        const filterFunc = props.filter;
-        handler = async event => {
-          bindObject[bindKey] = await filterFunc(event.target.value, event);
-        };
-      } else {
-        handler = event => {
-          bindObject[bindKey] = event.target.value;
-        };
-      }
-      if (eventName in props) {
-        props[eventName] = async event => {
-          await handler(event);
-          props[eventName];
-        };
-      } else {
-        props[eventName] = handler;
-      }
-      // should we be saving the handler like we do in hydrate?
-      //props[eventName] = handler
-      delete props.bind;
-      delete props.filter;
-    } else if (node[$type] in bindableHtmlElementsNumber) {
-      debug('binding');
-      const [bindObject, bindKey] = props.bind;
-      props.value = bindObject[bindKey] ?? ''; // nullish coalesce to avoid putting undef/null into elements
-      let handler;
-      if ('filter' in props) {
-        const filterFunc = props.filter;
-        handler = async event => {
-          bindObject[bindKey] = await filterFunc(event.target.value, event);
-        };
-      } else {
-        handler = event => {
-          bindObject[bindKey] = event.target.value;
-        };
-      }
-      if (eventName in props) {
-        props[eventName] = async event => {
-          await handler(event);
-          props[eventName];
-        };
-      } else {
-        props[eventName] = handler;
-      }
-      //props[eventName] = handler
-      delete props.bind;
-      delete props.filter;
-    }
-  }
-  if (props.bindChecked !== undefined) {
-    const eventName = 'onChange';
-    debug('bindChecked');
-    const [bindObject, bindKey] = props.bindChecked;
-    props.checked = checkedValueToBoolean(bindObject[bindKey]);
-    let handler;
-    if ('filterChecked' in props) {
-      const filterFunc = props.filterChecked;
-      handler = async event => {
-        bindObject[bindKey] = await filterFunc(event.target.checked, event);
-      };
-    } else {
-      handler = event => {
-        bindObject[bindKey] = event.target.checked;
-      };
-    }
-    if (eventName in props) {
-      props[eventName] = async event => {
-        await handler(event);
-        props[eventName];
-      };
-    } else {
-      props[eventName] = handler;
-    }
-    delete props.bindChecked;
-    delete props.filterChecked;
-  }
-  if (props.bindRadio !== undefined) {
-    const eventName = 'onChange';
-    debug('bindRadio');
-    const [bindObject, bindKey] = props.bindRadio;
-    props.checked = bindObject[bindKey] === props.value;
-    const handler = event => {
-      //console.log('bound radio changed 3', (event.target as HTMLCheckedBindableElement).value)
-      bindObject[bindKey] = event.target.value;
-    };
-    if (eventName in props) {
-      props[eventName] = async event => {
-        await handler(event);
-        props[eventName](event);
-      };
-    } else {
-      props[eventName] = handler;
-    }
-    delete props.bindRadio;
-  }
-  if (node[$type] === 'textarea') {
-    if ('children' in props) {
-      if ('value' in props) {
-        warn('textarea element has both value attribute and children, value attribute will be used.');
-        //delete props.children
-        props.children = props.value;
-      }
-    }
-  }
-  // This code relies on the select node being the immediate parent.
-  // This may not be the case (there could be a wrapping component), and could be improved
-  if (node[$type] === 'option') {
-    if (ContentNodeIsHtml(parentNode) && parentNode[$type] === 'select') {
-      if (parentNode[$props].value !== undefined) {
-        if (props.value === parentNode[$props].value) {
-          props.selected = 'selected';
-        }
-      }
-    }
-  }
-  //console.log('processed:', node)
-  debug('post processHtmlNode', node);
-}
-function createLiteral(value, domPointer) {
-  debug('-createLiteral:', value);
-  //const textNode = createTextElement(String(value), domPointer)
-  const text = String(value);
-  debug('dom parent', domPointer.parent);
-  debug('dom index', domPointer.index);
-  const textNode = document.createTextNode(text);
-  if (domPointer.parent.childNodes.length === domPointer.index) {
-    domPointer.parent.appendChild(textNode);
-  } else {
-    domPointer.parent.insertBefore(textNode, domPointer.parent.childNodes[domPointer.index]);
-  }
-  domPointer.increment();
-  //domPointer.increment()
-  return typeof value === 'string' ? {
-    [$type]: $string,
-    value,
-    domNode: textNode
-  } : {
-    [$type]: $number,
-    value,
-    domNode: textNode
-  };
-}
-// function createTextElement(text: string, domPointer: DomPointer) {
-// }
-async function createHtmlElement(tungstenElement, instance, node, domPointer, parentNode) {
-  //console.log('Create HTML El', node)
-  //console.log('Process HTML El')
-  processHtmlNode(node, parentNode);
-  debug('-createHtmlElement', node);
-  const htmlEl = document.createElement(node[$type]);
-  addAttributes(node, htmlEl);
-  if (node[$type] === 'head') {
-    for (const el of instance.persistentHeadChildren) {
-      htmlEl.appendChild(el.cloneNode(true));
-    }
-  }
-  //console.log('creating hmtl node', node[$type])
-  //console.log('has ref?', 'ref' in node[$props])
-  if ('ref' in node[$props]) {
-    node[$props].ref.current = htmlEl;
-  }
-  debug('dom parent', domPointer.parent);
-  debug('dom parent children length', domPointer.parent.childNodes.length);
-  debug('domPointer.index', domPointer.index);
-  if (domPointer.index >= domPointer.parent.childNodes.length) {
-    domPointer.parent.appendChild(htmlEl);
-  } else {
-    debug('new html el', htmlEl);
-    debug('insert before', domPointer.parent.childNodes[domPointer.index]);
-    domPointer.parent.insertBefore(htmlEl, domPointer.parent.childNodes[domPointer.index]);
-    debug('created el', domPointer.get());
-  }
-  domPointer.increment();
-  //!!!! node.domElement = el
-  if (IsHTMLElement(domPointer.parent)) debug('***', node[$type], 'html created', htmlEl);
-  // children
-  const renderedChildren = await createNode({
-    tungstenElement: tungstenElement,
-    instance,
-    newNode: node[$props].children,
-    domPointer: new DomPointer(htmlEl, htmlEl.childNodes.length),
-    parentNode: node
-  });
-  return {
-    ...node,
-    domNode: htmlEl,
-    // eslint-disable-line no-type-assertion/no-type-assertion -- as TungstenHTMLElement allows us to attach additional props later (for storing event handler funcs)
-    renderedChildren
-  };
-}
-function removeAttribute(htmlElement, attr) {
-  if (attr === 'checked') htmlElement.checked = false;else htmlElement.removeAttribute(attr);
-}
-function addAttributes(node, domNode) {
-  //console.log('-addAttributes', node)
-  const attributes = processAttributes(node);
-  debug('attributes', attributes);
-  for (const key in attributes) {
-    //console.log('attr', key)
-    if (StringIsHtmlEvent(key)) {
-      debug('add', htmlEvents[key]);
-      const eventName = htmlEvents[key];
-      todo('addAttributes() warning - ensure type safety of event names');
-      todo('addAttributes() warning - ensure type safety of event listener'); // we need to set all possible event listeners to take only EventListener funcs
-      const handler = attributes[key];
-      // // if its a button without type="submit", prevent default to stop it from submitting forms
-      // const handler = (key === 'onClick' && node[$type] === 'button' && node[$props].type !== 'submit')
-      //     ? (event: Event) => { event.preventDefault(); return (attributes[key] as EventListener)(event) } 
-      //     : attributes[key] as EventListener
-      domNode.addEventListener(eventName, handler);
-      domNode[htmlEventHandlerKey(eventName)] = handler;
-    } else {
-      //if (! (key in ignoreAttributes)) {
-      //console.log('add attr', key, attributes[key])
-      if (typeof attributes[key] === 'boolean') {
-        //console.log('bool attr', attributes[key])
-        if (attributes[key]) domNode.setAttribute(key, '');
-      } else if (attributes[key] !== undefined && attributes[key] !== null) {
-        //console.log('string attr', String(attributes[key]))
-        domNode.setAttribute(key, String(attributes[key]));
-      }
-      //}
-    }
-  }
-  domNode.__tungsten_oldAttributes = attributes;
-  return attributes;
-}
-const clickEvents = [['onClick', 'click']];
-function updateAttributes(node, oldNode, domNodeHTMLElement) {
-  //console.log('-updateAttributes node', node)
-  //console.log('domNodeHTMLElement', domNodeHTMLElement)
-  const domNode = domNodeHTMLElement;
-  //console.log('-updateAttributes', node)
-  debug('-updateAttributes', node);
-  const newAttributes = processAttributes(node);
-  // are re-process the old node attribs here to we can see what we applied last time.
-  // would be better to save this and then grab it later
-  //const oldAttributes = processAttributes(oldNode)
-  const oldAttributes = domNode.__tungsten_oldAttributes;
-  //console.log('newAttributes', newAttributes)
-  //console.log('oldAttributes', oldAttributes)
-  debug('attributes', newAttributes);
-  debug('oldAttributes', oldAttributes);
-  for (const attr in oldAttributes) {
-    if (!(attr in newAttributes)) {
-      debug('remove attr', attr);
-      removeAttribute(domNode, attr);
-    }
-  }
-  // for (const attr of domNode.attributes) {
-  //     if ( ! (attr.name in newAttributes) ) {
-  //         debug('remove attr', attr.name)
-  //         removeAttribute(domNode, attr.name)
-  //     }
-  // }
-  //if (attributes.onClick !== undefined)
-  for (const [event, eventName] of clickEvents) {
-    if (newAttributes[event] === undefined) {
-      debug('remove event', eventName);
-      //!!
-      domNode.removeEventListener(eventName, domNode[htmlEventHandlerKey(eventName)]);
-    }
-  }
-  for (const key in newAttributes) {
-    switch (key) {
-      case 'onClick':
-        {
-          debug('add onclick');
-          const clickHandlerKey = htmlEventHandlerKey('click');
-          debug('domNode.' + clickHandlerKey, domNode[clickHandlerKey]);
-          if (domNode[clickHandlerKey]) {
-            domNode.removeEventListener('click', domNode[clickHandlerKey]);
-          }
-          // if its a button without type="submit", prevent default to stop it from submitting forms
-          const handler = newAttributes[key];
-          // const handler = (key === 'onClick' && node[$type] === 'button' && node[$props].type !== 'submit')
-          //     ? (event: Event) => { event.preventDefault(); return (attributes[key] as EventListener)(event) } 
-          //     : attributes[key] as EventListener
-          todo(`Ensure type safety on event listener`);
-          domNode.addEventListener('click', handler);
-          domNode[clickHandlerKey] = handler;
-          debug('added event handler', domNode[clickHandlerKey]);
-          break;
-        }
-      default:
-        {
-          //console.log('add/set attr', domNode, key, attributes[key], String(attributes[key]))
-          //if (domNode.tagName === 'input' || domNode.tagName === 'INPUT') continue
-          // try to set value directly for inputs that aren't updating with the below code
-          if (key === 'value') {
-            domNode.value = String(newAttributes[key]);
-          } else {
-            if (typeof newAttributes[key] === 'boolean') {
-              if (newAttributes[key]) domNode.setAttribute(key, '');else removeAttribute(domNode, key);
-            } else if (newAttributes[key] === undefined || newAttributes[key] === null) {
-              removeAttribute(domNode, key);
-            } else {
-              domNode.setAttribute(key, String(newAttributes[key]));
-            }
-          }
-        }
-    }
-  }
-  domNode.__tungsten_oldAttributes = newAttributes;
-  return newAttributes;
-}
-// const ignoreAttributes = {
-//     'ref': true,
-//     //'key': true
-// }
-function processAttributes(node) {
-  const {
-    [$props]: props
-  } = node;
-  debug('-processAttributes');
-  debug('props', props);
-  const attributes = {
-    ...props
-  };
-  delete attributes.ref;
-  delete attributes.class;
-  if (attributes.className !== undefined) attributes.class = attributes.className;
-  delete attributes.className;
-  // process the bind attr to a value attr
-  if (attributes.bind) {
-    const bind = attributes.bind;
-    // this will overwrite any existing value attr
-    attributes.value = bind[0][bind[1]] ?? ''; // !!! unsafe, assuming bind variable is a suitable value
-    // setup on onChange event handler
-    // this will overwrite any other onChange
-    if (node[$type] in bindableHtmlElementsString) {
-      let handler;
-      if ('filter' in attributes) {
-        const filterFunc = attributes.filter;
-        handler = async event => {
-          bind[0][bind[1]] = await filterFunc(event.target.value, event);
-        };
-      } else {
-        handler = event => {
-          bind[0][bind[1]] = event.target.value;
-        };
-      }
-      attributes.onChange = handler;
-    } else if (node[$type] in bindableHtmlElementsNumber) {
-      let handler;
-      if ('filter' in attributes) {
-        const filterFunc = attributes.filter;
-        handler = async event => {
-          bind[0][bind[1]] = await filterFunc(event.target.value, event);
-        };
-      } else {
-        handler = event => {
-          bind[0][bind[1]] = event.target.value;
-        };
-      }
-      attributes.onChange = handler;
-    }
-    delete attributes.bind;
-    delete attributes.filter;
-  }
-  if (attributes.children !== undefined) {
-    delete attributes.children;
-  }
-  if (attributes.style !== undefined) {
-    attributes.style = jssToCss(attributes.style);
-  }
-  if (attributes.css !== undefined) {
-    if (attributes.style !== undefined) {
-      attributes.style = (attributes.style + ' ' + attributes.css).trim();
-    } else {
-      attributes.style = attributes.css;
-    }
-  }
-  return attributes;
-}
-export async function createTungstenComponent({
-  parent,
-  instance,
-  node,
-  domPointer
-}) {
-  debug('-createTungstenComponent');
-  debug('domPointer', domPointer.parent, domPointer.index);
-  if (ContentNodeComponentIsClassComponent(node)) {
-    return createTungstenClassComponent(parent, instance, node, domPointer);
-  } else {
-    return createTungstenFunctionComponent(parent, instance, node, domPointer);
-  }
-  // need to set a domRegion
-  // element.__domRegion = domRegion
-}
-let cc = 0; // debugging aid
-async function createTungstenClassComponent(parent, instance, node, domPointer) {
-  //console.log('creating tung class comp', node[$type].name)
-  //console.log('domPointer', domPointer)
-  //console.log('DP parent children', domPointer.parent.childNodes)
-  //console.log('current', domPointer.get())
-  const c = cc++;
-  const domStartIndex = domPointer.index;
-  debug(`[${c}]`, '!!&& dom start index', domStartIndex);
-  debug(`[${c}]`, 'class component');
-  const element = new node[$type]({
-    props: node[$props],
-    routeParams: node[$routeParams],
-    routeData: node[$routeData],
-    instance,
-    parentElement: parent
-  });
-  await element.__init();
-  const content = await element.__initialContent();
-  //const content = await element.__styledContent()
-  //console.log('new comp content', content)
-  //console.log(`[${c}]`, 'content', content)
-  const compName = node[$type].name; // should take into account other factors // maybe in render too
-  const openingComment = createComment({
-    text: printComponentNamesInSource ? compName : '',
-    domPointer
-  });
-  const renderedContent = await createNode({
-    tungstenElement: element,
-    instance,
-    newNode: content,
-    domPointer,
-    parentNode: null
-  });
-  const closingComment = createComment({
-    text: printComponentNamesInSource ? '/' + compName : '',
-    domPointer
-  });
-  //console.log('created class comp closing comment', node[$type].name)
-  //const renderedContent: RenderedContentNode = await integrateNode({ node: content, domRegion: null, domPointer, parent: element, instance })
-  const domLength = domPointer.index - domStartIndex;
-  debug(`[${c}]`, '&& for node', node);
-  debug(`[${c}]`, '&& dom start index', domStartIndex);
-  debug(`[${c}]`, '&& dom end index', domLength);
-  //console.log('domPointer.parent', domPointer.parent)
-  //console.log('domStartIndex', domStartIndex)
-  //console.log('domLength', domLength)
-  //console.log('new dom region when creating class comp', node[$type].name, domPointer.parent)
-  //console.log('new dom region', domStartIndex, domLength)
-  element.__domRegion = new DomRegion(domPointer.parent, domStartIndex, domLength);
-  debug(`[${c}]`, '&& dom region first element', element.__domRegion.firstElement);
-  debug(`[${c}]`, '&& dom region last element', element.__domRegion.lastElement);
-  //console.log('created dom region', element.__domRegion)
-  element.__currentContent = renderedContent;
-  element.__didMount();
-  return {
-    ...node,
-    element,
-    openingComment,
-    closingComment
-  };
-}
-let xx = 0;
-async function createTungstenFunctionComponent(parent, instance, node, domPointer) {
-  //console.log('creating tung func comp', node[$type].name)
-  //console.log('create Tung Func C')
-  const x = xx++;
-  const domStartIndex = domPointer.index;
-  debug(`[${x}]`, 'create function component', node);
-  debug(`[${x}]`, 'domPointer.parent', domPointer.parent);
-  debug(`[${x}]`, 'dom index', domPointer.index);
-  const element = new FunctionElement(node[$type], node[$props], node[$routeParams], node[$routeData], instance, parent);
-  setCurrentComponent(element);
-  const content = await getStyledContentFromFunctionComponent(element);
-  debug('new func comp content', content);
-  //const content = await getStyledContentFromFunctionComponent(node.type, node.props)
-  clearCurrentComponent();
-  debug('content', content);
-  const compName = node[$type].name; // should take into account other factors // maybe in render too
-  const openingComment = createComment({
-    text: printComponentNamesInSource ? compName : '',
-    domPointer
-  });
-  const renderedContent = await createNode({
-    tungstenElement: element,
-    instance,
-    newNode: content,
-    domPointer,
-    parentNode: null
-  });
-  const closingComment = createComment({
-    text: printComponentNamesInSource ? '/' + compName : '',
-    domPointer
-  });
-  //const renderedContent: RenderedContentNode = await integrateNode({ node: content, domRegion: null, domPointer, parent: element, instance })
-  const domLength = domPointer.index - domStartIndex;
-  debug(`[${x}]`, '&& Continuing create FC', node);
-  debug(`[${x}]`, '&& domPointer.parent', domPointer.parent);
-  debug(`[${x}]`, '&& dom start index', domStartIndex);
-  debug(`[${x}]`, '&& dom length', domLength);
-  debug(`[${x}]`, '&& dom pointer children', domPointer.parent.childNodes);
-  //console.log('new dom region when creating func comp', node[$type].name, domPointer.parent)
-  element.__domRegion = new DomRegion(domPointer.parent, domStartIndex, domLength);
-  //console.log('&& dom region first element', element.__domRegion.firstElement)
-  //console.log('&& dom region last element', element.__domRegion.lastElement)
-  element.__currentContent = renderedContent;
-  return {
-    ...node,
-    element,
-    openingComment,
-    closingComment
-  };
-}
-async function updateClassComponent({
-  newNode,
-  oldNode,
-  domPointer
-}) {
-  //console.log('-updateClassComponent', newNode)
-  const element = oldNode.element;
-  element.props = newNode[$props];
-  debug('update class component', newNode);
-  //console.log('update class component', newNode)
-  //console.log('old element', element)
-  //console.log('domPointer before updating comp', domPointer)
-  //console.log('domPointer children', [...domPointer.parent.childNodes])
-  //throwError('','')
-  const updateResult = await element.__update();
-  domPointer.increment(updateResult.nodesLength); // bump the dom pointer index forward by the number of nodes within that element's content
-  element.__didUpdate();
-  return {
-    ...newNode,
-    element,
-    openingComment: oldNode.openingComment,
-    closingComment: oldNode.closingComment
-  };
-}
-async function updateFunctionComponent({
-  newNode,
-  oldNode,
-  domPointer
-}) {
-  // this func does not seem to be updating the dom pointer index
-  //console.log('updateFunctionComponent')
-  const standIn = oldNode.element;
-  standIn.props = newNode[$props];
-  const updateResult = await standIn.update();
-  domPointer.increment(updateResult.nodesLength); // bump the dom pointer index forward by the number of nodes within that element's content
-  return {
-    ...newNode,
-    element: standIn,
-    openingComment: oldNode.openingComment,
-    closingComment: oldNode.closingComment
-  };
-}