tungsten 0.1.7 → 0.1.24

package/dist/hydrate/hydrate.js

@@ -0,0 +1,592 @@
+import { $head, $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 { jsx as _jsx } from "tungsten/jsxRuntime.js";
+function debug(...texts) {
+  //console.log(...texts)
+  //console.log(getStackTrace().split('\n')[2])
+}
+function makeDfaultHydrateMeta() {
+  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__, location, 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__;
+  }
+  //await hydrateRootComponent( instance, RootComponent, new DomPointer(document, 0) ) // dom pointer at doctype?
+  await hydrateRootComponent(instance, RootComponent, new DomPointer(document, 1), makeDfaultHydrateMeta()); // dom pointer at html?
+  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, 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,
+    parentComponent: 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);
+  //// InstantiateClassComponent???
+  const element = new Component({
+    props,
+    routeParams,
+    routeData,
+    instance,
+    parentComponent: parentElement
+  });
+  await element.__init();
+  //// Add to parent childNodes?
+  //const content = await element.__styledContent()
+  const content = await element.__initialContent();
+  debug('content', 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; // eslint-disable-line no-type-assertion/no-type-assertion
+  domPointer.increment();
+  const renderedContent = await hydrateNode(content, 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 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}`);
+    }
+    debug('head node - skipping, because we add a lot to this during initial render, breaking matching');
+    domPointer.increment();
+    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
+    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');
+    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;
+      // return {
+      //     ...node,
+      //     element
+      // }
+    } else {
+      node;
+      /// Component?
+      debug('found a function component while trying to hydrate');
+      const renderedNode = await hydrateFunctionComponent(node, parentElement, domPointer, instance, meta);
+      return renderedNode;
+      // return {
+      //     ...node,
+      //     element
+      // }
+    }
+  }
+  // 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)
+// 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];
+      domNode.checked = bindObject[bindKey]; // nullish coalesce to avoid putting undef/null into elements
+      const eventName = 'input';
+      let handler;
+      if ('filterChecked' in node[$props]) {
+        const filterFunc = node[$props].filterChecked;
+        handler = async event => {
+          bindObject[bindKey] = await filterFunc(event.target.checked, event);
+        };
+      } else {
+        handler = event => {
+          bindObject[bindKey] = event.target.checked;
+        };
+      }
+      domNode.addEventListener(eventName, handler);
+      domNode[htmlEventHandlerKey(eventName)] = handler;
+      domNode['oninput'] = handler;
+      //domNode.addEventListener(eventName, 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];
+        };
+      } 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;
+    }
+  }
+  debug('--');
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './indexInner.js';
+export * as default from './indexInner.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./indexInner.js";
+export * as default from "./indexInner.js"; // I can't remember why I did this

package/dist/indexInner.d.ts

@@ -0,0 +1,68 @@
+export { TungstenSimpleComponent, TungstenSimpleComponent as SimpleComponent, // static component
+TungstenStatefulComponent, TungstenStatefulComponent as StatefulComponent, // stateful component
+TungstenBaseSimpleStoreComponent, TungstenBaseSimpleStoreComponent as BaseSimpleStoreComponent, TungstenBaseStatefulStoreComponent, TungstenBaseStatefulStoreComponent as BaseStatefulStoreComponent, } from './Components.jsx';
+export * from './alive.js';
+export * from './appOutput.js';
+export * from './AssignedStyle.js';
+export * from './components/Await.js';
+export * from './components/bindable/BindableCheckbox.jsx';
+export * from './components/bindable/BindableInput.jsx';
+export * from './components/bindable/BindableInputTyped.jsx';
+export * from './components/bindable/BindableSelect.jsx';
+export * from './components/bindable/BindableTextarea.jsx';
+export * from './browserStorage.js';
+export { createElement } from './createElement.js';
+export * from './createRef.js';
+export { foreach } from './foreach.js';
+export * from './helpers/index.js';
+export * from './hooks/index.js';
+export * from './hydrate/hydrate.js';
+export * from './components/GoToComponent.jsx';
+export * from './jsxRuntime.js';
+export * from './env/parseEnv.js';
+export * from './makeServerRpc.js';
+export { isBrowser } from './isBrowser.js';
+export { isClient } from './isClient.js';
+export { isServer } from './isServer.js';
+export { isDev } from './isDev.js';
+export { isProd } from './isProd.js';
+export * from './components/Lazy.js';
+export * from './components/Link.jsx';
+export { logAndReturn } from './logAndReturn.js';
+export * from './requests/index.js';
+export { registerGlobalData, type GlobalData, type GlobalDataFunction } from './routing/registerGlobalData.js';
+export * from './routing/MatchedRoute.jsx';
+export * from './routing/Route.jsx';
+export * from './routing/Router.js';
+export * from './routing/RouteContentFunction.js';
+export * from './routing/RoutingRedirect.js';
+export * from './when.js';
+export * from './serverRpc.js';
+export * from './settings.js';
+export * from './Store/getStore.js';
+export * from './Store/registerStore.js';
+export * from './components/Stylesheet.jsx';
+export { TungstenError } from './TungstenError.js';
+export * from './__deproxy.js';
+export type { Request } from './api/Request.js';
+export type { Response } from './api/Response.js';
+export type { BindVariable, TypedBindVariable } from './components/bindable/BindVariable.js';
+export type { ConstructPackage, TungstenBaseComponentType } from './Components.jsx';
+export * from './ContentNode.js';
+export type { GenericObject } from './GenericObject.type.js';
+export type { Instance } from './Instance/Instance.js';
+export type { Key } from './Key.js';
+export type { ReqRes, ReqResOrNull } from './ReqRes.js';
+export type { Params } from './routing/Params.js';
+export type { ParamsFromPath } from './routing/ParamsFromPath.js';
+export type { RouteType, Route } from './routing/RouteType.js';
+export { type RouteKey, type Path, RouteKeyIsPath } from './routing/RouteTypes.js';
+export type { Routes, CustomRoutes } from './routing/Routes.js';
+export type { RouteParams } from './routing/RouteParams.type.js';
+export type { RouteData } from './routing/RouteData.js';
+export type { RouteDataFunction } from './routing/RouteDataFunction.type.js';
+export type { RouteDataReturnType } from './routing/RouteDataReturnType.js';
+export type { FrameworkConfig } from './FrameworkConfig.js';
+export type { TungstenComponentPropsBase, TungstenComponentPropsBase as PropsBase, TungstenComponentStateConstraint, TungstenComponentStateConstraint as StateConstraint, ComponentStore } from './Components.jsx';
+export type { CssNames } from './CssNames.js';
+//# sourceMappingURL=indexInner.d.ts.map