@builder.io/mitosis 0.0.56-81 → 0.0.56-84

package/dist/src/generators/angular.js

@@ -193,14 +193,14 @@ exports.blockToAngular = blockToAngular;
 var componentToAngular = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var component = _a.component;
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
-        var _p = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _p[0], hasPropRef = _p[1];
+        var _o = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _o[0], hasPropRef = _o[1];
         var childComponents = [];
         var propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
         json.imports.forEach(function (_a) {
@@ -212,7 +212,7 @@ var componentToAngular = function (options) {
             });
         });
         var customImports = (0, get_custom_imports_1.getCustomImports)(json);
-        var _q = component.exports, localExports = _q === void 0 ? {} : _q;
+        var _p = component.exports, localExports = _p === void 0 ? {} : _p;
         var localExportVars = Object.keys(localExports)
             .filter(function (key) { return localExports[key].usedInLocal; })
             .map(function (key) { return "".concat(key, " = ").concat(key, ";"); });
@@ -289,7 +289,7 @@ var componentToAngular = function (options) {
                 });
             },
         });
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', json.interfaces ? (_h = json.interfaces) === null || _h === void 0 ? void 0 : _h.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone,
@@ -322,23 +322,23 @@ var componentToAngular = function (options) {
         })
             .join('\n'), !hasConstructor
             ? ''
-            : "constructor(\n".concat(injectables.join(',\n'), ") {\n            ").concat(!((_j = component.hooks) === null || _j === void 0 ? void 0 : _j.onInit)
+            : "constructor(\n".concat(injectables.join(',\n'), ") {\n            ").concat(!((_h = component.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
                 ? ''
-                : "\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_k = component.hooks.onInit) === null || _k === void 0 ? void 0 : _k.code, {
+                : "\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_j = component.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
                 }), "\n              "), "\n          }\n          "), !hasOnMount
             ? ''
