@builder.io/mitosis 0.0.106 → 0.0.107-0

package/dist/src/constants/hooks.d.ts

@@ -5,4 +5,11 @@ export declare const HOOKS: {
     readonly REF: "useRef";
     readonly DEFAULT_PROPS: "useDefaultProps";
     readonly STYLE: "useStyle";
+    readonly TARGET: "useTarget";
+    readonly METADATA: "useMetadata";
+    readonly MOUNT: "onMount";
+    readonly UNMOUNT: "onUnMount";
+    readonly UPDATE: "onUpdate";
+    readonly INIT: "onInit";
+    readonly SET_CONTEXT: "setContext";
 };

package/dist/src/constants/hooks.js

@@ -8,4 +8,11 @@ exports.HOOKS = {
     REF: 'useRef',
     DEFAULT_PROPS: 'useDefaultProps',
     STYLE: 'useStyle',
+    TARGET: 'useTarget',
+    METADATA: 'useMetadata',
+    MOUNT: 'onMount',
+    UNMOUNT: 'onUnMount',
+    UPDATE: 'onUpdate',
+    INIT: 'onInit',
+    SET_CONTEXT: 'setContext',
 };

package/dist/src/constants/html_tags.d.ts

@@ -1 +1,2 @@
 export declare const VALID_HTML_TAGS: string[];
+export declare const SELF_CLOSING_HTML_TAGS: Set<string>;

package/dist/src/constants/html_tags.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VALID_HTML_TAGS = void 0;
+exports.SELF_CLOSING_HTML_TAGS = exports.VALID_HTML_TAGS = void 0;
 exports.VALID_HTML_TAGS = [
     'html',
     'base',
@@ -180,3 +180,19 @@ exports.VALID_HTML_TAGS = [
     'use',
     'view',
 ];
+exports.SELF_CLOSING_HTML_TAGS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+]);

package/dist/src/generators/alpine/generate.js

@@ -14,18 +14,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAlpine = exports.isValidAlpineBinding = exports.checkIsComponentNode = void 0;
 var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
+var html_tags_1 = require("../../constants/html_tags");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var dash_case_1 = require("../../helpers/dash-case");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var get_refs_1 = require("../../helpers/get-refs");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var merge_options_1 = require("../../helpers/merge-options");
 var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
 var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var collect_css_1 = require("../../helpers/styles/collect-css");
 var plugins_1 = require("../../modules/plugins");
-var jsx_1 = require("../../parsers/jsx");
 var mitosis_node_1 = require("../../types/mitosis-node");
 var render_mount_hook_1 = require("./render-mount-hook");
 var render_update_hooks_1 = require("./render-update-hooks");
@@ -154,14 +155,15 @@ var blockToAlpine = function (json, options) {
             str += " ".concat(bind).concat(bindingType === 'spread' ? '' : key, "=\"").concat(useValue, "\" ").replace(':=', '=');
         }
     }
-    return jsx_1.selfClosingTags.has(json.name)
+    return html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)
         ? "".concat(str, " />")
         : "".concat(str, ">").concat(((_b = json.children) !== null && _b !== void 0 ? _b : []).map(function (item) { return blockToAlpine(item, options); }).join('\n'), "</").concat(json.name, ">");
 };
-var componentToAlpine = function (options) {
-    if (options === void 0) { options = {}; }
+var componentToAlpine = function (_options) {
+    if (_options === void 0) { _options = {}; }
     return function (_a) {
         var component = _a.component;
+        var options = (0, merge_options_1.initializeOptions)('alpine', _options);
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);

package/dist/src/generators/angular.js

@@ -53,7 +53,6 @@ var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var collect_css_1 = require("../helpers/styles/collect-css");
 var plugins_1 = require("../modules/plugins");
-var jsx_1 = require("../parsers/jsx");
 var mitosis_node_1 = require("../types/mitosis-node");
 var merge_options_1 = require("../helpers/merge-options");
 var process_code_1 = require("../helpers/plugins/process-code");
@@ -189,7 +188,7 @@ var blockToAngular = function (json, options, blockOptions) {
                 str += "[".concat(key, "]=\"").concat(code, "\" ");
             }
         }
-        if (jsx_1.selfClosingTags.has(json.name)) {
+        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
             return str + ' />';
         }
         str += '>';
@@ -215,22 +214,22 @@ var processAngularCode = function (_a) {
         }), function (newCode) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith: replaceWith }); });
     };
 };
