@builder.io/mitosis 0.0.45 → 0.0.46

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

@@ -3,23 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToReact = void 0;
 var standalone_1 = require("prettier/standalone");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-function contextToReact(context, options) {
+var contextToReact = function (options) {
     if (options === void 0) { options = {}; }
-    var str = "\n  import { createContext } from 'react';\n\n  export default createContext(" + get_state_object_string_1.getMemberObjectString(context.value) + ")\n  ";
-    if (options.format !== false) {
-        try {
-            str = standalone_1.format(str, {
-                parser: 'typescript',
-                plugins: [
-                    require('prettier/parser-typescript'), // To support running in browsers
-                ],
-            });
+    return function (_a) {
+        var context = _a.context;
+        var str = "\n  import { createContext } from 'react';\n\n  export default createContext(".concat((0, get_state_object_string_1.getMemberObjectString)(context.value), ")\n  ");
+        if (options.format !== 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;
+            }
         }
-        catch (err) {
-            console.error('Format error for file:', str);
-            throw err;
-        }
-    }
-    return str;
-}
+        return str;
+    };
+};
 exports.contextToReact = contextToReact;

package/dist/src/generators/html.d.ts

@@ -1,11 +1,7 @@
-import { MitosisComponent } from '../types/mitosis-component';
-import { Plugin } from '../modules/plugins';
-declare type ToHtmlOptions = {
-    prettier?: boolean;
+import { BaseTranspilerOptions, Transpiler } from '../types/config';
+export interface ToHtmlOptions extends BaseTranspilerOptions {
     format?: 'class' | 'script';
-    plugins?: Plugin[];
     prefix?: string;
-};
-export declare const componentToHtml: (componentJson: MitosisComponent, options?: ToHtmlOptions) => string;
-export declare const componentToCustomElement: (componentJson: MitosisComponent, options?: ToHtmlOptions) => string;
-export {};
+}
+export declare const componentToHtml: (options?: ToHtmlOptions) => Transpiler;
+export declare const componentToCustomElement: (options?: ToHtmlOptions) => Transpiler;

package/dist/src/generators/html.js

