@builder.io/mitosis 0.0.56-90 → 0.0.56-93

package/dist/src/generators/angular.js

@@ -197,9 +197,9 @@ var componentToAngular = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        var component = _a.component;
+        var _component = _a.component;
         // Make a copy we can safely mutate, similar to babel's toolchain
-        var json = (0, fast_clone_1.fastClone)(component);
+        var json = (0, fast_clone_1.fastClone)(_component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
@@ -215,7 +215,7 @@ var componentToAngular = function (options) {
             });
         });
         var customImports = (0, get_custom_imports_1.getCustomImports)(json);
-        var _p = component.exports, localExports = _p === void 0 ? {} : _p;
+        var _p = json.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, ";"); });
@@ -232,14 +232,14 @@ var componentToAngular = function (options) {
             }
             return "public ".concat(variableName, " : ").concat(variableType);
         });
-        var hasConstructor = Boolean(injectables.length || ((_e = component.hooks) === null || _e === void 0 ? void 0 : _e.onInit));
-        var props = (0, get_props_1.getProps)(component);
+        var hasConstructor = Boolean(injectables.length || ((_e = json.hooks) === null || _e === void 0 ? void 0 : _e.onInit));
+        var props = (0, get_props_1.getProps)(json);
         // prevent jsx props from showing up as @Input
         if (hasPropRef) {
             props.delete(forwardProp);
         }
         props.delete('children');
-        var outputVars = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], metaOutputVars, true), (0, get_prop_functions_1.getPropFunctions)(component), true));
+        var outputVars = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], metaOutputVars, true), (0, get_prop_functions_1.getPropFunctions)(json), true));
         // remove props for outputs
         outputVars.forEach(function (variableName) {
             props.delete(variableName);
@@ -251,7 +251,7 @@ var componentToAngular = function (options) {
             }
             return "@Output() ".concat(variableName, " = new EventEmitter()");
         });
-        var hasOnMount = Boolean((_f = component.hooks) === null || _f === void 0 ? void 0 : _f.onMount);
+        var hasOnMount = Boolean((_f = json.hooks) === null || _f === void 0 ? void 0 : _f.onMount);
         var domRefs = (0, get_refs_1.getRefs)(json);
         var jsRefs = Object.keys(json.refs).filter(function (ref) { return !domRefs.has(ref); });
         var stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