+var DEFAULT_OPTIONS = {
+    preserveImports: false,
+    preserveFileExtensions: false,
+};
 var componentToAngular = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var _component = _a.component;
-        var DEFAULT_OPTIONS = {
-            preserveImports: false,
-            preserveFileExtensions: false,
-        };
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(_component);
         var contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
         var metaOutputVars = ((_d = (_c = json.meta) === null || _c === void 0 ? void 0 : _c.useMetadata) === null || _d === void 0 ? void 0 : _d.outputs) || [];
         var outputVars = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], metaOutputVars, true), (0, get_prop_functions_1.getPropFunctions)(json), true));
         var stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
-        var options = (0, merge_options_1.mergeOptions)(__assign(__assign({}, DEFAULT_OPTIONS), userOptions));
+        var options = (0, merge_options_1.initializeOptions)('angular', DEFAULT_OPTIONS, userOptions);
         options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
             (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
                 switch (codeType) {
@@ -270,6 +269,7 @@ var componentToAngular = function (userOptions) {
                     case 'state':
                     case 'properties':
                     case 'dynamic-jsx-elements':
+                    case 'types':
                         return function (x) { return x; };
                 }
             }),

package/dist/src/generators/context/svelte.d.ts

@@ -1,7 +1,11 @@
+import { MitosisContext } from '../../types/mitosis-context';
 import { BaseTranspilerOptions } from '../../types/transpiler';
+interface ContextToSvelteOptions extends Pick<BaseTranspilerOptions, 'prettier'> {
+}
 /**
  * TO-DO: support types
  */
-export declare const contextToSvelte: (options: Pick<BaseTranspilerOptions, "prettier">) => ({ context }: {
-    context: import("../../types/mitosis-context").MitosisContext;
+export declare const contextToSvelte: (options: ContextToSvelteOptions) => ({ context }: {
+    context: MitosisContext;
 }) => string;
+export {};

package/dist/src/generators/context/svelte.js

@@ -1,8 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToSvelte = void 0;
-var context_with_symbol_key_1 = require("./helpers/context-with-symbol-key");
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 /**
  * TO-DO: support types
  */
-exports.contextToSvelte = context_with_symbol_key_1.getContextWithSymbolKey;
+var contextToSvelte = function (options) {
+    return function (_a) {
+        var context = _a.context;
+        var isReactive = context.type === 'reactive';
+        var str = "\nconst key = Symbol();  \n".concat(isReactive ? 'import {writable} from "svelte/store";' : '', "\n\nexport default {\n  ").concat(context.name, ": ").concat([
+            isReactive && 'writable(',
+            (0, get_state_object_string_1.stringifyContextValue)(context.value),
+            isReactive && ')',
+        ]
+            .filter(Boolean)
+            .join(''), ", \n  key \n}\n");
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'), // To support running in browsers
+                    ],
+                });
+            }
+            catch (err) {
+                console.error('Format error for file:', str);
+                throw err;
+            }
+        }
+        return str;
+    };
+};
+exports.contextToSvelte = contextToSvelte;

package/dist/src/generators/helpers/context.d.ts

@@ -1,4 +1,8 @@
-import { MitosisComponent } from '../../types/mitosis-component';
+import { ContextGetInfo, ContextSetInfo, MitosisComponent, ReactivityType } from '../../types/mitosis-component';
 export declare const hasContext: (component: MitosisComponent) => boolean;
 export declare const hasSetContext: (component: MitosisComponent) => boolean;
 export declare const hasGetContext: (component: MitosisComponent) => boolean;
+export declare const getContextType: ({ component, context, }: {
+    component: MitosisComponent;
+    context: ContextGetInfo | ContextSetInfo;
+}) => ReactivityType;

