tungsten 0.1.72 → 0.2.0

package/dist/hydrate/hydrate.js

@@ -1,758 +0,0 @@
-import { integrateElementUpdateVdom } from "../update/integrateUpdateVdom.js";
-//import type { RouteType } from '../routing/RouteType.js'
-import { $number, $string, makeRenderedContentNodeNonRendered, makeRenderedContentNodeClassComponent, makeRenderedContentNodeFunctionComponent } from "../RenderedContentNode.js";
-import { ContentNodeElementIsHtml, ContentNodeIsHtml, ContentNodeIsComponent, ContentNodeComponentIsClassComponent, ContentNodeIsElement } from "../ContentNode.js";
-import { IsHTMLElement } from "../DomNodes.js";
-import { DomPointer } from "../DomPointer.js";
-import { DomRegion } from "../DomRegion.js";
-//import { FunctionComponent } from '../FunctionComponent.js'
-import { FunctionElement } from "../FunctionComponentStandIn.js";
-import { getContentFromFunctionComponent } from "../getContentFromFunctionComponent.js";
-import { StringIsHtmlEvent, htmlEvents } from "../htmlEvents.js";
-import { TungstenStatefulComponent } from "../Components.js";
-import { TungstenError } from "../TungstenError.js";
-import { Instance } from "../Instance/Instance.js";
-import { validChildren } from "../validChildren.js";
-import { setCurrentComponent } from "../hooks/setCurrentComponent.js";
-import { clearCurrentComponent } from "../hooks/clearCurrentComponent.js";
-import { htmlEventHandlerKey } from "../htmlEventHandlerKey.js";
-import { packageNameCapitalized } from "../settings.js";
-import { todo } from "../todo.js";
-import { throwError } from "../throwError.js";
-import { $contentNull } from "../symbols.js";
-import { $props, $routeData, $routeParams, $type } from "../contentNodeSymbols.js";
-import { bindableHtmlElementsNumber, bindableHtmlElementsString } from "../components/bindable/bindableHtmlElements.js";
-import { checkedValueToBoolean } from "../checkedValueToBoolean.js";
-import { Default404 } from "../routing/Default404.js";
-import { initStores } from 'tungsten/Servers/initStores.js';
-import { MatchedRoute } from "../routing/MatchedRoute.js";
-import { jsx as _jsx } from "tungsten/jsxRuntime.js";
-function debug(...texts) {
-  //console.log(...texts)
-  //console.log(getStackTrace().split('\n')[2])
-}
-function makeDefaultHydrateMeta() {
-  return {
-    insideForm: false
-  };
-} // can we opto this out in production?
-export async function hydrate(appRoutes, RootComponent, instanceConfig) {
-  debug('hydrate start');
-  //console.log('hydration global data ', __tungsten_global_data__)
-  const location = window.location.pathname;
-  const routes = typeof appRoutes === 'function' ? appRoutes(null) : appRoutes;
-  const matchedRouteInfo = hydrationRouting(__tungsten_matched_route_info__, routes);
-  const globalData = __tungsten_global_data__;
-  const {
-    internalStore,
-    stores,
-    storeSubscriptions
-  } = initStores(location, null, globalData, matchedRouteInfo);
-  // const internalStore: TrueStore<InternalStoreSchema> = makeStore(new InternalStoreSchema(location))
-  // //store: Store
-  // const    stores: TrueStore<any>[] = createStores(null, matchedRouteInfo, globalData)
-  //console.log('hydration instance config', instanceConfig)
-  const instance = new Instance(location, instanceConfig, null, appRoutes, routes, internalStore, stores, storeSubscriptions, globalData, matchedRouteInfo);
-  //const routes = instance.getRoutes()
-  // we know which route was matched
-  // if (typeof __tungsten_router_data__ !== 'undefined') {
-  //     instance.routerData = __tungsten_router_data__
-  // }
-  // save the route data
-  if (typeof __tungsten_route_data__ !== 'undefined') {
-    instance.routeData = __tungsten_route_data__;
-  }
-  const domPointer = new DomPointer(document, 1);
-  const meta = makeDefaultHydrateMeta();
-  if (RootComponent !== null) {
-    await hydrateRootComponent(instance, RootComponent, domPointer, meta); // dom pointer at html?
-    // FUTURE: await hydrateNode(content, element, domPointer, instance, meta)
-  } else {
-    await hydrateRootComponent(instance, MatchedRoute, domPointer, meta); // dom pointer at html?
-    // const { params, content: contentOrContentFunction, data } = matchedRouteInfo
-    // const content = (typeof contentOrContentFunction === 'function')
-    //     ? contentOrContentFunction(data, params, {}, globalData, location)
-    //     : contentOrContentFunction
-    // console.log('hydration content:', content)
-    // hydrateNode(content, null, domPointer, instance, meta)
-  }
-  instance.hydrationComplete = true;
-  //// Can components update while hydrating is still taking place
-  //// -- probably yes
-  //// Can we pause any further update until hydration completes, to retain coherency?
-  //// Or should we set a value on each component that is hydrating to guarantee correctness? seems better
-}
-function hydrationRouting(matchedRouteInfo,
-//location: string,
-routes) {
-  const {
-    key
-  } = matchedRouteInfo;
-  if (key !== null) {
-    if (!(key in routes)) throwError('hydrationRouting', `Route ${key} not found in routes ${routes}`);
-    const content = routes[key].content; // eslint-disable-line no-type-assertion/no-type-assertion -- we just checked
-    return {
-      ...matchedRouteInfo,
-      content
-    };
-  } else {
-    return {
-      ...matchedRouteInfo,
-      content: _jsx(Default404, {})
-    };
-  }
-}
-async function hydrateRootComponent(instance, RootComponent, domPointer, meta) {
-  debug('hydrateRootComponent');
-  const element = new RootComponent({
-    props: {},
-    routeParams: undefined,
-    routeData: undefined,
-    instance,
-    parentElement: null
-  });
-  await element.__init();
-  handleRootTitle(element);
-  const content = await element.__styledContent();
-  //processRootContent(content)
-  const domIndexStart = domPointer.index;
-  const openingNode = domPointer.get();
-  if (openingNode.nodeType !== Node.COMMENT_NODE) {
-    throwError('hydrateFunctionComponent', 'expected to find a comment, but instead found ' + openingNode.toString() + ' type ' + openingNode.nodeType.toString());
-  }
-  //const openingComment = openingNode as Comment // eslint-disable-line no-type-assertion/no-type-assertion
-  domPointer.increment();
-  const renderedTree = await hydrateNode(content, element, domPointer, instance, meta);
-  debug('rendered tree after hydration', renderedTree);
-  const closingNode = domPointer.get();
-  if (closingNode.nodeType !== Node.COMMENT_NODE) {
-    throwError('hydrateFunctionComponent', 'expected to find a comment, but instead found ' + closingNode.toString() + ' type ' + closingNode.nodeType.toString());
-  }
-  //const closingComment = closingNode as Comment // eslint-disable-line no-type-assertion/no-type-assertion
-  domPointer.increment();
-  const domIndexCount = domPointer.index - domIndexStart;
-  element.__domRegion = new DomRegion(domPointer.parent, domIndexStart, domIndexCount);
-  element.__currentContent = renderedTree;
-  // makeRenderedContentNodeClassComponent(
-  //     {
-  //         [$type]: RootComponent,
-  //         [$props]: {}
-  //     },
-  //     element,
-  //     openingComment,
-  //     closingComment
-  // )
-  element.__didHydrate();
-}
-// if the root comp has a title, save it as the default title to use after navigation in the instance
-function handleRootTitle(rootElement) {
-  if (typeof rootElement.title === 'undefined') return;
-  if (typeof rootElement.title === 'function') {
-    if (rootElement instanceof TungstenStatefulComponent) {
-      rootElement.__instance.setDefaultTitle(rootElement.title(rootElement.props, rootElement.state).toString());
-    } else {
-      rootElement.__instance.setDefaultTitle(rootElement.title(rootElement.props, undefined).toString());
-    }
-  } else {
-    rootElement.__instance.setDefaultTitle(rootElement.title.toString());
-  }
-}
-async function hydrateClassComponent(node, parentElement, domPointer, instance, meta) {
-  debug('----\nhydrateComponent');
-  const {
-    [$type]: Component,
-    [$props]: props,
-    [$routeParams]: routeParams,
-    [$routeData]: routeData
-  } = node;
-  debug('Component', Component);
-  debug('domPointer', domPointer, domPointer.index);
-  const domIndexStart = domPointer.index;
-  const openingNode = domPointer.get();
-  if (openingNode.nodeType !== Node.COMMENT_NODE) {
-    throwError('hydrateFunctionComponent', 'expected to find a comment, but instead found ' + openingNode.toString() + ' type ' + openingNode.nodeType.toString());
-  }
-  const openingComment = openingNode; // eslint-disable-line no-type-assertion/no-type-assertion
-  domPointer.increment();
-  //// InstantiateClassComponent???
-  const element = new Component({
-    props,
-    routeParams,
-    routeData,
-    instance,
-    parentElement
-  });
-  await element.__init();
-  //// Add to parent childNodes?
-  //const content = await element.__styledContent()
-  const initialContent = await element.__initialContent();
-  debug('content', initialContent);
-  const render = Component.render;
-  //console.log('render', render)
-  //console.log('Component', Component)
-  if (render) {
-    const placeholderContent = typeof render === 'object' ? render.placeholder : null;
-    //console.log('hydrating content', placeholderContent)
-    const renderedPlaceholderContent = await hydrateNode(placeholderContent, element, domPointer, instance, meta);
-    /*
-    1. Init Element
-    2. Find existing nodes (opening comment, use meta to get closing comment)
-    3. Create DOM Region
-    4. Assign DOM Region to element
-    5. Hydrate the current content to get a renderedContentTree
-    6. Assign current content to element
-    7. Get initial content
-    8. integrateUpdate with new content
-    9. set DomPointer to end?
-    10. Return a rendered content node?
-    */
-    const closingNode = domPointer.get();
-    if (closingNode.nodeType !== Node.COMMENT_NODE) {
-      throwError('hydrateFunctionComponent', 'expected to find a comment, but instead found ' + closingNode.toString() + ' type ' + closingNode.nodeType.toString());
-    }
-    const closingComment = closingNode; // eslint-disable-line no-type-assertion/no-type-assertion
-    domPointer.increment();
-    const domIndexCount = domPointer.index - domIndexStart;
-    debug('DOM region', domPointer.parent, domIndexStart, domIndexCount);
-    element.__domRegion = new DomRegion(domPointer.parent, domIndexStart, domIndexCount);
-    debug('el dom region', element.constructor.name, element.__domRegion);
-    if (element.__domRegion.lastElement) debug('last el children', element.__domRegion.lastElement.childNodes);
-    //console.log('hydrated', element.constructor.name, 'with content', renderedContent)
-    element.__currentContent = renderedPlaceholderContent;
-    console.log('client side comp is initializing with', initialContent);
-    const updateResult = await integrateElementUpdateVdom(element, initialContent);
-    element.__currentContent = updateResult.renderedContent;
-    element.__didHydrate();
-    return makeRenderedContentNodeClassComponent(node, element, openingComment, closingComment);
-  } else {
-    const renderedContent = await hydrateNode(initialContent, element, domPointer, instance, meta);
-    const closingNode = domPointer.get();
-    if (closingNode.nodeType !== Node.COMMENT_NODE) {
-      throwError('hydrateFunctionComponent', 'expected to find a comment, but instead found ' + closingNode.toString() + ' type ' + closingNode.nodeType.toString());
-    }
-    const closingComment = closingNode; // eslint-disable-line no-type-assertion/no-type-assertion
-    domPointer.increment();
-    const domIndexCount = domPointer.index - domIndexStart;
-    debug('DOM region', domPointer.parent, domIndexStart, domIndexCount);
-    element.__domRegion = new DomRegion(domPointer.parent, domIndexStart, domIndexCount);
-    debug('el dom region', element.constructor.name, element.__domRegion);
-    if (element.__domRegion.lastElement) debug('last el children', element.__domRegion.lastElement.childNodes);
-    //console.log('hydrated', element.constructor.name, 'with content', renderedContent)
-    element.__currentContent = renderedContent;
-    element.__didHydrate();
-    return makeRenderedContentNodeClassComponent(node, element, openingComment, closingComment);
-  }
-}
-async function renderClassComponent({
-  node,
-  element,
-  domPointer,
-  openingComment,
-  closingComment
-}) {
-  //console.log('-updateClassComponent', newNode)
-  //const element = node.element
-  element.props = node[$props];
-  debug('rendering client class component', node);
-  //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(); // this going to run code on a Tungsten Base Component class
-  // which is going to call back to integrateUpdateVdom in this file
-  domPointer.increment(updateResult.nodesLength); // bump the dom pointer index forward by the number of nodes
-  // within that element's content
-  element.__didUpdate();
-  return {
-    ...node,
-    element,
-    openingComment,
-    closingComment
-  };
-}
-async function renderFunctionComponent({
-  node,
-  standIn,
-  domPointer,
-  openingComment,
-  closingComment
-}) {
-  // this func does not seem to be updating the dom pointer index
-  //console.log('updateFunctionComponent')
-  //const standIn = node.element
-  standIn.props = node[$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 {
-    ...node,
-    element: standIn,
-    openingComment,
-    closingComment
-  };
-}
-async function hydrateFunctionComponent(node, parentElement, domPointer, instance, meta) {
-  debug('----\nhydrateComponent');
-  const {
-    [$type]: Component,
-    [$props]: props,
-    [$routeParams]: routeParams,
-    [$routeData]: routeData
-  } = node;
-  debug('Component', Component);
-  debug('domPointer', domPointer, domPointer.index);
-  //// InstantiateFunctionComponent???
-  const functionComponentStandIn = new FunctionElement(Component, props, routeParams, routeData, instance, parentElement);
-  setCurrentComponent(functionComponentStandIn);
-  const content = await getContentFromFunctionComponent(functionComponentStandIn);
-  //const content = await getContentFromFunctionComponent(Component, props)
-  clearCurrentComponent();
-  //// Add to parent childNodes?
-  const domIndexStart = domPointer.index;
-  const openingNode = domPointer.get();
-  if (openingNode.nodeType !== Node.COMMENT_NODE) {
-    throwError('hydrateFunctionComponent', 'expected to find a comment, but instead found ' + openingNode.toString() + ' type ' + openingNode.nodeType.toString());
-  }
-  const openingComment = openingNode; // eslint-disable-line no-type-assertion/no-type-assertion
-  domPointer.increment();
-  const renderedTree = await hydrateNode(content, functionComponentStandIn, domPointer, instance, meta);
-  const closingNode = domPointer.get();
-  if (closingNode.nodeType !== Node.COMMENT_NODE) {
-    throwError('hydrateFunctionComponent', 'expected to find a comment, but instead found ' + closingNode.toString() + ' type ' + closingNode.nodeType.toString());
-  }
-  const closingComment = closingNode; // eslint-disable-line no-type-assertion/no-type-assertion
-  domPointer.increment();
-  const domIndexCount = domPointer.index - domIndexStart;
-  functionComponentStandIn.__domRegion = new DomRegion(domPointer.parent, domIndexStart, domIndexCount);
-  functionComponentStandIn.__currentContent = renderedTree;
-  //return functionComponentStandIn 
-  return makeRenderedContentNodeFunctionComponent(node, functionComponentStandIn, openingComment, closingComment);
-}
-//// why don't we have html, nodes in here?
-async function hydrateNode(node, parentElement, domPointer, instance, meta) {
-  debug('hydrateNode');
-  if (Array.isArray(node)) {
-    const renderedChildren = [];
-    for (const arrayNode of node) {
-      //const renderedNode = await hydrateNodeSingle(arrayNode, parentElement, domPointer, instance)
-      const renderedNode = await hydrateNode(arrayNode, parentElement, domPointer, instance, meta);
-      renderedChildren.push(renderedNode);
-    }
-    return renderedChildren;
-  } else {
-    return hydrateNodeSingle(node, parentElement, domPointer, instance, meta);
-  }
-}
-//// why don't we have html, nodes in here?
-async function hydrateNodeSingle(node, parentElement, domPointer, instance, meta) {
-  debug('----hydrateNodeSingle');
-  debug('node', `(${typeof node})`, typeof node === 'string' ? `"${node}"` : node);
-  if (ContentNodeIsElement(node)) {
-    node;
-    debug('node.type', node[$type]);
-  }
-  debug('domPointer', domPointer, domPointer.index);
-  debug('domNode', domPointer.get());
-  if (node === undefined || node === null || node === false || node === true) {
-    debug('NonRendered');
-    return makeRenderedContentNodeNonRendered(); //n false // indicate that we did not render to that DOM node, so the DOM node is passed to the next framework node
-  }
-  if (typeof node === 'string' || typeof node === 'number') {
-    debug('literal');
-    if (node === '') return makeRenderedContentNodeNonRendered(); // empty strings won't produce nodes in the source to hydrate
-    debug('string/number node');
-    debug('domPointer.index', domPointer.index);
-    debug('domPointer.parent.childNodes[domPointer.index -1]', domPointer.parent.childNodes[domPointer.index - 1]);
-    debug('domPointer.parent.childNodes', domPointer.parent.childNodes);
-    debug('Text instance', domPointer.parent.childNodes[domPointer.index - 1] instanceof Text);
-    //throw new Error
-    // if does not have preceeding text node
-    if (domPointer.index === 0 || !(domPointer.parent.childNodes[domPointer.index - 1] instanceof Text)) {
-      // first text node
-      // replace the original with the new one, which may only be part of the text
-      domPointer.parent.removeChild(domPointer.get()); // !!! this is the only difference
-    } else {
-      // additional text node
-      // create a new text node after the previous
-    }
-    const textNode = document.createTextNode(node.toString());
-    if (domPointer.parent.childNodes.length === domPointer.index) {
-      //if (domPointer.get() === 'undefined') {
-      domPointer.parent.appendChild(textNode);
-    } else {
-      domPointer.parent.insertBefore(textNode, domPointer.get());
-    }
-    domPointer.increment(); // move the index forward, because we just inserted a node
-    // increasing the position of the next node
-    switch (typeof node) {
-      case 'string':
-        {
-          return {
-            [$type]: $string,
-            value: node,
-            domNode: textNode
-          };
-        }
-      case 'number':
-        {
-          return {
-            [$type]: $number,
-            value: node,
-            domNode: textNode
-          };
-        }
-    }
-  }
-  debug(node, node[$type], typeof node[$type], node[$type] === 'head');
-  if (node[$type] === 'head') {
-    const node = domPointer.get();
-    if (node.nodeType !== 1 || node.nodeName.toLocaleLowerCase() !== 'head') {
-      throwError('hydrateNodeSingle', `expected to find a head node, instead found nodeType ${node.nodeType}, nodeName ${node.nodeName}`);
-    }
-    // collect persistent head nodes
-    const persistentHeadChildren = [];
-    const domChildren = node.childNodes;
-    for (const child of domChildren) {
-      if (child.nodeType === 1) {
-        const el = child;
-        if (el.hasAttribute('data--t-persist')) {
-          persistentHeadChildren.push(el.cloneNode(true));
-        }
-      }
-    }
-    //const domChildrenPointer = new DomPointer(node as HTMLHeadElement)
-    instance.persistentHeadChildren = persistentHeadChildren;
-    debug('head node - skipping, because we add a lot to this during initial render, breaking matching');
-    domPointer.increment();
-    //return { [$type]: $head, domNode: node as HTMLElement } // eslint-disable-line no-type-assertion/no-type-assertion
-    return {
-      [$type]: 'head',
-      domNode: node
-    }; // eslint-disable-line no-type-assertion/no-type-assertion
-  }
-  if (ContentNodeIsHtml(node)) {
-    // HTML el
-    debug('html');
-    // mark that we are now inside a form element
-    // chrome will strip out forms within forms, causing hydration errors
-    // so we will alert the developer if this scenario occurs
-    if (node[$type] === 'form') {
-      debug('FOUND A FORM', meta.insideForm);
-      if (meta.insideForm) {
-        throwError('hydrateNodeSingle', 'tried to hydrate a <form> within another <form>. Forms are not allowed within forms.' + 'Browsers may strip out inner forms.');
-      }
-      meta.insideForm = true;
-    }
-    const domNode = domPointer.get();
-    if (!IsHTMLElement(domNode)) {
-      debug('ERR');
-      debug('domPointer.parent', domPointer.parent);
-      debug('domPointer.index', domPointer.index);
-      debug('domPointer.parent.childNodes', [...domPointer.parent.childNodes]);
-      debug('domNode', domNode);
-      debug('expected:', node[$type]);
-      throw new TungstenError(`${packageNameCapitalized} hydrateNode() error` + ` - DOM node at position where HTML element was expected is not an HTMLElement.` + ` Found: ${domNode}`);
-    }
-    debug('domNode', domNode);
-    if (domNode.tagName.toLowerCase() !== node[$type]) {
-      debug('mismatched html el type');
-      throw new TungstenError(`${packageNameCapitalized} hydrateNode() error` + ` - existing DOM node tagName does not match expected tag name.` + ` Expected <${node[$type]}>, found <${domNode.tagName.toLowerCase()}>.`);
-    }
-    debug('save refs');
-    // if (node[$props].ref) {
-    //     node[$props].ref.current = domNode
-    // }
-    debug('hydarating atts');
-    hydrateAttributes(node, domNode);
-    //!!! node.domElement = domNode
-    // look up any refs
-    //const props = node[$props]
-    //const ref = node[$props].ref
-    if ('ref' in node[$props]) {
-      node[$props].ref.current = domNode;
-    }
-    debug('valid children', validChildren(node[$props].children), node[$props].children);
-    const children = node[$props].children;
-    let renderedChildren = $contentNull;
-    if (validChildren(children)) {
-      debug('node.props.children', children);
-      const childDomPointer = new DomPointer(domNode);
-      renderedChildren = await hydrateNode(children, parentElement, childDomPointer, instance, meta);
-    }
-    // note that we have left the form
-    if (node[$type] === 'form') meta.insideForm = false;
-    domPointer.increment();
-    // returned RenderedContentNode with a ref to the DOM node
-    return {
-      ...node,
-      domNode: domNode,
-      renderedChildren
-    };
-  } else if (ContentNodeIsComponent(node)) {
-    debug('comp');
-    return hydrateNodeComponent(node, parentElement, domPointer, instance, meta);
-  }
-  // confirm that this code is not reached
-  const n = node; // eslint-disable-line @typescript-eslint/no-unused-vars
-  throwError('hydrateNodeSingle', `should never occur ${JSON.stringify(node)}`);
-  // TS shouldn't require this, because this code will never run, but it is bitching without it
-  //return makeRenderedContentNodeNonRendered()
-}
-//// !!!! We need to handle bind here (or somewhere)
-async function hydrateNodeComponent(node, parentElement, domPointer, instance, meta) {
-  if (ContentNodeComponentIsClassComponent(node)) {
-    node;
-    /// Component?
-    debug('found a class component while trying to hydrate');
-    const renderedNode = await hydrateClassComponent(node, parentElement, domPointer, instance, meta);
-    return renderedNode;
-  } else {
-    node;
-    /// Component?
-    debug('found a function component while trying to hydrate');
-    const renderedNode = await hydrateFunctionComponent(node, parentElement, domPointer, instance, meta);
-    return renderedNode;
-  }
-}
-// export type HTMLBindableElement = HTMLButtonElement | HTMLDataElement | HTMLInputElement | HTMLLIElement
-// | HTMLMeterElement | HTMLOptionElement | HTMLParamElement | HTMLProgressElement | HTMLSelectElement | HTMLTextAreaElement
-function hydrateAttributes(node, domNode) {
-  // !!! We should check whether attributes match here
-  // Show errors in dev mode
-  // Auto fix in prod?
-  // handle bind attributes and merge together event handlers
-  processAttributes(node);
-  debug('--\nhydrateAttributes', domNode);
-  for (const key in node[$props]) {
-    if (StringIsHtmlEvent(key)) {
-      debug(`adding ${key} event handler for`, node);
-      debug('domNode', domNode);
-      const eventName = htmlEvents[key];
-      //domNode.addEventListener(eventName as keyof HTMLElementEventMap, eventListener)
-      todo('addAttributes() warning - ensure type safety of event name'); // 
-      todo('addAttributes() warning - ensure type safety of event listener'); //
-      const handler = node[$props][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 (node[$props][key] as EventListener)(event) } 
-      //     : node[$props][key] as EventListener
-      domNode.addEventListener(eventName, handler);
-      domNode[htmlEventHandlerKey(eventName)] = handler;
-    } else if (key === 'bind' && ContentNodeElementIsHtml(node)) {
-      const eventName = 'input';
-      if (node[$type] in bindableHtmlElementsString) {
-        debug('binding');
-        const [bindObject, bindKey] = node[$props][key];
-        domNode.value = bindObject[bindKey] ?? ''; // nullish coalesce to avoid putting undef/null into elements
-        let handler;
-        if ('filter' in node[$props]) {
-          const filterFunc = node[$props].filter;
-          handler = async event => {
-            bindObject[bindKey] = await filterFunc(event.target.value, event);
-          };
-        } else {
-          handler = event => {
-            bindObject[bindKey] = event.target.value;
-          };
-        }
-        domNode['oninput'] = handler;
-        //domNode.addEventListener(eventName, handler)
-        domNode[htmlEventHandlerKey(eventName)] = handler;
-      } else if (node[$type] in bindableHtmlElementsNumber) {
-        debug('binding');
-        const [bindObject, bindKey] = node[$props][key];
-        domNode.value = bindObject[bindKey] ?? ''; // nullish coalesce to avoid putting undef/null into elements
-        let handler;
-        if ('filter' in node[$props]) {
-          const filterFunc = node[$props].filter;
-          handler = async event => {
-            bindObject[bindKey] = await filterFunc(event.target.value, event);
-          };
-        } else {
-          handler = event => {
-            bindObject[bindKey] = event.target.value;
-          };
-        }
-        domNode['oninput'] = handler;
-        //domNode.addEventListener(eventName, handler)
-        domNode[htmlEventHandlerKey(eventName)] = handler;
-      }
-    } else if (key === 'bindChecked' && ContentNodeElementIsHtml(node)) {
-      // not checking that el is bindable, don't think its necessary
-      debug('binding checked');
-      const [bindObject, bindKey] = node[$props][key]; // eslint-disable-line no-type-assertion/no-type-assertion
-      domNode.checked = bindObject[bindKey];
-      const eventName = 'input';
-      //let handler
-      // if ('filterChecked' in node[$props]) {
-      //     const filterFunc = node[$props].filterChecked as FilterCheckedFunc<any, any>
-      //     handler = async (event: Event) => {
-      //         bindObject[bindKey] = await filterFunc((event.target as HTMLCheckedBindableElement).checked, event)
-      //     }
-      // } else {
-      const handler = event => {
-        bindObject[bindKey] = event.target.checked; // eslint-disable-line no-type-assertion/no-type-assertion
-      };
-      //}
-      domNode.addEventListener(eventName, handler);
-      domNode[htmlEventHandlerKey(eventName)] = handler;
-      domNode['oninput'] = handler;
-      //domNode.addEventListener(eventName, handler)
-      domNode[htmlEventHandlerKey(eventName)] = handler;
-    } else if (key === 'bindRadio' && ContentNodeElementIsHtml(node)) {
-      // not checking that el is bindable, don't think its necessary
-      debug('binding radio');
-      const [bindObject, bindKey] = node[$props][key]; // eslint-disable-line no-type-assertion/no-type-assertion
-      domNode.checked = node[$props].value === bindObject[bindKey];
-      const eventName = 'change';
-      //let handler
-      // if ('filter' in node[$props]) {
-      //     const filterFunc = node[$props].filter as FilterCheckedFunc<any, any> // eslint-disable-line no-type-assertion/no-type-assertion
-      //     handler = async (event: HTMLElementEventMap['change']) => {
-      //         console.log('radio changed handler')
-      //         bindObject[bindKey] = await filterFunc((event.target as HTMLCheckedBindableElement).checked, event) // eslint-disable-line no-type-assertion/no-type-assertion
-      //     }
-      // } else {
-      const handler = event => {
-        console.log('bound radio changed 1');
-        bindObject[bindKey] = event.target.value; // eslint-disable-line no-type-assertion/no-type-assertion
-      };
-      //}
-      // eslint-disable-next-line no-type-assertion/no-type-assertion
-      domNode.addEventListener(eventName, handler);
-      domNode['onchange'] = handler;
-      domNode[htmlEventHandlerKey(eventName)] = handler;
-    }
-  }
-  debug('--');
-}
-// onChange -> add
-//
-// This process some details related to binding.
-// Bind (value) is using onInput
-// if an onInput handler exists, we combine the two, running the binding and filtering before the onInput
-// Bind (checked) is using onChange
-// if an onChange handler exists, we combine the two, running the binding and filtering before the onChange
-// If we were to have 2 separate bindings using the same event, the system should work to marge all event handlers together
-// the execution order of the bind events would probably match the order of the props
-function processAttributes(node) {
-  const props = node[$props];
-  debug('--\nprocessAttributes', node);
-  for (const key in node[$props]) {
-    if (key === 'bind' && ContentNodeElementIsHtml(node)) {
-      const eventName = 'onInput';
-      if (node[$type] in bindableHtmlElementsString) {
-        debug('binding');
-        const [bindObject, bindKey] = props[key];
-        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;
-        }
-        //domNode['on' + eventName] = handler
-        ////domNode.addEventListener(eventName, handler)
-        //domNode[htmlEventHandlerKey(eventName)] = handler
-      } else if (node[$type] in bindableHtmlElementsNumber) {
-        debug('binding');
-        const [bindObject, bindKey] = node[$props][key];
-        props.value = bindObject[bindKey] ?? ''; // nullish coalesce to avoid putting undef/null into elements
-        let handler;
-        if ('filter' in node[$props]) {
-          const filterFunc = node[$props].filter;
-          handler = async event => {
-            bindObject[bindKey] = await filterFunc(event.target.value, event);
-          };
-        } else {
-          handler = event => {
-            bindObject[bindKey] = event.target.value;
-          };
-        }
-        if (eventName in node[$props]) {
-          node[$props][eventName] = async event => {
-            await handler(event);
-            node[$props][eventName];
-          };
-        } else {
-          node[$props][eventName] = handler;
-        }
-        //domNode['oninput'] = handler
-        ////domNode.addEventListener(eventName, handler)
-        //domNode[htmlEventHandlerKey(eventName)] = handler
-      }
-      delete props.bind;
-      delete props.filter;
-    } else if (key === 'bindChecked' && ContentNodeElementIsHtml(node)) {
-      // not checking that el is bindable, don't think its necessary
-      debug('binding checked');
-      const eventName = 'onChange';
-      const [bindObject, bindKey] = props[key];
-      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](event);
-        };
-      } else {
-        props[eventName] = handler;
-      }
-      // domNode.addEventListener(eventName, handler)
-      // domNode[htmlEventHandlerKey(eventName)] = handler
-      // domNode['oninput'] = handler
-      // //domNode.addEventListener(eventName, handler)
-      // domNode[htmlEventHandlerKey(eventName)] = handler
-      delete props.bindChecked;
-      delete props.filterChecked;
-    } else if (key === 'bindRadio' && ContentNodeElementIsHtml(node)) {
-      // not checking that el is bindable, don't think its necessary
-      debug('binding radio');
-      const eventName = 'onChange';
-      const [bindObject, bindKey] = props[key];
-      props.checked = bindObject[bindKey] === node[$props].value;
-      const handler = event => {
-        //console.log('bound radio changed 2')
-        bindObject[bindKey] = event.target.value;
-      };
-      if (eventName in props) {
-        props[eventName] = async event => {
-          await handler(event);
-          props[eventName](event);
-        };
-      } else {
-        props[eventName] = handler;
-      }
-      // domNode.addEventListener(eventName, handler)
-      // domNode[htmlEventHandlerKey(eventName)] = handler
-      // domNode['oninput'] = handler
-      // //domNode.addEventListener(eventName, handler)
-      // domNode[htmlEventHandlerKey(eventName)] = handler
-      delete props.bindRadio;
-    }
-  }
-  debug('--');
-}