@builder.io/mitosis 0.0.74 → 0.0.76

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

@@ -4,6 +4,8 @@ export interface ToAngularOptions extends BaseTranspilerOptions {
     standalone?: boolean;
     preserveImports?: boolean;
     preserveFileExtensions?: boolean;
+    importMapper?: Function;
+    bootstrapMapper?: Function;
 }
 interface AngularBlockOptions {
     contextVars?: string[];

package/dist/src/generators/angular.js

@@ -53,6 +53,7 @@ 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 html_tags_1 = require("../constants/html_tags");
 var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment']);
 var mappers = {
     Fragment: function (json, options, blockOptions) {
@@ -79,6 +80,9 @@ var mappers = {
             .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',
@@ -92,6 +96,7 @@ var blockToAngular = function (json, options, blockOptions) {
     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);
     }
@@ -191,11 +196,12 @@ var blockToAngular = function (json, options, blockOptions) {
             else if (BINDINGS_MAPPER[key]) {
                 str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(useValue, "\"  ");
             }
-            else if (key.includes('-')) {
+            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, "\" ");
             }
             else {
-                str += " [".concat(key, "]=\"").concat(useValue, "\" ");
+                str += "[".concat(key, "]=\"").concat(useValue, "\" ");
             }
         }
         if (jsx_1.selfClosingTags.has(json.name)) {
@@ -280,7 +286,9 @@ var componentToAngular = function (userOptions) {
         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' : '');
@@ -334,11 +342,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];
@@ -380,7 +390,7 @@ var componentToAngular = function (userOptions) {
                     outputVars: outputVars,
                 }), "\n              "), "\n          }\n          "), !hasOnMount
             ? ''
