@builder.io/mitosis 0.0.56-13 → 0.0.56-16

package/dist/src/generators/html.js

@@ -29,18 +29,22 @@ var lodash_1 = require("lodash");
 var lodash_2 = require("lodash");
 var standalone_1 = require("prettier/standalone");
 var has_props_1 = require("../helpers/has-props");
+var has_stateful_dom_1 = require("../helpers/has-stateful-dom");
+var get_refs_1 = require("../helpers/get-refs");
+var map_refs_1 = require("../helpers/map-refs");
 var traverse_1 = __importDefault(require("traverse"));
 var babel_transform_1 = require("../helpers/babel-transform");
-var collect_styles_1 = require("../helpers/collect-styles");
+var collect_css_1 = require("../helpers/styles/collect-css");
 var dash_case_1 = require("../helpers/dash-case");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var has_component_1 = require("../helpers/has-component");
+var has_bindings_text_1 = require("../helpers/has-bindings-text");
 var is_component_1 = require("../helpers/is-component");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var is_html_attribute_1 = require("../helpers/is-html-attribute");
-var is_valid_attribute_name_1 = require("../helpers/is-valid-attribute-name");
 var get_props_1 = require("../helpers/get-props");
+var get_props_ref_1 = require("../helpers/get-props-ref");
 var get_prop_functions_1 = require("../helpers/get-prop-functions");
 var jsx_1 = require("../parsers/jsx");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
@@ -54,6 +58,7 @@ var isAttribute = function (key) {
 };
 var ATTRIBUTE_KEY_EXCEPTIONS_MAP = {
     class: 'className',
+    innerHtml: 'innerHTML',
 };
 var updateKeyIfException = function (key) {
     var _a;
@@ -66,16 +71,25 @@ var generateSetElementAttributeCode = function (key, tagName, useValue, options,
         return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.props(key, useValue, options);
     }
     var isKey = key === 'key';
-    var isComponent = meta === null || meta === void 0 ? void 0 : meta.component;
+    var ignoreKey = /^(innerHTML|key|class|value)$/.test(key);
+    var isTextarea = key === 'value' && tagName === 'textarea';
+    var isDataSet = /^data-/.test(key);
+    var isComponent = Boolean(meta === null || meta === void 0 ? void 0 : meta.component);
     var isHtmlAttr = (0, is_html_attribute_1.isHtmlAttribute)(key, tagName);
-    var setAttr = !isKey && (isHtmlAttr || (0, is_valid_attribute_name_1.isValidAttributeName)(key) || isAttribute(key));
-    return setAttr
-        ? ";el.setAttribute(\"".concat(key, "\", ").concat(useValue, ");").concat(!isComponent || isHtmlAttr
-            ? ''
-            : "\n    ;el.props.".concat((0, lodash_1.camelCase)(key), " = ").concat(useValue, ";\n    ;el.update();\n    "), "\n    ")
-        : ";el.".concat(updateKeyIfException(key), " = ").concat(useValue, ";").concat(!isComponent || isKey
-            ? ''
-            : "\n    ;el.props.".concat((0, lodash_1.camelCase)(key), " = ").concat(useValue, ";\n    ;el.update();\n    "), "\n    ");
+    var setAttr = !ignoreKey && (isHtmlAttr || !isTextarea || isAttribute(key));
+    return [
+        // is html attribute or dash-case
+        setAttr ? ";el.setAttribute(\"".concat(key, "\", ").concat(useValue, ");") : '',
+        // not attr or dataset or html attr
+        !setAttr || !(isHtmlAttr || isDataSet || !isComponent || isKey)
+            ? "el.".concat(updateKeyIfException((0, lodash_1.camelCase)(key)), " = ").concat(useValue, ";")
+            : '',
+        // is component but not html attribute
+        isComponent && !isHtmlAttr
+            ? // custom-element is created but we're in the middle of the update loop
+                "\n      if (el.props) {\n        ;el.props.".concat((0, lodash_1.camelCase)(key), " = ").concat(useValue, ";\n        if (el.update) {\n          ;el.update();\n        }\n      } else {\n        ;el.props = {};\n        ;el.props.").concat((0, lodash_1.camelCase)(key), " = ").concat(useValue, ";\n      }\n      ")
+            : '',
+    ].join('\n');
 };
 var addUpdateAfterSet = function (json, options) {
     (0, traverse_1.default)(json).forEach(function (item) {
@@ -121,9 +135,7 @@ var addScopeVars = function (parentScopeVars, value, fn) {
 };
 var mappers = {
     Fragment: function (json, options, blockOptions) {
-        return json.children
-            .map(function (item) { return blockToHtml(item, options, blockOptions); })
-            .join('\n');
+        return json.children.map(function (item) { return blockToHtml(item, options, blockOptions); }).join('\n');
     },
 };
 var getId = function (json, options) {
@@ -136,9 +148,17 @@ var getId = function (json, options) {
     options.namesMap[name] = newNameNum;
     return "".concat(name).concat(options.prefix ? "-".concat(options.prefix) : '').concat(name !== json.name && newNameNum === 1 ? '' : "-".concat(newNameNum));
 };
+var createGlobalId = function (name, options) {
+    var newNameNum = (options.namesMap[name] || 0) + 1;
+    options.namesMap[name] = newNameNum;
+    return "".concat(name).concat(options.prefix ? "-".concat(options.prefix) : '', "-").concat(newNameNum);
+};
 // TODO: overloaded function
-var updateReferencesInCode = function (code, options) {
+var updateReferencesInCode = function (code, options, blockOptions) {
     var _a, _b;
+    if (blockOptions === void 0) { blockOptions = {}; }
+    var contextVars = blockOptions.contextVars || [];
+    var context = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.context) || 'this.';
     if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.updateReferencesInCode) {
         return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.updateReferencesInCode(code, options, {
             stripStateAndPropsRefs: strip_state_and_props_refs_1.stripStateAndPropsRefs,
@@ -148,12 +168,15 @@ var updateReferencesInCode = function (code, options) {
         return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
             includeProps: false,
             includeState: true,
-            replaceWith: 'this.state.',
+            replaceWith: context + 'state.',
+            context: context,
         }), {
             // TODO: replace with `this.` and add setters that call this.update()
             includeProps: true,
             includeState: false,
-            replaceWith: 'this.props.',
+            replaceWith: context + 'props.',
+            contextVars: contextVars,
+            context: context,
         });
     }
     return code;
@@ -166,31 +189,23 @@ var addOnChangeJs = function (id, options, code) {
 };
 // TODO: spread support
 var blockToHtml = function (json, options, blockOptions) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g;
     if (blockOptions === void 0) { blockOptions = {}; }
+    var ComponentName = blockOptions.ComponentName;
     var scopeVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.scopeVars) || [];
     var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     var hasData = Object.keys(json.bindings).length;
+    var hasDomState = /input|textarea|select/.test(json.name);
     var elId = '';
     if (hasData) {
         elId = getId(json, options);
-        json.properties['data-name'] = elId;
-    }
-    if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.getId) {
-        elId = (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.getId(elId, json, options, {
-            hasData: hasData,
-            getId: getId,
-        });
-        json.properties['data-name'] = (_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.dataName(elId, json, options, {
-            hasData: hasData,
-            getId: getId,
-        });
+        json.properties['data-el'] = elId;
     }
-    if ((_e = (_d = options === null || options === void 0 ? void 0 : options.experimental) === null || _d === void 0 ? void 0 : _d.mappers) === null || _e === void 0 ? void 0 : _e[json.name]) {
-        return (_g = (_f = options === null || options === void 0 ? void 0 : options.experimental) === null || _f === void 0 ? void 0 : _f.mappers) === null || _g === void 0 ? void 0 : _g[json.name](json, options, elId, scopeVars, blockToHtml, addScopeVars, addOnChangeJs);
+    if (hasDomState) {
+        json.properties['data-dom-state'] = createGlobalId((ComponentName ? ComponentName + '-' : '') + json.name, options);
     }
     if (mappers[json.name]) {
-        return mappers[json.name](json, options, { scopeVars: scopeVars, childComponents: childComponents });
+        return mappers[json.name](json, options, blockOptions);
     }
     if ((0, is_children_1.default)(json)) {
         return "<slot></slot>";
@@ -198,48 +213,41 @@ var blockToHtml = function (json, options, blockOptions) {
     if (json.properties._text) {
         return json.properties._text;
     }
-    if ((_h = json.bindings._text) === null || _h === void 0 ? void 0 : _h.code) {
+    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
         // TO-DO: textContent might be better performance-wise
         addOnChangeJs(elId, options, "\n      ".concat(addScopeVars(scopeVars, json.bindings._text.code, function (scopeVar) {
-            return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getContext(el, \"").concat(scopeVar, "\");");
+            return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
         }), "\n      ").concat(options.format === 'class' ? 'this.' : '', "renderTextNode(el, ").concat(json.bindings._text.code, ");"));
-        return "<template data-name=\"".concat(elId, "\"><!-- ").concat((_j = json.bindings._text) === null || _j === void 0 ? void 0 : _j.code, " --></template>");
+        return "<template data-el=\"".concat(elId, "\"><!-- ").concat((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code, " --></template>");
     }
     var str = '';
     if (json.name === 'For') {
-        var forArguments = ((_k = json === null || json === void 0 ? void 0 : json.scope) === null || _k === void 0 ? void 0 : _k.For) || [];
+        var forArguments = ((_c = json === null || json === void 0 ? void 0 : json.scope) === null || _c === void 0 ? void 0 : _c.For) || [];
         var localScopeVars_1 = __spreadArray(__spreadArray([], scopeVars, true), forArguments, true);
         var argsStr = forArguments.map(function (arg) { return "\"".concat(arg, "\""); }).join(',');
         addOnChangeJs(elId, options, 
         // TODO: be smarter about rendering, deleting old items and adding new ones by
         // querying dom potentially
-        "\n        let array = ".concat((_l = json.bindings.each) === null || _l === void 0 ? void 0 : _l.code, ";\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, ").concat(argsStr, ");\n      "));
+        "\n        let array = ".concat((_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code, ";\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, ").concat(argsStr, ");\n      "));
         // TODO: decide on how to handle this...
-        str += "\n      <template data-name=\"".concat(elId, "\">");
+        str += "\n      <template data-el=\"".concat(elId, "\">");
         if (json.children) {
             str += json.children
                 .map(function (item) {
-                return blockToHtml(item, options, {
-                    scopeVars: localScopeVars_1,
-                    childComponents: childComponents,
-                });
+                return blockToHtml(item, options, __assign(__assign({}, blockOptions), { scopeVars: localScopeVars_1 }));
             })
                 .join('\n');
         }
         str += '</template>';
     }
     else if (json.name === 'Show') {
-        var whenCondition = ((_m = json.bindings.when) === null || _m === void 0 ? void 0 : _m.code).replace(/;$/, '');
+        var whenCondition = ((_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code).replace(/;$/, '');
         addOnChangeJs(elId, options, "\n        ".concat(addScopeVars(scopeVars, whenCondition, function (scopeVar) {
-            return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getContext(el, \"").concat(scopeVar, "\");");
+            return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
         }), "\n        const whenCondition = ").concat(whenCondition, ";\n        if (whenCondition) {\n          ").concat(options.format === 'class' ? 'this.' : '', "showContent(el)\n        }\n      "));
-        str += "<template data-name=\"".concat(elId, "\">");
+        str += "<template data-el=\"".concat(elId, "\">");
         if (json.children) {
-            str += json.children
-                .map(function (item) {
-                return blockToHtml(item, options, { scopeVars: scopeVars, childComponents: childComponents });
-            })
-                .join('\n');
+            str += json.children.map(function (item) { return blockToHtml(item, options, blockOptions); }).join('\n');
         }
         str += '</template>';
     }
@@ -262,9 +270,7 @@ var blockToHtml = function (json, options, blockOptions) {
             if (key.startsWith('$')) {
                 continue;
             }
-            var value = (json.properties[key] || '')
-                .replace(/"/g, '&quot;')
-                .replace(/\n/g, '\\n');
+            var value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
             str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         // batch all local vars within the bindings
@@ -272,11 +278,11 @@ var blockToHtml = function (json, options, blockOptions) {
         var injectOnce = false;
         var startInjectVar = '%%START_VARS%%';
         for (var key in json.bindings) {
-            if (key === '_spread' || key === 'ref' || key === 'css') {
+            if (key === '_spread' || key === 'css') {
                 continue;
             }
-            var value = (_o = json.bindings[key]) === null || _o === void 0 ? void 0 : _o.code;
-            var cusArg = ((_p = json.bindings[key]) === null || _p === void 0 ? void 0 : _p.arguments) || ['event'];
+            var value = (_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code;
+            var cusArg = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.arguments) || ['event'];
             // TODO: proper babel transform to replace. Util for this
             var useValue = value;
             if (key.startsWith('on')) {
@@ -285,19 +291,22 @@ var blockToHtml = function (json, options, blockOptions) {
                     event_1 = 'input';
                 }
                 var fnName = (0, lodash_1.camelCase)("on-".concat(elId, "-").concat(event_1));
-                var codeContent = (0, remove_surrounding_block_1.removeSurroundingBlock)(updateReferencesInCode(useValue, options));
+                var codeContent = (0, remove_surrounding_block_1.removeSurroundingBlock)(updateReferencesInCode(useValue, options, blockOptions));
                 options.js += "\n          // Event handler for '".concat(event_1, "' event on ").concat(elId, "\n          ").concat(options.format === 'class'
                     ? "this.".concat(fnName, " = (").concat(cusArg.join(','), ") => {")
                     : "function ".concat(fnName, " (").concat(cusArg.join(','), ") {"), "\n              ").concat(addScopeVars(scopeVars, codeContent, function (scopeVar) {
-                    return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getContext(event.currentTarget, \"").concat(scopeVar, "\");");
+                    return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(event.currentTarget, \"").concat(scopeVar, "\");");
                 }), "\n            ").concat(codeContent, "\n          }\n        ");
                 var fnIdentifier = "".concat(options.format === 'class' ? 'this.' : '').concat(fnName);
                 addOnChangeJs(elId, options, "\n            ;el.removeEventListener('".concat(event_1, "', ").concat(fnIdentifier, ");\n            ;el.addEventListener('").concat(event_1, "', ").concat(fnIdentifier, ");\n          "));
             }
+            else if (key === 'ref') {
+                str += " data-ref=\"".concat(ComponentName, "-").concat(useValue, "\" ");
+            }
             else {
                 if (key === 'style') {
                     addOnChangeJs(elId, options, "\n            ".concat(addScopeVars(scopeVars, useValue, function (scopeVar) {
-                        return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getContext(el, \"").concat(scopeVar, "\");");
+                        return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
                     }), "\n            ;Object.assign(el.style, ").concat(useValue, ");"));
                 }
                 else {
@@ -321,7 +330,7 @@ var blockToHtml = function (json, options, blockOptions) {
         if (codeBlock && testInjectVar.test(codeBlock)) {
             var localScopeVars = Object.keys(batchScopeVars_1);
             options.onChangeJsById[elId] = codeBlock.replace(startInjectVar, "\n        ".concat(addScopeVars(localScopeVars, true, function (scopeVar) {
-                return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getContext(el, \"").concat(scopeVar, "\");");
+                return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
             }), "\n        "));
         }
         if (jsx_1.selfClosingTags.has(json.name)) {
@@ -329,11 +338,7 @@ var blockToHtml = function (json, options, blockOptions) {
         }
         str += '>';
         if (json.children) {
-            str += json.children
-                .map(function (item) {
-                return blockToHtml(item, options, { scopeVars: scopeVars, childComponents: childComponents });
-            })
-                .join('\n');
+            str += json.children.map(function (item) { return blockToHtml(item, options, blockOptions); }).join('\n');
         }
         if (json.properties.innerHTML) {
             // Maybe put some kind of safety here for broken HTML such as no close tag
@@ -402,30 +407,26 @@ var componentToHtml = function (options) {
         var componentHasProps = (0, has_props_1.hasProps)(json);
         var hasLoop = (0, has_component_1.hasComponent)('For', json);
         var hasShow = (0, has_component_1.hasComponent)('Show', json);
+        var hasTextBinding = (0, has_bindings_text_1.hasBindingsText)(json);
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
-        var css = (0, collect_styles_1.collectCss)(json, {
+        var css = (0, collect_css_1.collectCss)(json, {
             prefix: options.prefix,
         });
-        var str = json.children
-            .map(function (item) { return blockToHtml(item, useOptions); })
-            .join('\n');
+        var str = json.children.map(function (item) { return blockToHtml(item, useOptions); }).join('\n');
         if (css.trim().length) {
             str += "<style>".concat(css, "</style>");
         }
         var hasChangeListeners = Boolean(Object.keys(useOptions.onChangeJsById).length);
         var hasGeneratedJs = Boolean(useOptions.js.trim().length);
-        if (hasChangeListeners ||
-            hasGeneratedJs ||
-            ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ||
-            hasLoop) {
+        if (hasChangeListeners || hasGeneratedJs || ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) || hasLoop) {
             // TODO: collectJs helper for here and liquid
             str += "\n      <script>\n      (() => {\n        const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
                 valueMapper: function (value) {
                     return addUpdateAfterSetInCode(updateReferencesInCode(value, useOptions), useOptions);
                 },
-            }), ";\n        ").concat(componentHasProps ? "let props = {};" : '', "\n        let nodesToDestroy = [];\n        let pendingUpdate = false;\n        ").concat(!((_d = (_c = json.hooks) === null || _c === void 0 ? void 0 : _c.onInit) === null || _d === void 0 ? void 0 : _d.code) ? '' : 'let onInitOnce = false;', "\n\n        function destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          nodesToDestroy.forEach(el => el.remove());\n          nodesToDestroy = [];\n        }\n        ").concat(!hasChangeListeners
+            }), ";\n        ").concat(componentHasProps ? "let props = {};" : '', "\n        let context = null;\n        let nodesToDestroy = [];\n        let pendingUpdate = false;\n        ").concat(!((_d = (_c = json.hooks) === null || _c === void 0 ? void 0 : _c.onInit) === null || _d === void 0 ? void 0 : _d.code) ? '' : 'let onInitOnce = false;', "\n\n        function destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          nodesToDestroy.forEach(el => el.remove());\n          nodesToDestroy = [];\n        }\n        ").concat(!hasChangeListeners
                 ? ''
                 : "\n        \n        // Function to update data bindings and loops\n        // call update() when you mutate state and need the updates to reflect\n        // in the dom\n        function update() {\n          if (pendingUpdate === true) {\n            return;\n          }\n          pendingUpdate = true;\n          ".concat(Object.keys(useOptions.onChangeJsById)
                     .map(function (key) {
@@ -433,7 +434,7 @@ var componentToHtml = function (options) {
                     if (!value) {
                         return '';
                     }
-                    return "\n              document.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(value, "\n              });\n            ");
+                    return "\n              document.querySelectorAll(\"[data-el='".concat(key, "']\").forEach((el) => {\n                ").concat(value, "\n              });\n            ");
                 })
                     .join('\n\n'), "\n\n          destroyAnyNodes();\n\n          ").concat(!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
                     ? ''
@@ -447,9 +448,11 @@ var componentToHtml = function (options) {
                 : // TODO: make prettier by grabbing only the function body
                     "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), " \n              "), "\n\n        ").concat(!hasShow
                 ? ''
-                : "\n          function showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              if (el?.scope) {\n                child.scope = el.scope;\n              }\n              nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }\n  \n        ", "\n        // Helper text DOM nodes\n        function renderTextNode(el, text) {\n          const textNode = document.createTextNode(text);\n          if (el?.scope) {\n            textNode.scope = el.scope\n          }\n          el.after(textNode);\n          nodesToDestroy.push(el.nextSibling);\n        }\n        ").concat(!hasLoop
+                : "\n          function showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              if (el?.scope) {\n                child.scope = el.scope;\n              }\n              if (el?.context) {\n                child.context = el.context;\n              }\n              nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }\n  \n        ", "\n        ").concat(!hasTextBinding
+                ? ''
+                : "\n          // Helper text DOM nodes\n          function renderTextNode(el, text) {\n            const textNode = document.createTextNode(text);\n            if (el?.scope) {\n              textNode.scope = el.scope\n            }\n            if (el?.context) {\n              child.context = el.context;\n            }\n            el.after(textNode);\n            nodesToDestroy.push(el.nextSibling);\n          }\n          ", "\n        ").concat(!hasLoop
                 ? ''
-                : "\n          // Helper to render loops\n          function renderLoop(template, array, itemName, itemIndex, collectionName) {\n            for (let [index, value] of array.entries()) {\n              const elementFragment = template.content.cloneNode(true);\n              const localScope = {};\n              let scope = localScope;\n              if (template?.scope) {\n                const getParent = {\n                  get(target, prop, receiver) {\n                    if (prop in target) {\n                      return target[prop];\n                    }\n                    if (prop in template.scope) {\n                      return template.scope[prop];\n                    }\n                    return target[prop];\n                  }\n                };\n                scope = new Proxy(localScope, getParent);\n              }\n              Array.from(elementFragment.childNodes).reversrEach((child) => {\n                if (itemName !== undefined) {\n                  scope[itemName] = value;\n                }\n                if (itemIndex !== undefined) {\n                  scope[itemIndex] = index;\n                }\n                if (collectionName !== undefined) {\n                  scope[collectionName] = array;\n                }\n                child.scope = scope;\n                this.nodesToDestroy.push(child);\n                template.after(child);\n              });\n            }\n          }\n\n          function getContext(el, name) {\n            do {\n              let value = el?.scope?.[name]\n              if (value !== undefined) {\n                return value\n              }\n            } while ((el = el.parentNode));\n          }\n        ", "\n      })()\n      </script>\n    ");
+                : "\n          // Helper to render loops\n          function renderLoop(template, array, itemName, itemIndex, collectionName) {\n            const collection = [];\n            for (let [index, value] of array.entries()) {\n              const elementFragment = template.content.cloneNode(true);\n              const children = Array.from(elementFragment.childNodes)\n              const localScope = {};\n              let scope = localScope;\n              if (template?.scope) {\n                const getParent = {\n                  get(target, prop, receiver) {\n                    if (prop in target) {\n                      return target[prop];\n                    }\n                    if (prop in template.scope) {\n                      return template.scope[prop];\n                    }\n                    return target[prop];\n                  }\n                };\n                scope = new Proxy(localScope, getParent);\n              }\n              children.forEach((child) => {\n                if (itemName !== undefined) {\n                  scope[itemName] = value;\n                }\n                if (itemIndex !== undefined) {\n                  scope[itemIndex] = index;\n                }\n                if (collectionName !== undefined) {\n                  scope[collectionName] = array;\n                }\n                child.scope = scope;\n                if (template.context) {\n                  child.context = template.context;\n                }\n                this.nodesToDestroy.push(child);\n                collection.unshift(child);\n              });\n              collection.forEach(child => template.after(child));\n            }\n          }\n\n          function getScope(el, name) {\n            do {\n              let value = el?.scope?.[name]\n              if (value !== undefined) {\n                return value\n              }\n            } while ((el = el.parentNode));\n          }\n        ", "\n      })()\n      </script>\n    ");
         }
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
@@ -482,49 +485,81 @@ exports.componentToHtml = componentToHtml;
 var componentToCustomElement = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
         var component = _a.component;
-        var kebabName = (0, lodash_2.kebabCase)(component.name);
+        var ComponentName = component.name;
+        var kebabName = (0, lodash_2.kebabCase)(ComponentName);
         var useOptions = __assign(__assign({ prefix: kebabName }, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
+        var _16 = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _16[0], hasPropRef = _16[1];
+        var contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
         var childComponents = getChildComponents(json, useOptions);
         var componentHasProps = (0, has_props_1.hasProps)(json);
+        var componentHasStatefulDom = (0, has_stateful_dom_1.hasStatefulDom)(json);
         var props = (0, get_props_1.getProps)(json);
+        // prevent jsx props from showing up as @Input
+        if (hasPropRef) {
+            props.delete(forwardProp);
+        }
         var outputs = (0, get_prop_functions_1.getPropFunctions)(json);
+        var domRefs = (0, get_refs_1.getRefs)(json);
+        var jsRefs = Object.keys(json.refs).filter(function (ref) { return !domRefs.has(ref); });
+        (0, map_refs_1.mapRefs)(json, function (refName) { return "self._".concat(refName); });
+        var context = contextVars.map(function (variableName) {
+            var _a, _b, _c;
+            var token = (_a = json === null || json === void 0 ? void 0 : json.context) === null || _a === void 0 ? void 0 : _a.get[variableName].name;
+            if ((_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.htmlContext) {
+                return (_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.htmlContext(variableName, token);
+            }
+            return "this.".concat(variableName, " = this.getContext(this._root, ").concat(token, ")");
+        });
+        var setContext = [];
+        for (var key in json.context.set) {
+            var _17 = json.context.set[key], name_1 = _17.name, value = _17.value, ref = _17.ref;
+            setContext.push({ name: name_1, value: value, ref: ref });
+        }
         addUpdateAfterSet(json, useOptions);
+        var hasContext = context.length;
         var hasLoop = (0, has_component_1.hasComponent)('For', json);
+        var hasScope = hasLoop;
         var hasShow = (0, has_component_1.hasComponent)('Show', json);
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
         var css = '';
-        if ((_b = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _b === void 0 ? void 0 : _b.css) {
-            css = (_c = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _c === void 0 ? void 0 : _c.css(json, useOptions, {
-                collectCss: collect_styles_1.collectCss,
+        if ((_c = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _c === void 0 ? void 0 : _c.css) {
+            css = (_d = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _d === void 0 ? void 0 : _d.css(json, useOptions, {
+                collectCss: collect_css_1.collectCss,
                 prefix: options.prefix,
             });
         }
         else {
-            css = (0, collect_styles_1.collectCss)(json, {
+            css = (0, collect_css_1.collectCss)(json, {
                 prefix: options.prefix,
             });
         }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var html = json.children
             .map(function (item) {
-            return blockToHtml(item, useOptions, { childComponents: childComponents, props: props, outputs: outputs });
+            return blockToHtml(item, useOptions, {
+                childComponents: childComponents,
+                props: props,
+                outputs: outputs,
+                ComponentName: ComponentName,
+                contextVars: contextVars,
+            });
         })
             .join('\n');
-        if ((_d = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _d === void 0 ? void 0 : _d.childrenHtml) {
-            html = (_e = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _e === void 0 ? void 0 : _e.childrenHtml(html, kebabName, json, useOptions);
+        if ((_e = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _e === void 0 ? void 0 : _e.childrenHtml) {
+            html = (_f = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _f === void 0 ? void 0 : _f.childrenHtml(html, kebabName, json, useOptions);
         }
-        if ((_f = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _f === void 0 ? void 0 : _f.cssHtml) {
-            html += (_g = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _g === void 0 ? void 0 : _g.cssHtml(css);
+        if ((_g = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _g === void 0 ? void 0 : _g.cssHtml) {
+            html += (_h = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _h === void 0 ? void 0 : _h.cssHtml(css);
         }
-        else {
+        else if (css.length) {
             html += "<style>".concat(css, "</style>");
         }
         if (options.prettier !== false) {
@@ -546,9 +581,17 @@ var componentToCustomElement = function (options) {
                 console.warn('Could not prettify', { string: html }, err);
             }
         }
-        var str = "\n      ".concat((0, render_imports_1.renderPreComponent)(json), "\n      /**\n       * Usage:\n       * \n       *  <").concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(component.name, " extends ").concat(((_h = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _h === void 0 ? void 0 : _h.classExtends)
-            ? (_j = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _j === void 0 ? void 0 : _j.classExtends(json, useOptions)
-            : 'HTMLElement', " {\n        constructor() {\n          super();\n          const self = this;\n          ").concat(!((_l = (_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onInit) === null || _l === void 0 ? void 0 : _l.code) ? '' : 'this.onInitOnce = false;', "\n          this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        var str = "\n      ".concat(json.types ? json.types.join('\n') : '', "\n      ").concat(json.interfaces ? (_j = json.interfaces) === null || _j === void 0 ? void 0 : _j.join('\n') : '', "\n      ").concat((0, render_imports_1.renderPreComponent)({ component: json, target: 'customElement' }), "\n      /**\n       * Usage:\n       * \n       *  <").concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(ComponentName, " extends ").concat(((_k = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _k === void 0 ? void 0 : _k.classExtends)
+            ? (_l = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _l === void 0 ? void 0 : _l.classExtends(json, useOptions)
+            : 'HTMLElement', " {\n        ").concat(Array.from(domRefs)
+            .map(function (ref) {
+            return "\n        get _".concat(ref, "() {\n          return this._root.querySelector(\"[data-ref='").concat(ComponentName, "-").concat(ref, "']\")\n        }\n            ");
+        })
+            .join('\n'), "\n\n        get _root() {\n          return this.shadowRoot || this;\n        }\n\n        constructor() {\n          super();\n          const self = this;\n          ").concat(
+        // TODO: more than one context not injector
+        setContext.length === 1 && ((_m = setContext === null || setContext === void 0 ? void 0 : setContext[0]) === null || _m === void 0 ? void 0 : _m.ref)
+            ? "this.context = ".concat(setContext[0].ref)
+            : '', "\n\n          ").concat(!((_p = (_o = json.hooks) === null || _o === void 0 ? void 0 : _o.onInit) === null || _p === void 0 ? void 0 : _p.code) ? '' : 'this.onInitOnce = false;', "\n\n          this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             valueMapper: function (value) {
                 return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
                     includeProps: false,
@@ -560,41 +603,78 @@ var componentToCustomElement = function (options) {
                     includeProps: true,
                     includeState: false,
                     replaceWith: 'self.props.',
+                    contextVars: contextVars,
+                    // correctly ref the class not state object
+                    context: 'self.',
                 });
             },
-        }), ";\n          ").concat(componentHasProps /* TODO: accept these as attributes/properties on the custom element */
-            ? "this.props = {};"
-            : '', "\n\n\n          // used to keep track of all nodes created by show/for\n          this.nodesToDestroy = [];\n          // batch updates\n          this.pendingUpdate = false;\n          ").concat(((_m = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _m === void 0 ? void 0 : _m.componentConstructor)
-            ? (_o = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _o === void 0 ? void 0 : _o.componentConstructor(json, useOptions)
-            : '', "\n\n          ").concat(useOptions.js, "\n\n          if (").concat((_p = json.meta.useMetadata) === null || _p === void 0 ? void 0 : _p.isAttachedToShadowDom, ") {\n            this.attachShadow({ mode: 'open' })\n          }\n        }\n\n\n        ").concat(!((_q = json.hooks.onUnMount) === null || _q === void 0 ? void 0 : _q.code)
+        }), ";\n          if (!this.props) {\n            this.props = {};\n          }\n          ").concat(!componentHasProps
+            ? ''
+            : "\n          this.componentProps = [".concat(Array.from(props)
+                .map(function (prop) { return "\"".concat(prop, "\""); })
+                .join(','), "];\n          "), "\n\n          ").concat(!((_q = json.hooks.onUpdate) === null || _q === void 0 ? void 0 : _q.length)
             ? ''
-            : "\n          disconnectedCallback() {\n            ".concat(((_r = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _r === void 0 ? void 0 : _r.disconnectedCallback)
-                ? (_s = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _s === void 0 ? void 0 : _s.disconnectedCallback(json, useOptions)
-                : "\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions), "\n            this.destroyAnyNodes(); // clean up nodes when component is destroyed\n            ").concat(!((_u = (_t = json.hooks) === null || _t === void 0 ? void 0 : _t.onInit) === null || _u === void 0 ? void 0 : _u.code) ? '' : 'this.onInitOnce = false;', "\n            "), "\n          }\n          "), "\n\n        destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          this.nodesToDestroy.forEach(el => el.remove());\n          this.nodesToDestroy = [];\n        }\n\n        get _root() {\n          return this.shadowRoot || this;\n        }\n\n        connectedCallback() {\n          ").concat(((_v = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _v === void 0 ? void 0 : _v.connectedCallbackUpdate)
-            ? (_w = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _w === void 0 ? void 0 : _w.connectedCallbackUpdate(json, html, useOptions)
-            : "\n              this._root.innerHTML = `\n      ".concat(html, "`;\n              this.pendingUpdate = true;\n              this.render();\n              ").concat(!((_y = (_x = json.hooks) === null || _x === void 0 ? void 0 : _x.onInit) === null || _y === void 0 ? void 0 : _y.code) ? '' : 'this.onInit();', "\n              this.onMount();\n              this.pendingUpdate = false;\n              this.update();\n              "), "\n        }\n        ").concat(!((_0 = (_z = json.hooks) === null || _z === void 0 ? void 0 : _z.onInit) === null || _0 === void 0 ? void 0 : _0.code)
+            : "\n            this.updateDeps = [".concat((_r = json.hooks.onUpdate) === null || _r === void 0 ? void 0 : _r.map(function (hook) { return updateReferencesInCode((hook === null || hook === void 0 ? void 0 : hook.deps) || '[]', useOptions); }).join(','), "];\n            "), "\n\n          // used to keep track of all nodes created by show/for\n          this.nodesToDestroy = [];\n          // batch updates\n          this.pendingUpdate = false;\n          ").concat(((_s = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _s === void 0 ? void 0 : _s.componentConstructor)
+            ? (_t = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _t === void 0 ? void 0 : _t.componentConstructor(json, useOptions)
+            : '', "\n\n          ").concat(useOptions.js, "\n\n          ").concat(jsRefs
+            .map(function (ref) {
+            var _a;
+            // const typeParameter = json['refs'][ref]?.typeParameter || '';
+            var argument = ((_a = json['refs'][ref]) === null || _a === void 0 ? void 0 : _a.argument) || 'null';
+            return "this._".concat(ref, " = ").concat(argument);
+        })
+            .join('\n'), "\n\n          if (").concat((_u = json.meta.useMetadata) === null || _u === void 0 ? void 0 : _u.isAttachedToShadowDom, ") {\n            this.attachShadow({ mode: 'open' })\n          }\n        }\n\n\n        ").concat(!((_v = json.hooks.onUnMount) === null || _v === void 0 ? void 0 : _v.code)
+            ? ''
+            : "\n          disconnectedCallback() {\n            ".concat(((_w = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _w === void 0 ? void 0 : _w.disconnectedCallback)
+                ? (_x = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _x === void 0 ? void 0 : _x.disconnectedCallback(json, useOptions)
+                : "\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions, {
+                    contextVars: contextVars,
+                }), "\n            this.destroyAnyNodes(); // clean up nodes when component is destroyed\n            ").concat(!((_z = (_y = json.hooks) === null || _y === void 0 ? void 0 : _y.onInit) === null || _z === void 0 ? void 0 : _z.code) ? '' : 'this.onInitOnce = false;', "\n            "), "\n          }\n          "), "\n\n        destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          this.nodesToDestroy.forEach(el => el.remove());\n          this.nodesToDestroy = [];\n        }\n\n        connectedCallback() {\n          ").concat(context.join('\n'), "\n          ").concat(!componentHasProps
+            ? ''
+            : "\n          this.getAttributeNames().forEach((attr) => {\n            const jsVar = attr.replace(/-/g, '');\n            const regexp = new RegExp(jsVar, 'i');\n            this.componentProps.forEach(prop => {\n              if (regexp.test(prop)) {\n                const attrValue = this.getAttribute(attr);\n                if (this.props[prop] !== attrValue) {\n                  this.props[prop] = attrValue;\n                }\n              }\n            });\n          });\n          ", "\n          ").concat(((_0 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _0 === void 0 ? void 0 : _0.connectedCallbackUpdate)
+            ? (_1 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _1 === void 0 ? void 0 : _1.connectedCallbackUpdate(json, html, useOptions)
+            : "\n              this._root.innerHTML = `\n      ".concat(html, "`;\n              this.pendingUpdate = true;\n              ").concat(!((_3 = (_2 = json.hooks) === null || _2 === void 0 ? void 0 : _2.onInit) === null || _3 === void 0 ? void 0 : _3.code) ? '' : 'this.onInit();', "\n              this.render();\n              this.onMount();\n              this.pendingUpdate = false;\n              this.update();\n              "), "\n        }\n        ").concat(!((_5 = (_4 = json.hooks) === null || _4 === void 0 ? void 0 : _4.onInit) === null || _5 === void 0 ? void 0 : _5.code)
             ? ''
-            : "\n            onInit() {\n              ".concat(!((_2 = (_1 = json.hooks) === null || _1 === void 0 ? void 0 : _1.onInit) === null || _2 === void 0 ? void 0 : _2.code)
+            : "\n            onInit() {\n              ".concat(!((_7 = (_6 = json.hooks) === null || _6 === void 0 ? void 0 : _6.onInit) === null || _7 === void 0 ? void 0 : _7.code)
                 ? ''
-                : "\n                  if (!this.onInitOnce) {\n                    ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_4 = (_3 = json.hooks) === null || _3 === void 0 ? void 0 : _3.onInit) === null || _4 === void 0 ? void 0 : _4.code, useOptions), useOptions), "\n                    this.onInitOnce = true;\n                  }"), "\n            }\n            "), "\n\n        ").concat(!hasShow
+                : "\n                  if (!this.onInitOnce) {\n                    ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_9 = (_8 = json.hooks) === null || _8 === void 0 ? void 0 : _8.onInit) === null || _9 === void 0 ? void 0 : _9.code, useOptions), useOptions, {
+                    contextVars: contextVars,
+                }), "\n                    this.onInitOnce = true;\n                  }"), "\n            }\n            "), "\n\n        ").concat(!hasShow
             ? ''
-            : "\n          showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              if (el?.scope) {\n                child.scope = el.scope;\n              }\n              this.nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }", "\n        ").concat(!((_5 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _5 === void 0 ? void 0 : _5.attributeChangedCallback)
+            : "\n          showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              if (el?.scope) {\n                child.scope = el.scope;\n              }\n              if (el?.context) {\n                child.context = el.context;\n              }\n              this.nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }", "\n        ").concat(!((_10 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _10 === void 0 ? void 0 : _10.attributeChangedCallback)
             ? ''
-            : "\n          attributeChangedCallback(name, oldValue, newValue) {\n            ".concat((_6 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _6 === void 0 ? void 0 : _6.attributeChangedCallback(['name', 'oldValue', 'newValue'], json, useOptions), "\n          }\n          "), "\n\n        onMount() {\n          ").concat(!((_7 = json.hooks.onMount) === null || _7 === void 0 ? void 0 : _7.code)
+            : "\n          attributeChangedCallback(name, oldValue, newValue) {\n            ".concat((_11 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _11 === void 0 ? void 0 : _11.attributeChangedCallback(['name', 'oldValue', 'newValue'], json, useOptions), "\n          }\n          "), "\n\n        onMount() {\n          ").concat(!((_12 = json.hooks.onMount) === null || _12 === void 0 ? void 0 : _12.code)
             ? ''
             : // TODO: make prettier by grabbing only the function body
-                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), "\n                "), "\n        }\n\n        onUpdate() {\n          ").concat(!((_8 = json.hooks.onUpdate) === null || _8 === void 0 ? void 0 : _8.length)
+                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions, {
+                    contextVars: contextVars,
+                }), "\n                "), "\n        }\n\n        onUpdate() {\n          ").concat(!((_13 = json.hooks.onUpdate) === null || _13 === void 0 ? void 0 : _13.length)
             ? ''
-            : "\n            ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
-                code += updateReferencesInCode(hook.code, useOptions);
+            : "\n              const self = this;\n            ".concat(json.hooks.onUpdate.reduce(function (code, hook, index) {
+                // create check update
+                if (hook === null || hook === void 0 ? void 0 : hook.deps) {
+                    code += "\n                ;(function (__prev, __next) {\n                  const __hasChange = __prev.find((val, index) => val !== __next[index]);\n                  if (__hasChange !== undefined) {\n                    ".concat(updateReferencesInCode(hook.code, useOptions, {
+                        contextVars: contextVars,
+                        context: 'self.',
+                    }), "\n                    self.updateDeps[").concat(index, "] = __next;\n                  }\n                }(self.updateDeps[").concat(index, "], ").concat(updateReferencesInCode((hook === null || hook === void 0 ? void 0 : hook.deps) || '[]', useOptions, {
+                        contextVars: contextVars,
+                        context: 'self.',
+                    }), "));\n                ");
+                }
+                else {
+                    code += "\n                ".concat(updateReferencesInCode(hook.code, useOptions, {
+                        contextVars: contextVars,
+                        context: 'self.',
+                    }), "\n                ");
+                }
                 return code + '\n';
-            }, ''), " \n            "), "\n        }\n\n        update() {\n          if (this.pendingUpdate === true) {\n            return;\n          }\n          this.pendingUpdate = true;\n          ").concat(!((_9 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _9 === void 0 ? void 0 : _9.shouldComponentUpdateStart)
+            }, ''), " \n            "), "\n        }\n\n        update() {\n          if (this.pendingUpdate === true) {\n            return;\n          }\n          this.pendingUpdate = true;\n          this.render();\n          this.onUpdate();\n          this.pendingUpdate = false;\n        }\n\n        render() {\n          ").concat(!componentHasStatefulDom
+            ? ''
+            : "\n          // grab previous input state\n          const preStateful = this.getStateful(this._root);\n          const preValues = this.prepareHydrate(preStateful);\n          ", "\n\n          // re-rendering needs to ensure that all nodes generated by for/show are refreshed\n          this.destroyAnyNodes();\n          this.updateBindings();\n\n          ").concat(!componentHasStatefulDom
             ? ''
-            : "\n            ".concat((_10 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _10 === void 0 ? void 0 : _10.shouldComponentUpdateStart(json, useOptions), "\n            "), "\n          this.render();\n          this.onUpdate();\n          ").concat(!((_11 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _11 === void 0 ? void 0 : _11.shouldComponentUpdateEnd)
+            : "\n          // hydrate input state\n          if (preValues.length) {\n            const nextStateful = this.getStateful(this._root);\n            this.hydrateDom(preValues, nextStateful);\n          }\n          ", "\n        }\n        ").concat(!componentHasStatefulDom
             ? ''
-            : "\n            ".concat((_12 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _12 === void 0 ? void 0 : _12.shouldComponentUpdateEnd(json, useOptions), "\n            "), "\n          this.pendingUpdate = false;\n        }\n\n        render() {\n          // re-rendering needs to ensure that all nodes generated by for/show are refreshed\n          this.destroyAnyNodes();\n          ").concat(((_13 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _13 === void 0 ? void 0 : _13.updateBindings)
-            ? (_14 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _14 === void 0 ? void 0 : _14.updateBindings(json, useOptions)
-            : 'this.updateBindings();', "\n        }\n\n        updateBindings() {\n          ").concat(Object.keys(useOptions.onChangeJsById)
+            : "\n            getStateful(el) {\n              const stateful = el.querySelectorAll('[data-dom-state]');\n              return stateful ? Array.from(stateful) : [];\n            }\n            prepareHydrate(stateful) {\n              return stateful.map(el => {\n                return {\n                  id: el.dataset.domState,\n                  value: el.value,\n                  active: document.activeElement === el,\n                  selectionStart: el.selectionStart\n                };\n              });\n            }\n            hydrateDom(preValues, stateful) {\n              return stateful.map((el, index) => {\n                const prev = preValues.find((prev) => el.dataset.domState === prev.id);\n                if (prev) {\n                  el.value = prev.value;\n                  if (prev.active) {\n                     el.focus();\n                     el.selectionStart = prev.selectionStart;\n                  }\n                }\n              });\n            }\n          ", "\n\n        updateBindings() {\n          ").concat(Object.keys(useOptions.onChangeJsById)
             .map(function (key) {
             var _a, _b, _c, _d, _e, _f, _g;
             var value = useOptions.onChangeJsById[key];
@@ -607,17 +687,23 @@ var componentToCustomElement = function (options) {
                 code = (_e = (_d = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _d === void 0 ? void 0 : _d.updateBindings) === null || _e === void 0 ? void 0 : _e.code(key, value, useOptions);
             }
             else {
-                code = updateReferencesInCode(value, useOptions);
+                code = updateReferencesInCode(value, useOptions, {
+                    contextVars: contextVars,
+                });
             }
             return "\n              ".concat(((_f = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _f === void 0 ? void 0 : _f.generateQuerySelectorAll)
                 ? "\n              ".concat((_g = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _g === void 0 ? void 0 : _g.generateQuerySelectorAll(key, code), "\n              ")
-                : "              \n              this._root.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(code, "\n              })\n              "), "\n            ");
+                : "              \n              this._root.querySelectorAll(\"[data-el='".concat(key, "']\").forEach((el) => {\n                ").concat(code, "\n              })\n              "), "\n            ");
         })
-            .join('\n\n'), "\n        }\n\n        // Helper to render content\n        renderTextNode(el, text) {\n          const textNode = document.createTextNode(text);\n          if (el?.scope) {\n            textNode.scope = el.scope;\n          }\n          el.after(textNode);\n          this.nodesToDestroy.push(el.nextSibling);\n        }\n\n        ").concat(!hasLoop
+            .join('\n\n'), "\n        }\n\n        // Helper to render content\n        renderTextNode(el, text) {\n          const textNode = document.createTextNode(text);\n          if (el?.scope) {\n            textNode.scope = el.scope;\n          }\n          if (el?.context) {\n            textNode.context = el.context;\n          }\n          el.after(textNode);\n          this.nodesToDestroy.push(el.nextSibling);\n        }\n        ").concat(!hasContext
+            ? ''
+            : "\n            // get Context Helper\n            getContext(el, token) {\n              do {\n                let value;\n                if (el?.context?.get) {\n                  value = el.context.get(token);\n                } else if (el?.context?.[token]) {\n                  value = el.context[token];\n                }\n                if (value !== undefined) {\n                  return value;\n                }\n              } while ((el = el.parentNode));\n            }\n            ", "\n        ").concat(!hasScope
+            ? ''
+            : "\n            // scope helper\n            getScope(el, name) {\n              do {\n                let value = el?.scope?.[name]\n                if (value !== undefined) {\n                  return value\n                }\n              } while ((el = el.parentNode));\n            }\n            ", "\n\n        ").concat(!hasLoop
             ? ''
-            : "\n\n          // Helper to render loops\n          renderLoop(template, array, itemName, itemIndex, collectionName) {\n            const collection = [];\n            for (let [index, value] of array.entries()) {\n              const elementFragment = template.content.cloneNode(true);\n              const children = Array.from(elementFragment.childNodes)\n              const localScope = {};\n              let scope = localScope;\n              if (template?.scope) {\n                const getParent = {\n                  get(target, prop, receiver) {\n                    if (prop in target) {\n                      return target[prop];\n                    }\n                    if (prop in template.scope) {\n                      return template.scope[prop];\n                    }\n                    return target[prop];\n                  }\n                };\n                scope = new Proxy(localScope, getParent);\n              }\n              children.forEach((child) => {\n                if (itemName !== undefined) {\n                  scope[itemName] = value;\n                }\n                if (itemIndex !== undefined) {\n                  scope[itemIndex] = index;\n                }\n                if (collectionName !== undefined) {\n                  scope[collectionName] = array;\n                }\n                child.scope = scope;\n                this.nodesToDestroy.push(child);\n                collection.push(child)\n              });\n            }\n            collection.reverse().forEach(child => template.after(child));\n          }\n        \n          getContext(el, name) {\n            do {\n              let value = el?.scope?.[name]\n              if (value !== undefined) {\n                return value\n              }\n            } while ((el = el.parentNode));\n          }\n        ", "\n      }\n\n      ").concat(((_15 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _15 === void 0 ? void 0 : _15.customElementsDefine)
-            ? (_16 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _16 === void 0 ? void 0 : _16.customElementsDefine(kebabName, component, useOptions)
-            : "customElements.define('".concat(kebabName, "', ").concat(component.name, ");"), "\n    ");
+            : "\n\n          // Helper to render loops\n          renderLoop(template, array, itemName, itemIndex, collectionName) {\n            const collection = [];\n            for (let [index, value] of array.entries()) {\n              const elementFragment = template.content.cloneNode(true);\n              const children = Array.from(elementFragment.childNodes)\n              const localScope = {};\n              let scope = localScope;\n              if (template?.scope) {\n                const getParent = {\n                  get(target, prop, receiver) {\n                    if (prop in target) {\n                      return target[prop];\n                    }\n                    if (prop in template.scope) {\n                      return template.scope[prop];\n                    }\n                    return target[prop];\n                  }\n                };\n                scope = new Proxy(localScope, getParent);\n              }\n              children.forEach((child) => {\n                if (itemName !== undefined) {\n                  scope[itemName] = value;\n                }\n                if (itemIndex !== undefined) {\n                  scope[itemIndex] = index;\n                }\n                if (collectionName !== undefined) {\n                  scope[collectionName] = array;\n                }\n                child.scope = scope;\n                if (template.context) {\n                  child.context = context;\n                }\n                this.nodesToDestroy.push(child);\n                collection.unshift(child)\n              });\n            }\n            collection.forEach(child => template.after(child));\n          }\n        ", "\n      }\n\n      ").concat(((_14 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _14 === void 0 ? void 0 : _14.customElementsDefine)
+            ? (_15 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _15 === void 0 ? void 0 : _15.customElementsDefine(kebabName, component, useOptions)
+            : "customElements.define('".concat(kebabName, "', ").concat(ComponentName, ");"), "\n    ");
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }