@builder.io/mitosis 0.3.3 → 0.3.5

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

@@ -1,4 +1,4 @@
-export declare const HELPER_FUNCTIONS: {
+export declare const HELPER_FUNCTIONS: (isTs?: boolean) => {
     [key: string]: string;
 };
 export declare const getAppropriateTemplateFunctionKeys: (code: string) => string[];

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

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
-exports.HELPER_FUNCTIONS = {
-    useObjectWrapper: "useObjectWrapper(...args: any[]) {\n        let obj = {}\n        args.forEach((arg) => {\n          obj = { ...obj, ...arg };\n        });\n        return obj;\n      }",
-    useObjectDotValues: "useObjectDotValues(obj: any): any[] {\n        return Object.values(obj);\n      }",
-    useTypeOf: "useTypeOf(obj: any): string {\n        return typeof obj;\n      }",
-    useJsonStringify: "useJsonStringify(obj: any): string {\n        return JSON.stringify(obj);\n      }",
-};
+var HELPER_FUNCTIONS = function (isTs) { return ({
+    useObjectWrapper: "useObjectWrapper(...args".concat(isTs ? ': any[]' : '', ") {\n    let obj = {}\n    args.forEach((arg) => {\n      obj = { ...obj, ...arg };\n    });\n    return obj;\n  }"),
+    useObjectDotValues: "useObjectDotValues(obj".concat(isTs ? ': any' : '', ")").concat(isTs ? ': any[]' : '', ") {\n    return Object.values(obj);\n  }"),
+    useTypeOf: "useTypeOf(obj".concat(isTs ? ': any' : '', ")").concat(isTs ? ': string' : '', ") {\n    return typeof obj;\n  }"),
+    useJsonStringify: "useJsonStringify(...args".concat(isTs ? ': any' : '', ")").concat(isTs ? ': string' : '', ") {\n    return JSON.stringify(...args);\n  }"),
+}); };
+exports.HELPER_FUNCTIONS = HELPER_FUNCTIONS;
 var getAppropriateTemplateFunctionKeys = function (code) {
-    return Object.keys(exports.HELPER_FUNCTIONS).filter(function (key) { return code.includes(key); });
+    return Object.keys((0, exports.HELPER_FUNCTIONS)()).filter(function (key) { return code.includes(key); });
 };
 exports.getAppropriateTemplateFunctionKeys = getAppropriateTemplateFunctionKeys;

package/dist/src/generators/angular/index.d.ts

@@ -1,5 +1,11 @@
+import { MitosisComponent } from '../../types/mitosis-component';
 import { MitosisNode } from '../../types/mitosis-node';
 import { TranspilerGenerator } from '../../types/transpiler';
 import { AngularBlockOptions, ToAngularOptions } from './types';
-export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
+export declare const blockToAngular: ({ root, json, options, blockOptions, }: {
+    root: MitosisComponent;
+    json: MitosisNode;
+    options?: ToAngularOptions | undefined;
+    blockOptions?: AngularBlockOptions | undefined;
+}) => string;
 export declare const componentToAngular: TranspilerGenerator<ToAngularOptions>;

package/dist/src/generators/angular/index.js

@@ -52,7 +52,9 @@ var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var collect_css_1 = require("../../helpers/styles/collect-css");
 var helpers_1 = require("../../helpers/styles/helpers");
+var traverse_nodes_1 = require("../../helpers/traverse-nodes");
 var plugins_1 = require("../../modules/plugins");
+var symbol_processor_1 = require("../../symbols/symbol-processor");
 var mitosis_node_1 = require("../../types/mitosis-node");
 var function_1 = require("fp-ts/lib/function");
 var lodash_1 = require("lodash");
@@ -63,13 +65,13 @@ var on_mount_1 = require("../helpers/on-mount");
 var helpers_2 = require("./helpers");
 var types_1 = require("./types");
 var mappers = {
-    Fragment: function (json, options) {
+    Fragment: function (root, json, options) {
         return "<ng-container>".concat(json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options }); })
             .join('\n'), "</ng-container>");
     },