@@ -36,8 +36,8 @@ var is_children_1 = __importDefault(require("../helpers/is-children"));
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var addUpdateAfterSet = function (json, options) {
-    traverse_1.default(json).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             for (var key in item.bindings) {
                 var value = item.bindings[key];
                 var newValue = addUpdateAfterSetInCode(value, options);
@@ -50,8 +50,8 @@ var addUpdateAfterSet = function (json, options) {
 };
 var getForNames = function (json) {
     var names = [];
-    traverse_1.default(json).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             if (item.name === 'For') {
                 names.push(item.properties._forName);
             }
@@ -62,16 +62,16 @@ var getForNames = function (json) {
 var replaceForNameIdentifiers = function (json, options) {
     // TODO: cache this. by reference? lru?
     var forNames = getForNames(json);
-    traverse_1.default(json).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             for (var key in item.bindings) {
                 if (key === 'css' || key === '_forName') {
                     continue;
                 }
                 var value = item.bindings[key];
                 if (typeof value === 'string') {
-                    item.bindings[key] = replace_idenifiers_1.replaceIdentifiers(value, forNames, function (name) {
-                        return (options.format === 'class' ? 'this.' : '') + "getContext(el, \"" + name + "\")";
+                    item.bindings[key] = (0, replace_idenifiers_1.replaceIdentifiers)(value, forNames, function (name) {
+                        return "".concat(options.format === 'class' ? 'this.' : '', "getContext(el, \"").concat(name, "\")");
                     });
                 }
             }
@@ -85,17 +85,17 @@ var mappers = {
 };
 var getId = function (json, options) {
     var name = json.properties.$name
-        ? dash_case_1.dashCase(json.properties.$name)
+        ? (0, dash_case_1.dashCase)(json.properties.$name)
         : /^h\d$/.test(json.name || '') // don't dashcase h1 into h-1
             ? json.name
-            : dash_case_1.dashCase(json.name || 'div');
+            : (0, dash_case_1.dashCase)(json.name || 'div');
     var newNameNum = (options.namesMap[name] || 0) + 1;
     options.namesMap[name] = newNameNum;
-    return "" + name + (options.prefix ? "-" + options.prefix : '') + (name !== json.name && newNameNum === 1 ? '' : "-" + newNameNum);
+    return "".concat(name).concat(options.prefix ? "-".concat(options.prefix) : '').concat(name !== json.name && newNameNum === 1 ? '' : "-".concat(newNameNum));
 };
 var updateReferencesInCode = function (code, options) {
     if (options.format === 'class') {
-        return strip_state_and_props_refs_1.stripStateAndPropsRefs(strip_state_and_props_refs_1.stripStateAndPropsRefs(code, {
+        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.',
@@ -125,16 +125,16 @@ var blockToHtml = function (json, options) {
     if (mappers[json.name]) {
         return mappers[json.name](json, options);
     }
-    if (is_children_1.default(json)) {
+    if ((0, is_children_1.default)(json)) {
         return "<slot></slot>";
     }
     if (json.properties._text) {
         return json.properties._text;
     }
     if (json.bindings._text) {
-        addOnChangeJs(elId, options, "el.innerText = " + json.bindings._text + ";");
-        return "<span data-name=\"" + elId + "\"><!-- " + json.bindings
-            ._text.replace(/getContext\(el, "([^"]+)"\)/g, '$1') + " --></span>";
+        addOnChangeJs(elId, options, "el.innerText = ".concat(json.bindings._text, ";"));
+        return "<span data-name=\"".concat(elId, "\"><!-- ").concat(json.bindings
+            ._text.replace(/getContext\(el, "([^"]+)"\)/g, '$1'), " --></span>");
     }
     var str = '';
     if (json.name === 'For') {
@@ -142,24 +142,24 @@ var blockToHtml = function (json, options) {
         addOnChangeJs(elId, options, 
         // TODO: be smarter about rendering, deleting old items and adding new ones by
         // querying dom potentially
-        "\n        let array = " + json.bindings.each + ";\n        let template = " + (options.format === 'class' ? 'this' : 'document') + ".querySelector('[data-template-for=\"" + elId + "\"]');\n        " + (options.format === 'class' ? 'this.' : '') + "renderLoop(el, array, template, \"" + itemName + "\");\n      ");
+        "\n        let array = ".concat(json.bindings.each, ";\n        let template = ").concat(options.format === 'class' ? 'this' : 'document', ".querySelector('[data-template-for=\"").concat(elId, "\"]');\n        ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, template, \"").concat(itemName, "\");\n      "));
         // TODO: decide on how to handle this...
-        str += "\n      <span data-name=\"" + elId + "\"></span>\n      <template data-template-for=\"" + elId + "\">";
+        str += "\n      <span data-name=\"".concat(elId, "\"></span>\n      <template data-template-for=\"").concat(elId, "\">");
         if (json.children) {
             str += json.children.map(function (item) { return blockToHtml(item, options); }).join('\n');
         }
         str += '</template>';
     }
     else if (json.name === 'Show') {
-        addOnChangeJs(elId, options, "el.style.display = " + json.bindings.when.replace(/;$/, '') + " ? 'inline' : 'none'");
-        str += "<span data-name=\"" + elId + "\">";
+        addOnChangeJs(elId, options, "el.style.display = ".concat(json.bindings.when.replace(/;$/, ''), " ? 'inline' : 'none'"));
+        str += "<span data-name=\"".concat(elId, "\">");
         if (json.children) {
             str += json.children.map(function (item) { return blockToHtml(item, options); }).join('\n');
         }
         str += '</span>';
     }
     else {
-        str += "<" + json.name + " ";
+        str += "<".concat(json.name, " ");
         // For now, spread is not supported
         // if (json.bindings._spread === '_spread') {
         //   str += `
@@ -178,7 +178,7 @@ var blockToHtml = function (json, options) {
             var value = (json.properties[key] || '')
                 .replace(/"/g, '&quot;')
                 .replace(/\n/g, '\\n');
-            str += " " + key + "=\"" + value + "\" ";
+            str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         for (var key in json.bindings) {
             if (key === '_spread' || key === 'ref' || key === 'css') {
@@ -189,25 +189,25 @@ var blockToHtml = function (json, options) {
             var useValue = value;
             if (key.startsWith('on')) {
                 var event_1 = key.replace('on', '').toLowerCase();
-                if (!is_component_1.isComponent(json) && event_1 === 'change') {
+                if (!(0, is_component_1.isComponent)(json) && event_1 === 'change') {
                     event_1 = 'input';
                 }
-                var fnName = lodash_1.camelCase("on-" + elId + "-" + event_1);
-                options.js += "\n          // Event handler for '" + event_1 + "' event on " + elId + "\n          " + (options.format === 'class'
-                    ? "this." + fnName + " = (event) => {"
-                    : "function " + fnName + " (event) {") + "\n            " + remove_surrounding_block_1.removeSurroundingBlock(updateReferencesInCode(useValue, options)) + "\n          }\n        ";
-                var fnIdentifier = "" + (options.format === 'class' ? 'this.' : '') + fnName;
-                addOnChangeJs(elId, options, "\n            ;el.removeEventListener('" + event_1 + "', " + fnIdentifier + ");\n            ;el.addEventListener('" + event_1 + "', " + fnIdentifier + ");\n          ");
+                var fnName = (0, lodash_1.camelCase)("on-".concat(elId, "-").concat(event_1));
+                options.js += "\n          // Event handler for '".concat(event_1, "' event on ").concat(elId, "\n          ").concat(options.format === 'class'
+                    ? "this.".concat(fnName, " = (event) => {")
+                    : "function ".concat(fnName, " (event) {"), "\n            ").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(updateReferencesInCode(useValue, options)), "\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 === 'style') {
-                    addOnChangeJs(elId, options, ";Object.assign(el.style, " + useValue + ");");
+                    addOnChangeJs(elId, options, ";Object.assign(el.style, ".concat(useValue, ");"));
                 }
                 else {
                     var useAttribute = key.includes('-');
                     addOnChangeJs(elId, options, useAttribute
-                        ? ";el.setAttribute(" + key + ", " + useValue + ");"
-                        : ";el." + key + " = " + useValue);
+                        ? ";el.setAttribute(".concat(key, ", ").concat(useValue, ");")
+                        : ";el.".concat(key, " = ").concat(useValue));
                 }
             }
         }
@@ -222,14 +222,14 @@ var blockToHtml = function (json, options) {
             // Maybe put some kind of safety here for broken HTML such as no close tag
             str += htmlDecode(json.properties.innerHTML);
         }
-        str += "</" + json.name + ">";
+        str += "</".concat(json.name, ">");
     }
     return str;
 };
 function addUpdateAfterSetInCode(code, options, useString) {
     if (useString === void 0) { useString = options.format === 'class' ? 'this.update' : 'update'; }
     var updates = 0;
-    return babel_transform_1.babelTransformExpression(code, {
+    return (0, babel_transform_1.babelTransformExpression)(code, {
         AssignmentExpression: function (path) {
             var node = path.node;
             if (core_1.types.isMemberExpression(node.left)) {
@@ -263,182 +263,188 @@ function addUpdateAfterSetInCode(code, options, useString) {
 }
 var htmlDecode = function (html) { return html.replace(/&quot;/gi, '"'); };
 // TODO: props support via custom elements
-var componentToHtml = function (componentJson, options) {
+var componentToHtml = function (options) {
     if (options === void 0) { options = {}; }
-    var useOptions = __assign(__assign({}, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'script' });
-    var json = fast_clone_1.fastClone(componentJson);
-    if (options.plugins) {
-        json = plugins_1.runPreJsonPlugins(json, options.plugins);
-    }
-    replaceForNameIdentifiers(json, useOptions);
-    addUpdateAfterSet(json, useOptions);
-    var componentHasProps = has_props_1.hasProps(json);
-    var hasLoop = has_component_1.hasComponent('For', json);
-    if (options.plugins) {
-        json = plugins_1.runPostJsonPlugins(json, options.plugins);
-    }
-    var css = collect_styles_1.collectCss(json, {
-        prefix: options.prefix,
-    });
-    var str = json.children
-        .map(function (item) { return blockToHtml(item, useOptions); })
-        .join('\n');
-    if (css.trim().length) {
-        str += "<style>" + css + "</style>";
-    }
-    var hasChangeListeners = Boolean(Object.keys(useOptions.onChangeJsById).length);
-    var hasGeneratedJs = Boolean(useOptions.js.trim().length);
-    if (hasChangeListeners || hasGeneratedJs || json.hooks.onMount || hasLoop) {
-        // TODO: collectJs helper for here and liquid
-        str += "\n      <script>\n      (() => {\n        const state = " + get_state_object_string_1.getStateObjectStringFromComponent(json, {
-            valueMapper: function (value) {
-                return addUpdateAfterSetInCode(updateReferencesInCode(value, useOptions), useOptions);
-            },
-        }) + ";\n        " + (componentHasProps ? "let props = {};" : '') + "\n\n        " + (!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          " + Object.keys(useOptions.onChangeJsById)
-                .map(function (key) {
-                var value = useOptions.onChangeJsById[key];
-                if (!value) {
-                    return '';
-                }
-                return "\n              document.querySelectorAll(\"[data-name='" + key + "']\").forEach((el) => {\n                " + value + "\n              })\n            ";
-            })
-                .join('\n\n') + "\n        }\n\n        " + useOptions.js + "\n\n        // Update with initial state on first load\n        update();\n        ") + "\n\n        " + (!json.hooks.onMount
-            ? ''
-            : // TODO: make prettier by grabbing only the function body
-                "\n              // onMount\n              " + updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount, useOptions), useOptions) + " \n              ") + "\n\n        " + (!hasLoop
-            ? ''
-            : "\n\n          // Helper to render loops\n          function renderLoop(el, array, template, itemName) {\n            el.innerHTML = '';\n            for (let value of array) {\n              let tmp = document.createElement('span');\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach(function (child) {\n                contextMap.set(child, {\n                  ...contextMap.get(child),\n                  [itemName]: value\n                });\n                el.appendChild(child);\n              });\n            }\n          }\n\n          // Helper to pass context down for loops\n          let contextMap = new WeakMap();\n          function getContext(el, name) {\n            let parent = el;\n            do {\n              let context = contextMap.get(parent);\n              if (context && name in context) {\n                return context[name];\n              }\n            } while (parent = parent.parentNode)\n          }\n        ") + "\n      })()\n      </script>\n    ";
-    }
-    if (options.plugins) {
-        str = plugins_1.runPreCodePlugins(str, options.plugins);
-    }
-    if (options.prettier !== false) {
-        try {
-            str = standalone_1.format(str, {
-                parser: 'html',
-                htmlWhitespaceSensitivity: 'ignore',
-                plugins: [
-                    // To support running in browsers
-                    require('prettier/parser-html'),
-                    require('prettier/parser-postcss'),
-                    require('prettier/parser-babel'),
-                ],
-            });
+    return function (_a) {
+        var component = _a.component;
+        var useOptions = __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);
         }
-        catch (err) {
-            console.warn('Could not prettify', { string: str }, err);
+        replaceForNameIdentifiers(json, useOptions);
+        addUpdateAfterSet(json, useOptions);
+        var componentHasProps = (0, has_props_1.hasProps)(json);
+        var hasLoop = (0, has_component_1.hasComponent)('For', json);
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
-    }
-    if (options.plugins) {
-        str = plugins_1.runPostCodePlugins(str, options.plugins);
-    }
-    return str;
+        var css = (0, collect_styles_1.collectCss)(json, {
+            prefix: options.prefix,
+        });
+        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 || json.hooks.onMount || 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\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          ".concat(Object.keys(useOptions.onChangeJsById)
+                    .map(function (key) {
+                    var value = useOptions.onChangeJsById[key];
+                    if (!value) {
+                        return '';
+                    }
+                    return "\n              document.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(value, "\n              })\n            ");
+                })
+                    .join('\n\n'), "\n        }\n\n        ").concat(useOptions.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!json.hooks.onMount
+                ? ''
+                : // TODO: make prettier by grabbing only the function body
+                    "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount, useOptions), useOptions), " \n              "), "\n\n        ").concat(!hasLoop
+                ? ''
+                : "\n\n          // Helper to render loops\n          function renderLoop(el, array, template, itemName) {\n            el.innerHTML = '';\n            for (let value of array) {\n              let tmp = document.createElement('span');\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach(function (child) {\n                contextMap.set(child, {\n                  ...contextMap.get(child),\n                  [itemName]: value\n                });\n                el.appendChild(child);\n              });\n            }\n          }\n\n          // Helper to pass context down for loops\n          let contextMap = new WeakMap();\n          function getContext(el, name) {\n            let parent = el;\n            do {\n              let context = contextMap.get(parent);\n              if (context && name in context) {\n                return context[name];\n              }\n            } while (parent = parent.parentNode)\n          }\n        ", "\n      })()\n      </script>\n    ");
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        }
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'html',
+                    htmlWhitespaceSensitivity: 'ignore',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-html'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-babel'),
+                    ],
+                });
+            }
+            catch (err) {
+                console.warn('Could not prettify', { string: str }, err);
+            }
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        }
+        return str;
+    };
 };
 exports.componentToHtml = componentToHtml;
 // TODO: props support via custom elements
-var componentToCustomElement = function (componentJson, options) {
+var componentToCustomElement = function (options) {
     if (options === void 0) { options = {}; }
-    var useOptions = __assign(__assign({}, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
-    var json = fast_clone_1.fastClone(componentJson);
-    if (options.plugins) {
-        json = plugins_1.runPreJsonPlugins(json, options.plugins);
-    }
-    var componentHasProps = has_props_1.hasProps(json);
-    replaceForNameIdentifiers(json, useOptions);
-    addUpdateAfterSet(json, useOptions);
-    var hasLoop = has_component_1.hasComponent('For', json);
-    if (options.plugins) {
-        json = plugins_1.runPostJsonPlugins(json, options.plugins);
-    }
-    var css = collect_styles_1.collectCss(json, {
-        prefix: options.prefix,
-    });
-    strip_meta_properties_1.stripMetaProperties(json);
-    var html = json.children
-        .map(function (item) { return blockToHtml(item, useOptions); })
-        .join('\n');
-    html += "<style>" + css + "</style>";
-    if (options.prettier !== false) {
-        try {
-            html = standalone_1.format(html, {
-                parser: 'html',
-                htmlWhitespaceSensitivity: 'ignore',
-                plugins: [
-                    // To support running in browsers
-                    require('prettier/parser-html'),
-                    require('prettier/parser-postcss'),
-                    require('prettier/parser-babel'),
-                    require('prettier/parser-typescript'),
-                ],
-            });
-            html = html.trim().replace(/\n/g, '\n      ');
+    return function (_a) {
+        var component = _a.component;
+        var useOptions = __assign(__assign({}, 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);
         }
-        catch (err) {
-            console.warn('Could not prettify', { string: html }, err);
+        var componentHasProps = (0, has_props_1.hasProps)(json);
+        replaceForNameIdentifiers(json, useOptions);
+        addUpdateAfterSet(json, useOptions);
+        var hasLoop = (0, has_component_1.hasComponent)('For', json);
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
-    }
-    var kebabName = componentJson.name
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .toLowerCase();
-    var str = "\n      /**\n       * Usage:\n       * \n       *  <" + kebabName + "></" + kebabName + ">\n       * \n       */\n      class " + componentJson.name + " extends HTMLElement {\n        constructor() {\n          super();\n\n          const self = this;\n          this.state = " + get_state_object_string_1.getStateObjectStringFromComponent(json, {
-        valueMapper: function (value) {
-            return strip_state_and_props_refs_1.stripStateAndPropsRefs(strip_state_and_props_refs_1.stripStateAndPropsRefs(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
-                includeProps: false,
-                includeState: true,
-                // TODO: if it's an arrow function it's this.state.
-                replaceWith: 'self.state.',
-            }), {
-                // TODO: replace with `this.` and add setters that call this.update()
-                includeProps: true,
-                includeState: false,
-                replaceWith: 'self.props.',
-            });
-        },
-    }) + ";\n          " + (componentHasProps /* TODO: accept these as attributes/properties on the custom element */
-        ? "this.props = {};"
-        : '') + "\n\n          " + (!hasLoop
-        ? ''
-        : "\n            // Helper to pass context down for loops\n            this.contextMap = new WeakMap();\n          ") + "\n\n          " + useOptions.js + "\n        }\n\n        " + (!json.hooks.onUnMount
-        ? ''
-        : "\n          disconnectedCallback() {\n            // onUnMount\n            " + updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount, useOptions), useOptions) + "\n          }\n          ") + "\n\n        connectedCallback() {\n          this.innerHTML = `\n      " + html + "`;\n          this.update();\n\n          " + (!json.hooks.onMount
-        ? ''
-        : // TODO: make prettier by grabbing only the function body
-            "\n                // onMount\n                " + updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount, useOptions), useOptions) + "\n                ") + "\n        }\n\n        update() {\n          " + Object.keys(useOptions.onChangeJsById)
-        .map(function (key) {
-        var value = useOptions.onChangeJsById[key];
-        if (!value) {
-            return '';
+        var css = (0, collect_styles_1.collectCss)(json, {
+            prefix: options.prefix,
+        });
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        var html = json.children
+            .map(function (item) { return blockToHtml(item, useOptions); })
+            .join('\n');
+        html += "<style>".concat(css, "</style>");
+        if (options.prettier !== false) {
+            try {
+                html = (0, standalone_1.format)(html, {
+                    parser: 'html',
+                    htmlWhitespaceSensitivity: 'ignore',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-html'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-babel'),
+                        require('prettier/parser-typescript'),
+                    ],
+                });
+                html = html.trim().replace(/\n/g, '\n      ');
+            }
+            catch (err) {
+                console.warn('Could not prettify', { string: html }, err);
+            }
         }
-        return "\n              this.querySelectorAll(\"[data-name='" + key + "']\").forEach((el) => {\n                " + updateReferencesInCode(value, useOptions) + "\n              })\n            ";
-    })
-        .join('\n\n') + "\n        }\n\n        " + (!hasLoop
-        ? ''
-        : "\n\n          // Helper to render loops\n          renderLoop(el, array, template, itemName) {\n            el.innerHTML = '';\n            for (let value of array) {\n              let tmp = document.createElement('span');\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach((child) => {\n                this.contextMap.set(child, {\n                  ...this.contextMap.get(child),\n                  [itemName]: value\n                });\n                el.appendChild(child);\n              });\n            }\n          }\n\n          getContext(el, name) {\n            let parent = el;\n            do {\n              let context = this.contextMap.get(parent);\n              if (context && name in context) {\n                return context[name];\n              }\n            } while (parent = parent.parentNode)\n          }\n        ") + "\n      }\n\n      customElements.define('" + kebabName + "', " + componentJson.name + ");\n    ";
-    if (options.plugins) {
-        str = plugins_1.runPreCodePlugins(str, options.plugins);
-    }
-    if (options.prettier !== false) {
-        try {
-            str = standalone_1.format(str, {
-                parser: 'typescript',
-                plugins: [
-                    // To support running in browsers
-                    require('prettier/parser-html'),
-                    require('prettier/parser-postcss'),
-                    require('prettier/parser-babel'),
-                    require('prettier/parser-typescript'),
-                ],
-            });
+        var kebabName = component.name
+            .replace(/([a-z])([A-Z])/g, '$1-$2')
+            .toLowerCase();
+        var str = "\n      /**\n       * Usage:\n       * \n       *  <".concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(component.name, " extends HTMLElement {\n        constructor() {\n          super();\n\n          const self = this;\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,
+                    includeState: true,
+                    // TODO: if it's an arrow function it's this.state.
+                    replaceWith: 'self.state.',
+                }), {
+                    // TODO: replace with `this.` and add setters that call this.update()
+                    includeProps: true,
+                    includeState: false,
+                    replaceWith: 'self.props.',
+                });
+            },
+        }), ";\n          ").concat(componentHasProps /* TODO: accept these as attributes/properties on the custom element */
+            ? "this.props = {};"
+            : '', "\n\n          ").concat(!hasLoop
+            ? ''
+            : "\n            // Helper to pass context down for loops\n            this.contextMap = new WeakMap();\n          ", "\n\n          ").concat(useOptions.js, "\n        }\n\n        ").concat(!json.hooks.onUnMount
+            ? ''
+            : "\n          disconnectedCallback() {\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount, useOptions), useOptions), "\n          }\n          "), "\n\n        connectedCallback() {\n          this.innerHTML = `\n      ").concat(html, "`;\n          this.update();\n\n          ").concat(!json.hooks.onMount
+            ? ''
+            : // TODO: make prettier by grabbing only the function body
+                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount, useOptions), useOptions), "\n                "), "\n        }\n\n        update() {\n          ").concat(Object.keys(useOptions.onChangeJsById)
+            .map(function (key) {
+            var value = useOptions.onChangeJsById[key];
+            if (!value) {
+                return '';
+            }
+            return "\n              this.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(updateReferencesInCode(value, useOptions), "\n              })\n            ");
+        })
+            .join('\n\n'), "\n        }\n\n        ").concat(!hasLoop
+            ? ''
+            : "\n\n          // Helper to render loops\n          renderLoop(el, array, template, itemName) {\n            el.innerHTML = '';\n            for (let value of array) {\n              let tmp = document.createElement('span');\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach((child) => {\n                this.contextMap.set(child, {\n                  ...this.contextMap.get(child),\n                  [itemName]: value\n                });\n                el.appendChild(child);\n              });\n            }\n          }\n\n          getContext(el, name) {\n            let parent = el;\n            do {\n              let context = this.contextMap.get(parent);\n              if (context && name in context) {\n                return context[name];\n              }\n            } while (parent = parent.parentNode)\n          }\n        ", "\n      }\n\n      customElements.define('").concat(kebabName, "', ").concat(component.name, ");\n    ");
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        }
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-html'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-babel'),
+                        require('prettier/parser-typescript'),
+                    ],
+                });
+            }
+            catch (err) {
+                console.warn('Could not prettify', { string: str }, err);
+            }
         }
