@builder.io/mitosis 0.0.56-1 → 0.0.56-101

package/dist/src/generators/angular.js

@@ -3,14 +3,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAngular = exports.blockToAngular = void 0;
 var dedent_1 = __importDefault(require("dedent"));
+var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
-var collect_styles_1 = require("../helpers/collect-styles");
+var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_refs_1 = require("../helpers/get-refs");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
@@ -21,21 +31,51 @@ var jsx_1 = require("../parsers/jsx");
 var plugins_1 = require("../modules/plugins");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var get_props_1 = require("../helpers/get-props");
+var get_props_ref_1 = require("../helpers/get-props-ref");
+var get_prop_functions_1 = require("../helpers/get-prop-functions");
 var lodash_1 = require("lodash");
 var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var indent_1 = require("../helpers/indent");
+var slots_1 = require("../helpers/slots");
+var get_custom_imports_1 = require("../helpers/get-custom-imports");
+var get_components_used_1 = require("../helpers/get-components-used");
+var is_upper_case_1 = require("../helpers/is-upper-case");
+var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment']);
 var mappers = {
-    Fragment: function (json, options) {
+    Fragment: function (json, options, blockOptions) {
         return "<div>".concat(json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
             .join('\n'), "</div>");
     },
+    Slot: function (json, options, blockOptions) {
+        return "<ng-content ".concat(Object.keys(json.bindings)
+            .map(function (binding) {
+            var _a, _b, _c;
+            if (binding === 'name') {
+                var selector = (0, lodash_1.kebabCase)((_b = (_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.replace('props.slot', ''));
+                return "select=\"[".concat(selector, "]\"");
+            }
+            return "".concat((_c = json.bindings[binding]) === null || _c === void 0 ? void 0 : _c.code);
+        })
+            .join('\n'), "></ng-content>");
+    },
 };
-var blockToAngular = function (json, options) {
+// TODO: Maybe in the future allow defining `string | function` as values
+var BINDINGS_MAPPER = {
+    innerHTML: 'innerHTML',
+    style: 'ngStyle',
+};
+var blockToAngular = function (json, options, blockOptions) {
+    var _a, _b, _c, _d, _e, _f;
     if (options === void 0) { options = {}; }
+    if (blockOptions === void 0) { blockOptions = {}; }
+    var contextVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.contextVars) || [];
+    var outputVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.outputVars) || [];
+    var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
+    var domRefs = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.domRefs) || [];
     if (mappers[json.name]) {
-        return mappers[json.name](json, options);
+        return mappers[json.name](json, options, blockOptions);
     }
     if ((0, is_children_1.default)(json)) {
         return "<ng-content></ng-content>";
@@ -43,26 +83,44 @@ var blockToAngular = function (json, options) {
     if (json.properties._text) {
         return json.properties._text;
     }
-    if (json.bindings._text) {
-        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text), "}}");
+    if (/props\.slot/.test((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code)) {
+        var selector = (0, lodash_1.kebabCase)((_c = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.replace('props.slot', ''));
+        return "<ng-content select=\"[".concat(selector, "]\"></ng-content>");
+    }
+    if ((_d = json.bindings._text) === null || _d === void 0 ? void 0 : _d.code) {
+        return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text.code, {
+            // the context is the class
+            contextVars: [],
+            outputVars: outputVars,
+            domRefs: domRefs,
+        }), "}}");
     }
     var str = '';
+    var needsToRenderSlots = [];
     if (json.name === 'For') {
-        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each), "\">");
-        str += json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
-            .join('\n');
+        var indexName = json.scope.For[1];
+        str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code, {
+            contextVars: contextVars,
+            outputVars: outputVars,
+            domRefs: domRefs,
+        })).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
+        str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
     }
     else if (json.name === 'Show') {
-        str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when), "\">");
-        str += json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
-            .join('\n');
+        str += "<ng-container *ngIf=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code, {
+            contextVars: contextVars,
+            outputVars: outputVars,
+            domRefs: domRefs,
+        }), "\">");
+        str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
     }
     else {
-        str += "<".concat(json.name, " ");
+        var elSelector = childComponents.find(function (impName) { return impName === json.name; })
+            ? (0, lodash_1.kebabCase)(json.name)
+            : json.name;
+        str += "<".concat(elSelector, " ");
         // TODO: spread support for angular
         // if (json.bindings._spread) {
         //   str += `v-bind="${stripStateAndPropsRefs(
@@ -83,22 +141,41 @@ var blockToAngular = function (json, options) {
             if (key.startsWith('$')) {
                 continue;
             }
-            var value = json.bindings[key];
+            var _g = json.bindings[key], code = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
             // TODO: proper babel transform to replace. Util for this
-            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
+            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                contextVars: contextVars,
+                outputVars: outputVars,
+                domRefs: domRefs,
+            }).replace(/"/g, '&quot;');
             if (key.startsWith('on')) {
                 var event_1 = key.replace('on', '').toLowerCase();
-                if (event_1 === 'change' &&
-                    json.name === 'input' /* todo: other tags */) {
+                if (event_1 === 'change' && json.name === 'input' /* todo: other tags */) {
                     event_1 = 'input';
                 }
                 // TODO: proper babel transform to replace. Util for this
-                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue.replace(/event\./g, '$event.'));
+                var eventName = cusArgs[0];
+                var regexp = new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g');
+                var replacer = '$1$event$2';
+                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue.replace(regexp, replacer));
                 str += " (".concat(event_1, ")=\"").concat(finalValue, "\" ");
             }
+            else if (key === 'class') {
+                str += " [class]=\"".concat(useValue, "\" ");
+            }
             else if (key === 'ref') {
                 str += " #".concat(useValue, " ");
             }
+            else if ((0, slots_1.isSlotProperty)(key)) {
+                var lowercaseKey = key.replace('slot', '')[0].toLowerCase() + key.replace('slot', '').substring(1);
+                needsToRenderSlots.push("".concat(useValue.replace(/(\/\>)|\>/, " ".concat(lowercaseKey, ">"))));
+            }
+            else if (BINDINGS_MAPPER[key]) {
+                str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(useValue, "\"  ");
+            }
+            else if (key.includes('-')) {
+                str += " [attr.".concat(key, "]=\"").concat(useValue, "\" ");
+            }
             else {
                 str += " [".concat(key, "]=\"").concat(useValue, "\" ");
             }
@@ -107,12 +184,13 @@ var blockToAngular = function (json, options) {
             return str + ' />';
         }
         str += '>';
+        if (needsToRenderSlots.length > 0) {
+            str += needsToRenderSlots.map(function (el) { return el; }).join('');
+        }
         if (json.children) {
-            str += json.children
-                .map(function (item) { return (0, exports.blockToAngular)(item, options); })
-                .join('\n');
+            str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         }
-        str += "</".concat(json.name, ">");
+        str += "</".concat(elSelector, ">");
     }
     return str;
 };
@@ -120,24 +198,86 @@ exports.blockToAngular = blockToAngular;
 var componentToAngular = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b;
-        var component = _a.component;
+        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);
+        var json = (0, fast_clone_1.fastClone)(_component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
-        var props = (0, get_props_1.getProps)(component);
-        var refs = Array.from((0, get_refs_1.getRefs)(json));
-        (0, map_refs_1.mapRefs)(json, function (refName) { return "this.".concat(refName, ".nativeElement"); });
+        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) {
+            var imports = _a.imports;
+            Object.keys(imports).forEach(function (key) {
+                if (imports[key] === 'default') {
+                    childComponents.push(key);
+                }
+            });
+        });
+        var customImports = (0, get_custom_imports_1.getCustomImports)(json);
+        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, ";"); });
+        var metaOutputVars = ((_c = (_b = json.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.outputs) || [];
+        var contextVars = Object.keys(((_d = json === null || json === void 0 ? void 0 : json.context) === null || _d === void 0 ? void 0 : _d.get) || {});
+        var injectables = contextVars.map(function (variableName) {
+            var _a, _b, _c, _d;
+            var variableType = (_a = json === null || json === void 0 ? void 0 : json.context) === null || _a === void 0 ? void 0 : _a.get[variableName].name;
+            if ((_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.injectables) {
+                return (_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.injectables(variableName, variableType);
+            }
+            if ((_d = options === null || options === void 0 ? void 0 : options.experimental) === null || _d === void 0 ? void 0 : _d.inject) {
+                return "@Inject(forwardRef(() => ".concat(variableType, ")) public ").concat(variableName, ": ").concat(variableType);
+            }
+            return "public ".concat(variableName, " : ").concat(variableType);
+        });
+        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)(json), true));
+        // remove props for outputs
+        outputVars.forEach(function (variableName) {
+            props.delete(variableName);
+        });
+        var outputs = outputVars.map(function (variableName) {
+            var _a, _b;
+            if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.outputs) {
+                return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.outputs(json, variableName);
+            }
+            return "@Output() ".concat(variableName, " = new EventEmitter()");
+        });
+        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) || {});
+        var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter(function (item) { return item.length && (0, is_upper_case_1.isUpperCase)(item[0]) && !BUILT_IN_COMPONENTS.has(item); });
+        (0, map_refs_1.mapRefs)(json, function (refName) {
+            var isDomRef = domRefs.has(refName);
+            return "this.".concat(isDomRef ? '' : '_').concat(refName).concat(isDomRef ? '.nativeElement' : '');
+        });
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
-        var css = (0, collect_styles_1.collectCss)(json);
+        var css = (0, collect_css_1.collectCss)(json);
         if (options.prettier !== false) {
             css = tryFormat(css, 'css');
         }
