tungsten 0.1.60 → 0.1.62

package/dist/update/integrateUpdateVdomPrebuild.js

@@ -0,0 +1,1453 @@
+// ////////////////////////////////////////////
+// // Variant of integrateUpdateVdom.ts
+// //
+// // To avoid unstyled view flashes, when creating content we want to build full html trees
+// // and insert them whole, not build them up bit by bit
+// ////////////////////////////////////////////
+export {};
+// import type { ExtendableHTMLElement } from '../ExtendableHTMLElement.js'
+// import type { BindVariable } from '../components/bindable/BindVariable.js'
+// //import type { BindFilterFunction } from '../BindFilterFunction.js'
+// import type {
+//     FilterCheckedFunc, FilterFuncNumber, FilterFuncString, HTMLBindableElementNumber,
+//     HTMLBindableElementString, HTMLCheckedBindableElement
+// } from '../../types/jsx/html.js'
+// import { IsHTMLElement } from '../DomNodes.js'
+// import { DomRegion } from '../DomRegion.js'
+// import { DomPointer } from '../DomPointer.js'
+// import { 
+//     ContentNode, ContentNodeComponentIsClassComponent, ContentNodeHtml, ContentNodeIsNonRendered,
+//     ContentNodeIsLiteral, ContentNodeIsHtml, ContentNodeIsComponent, ContentNodeIsArray,
+//     ContentNodeComponentAny, ContentNodeFunctionComponentAny, ContentNodeClassComponentAny,
+//     ContentNodeIsElement, ContentNodeElementHasValidKey, NodeValue,
+//     ContentNodeComponent,
+//     ContentNodeLiteral
+// } from '../ContentNode.js'
+// import { Instance } from '../Instance/Instance.js'
+// import { HtmlEvent, HtmlEventName, StringIsHtmlEvent, htmlEvents } from '../htmlEvents.js'
+// import { out, warn } from '../appOutput.js'
+// import { getStyledContentFromFunctionComponent } from '../getStyledContentFromFunctionComponent.js'
+// import { FunctionElement } from '../FunctionComponentStandIn.js'
+// import { TungstenElement } from '../TungstenElement.js'
+// import { jssToCss } from '../style/jssToCss.js'
+// import { AnyComponent } from '../AnyComponent.js'
+// import { htmlEventHandlerKey } from '../htmlEventHandlerKey.js'
+// import { todo } from '../todo.js'
+// import { $ContentNull, $contentNull } from '../symbols.js'
+// import { throwError } from '../throwError.js'
+// import {
+//     $number, $string, RenderedContentNode, RenderedContentNodeIsArray, RenderedContentNodeIsLiteral, 
+//     makeRenderedContentNodeNonRendered, makeRenderedContentNodeHtml, makeRenderedContentNodeLiteral,
+//     RenderedContentNodeHtml, RenderedContentNodeIsNonRendered, WideRenderedContentNodeIsArray,
+//     WideRenderedContentNodeIsLiteral, WideRenderedContentNodeIsHtml, WideRenderedContentNodeIsComponent,
+//     RenderedContentNodeLiteral, RenderedContentNodeComponent, RenderedContentNodeClassComponent,
+//     RenderedContentNodeFunctionComponent, RenderedContentNodeSingleIsHead, RenderedContentNodeSingleIsComponent,
+//     RenderedContentNodeSingleIsHtml, RenderedContentNodeArray, RenderedContentNodeIsElement,
+//     RenderedContentNodeSingleIsLiteral, RenderedContentNodeNonRendered,
+//     $nonRendered, type $NonRendered
+// } from '../RenderedContentNode.js'
+// import { UpdateResult } from './UpdateResult.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 { ExtendedChangeEvent } from '../../types/jsx/html.events.js'
+// import { checkedValueToBoolean } from '../checkedValueToBoolean.js'
+// import { setCurrentComponent } from 'tungsten/hooks/setCurrentComponent.js'
+// import { clearCurrentComponent } from 'tungsten/hooks/clearCurrentComponent.js'
+// type TungstenHtmlDomElement = TungstenHTMLElement | Text | $NonRendered
+// type TungstenHtmlDomElementNode = TungstenHtmlDomElement| TungstenHtmlDomElement[]
+// type TungstenHtmlDomElements = TungstenHtmlDomElementNode | TungstenHtmlDomElementNode[]
+// export type TungstenHTMLElement = HTMLElement & {
+//     __tungsten_click_handler: (this: HTMLElement, ev: MouseEvent) => any //// !! Why are we declaring just this event here?
+//     [key: string]: unknown // this could be refined to allow only the keys we use - event handler refs
+// }
+// function debug(...texts: unknown[]) { // eslint-disable-line @typescript-eslint/no-unused-vars
+//     //console.log(...texts)
+//     //console.log(getStackTrace().split('\n')[2])
+// }
+// const timing = true as boolean // eslint-disable-line no-type-assertion/no-type-assertion
+// // need to be adapted to work for func components?
+// export async function integrateElementUpdateVdom(
+//     element: AnyComponent, newContent: ContentNode
+// ): Promise<UpdateResult> {
+//     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: RenderedContentNode = 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: 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
+//     // })
+//     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
+//     })
+//     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 }
+// }
+// type KeyedOldChildren = Record<string | number, [index: number, node: RenderedContentNode]>
+// function getKeyedOldChildren(array: RenderedContentNodeArray): KeyedOldChildren {
+//     const keyedChildren: KeyedOldChildren = {}
+//     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
+// }
+// type ApplyUpdateArgs = {
+//     tungstenElement: AnyComponent
+//     instance: Instance
+//     newNode: ContentNode
+//     oldNode: RenderedContentNode | $ContentNull
+//     domRegion: DomRegion// | null,
+//     domPointer: DomPointer
+//     parentNode: ContentNode
+// }
+// async function applyUpdate(
+//     { tungstenElement, instance, newNode, oldNode, domRegion, domPointer, parentNode }: ApplyUpdateArgs
+// ) : Promise<RenderedContentNode> {
+//     //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: (RenderedContentNode | undefined)[] = [...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: RenderedContentNode = []
+//                 // 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 createRenderedContentNode({
+//                                 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: RenderedContentNode[] = []
+//                 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 createRenderedContentNode({
+//                             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: RenderedContentNode = []
+//             for (const childNode of newNode) {
+//                 renderedNodes.push(await createRenderedContentNode({ 
+//                     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 {
+//             // insert text node
+//             debug(`!!!!dom pointer index is before creating literal`)
+//             const { text, textNode } = createLiteral(newNode)
+//             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)
+//             debug('dom parent', domPointer.parent)
+//             debug('dom index', domPointer.index)
+//             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
+//             //     }
+//             return {
+//                 [$type]: $string, // should we keep the number version? // or switch to $text
+//                 value: text,
+//                 domNode: textNode
+//             }
+//             //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 {
+//             // insert html node
+//             const htmlTree = await createHtmlTree({
+//                 tungstenElement,
+//                 contentNode: newNode,
+//                 instance,
+//                 //domPointer,
+//                 parentNode
+//             })
+//             //console.log('deleting node and creating html', newNode[$type], oldNode)
+//             debug('deleting node and creating html node', newNode[$type], oldNode)
+//             deleteNodeIfRendered(oldNode)
+//             const renderedNode = insertHtmlTree({
+//                 contentNode: newNode,
+//                 tree: htmlTree,
+//                 domRegion,
+//                 domPointer
+//             })
+//             //children
+//             // const renderedHtmlElement: RenderedContentNode = await createRenderedContentNode({
+//             //     tungstenElement: tungstenElement,
+//             //     instance,
+//             //     newNode: newNode,
+//             //     domPointer: new DomPointer(htmlEl, htmlEl.childNodes.length), 
+//             //     parentNode: parentNode
+//             // })
+//             return renderedNode
+//         }
+//     } else if (ContentNodeIsComponent(newNode)) {
+//         //console.log('Comp A', WideRenderedContentNodeIsComponent(oldNode))
+//         if (
+//             WideRenderedContentNodeIsComponent(oldNode)
+//             && newNode[$type] === oldNode[$type]
+//             && (
+//                 (oldNode[$key] !== undefined && newNode[$key] !== undefined) // if either is keyed and the keys don't match, replace
+//                 || (oldNode[$key] === newNode[$key])
+//             )
+//         ) {
+//             //console.log('updating tu el', newNode, oldNode[$key], newNode[$key])
+//             // update
+//             const { content, complete } = await oldNode.element.__updateAndReturnContent()
+//             return await applyUpdate({
+//                 tungstenElement: oldNode.element,
+//                 instance,
+//                 newNode: content,
+//                 oldNode,
+//                 domRegion,
+//                 domPointer,
+//                 parentNode: null // don't care about this except for <select> parent for <option>
+//             })
+//             complete()
+//             // return updateComponent({
+//             //     newNode,
+//             //     parent: tungstenElement,
+//             //     instance,
+//             //     oldNode,
+//             //     domPointer
+//             // })
+//         } else {
+//             const htmlTree
+//                 = await createTungstenComponent({ parent: tungstenElement, instance, node: newNode })
+//             //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 })
+//             // apply tree
+//             const renderedNode = insertHtmlTree(newNode, htmlTree, domRegion, domPointer)
+//             debug('renderedNode', renderedNode)
+//             return renderedNode
+//         }
+//     }
+//     // should never be reached
+//     const n: never = newNode // eslint-disable-line @typescript-eslint/no-unused-vars
+//     return makeRenderedContentNodeNonRendered()
+// }
+// type UpdateComponentArgs = {
+//     newNode: ContentNodeComponent
+//     parent: AnyComponent
+//     instance: Instance
+//     oldNode: ContentNodeComponent
+//     domPointer: DomPointer
+// }
+// async function updateComponent({ newNode, parent, instance, oldNode, domPointer }: UpdateComponentArgs) {
+//     if (ContentNodeComponentIsClassComponent(newNode)) {
+//         debug('updating component', newNode[$type].name)
+//         return await updateClassComponent({ 
+//             parent, 
+//             instance, 
+//             newNode,
+//             oldNode: oldNode as RenderedContentNodeClassComponent, // 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 as RenderedContentNodeFunctionComponent, // 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: RenderedContentNode, domPointer: DomPointer): void {
+//     //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: RenderedContentNodeNonRendered = renderedContent // eslint-disable-line @typescript-eslint/no-unused-vars
+//     }
+//     //console.log('moving done, index', domPointer.index, renderedContent)
+// }
+// function moveDomNode(domNode: HTMLElement | Text, domPointer: 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 as Element & { focus: () => void } ).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: $ContentNull | RenderedContentNode) {
+//     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')
+//         }
+//     }
+// }
+// type CreateNodeArgs = {
+//     tungstenElement: AnyComponent,
+//     instance: Instance
+//     newNode: ContentNode
+//     domPointer: DomPointer
+//     parentNode: ContentNode
+// }
+// async function createRenderedContentNode({ tungstenElement, instance, newNode, domPointer, parentNode }: CreateNodeArgs)
+//     : Promise<RenderedContentNode> {
+//     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: RenderedContentNode = []
+//         for (const childNode of newNode) {
+//             renderedNodes.push(await createRenderedContentNode({ 
+//                 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 })
+//     }
+//     const n: never = newNode // eslint-disable-line @typescript-eslint/no-unused-vars
+//     return makeRenderedContentNodeNonRendered()
+// }
+// type CreateHtmlTreeArgs = {
+//     tungstenElement: AnyComponent,
+//     contentNode: ContentNode
+//     instance: Instance
+//     //domPointer: DomPointer
+//     parentNode: ContentNode
+// }
+// async function createHtmlTree({ tungstenElement, contentNode, instance, parentNode }: CreateHtmlTreeArgs)
+//     : Promise<TungstenHtmlDomElements> {
+//     debug('-createNode')
+//     //console.log('createNode', contentNode)
+//     //debug('domPointer', domPointer.parent, domPointer.index)
+//     if (ContentNodeIsNonRendered(contentNode)) {
+//         debug('node is NonRendered')
+//         return $nonRendered
+//     } else if (ContentNodeIsArray(contentNode)) {
+//         debug('node is array')
+//         const nodeArray: TungstenHtmlDomElements[] = []
+//         for (const childNode of contentNode) {
+//             nodeArray.push(await createHtmlTree({ 
+//                 tungstenElement,
+//                 contentNode: childNode,
+//                 instance,
+//                 //domPointer,
+//                 parentNode
+//             }))
+//         }
+//         return nodeArray
+//     } else if (ContentNodeIsLiteral(contentNode)) {
+//         return createLiteral(contentNode)
+//     } else if (ContentNodeIsHtml(contentNode)) {
+//         const htmlEl = await createHtmlElement(instance, contentNode, parentNode)
+//         completeHtmlTree(contentNode, parentNode, htmlEl, instance)
+//         return makeRenderedContentNodeHtml(contentNode, htmlEl, renderedChildren)
+//     } else if (ContentNodeIsComponent(contentNode)) {
+//         //console.log('Creating tung comp in createNode')
+//         return createTungstenComponent( { parent: tungstenElement, instance, node: contentNode })
+//     }
+//     const n: never = contentNode // eslint-disable-line @typescript-eslint/no-unused-vars
+//     return makeRenderedContentNodeNonRendered()
+// }
+// async function completeHtmlTree(
+//     tungstenElement: AnyComponent,
+//     contentNode: ContentNodeHtml, parentContentNode: ContentNode,
+//     domNode: TungstenHTMLElement, instance: Instance
+// ): Promise<RenderedContentNodeHtml> {
+//     const { children } = contentNode[$props]
+//     let renderedChildren: RenderedContentNode
+//     // if (Array.isArray(children)) {
+//     // } else {
+//         if (ContentNodeIsNonRendered(children)) {
+//             debug('node is NonRendered')
+//             renderedChildren = $nonRendered
+//         } else if (ContentNodeIsArray(children)) {
+//             debug('node is array')
+//             const nodeArray: RenderedContentNode[] = []
+//             for (const childNode of children) {
+//                 if (ContentNodeIsNonRendered(childNode)) {
+//                 } else if (ContentNodeIsArray(children)) {
+//                 } else if (ContentNodeIsLiteral(children)) {
+//                 } else if (ContentNodeIsHtml(children)) {
+//                 } else if (ContentNodeIsComponent(children)) {
+//                 }
+//                 nodeArray.push(await completeHtmlTree( 
+//                     tungstenElement,
+//                     childNode,
+//                     contentNode,
+//                     parentDomNode,
+//                     instance,
+//                 ))
+//             }
+//             renderedChildren = nodeArray
+//         } else if (ContentNodeIsLiteral(children)) {
+//             const { text, textNode } = createLiteral(children)
+//             domNode.append(textNode)
+//             renderedChildren = makeRenderedContentNodeLiteral(text, textNode)
+//         } else if (ContentNodeIsHtml(children)) {
+//             const htmlEl = await createHtmlElement(instance, children, parentContentNode)
+//             domNode.append(htmlEl)
+//             const renderedNode = await completeHtmlTree(tungstenElement, children, parentContentNode, htmlEl, instance)
+//             renderedChildren = renderedNode
+//             return makeRenderedContentNodeHtml(children, htmlEl, renderedChildren)
+//         } else if (ContentNodeIsComponent(children)) {
+//             const htmlTree = await createTungstenComponent( { parent: tungstenElement, instance, node: children })
+//             const renderedNode = await completeHtmlTree(tungstenElement, htmlTree, parentContentNode, htmlEl, instance)
+//             //return createTungstenComponent( { parent: tungstenElement, instance, node: children })
+//             renderedChildren = renderedNode
+//         }
+//         const n: never = children // eslint-disable-line @typescript-eslint/no-unused-vars
+//     //}
+//     return {
+//         [$type]: contentNode[$type],
+//         [$props]: contentNode[$props],
+//         domNode,
+//         renderedChildren
+//     }
+// }
+// type InsertTreeArgs = {
+//     contentNode: ContentNode,
+//     tree: TungstenHtmlDomElements,
+//     domRegion: DomRegion,
+//     domPointer: DomPointer
+// }
+// function insertHtmlTree({contentNode, tree, domRegion, domPointer}: InsertTreeArgs): RenderedContentNode {
+//     if (Array.isArray(tree)) {
+//     } else {
+//         if (tree !== $nonRendered) {
+//             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(tree)
+//             } else {
+//                 debug('new html el', tree)
+//                 debug('insert before', domPointer.parent.childNodes[domPointer.index])
+//                 domPointer.parent.insertBefore(tree, domPointer.parent.childNodes[domPointer.index]!)
+//                 debug('created el', domPointer.get())
+//             }
+//             domPointer.increment()
+//             //!!!! node.domElement = el
+//             //if (IsHTMLElement(domPointer.parent)) debug('***', newNode[$type], 'html created', htmlEl)
+//             if (tree.nodeType == 1) {
+//                 const textNode = tree as Text
+//                 return {
+//                     [$type]: $string,
+//                     value: String(contentNode as ContentNodeLiteral),
+//                     domNode: textNode
+//                 }
+//             } else {
+//                 const htmlNode = tree as TungstenHTMLElement
+//                 return {
+//                     [$type]: htmlNode.tagName,
+//                     [$props]: contentNode[$props],
+//                     domNode: htmlNode
+//                 }
+//             }
+//         } else {
+//             return $nonRendered
+//         }
+//     }
+// }
+// type CreateCommentArgs = {
+//     text: string
+//     domPointer: DomPointer
+// }
+// function createComment({ text, domPointer }: CreateCommentArgs): Comment {
+//     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: ContentNodeHtml, parentNode: ContentNode) {
+//     // 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) {
+//             type Element = HTMLBindableElementString
+//             debug('binding')
+//             const [bindObject, bindKey] = (props.bind as BindVariable<any>)
+//             props.value = bindObject[bindKey] ?? '' // nullish coalesce to avoid putting undef/null into elements
+//             let handler: (event: ExtendedChangeEvent<any>) => void | Promise<void>
+//             if ('filter' in props) {
+//                 const filterFunc = props.filter as FilterFuncString<any, any>
+//                 handler = async (event: ExtendedChangeEvent<any>) => {
+//                     bindObject[bindKey] = await filterFunc((event.target as Element).value, event)
+//                 }
+//             } else {
+//                 handler = (event: ExtendedChangeEvent<any>) => {
+//                     bindObject[bindKey] = (event.target as Element).value
+//                 }
+//             }
+//             if (eventName in props) {
+//                 props[eventName] = async (event: ExtendedChangeEvent<any>) => {
+//                     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) {
+//             type Element = HTMLBindableElementNumber
+//             debug('binding')
+//             const [bindObject, bindKey] = (props.bind as BindVariable<any>)
+//             props.value = bindObject[bindKey] ?? '' // nullish coalesce to avoid putting undef/null into elements
+//             let handler: (event: ExtendedChangeEvent<any>) => void | Promise<void>
+//             if ('filter' in props) {
+//                 const filterFunc = props.filter as FilterFuncNumber<any, any>
+//                 handler = async (event: ExtendedChangeEvent<any>) => {
+//                     bindObject[bindKey] = await filterFunc((event.target as Element).value, event)
+//                 }
+//             } else {
+//                 handler = (event: ExtendedChangeEvent<any>) => {
+//                     bindObject[bindKey] = (event.target as Element).value
+//                 }
+//             }
+//             if (eventName in props) {
+//                 props[eventName] = async (event: ExtendedChangeEvent<any>) => {
+//                     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 as BindVariable<any>)
+//         props.checked = checkedValueToBoolean(bindObject[bindKey])
+//         let handler: (event: ExtendedChangeEvent<any>) => void | Promise<void>
+//         if ('filterChecked' in props) {
+//             const filterFunc = props.filterChecked as FilterCheckedFunc<any, any>
+//             handler = async (event: ExtendedChangeEvent<any>) => {
+//                 bindObject[bindKey] = await filterFunc((event.target as HTMLCheckedBindableElement).checked, event)
+//             }
+//         } else {
+//             handler = (event: ExtendedChangeEvent<any>) => {
+//                 bindObject[bindKey] = (event.target as HTMLCheckedBindableElement).checked
+//             }
+//         }
+//         if (eventName in props) {
+//             props[eventName] = async (event: ExtendedChangeEvent<any>) => {
+//                 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 as BindVariable<any>)
+//         props.checked = bindObject[bindKey] === props.value
+//         type EventHandler = (event: ExtendedChangeEvent<any>) => void
+//         const handler: EventHandler = (event: ExtendedChangeEvent<any>) => {
+//             //console.log('bound radio changed 3', (event.target as HTMLCheckedBindableElement).value)
+//             bindObject[bindKey] = (event.target as HTMLCheckedBindableElement).value
+//         }
+//         if (eventName in props) {
+//             props[eventName] = async (event: ExtendedChangeEvent<any>) => {
+//                 await handler(event)
+//                 ;(props[eventName] as EventHandler)(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: string | number): { text: string, textNode: Text } {
+//     const text = String(value)
+//     return {
+//         text,
+//         textNode: document.createTextNode(text)
+//     }
+//     // debug('-createLiteral:', value)
+//     // //const textNode = createTextElement(String(value), domPointer)
+//     // 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: AnyComponent,
+//     instance: Instance,
+//     node: ContentNodeHtml,
+//     //domPointer: DomPointer,
+//     parentNode: ContentNode
+// ) : Promise<TungstenHTMLElement> {
+//     //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 as ExtendableHTMLElement)
+//     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: RenderedContentNode = await createNode({
+//     //     tungstenElement: tungstenElement,
+//     //     instance,
+//     //     newNode: node[$props].children,
+//     //     //domPointer: new DomPointer(htmlEl, htmlEl.childNodes.length), 
+//     //     parentNode: node
+//     // })
+//     return htmlEl as TungstenHTMLElement
+//     // return {
+//     //     ...node,
+//     //     domNode: htmlEl as TungstenHTMLElement, // 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: HTMLElement, attr: string) {
+//     if (attr === 'checked') (htmlElement as HTMLInputElement).checked = false
+//     else htmlElement.removeAttribute(attr)
+// }
+// type Attributes = Record<string, unknown>
+// function addAttributes(node: ContentNodeHtml, domNode: ExtendableHTMLElement): Attributes {
+//     //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] as EventListener
+//             // // 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: [HtmlEvent, HtmlEventName][] = [['onClick', 'click']]
+// function updateAttributes(
+//     node: ContentNodeHtml, oldNode: ContentNodeHtml, domNodeHTMLElement: HTMLElement
+// ) : Attributes {
+//     //console.log('-updateAttributes node', node)
+//     //console.log('domNodeHTMLElement', domNodeHTMLElement)
+//     const domNode = domNodeHTMLElement as TungstenHTMLElement
+//     //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 as undefined | Attributes
+//     //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)] as EventListener)
+//         }
+//     }
+//     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] as EventListener)
+//                 }
+//                 // if its a button without type="submit", prevent default to stop it from submitting forms
+//                 const handler = newAttributes[key] as EventListener
+//                 // 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: ContentNodeHtml): Attributes {
+//     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 as BindVariable<Record<string, unknown>>
+//         // this will overwrite any existing value attr
+//         attributes.value = (bind[0][bind[1]] ?? '') as NodeValue // !!! unsafe, assuming bind variable is a suitable value
+//         // setup on onChange event handler
+//         // this will overwrite any other onChange
+//         if (node[$type] in bindableHtmlElementsString) {
+//             type Element = HTMLBindableElementString
+//             let handler
+//             if ('filter' in attributes) {
+//                 const filterFunc = attributes.filter as FilterFuncString<any, any>
+//                 handler = async (event: Event) => {
+//                     bind[0][bind[1]] = await filterFunc((event.target as Element).value, event)
+//                 }
+//             } else {
+//                 handler = (event: Event) => {
+//                     bind[0][bind[1]] = (event.target as Element).value
+//                 }
+//             }
+//             attributes.onChange = handler
+//         } else if (node[$type] in bindableHtmlElementsNumber) {
+//             type Element = HTMLBindableElementNumber
+//             let handler
+//             if ('filter' in attributes) {
+//                 const filterFunc = attributes.filter as FilterFuncNumber<any, any>
+//                 handler = async (event: Event) => {
+//                     bind[0][bind[1]] = await filterFunc((event.target as Element).value, event)
+//                 }
+//             } else {
+//                 handler = (event: Event) => {
+//                     bind[0][bind[1]] = (event.target as Element).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 as string) + ' ' + (attributes.css as string)).trim()
+//         } else {
+//             attributes.style = attributes.css
+//         }
+//     }
+//     return attributes
+// }
+// type CreateTungstenComponentArgs = {
+//     parent: TungstenElement
+//     instance: Instance,
+//     node: ContentNodeComponentAny,
+//     //domRegion: DomRegion,
+//     //domPointer: DomPointer
+// }
+// export async function createTungstenComponent({ parent, instance, node }: CreateTungstenComponentArgs)
+//     : Promise<TungstenHtmlDomElements> {
+//     debug('-createTungstenComponent')
+//     //debug('domPointer', domPointer.parent, domPointer.index)
+//     if (ContentNodeComponentIsClassComponent(node)) {
+//         return createTungstenClassComponent(parent, instance, node)
+//     } else {
+//         return createTungstenFunctionComponent(parent, instance, node)
+//     }
+//     // need to set a domRegion
+//     // element.__domRegion = domRegion
+// }
+// let cc = 0 // debugging aid
+// async function createTungstenClassComponent(
+//     parent: TungstenElement,
+//     instance: Instance,
+//     node: ContentNodeClassComponentAny,
+//     //domPointer: DomPointer
+// ) : Promise<TungstenHtmlDomElements> {
+//     //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 htmlTree = await createHtmlTree({
+//         tungstenElement: element,
+//         instance,
+//         newNode: content,
+//         //domPointer,
+//         parentNode: null
+//     })
+//     return htmlTree
+//     //const compName = node[$type].name // should take into account other factors // maybe in render too
+//    // const openingComment = createComment({ text: printComponentNamesInSource ? compName : '', domPointer })
+//     // const renderedContent: RenderedContentNode = await createRenderedContentNode({
+//     //     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: TungstenElement,
+//     instance: Instance,
+//     node: ContentNodeFunctionComponentAny,
+//     //domPointer: DomPointer
+// ) : Promise<TungstenHtmlDomElements> {
+//     //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 htmlTree = await createHtmlTree({
+//         tungstenElement: element,
+//         instance,
+//         newNode: content,
+//         //domPointer,
+//         parentNode: null
+//     })
+//     return htmlTree
+//     // const compName = node[$type].name // should take into account other factors // maybe in render too
+//     // const openingComment = createComment({ text: printComponentNamesInSource ? compName : '', domPointer })
+//     // const renderedContent: RenderedContentNode = await createRenderedContentNode({ 
+//     //     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
+//     // }
+// }
+// type UpdateClassComponentArgs = {
+//     parent: AnyComponent
+//     instance: Instance
+//     newNode: ContentNodeClassComponentAny
+//     oldNode: RenderedContentNodeClassComponent
+//     //element: TungstenBaseComponent
+//     domPointer: DomPointer
+// }
+// async function updateClassComponent({ newNode, oldNode, domPointer }: UpdateClassComponentArgs)
+//     : Promise<RenderedContentNodeClassComponent> {
+//     //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
+//     }
+// }
+// type UpdateFunctionComponentArgs = {
+//     parent: AnyComponent
+//     instance: Instance
+//     newNode: ContentNodeFunctionComponentAny
+//     oldNode: RenderedContentNodeFunctionComponent
+//     //element: FunctionComponentStandInAny
+//     domPointer: DomPointer
+// }
+// async function updateFunctionComponent({ newNode, oldNode, domPointer }: UpdateFunctionComponentArgs)
+//     : Promise<RenderedContentNodeFunctionComponent> {
+//     // 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
+//     }
+// }