-        catch (err) {
-            console.warn('Could not prettify', { string: str }, err);
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
         }
-    }
-    if (options.plugins) {
-        str = plugins_1.runPostCodePlugins(str, options.plugins);
-    }
-    return str;
+        return str;
+    };
 };
 exports.componentToCustomElement = componentToCustomElement;

package/dist/src/generators/liquid.d.ts

@@ -1,15 +1,11 @@
-import { MitosisComponent } from '../types/mitosis-component';
-import { Plugin } from '../modules/plugins';
+import { BaseTranspilerOptions, Transpiler } from '../types/config';
+export interface ToLiquidOptions extends BaseTranspilerOptions {
+    reactive?: boolean;
+}
 /**
  * Test if the binding expression would be likely to generate
  * valid or invalid liquid. If we generate invalid liquid tags
  * Shopify will reject our PUT to update the template
  */
 export declare const isValidLiquidBinding: (str?: string) => boolean;
-declare type ToLiquidOptions = {
-    prettier?: boolean;
-    plugins?: Plugin[];
-    reactive?: boolean;
-};
-export declare const componentToLiquid: (componentJson: MitosisComponent, options?: ToLiquidOptions) => string;
-export {};
+export declare const componentToLiquid: (options?: ToLiquidOptions) => Transpiler;