package/dist/src/generators/helpers/context.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasGetContext = exports.hasSetContext = exports.hasContext = void 0;
+exports.getContextType = exports.hasGetContext = exports.hasSetContext = exports.hasContext = void 0;
 var hasContext = function (component) {
     return (0, exports.hasSetContext)(component) || (0, exports.hasGetContext)(component);
 };
@@ -13,3 +13,10 @@ var hasGetContext = function (component) {
     return Object.keys(component.context.get).length > 0;
 };
 exports.hasGetContext = hasGetContext;
+var getContextType = function (_a) {
+    var _b, _c;
+    var component = _a.component, context = _a.context;
+    // TO-DO: remove useMetadata check if no longer needed.
+    return ((_c = (_b = component.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.contextTypes) === null || _c === void 0 ? void 0 : _c[context.name]) || context.type || 'normal';
+};
+exports.getContextType = getContextType;

package/dist/src/generators/html.js

@@ -25,9 +25,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToCustomElement = exports.componentToHtml = void 0;
 var core_1 = require("@babel/core");
+var function_1 = require("fp-ts/lib/function");
 var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
 var traverse_1 = __importDefault(require("traverse"));
+var html_tags_1 = require("../constants/html_tags");
 var babel_transform_1 = require("../helpers/babel-transform");
 var dash_case_1 = require("../helpers/dash-case");
 var fast_clone_1 = require("../helpers/fast-clone");
@@ -45,16 +47,15 @@ var is_component_1 = require("../helpers/is-component");
 var is_html_attribute_1 = require("../helpers/is-html-attribute");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var map_refs_1 = require("../helpers/map-refs");
+var merge_options_1 = require("../helpers/merge-options");
+var for_1 = require("../helpers/nodes/for");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var render_imports_1 = require("../helpers/render-imports");
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var collect_css_1 = require("../helpers/styles/collect-css");
 var plugins_1 = require("../modules/plugins");
-var jsx_1 = require("../parsers/jsx");
 var mitosis_node_1 = require("../types/mitosis-node");
-var function_1 = require("fp-ts/lib/function");
-var for_1 = require("../helpers/nodes/for");
 var isAttribute = function (key) {
     return /-/.test(key);
 };
@@ -352,7 +353,7 @@ var blockToHtml = function (json, options, blockOptions) {
                 return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
             }), "\n        "));
         }
-        if (jsx_1.selfClosingTags.has(json.name)) {
+        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
             return str + ' />';
         }
         str += '>';
@@ -413,17 +414,17 @@ function addUpdateAfterSetInCode(code, options, useString) {
 }
 var htmlDecode = function (html) { return html.replace(/"/gi, '"'); };
 // TODO: props support via custom elements
-var componentToHtml = function (options) {
-    if (options === void 0) { options = {}; }
+var componentToHtml = function (_options) {
+    if (_options === void 0) { _options = {}; }
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var component = _a.component;
-        var useOptions = __assign(__assign({}, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'script' });
+        var options = (0, merge_options_1.initializeOptions)('html', __assign(__assign({}, _options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'script' }));
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
-        addUpdateAfterSet(json, useOptions);
+        addUpdateAfterSet(json, 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);
@@ -434,23 +435,23 @@ var componentToHtml = function (options) {
         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, options); }).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);
+        var hasChangeListeners = Boolean(Object.keys(options.onChangeJsById).length);
+        var hasGeneratedJs = Boolean(options.js.trim().length);
         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);
+                    return addUpdateAfterSetInCode(updateReferencesInCode(value, options), options);
                 },
             }), ";\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)
