tungsten 0.2.1 → 0.2.3

package/dist/update/integrateUpdateVdom.js

@@ -0,0 +1,1192 @@
+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';
+import { isDev } from "../isDev.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()) {
+      return updateHtmlElement(tungstenElement, instance, newNode, oldNode, domPointer);
+    } 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 updateHtmlElement(tungstenElement, instance, newNode, oldNode, domPointer) {
+  //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 = newNode[$props].__opaque === true ? oldChildren : await applyUpdate({
+    tungstenElement: tungstenElement,
+    instance,
+    newNode: newChildren,
+    oldNode: oldChildren,
+    domRegion: new DomRegion(domNode),
+    domPointer: new DomPointer(domNode, 0),
+    parentNode: newNode
+  });
+  if (newNode[$type] === 'select') {
+    // if we updated a select element
+    // if the value changed, we need to update the options
+    // alternatively the options might have changed, also requiring 
+    // updates to `selected`
+    // if the options update without the select updating, then they will need to look-back to find the value of the select
+    if (newNode[$props].value !== undefined && newNode[$props].value !== null && String(newNode[$props].value) !== String(oldNode[$props].value)) {
+      const options = domNode.options;
+      const value = String(newNode[$props].value);
+      for (let i = options.length - 1; i >= 0; i--) {
+        const option = options[i];
+        if (option.value === value) {
+          option.selected = true;
+          break;
+        }
+      }
+    }
+  }
+  return makeRenderedContentNodeHtml(newNode, domNode, renderedChildren);
+}
+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' && !('type' in props)) 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 ('value' in props) {
+      if ('children' in props && !(Array.isArray(props.children) && props.children.length === 0)) {
+        if (isDev) warn('textarea element has both value attribute and children, value attribute will be used.');
+      }
+      props.children = props.value;
+      delete 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
+  });
+  if (node[$type] === 'select') {
+    if (node[$props].value !== undefined && node[$props].value !== null) {
+      const options = htmlEl.options;
+      const value = String(node[$props].value);
+      for (let i = options.length - 1; i >= 0; i--) {
+        const option = options[i];
+        if (option.value === value) {
+          option.selected = true;
+          break;
+        }
+      }
+    }
+  }
+  if (node[$type] === 'option') {
+    const option = htmlEl;
+    const select = option.closest('select');
+    if (select !== null && select.hasAttribute('value') && select.getAttribute('value') === option.value) {
+      option.selected = true;
+    }
+  }
+  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 ('clickHandlerKey' in domNode) {
+            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]));
+            }
+          }
+        }
+    }
+  }
+  if (node[$type] === 'option') {
+    const option = domNode;
+    const select = option.closest('select');
+    if (select !== null && select.hasAttribute('value') && select.getAttribute('value') === option.value) {
+      option.selected = true;
+    }
+  }
+  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.__zoneHtml;
+  delete attributes.__opaque;
+  delete attributes.class;
+  if (attributes.className !== undefined) attributes.class = attributes.className;
+  delete attributes.className;
+  // process the bind attr to a value attr
+  if ('bind' in attributes && attributes.bind !== undefined) {
+    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
+  };
+}