-            : "ngOnInit() {\n              \n              ".concat(!((_l = component.hooks) === null || _l === void 0 ? void 0 : _l.onMount)
+            : "ngOnInit() {\n              \n              ".concat(!((_k = component.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
                 ? ''
-                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_m = component.hooks.onMount) === null || _m === void 0 ? void 0 : _m.code, {
+                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_l = component.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
                     domRefs: Array.from(domRefs),
                     stateVars: stateVars,
-                }), "\n                "), "\n            }"), !((_o = component.hooks.onUpdate) === null || _o === void 0 ? void 0 : _o.length)
+                }), "\n                "), "\n            }"), !((_m = component.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
             ? ''
             : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.reduce(function (code, hook) {
                 code += (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {

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

@@ -1,7 +0,0 @@
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
-export interface ToHtmlOptions extends BaseTranspilerOptions {
-    format?: 'class' | 'script';
-    prefix?: string;
-}
-export declare const componentToHtml: (options?: ToHtmlOptions) => Transpiler;
-export declare const componentToCustomElement: (options?: ToHtmlOptions) => Transpiler;

package/dist/src/generators/html.js

@@ -485,7 +485,7 @@ exports.componentToHtml = componentToHtml;
 var componentToCustomElement = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
+        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_2.kebabCase)(ComponentName);
@@ -494,7 +494,7 @@ var componentToCustomElement = function (options) {
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
-        var _16 = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _16[0], hasPropRef = _16[1];
+        var _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 componentHasProps = (0, has_props_1.hasProps)(json);
@@ -518,7 +518,7 @@ var componentToCustomElement = function (options) {
         });
         var setContext = [];
         for (var key in json.context.set) {
-            var _17 = json.context.set[key], name_1 = _17.name, value = _17.value, ref = _17.ref;
+            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);
@@ -581,17 +581,17 @@ var componentToCustomElement = function (options) {
                 console.warn('Could not prettify', { string: html }, err);
             }
         }
-        var str = "\n      ".concat(json.types ? json.types.join('\n') : '', "\n      ").concat(json.interfaces ? (_j = json.interfaces) === null || _j === void 0 ? void 0 : _j.join('\n') : '', "\n      ").concat((0, render_imports_1.renderPreComponent)({ component: json, target: 'customElement' }), "\n      /**\n       * Usage:\n       * \n       *  <").concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(ComponentName, " extends ").concat(((_k = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _k === void 0 ? void 0 : _k.classExtends)
-            ? (_l = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _l === void 0 ? void 0 : _l.classExtends(json, useOptions)
+        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)
             : 'HTMLElement', " {\n        ").concat(Array.from(domRefs)
             .map(function (ref) {
             return "\n        get _".concat(ref, "() {\n          return this._root.querySelector(\"[data-ref='").concat(ComponentName, "-").concat(ref, "']\")\n        }\n            ");
         })
             .join('\n'), "\n\n        get _root() {\n          return this.shadowRoot || this;\n        }\n\n        constructor() {\n          super();\n          const self = this;\n          ").concat(
         // TODO: more than one context not injector
-        setContext.length === 1 && ((_m = setContext === null || setContext === void 0 ? void 0 : setContext[0]) === null || _m === void 0 ? void 0 : _m.ref)
+        setContext.length === 1 && ((_l = setContext === null || setContext === void 0 ? void 0 : setContext[0]) === null || _l === void 0 ? void 0 : _l.ref)
             ? "this.context = ".concat(setContext[0].ref)
-            : '', "\n\n          ").concat(!((_p = (_o = json.hooks) === null || _o === void 0 ? void 0 : _o.onInit) === null || _p === void 0 ? void 0 : _p.code) ? '' : 'this.onInitOnce = false;', "\n\n          this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            : '', "\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, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
                     includeProps: false,
@@ -612,10 +612,10 @@ var componentToCustomElement = function (options) {
             ? ''
             : "\n          this.componentProps = [".concat(Array.from(props)
                 .map(function (prop) { return "\"".concat(prop, "\""); })
-                .join(','), "];\n          "), "\n\n          ").concat(!((_q = json.hooks.onUpdate) === null || _q === void 0 ? void 0 : _q.length)
+                .join(','), "];\n          "), "\n\n          ").concat(!((_p = json.hooks.onUpdate) === null || _p === void 0 ? void 0 : _p.length)
             ? ''
-            : "\n            this.updateDeps = [".concat((_r = json.hooks.onUpdate) === null || _r === void 0 ? void 0 : _r.map(function (hook) { return updateReferencesInCode((hook === null || hook === void 0 ? void 0 : hook.deps) || '[]', useOptions); }).join(','), "];\n            "), "\n\n          // used to keep track of all nodes created by show/for\n          this.nodesToDestroy = [];\n          // batch updates\n          this.pendingUpdate = false;\n          ").concat(((_s = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _s === void 0 ? void 0 : _s.componentConstructor)
-            ? (_t = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _t === void 0 ? void 0 : _t.componentConstructor(json, useOptions)
+            : "\n            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
             .map(function (ref) {
             var _a;
@@ -623,32 +623,32 @@ var componentToCustomElement = function (options) {
             var argument = ((_a = json['refs'][ref]) === null || _a === void 0 ? void 0 : _a.argument) || 'null';
             return "this._".concat(ref, " = ").concat(argument);
         })
-            .join('\n'), "\n\n          if (").concat((_u = json.meta.useMetadata) === null || _u === void 0 ? void 0 : _u.isAttachedToShadowDom, ") {\n            this.attachShadow({ mode: 'open' })\n          }\n        }\n\n\n        ").concat(!((_v = json.hooks.onUnMount) === null || _v === void 0 ? void 0 : _v.code)
+            .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(((_w = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _w === void 0 ? void 0 : _w.disconnectedCallback)
-                ? (_x = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _x === void 0 ? void 0 : _x.disconnectedCallback(json, useOptions)
+            : "\n          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, {
                     contextVars: contextVars,
-                }), "\n            this.destroyAnyNodes(); // clean up nodes when component is destroyed\n            ").concat(!((_z = (_y = json.hooks) === null || _y === void 0 ? void 0 : _y.onInit) === null || _z === void 0 ? void 0 : _z.code) ? '' : 'this.onInitOnce = false;', "\n            "), "\n          }\n          "), "\n\n        destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          this.nodesToDestroy.forEach(el => el.remove());\n          this.nodesToDestroy = [];\n        }\n\n        connectedCallback() {\n          ").concat(context.join('\n'), "\n          ").concat(!componentHasProps
+                }), "\n            this.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(((_0 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _0 === void 0 ? void 0 : _0.connectedCallbackUpdate)
-            ? (_1 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _1 === void 0 ? void 0 : _1.connectedCallbackUpdate(json, html, useOptions)
-            : "\n              this._root.innerHTML = `\n      ".concat(html, "`;\n              this.pendingUpdate = true;\n              ").concat(!((_3 = (_2 = json.hooks) === null || _2 === void 0 ? void 0 : _2.onInit) === null || _3 === void 0 ? void 0 : _3.code) ? '' : 'this.onInit();', "\n              this.render();\n              this.onMount();\n              this.pendingUpdate = false;\n              this.update();\n              "), "\n        }\n        ").concat(!((_5 = (_4 = json.hooks) === null || _4 === void 0 ? void 0 : _4.onInit) === null || _5 === void 0 ? void 0 : _5.code)
+            : "\n          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._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(!((_7 = (_6 = json.hooks) === null || _6 === void 0 ? void 0 : _6.onInit) === null || _7 === void 0 ? void 0 : _7.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((_9 = (_8 = json.hooks) === null || _8 === void 0 ? void 0 : _8.onInit) === null || _9 === void 0 ? void 0 : _9.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, useOptions), useOptions, {
                     contextVars: contextVars,
                 }), "\n                    this.onInitOnce = true;\n                  }"), "\n            }\n            "), "\n\n        ").concat(!hasShow
             ? ''
-            : "\n          showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              if (el?.scope) {\n                child.scope = el.scope;\n              }\n              if (el?.context) {\n                child.context = el.context;\n              }\n              this.nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }", "\n        ").concat(!((_10 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _10 === void 0 ? void 0 : _10.attributeChangedCallback)
+            : "\n          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          attributeChangedCallback(name, oldValue, newValue) {\n            ".concat((_11 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _11 === void 0 ? void 0 : _11.attributeChangedCallback(['name', 'oldValue', 'newValue'], json, useOptions), "\n          }\n          "), "\n\n        onMount() {\n          ").concat(!((_12 = json.hooks.onMount) === null || _12 === void 0 ? void 0 : _12.code)
+            : "\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)
             ? ''
             : // TODO: make prettier by grabbing only the function body
                 "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions, {
                     contextVars: contextVars,
-                }), "\n                "), "\n        }\n\n        onUpdate() {\n          ").concat(!((_13 = json.hooks.onUpdate) === null || _13 === void 0 ? void 0 : _13.length)
+                }), "\n                "), "\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
@@ -701,8 +701,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(((_14 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _14 === void 0 ? void 0 : _14.customElementsDefine)
-            ? (_15 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _15 === void 0 ? void 0 : _15.customElementsDefine(kebabName, component, useOptions)
+            : "\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)
             : "customElements.define('".concat(kebabName, "', ").concat(ComponentName, ");"), "\n    ");
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);

package/dist/src/generators/svelte.js

@@ -65,6 +65,7 @@ var lodash_1 = require("lodash");
 var function_literal_prefix_1 = require("../constants/function-literal-prefix");
 var method_literal_prefix_1 = require("../constants/method-literal-prefix");
 var patterns_1 = require("../helpers/patterns");
+var is_upper_case_1 = require("../helpers/is-upper-case");
 var mappers = {
     Fragment: function (_a) {
         var _b;
@@ -91,7 +92,7 @@ var mappers = {
             delete firstChild.properties.key;
             delete firstChild.bindings.key;
         }
-        return "\n{#each ".concat(stripStateAndProps((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, options), " as ").concat(json.scope.For[0], ", ").concat(json.scope.For[1], " ").concat(keyValue ? "(".concat(keyValue, ")") : '', "}\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n{/each}\n");
+        return "\n{#each ".concat(stripStateAndProps((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, options), " as ").concat(json.scope.For[0]).concat(json.scope.For[1] ? ", ".concat(json.scope.For[1]) : '', " ").concat(keyValue ? "(".concat(keyValue, ")") : '', "}\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n{/each}\n");
     },
     Show: function (_a) {
         var _b;
@@ -174,7 +175,8 @@ var blockToSvelte = function (_a) {
     if ((_c = json.bindings._spread) === null || _c === void 0 ? void 0 : _c.code) {
         str += "{...".concat(stripStateAndProps(json.bindings._spread.code, options), "}");
     }
-    if (((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style) {
+    var isComponent = Boolean(tagName[0] && (0, is_upper_case_1.isUpperCase)(tagName[0]));
+    if ((((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style) && !isComponent) {
         var useValue = stripStateAndProps(((_e = json.bindings.style) === null || _e === void 0 ? void 0 : _e.code) || json.properties.style, options);
         str += "use:mitosis_styling={".concat(useValue, "}");
         delete json.bindings.style;
@@ -288,7 +290,7 @@ var componentToSvelte = function (_a) {
     if (_a === void 0) { _a = {}; }
     var _b = _a.plugins, plugins = _b === void 0 ? [] : _b, userProvidedOptions = __rest(_a, ["plugins"]);
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g;
+        var _b, _c, _d, _e, _f, _g, _h;
         var component = _a.component;
         var options = __assign({ stateType: 'variables', prettier: true, plugins: __spreadArray([FUNCTION_HACK_PLUGIN], plugins, true) }, userProvidedOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain
@@ -336,10 +338,10 @@ var componentToSvelte = function (_a) {
             return (0, function_1.pipe)(stripStateAndProps(hookCode, options), babel_transform_1.babelTransformCode);
         };
         var str = '';
-        if (json.propsTypeRef) {
-            str += (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <script context='module' lang='ts'>\n        ", "\n        ", "\n      </script>\n      \n\n      \n\n      "], ["\n      <script context='module' lang='ts'>\n        ", "\n        ", "\n      </script>\n      \\n\n      \\n\n      "])), json.types ? json.types.join('\n\n') + '\n' : '', json.interfaces ? json.interfaces.join('\n\n') + '\n' : '');
+        if ((_b = json.types) === null || _b === void 0 ? void 0 : _b.length) {
+            str += (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <script context='module' lang='ts'>\n        ", "\n      </script>\n      \n\n      \n\n      "], ["\n      <script context='module' lang='ts'>\n        ", "\n      </script>\n      \\n\n      \\n\n      "])), json.types ? json.types.join('\n\n') + '\n' : '');
         }
-        str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <script lang='ts'>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script lang='ts'>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "import { onMount } from 'svelte'", !((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? '' : "import { afterUpdate } from 'svelte'", !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), (0, context_1.hasContext)(component) ? 'import { getContext, setContext } from "svelte";' : '', !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", (0, lodash_1.uniq)(refs.map(function (ref) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref); }).concat(props))
+        str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <script lang='ts'>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script lang='ts'>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "import { onMount } from 'svelte'", !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length) ? '' : "import { afterUpdate } from 'svelte'", !((_e = json.hooks.onUnMount) === null || _e === void 0 ? void 0 : _e.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), (0, context_1.hasContext)(component) ? 'import { getContext, setContext } from "svelte";' : '', !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", (0, lodash_1.uniq)(refs.map(function (ref) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref); }).concat(props))
             .map(function (name) {
             if (name === 'children') {
                 return '';
@@ -357,9 +359,9 @@ var componentToSvelte = function (_a) {
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")
-            : dataString, !((_e = json.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
+            : dataString, !((_f = json.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code)
             ? ''
-            : "onMount(() => { ".concat(transformHookCode(json.hooks.onMount.code), " });"), !((_f = json.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.length)
+            : "onMount(() => { ".concat(transformHookCode(json.hooks.onMount.code), " });"), !((_g = json.hooks.onUpdate) === null || _g === void 0 ? void 0 : _g.length)
             ? ''
             : json.hooks.onUpdate
                 .map(function (_a, index) {
@@ -373,7 +375,7 @@ var componentToSvelte = function (_a) {
                     return "afterUpdate(() => { ".concat(hookCode, " })");
                 }
             })
-                .join(';'), !((_g = json.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code)
+                .join(';'), !((_h = json.hooks.onUnMount) === null || _h === void 0 ? void 0 : _h.code)
             ? ''
             : "onDestroy(() => { ".concat(transformHookCode(json.hooks.onUnMount.code), " });"), json.children
             .map(function (item) {

package/dist/src/parsers/builder.d.ts

@@ -63,7 +63,6 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         children: MitosisNode[];
         subComponents: import("..").MitosisComponent[];
         types?: string[] | undefined;
-        interfaces?: string[] | undefined;
         propsTypeRef?: string | undefined;
     }[];
     '@type': "@builder.io/mitosis/component";
@@ -96,7 +95,6 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
     };
     children: MitosisNode[];
     types?: string[] | undefined;
-    interfaces?: string[] | undefined;
     propsTypeRef?: string | undefined;
 };
 export {};

package/dist/src/parsers/jsx/component-types.d.ts

@@ -4,4 +4,3 @@ export declare const getPropsTypeRef: (node: babel.types.FunctionDeclaration, co
 export declare const isTypeImport: (node: babel.Node) => boolean;
 export declare const isTypeOrInterface: (node: babel.Node) => boolean;
 export declare const collectTypes: (node: babel.Node, context: Context) => void;
-export declare const collectInterfaces: (node: babel.Node, context: Context) => void;

package/dist/src/parsers/jsx/component-types.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collectInterfaces = exports.collectTypes = exports.isTypeOrInterface = exports.isTypeImport = exports.getPropsTypeRef = void 0;
+exports.collectTypes = exports.isTypeOrInterface = exports.isTypeImport = exports.getPropsTypeRef = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var types = babel.types;
@@ -54,7 +54,7 @@ var getPropsTypeRef = function (node, context) {
             .replace(/;/g, '');
         if (generatedTypes.startsWith('{')) {
             var propsTypeRef = "".concat((_a = node.id) === null || _a === void 0 ? void 0 : _a.name, "Props");
-            context.builder.component.interfaces = __spreadArray(__spreadArray([], (context.builder.component.interfaces || []), true), [
+            context.builder.component.types = __spreadArray(__spreadArray([], (context.builder.component.types || []), true), [
                 "export interface ".concat(propsTypeRef, " ").concat(generatedTypes),
             ], false);
             return propsTypeRef;
@@ -86,10 +86,3 @@ var collectTypes = function (node, context) {
     context.builder.component.types = types.filter(Boolean);
 };
 exports.collectTypes = collectTypes;
-var collectInterfaces = function (node, context) {
-    var interfaceStr = (0, generator_1.default)(node).code;
-    var _a = context.builder.component.interfaces, interfaces = _a === void 0 ? [] : _a;
-    interfaces.push(interfaceStr);
-    context.builder.component.interfaces = interfaces.filter(Boolean);
-};
-exports.collectInterfaces = collectInterfaces;

package/dist/src/parsers/jsx/jsx.js

@@ -616,11 +616,8 @@ function parseJsx(jsx, options) {
                     },
                     ExportNamedDeclaration: function (path, context) {
                         var node = path.node;
-                        var newTypeStr = (0, generator_1.default)(node).code;
-                        if (babel.types.isTSInterfaceDeclaration(node.declaration)) {
-                            (0, component_types_1.collectInterfaces)(path.node, context);
-                        }
-                        if (babel.types.isTSTypeAliasDeclaration(node.declaration)) {
+                        if (babel.types.isTSInterfaceDeclaration(node.declaration) ||
+                            babel.types.isTSTypeAliasDeclaration(node.declaration)) {
                             (0, component_types_1.collectTypes)(path.node, context);
                         }
                     },
@@ -628,7 +625,7 @@ function parseJsx(jsx, options) {
                         (0, component_types_1.collectTypes)(path.node, context);
                     },
                     TSInterfaceDeclaration: function (path, context) {
-                        (0, component_types_1.collectInterfaces)(path.node, context);
+                        (0, component_types_1.collectTypes)(path.node, context);
                     },
                 },
             }); },

package/dist/src/parsers/jsx/state.js

@@ -105,7 +105,6 @@ function mapReactIdentifiers(json) {
                 if (item.bindings.class) {
                     // TO-DO: it's too much work to merge 2 bindings, so just remove the old one for now.
                     item.bindings.class = item.bindings.className;
-                    console.warn("[".concat(json.name, "]: Found both 'class' and 'className' bindings: removing 'className'."));
                 }
                 else {
                     item.bindings.class = item.bindings.className;
@@ -115,7 +114,6 @@ function mapReactIdentifiers(json) {
             if (item.properties.className) {
                 if (item.properties.class) {
                     item.properties.class = "".concat(item.properties.class, " ").concat(item.properties.className);
-                    console.warn("[".concat(json.name, "]: Found both 'class' and 'className' properties: merging."));
                 }
                 else {
                     item.properties.class = item.properties.className;

package/dist/src/types/mitosis-component.d.ts

@@ -96,7 +96,6 @@ export declare type MitosisComponent = {
     children: MitosisNode[];
     subComponents: MitosisComponent[];
     types?: string[];
-    interfaces?: string[];
     propsTypeRef?: string;
 };
 export {};