+                : "\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(options.onChangeJsById)
                     .map(function (key) {
-                    var value = useOptions.onChangeJsById[key];
+                    var value = options.onChangeJsById[key];
                     if (!value) {
                         return '';
                     }
@@ -459,14 +460,14 @@ var componentToHtml = function (options) {
                     .join('\n\n'), "\n\n          destroyAnyNodes();\n\n          ").concat(!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
                     ? ''
                     : "\n                ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
-                        code += addUpdateAfterSetInCode(updateReferencesInCode(hook.code, useOptions), useOptions);
+                        code += addUpdateAfterSetInCode(updateReferencesInCode(hook.code, options), options);
                         return code + '\n';
-                    }, ''), " \n                "), "\n\n          pendingUpdate = false;\n        }\n\n        ").concat(useOptions.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_g = (_f = json.hooks) === null || _f === void 0 ? void 0 : _f.onInit) === null || _g === void 0 ? void 0 : _g.code)
+                    }, ''), " \n                "), "\n\n          pendingUpdate = false;\n        }\n\n        ").concat(options.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_g = (_f = json.hooks) === null || _f === void 0 ? void 0 : _f.onInit) === null || _g === void 0 ? void 0 : _g.code)
                 ? ''
-                : "\n            if (!onInitOnce) {\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_j = (_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit) === null || _j === void 0 ? void 0 : _j.code, useOptions), useOptions), "\n              onInitOnce = true;\n            }\n            "), "\n\n        ").concat(!((_k = json.hooks.onMount) === null || _k === void 0 ? void 0 : _k.code)
+                : "\n            if (!onInitOnce) {\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_j = (_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit) === null || _j === void 0 ? void 0 : _j.code, options), options), "\n              onInitOnce = true;\n            }\n            "), "\n\n        ").concat(!((_k = json.hooks.onMount) === null || _k === void 0 ? void 0 : _k.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        ").concat(!hasShow
+                    "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, options), options), " \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              if (el?.context) {\n                child.context = el.context;\n              }\n              nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }\n  \n        ", "\n        ").concat(!hasTextBinding
                 ? ''
@@ -502,21 +503,21 @@ var componentToHtml = function (options) {
 };
 exports.componentToHtml = componentToHtml;
 // TODO: props support via custom elements