-            : "ngOnInit() {\n              \n              ".concat(!((_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
+            : "ngOnInit() {\n\n              ".concat(!((_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
                 ? ''
                 : "\n                ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_l = json.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, {
                     replaceWith: 'this.',
@@ -408,6 +418,7 @@ var componentToAngular = function (userOptions) {
                 domRefs: Array.from(domRefs),
                 stateVars: stateVars,
             }), "\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/lit/generate.js

@@ -74,9 +74,6 @@ var blockToLit = function (json, options) {
     }
     for (var key in json.bindings) {
         var _e = json.bindings[key], code = _e.code, _f = _e.arguments, cusArgs = _f === void 0 ? ['event'] : _f, type = _e.type;
-        if (key === '_forName') {
-            continue;
-        }
         if (type === 'spread') {
             str += " ${spread(".concat(code, ")} ");
         }

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

@@ -79,9 +79,6 @@ var blockToMarko = function (json, options) {
     }
     for (var key in json.bindings) {
         var _f = json.bindings[key], code = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g, type = _f.type;
-        if (key === '_forName') {
-            continue;
-        }
         if (type === 'spread') {
             str += " ...(".concat(code, ") ");
         }

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

@@ -53,6 +53,7 @@ var componentToQwik = function (userOptions) {
         try {
             emitImports(file, component);
             emitTypes(file, component);
+            emitExports(file, component);
             var metadata = component.meta.useMetadata || {};
             var isLightComponent = ((_c = (_b = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
             var mutable_1 = ((_d = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _d === void 0 ? void 0 : _d.mutable) || [];
@@ -97,6 +98,13 @@ var componentToQwik = function (userOptions) {
     };
 };
 exports.componentToQwik = componentToQwik;
+function emitExports(file, component) {
+    component.exports &&
+        Object.keys(component.exports).forEach(function (key) {
+            var exportObj = component.exports[key];
+            file.src.emit(exportObj.code);
+        });
+}
 function emitTagNameHack(file, component, metadataValue) {
     if (typeof metadataValue === 'string' && metadataValue) {
         file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, stateToMethodOrGetter(component.state), getLexicalScopeVars(component)), ';');
@@ -144,14 +152,7 @@ function emitJSX(file, component, mutable) {
     var handlers = new Map();
     var styles = new Map();
     var parentSymbolBindings = {};
-    var mutablePredicate = mutable.length > 0
-        ? function (code) {
-            return !!mutable.find(function (txt) {
-                return code.indexOf(txt) !== -1;
-            });
-        }
-        : undefined;
-    file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings, mutablePredicate));
+    file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings));
 }
 function emitUseContextProvider(file, component) {
     Object.keys(component.context.set).forEach(function (ctxKey) {

package/dist/src/generators/qwik/directives.js

@@ -70,6 +70,10 @@ function Image(props) {
             loading: isPixel ? 'eager' : 'lazy',
             srcset: undefined,
         };
+        var qwikBugWorkaround = function (imgProps) {
+            return Object.keys(imgProps).forEach(function (k) { return imgProps[k] === undefined && delete imgProps[k]; });
+        };
+        qwikBugWorkaround(imgProps);
         if (isBuilderIoImage) {
             var webpImage_1 = updateQueryParam(image, 'format', 'webp');
             var srcset = ['100', '200', '400', '800', '1200', '1600', '2000']

package/dist/src/generators/qwik/jsx.d.ts

@@ -13,4 +13,4 @@ import { CssStyles } from './styles';
  * @param root True if this is the root JSX, and may need a Fragment wrapper.
  * @returns
  */
-export declare function renderJSXNodes(file: File, directives: Map<string, string>, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, parentSymbolBindings: Record<string, string>, mutablePredicate?: (code: string) => boolean, root?: boolean): any;
+export declare function renderJSXNodes(file: File, directives: Map<string, string>, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, parentSymbolBindings: Record<string, string>, root?: boolean): any;

package/dist/src/generators/qwik/jsx.js

@@ -36,7 +36,7 @@ var src_generator_1 = require("./src-generator");
  * @param root True if this is the root JSX, and may need a Fragment wrapper.
  * @returns
  */
-function renderJSXNodes(file, directives, handlers, children, styles, parentSymbolBindings, mutablePredicate, root) {
+function renderJSXNodes(file, directives, handlers, children, styles, parentSymbolBindings, root) {
     if (root === void 0) { root = true; }
     return function () {
         var _this = this;
@@ -121,9 +121,9 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                         }
                     }
                     var symbolBindings = {};
-                    var bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings, mutablePredicate);
+                    var bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings);
                     _this.jsxBegin(childName, props, __assign(__assign(__assign({}, bindings), parentSymbolBindings), specialBindings));
-                    renderJSXNodes(file, directives, handlers, child.children, styles, symbolBindings, mutablePredicate, false).call(_this);
+                    renderJSXNodes(file, directives, handlers, child.children, styles, symbolBindings, false).call(_this);
                     _this.jsxEnd(childName);
                 }
             }
@@ -138,7 +138,7 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                 children = children.filter(function (c) { return !isEmptyTextNode(c); });
                 var childNeedsFragment = children.length > 1 || (children.length && isTextNode(children[0]));
                 childNeedsFragment && srcBuilder.jsxBeginFragment(fragmentSymbol);
-                renderJSXNodes(file, directives, handlers, children, styles, {}, mutablePredicate, false).call(srcBuilder);
+                renderJSXNodes(file, directives, handlers, children, styles, {}, false).call(srcBuilder);
                 childNeedsFragment && srcBuilder.jsxEndFragment();
             };
         }
@@ -182,7 +182,7 @@ function isSlotProjection(child) {
  * @param symbolBindings Options record which will receive the symbol bindings
  * @returns
  */
-function rewriteHandlers(file, handlers, bindings, symbolBindings, mutablePredicate) {
+function rewriteHandlers(file, handlers, bindings, symbolBindings) {
     var _a, _b;
     var outBindings = {};
     for (var key in bindings) {
@@ -207,10 +207,6 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings, mutablePredic
                 else if (key.startsWith('component.options.')) {
                     key = (0, src_generator_1.lastProperty)(key);
                 }
-                if (mutablePredicate && bindingExpr && mutablePredicate(bindingExpr)) {
-                    file.import(file.qwikModule, 'mutable');
-                    bindingExpr = "mutable(".concat(bindingExpr, ")");
-                }
                 outBindings[key] = { code: bindingExpr, type: (_b = bindings === null || bindings === void 0 ? void 0 : bindings[key]) === null || _b === void 0 ? void 0 : _b.type };
             }
         }

package/dist/src/generators/react/generator.js

@@ -107,9 +107,13 @@ var NODE_MAPPERS = {
             .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ) : ").concat(!json.meta.else ? 'null' : (0, exports.blockToReact)(json.meta.else, options), "}");
     },
 };
+var ATTTRIBUTE_MAPPERS = {
+    spellcheck: 'spellCheck',
+    autocapitalize: 'autoCapitalize',
+    autocomplete: 'autoComplete',
+};
 // TODO: Maybe in the future allow defining `string | function` as values
-var BINDING_MAPPERS = {
-    ref: function (ref, value, options) {
+var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
         var regexp = /(.+)?props\.(.+)( |\)|;|\()?$/m;
         if (regexp.test(value)) {
             var match = regexp.exec(value);
@@ -119,11 +123,9 @@ var BINDING_MAPPERS = {
             }
         }
         return [ref, value];
-    },
-    innerHTML: function (_key, value) {
+    }, innerHTML: function (_key, value) {
         return ['dangerouslySetInnerHTML', "{__html: ".concat(value.replace(/\s+/g, ' '), "}")];
-    },
-};
+    } }, ATTTRIBUTE_MAPPERS);
 var blockToReact = function (json, options, parentSlots) {
     var _a, _b, _c;
     if (NODE_MAPPERS[json.name]) {
@@ -425,7 +427,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     var _o = getRefsString(json, allRefs, options), hasStateArgument = _o[0], refsString = _o[1];
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
     var propsArgs = "props: ".concat(json.propsTypeRef || 'any');
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), options.preact
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "])), options.preact
         ? "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    "
         : options.type !== 'native'
             ? "import * as React from 'react';"
@@ -434,11 +436,11 @@ var _componentToReact = function (json, options, isSubComponent) {
         : '', componentHasStyles && stylesType === 'emotion' && options.format !== 'lite'
         ? "/** @jsx jsx */\n    import { jsx } from '@emotion/react'".trim()
         : '', hasState && stateType === 'valtio' ? "import { useLocalProxy } from 'valtio/utils';" : '', hasState && stateType === 'solid' ? "import { useMutable } from 'react-solid-state';" : '', stateType === 'mobx' && hasState
-        ? "import { useLocalObservable } from 'mobx-react-lite';"
+        ? "import { useLocalObservable, observer } from 'mobx-react-lite';"
         : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
         component: json,
         target: options.type === 'native' ? 'reactNative' : 'react',
-    }), isSubComponent ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', options.contextType === 'prop-drill'
+    }), stateType === 'mobx' && isForwardRef ? "const ".concat(json.name || 'MyComponent', " = ") : "", isSubComponent || stateType === 'mobx' ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', options.contextType === 'prop-drill'
         ? "const ".concat(exports.contextPropDrillingKey, " = { ...props['").concat(exports.contextPropDrillingKey, "'] };")
         : '', hasStateArgument ? '' : refsString, hasState
         ? stateType === 'mobx'
@@ -462,7 +464,7 @@ var _componentToReact = function (json, options, isSubComponent) {
             str: json.hooks.onMount.code,
             options: options,
         }), "\n          }, [])")
