From 6b90dba8d4b956ab76eb0b20666bda8d24f1571b Mon Sep 17 00:00:00 2001 From: sawka Date: Thu, 3 Mar 2022 12:22:05 -0800 Subject: [PATCH 1/8] add preRenderHook and postRenderHook to HibikiGlobalConfig, add getStateName() to HibikiState --- changelog.md | 5 +++++ src/hibiki.ts | 20 +++++++++++++++----- src/nodes.tsx | 11 +++++++++-- src/request.ts | 12 ------------ src/state.ts | 10 ++++++++++ src/types.ts | 4 ++++ 6 files changed, 43 insertions(+), 19 deletions(-) diff --git a/changelog.md b/changelog.md index fb77d8a..011309b 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,10 @@ # Change Log +## v0.3.3 + +* HibikiGlobalConfig preRenderHook and postRenderHook (receives state and DOM node) +* Added getStateName() to HibikiState (set from 'name' attribute on hibiki template element) + ## v0.3.2 * new array functions: fn:filter(), fn:map(), fn:find(), fn:findindex(), fn:reduce(), fn:reverse(), fn:every(), fn:some(), fn:concat(), fn:join(), fn:shift(), fn:unshift() diff --git a/src/hibiki.ts b/src/hibiki.ts index 5bb7974..9f557bb 100644 --- a/src/hibiki.ts +++ b/src/hibiki.ts @@ -13,7 +13,7 @@ import {parseHtml} from "./html-parser"; import {HibikiState, DataEnvironment} from "./state"; import * as ReactDOM from "react-dom"; import {HibikiRootNode, CORE_LIBRARY} from "./nodes"; -import {deepTextContent, evalDeepTextContent, isObject, bindLibContext} from "./utils"; +import {deepTextContent, evalDeepTextContent, isObject, bindLibContext, callHook} from "./utils"; import merge from "lodash/merge"; import type {HibikiConfig, Hibiki, HibikiExtState, ReactClass, LibraryType, HibikiGlobalConfig} from "./types"; import type {HibikiNode} from "./html-parser"; @@ -33,12 +33,15 @@ function errorWithCause(message : string, cause : Error) { throw new Error(message, {cause: cause}); // ES6 error with cause } + function getGlobalConfig() : HibikiGlobalConfig { let rtn : HibikiGlobalConfig = { noUsagePing: false, noWelcomeMessage: false, libraryRoot: DEFAULT_LIBRARY_ROOT, useDevLibraryBuilds: false, + preRenderHook: null, + postRenderHook: null, }; if (window.HibikiGlobalConfig != null && typeof(window.HibikiGlobalConfig) === "object") { rtn = Object.assign(rtn, window.HibikiGlobalConfig); @@ -88,6 +91,9 @@ function readHibikiConfigFromOuterHtml(htmlElem : string | HTMLElement) : Hibiki if (htmlElem.hasAttribute("nodatamergefromhtml")) { rtn.noDataMergeFromHtml = true; } + if (htmlElem.hasAttribute("name")) { + rtn.stateName = htmlElem.getAttribute("name"); + } return rtn; } @@ -115,14 +121,21 @@ let createState = function createState(config : HibikiConfig, html : string | HT initialData = merge((hibikiOpts.initialData ?? {}), initialData); } state.setGlobalData(initialData); + if (state.getStateName() != null) { + window.Hibiki.States[state.getStateName()] = state; + } return state.getExtState(); } createState = mobx.action(createState); function render(elem : HTMLElement, state : HibikiExtState) { let parentHtmlTag = elem.parentElement.tagName.toLowerCase(); - let props = {hibikiState: state, parentHtmlTag: parentHtmlTag}; + let props = {hibikiState: state, parentHtmlTag: parentHtmlTag, htmlElem: elem}; let reactElem = React.createElement(HibikiRootNode, props, null); + let gc = getGlobalConfig(); + if (gc.preRenderHook != null) { + callHook("preRenderHook", gc.preRenderHook, state, elem); + } state.setInitCallback(() => { ReactDOM.render(reactElem, elem); elem.classList.remove("hibiki-cloak"); @@ -180,9 +193,6 @@ function autoloadTags() : void { continue; } let state = loadTag(elem); - if (elem.hasAttribute("name")) { - window.Hibiki.States[elem.getAttribute("name")] = state; - } window.HibikiState = state; } } diff --git a/src/nodes.tsx b/src/nodes.tsx index adf555a..158c2e7 100644 --- a/src/nodes.tsx +++ b/src/nodes.tsx @@ -16,7 +16,7 @@ import type {ComponentType, LibraryType, HibikiExtState, LibComponentType, Hibik import {DBCtx, makeDBCtx, makeCustomDBCtx, InjectedAttrsObj, createInjectObj, resolveArgsRoot, bindNodeList, expandChildrenNode} from "./dbctx"; import * as DataCtx from "./datactx"; import {HibikiState, DataEnvironment} from "./state"; -import {resolveNumber, isObject, textContent, SYM_PROXY, SYM_FLATTEN, jseval, nodeStr, getHibiki, addToArrayDupCheck, removeFromArray, valInArray, subMapKey, unbox, bindLibContext, cnArrToClassAttr} from "./utils"; +import {resolveNumber, isObject, textContent, SYM_PROXY, SYM_FLATTEN, jseval, nodeStr, getHibiki, addToArrayDupCheck, removeFromArray, valInArray, subMapKey, unbox, bindLibContext, cnArrToClassAttr, callHook} from "./utils"; import {parseHtml, HibikiNode, NodeAttrType} from "./html-parser"; import * as NodeUtils from "./nodeutils"; import {RtContext, HibikiError} from "./error"; @@ -35,7 +35,7 @@ class ErrorMsg extends React.Component<{message: string}, {}> { } @mobxReact.observer -class HibikiRootNode extends React.Component<{hibikiState : HibikiExtState, parentHtmlTag : string}, {}> { +class HibikiRootNode extends React.Component<{hibikiState : HibikiExtState, parentHtmlTag : string, htmlElem : HTMLElement}, {}> { constructor(props : any) { super(props); } @@ -51,6 +51,13 @@ class HibikiRootNode extends React.Component<{hibikiState : HibikiExtState, pare getHibikiNode() : HibikiNode { return this.getHibikiState().findCurrentPage(); } + + componentDidMount() { + let hibiki = getHibiki(); + if (hibiki.GlobalConfig.postRenderHook != null) { + callHook("postRenderHook", hibiki.GlobalConfig.postRenderHook, this.props.hibikiState, this.props.htmlElem); + } + } render() : React.ReactNode { let dbstate = this.getHibikiState(); diff --git a/src/request.ts b/src/request.ts index 25ce795..d59f3b6 100644 --- a/src/request.ts +++ b/src/request.ts @@ -37,18 +37,6 @@ class HibikiRequest { }); } - invalidate(...regexArr : string[]) { - if (regexArr == null || regexArr.length == 0) { - this.actions.push({actiontype: "invalidate"}); - } - else { - this.actions.push({ - actiontype: "invalidate", - data: regexArr, - }); - } - } - setHtml(html : string) { this.actions.push({ actiontype: "html", diff --git a/src/state.ts b/src/state.ts index dc121db..ec61de1 100644 --- a/src/state.ts +++ b/src/state.ts @@ -885,6 +885,10 @@ class HibikiExtState { this.state.initialize(force); } + getStateName() : string { + return this.state.getStateName(); + } + setHtml(html : string | HTMLElement) : void { let htmlObj = parseHtml(html); bindLibContext(htmlObj, "main"); @@ -964,6 +968,7 @@ class HibikiState { JSFuncs : Record; NodeUuidMap : Map = new Map(); DataRoots : Record>; + StateName : string; constructor() { this.DataRoots = {}; @@ -971,10 +976,15 @@ class HibikiState { this.DataRoots["state"] = mobx.observable.box({}, {name: "AppState"}) this.ComponentLibrary = new ComponentLibrary(this); this.InitCallbacks = []; + this.StateName = null; let hibiki = getHibiki(); this.JSFuncs = hibiki.JSFuncs; window.addEventListener("popstate", this.popStateHandler); } + + getStateName() : string { + return this.StateName; + } @boundMethod popStateHandler() { this.setStateVars(); diff --git a/src/types.ts b/src/types.ts index 88417b0..6b9c96d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -111,6 +111,7 @@ type FetchHookFn = JSFuncStr | ((url : URL, fetchInit : Record) => type CsrfHookFn = JSFuncStr | ((url : URL) => string); type ErrorCallbackFn = JSFuncStr | ((err : HibikiError) => boolean); type EventCallbackFn = JSFuncStr | ((event : EventType) => void); +type RenderHookFn = JSFuncStr | ((state : HibikiExtState, elem : HTMLElement) => void); type ModuleConfig = Record; @@ -146,6 +147,8 @@ type HibikiGlobalConfig = { noWelcomeMessage : boolean, libraryRoot : string, useDevLibraryBuilds : boolean, + preRenderHook : RenderHookFn, + postRenderHook : RenderHookFn, }; type HibikiConfig = { @@ -154,6 +157,7 @@ type HibikiConfig = { modules? : Record, httpConfig? : HttpConfig; unhandledErrorHook? : ErrorCallbackFn; + stateName? : string; }; type PathUnionType = string | PathType; From ae5c3fedadf2cbd51e4fef2c8e7a017a2fc133a0 Mon Sep 17 00:00:00 2001 From: sawka Date: Thu, 3 Mar 2022 16:41:09 -0800 Subject: [PATCH 2/8] allow hibiki code to be read from a 'script' tag (as an alternative to the 'template' tag). must set script type='text/hibiki-html'. --- changelog.md | 1 + src/hibiki.ts | 4 ++-- src/html-parser.ts | 6 +++++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/changelog.md b/changelog.md index 011309b..60479f2 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,7 @@ * HibikiGlobalConfig preRenderHook and postRenderHook (receives state and DOM node) * Added getStateName() to HibikiState (set from 'name' attribute on hibiki template element) +* Allow a 'script' tag with type="text/hibiki-html" to be used in place of a 'template' tag (SEO concerns) ## v0.3.2 diff --git a/src/hibiki.ts b/src/hibiki.ts index 9f557bb..d9dd69c 100644 --- a/src/hibiki.ts +++ b/src/hibiki.ts @@ -153,7 +153,7 @@ function loadTag(elem : HTMLElement) : HibikiExtState { console.log("Hibiki cannot render directly into tag, create a tag under to render to"); return null; } - if (elem.tagName.toLowerCase() === "template") { + if (elem.tagName.toLowerCase() === "template" || elem.tagName.toLowerCase() === "script") { let forElemId = elem.getAttribute("for"); let renderNode = null; if (forElemId != null) { @@ -186,7 +186,7 @@ function loadTag(elem : HTMLElement) : HibikiExtState { } function autoloadTags() : void { - let elems = document.querySelectorAll("hibiki, template[hibiki]"); + let elems = document.querySelectorAll("hibiki, template[hibiki], script[type='text/hibiki-html']"); for (let i=0; i Date: Fri, 4 Mar 2022 15:16:06 -0800 Subject: [PATCH 3/8] dont lowercase attribute names inside of rawhtmltags (already lowercase except for 'cc:' attrs --- src/nodes.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/nodes.tsx b/src/nodes.tsx index 158c2e7..8b863de 100644 --- a/src/nodes.tsx +++ b/src/nodes.tsx @@ -514,7 +514,6 @@ class RawHtmlNode extends React.Component { } } for (let [k,v] of Object.entries(attrVals)) { - k = k.toLowerCase(); if (NodeUtils.SPECIAL_ATTRS[k] || managedAttrs[k]) { continue; } @@ -715,7 +714,7 @@ class ScriptNode extends React.Component { let scriptType = ctx.resolveAttrStr("type"); if (srcAttr == null) { let scriptText = textContent(ctx.node); - if (scriptText == null || scriptText.trim() == "") { + if (scriptText == null || scriptText.trim() === "") { return null; } ctx.dataenv.dbstate.queueScriptText(scriptText, scriptType, isSync); From 08fb432239a2bec1f6adeb488dcc7cca109c7b61 Mon Sep 17 00:00:00 2001 From: sawka Date: Fri, 4 Mar 2022 15:22:37 -0800 Subject: [PATCH 4/8] bump versions to v0.3.3 --- README.md | 2 +- package.json | 2 +- playground/index.html | 2 +- playground/playground-iframe-bulma.html | 2 +- playground/playground-iframe-clean.html | 2 +- playground/tutorial/index.html | 2 +- playground/tutorial/t-gs.html | 4 ++-- playground/tutorial/t-intro.html | 2 +- static/hibiki-test.js | 2 +- webpack.dev.js | 2 +- webpack.prod.js | 2 +- 11 files changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 283cd8b..4cf261f 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ no build tools to download and run. Just add one script tag to the top of your page or template: ``` - + ``` Wrap any portion of your content with a <template hibiki> tag and you have your first diff --git a/package.json b/package.json index 44789e5..bfe589e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hibiki", - "version": "0.3.2", + "version": "0.3.3", "description": "Hibiki HTML", "main": "dist/hibiki.js", "repository": "https://github.com/sawka/hibiki", diff --git a/playground/index.html b/playground/index.html index d2dc7e0..87786c3 100644 --- a/playground/index.html +++ b/playground/index.html @@ -5,7 +5,7 @@ Hibiki HTML Playground - + diff --git a/playground/playground-iframe-bulma.html b/playground/playground-iframe-bulma.html index 62e47d3..def4cd3 100644 --- a/playground/playground-iframe-bulma.html +++ b/playground/playground-iframe-bulma.html @@ -5,7 +5,7 @@ Hibiki Playground Preview - + diff --git a/playground/playground-iframe-clean.html b/playground/playground-iframe-clean.html index 8c9702b..6a939c9 100644 --- a/playground/playground-iframe-clean.html +++ b/playground/playground-iframe-clean.html @@ -5,7 +5,7 @@ Hibiki Playground Preview - + %%TEXT%% diff --git a/playground/tutorial/index.html b/playground/tutorial/index.html index 42a03fd..23918f2 100644 --- a/playground/tutorial/index.html +++ b/playground/tutorial/index.html @@ -5,7 +5,7 @@ Hibiki HTML Tutorial - + diff --git a/playground/tutorial/t-gs.html b/playground/tutorial/t-gs.html index 96f4d5a..378ae2f 100644 --- a/playground/tutorial/t-gs.html +++ b/playground/tutorial/t-gs.html @@ -10,7 +10,7 @@

Getting Started

You can create a Hibiki HTML app on any page in two steps. First add the Hibiki HTML JavaScript tag to your page:

-
<script src="https://cdn.hibikihtml.com/hibiki/v0.3.2/hibiki-prod.min.js"></script>
+
<script src="https://cdn.hibikihtml.com/hibiki/v0.3.3/hibiki-prod.min.js"></script>

Next add a Hibiki template block to your page where you want the application to display (you can also wrap your existing HTML to instantly convert it to a Hibiki app): @@ -50,7 +50,7 @@

How the preview and tutorial was built
Bulma CSS library, and FontAwesome v4.7.

-
<script src="https://cdn.hibikihtml.com/hibiki/v0.3.2/hibiki-prod.min.js"></script>
+
<script src="https://cdn.hibikihtml.com/hibiki/v0.3.3/hibiki-prod.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

 
diff --git a/playground/tutorial/t-intro.html b/playground/tutorial/t-intro.html
index 0e3f8b3..b836cb1 100644
--- a/playground/tutorial/t-intro.html
+++ b/playground/tutorial/t-intro.html
@@ -28,7 +28,7 @@ 
Easy to Get Started

 

   
   Add one script tag to the top of your page:

-  https://cdn.hibikihtml.com/hibiki/v0.3.2/hibiki-prod.min.js
+  https://cdn.hibikihtml.com/hibiki/v0.3.3/hibiki-prod.min.js
 

 

   Wrap any portion of your content with a <template hibiki> tag and you have your first
diff --git a/static/hibiki-test.js b/static/hibiki-test.js
index 29b0365..b37391e 100644
--- a/static/hibiki-test.js
+++ b/static/hibiki-test.js
@@ -49,7 +49,7 @@ if (testMode() == "test") {
     scriptQueue.push("/hibiki-dev.js");
 }
 else {
-    scriptQueue.push("https://cdn.hibikihtml.com/hibiki/v0.3.2/hibiki-prod.min.js");
+    scriptQueue.push("https://cdn.hibikihtml.com/hibiki/v0.3.3/hibiki-prod.min.js");
 }
 loadScriptQueue();
 writeStyleSheet("https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css");
diff --git a/webpack.dev.js b/webpack.dev.js
index f7b9a50..1d18856 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -3,7 +3,7 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
 const CopyPlugin = require("copy-webpack-plugin");
-const VERSION = "v0.3.2";
+const VERSION = "v0.3.3";
 
 var merged = merge.merge(common, {
     mode: "development",
diff --git a/webpack.prod.js b/webpack.prod.js
index d986856..b826f53 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -5,7 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const moment = require("dayjs");
 const fs = require("fs");
-const VERSION = "v0.3.2";
+const VERSION = "v0.3.3";
 
 function makeBuildStr() {
     let buildStr = moment().format("YYYYMMDD-HHmmss");

From 80d0a1606da72cf6b316b3cfbac401795296fa54 Mon Sep 17 00:00:00 2001
From: sawka 
Date: Fri, 4 Mar 2022 15:47:46 -0800
Subject: [PATCH 5/8] Allow Hibiki HTML src to be loaded from a remote URL
 using the src/hibikisrc attribute.  Initial data can be loaded from datasrc
 attribute.

---
 changelog.md  |  1 +
 src/hibiki.ts | 86 ++++++++++++++++++++++++++++++++++++++++++---------
 src/types.ts  |  6 ++--
 3 files changed, 77 insertions(+), 16 deletions(-)

diff --git a/changelog.md b/changelog.md
index 60479f2..70e7e95 100644
--- a/changelog.md
+++ b/changelog.md
@@ -5,6 +5,7 @@
 * HibikiGlobalConfig preRenderHook and postRenderHook (receives state and DOM node)
 * Added getStateName() to HibikiState (set from 'name' attribute on hibiki template element)
 * Allow a 'script' tag with type="text/hibiki-html" to be used in place of a 'template' tag (SEO concerns)
+* The top-level Hibiki tag (<template>, <script>, or <hibiki>) can now take two optional attributes.  "src"/"hibikisrc" will load the Hibiki HTML src from the given URL.  "datasrc" will load the initial HTML data from the given URL.
 
 ## v0.3.2
 
diff --git a/src/hibiki.ts b/src/hibiki.ts
index d9dd69c..6c654a4 100644
--- a/src/hibiki.ts
+++ b/src/hibiki.ts
@@ -105,20 +105,24 @@ let createState = function createState(config : HibikiConfig, html : string | HT
     config = config || {};
     initialData = initialData || {};
     let htmlObj : HibikiNode = null;
-    if (html != null) {
+    if (config.htmlSrc != null) {
+        htmlObj = parseHtml(config.htmlSrc);
+        bindLibContext(htmlObj, "main");
+    }
+    else if (html != null) {
         htmlObj = parseHtml(html);
         bindLibContext(htmlObj, "main");
     }
     state.setHtml(htmlObj);
     let configFromOuterHtml = readHibikiConfigFromOuterHtml(html);
-    config = merge(config, configFromOuterHtml);
+    config = merge({}, config, configFromOuterHtml);
     let hibikiOpts = readHibikiOptsFromHtml(htmlObj);
     if (!config.noConfigMergeFromHtml) {
-        config = merge((hibikiOpts.config ?? {}), config);
+        config = merge({}, (hibikiOpts.config ?? {}), config);
     }
     state.setConfig(config);
     if (!config.noDataMergeFromHtml) {
-        initialData = merge((hibikiOpts.initialData ?? {}), initialData);
+        initialData = merge({}, (config.initialData ?? {}), (hibikiOpts.initialData ?? {}), initialData);
     }
     state.setGlobalData(initialData);
     if (state.getStateName() != null) {
@@ -143,7 +147,7 @@ function render(elem : HTMLElement, state : HibikiExtState) {
     state.initialize(false);
 }
 
-function loadTag(elem : HTMLElement) : HibikiExtState {
+async function loadTag(elem : HTMLElement) : Promise {
     if (elem.hasAttribute("loaded")) {
         console.log("Hibiki tag already loaded", elem);
         return null;
@@ -153,9 +157,10 @@ function loadTag(elem : HTMLElement) : HibikiExtState {
         console.log("Hibiki cannot render directly into  tag, create a tag under  to render to");
         return null;
     }
+
+    let renderNode : HTMLElement = null;
     if (elem.tagName.toLowerCase() === "template" || elem.tagName.toLowerCase() === "script") {
         let forElemId = elem.getAttribute("for");
-        let renderNode = null;
         if (forElemId != null) {
             renderNode = document.getElementById(forElemId);
         }
@@ -174,27 +179,80 @@ function loadTag(elem : HTMLElement) : HibikiExtState {
                 elem.parentNode.insertBefore(renderNode, elem.nextSibling); // insert after elem
             }
         }
-        let state = createState({}, elem, null);
-        render(renderNode, state);
-        return state;
     }
     else {
-        let state = createState({}, elem, null);
-        render(elem, state);
-        return state;
+        renderNode = elem;
     }
+    let config : HibikiConfig = {};
+    let psrcs = fetchRemoteSrcs(config, elem);
+    if (psrcs != null) {
+        await psrcs;
+    }
+    let state = createState(config, elem, null);
+    render(renderNode, state);
+    return state;
 }
 
-function autoloadTags() : void {
+function fetchRemoteSrcs(config : HibikiConfig, elem : HTMLElement) : Promise {
+    let srcAttr = elem.getAttribute("hibikisrc") ?? elem.getAttribute("src");
+    let dataAttr = elem.getAttribute("datasrc");
+    if (srcAttr == null && dataAttr == null) {
+        return null;
+    }
+    let parr : Promise[] = [];
+    if (srcAttr != null) {
+        let psrc = fetch(srcAttr).then((resp) => {
+            if (!resp.ok) {
+                throw new Error(sprintf("Bad fetch response for hibiki src url '%s': %d %s", srcAttr, resp.status, resp.statusText));
+            }
+            let ctype = resp.headers.get("Content-Type");
+            if (!ctype.startsWith("text/")) {
+                throw new Error(sprintf("Bad fetch response for hibiki src url '%s', non-text mime-type: '%s'", srcAttr, ctype));
+            }
+            return resp.text();
+        }).then((text) => {
+            config.htmlSrc = text;
+        });
+        parr.push(psrc);
+    }
+    if (dataAttr != null) {
+        let pdata = fetch(dataAttr).then((resp) => {
+            if (!resp.ok) {
+                throw new Error(sprintf("Bad fetch response for hibiki data url '%s': %d %s", dataAttr, resp.status, resp.statusText));
+            }
+            let ctype = resp.headers.get("Content-Type");
+            if (!ctype.startsWith("application/json")) {
+                throw new Error(sprintf("Bad fetch response for hibiki data url '%s', non 'application/json' type: '%s'", dataAttr, ctype));
+            }
+            return resp.json();
+        }).then((data) => {
+            config.initialData = data;
+        });
+        parr.push(pdata);
+    }
+    return Promise.all(parr);
+}
+
+async function autoloadTagsAsync() : Promise {
     let elems = document.querySelectorAll("hibiki, template[hibiki], script[type='text/hibiki-html']");
     for (let i=0; i {
+    let p = autoloadTagsAsync()
+    return p.then(() => { return true; })
+    .catch((e) => {
+        console.log("ERROR calling Hibiki.autoloadTags", e);
+        return false;
+    });
 }
 
 let LocalHandlers : Record any> = {};
diff --git a/src/types.ts b/src/types.ts
index 6b9c96d..ce7ceed 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -158,6 +158,8 @@ type HibikiConfig = {
     httpConfig? : HttpConfig;
     unhandledErrorHook? : ErrorCallbackFn;
     stateName? : string;
+    initialData? : HibikiVal;
+    htmlSrc? : string;
 };
 
 type PathUnionType = string | PathType;
@@ -205,8 +207,8 @@ type LibraryType = {
 type ReactClass = new(props : any) => React.Component;
 
 interface Hibiki {
-    autoloadTags() : void;
-    loadTag(elem: HTMLElement) : HibikiExtState;
+    autoloadTags() : Promise;
+    loadTag(elem: HTMLElement) : Promise;
     render(elem : HTMLElement, state : HibikiExtState) : void;
     createState(config : HibikiConfig, html : string | HTMLElement, initialData : any) : HibikiExtState;
     registerLocalJSHandler(path : string, fn : (req : HibikiRequest) => any) : void;

From 848b80a45ff2bc0f189b60d3950cc03879135ba5 Mon Sep 17 00:00:00 2001
From: sawka 
Date: Fri, 4 Mar 2022 15:53:32 -0800
Subject: [PATCH 6/8] update outdated packges

---
 package.json |   2 +-
 yarn.lock    | 100 ++++++++++++++++++++++++++++-----------------------
 2 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/package.json b/package.json
index bfe589e..c888b06 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@types/classnames": "2.3.1",
-    "@types/node": "^16.11.6",
+    "@types/node": "^16",
     "@types/react": "^17.0.34",
     "@types/uuid": "^8.3.1",
     "babel-loader": "^8.2.3",
diff --git a/yarn.lock b/yarn.lock
index e446d98..28b19ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1216,14 +1216,14 @@
   integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
 
 "@types/node@*":
-  version "17.0.19"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.19.tgz#726171367f404bfbe8512ba608a09ebad810c7e6"
-  integrity sha512-PfeQhvcMR4cPFVuYfBN4ifG7p9c+Dlh3yUZR6k+5yQK7wX3gDgVxBly4/WkBRs9x4dmcy1TVl08SY67wwtEvmA==
+  version "17.0.21"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
+  integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
 
-"@types/node@^16.11.6":
-  version "16.11.22"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.22.tgz#e704150225bfc4195f8ce68a7ac8da02b753549a"
-  integrity sha512-DYNtJWauMQ9RNpesl4aVothr97/tIJM8HbyOXJ0AYT1Z2bEjLHyfjOBPAQQVMLf8h3kSShYfNk8Wnto8B2zHUA==
+"@types/node@^16":
+  version "16.11.26"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.26.tgz#63d204d136c9916fb4dcd1b50f9740fe86884e47"
+  integrity sha512-GZ7bu5A6+4DtG7q9GsoHXy3ALcgeIHP4NnL0Vv2wu0uUB/yQex26v0tf6/na1mm0+bS9Uw+0DFex7aaKr2qawQ==
 
 "@types/prop-types@*":
   version "15.7.4"
@@ -1507,9 +1507,9 @@ ajv@^6.12.4, ajv@^6.12.5:
     uri-js "^4.2.2"
 
 ajv@^8.0.0, ajv@^8.8.0:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.9.0.tgz#738019146638824dea25edcf299dcba1b0e7eb18"
-  integrity sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.10.0.tgz#e573f719bd3af069017e3b66538ab968d040e54d"
+  integrity sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -1753,11 +1753,16 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001312:
+caniuse-lite@^1.0.30001286:
   version "1.0.30001312"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
   integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
 
+caniuse-lite@^1.0.30001312:
+  version "1.0.30001313"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz#a380b079db91621e1b7120895874e2fd62ed2e2f"
+  integrity sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==
+
 chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1984,12 +1989,12 @@ crypt@0.0.2:
   integrity sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=
 
 css-loader@^6.5.1:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.6.0.tgz#c792ad5510bd1712618b49381bd0310574fafbd3"
-  integrity sha512-FK7H2lisOixPT406s5gZM1S3l8GrfhEBT3ZiL2UX1Ng1XWs0y2GPllz/OTyvbaHe12VgQrIXIzuEGVlbUhodqg==
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.0.tgz#c1200da1dfffe6643b18bda20fdd84cad3e36d39"
+  integrity sha512-S7HCfCiDHLA+VXKqdZwyRZgoO0R9BnKDnVIoHMq5grl3N86zAu7MB+FBWHr5xOJC8SmvpTLha/2NpfFkFEN/ig==
   dependencies:
     icss-utils "^5.1.0"
-    postcss "^8.4.5"
+    postcss "^8.4.7"
     postcss-modules-extract-imports "^3.0.0"
     postcss-modules-local-by-default "^4.0.0"
     postcss-modules-scope "^3.0.0"
@@ -2008,9 +2013,9 @@ csstype@^3.0.2:
   integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
 
 dayjs@^1.10.7:
-  version "1.10.7"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
-  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+  version "1.10.8"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.8.tgz#267df4bc6276fcb33c04a6735287e3f429abec41"
+  integrity sha512-wbNwDfBHHur9UOzNUjeKUOJ0fCb0a52Wx0xInmQ7Y8FstyajiV1NmK1e00cxsr9YrE9r7yAChE0VvpuY5Rnlow==
 
 debug@2.6.9:
   version "2.6.9"
@@ -2135,11 +2140,16 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.4.17, electron-to-chromium@^1.4.71:
+electron-to-chromium@^1.4.17:
   version "1.4.71"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.71.tgz#17056914465da0890ce00351a3b946fd4cd51ff6"
   integrity sha512-Hk61vXXKRb2cd3znPE9F+2pLWdIOmP7GjiTj45y6L3W/lO+hSnUSUhq+6lEaERWBdZOHbk2s3YV5c9xVl3boVw==
 
+electron-to-chromium@^1.4.71:
+  version "1.4.75"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz#d1ad9bb46f2f1bf432118c2be21d27ffeae82fdd"
+  integrity sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q==
+
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
@@ -2150,10 +2160,10 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-enhanced-resolve@^5.8.3:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.0.tgz#49ac24953ac8452ed8fed2ef1340fc8e043667ee"
-  integrity sha512-weDYmzbBygL7HzGGS26M3hGQx68vehdEg6VUmqSOaFzXExFqlnKuSvsEJCVGQHScS8CQMbrAqftT+AzzHNt/YA==
+enhanced-resolve@^5.9.2:
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
+  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -3054,9 +3064,9 @@ mimic-fn@^2.1.0:
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
 mini-css-extract-plugin@^2.4.4:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.3.tgz#c5c79f9b22ce9b4f164e9492267358dbe35376d9"
-  integrity sha512-YseMB8cs8U/KCaAGQoqYmfUuhhGW0a9p9XvWXrxVOkE3/IiISTLw4ALNt7JR5B2eYauFM+PQGSbXMDmVbR7Tfw==
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e"
+  integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w==
   dependencies:
     schema-utils "^4.0.0"
 
@@ -3139,10 +3149,10 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
-nanoid@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
-  integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
+nanoid@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
+  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
 
 nearley@^2.20.1:
   version "2.20.1"
@@ -3419,12 +3429,12 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.5:
-  version "8.4.6"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
-  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
+postcss@^8.4.7:
+  version "8.4.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.7.tgz#f99862069ec4541de386bf57f5660a6c7a0875a8"
+  integrity sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==
   dependencies:
-    nanoid "^3.2.0"
+    nanoid "^3.3.1"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
@@ -4027,9 +4037,9 @@ terser-webpack-plugin@^5.1.3:
     terser "^5.7.2"
 
 terser@^5.7.2:
-  version "5.11.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.11.0.tgz#2da5506c02e12cd8799947f30ce9c5b760be000f"
-  integrity sha512-uCA9DLanzzWSsN1UirKwylhhRz3aKPInlfmpGfw8VN6jHsAtu8HJtIpeeHHK23rxnE/cDc+yvmq5wqkIC6Kn0A==
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.12.0.tgz#728c6bff05f7d1dcb687d8eace0644802a9dae8a"
+  integrity sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==
   dependencies:
     acorn "^8.5.0"
     commander "^2.20.0"
@@ -4082,9 +4092,9 @@ type-is@~1.6.18:
     mime-types "~2.1.24"
 
 typescript@^4.4.4:
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
-  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
+  integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
@@ -4262,9 +4272,9 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.62.1:
-  version "5.69.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.1.tgz#8cfd92c192c6a52c99ab00529b5a0d33aa848dc5"
-  integrity sha512-+VyvOSJXZMT2V5vLzOnDuMz5GxEqLk7hKWQ56YxPW/PQRUuKimPqmEIJOx8jHYeyo65pKbapbW464mvsKbaj4A==
+  version "5.70.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.70.0.tgz#3461e6287a72b5e6e2f4872700bc8de0d7500e6d"
+  integrity sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"
@@ -4275,7 +4285,7 @@ webpack@^5.62.1:
     acorn-import-assertions "^1.7.6"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.8.3"
+    enhanced-resolve "^5.9.2"
     es-module-lexer "^0.9.0"
     eslint-scope "5.1.1"
     events "^3.2.0"

From ce05ffbd060b98ff8981f3d0d472b42baf1c71a8 Mon Sep 17 00:00:00 2001
From: sawka 
Date: Fri, 4 Mar 2022 16:14:36 -0800
Subject: [PATCH 7/8] read stateName from Config object

---
 src/state.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/state.ts b/src/state.ts
index ec61de1..e791783 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -968,7 +968,6 @@ class HibikiState {
     JSFuncs : Record;
     NodeUuidMap : Map = new Map();
     DataRoots : Record>;
-    StateName : string;
 
     constructor() {
         this.DataRoots = {};
@@ -983,7 +982,7 @@ class HibikiState {
     }
 
     getStateName() : string {
-        return this.StateName;
+        return this.Config.stateName;
     }
     
     @boundMethod popStateHandler() {

From ff6546041ae721a7880423abcfd27c1867985755 Mon Sep 17 00:00:00 2001
From: sawka 
Date: Fri, 4 Mar 2022 17:27:31 -0800
Subject: [PATCH 8/8] convert some == to ===, and remote reference to StateName

---
 src/nodes.tsx | 36 ++++++++++++++++++------------------
 src/state.ts  |  1 -
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/nodes.tsx b/src/nodes.tsx
index 8b863de..65270a6 100644
--- a/src/nodes.tsx
+++ b/src/nodes.tsx
@@ -130,7 +130,7 @@ function renderCtx(ctx : DBCtx, index : number, parentHtmlTag : string) : React.
 }
 
 function renderCtxList(ctxList : DBCtx[], parentHtmlTag : string) : React.ReactNode[] {
-    if (ctxList == null || ctxList.length == 0) {
+    if (ctxList == null || ctxList.length === 0) {
         return null;
     }
     let rtn : React.ReactNode[] = [];
@@ -191,14 +191,14 @@ class AnyNode extends React.Component {
             return ;
         }
         if (component != null) {
-            if (component.componentType == "react-custom") {
+            if (component.componentType === "react-custom") {
                 this.nodeType = "react-component";
                 return ;
             }
-            else if (component.componentType == "hibiki-native") {
+            else if (component.componentType === "hibiki-native") {
                 this.nodeType = "component";
                 let ImplNode = component.impl.get();
-                if (ImplNode == null && component.libName == "main") {
+                if (ImplNode == null && component.libName === "main") {
                     ImplNode = getHibiki().LocalNativeComponents.get(component.name);
                 }
                 if (ImplNode == null) {
@@ -206,7 +206,7 @@ class AnyNode extends React.Component {
                 }
                 return ;
             }
-            else if (component.componentType == "hibiki-html") {
+            else if (component.componentType === "hibiki-html") {
                 this.nodeType = "hibiki-html-component";
                 return ;
             }
@@ -215,7 +215,7 @@ class AnyNode extends React.Component {
                 return 
<{compName}>
;
             }
         }
-        if (compName.startsWith("html-") || compName.indexOf("-") == -1) {
+        if (compName.startsWith("html-") || compName.indexOf("-") === -1) {
             this.nodeType = "rawhtml";
             return 
         }
@@ -243,7 +243,7 @@ class CustomReactNode extends React.Component {
         let p = convertBlobArray(reactEvent.target.files);
         p.then((hblobArr) => {
             if (isMultiple) {
-                if (hblobArr.length == 0) {
+                if (hblobArr.length === 0) {
                     hblobArr = null;
                 }
                 ctx.handleOnChange(reactEvent, hblobArr);
@@ -536,7 +536,7 @@ class RawHtmlNode extends React.Component {
                 continue;
             }
             let strVal = DataCtx.valToAttrStr(v);
-            if (k == "download" && strVal == "1") {
+            if (k === "download" && strVal === "1") {
                 elemProps["download"] = "";
                 continue;
             }
@@ -545,40 +545,40 @@ class RawHtmlNode extends React.Component {
             }
             elemProps[k] = strVal;
         }
-        if (!managedAttrs["value"] && elemProps["value"] == null && ctx.getRawAttr("value") == "") {
+        if (!managedAttrs["value"] && elemProps["value"] == null && ctx.getRawAttr("value") === "") {
             elemProps["value"] = "";
         }
         
         // forms are managed if submit.handler
-        if (tagName == "form" && ctx.hasHandler("submit")) {
+        if (tagName === "form" && ctx.hasHandler("submit")) {
             elemProps.onSubmit = ctx.handleOnSubmit;
         }
         
         if (ctx.hasHandler("click")) {
             elemProps.onClick = ctx.handleOnClick;
             // anchors with click.handler work like links (not locations)
-            if (tagName == "a" && elemProps["href"] == null) {
+            if (tagName === "a" && elemProps["href"] == null) {
                 elemProps["href"] = "#";
             }
         }
             
         if (managedType != null) {
-            if (managedType == "value") {
+            if (managedType === "value") {
                 this.setupManagedValue(ctx, elemProps);
             }
-            else if (managedType == "radio") {
+            else if (managedType === "radio") {
                 this.setupManagedRadio(ctx, elemProps);
             }
-            else if (managedType == "checkbox") {
+            else if (managedType === "checkbox") {
                 this.setupManagedCheckbox(ctx, elemProps);
             }
-            else if (managedType == "file") {
+            else if (managedType === "file") {
                 this.setupManagedFile(ctx, elemProps);
             }
-            else if (managedType == "select") {
+            else if (managedType === "select") {
                 this.setupManagedSelect(ctx, elemProps);
             }
-            else if (managedType == "hidden") {
+            else if (managedType === "hidden") {
                 this.setupManagedHidden(ctx, elemProps);
             }
             else {
diff --git a/src/state.ts b/src/state.ts
index e791783..7afaa3a 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -975,7 +975,6 @@ class HibikiState {
         this.DataRoots["state"] = mobx.observable.box({}, {name: "AppState"})
         this.ComponentLibrary = new ComponentLibrary(this);
         this.InitCallbacks = [];
-        this.StateName = null;
         let hibiki = getHibiki();
         this.JSFuncs = hibiki.JSFuncs;
         window.addEventListener("popstate", this.popStateHandler);