-var componentToCustomElement = function (options) {
-    if (options === void 0) { options = {}; }
+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;
         var component = _a.component;
         var ComponentName = component.name;
         var kebabName = (0, lodash_1.kebabCase)(ComponentName);
-        var useOptions = __assign(__assign({ prefix: kebabName }, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
+        var options = (0, merge_options_1.initializeOptions)('customElement', __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 _15 = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _15[0], hasPropRef = _15[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 childComponents = getChildComponents(json, options);
         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);
@@ -541,7 +542,7 @@ var componentToCustomElement = function (options) {
             var _16 = json.context.set[key], name_1 = _16.name, value = _16.value, ref = _16.ref;
             setContext.push({ name: name_1, value: value, ref: ref });
         }
-        addUpdateAfterSet(json, useOptions);
+        addUpdateAfterSet(json, options);
         var hasContext = context.length;
         var hasLoop = (0, has_component_1.hasComponent)('For', json);
         var hasScope = hasLoop;
@@ -550,8 +551,8 @@ var componentToCustomElement = function (options) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
         var css = '';
-        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, {
+        if ((_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.css) {
+            css = (_d = options === null || options === void 0 ? void 0 : options.experimental) === null || _d === void 0 ? void 0 : _d.css(json, options, {
                 collectCss: collect_css_1.collectCss,
                 prefix: options.prefix,
             });
@@ -564,7 +565,7 @@ var componentToCustomElement = function (options) {
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var html = json.children
             .map(function (item) {
-            return blockToHtml(item, useOptions, {
+            return blockToHtml(item, options, {
                 childComponents: childComponents,
                 props: props,
                 outputs: outputs,
@@ -573,11 +574,11 @@ var componentToCustomElement = function (options) {
             });
         })
             .join('\n');
-        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 ((_e = options === null || options === void 0 ? void 0 : options.experimental) === null || _e === void 0 ? void 0 : _e.childrenHtml) {
+            html = (_f = options === null || options === void 0 ? void 0 : options.experimental) === null || _f === void 0 ? void 0 : _f.childrenHtml(html, kebabName, json, options);
         }
-        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);
+        if ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.cssHtml) {
+            html += (_h = options === null || options === void 0 ? void 0 : options.experimental) === null || _h === void 0 ? void 0 : _h.cssHtml(css);
         }
         else if (css.length) {
             html += "<style>".concat(css, "</style>");
@@ -601,8 +602,8 @@ var componentToCustomElement = function (options) {
                 console.warn('Could not prettify', { string: html }, err);
             }
         }
-        var str = "\n      ".concat(json.types ? json.types.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(((_j = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _j === void 0 ? void 0 : _j.classExtends)
-            ? (_k = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _k === void 0 ? void 0 : _k.classExtends(json, useOptions)
+        var str = "\n      ".concat(json.types ? json.types.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(((_j = options === null || options === void 0 ? void 0 : options.experimental) === null || _j === void 0 ? void 0 : _j.classExtends)
+            ? (_k = options === null || options === void 0 ? void 0 : options.experimental) === null || _k === void 0 ? void 0 : _k.classExtends(json, options)
             : '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            ");
@@ -613,7 +614,7 @@ var componentToCustomElement = function (options) {
             ? "this.context = ".concat(setContext[0].ref)
             : '', "\n\n          ").concat(!((_o = (_m = json.hooks) === null || _m === void 0 ? void 0 : _m.onInit) === null || _o === void 0 ? void 0 : _o.code) ? '' : 'this.onInitOnce = false;', "\n\n          this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             valueMapper: function (value) {
-                return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
+                return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, options, 'self.update'), {
                     includeProps: false,
                     includeState: true,
                     // TODO: if it's an arrow function it's this.state.
@@ -640,9 +641,9 @@ var componentToCustomElement = function (options) {
                 .map(function (prop) { return "\"".concat(prop, "\""); })
                 .join(','), "];\n          "), "\n\n          ").concat(!((_p = json.hooks.onUpdate) === null || _p === void 0 ? void 0 : _p.length)
             ? ''
-            : "\n            this.updateDeps = [".concat((_q = json.hooks.onUpdate) === null || _q === void 0 ? void 0 : _q.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(((_r = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _r === void 0 ? void 0 : _r.componentConstructor)
-            ? (_s = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _s === void 0 ? void 0 : _s.componentConstructor(json, useOptions)
-            : '', "\n\n          ").concat(useOptions.js, "\n\n          ").concat(jsRefs
+            : "\n            this.updateDeps = [".concat((_q = json.hooks.onUpdate) === null || _q === void 0 ? void 0 : _q.map(function (hook) { return updateReferencesInCode((hook === null || hook === void 0 ? void 0 : hook.deps) || '[]', options); }).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(((_r = options === null || options === void 0 ? void 0 : options.experimental) === null || _r === void 0 ? void 0 : _r.componentConstructor)
+            ? (_s = options === null || options === void 0 ? void 0 : options.experimental) === null || _s === void 0 ? void 0 : _s.componentConstructor(json, options)
+            : '', "\n\n          ").concat(options.js, "\n\n          ").concat(jsRefs
             .map(function (ref) {
             var _a;
             // const typeParameter = json['refs'][ref]?.typeParameter || '';
@@ -651,44 +652,44 @@ var componentToCustomElement = function (options) {
         })
             .join('\n'), "\n\n          if (").concat((_t = json.meta.useMetadata) === null || _t === void 0 ? void 0 : _t.isAttachedToShadowDom, ") {\n            this.attachShadow({ mode: 'open' })\n          }\n        }\n\n\n        ").concat(!((_u = json.hooks.onUnMount) === null || _u === void 0 ? void 0 : _u.code)
             ? ''
-            : "\n          disconnectedCallback() {\n            ".concat(((_v = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _v === void 0 ? void 0 : _v.disconnectedCallback)
-                ? (_w = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _w === void 0 ? void 0 : _w.disconnectedCallback(json, useOptions)
-                : "\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions, {
+            : "\n          disconnectedCallback() {\n            ".concat(((_v = options === null || options === void 0 ? void 0 : options.experimental) === null || _v === void 0 ? void 0 : _v.disconnectedCallback)
+                ? (_w = options === null || options === void 0 ? void 0 : options.experimental) === null || _w === void 0 ? void 0 : _w.disconnectedCallback(json, options)
+                : "\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, options), options, {
                     contextVars: contextVars,
                 }), "\n            this.destroyAnyNodes(); // clean up nodes when component is destroyed\n            ").concat(!((_y = (_x = json.hooks) === null || _x === void 0 ? void 0 : _x.onInit) === null || _y === void 0 ? void 0 : _y.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(((_z = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _z === void 0 ? void 0 : _z.connectedCallbackUpdate)
-            ? (_0 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _0 === void 0 ? void 0 : _0.connectedCallbackUpdate(json, html, useOptions)
+            : "\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(((_z = options === null || options === void 0 ? void 0 : options.experimental) === null || _z === void 0 ? void 0 : _z.connectedCallbackUpdate)
+            ? (_0 = options === null || options === void 0 ? void 0 : options.experimental) === null || _0 === void 0 ? void 0 : _0.connectedCallbackUpdate(json, html, options)
             : "\n              this._root.innerHTML = `\n      ".concat(html, "`;\n              this.pendingUpdate = true;\n              ").concat(!((_2 = (_1 = json.hooks) === null || _1 === void 0 ? void 0 : _1.onInit) === null || _2 === void 0 ? void 0 : _2.code) ? '' : 'this.onInit();', "\n              this.render();\n              this.onMount();\n              this.pendingUpdate = false;\n              this.update();\n              "), "\n        }\n        ").concat(!((_4 = (_3 = json.hooks) === null || _3 === void 0 ? void 0 : _3.onInit) === null || _4 === void 0 ? void 0 : _4.code)
             ? ''
             : "\n            onInit() {\n              ".concat(!((_6 = (_5 = json.hooks) === null || _5 === void 0 ? void 0 : _5.onInit) === null || _6 === void 0 ? void 0 : _6.code)
                 ? ''
-                : "\n                  if (!this.onInitOnce) {\n                    ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_8 = (_7 = json.hooks) === null || _7 === void 0 ? void 0 : _7.onInit) === null || _8 === void 0 ? void 0 : _8.code, useOptions), useOptions, {
+                : "\n                  if (!this.onInitOnce) {\n                    ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_8 = (_7 = json.hooks) === null || _7 === void 0 ? void 0 : _7.onInit) === null || _8 === void 0 ? void 0 : _8.code, options), options, {
                     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              if (el?.context) {\n                child.context = el.context;\n              }\n              this.nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }", "\n        ").concat(!((_9 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _9 === void 0 ? void 0 : _9.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(!((_9 = options === null || options === void 0 ? void 0 : options.experimental) === null || _9 === void 0 ? void 0 : _9.attributeChangedCallback)
             ? ''
-            : "\n          attributeChangedCallback(name, oldValue, newValue) {\n            ".concat((_10 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _10 === void 0 ? void 0 : _10.attributeChangedCallback(['name', 'oldValue', 'newValue'], json, useOptions), "\n          }\n          "), "\n\n        onMount() {\n          ").concat(!((_11 = json.hooks.onMount) === null || _11 === void 0 ? void 0 : _11.code)
+            : "\n          attributeChangedCallback(name, oldValue, newValue) {\n            ".concat((_10 = options === null || options === void 0 ? void 0 : options.experimental) === null || _10 === void 0 ? void 0 : _10.attributeChangedCallback(['name', 'oldValue', 'newValue'], json, options), "\n          }\n          "), "\n\n        onMount() {\n          ").concat(!((_11 = json.hooks.onMount) === null || _11 === void 0 ? void 0 : _11.code)
             ? ''
             : // TODO: make prettier by grabbing only the function body
-                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions, {
+                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, options), options, {
                     contextVars: contextVars,
                 }), "\n                "), "\n        }\n\n        onUpdate() {\n          ").concat(!((_12 = json.hooks.onUpdate) === null || _12 === void 0 ? void 0 : _12.length)
             ? ''
             : "\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, {
+                    code += "\n                ;(function (__prev, __next) {\n                  const __hasChange = __prev.find((val, index) => val !== __next[index]);\n                  if (__hasChange !== undefined) {\n                    ".concat(updateReferencesInCode(hook.code, options, {
                         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, {
+                    }), "\n                    self.updateDeps[").concat(index, "] = __next;\n                  }\n                }(self.updateDeps[").concat(index, "], ").concat(updateReferencesInCode((hook === null || hook === void 0 ? void 0 : hook.deps) || '[]', options, {
                         contextVars: contextVars,
                         context: 'self.',
                     }), "));\n                ");
                 }
                 else {
-                    code += "\n                ".concat(updateReferencesInCode(hook.code, useOptions, {
+                    code += "\n                ".concat(updateReferencesInCode(hook.code, options, {
                         contextVars: contextVars,
                         context: 'self.',
                     }), "\n                ");
@@ -700,25 +701,25 @@ var componentToCustomElement = function (options) {
             ? ''
             : "\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            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)
+            : "\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(options.onChangeJsById)
             .map(function (key) {
             var _a, _b, _c, _d, _e, _f, _g;
-            var value = useOptions.onChangeJsById[key];
+            var value = options.onChangeJsById[key];
             if (!value) {
                 return '';
             }
             var code = '';
-            if ((_a = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _a === void 0 ? void 0 : _a.updateBindings) {
-                key = (_c = (_b = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _b === void 0 ? void 0 : _b.updateBindings) === null || _c === void 0 ? void 0 : _c.key(key, value, useOptions);
-                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);
+            if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.updateBindings) {
+                key = (_c = (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.updateBindings) === null || _c === void 0 ? void 0 : _c.key(key, value, options);
+                code = (_e = (_d = options === null || options === void 0 ? void 0 : options.experimental) === null || _d === void 0 ? void 0 : _d.updateBindings) === null || _e === void 0 ? void 0 : _e.code(key, value, options);
             }
             else {
-                code = updateReferencesInCode(value, useOptions, {
+                code = updateReferencesInCode(value, options, {
                     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              ")
+            return "\n              ".concat(((_f = options === null || options === void 0 ? void 0 : options.experimental) === null || _f === void 0 ? void 0 : _f.generateQuerySelectorAll)
+                ? "\n              ".concat((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.generateQuerySelectorAll(key, code), "\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          if (el?.context) {\n            textNode.context = el.context;\n          }\n          el.after(textNode);\n          this.nodesToDestroy.push(el.nextSibling);\n        }\n        ").concat(!hasContext
@@ -727,8 +728,8 @@ var componentToCustomElement = function (options) {
             ? ''
             : "\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                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(((_13 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _13 === void 0 ? void 0 : _13.customElementsDefine)
-            ? (_14 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _14 === void 0 ? void 0 : _14.customElementsDefine(kebabName, component, useOptions)
+            : "\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(((_13 = options === null || options === void 0 ? void 0 : options.experimental) === null || _13 === void 0 ? void 0 : _13.customElementsDefine)
+            ? (_14 = options === null || options === void 0 ? void 0 : options.experimental) === null || _14 === void 0 ? void 0 : _14.customElementsDefine(kebabName, component, options)
             : "customElements.define('".concat(kebabName, "', ").concat(ComponentName, ");"), "\n    ");
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);

package/dist/src/generators/liquid.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToLiquid = exports.isValidLiquidBinding = void 0;
 var standalone_1 = require("prettier/standalone");
+var html_tags_1 = require("../constants/html_tags");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
 var collect_css_1 = require("../helpers/styles/collect-css");
 var plugins_1 = require("../modules/plugins");
-var jsx_1 = require("../parsers/jsx");
 var mitosis_node_1 = require("../types/mitosis-node");
 /**
  * Test if the binding expression would be likely to generate
@@ -94,7 +94,7 @@ var blockToLiquid = function (json, options) {
                 str += " ".concat(key, "=\"{{").concat(useValue, "}}\" ");
             }
         }
-        if (jsx_1.selfClosingTags.has(json.name)) {
+        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
             return str + ' />';
         }
         str += '>';