-        : '', (_k = (_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map(function (hook) { return "useEffect(() => {\n            ".concat((0, state_2.processHookCode)({ str: hook.code, options: options }), "\n          }, \n          ").concat(hook.deps ? (0, state_2.processHookCode)({ str: hook.deps, options: options }) : '', ")"); }).join(';')) !== null && _k !== void 0 ? _k : '', ((_l = json.hooks.onUnMount) === null || _l === void 0 ? void 0 : _l.code)
+        : '', (_k = (_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map(function (hook) { return "useEffect(() => {\n            ".concat((0, state_2.processHookCode)({ str: hook.code, options: options }), "\n          },\n          ").concat(hook.deps ? (0, state_2.processHookCode)({ str: hook.deps, options: options }) : '', ")"); }).join(';')) !== null && _k !== void 0 ? _k : '', ((_l = json.hooks.onUnMount) === null || _l === void 0 ? void 0 : _l.code)
         ? "useEffect(() => {\n            return () => {\n              ".concat((0, state_2.processHookCode)({
             str: json.hooks.onUnMount.code,
             options: options,
@@ -475,7 +477,9 @@ var _componentToReact = function (json, options, isSubComponent) {
         ? ''
         : "".concat(json.name || 'MyComponent', ".defaultProps = ").concat(json5_1.default.stringify(json.defaultProps), ";"), !nativeStyles
         ? ''
-        : "\n      const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n    "), styledComponentsCode ? styledComponentsCode : '');
+        : "\n      const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n    "), styledComponentsCode ? styledComponentsCode : '', stateType === 'mobx'
+        ? "\n      const observed".concat(json.name || 'MyComponent', " = observer(").concat(json.name || 'MyComponent', ");\n      export default observed").concat(json.name || 'MyComponent', ";\n    ")
+        : '');
     str = (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(str);
     return str;
 };

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

@@ -78,10 +78,8 @@ var hash_sum_1 = __importDefault(require("hash-sum"));
 var Array_1 = require("fp-ts/lib/Array");
 var S = __importStar(require("fp-ts/string"));
 var helpers_2 = require("./state/helpers");
-var DEFAULT_OPTIONS = {
-    state: 'signals',
-    stylesType: 'styled-components',
-};
+var merge_options_1 = require("../../helpers/merge-options");
+var process_code_1 = require("../../helpers/plugins/process-code");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, options) {
     var found = false;
@@ -168,7 +166,6 @@ var preProcessBlockCode = function (_a) {
 var blockToSolid = function (_a) {
     var _b, _c;
     var json = _a.json, options = _a.options, component = _a.component;
-    preProcessBlockCode({ json: json, options: options, component: component });
     if (json.properties._text) {
         return json.properties._text;
     }
@@ -203,9 +200,6 @@ var blockToSolid = function (_a) {
     }
     for (var key in json.bindings) {
         var _d = json.bindings[key], code = _d.code, _e = _d.arguments, cusArg = _e === void 0 ? ['event'] : _e, type = _d.type;
-        if (key === '_forName') {
-            continue;
-        }
         if (!code)
             continue;
         if (type === 'spread') {
@@ -278,29 +272,34 @@ function addProviderComponents(json, options) {
         ];
     }
 }
-var preProcessComponentCode = function (json, options) {
-    var _a;
-    var processCode = (0, helpers_2.updateStateCode)({ options: options, component: json });
-    if ((_a = json.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) {
-        json.hooks.onMount.code = processCode(json.hooks.onMount.code);
-    }
-    if (json.hooks.onUpdate) {
-        for (var _i = 0, _b = json.hooks.onUpdate; _i < _b.length; _i++) {
-            var hook = _b[_i];
-            hook.code = processCode(hook.code);
-            if (hook.deps) {
-                hook.deps = processCode(hook.deps);
-            }
-        }
-    }
+var DEFAULT_OPTIONS = {
+    state: 'signals',
+    stylesType: 'styled-components',
+    plugins: [],
 };
 var componentToSolid = function (passedOptions) {
-    if (passedOptions === void 0) { passedOptions = DEFAULT_OPTIONS; }
     return function (_a) {
         var _b, _c, _d, _e, _f, _g;
         var component = _a.component;
-        var options = __assign(__assign({}, DEFAULT_OPTIONS), passedOptions);
         var json = (0, fast_clone_1.fastClone)(component);
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, passedOptions);
+        options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
+            (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
+                switch (codeType) {
+                    case 'state':
+                        return function (c) { return c; };
+                    case 'bindings':
+                    case 'hooks':
+                    case 'hooks-deps':
+                    case 'properties':
+                        return (0, helpers_2.updateStateCode)({
+                            component: json,
+                            options: options,
+                            updateSetters: codeType === 'properties' ? false : true,
+                        });
+                }
+            }),
+        ], false);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
@@ -310,7 +309,6 @@ var componentToSolid = function (passedOptions) {
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         }
-        preProcessComponentCode(json, options);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var foundDynamicComponents = processDynamicComponents(json, options);
         var css = options.stylesType === 'style-tag' &&

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

@@ -62,9 +62,6 @@ var blockToStencil = function (json, options) {
     }
     for (var key in json.bindings) {
         var _e = json.bindings[key], code = _e.code, _f = _e.arguments, cusArgs = _f === void 0 ? ['event'] : _f, type = _e.type;
-        if (key === '_forName') {
-            continue;
-        }
         if (type === 'spread') {
             str += " {...(".concat(code, ")} ");
         }

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

@@ -0,0 +1,10 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { BaseNode, MitosisNode } from '../../types/mitosis-node';
+import { ToSvelteOptions } from './types';
+declare type BlockToSvelte<T extends BaseNode = MitosisNode> = (props: {
+    json: T;
+    options: ToSvelteOptions;
+    parentComponent: MitosisComponent;
+}) => string;
+export declare const blockToSvelte: BlockToSvelte;
+export {};

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

@@ -0,0 +1,188 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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");
+var slots_1 = require("../../helpers/slots");
+var html_tags_1 = require("../../constants/html_tags");
+var is_upper_case_1 = require("../../helpers/is-upper-case");
+var for_1 = require("../../helpers/nodes/for");
+var helpers_1 = require("./helpers");
+var mappers = {
+    Fragment: function (_a) {
+        var _b;
+        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+        if ((_b = json.bindings.innerHTML) === null || _b === void 0 ? void 0 : _b.code) {
+            return BINDINGS_MAPPER.innerHTML(json, options);
+        }
+        else if (json.children.length > 0) {
+            return "".concat(json.children
+                .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
+                .join('\n'));
+        }
+        else {
+            return '';
+        }
+    },
+    For: function (_a) {
+        var _b, _c;
+        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+        var firstChild = json.children[0];
+        var keyValue = firstChild.properties.key || ((_b = firstChild.bindings.key) === null || _b === void 0 ? void 0 : _b.code);
+        if (keyValue) {
+            // we remove extraneous prop which Svelte does not use
+            delete firstChild.properties.key;
+            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");
+    },
+    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
+            ? "\n  {:else}\n  ".concat((0, exports.blockToSvelte)({
+                json: json.meta.else,
+                options: options,
+                parentComponent: parentComponent,
+            }), "\n  ")
+            : '', "\n{/if}");
+    },
+    Slot: function (_a) {
+        var _b, _c;
+        var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+        if (!json.bindings.name) {
+            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      ");
+        }
+        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>");
+    },
+};
+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), "}"); },
+};
+var SVELTE_SPECIAL_TAGS = {
+    COMPONENT: 'svelte:component',
+    ELEMENT: 'svelte:element',
+    SELF: 'svelte:self',
+};
+var getTagName = function (_a) {
+    var json = _a.json, parentComponent = _a.parentComponent;
+    if (parentComponent && json.name === parentComponent.name) {
+        return SVELTE_SPECIAL_TAGS.SELF;
+    }
+    var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name);
+    var isSpecialSvelteTag = json.name.startsWith('svelte:');
+    // Check if any import matches `json.name`
+    var hasMatchingImport = parentComponent.imports.some(function (_a) {
+        var imports = _a.imports;
+        return Object.keys(imports).some(function (name) { return name === json.name; });
+    });
+    // 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 };
+        return SVELTE_SPECIAL_TAGS.COMPONENT;
+    }
+    return json.name;
+};
+var stringifyBinding = function (options) {
+    return function (_a) {
+        var key = _a[0], binding = _a[1];
+        if (key === 'innerHTML' || !binding) {
+            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;
+            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);
+            if (valueWithoutBlock === key) {
+                return " on:".concat(event_1, "={").concat(valueWithoutBlock, "} ");
+            }
+            else {
+                return " on:".concat(event_1, "=\"{").concat(cusArgs.join(','), " => {").concat(valueWithoutBlock, "}}\" ");
+            }
+        }
+        else if (key === 'ref') {
+            return " bind:this={".concat(useValue, "} ");
+        }
+        else {
+            return " ".concat(key, "={").concat(useValue, "} ");
+        }
+    };
+};
+var blockToSvelte = function (_a) {
+    var _b, _c, _d, _e;
+    var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
+    if (mappers[json.name]) {
+        return mappers[json.name]({
+            json: json,
+            options: options,
+            parentComponent: parentComponent,
+        });
+    }
+    var tagName = getTagName({ json: json, parentComponent: parentComponent });
+    if ((0, is_children_1.default)(json)) {
+        return "<slot></slot>";
+    }
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    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(), "\"/>");
+        }
+        return "{".concat(strippedTextCode, "}");
+    }
+    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);
+        str += "use:mitosis_styling={".concat(useValue, "}");
+        delete json.bindings.style;
+        delete json.properties.style;
+    }
+    for (var key in json.properties) {
+        var value = json.properties[key];
+        str += " ".concat(key, "=\"").concat(value, "\" ");
+    }
+    var stringifiedBindings = Object.entries(json.bindings).map(stringifyBinding(options)).join('');
+    str += stringifiedBindings;
+    // if we have innerHTML, it doesn't matter whether we have closing tags or not, or children or not.
+    // we use the innerHTML content as children and don't render the self-closing tag.
+    if ((_e = json.bindings.innerHTML) === null || _e === void 0 ? void 0 : _e.code) {
+        str += '>';
+        str += BINDINGS_MAPPER.innerHTML(json, options);
+        str += "</".concat(tagName, ">");
+        return str;
+    }
+    if (jsx_1.selfClosingTags.has(tagName)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children
+            .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
+            .join('');
+    }
+    str += "</".concat(tagName, ">");
+    return str;
+};
+exports.blockToSvelte = blockToSvelte;

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+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); },
+    });
+};
+exports.stripStateAndProps = stripStateAndProps;

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

@@ -0,0 +1 @@
+export { componentToSvelte } from './svelte';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToSvelte = void 0;
+var svelte_1 = require("./svelte");
+Object.defineProperty(exports, "componentToSvelte", { enumerable: true, get: function () { return svelte_1.componentToSvelte; } });