tungsten 0.2.1 → 0.2.3

package/dist/hydrate/hydrate.js

@@ -0,0 +1,803 @@
+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 { isDev } from "../isDev.js";
+import { warn } from "../appOutput.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 !== undefined) {
+    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
+    const props = node[$props];
+    if (node[$type] === 'textarea') {
+      if ('value' in props) {
+        if (props.children !== undefined && !(Array.isArray(node[$props].children) && node[$props].children.length === 0)) {
+          if (isDev) {
+            warn('textarea element has both value attribute and children, children will be ignored.');
+          }
+        }
+        //if (props.value !== undefined)
+        props.children = props.value;
+        delete props.value;
+      }
+    }
+    /// !!! TODO
+    // 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'
+    //             }
+    //         }
+    //     }
+    // }
+    // 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 (node[$props].__opaque !== true && validChildren(children)) {
+      debug('node.props.children', children);
+      const childDomPointer = new DomPointer(domNode);
+      renderedChildren = await hydrateNode(children, parentElement, childDomPointer, instance, meta);
+    }
+    if (node[$type] === 'select' && node[$props].value !== undefined && node[$props].value !== null) {
+      const options = domNode.options;
+      const value = String(node[$props].value);
+      for (let i = options.length - 1; i >= 0; i--) {
+        const option = options[i];
+        if (option.value === value) {
+          option.selected = true;
+          break;
+        }
+      }
+    }
+    // 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;
+    }
+  }
+  if (node[$type] === 'option') {
+    const option = domNode;
+    const select = option.closest('select');
+    if (select !== null && select.hasAttribute('value') && select.getAttribute('value') === option.value) {
+      option.selected = true;
+    }
+  }
+  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('--');
+}