@@ -301,7 +301,7 @@ var componentToAngular = function (options) {
                 "\n        standalone: true,\n        imports: [CommonModule".concat(componentsUsed.length ? ", ".concat(componentsUsed.join(', ')) : '', "],\n      ")
             : '', (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
             ? "styles: [\n        `".concat((0, indent_1.indent)(css, 8), "`\n      ],")
-            : '', component.name, localExportVars.join('\n'), customImports.map(function (name) { return "".concat(name, " = ").concat(name); }).join('\n'), Array.from(props)
+            : '', json.name, localExportVars.join('\n'), customImports.map(function (name) { return "".concat(name, " = ").concat(name); }).join('\n'), Array.from(props)
             .filter(function (item) { return !(0, slots_1.isSlotProperty)(item) && item !== 'children'; })
             .map(function (item) {
             var propType = propsTypeRef ? "".concat(propsTypeRef, "[\"").concat(item, "\"]") : 'any';
@@ -311,8 +311,8 @@ var componentToAngular = function (options) {
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })
             .join('\n'), dataString, jsRefs
             .map(function (ref) {
-            var argument = component.refs[ref].argument;
-            var typeParameter = component.refs[ref].typeParameter;
+            var argument = json.refs[ref].argument;
+            var typeParameter = json.refs[ref].typeParameter;
             return "private _".concat(ref).concat(typeParameter ? ": ".concat(typeParameter) : '').concat(argument
                 ? " = ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(argument, {
                     replaceWith: 'this.',
@@ -325,25 +325,25 @@ var componentToAngular = function (options) {
         })
             .join('\n'), !hasConstructor
             ? ''
-            : "constructor(\n".concat(injectables.join(',\n'), ") {\n            ").concat(!((_h = component.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
+            : "constructor(\n".concat(injectables.join(',\n'), ") {\n            ").concat(!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
                 ? ''
-                : "\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_j = component.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, {
+                : "\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
                 }), "\n              "), "\n          }\n          "), !hasOnMount
             ? ''
-            : "ngOnInit() {\n              \n              ".concat(!((_k = component.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
+            : "ngOnInit() {\n              \n              ".concat(!((_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
                 ? ''
-                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_l = component.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, {
+                : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_l = json.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, {
                     replaceWith: 'this.',
                     contextVars: contextVars,
                     outputVars: outputVars,
                     domRefs: Array.from(domRefs),
                     stateVars: stateVars,
-                }), "\n                "), "\n            }"), !((_m = component.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
+                }), "\n                "), "\n            }"), !((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
             ? ''
-            : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.reduce(function (code, hook) {
+            : "ngAfterContentChecked() {\n              ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
                 code += (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {
                     replaceWith: 'this.',
                     contextVars: contextVars,
@@ -352,9 +352,9 @@ var componentToAngular = function (options) {
                     stateVars: stateVars,
                 });
                 return code + '\n';
-            }, ''), "\n            }"), !component.hooks.onUnMount
+            }, ''), "\n            }"), !json.hooks.onUnMount
             ? ''
-            : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUnMount.code, {
+            : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onUnMount.code, {
                 replaceWith: 'this.',
                 contextVars: contextVars,
                 outputVars: outputVars,

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

@@ -28,6 +28,17 @@ var get_refs_1 = require("../../helpers/get-refs");
 var lodash_1 = require("lodash");
 var is_upper_case_1 = require("../../helpers/is-upper-case");
 var has_1 = require("../../helpers/has");
+var getCustomTagName = function (name, options) {
+    if (!name || !(0, is_upper_case_1.isUpperCase)(name[0])) {
+        return name;
+    }
+    var kebabCaseName = (0, dash_case_1.dashCase)(name);
+    if (!kebabCaseName.includes('-')) {
+        // TODO: option to choose your prefix
+        return 'my-' + kebabCaseName;
+    }
+    return kebabCaseName;
+};
 var blockToLit = function (json, options) {
     var _a, _b, _c, _d, _e;
     if (options === void 0) { options = {}; }
@@ -50,7 +61,7 @@ var blockToLit = function (json, options) {
             .join('\n'), "`\n    : ").concat(!json.meta.else ? 'null' : "html`".concat(blockToLit(json.meta.else, options), "`"), "}");
     }
     var str = '';
-    var tagName = (0, is_upper_case_1.isUpperCase)(json.name[0]) ? (0, dash_case_1.dashCase)(json.name) : json.name;
+    var tagName = getCustomTagName(json.name, options);
     str += "<".concat(tagName, " ");
     var classString = (0, collect_class_string_1.collectClassString)(json);
     if (classString) {
@@ -164,9 +175,9 @@ var componentToLit = function (options) {
                 html = html.replace(/\n{3,}/g, '\n\n');
             }
         }
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
             ? "\n      const spread = (properties) =>\n        directive((part) => {\n          for (const property in properties) {\n            const value = properties[attr];\n            part.element[property] = value;\n          }\n        });\n    "
-            : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || (0, dash_case_1.dashCase)(json.name), json.name, css.length
+            : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || getCustomTagName(json.name, options), json.name, css.length
             ? "static styles = css`\n      ".concat((0, indent_1.indent)(css, 8), "`;")
             : '', Array.from(domRefs)
             .map(function (refName) { return "\n          @query('[ref=\"".concat(refName, "\"]')\n          ").concat((0, lodash_1.camelCase)(refName), "!: HTMLElement;\n          "); })

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

@@ -62,7 +62,7 @@ function getStatePropertyNames(json) {
     return Object.keys(json.state).filter(function (key) { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; });
 }
 var blockToMarko = function (json, options) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if (json.properties._text) {
         return json.properties._text;
     }
@@ -73,20 +73,21 @@ var blockToMarko = function (json, options) {
         return json.children.map(function (child) { return blockToMarko(child, options); }).join('\n');
     }
     if (json.name === 'For') {
-        return "<for|".concat(json.properties._forName, "| of=(").concat(processBinding(options.component, (_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), ")>\n      ").concat(json.children
+        var forArguments = (((_c = json === null || json === void 0 ? void 0 : json.scope) === null || _c === void 0 ? void 0 : _c.For) || []).join(',');
+        return "<for|".concat(forArguments, "| of=(").concat(processBinding(options.component, (_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code), ")>\n      ").concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToMarko(item, options); })
             .join('\n'), "\n    </for>");
     }
     else if (json.name === 'Show') {
-        return "<if(".concat(processBinding(options.component, (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code), ")>\n      ").concat(json.children
+        return "<if(".concat(processBinding(options.component, (_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code), ")>\n      ").concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToMarko(item, options); })
             .join('\n'), "</if>\n    ").concat(!json.meta.else ? '' : "<else>".concat(blockToMarko(json.meta.else, options), "</else>"));
     }
     var str = '';
     str += "<".concat(json.name, " ");
-    if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
+    if ((_f = json.bindings._spread) === null || _f === void 0 ? void 0 : _f.code) {
         str += " ...(".concat(json.bindings._spread.code, ") ");
     }
     for (var key in json.properties) {
@@ -94,7 +95,7 @@ var blockToMarko = function (json, options) {
         str += " ".concat(key, "=\"").concat(value, "\" ");
     }
     for (var key in json.bindings) {
-        var _f = json.bindings[key], code = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g;
+        var _g = json.bindings[key], code = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
         if (key === '_spread' || key === '_forName') {
             continue;
         }

package/dist/src/helpers/strip-state-and-props-refs.js

@@ -28,7 +28,7 @@ var stripStateAndPropsRefs = function (code, options) {
     if (outputVars.length) {
         outputVars.forEach(function (_var) {
             // determine expression edge cases onMessage( to this.onMessage.emit(
-            var regexp = '( |;|\\()(props\\.?)' + _var + '\\(';
+            var regexp = '(^|\\s|;|\\()(props\\.?)' + _var + '\\(';
             var replacer = '$1' + context + _var + '.emit(';
             newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
         });