-    Slot: function (json, options) {
-        var renderChildren = function () { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToAngular)(item, options); }).join('\n'); };
+    Slot: function (root, json, options) {
+        var renderChildren = function () { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options }); }).join('\n'); };
         return "<ng-content ".concat(Object.entries(__assign(__assign({}, json.bindings), json.properties))
             .map(function (_a) {
             var binding = _a[0], value = _a[1];
@@ -152,7 +154,7 @@ var processCodeBlockInTemplate = function (code) {
         return "useObjectDotValues".concat(stripped);
     }
     else if (code.includes('JSON.stringify')) {
-        var obj = code.match(/JSON.stringify\([^)]*\)/g);
+        var obj = code.match(/JSON.stringify\((.*)\)/);
         return "useJsonStringify(".concat(obj, ")");
     }
     else if (code.includes(' as ')) {
@@ -183,13 +185,10 @@ var processEventBinding = function (key, code, nodeName, customArg) {
 var stringifyBinding = function (node, options, blockOptions) {
     return function (_a) {
         var key = _a[0], binding = _a[1];
-        if ((binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
+        if (options.state === 'inline-with-wrappers' && (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
             return;
         }
-        if (key.startsWith('$')) {
-            return;
-        }
-        if (key === 'key') {
+        if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
             return;
         }
         var keyToUse = BINDINGS_MAPPER[key] || key;
@@ -212,11 +211,13 @@ var stringifyBinding = function (node, options, blockOptions) {
             return " [attr.".concat(keyToUse, "]=\"").concat(code, "\" ");
         }
         else {
-            return "[".concat(keyToUse, "]=\"").concat(processCodeBlockInTemplate(code), "\"");
+            var codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
+            return "[".concat(keyToUse, "]=\"").concat(codeToUse, "\"");
         }
     };
 };
-var handleNgOutletBindings = function (node) {
+var handleNgOutletBindings = function (node, options) {
+    var _a;
     var allProps = '';
     for (var key in node.properties) {
         if (key.startsWith('$')) {
@@ -235,21 +236,22 @@ var handleNgOutletBindings = function (node) {
         if (key.startsWith('$')) {
             continue;
         }
-        var _a = node.bindings[key], code = _a.code, _b = _a.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
-        if (key.includes('props.')) {
-            allProps += "".concat(key.replace('props.', ''), ": ").concat(code, ", ");
-        }
-        else if (key.includes('.')) {
-            // TODO: handle arbitrary spread props
-            allProps += "".concat(key.split('.')[1], ": ").concat(code, ", ");
+        var _b = node.bindings[key], code = _b.code, _c = _b.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
+        if (options.state === 'class-properties') {
+            code = "this.".concat(code);
+            if (((_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread') {
+                allProps += "...".concat(code, ", ");
+                continue;
+            }
         }
-        else if (key.startsWith('on')) {
-            var _c = processEventBinding(key, code, node.name, cusArgs[0]), event_2 = _c.event, value = _c.value;
-            allProps += "on".concat(event_2.charAt(0).toUpperCase() + event_2.slice(1), ": ").concat(value.replace(/\(.*?\)/g, ''), ", ");
+        var keyToUse = key.includes('-') ? "'".concat(key, "'") : key;
+        keyToUse = keyToUse.replace('state.', '').replace('props.', '');
+        if (key.startsWith('on')) {
+            var _d = processEventBinding(key, code, node.name, cusArgs[0]), event_2 = _d.event, value = _d.value;
+            allProps += "on".concat(event_2.charAt(0).toUpperCase() + event_2.slice(1), ": ").concat(value.replace(/\(.*?\)/g, ''), ".bind(this), ");
         }
         else {
-            var codeToUse = processCodeBlockInTemplate(code);
-            var keyToUse = key.includes('-') ? "'".concat(key, "'") : key;
+            var codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
             allProps += "".concat(keyToUse, ": ").concat(codeToUse, ", ");
         }
     }
@@ -261,15 +263,14 @@ var handleNgOutletBindings = function (node) {
     }
     return allProps;
 };
-var blockToAngular = function (json, options, blockOptions) {
-    var _a, _b, _c, _d;
-    if (options === void 0) { options = {}; }
-    if (blockOptions === void 0) { blockOptions = {
+var blockToAngular = function (_a) {
+    var _b, _c, _d, _e;
+    var root = _a.root, json = _a.json, _f = _a.options, options = _f === void 0 ? {} : _f, _g = _a.blockOptions, blockOptions = _g === void 0 ? {
         nativeAttributes: [],
-    }; }
+    } : _g;
     var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     if (mappers[json.name]) {
-        return mappers[json.name](json, options);
+        return mappers[json.name](root, json, options);
     }
     if ((0, is_children_1.default)({ node: json })) {
         return "<ng-content></ng-content>";
@@ -277,38 +278,41 @@ var blockToAngular = function (json, options, blockOptions) {
     if (json.properties._text) {
         return json.properties._text;
     }
-    var textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    var textCode = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code;
     if (textCode) {
         if ((0, slots_1.isSlotProperty)(textCode)) {
             return "<ng-content select=\"[".concat((0, slots_1.toKebabSlot)(textCode), "]\"></ng-content>");
         }
         if (textCode.includes('JSON.stringify')) {
-            var obj = textCode.replace('JSON.stringify', '');
-            obj = obj.replace(/\(.*?\)/, '');
-            return "{{useJsonStringify".concat(obj, "}}");
+            var obj = textCode.replace(/JSON.stringify\(\s*(\w+)\s*,?.*\)/, '$1');
+            return "{{".concat(obj, " | json}}");
         }
         return "{{".concat(textCode, "}}");
     }
     var str = '';
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         var indexName = json.scope.indexName;
-        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
-        str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
+        str += "<ng-container *ngFor=\"let ".concat(json.scope.forName, " of ").concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
+        str += json.children
+            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
+            .join('\n');
         str += "</ng-container>";
     }
     else if (json.name === 'Show') {
-        var condition = (_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code;
-        if (condition === null || condition === void 0 ? void 0 : condition.includes('typeof')) {
+        var condition = (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code;
+        if (options.state === 'inline-with-wrappers' && (condition === null || condition === void 0 ? void 0 : condition.includes('typeof'))) {
             var wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
             condition = condition.replace("typeof ".concat(wordAfterTypeof), "useTypeOf(".concat(wordAfterTypeof, ")"));
         }
         str += "<ng-container *ngIf=\"".concat(condition, "\">");
-        str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
+        str += json.children
+            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
+            .join('\n');
         str += "</ng-container>";
         // else condition
-        if ((0, is_mitosis_node_1.isMitosisNode)((_d = json.meta) === null || _d === void 0 ? void 0 : _d.else)) {
+        if ((0, is_mitosis_node_1.isMitosisNode)((_e = json.meta) === null || _e === void 0 ? void 0 : _e.else)) {
             str += "<ng-container *ngIf=\"!(".concat(condition, ")\">");
-            str += (0, exports.blockToAngular)(json.meta.else, options, blockOptions);
+            str += (0, exports.blockToAngular)({ root: root, json: json.meta.else, options: options, blockOptions: blockOptions });
             str += "</ng-container>";
         }
     }
@@ -316,8 +320,38 @@ var blockToAngular = function (json, options, blockOptions) {
         var elSelector = childComponents.find(function (impName) { return impName === json.name; })
             ? (0, lodash_1.kebabCase)(json.name)
             : json.name;
-        var allProps = handleNgOutletBindings(json);
-        str += "<ng-container *ngComponentOutlet=\"\n      ".concat(elSelector.replace('state.', '').replace('props.', ''), ";\n      inputs: { ").concat(allProps, " };\n      content: myContent;\n      \">  ");
+        var allProps = handleNgOutletBindings(json, options);
+        if (options.state === 'class-properties') {
+            var inputsPropsStateName = "mergedInputs_".concat((0, symbol_processor_1.hashCodeAsString)(allProps));
+            root.state[inputsPropsStateName] = {
+                code: 'null',
+                type: 'property',
+            };
+            if (!root.hooks.onMount
+                .map(function (hook) { return hook.code; })
+                .join('')
+                .includes(inputsPropsStateName)) {
+                root.hooks.onMount.push({
+                    code: "this.".concat(inputsPropsStateName, " = {").concat(allProps, "}"),
+                    onSSR: false,
+                });
+            }
+            if (root.hooks.onUpdate &&
+                root.hooks.onUpdate.length > 0 &&
+                !root.hooks.onUpdate
+                    .map(function (hook) { return hook.code; })
+                    .join('')
+                    .includes(inputsPropsStateName)) {
+                root.hooks.onUpdate.push({
+                    code: "this.".concat(inputsPropsStateName, " = {").concat(allProps, "}"),
+                });
+            }
+            allProps = "".concat(inputsPropsStateName);
+        }
+        else {
+            allProps = "{ ".concat(allProps, " }");
+        }
+        str += "<ng-container *ngComponentOutlet=\"\n      ".concat(elSelector.replace('state.', '').replace('props.', ''), ";\n      inputs: ").concat(allProps, ";\n      content: myContent;\n      \">  ");
         str += "</ng-container>";
     }
     else {
@@ -347,7 +381,9 @@ var blockToAngular = function (json, options, blockOptions) {
         }
         str += '>';
         if (json.children) {
-            str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
+            str += json.children
+                .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
+                .join('\n');
         }
         str += "</".concat(elSelector, ">");
     }
@@ -360,7 +396,7 @@ var traverseToGetAllDynamicComponents = function (json, options, blockOptions) {
     (0, traverse_1.default)(json).forEach(function (item) {
         if ((0, is_mitosis_node_1.isMitosisNode)(item) && item.name.includes('.') && item.name.split('.').length === 2) {
             var children = item.children
-                .map(function (child) { return (0, exports.blockToAngular)(child, options, blockOptions); })
+                .map(function (child) { return (0, exports.blockToAngular)({ root: json, json: child, options: options, blockOptions: blockOptions }); })
                 .join('\n');
             dynamicTemplate = "<ng-template #".concat(item.name.split('.')[1].toLowerCase() + 'Template', ">").concat(children, "</ng-template>");
             components.add(item.name);
@@ -382,6 +418,147 @@ var processAngularCode = function (_a) {
         }), function (newCode) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith: replaceWith }); });
     };
 };
+var isASimpleProperty = function (code) {
+    var expressions = ['==', '===', '!=', '!==', '<', '>', '<=', '>='];
+    var invalidChars = ['{', '}', '(', ')', 'typeof'];
+    return !invalidChars.some(function (char) { return code.includes(char); }) && !expressions.includes(code);
+};
+var generateNewBindingName = function (index, name) {
+    return "node_".concat(index, "_").concat(name.replaceAll('.', '_').replaceAll('-', '_'));
+};
+var handleBindings = function (json, item, index, forName, indexName) {
+    var _a, _b, _c, _d, _e, _f;
+    for (var key in item.bindings) {
+        if (key.startsWith('"') ||
+            key.startsWith('$') ||
+            key === 'css' ||
+            key === 'ref' ||
+            isASimpleProperty(item.bindings[key].code)) {
+            continue;
+        }
+        var newBindingName = generateNewBindingName(index, item.name);
+        if (forName) {
+            if (item.name === 'For')
+                continue;
+            if (key.startsWith('on')) {
+                var _g = item.bindings[key].arguments, cusArgs = _g === void 0 ? ['event'] : _g;
+                var eventBindingName = "".concat(generateNewBindingName(index, item.name), "_event");
+                if (((_a = item.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.trim().startsWith('{')) &&
+                    ((_b = item.bindings[key]) === null || _b === void 0 ? void 0 : _b.code.trim().endsWith('}'))) {
+                    var forAndIndex = "".concat(forName ? ", ".concat(forName) : '').concat(indexName ? ", ".concat(indexName) : '');
+                    var eventArgs = "".concat(cusArgs.join(', ')).concat(forAndIndex);
+                    json.state[eventBindingName] = {
+                        code: "(".concat(eventArgs, ") => ").concat(item.bindings[key].code),
+                        type: 'function',
+                    };
+                    item.bindings[key].code = "state.".concat(eventBindingName, "(").concat(eventArgs, ")");
+                    json.state[newBindingName] = {
+                        code: "(".concat(eventArgs, ") => (").concat(item.bindings[key].code, ")"),
+                        type: 'function',
+                    };
+                    item.bindings[key].code = "state.".concat(newBindingName, "($").concat(eventArgs, ")");
+                }
+            }
+            else {
+                json.state[newBindingName] = {
+                    code: "(".concat(forName).concat(indexName ? ", ".concat(indexName) : '', ") => (").concat(item.bindings[key].code, ")"),
+                    type: 'function',
+                };
+                item.bindings[key].code = "state.".concat(newBindingName, "(").concat(forName).concat(indexName ? ", ".concat(indexName) : '', ")");
+            }
+        }
+        else if ((_c = item.bindings[key]) === null || _c === void 0 ? void 0 : _c.code) {
+            if (((_d = item.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) !== 'spread' && !key.startsWith('on')) {
+                json.state[newBindingName] = { code: 'null', type: 'property' };
+                json.hooks['onMount'].push({
+                    code: "state.".concat(newBindingName, " = ").concat(item.bindings[key].code),
+                    onSSR: false,
+                });
+                json.hooks['onUpdate'] = json.hooks['onUpdate'] || [];
+                json.hooks['onUpdate'].push({
+                    code: "state.".concat(newBindingName, " = ").concat(item.bindings[key].code),
+                });
+                item.bindings[key].code = "state.".concat(newBindingName);
+            }
+            else if (key.startsWith('on')) {
+                var _h = item.bindings[key].arguments, cusArgs = _h === void 0 ? ['event'] : _h;
+                if (((_e = item.bindings[key]) === null || _e === void 0 ? void 0 : _e.code.trim().startsWith('{')) &&
+                    ((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().endsWith('}'))) {
+                    json.state[newBindingName] = {
+                        code: "(".concat(cusArgs.join(', '), ") => ").concat(item.bindings[key].code),
+                        type: 'function',
+                    };
+                    item.bindings[key].code = "state.".concat(newBindingName, "(").concat(cusArgs.join(', '), ")");
+                }
+            }
+            else {
+                json.state[newBindingName] = { code: "null", type: 'property' };
+                json.hooks['onMount'].push({
+                    code: "state.".concat(newBindingName, " = {...(").concat(item.bindings[key].code, ")}"),
+                    onSSR: false,
+                });
+                json.hooks['onUpdate'] = json.hooks['onUpdate'] || [];
+                json.hooks['onUpdate'].push({
+                    code: "state.".concat(newBindingName, " = {...(").concat(item.bindings[key].code, ")}"),
+                });
+                item.bindings[newBindingName] = item.bindings[key];
+                item.bindings[key].code = "state.".concat(newBindingName);
+                delete item.bindings[key];
+            }
+        }
+        index++;
+    }
+    return index;
+};
+var handleProperties = function (json, item, index) {
+    for (var key in item.properties) {
+        if (key.startsWith('$') || isASimpleProperty(item.properties[key])) {
+            continue;
+        }
+        var newBindingName = generateNewBindingName(index, item.name);
+        json.state[newBindingName] = { code: '`' + "".concat(item.properties[key]) + '`', type: 'property' };
+        item.bindings[key] = { code: "state.".concat(newBindingName), type: 'single' };
+        delete item.properties[key];
+        index++;
+    }
+    return index;
+};
+var handleAngularBindings = function (json, item, index, _a) {
+    var _b = _a === void 0 ? {} : _a, forName = _b.forName, indexName = _b.indexName;
+    if ((0, is_children_1.default)({ node: item }))
+        return index;
+    index = handleBindings(json, item, index, forName, indexName);
+    index = handleProperties(json, item, index);
+    return index;
+};
+var classPropertiesPlugin = function () { return ({
+    json: {
+        pre: function (json) {
+            var lastId = 0;
+            (0, traverse_nodes_1.traverseNodes)(json, function (item) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+                    if (item.name === 'For') {
+                        var forName_1 = item.scope.forName;
+                        var indexName_1 = item.scope.indexName;
+                        (0, traverse_nodes_1.traverseNodes)(item, function (child) {
+                            if ((0, is_mitosis_node_1.isMitosisNode)(child)) {
+                                child._traversed = true;
+                                lastId = handleAngularBindings(json, child, lastId, {
+                                    forName: forName_1,
+                                    indexName: indexName_1,
+                                });
+                            }
+                        });
+                    }
+                    else if (!item._traversed) {
+                        lastId = handleAngularBindings(json, item, lastId);
+                    }
+                }
+            });
+            return json;
+        },
+    },
+}); };
 var componentToAngular = function (userOptions) {
     if (userOptions === void 0) { userOptions = {}; }
     return function (_a) {
@@ -446,6 +623,9 @@ var componentToAngular = function (userOptions) {
                 }
             }),
         ], false);
+        if (options.state === 'class-properties') {
+            options.plugins.push(classPropertiesPlugin);
+        }
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
@@ -515,13 +695,20 @@ var componentToAngular = function (userOptions) {
         var template = json.children
             .map(function (item) {
             var _a, _b;
-            var tmpl = (0, exports.blockToAngular)(item, options, {
-                childComponents: childComponents,
-                nativeAttributes: (_b = (_a = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _a === void 0 ? void 0 : _a.nativeAttributes) !== null && _b !== void 0 ? _b : [],
-            });
-            (0, helpers_2.getAppropriateTemplateFunctionKeys)(tmpl).forEach(function (key) {
-                return helperFunctions.add(helpers_2.HELPER_FUNCTIONS[key]);
+            var tmpl = (0, exports.blockToAngular)({
+                root: json,
+                json: item,
+                options: options,
+                blockOptions: {
+                    childComponents: childComponents,
+                    nativeAttributes: (_b = (_a = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _a === void 0 ? void 0 : _a.nativeAttributes) !== null && _b !== void 0 ? _b : [],
+                },
             });
+            if (options.state === 'inline-with-wrappers') {
+                (0, helpers_2.getAppropriateTemplateFunctionKeys)(tmpl).forEach(function (key) {
+                    return helperFunctions.add((0, helpers_2.HELPER_FUNCTIONS)(options.typescript)[key]);
+                });
+            }
             return tmpl;
         })
             .join('\n');
@@ -594,23 +781,25 @@ var componentToAngular = function (userOptions) {
             .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);
+            var propDeclaration = "@Input() ".concat(item).concat(options.typescript ? "!: ".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"); })
+            .map(function (refName) {
+            return "@ViewChild('".concat(refName, "') ").concat(refName).concat(options.typescript ? '!: ElementRef' : '');
+        })
             .join('\n'), Array.from(dynamicComponents)
             .map(function (component) {
             return "@ViewChild('".concat(component
                 .split('.')[1]
                 .toLowerCase(), "Template', { static: true }) ").concat(component
                 .split('.')[1]
-                .toLowerCase(), "TemplateRef!: TemplateRef<any>");
+                .toLowerCase(), "TemplateRef").concat(options.typescript ? '!: TemplateRef<any>' : '');
         })
-            .join('\n'), dynamicComponents.size ? 'myContent?: any[][];' : '', dataString, helperFunctions.size ? Array.from(helperFunctions).join('\n') : '', jsRefs
+            .join('\n'), dynamicComponents.size ? "myContent".concat(options.typescript ? '?: any[][];' : '') : '', dataString, helperFunctions.size ? Array.from(helperFunctions).join('\n') : '', jsRefs
             .map(function (ref) {
             var argument = json.refs[ref].argument;
             var typeParameter = json.refs[ref].typeParameter;
@@ -626,7 +815,9 @@ var componentToAngular = function (userOptions) {
         })
             .join('\n'), !hasConstructor && !dynamicComponents.size
             ? ''
-            : "constructor(\n".concat(injectables.join(',\n')).concat(dynamicComponents.size ? '\nprivate vcRef: ViewContainerRef,\n' : '', ") {\n            ").concat(!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
+            : "constructor(\n".concat(injectables.join(',\n')).concat(dynamicComponents.size
+                ? "\nprivate vcRef".concat(options.typescript ? ': ViewContainerRef' : '', ",\n")
+                : '', ") {\n            ").concat(!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
                 ? ''
                 : "\n              ".concat((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, "\n              "), "\n          }\n          "), !json.hooks.onMount.length && !dynamicComponents.size
             ? ''
@@ -640,7 +831,7 @@ var componentToAngular = function (userOptions) {
                     .join(', '), "];\n              ")
                 : '', "\n            }"), !((_k = json.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.length)
             ? ''
-            : "ngAfterContentChecked() {\n              ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
+            : "ngOnChanges() {\n              ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
                 code += hook.code;
                 return code + '\n';
             }, ''), "\n            }"), !json.hooks.onUnMount

package/dist/src/generators/angular/types.d.ts

@@ -1,6 +1,7 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export declare const BUILT_IN_COMPONENTS: Set<string>;
 export interface ToAngularOptions extends BaseTranspilerOptions {
+    state?: 'class-properties' | 'inline-with-wrappers';
     standalone?: boolean;
     preserveImports?: boolean;
     preserveFileExtensions?: boolean;

package/dist/src/generators/angular/types.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_ANGULAR_OPTIONS = exports.BUILT_IN_COMPONENTS = void 0;
 exports.BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);
 exports.DEFAULT_ANGULAR_OPTIONS = {
+    state: 'inline-with-wrappers',
     preserveImports: false,
     preserveFileExtensions: false,
     visuallyIgnoreHostElement: true,

package/dist/src/plugins/compile-away-builder-components.js

@@ -295,7 +295,7 @@ exports.components = {
             name: 'div',
             bindings: noUndefined({
                 css: (0, bindings_1.createSingleBinding)({
-                    code: JSON.stringify(__assign(__assign({ disply: 'flex', flexDirection: 'column' }, css), { position: 'relative' })),
+                    code: JSON.stringify(__assign(__assign({ display: 'flex', flexDirection: 'column' }, css), { position: 'relative' })),
                 }),
             }),
             children: __spreadArray([

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.3.3",
+  "version": "0.3.5",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {