@builder.io/mitosis 0.0.75 → 0.0.77-0

package/dist/src/generators/angular.js

@@ -54,85 +54,76 @@ 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 html_tags_1 = require("../constants/html_tags");
+var function_1 = require("fp-ts/lib/function");
+var merge_options_1 = require("../helpers/merge-options");
+var process_code_1 = require("../helpers/plugins/process-code");
 var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment']);
 var mappers = {
-    Fragment: function (json, options, blockOptions) {
-        return "<div>".concat(json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
-            .join('\n'), "</div>");
+    Fragment: function (json, options) {
+        return "<ng-container>".concat(json.children
+            .map(function (item) { return (0, exports.blockToAngular)(item, options); })
+            .join('\n'), "</ng-container>");
     },
-    Slot: function (json, options, blockOptions) {
-        return "<ng-content ".concat(Object.keys(json.bindings)
-            .map(function (binding) {
-            var _a, _b;
-            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', ''));
+    Slot: function (json, options) {
+        return "<ng-content ".concat(Object.entries(json.bindings)
+            .map(function (_a) {
+            var binding = _a[0], value = _a[1];
+            if (value && binding === 'name') {
+                var selector = (0, function_1.pipe)(value.code, slots_1.stripSlotPrefix, lodash_1.kebabCase);
                 return "select=\"[".concat(selector, "]\"");
             }
         })
-            .join('\n'), ">").concat(Object.keys(json.bindings)
-            .map(function (binding) {
-            var _a;
-            if (binding !== 'name') {
-                return "".concat((_a = json.bindings[binding]) === null || _a === void 0 ? void 0 : _a.code);
+            .join('\n'), ">").concat(Object.entries(json.bindings)
+            .map(function (_a) {
+            var binding = _a[0], value = _a[1];
+            if (value && binding !== 'name') {
+                return value.code;
             }
         })
             .join('\n'), "</ng-content>");
     },
 };
+var generateNgModule = function (content, name, componentsUsed, component, bootstrapMapper) {
+    return "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\n\n".concat(content, "\n\n@NgModule({\n  declarations: [").concat(name, "],\n  imports: [BrowserModule").concat(componentsUsed.length ? ', ' + componentsUsed.map(function (comp) { return "".concat(comp, "Module"); }).join(', ') : '', "],\n  exports: [").concat(name, "],\n  ").concat(bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : '', "\n})\nexport class ").concat(name, "Module {}");
+};
 // 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, _g;
+    var _a, _b, _c, _d;
     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) || [];
     var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name.trim());
     if (mappers[json.name]) {
-        return mappers[json.name](json, options, blockOptions);
+        return mappers[json.name](json, options);
     }
-    if ((0, is_children_1.default)(json)) {
+    if ((0, is_children_1.default)({ node: json })) {
         return "<ng-content></ng-content>";
     }
     if (json.properties._text) {
         return json.properties._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 textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    if (textCode) {
+        if ((0, slots_1.isSlotProperty)(textCode)) {
+            var selector = (0, function_1.pipe)(textCode, slots_1.stripSlotPrefix, lodash_1.kebabCase);
+            return "<ng-content select=\"[".concat(selector, "]\"></ng-content>");
+        }
+        return "{{".concat(textCode, "}}");
     }
     var str = '';
     var needsToRenderSlots = [];
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         var indexName = json.scope.indexName;
-        str += "<ng-container *ngFor=\"let ".concat(json.scope.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 += "<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>";
     }
     else if (json.name === 'Show') {
-        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 += "<ng-container *ngIf=\"".concat((_c = json.bindings.when) === null || _c === void 0 ? void 0 : _c.code, "\">");
         str += json.children.map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); }).join('\n');
         str += "</ng-container>";
     }
@@ -155,19 +146,14 @@ var blockToAngular = function (json, options, blockOptions) {
             str += " ".concat(key, "=\"").concat(value, "\" ");
         }
         for (var key in json.bindings) {
-            if (((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.type) === 'spread') {
+            if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread') {
                 continue;
             }
             if (key.startsWith('$')) {
                 continue;
             }
-            var _h = json.bindings[key], code = _h.code, _j = _h.arguments, cusArgs = _j === void 0 ? ['event'] : _j;
+            var _e = json.bindings[key], code = _e.code, _f = _e.arguments, cusArgs = _f === void 0 ? ['event'] : _f;
             // TODO: proper babel transform to replace. Util for this
-            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 */) {
@@ -177,28 +163,28 @@ var blockToAngular = function (json, options, blockOptions) {
                 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));
+                var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(code.replace(regexp, replacer));
                 str += " (".concat(event_1, ")=\"").concat(finalValue, "\" ");
             }
             else if (key === 'class') {
-                str += " [class]=\"".concat(useValue, "\" ");
+                str += " [class]=\"".concat(code, "\" ");
             }
             else if (key === 'ref') {
-                str += " #".concat(useValue, " ");
+                str += " #".concat(code, " ");
             }
             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, ">"))));
+                var lowercaseKey = (0, function_1.pipe)(key, slots_1.stripSlotPrefix, function (x) { return x.toLowerCase(); });
+                needsToRenderSlots.push("".concat(code.replace(/(\/\>)|\>/, " ".concat(lowercaseKey, ">"))));
             }
             else if (BINDINGS_MAPPER[key]) {
-                str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(useValue, "\"  ");
+                str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(code, "\"  ");
             }
             else if (isValidHtmlTag || key.includes('-')) {
                 // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
-                str += " [attr.".concat(key, "]=\"").concat(useValue, "\" ");
+                str += " [attr.".concat(key, "]=\"").concat(code, "\" ");
             }
             else {
-                str += "[".concat(key, "]=\"").concat(useValue, "\" ");
+                str += "[".concat(key, "]=\"").concat(code, "\" ");
             }
         }
         if (jsx_1.selfClosingTags.has(json.name)) {
@@ -225,9 +211,42 @@ var componentToAngular = function (userOptions) {
             preserveImports: false,
             preserveFileExtensions: false,
         };
-        var options = __assign(__assign({}, DEFAULT_OPTIONS), userOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(_component);
+        var contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
+        var metaOutputVars = ((_d = (_c = json.meta) === null || _c === void 0 ? void 0 : _c.useMetadata) === null || _d === void 0 ? void 0 : _d.outputs) || [];
+        var outputVars = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], metaOutputVars, true), (0, get_prop_functions_1.getPropFunctions)(json), true));
+        var stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
+        var options = (0, merge_options_1.mergeOptions)(__assign(__assign({}, DEFAULT_OPTIONS), userOptions));
+        options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
+            (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
+                var domRefs = (0, get_refs_1.getRefs)(json);
+                switch (codeType) {
+                    case 'hooks':
+                        return function (code) {
+                            return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                                replaceWith: 'this.',
+                                contextVars: contextVars,
+                                outputVars: outputVars,
+                                domRefs: Array.from(domRefs),
+                                stateVars: stateVars,
+                            });
+                        };
+                    case 'bindings':
+                        return function (code) {
+                            return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                                contextVars: [],
+                                outputVars: outputVars,
+                                domRefs: [], // the template doesn't need the this keyword.
+                            }).replace(/"/g, '&quot;');
+                        };
+                    case 'hooks-deps':
+                    case 'state':
+                    case 'properties':
+                        return function (x) { return x; };
+                }
+            }),
+        ], false);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
@@ -247,8 +266,6 @@ var componentToAngular = function (userOptions) {
         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;
@@ -267,7 +284,6 @@ var componentToAngular = function (userOptions) {
             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);
@@ -282,8 +298,9 @@ var componentToAngular = function (userOptions) {
         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); });
+        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' : '');
@@ -295,14 +312,8 @@ var componentToAngular = function (userOptions) {
         if (options.prettier !== false) {
             css = tryFormat(css, 'css');
         }
-        var blockOptions = {
-            contextVars: contextVars,
-            outputVars: outputVars,
-            domRefs: [],
-            childComponents: childComponents,
-        };
         var template = json.children
-            .map(function (item) { return (0, exports.blockToAngular)(item, options, blockOptions); })
+            .map(function (item) { return (0, exports.blockToAngular)(item, options, { childComponents: childComponents }); })
             .join('\n');
         if (options.prettier !== false) {
             template = tryFormat(template, 'html');
@@ -337,11 +348,13 @@ var componentToAngular = function (userOptions) {
             var key = _a[0], value = _a[1];
             componentMetadata[key] = value;
         });
-        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    })\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    })\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)({
+        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    })\n    export 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    })\n    export 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.preserveImports,
             preserveFileExtensions: options.preserveFileExtensions,
+            componentsUsed: componentsUsed,
+            importMapper: options === null || options === void 0 ? void 0 : options.importMapper,
         }), Object.entries(componentMetadata)
             .map(function (_a) {
             var k = _a[0], v = _a[1];
@@ -377,40 +390,19 @@ var componentToAngular = function (userOptions) {
             ? ''
             : "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
+                : "\n              ".concat((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, "\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)
+                : "\n                ".concat((_l = json.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, "\n                "), "\n            }"), !((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
             ? ''
             : "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,
-                });
+                code += hook.code;
                 return code + '\n';
             }, ''), "\n            }"), !json.hooks.onUnMount
             ? ''
-            : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.hooks.onUnMount.code, {
-                replaceWith: 'this.',
-                contextVars: contextVars,
-                outputVars: outputVars,
-                domRefs: Array.from(domRefs),
-                stateVars: stateVars,
-            }), "\n            }"));
+            : "ngOnDestroy() {\n              ".concat(json.hooks.onUnMount.code, "\n            }"));
+        str = generateNgModule(str, json.name, componentsUsed, json, options.bootstrapMapper);
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FUNCTION_HACK_PLUGIN = void 0;
+var patterns_1 = require("../../helpers/patterns");
 var FUNCTION_HACK_PLUGIN = function () { return ({
     json: {
         pre: function (json) {
@@ -9,7 +10,7 @@ var FUNCTION_HACK_PLUGIN = function () { return ({
                 var value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
                 var type = (_b = json.state[key]) === null || _b === void 0 ? void 0 : _b.type;
                 if (typeof value === 'string' && type === 'method') {
-                    var newValue = "function ".concat(value);
+                    var newValue = (0, patterns_1.prefixWithFunction)(value);
                     json.state[key] = {
                         code: newValue,
                         type: 'method',

package/dist/src/generators/html.js

@@ -209,7 +209,7 @@ var blockToHtml = function (json, options, blockOptions) {
     if (mappers[json.name]) {
         return mappers[json.name](json, options, blockOptions);
     }
-    if ((0, is_children_1.default)(json)) {
+    if ((0, is_children_1.default)({ node: json })) {
         return "<slot></slot>";
     }
     if (json.properties._text) {

package/dist/src/generators/qwik/component-generator.js

@@ -70,6 +70,7 @@ var componentToQwik = function (userOptions) {
                     emitUseRef(file, component);
                     hasState_1 && emitUseStore(file, state_2);
                     emitUseContextProvider(file, component);
+                    emitUseClientEffect(file, component);
                     emitUseMount(file, component);
                     emitUseWatch(file, component);
                     emitUseCleanup(file, component);
@@ -110,7 +111,7 @@ function emitTagNameHack(file, component, metadataValue) {
         file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, stateToMethodOrGetter(component.state), getLexicalScopeVars(component)), ';');
     }
 }
-function emitUseMount(file, component) {
+function emitUseClientEffect(file, component) {
     if (component.hooks.onMount) {
         // This is called useMount, but in practice it is used as
         // useClientEffect. Not sure if this is correct, but for now.
@@ -118,6 +119,12 @@ function emitUseMount(file, component) {
         file.src.emit(file.import(file.qwikModule, 'useClientEffect$').localName, '(()=>{', code, '});');
     }
 }
+function emitUseMount(file, component) {
+    if (component.hooks.onInit) {
+        var code = component.hooks.onInit.code;
+        file.src.emit(file.import(file.qwikModule, 'useMount$').localName, '(()=>{', code, '});');
+    }
+}
 function emitUseWatch(file, component) {
     if (component.hooks.onUpdate) {
         component.hooks.onUpdate.forEach(function (onUpdate) {

package/dist/src/generators/svelte/blocks.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSvelte = void 0;
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var jsx_1 = require("../../parsers/jsx");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
@@ -40,12 +39,12 @@ var mappers = {
             delete firstChild.bindings.key;
         }
         var args = (0, for_1.getForArguments)(json, { excludeCollectionName: true }).join(', ');
-        return "\n{#each ".concat((0, helpers_1.stripStateAndProps)((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, options), " as ").concat(args, " ").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((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, " as ").concat(args, " ").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;
         var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        return "\n{#if ".concat((0, helpers_1.stripStateAndProps)((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code, options), " }\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n\n  ").concat(json.meta.else
+        return "\n{#if ".concat((_b = json.bindings.when) === null || _b === void 0 ? void 0 : _b.code, " }\n").concat(json.children.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "\n\n  ").concat(json.meta.else
             ? "\n  {:else}\n  ".concat((0, exports.blockToSvelte)({
                 json: json.meta.else,
                 options: options,
@@ -60,14 +59,13 @@ var mappers = {
             var key = Object.keys(json.bindings).find(Boolean);
             if (!key)
                 return '<slot />';
-            return "\n        <span #".concat(key, ">\n        ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code), "\n        </span>\n      ");
+            return "\n        <span #".concat(key, ">\n        ").concat((_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code, "\n        </span>\n      ");
         }
-        var strippedTextCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.name.code);
-        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(strippedTextCode).toLowerCase(), "\">").concat((_c = json.children) === null || _c === void 0 ? void 0 : _c.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "</slot>");
+        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(json.bindings.name.code).toLowerCase(), "\">").concat((_c = json.children) === null || _c === void 0 ? void 0 : _c.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "</slot>");
     },
 };
 var BINDINGS_MAPPER = {
-    innerHTML: function (json, options) { var _a; return "{@html ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code), "}"); },
+    innerHTML: function (json, options) { var _a; return "{@html ".concat((_a = json.bindings.innerHTML) === null || _a === void 0 ? void 0 : _a.code, "}"); },
 };
 var SVELTE_SPECIAL_TAGS = {
     COMPONENT: 'svelte:component',
@@ -75,7 +73,7 @@ var SVELTE_SPECIAL_TAGS = {
     SELF: 'svelte:self',
 };
 var getTagName = function (_a) {
-    var json = _a.json, parentComponent = _a.parentComponent;
+    var json = _a.json, parentComponent = _a.parentComponent, options = _a.options;
     if (parentComponent && json.name === parentComponent.name) {
         return SVELTE_SPECIAL_TAGS.SELF;
     }
@@ -89,7 +87,9 @@ var getTagName = function (_a) {
     // TO-DO: no way to decide between <svelte:component> and <svelte:element>...need to do that through metadata
     // overrides for now
     if (!isValidHtmlTag && !isSpecialSvelteTag && !hasMatchingImport) {
-        json.bindings.this = { code: json.name };
+        json.bindings.this = {
+            code: (0, helpers_1.stripStateAndProps)({ json: parentComponent, options: options })(json.name),
+        };
         return SVELTE_SPECIAL_TAGS.COMPONENT;
     }
     return json.name;
@@ -101,15 +101,14 @@ var stringifyBinding = function (options) {
             return '';
         }
         var code = binding.code, _b = binding.arguments, cusArgs = _b === void 0 ? ['event'] : _b, type = binding.type;
-        var useValue = (0, helpers_1.stripStateAndProps)(code, options);
         if (type === 'spread') {
-            var spreadValue = key === 'props' ? '$$props' : useValue;
+            var spreadValue = key === 'props' ? '$$props' : code;
             return " {...".concat(spreadValue, "} ");
         }
         else if (key.startsWith('on')) {
             var event_1 = key.replace('on', '').toLowerCase();
             // TODO: handle quotes in event handler values
-            var valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue);
+            var valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(code);
             if (valueWithoutBlock === key) {
                 return " on:".concat(event_1, "={").concat(valueWithoutBlock, "} ");
             }
@@ -118,10 +117,10 @@ var stringifyBinding = function (options) {
             }
         }
         else if (key === 'ref') {
-            return " bind:this={".concat(useValue, "} ");
+            return " bind:this={".concat(code, "} ");
         }
         else {
-            return " ".concat(key, "={").concat(useValue, "} ");
+            return " ".concat(key, "={").concat(code, "} ");
         }
     };
 };
@@ -135,8 +134,8 @@ var blockToSvelte = function (_a) {
             parentComponent: parentComponent,
         });
     }
-    var tagName = getTagName({ json: json, parentComponent: parentComponent });
-    if ((0, is_children_1.default)(json)) {
+    var tagName = getTagName({ json: json, parentComponent: parentComponent, options: options });
+    if ((0, is_children_1.default)({ node: json, extraMatches: ['$$slots.default'] })) {
         return "<slot></slot>";
     }
     if (json.properties._text) {
@@ -144,17 +143,16 @@ var blockToSvelte = function (_a) {
     }
     var textCode = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code;
     if (textCode) {
-        var strippedTextCode = (0, helpers_1.stripStateAndProps)(textCode, options);
-        if ((0, slots_1.isSlotProperty)(strippedTextCode)) {
-            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(strippedTextCode).toLowerCase(), "\"/>");
+        if ((0, slots_1.isSlotProperty)(textCode)) {
+            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(textCode).toLowerCase(), "\"/>");
         }
-        return "{".concat(strippedTextCode, "}");
+        return "{".concat(textCode, "}");
     }
     var str = '';
     str += "<".concat(tagName, " ");
     var isComponent = Boolean(tagName[0] && (0, is_upper_case_1.isUpperCase)(tagName[0]));
     if ((((_c = json.bindings.style) === null || _c === void 0 ? void 0 : _c.code) || json.properties.style) && !isComponent) {
-        var useValue = (0, helpers_1.stripStateAndProps)(((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style, options);
+        var useValue = ((_d = json.bindings.style) === null || _d === void 0 ? void 0 : _d.code) || json.properties.style;
         str += "use:mitosis_styling={".concat(useValue, "}");
         delete json.bindings.style;
         delete json.properties.style;

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

@@ -1,2 +1,6 @@
+import { MitosisComponent } from '../../types/mitosis-component';
 import { ToSvelteOptions } from './types';
-export declare const stripStateAndProps: (code: string | undefined, options: ToSvelteOptions) => string;
+export declare const stripStateAndProps: ({ options, json }: {
+    options: ToSvelteOptions;
+    json: MitosisComponent;
+}) => (code: string) => string;

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

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stripStateAndProps = void 0;
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-var stripStateAndProps = function (code, options) {
-    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-        includeState: options.stateType === 'variables',
-        replaceWith: function (name) { return (name === 'children' ? '$$slots.default' : name); },
-    });
+var stripStateAndProps = function (_a) {
+    var options = _a.options, json = _a.json;
+    return function (code) {
+        return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+            includeState: options.stateType === 'variables',
+            replaceWith: function (name) { return (name === 'children' ? '$$slots.default' : name); },
+        });
+    };
 };
 exports.stripStateAndProps = stripStateAndProps;