-        var template = json.children.map(function (item) { return (0, exports.blockToAngular)(item); }).join('\n');
+        var blockOptions = {
+            contextVars: contextVars,
+            outputVars: outputVars,
+            domRefs: [],
+            childComponents: childComponents,
+        };
+        var template = json.children
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
+            .join('\n');
         if (options.prettier !== false) {
             template = tryFormat(template, 'html');
         }
@@ -145,30 +285,88 @@ var componentToAngular = function (options) {
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             format: 'class',
             valueMapper: function (code) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: 'this.' });
+                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                    replaceWith: 'this.',
+                    contextVars: contextVars,
+                    outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
+                    stateVars: stateVars,
+                });
             },
         });
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\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    import { Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\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  "])), refs.length ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', (0, render_imports_1.renderPreComponent)(json), (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
+        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.defaultProps ? '' : "const defaultProps = ".concat(json5_1.default.stringify(json.defaultProps), "\n"), (0, render_imports_1.renderPreComponent)({
+            component: json,
+            target: 'angular',
+            excludeMitosisComponents: !options.standalone,
+        }), options.standalone
+            ? // TODO: also add child component imports here as well
+                "\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, Array.from(props)
-            .map(function (item) { return "@Input() ".concat(item, ": any"); })
-            .join('\n'), refs
+            : '', 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';
+            var propDeclaration = "@Input() ".concat(item, ": ").concat(propType);
+            if (json.defaultProps && json.defaultProps.hasOwnProperty(item)) {
+                propDeclaration += " = defaultProps[\"".concat(item, "\"]");
+            }
+            return propDeclaration;
+        })
+            .join('\n'), outputs.join('\n'), Array.from(domRefs)
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })
-            .join('\n'), !component.hooks.onMount
+            .join('\n'), dataString, jsRefs
+            .map(function (ref) {
+            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.',
+                    contextVars: contextVars,
+                    outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
+                    stateVars: stateVars,
+                }))
+                : '', ";");
+        })
+            .join('\n'), !hasConstructor
             ? ''
-            : "ngOnInit() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onMount.code, {
-                replaceWith: 'this.',
-            }), "\n            }"), !((_b = component.hooks.onUpdate) === null || _b === void 0 ? void 0 : _b.length)
+            : "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 = 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 = json.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
+                ? ''
+                : "\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 = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
             ? ''
-            : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.map(function (hook) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {
+            : "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,
+                    outputVars: outputVars,
+                    domRefs: Array.from(domRefs),
+                    stateVars: stateVars,
                 });
-            }), "\n            }"), !component.hooks.onUnMount
+                return code + '\n';
+            }, ''), "\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.',
-            }), "\n            }"), dataString);
+                contextVars: contextVars,
+                outputVars: outputVars,
+                domRefs: Array.from(domRefs),
+                stateVars: stateVars,
+            }), "\n            }"));
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

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

@@ -1,6 +1,6 @@
 import { MitosisNode } from '../types/mitosis-node';
 import { BuilderElement } from '@builder.io/sdk';
-import { TranspilerArgs } from '../types/config';
+import { TranspilerArgs } from '../types/transpiler';
 export interface ToBuilderOptions {
     includeIds?: boolean;
 }
@@ -10,7 +10,7 @@ declare type InternalOptions = {
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
 export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => {
     data: {
-        httpRequests: any;
+        httpRequests: import("../types/json")._JSON;
         jsCode: string;
         tsCode: string;
         blocks: BuilderElement[];

package/dist/src/generators/builder.js

@@ -33,6 +33,8 @@ var lodash_1 = require("lodash");
 var builder_1 = require("../parsers/builder");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var traverse_1 = __importDefault(require("traverse"));
+var symbol_processor_1 = require("../symbols/symbol-processor");
+var state_1 = require("../helpers/state");
 var omitMetaProperties = function (obj) {
     return (0, lodash_1.omitBy)(obj, function (_value, key) { return key.startsWith('$'); });
 };
@@ -57,9 +59,7 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
     : {
         Symbol: function (node, options) {
             var child = node.children[0];
-            var symbolOptions = (node.bindings.symbol &&
-                json5_1.default.parse(node.bindings.symbol)) ||
-                {};
+            var symbolOptions = (node.bindings.symbol && json5_1.default.parse(node.bindings.symbol.code)) || {};
             if (child) {
                 (0, lodash_1.set)(symbolOptions, 'content.data.blocks', child.children.map(function (item) { return (0, exports.blockToBuilder)(item, options); }));
             }
@@ -82,12 +82,13 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
         block.children = [];
         return block;
     }, For: function (node, options) {
+        var _a;
         return el({
             component: {
                 name: 'Core:Fragment',
             },
             repeat: {
-                collection: node.bindings.each,
+                collection: (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code,
                 itemName: node.properties._forName,
             },
             children: node.children
@@ -95,13 +96,14 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
                 .map(function (node) { return (0, exports.blockToBuilder)(node, options); }),
         }, options);
     }, Show: function (node, options) {
+        var _a;
         return el({
             // TODO: the reverse mapping for this
             component: {
                 name: 'Core:Fragment',
             },
             bindings: {
-                show: node.bindings.when,
+                show: (_a = node.bindings.when) === null || _a === void 0 ? void 0 : _a.code,
             },
             children: node.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
@@ -109,7 +111,7 @@ var componentMappers = __assign(__assign({}, (!builder_1.symbolBlocksAsChildren
         }, options);
     } });
 var el = function (options, toBuilderOptions) { return (__assign(__assign({ '@type': '@builder.io/sdk:Element' }, (toBuilderOptions.includeIds && {
-    id: 'builder-' + Math.random().toString(36).split('.')[1],
+    id: 'builder-' + (0, symbol_processor_1.hashCodeAsString)(options),
 })), options)); };
 function tryFormat(code) {
     var str = code;
@@ -129,20 +131,20 @@ function tryFormat(code) {
 }
 var blockToBuilder = function (json, options, _internalOptions) {
     var _a;
-    var _b;
+    var _b, _c, _d, _e, _f, _g;
     if (options === void 0) { options = {}; }
     if (_internalOptions === void 0) { _internalOptions = {}; }
     var mapper = !_internalOptions.skipMapper && componentMappers[json.name];
     if (mapper) {
         return mapper(json, options);
     }
-    if (json.properties._text || json.bindings._text) {
+    if (json.properties._text || ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code)) {
         return el({
             tagName: 'span',
-            bindings: __assign({}, (json.bindings._text
+            bindings: __assign({}, (((_c = json.bindings._text) === null || _c === void 0 ? void 0 : _c.code)
                 ? {
-                    'component.options.text': json.bindings._text,
-                    'json.bindings._text': undefined,
+                    'component.options.text': json.bindings._text.code,
+                    'json.bindings._text.code': undefined,
                 }
                 : {})),
             component: {
@@ -158,9 +160,10 @@ var blockToBuilder = function (json, options, _internalOptions) {
     var actions = {};
     for (var key in bindings) {
         var eventBindingKeyRegex = /^on([A-Z])/;
-        var firstCharMatchForEventBindingKey = (_b = key.match(eventBindingKeyRegex)) === null || _b === void 0 ? void 0 : _b[1];
+        var firstCharMatchForEventBindingKey = (_d = key.match(eventBindingKeyRegex)) === null || _d === void 0 ? void 0 : _d[1];
         if (firstCharMatchForEventBindingKey) {
-            actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] = (0, remove_surrounding_block_1.removeSurroundingBlock)(bindings[key]);
+            actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] =
+                (0, remove_surrounding_block_1.removeSurroundingBlock)((_e = bindings[key]) === null || _e === void 0 ? void 0 : _e.code);
             delete bindings[key];
         }
     }
@@ -172,24 +175,24 @@ var blockToBuilder = function (json, options, _internalOptions) {
                 return "continue";
             }
             var value = bindings[key];
-            var parsed = (0, lodash_1.attempt)(function () { return json5_1.default.parse(value); });
+            var parsed = (0, lodash_1.attempt)(function () { return json5_1.default.parse(value === null || value === void 0 ? void 0 : value.code); });
             if (!(parsed instanceof Error)) {
                 componentOptions[key] = parsed;
             }
             else {
-                builderBindings["component.options.".concat(key)] = bindings[key];
+                builderBindings["component.options.".concat(key)] = bindings[key].code;
             }
         };
         for (var key in bindings) {
             _loop_1(key);
         }
     }
-    var hasCss = !!bindings.css;
+    var hasCss = !!((_f = bindings.css) === null || _f === void 0 ? void 0 : _f.code);
     var responsiveStyles = {
         large: {},
     };
     if (hasCss) {
-        var cssRules = json5_1.default.parse(bindings.css);
+        var cssRules = json5_1.default.parse((_g = bindings.css) === null || _g === void 0 ? void 0 : _g.code);
         var cssRuleKeys = Object.keys(cssRules);
         for (var _i = 0, cssRuleKeys_1 = cssRuleKeys; _i < cssRuleKeys_1.length; _i++) {
             var ruleKey = cssRuleKeys_1[_i];
@@ -208,7 +211,7 @@ var blockToBuilder = function (json, options, _internalOptions) {
     }
     if (thisIsComponent) {
         for (var key in json.bindings) {
-            bindings["component.options.".concat(key)] = json.bindings[key];
+            builderBindings["component.options.".concat(key)] = json.bindings[key].code;
         }
     }
     return el(__assign(__assign(__assign(__assign({ tagName: thisIsComponent ? undefined : json.name }, (hasCss && {
@@ -221,11 +224,9 @@ var blockToBuilder = function (json, options, _internalOptions) {
     })), { code: {
             bindings: builderBindings,
             actions: actions,
-        }, properties: thisIsComponent
-            ? undefined
-            : omitMetaProperties(json.properties), bindings: thisIsComponent
+        }, properties: thisIsComponent ? undefined : omitMetaProperties(json.properties), bindings: thisIsComponent
             ? builderBindings
-            : (0, lodash_1.omit)(bindings, 'css'), actions: actions, children: json.children
+            : (0, lodash_1.omit)((0, lodash_1.mapValues)(bindings, function (value) { return value === null || value === void 0 ? void 0 : value.code; }), 'css'), actions: actions, children: json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (child) { return (0, exports.blockToBuilder)(child, options); }) }), options);
 };
@@ -235,16 +236,12 @@ var componentToBuilder = function (options) {
     return function (_a) {
         var _b, _c, _d, _e;
         var component = _a.component;
-        var hasState = Boolean(Object.keys(component.state).length);
+        var hasState = (0, state_1.checkHasState)(component);
         var result = (0, fast_clone_1.fastClone)({
             data: {
                 httpRequests: (_c = (_b = component === null || component === void 0 ? void 0 : component.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.httpRequests,
-                jsCode: tryFormat((0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n        \n        ", "\n      "], ["\n        ", "\n\n        ", "\n        \n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState
-                    ? ''
-                    : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_d = component.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : component.hooks.onMount.code)),
-                tsCode: tryFormat((0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState
-                    ? ''
-                    : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_e = component.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
+                jsCode: tryFormat((0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n        \n        ", "\n      "], ["\n        ", "\n\n        ", "\n        \n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_d = component.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : component.hooks.onMount.code)),
+                tsCode: tryFormat((0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState ? '' : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_e = component.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
                     ? ''
                     : "onMount(() => {\n                ".concat(component.hooks.onMount.code, "\n              })"))),
                 blocks: component.children

package/dist/src/generators/context/{react copy.d.ts → qwik.d.ts}

@@ -1,8 +1,8 @@
 import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToReactOptions = {
+declare type ContextToQwikOptions = {
     format?: boolean;
 };
-export declare const contextToReact: (options?: ContextToReactOptions) => ({ context }: {
+export declare const contextToQwik: (options?: ContextToQwikOptions) => ({ context }: {
     context: MitosisContext;
 }) => string;
 export {};

package/dist/src/generators/context/{react copy.js → qwik.js}

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.contextToReact = void 0;
+exports.contextToQwik = void 0;
 var standalone_1 = require("prettier/standalone");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var contextToReact = function (options) {
+var contextToQwik = function (options) {
     if (options === void 0) { options = {}; }
     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  ");
+        var str = "\n  import { createContext } from '@builder.io/qwik';\n\n  export default createContext(\"".concat(context.name, "\")\n  ");
         if (options.format !== false) {
             try {
                 str = (0, standalone_1.format)(str, {
@@ -25,4 +24,4 @@ var contextToReact = function (options) {
         return str;
     };
 };
-exports.contextToReact = contextToReact;
+exports.contextToQwik = contextToQwik;