@builder.io/mitosis 0.0.105 → 0.0.107-0

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToLit = void 0;
 var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
+var html_tags_1 = require("../../constants/html_tags");
 var dash_case_1 = require("../../helpers/dash-case");
 var dedent_1 = require("../../helpers/dedent");
 var fast_clone_1 = require("../../helpers/fast-clone");
@@ -18,12 +19,12 @@ var has_1 = require("../../helpers/has");
 var indent_1 = require("../../helpers/indent");
 var is_upper_case_1 = require("../../helpers/is-upper-case");
 var map_refs_1 = require("../../helpers/map-refs");
+var merge_options_1 = require("../../helpers/merge-options");
 var render_imports_1 = require("../../helpers/render-imports");
 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 plugins_1 = require("../../modules/plugins");
-var jsx_1 = require("../../parsers/jsx");
 var mitosis_node_1 = require("../../types/mitosis-node");
 var collect_class_string_1 = require("./collect-class-string");
 var getCustomTagName = function (name, options) {
@@ -97,7 +98,7 @@ var blockToLit = function (json, options) {
             }
         }
     }
-    if (jsx_1.selfClosingTags.has(json.name)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }
     str += '>';
@@ -110,11 +111,12 @@ var blockToLit = function (json, options) {
 function processBinding(code) {
     return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: 'this.' });
 }
-var componentToLit = function (options) {
-    if (options === void 0) { options = {}; }
+var componentToLit = function (_options) {
+    if (_options === void 0) { _options = {}; }
     return function (_a) {
         var _b, _c, _d, _e;
         var component = _a.component;
+        var options = (0, merge_options_1.initializeOptions)('lit', _options);
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);

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

@@ -22,6 +22,7 @@ exports.markoFormatHtml = exports.postprocessHtml = exports.preprocessHtml = exp
 var hash_sum_1 = __importDefault(require("hash-sum"));
 var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
+var html_tags_1 = require("../../constants/html_tags");
 var dash_case_1 = require("../../helpers/dash-case");
 var dedent_1 = require("../../helpers/dedent");
 var fast_clone_1 = require("../../helpers/fast-clone");
@@ -31,13 +32,13 @@ var get_state_object_string_1 = require("../../helpers/get-state-object-string")
 var has_props_1 = require("../../helpers/has-props");
 var indent_1 = require("../../helpers/indent");
 var map_refs_1 = require("../../helpers/map-refs");
+var merge_options_1 = require("../../helpers/merge-options");
 var for_1 = require("../../helpers/nodes/for");
 var render_imports_1 = require("../../helpers/render-imports");
 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 plugins_1 = require("../../modules/plugins");
-var jsx_1 = require("../../parsers/jsx");
 var mitosis_node_1 = require("../../types/mitosis-node");
 // Having issues with this, so off for now
 var USE_MARKO_PRETTIER = false;
@@ -93,7 +94,7 @@ var blockToMarko = function (json, options) {
             str += " ".concat(key, "=(").concat(processBinding(options.component, code), ") ");
         }
     }
-    if (jsx_1.selfClosingTags.has(json.name)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }
     str += '>';
@@ -136,7 +137,7 @@ var componentToMarko = function (userOptions) {
         var _b, _c, _d;
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = __assign(__assign({}, userOptions), { component: json });
+        var options = (0, merge_options_1.initializeOptions)('marko', __assign(__assign({}, userOptions), { component: json }));
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }

package/dist/src/generators/mitosis.js

@@ -30,6 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToMitosis = exports.blockToMitosis = exports.DEFAULT_FORMAT = void 0;
 var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
+var hooks_1 = require("../constants/hooks");
+var html_tags_1 = require("../constants/html_tags");
 var dedent_1 = require("../helpers/dedent");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_components_1 = require("../helpers/get-components");
@@ -39,7 +41,6 @@ var is_root_text_node_1 = require("../helpers/is-root-text-node");
 var map_refs_1 = require("../helpers/map-refs");
 var render_imports_1 = require("../helpers/render-imports");
 var state_1 = require("../helpers/state");
-var jsx_1 = require("../parsers/jsx");
 var mitosis_node_1 = require("../types/mitosis-node");
 var react_1 = require("./react");
 exports.DEFAULT_FORMAT = 'legacy';
@@ -98,7 +99,7 @@ var blockToMitosis = function (json, toMitosisOptions, component) {
             }
         }
     }
-    if (jsx_1.selfClosingTags.has(json.name)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }
     // Self close by default if no children
@@ -160,7 +161,7 @@ var componentToMitosis = function (toMitosisOptions) {
         var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !needsMitosisCoreImport
             ? ''
             : "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'mitosis' }), stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
-            ? "".concat(jsx_1.METADATA_HOOK_NAME, "(").concat(stringifiedUseMetadata, ")")
+            ? "".concat(hooks_1.HOOKS.METADATA, "(").concat(stringifiedUseMetadata, ")")
             : '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options, component); }).join('\n'), addWrapper ? '</>' : '');
         if (options.prettier !== false) {
             try {

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

@@ -28,6 +28,8 @@ var PLUGINS = [
     }); },
     (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType, json) {
         switch (codeType) {
+            case 'types':
+                return function (c) { return c; };
             case 'bindings':
             case 'state':
             case 'hooks':
@@ -74,7 +76,7 @@ var componentToQwik = function (userOptions) {
         var _component = _a.component, path = _a.path;
         // Make a copy we can safely mutate, similar to babel's toolchain
         var component = (0, fast_clone_1.fastClone)(_component);
-        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, userOptions);
+        var options = (0, merge_options_1.initializeOptions)('qwik', DEFAULT_OPTIONS, userOptions);
         component = (0, plugins_1.runPreJsonPlugins)(component, options.plugins);
         component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
         var isTypeScript = !!options.typescript;

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = void 0;
 var standalone_1 = require("prettier/standalone");
+var html_tags_1 = require("../../constants/html_tags");
 var builder_1 = require("../../parsers/builder");
-var jsx_1 = require("../../parsers/jsx");
 var stable_serialize_1 = require("./helpers/stable-serialize");
 var File = /** @class */ (function () {
     function File(filename, options, qwikModule, qrlPrefix) {
@@ -390,7 +390,7 @@ var SrcBuilder = /** @class */ (function () {
         }
     };
     SrcBuilder.prototype.isSelfClosingTag = function (symbol) {
-        return jsx_1.selfClosingTags.has(String(symbol));
+        return html_tags_1.SELF_CLOSING_HTML_TAGS.has(String(symbol));
     };
     SrcBuilder.prototype.jsxEnd = function (symbol) {
         if (this.isJSX) {

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

@@ -16,13 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToReact = void 0;
 var lodash_1 = require("lodash");
+var html_tags_1 = require("../../constants/html_tags");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var is_root_text_node_1 = require("../../helpers/is-root-text-node");
 var is_valid_attribute_name_1 = require("../../helpers/is-valid-attribute-name");
 var for_1 = require("../../helpers/nodes/for");
 var slots_1 = require("../../helpers/slots");
-var jsx_1 = require("../../parsers/jsx");
 var mitosis_node_1 = require("../../types/mitosis-node");
 var helpers_1 = require("./helpers");
 var state_1 = require("./state");
@@ -207,7 +207,7 @@ var blockToReact = function (json, options, component, parentSlots) {
             }
         }
     }
-    if (jsx_1.selfClosingTags.has(json.name)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }
     // Self close by default if no children

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

@@ -139,7 +139,16 @@ var componentToReact = function (reactOptions) {
     return function (_a) {
         var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, reactOptions);
+        var target = reactOptions.preact
+            ? 'preact'
+            : reactOptions.type === 'native'
+                ? 'reactNative'
+                : reactOptions.type === 'taro'
+                    ? 'taro'
+                    : reactOptions.rsc
+                        ? 'rsc'
+                        : 'react';
+        var options = (0, merge_options_1.initializeOptions)(target, DEFAULT_OPTIONS, reactOptions);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }

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

@@ -5,6 +5,7 @@ export interface ToReactOptions extends BaseTranspilerOptions {
     format?: 'lite' | 'safe';
     type: 'dom' | 'native' | 'taro';
     preact?: boolean;
+    rsc?: boolean;
     forwardRef?: string;
     experimental?: any;
     /**

package/dist/src/generators/rsc.js

@@ -69,6 +69,7 @@ var componentToRsc = function (_options) {
             stylesType: 'style-tag',
             stateType: 'variables',
             contextType: 'prop-drill',
+            rsc: true,
         });
         return (0, react_1.componentToReact)(options)({ component: json, path: path });
     };

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSolid = void 0;
 var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
+var html_tags_1 = require("../../constants/html_tags");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var typescript_1 = require("../../helpers/typescript");
-var jsx_1 = require("../../parsers/jsx");
 var mitosis_node_1 = require("../../types/mitosis-node");
 var styles_1 = require("./helpers/styles");
 var ATTTRIBUTE_MAPPERS = {
@@ -96,7 +96,7 @@ var blockToSolid = function (_a) {
             str += " ".concat(newKey, "={").concat(useValue, "} ");
         }
     }
-    if (jsx_1.selfClosingTags.has(json.name)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }
     str += '>';

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

@@ -130,12 +130,13 @@ var componentToSolid = function (passedOptions) {
         var _b, _c, _d, _e, _f, _g, _h;
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, passedOptions);
+        var options = (0, merge_options_1.initializeOptions)('solid', DEFAULT_OPTIONS, passedOptions);
         options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
             (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
                 switch (codeType) {
                     case 'state':
                     case 'dynamic-jsx-elements':
+                    case 'types':
                         return function (c) { return c; };
                     case 'bindings':
                     case 'hooks':

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

@@ -6,6 +6,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToStencil = void 0;
 var standalone_1 = require("prettier/standalone");
+var html_tags_1 = require("../../constants/html_tags");
 var dash_case_1 = require("../../helpers/dash-case");
 var dedent_1 = require("../../helpers/dedent");
 var fast_clone_1 = require("../../helpers/fast-clone");
@@ -14,13 +15,13 @@ var get_props_1 = require("../../helpers/get-props");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var indent_1 = require("../../helpers/indent");
 var map_refs_1 = require("../../helpers/map-refs");
+var merge_options_1 = require("../../helpers/merge-options");
 var for_1 = require("../../helpers/nodes/for");
 var render_imports_1 = require("../../helpers/render-imports");
 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 plugins_1 = require("../../modules/plugins");
-var jsx_1 = require("../../parsers/jsx");
 var mitosis_node_1 = require("../../types/mitosis-node");
 var collect_class_string_1 = require("./collect-class-string");
 var blockToStencil = function (json, options) {
@@ -73,7 +74,7 @@ var blockToStencil = function (json, options) {
             str += " ".concat(key, "={").concat(processBinding(code), "} ");
         }
     }
-    if (jsx_1.selfClosingTags.has(json.name)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }
     str += '>';
@@ -86,11 +87,12 @@ var blockToStencil = function (json, options) {
 function processBinding(code) {
     return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: 'this.' });
 }
-var componentToStencil = function (options) {
-    if (options === void 0) { options = {}; }
+var componentToStencil = function (_options) {
+    if (_options === void 0) { _options = {}; }
     return function (_a) {
         var _b, _c, _d, _e;
         var component = _a.component;
+        var options = (0, merge_options_1.initializeOptions)('stencil', _options);
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSvelte = void 0;
-var jsx_1 = require("../../parsers/jsx");
 var html_tags_1 = require("../../constants/html_tags");
+var html_tags_2 = require("../../constants/html_tags");
 var bindings_1 = require("../../helpers/bindings");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var is_upper_case_1 = require("../../helpers/is-upper-case");
@@ -107,7 +107,7 @@ var getTagName = function (_a) {
         });
         return SVELTE_SPECIAL_TAGS.ELEMENT;
     }
-    var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name);
+    var isValidHtmlTag = html_tags_2.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) {
@@ -202,7 +202,7 @@ var blockToSvelte = function (_a) {
         str += "</".concat(tagName, ">");
         return str;
     }
-    if (jsx_1.selfClosingTags.has(tagName)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(tagName)) {
         return str + ' />';
     }
     str += '>';

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

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

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

@@ -1,8 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stripStateAndProps = void 0;
+exports.stripStateAndProps = exports.transformReactiveValues = void 0;
+var core_1 = require("@babel/core");
+var process_signals_1 = require("../../helpers/plugins/process-signals");
 var slots_1 = require("../../helpers/slots");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var transformReactiveValues = function (_a) {
+    var json = _a.json;
+    return (0, process_signals_1.processSignalsForCode)({
+        json: json,
+        processors: {
+            props: function (name) {
+                return {
+                    from: core_1.types.memberExpression(core_1.types.identifier(name), core_1.types.identifier('value')),
+                    to: core_1.types.identifier('$' + name),
+                };
+            },
+            context: function (name) {
+                return {
+                    from: core_1.types.memberExpression(core_1.types.identifier(name), core_1.types.identifier('value')),
+                    to: core_1.types.identifier('$' + name),
+                };
+            },
+            state: function (name) {
+                return {
+                    from: core_1.types.memberExpression(core_1.types.identifier(name), core_1.types.identifier('value')),
+                    to: core_1.types.identifier('$' + name),
+                };
+            },
+        },
+    });
+};
+exports.transformReactiveValues = transformReactiveValues;
 var stripStateAndProps = function (_a) {
     var options = _a.options, json = _a.json;
     return function (code) {

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

@@ -31,6 +31,7 @@ var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var merge_options_1 = require("../../helpers/merge-options");
 var patterns_1 = require("../../helpers/patterns");
 var process_code_1 = require("../../helpers/plugins/process-code");
+var process_signals_1 = require("../../helpers/plugins/process-signals");
 var render_imports_1 = require("../../helpers/render-imports");
 var slots_1 = require("../../helpers/slots");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
@@ -47,7 +48,12 @@ var getContextCode = function (json) {
         .map(function (_a) {
         var key = _a[0], context = _a[1];
         var name = context.name;
-        return "let ".concat(key, " = getContext(").concat(name, ".key);");
+        var contextType = (0, context_1.getContextType)({ component: json, context: context });
+        switch (contextType) {
+            case 'reactive':
+            case 'normal':
+                return "let ".concat(key, " = getContext(").concat(name, ".key);");
+        }
     })
         .join('\n');
 };
@@ -57,13 +63,22 @@ var setContextCode = function (_a) {
     return Object.values(json.context.set)
         .map(function (context) {
         var value = context.value, name = context.name, ref = context.ref;
-        var key = value ? "".concat(name, ".key") : name;
+        var nameIsStringLiteral = (name.startsWith("'") && name.endsWith("'")) ||
+            (name.startsWith('"') && name.endsWith('"'));
+        var key = nameIsStringLiteral ? name : "".concat(name, ".key");
         var valueStr = value
             ? processCode((0, get_state_object_string_1.stringifyContextValue)(value))
             : ref
                 ? processCode(ref)
                 : 'undefined';
-        return "setContext(".concat(key, ", ").concat(valueStr, ");");
+        var contextType = (0, context_1.getContextType)({ component: json, context: context });
+        switch (contextType) {
+            case 'normal':
+                return "setContext(".concat(key, ", ").concat(valueStr, ");");
+            case 'reactive':
+                var storeName = "".concat(name, "ContextStoreValue");
+                return "\n            const ".concat(storeName, " = writable(").concat(valueStr, ");\n            setContext(").concat(key, ", ").concat(storeName, ");\n          ");
+        }
     })
         .join('\n');
 };
@@ -107,7 +122,7 @@ var componentToSvelte = function (userProvidedOptions) {
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         var component = _a.component;
-        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, userProvidedOptions);
+        var options = (0, merge_options_1.initializeOptions)('svelte', DEFAULT_OPTIONS, userProvidedOptions);
         options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
             // Strip types from any JS code that ends up in the template, because Svelte does not support TS code in templates.
             (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
@@ -119,23 +134,27 @@ var componentToSvelte = function (userProvidedOptions) {
                     case 'hooks-deps':
                     case 'state':
                     case 'dynamic-jsx-elements':
+                    case 'types':
                         return function (x) { return x; };
                 }
             }),
             (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
                 switch (codeType) {
                     case 'hooks':
-                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), babel_transform_1.babelTransformCode);
+                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), (0, helpers_2.transformReactiveValues)({ json: json }), babel_transform_1.babelTransformCode);
                     case 'bindings':
                     case 'hooks-deps':
                     case 'state':
-                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), patterns_1.stripGetter);
-                    case 'properties':
-                        return (0, helpers_2.stripStateAndProps)({ json: json, options: options });
+                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), (0, helpers_2.transformReactiveValues)({ json: json }), patterns_1.stripGetter);
+                    case 'properties': {
+                        return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), (0, helpers_2.transformReactiveValues)({ json: json }));
+                    }
                     case 'dynamic-jsx-elements':
+                    case 'types':
                         return function (x) { return x; };
                 }
             }),
+            (0, process_signals_1.getSignalTypePlugin)({ target: 'svelte' }),
         ], false);
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
@@ -149,12 +168,21 @@ var componentToSvelte = function (userProvidedOptions) {
         json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
         var css = (0, collect_css_1.collectCss)(json);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
+        var usesWritable = false;
         var dataString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             data: true,
             functions: false,
             getters: false,
             format: options.stateType === 'proxies' ? 'object' : 'variables',
             keyPrefix: options.stateType === 'variables' ? 'let ' : '',
+            valueMapper: function (code, _t, _p, key) {
+                var _a;
+                if (((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.propertyType) === 'reactive') {
+                    usesWritable = true;
+                    return "writable(".concat(code, ")");
+                }
+                return code;
+            },
         }), babel_transform_1.babelTransformCode);
         var getterString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             data: false,
@@ -199,6 +227,9 @@ var componentToSvelte = function (userProvidedOptions) {
         if ((0, context_1.hasSetContext)(component)) {
             svelteImports.push('setContext');
         }
+        if (usesWritable) {
+            svelteStoreImports.push('writable');
+        }
         str += (0, dedent_1.dedent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <script ", ">\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      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n      "
             // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
             , "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      "
@@ -235,7 +266,7 @@ var componentToSvelte = function (userProvidedOptions) {
                 return "afterUpdate(() => { ".concat(code, " });");
             }
             var fnName = "onUpdateFn_".concat(index);
-            return "\n              function ".concat(fnName, "() {\n                ").concat(code, "\n              }\n              $: ").concat(fnName, "(...").concat(deps, ")\n            ");
+            return "\n              function ".concat(fnName, "(..._args").concat(options.typescript ? ': any[]' : '', ") {\n                ").concat(code, "\n              }\n              $: ").concat(fnName, "(...").concat(deps, ")\n            ");
         }).join(';')) || '', 
         // make sure this is after all other state/code is initialized
         setContextCode({ json: json, options: options }), !((_o = json.hooks.onUnMount) === null || _o === void 0 ? void 0 : _o.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children

package/dist/src/generators/template.js

@@ -6,12 +6,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToTemplate = void 0;
 var standalone_1 = require("prettier/standalone");
+var html_tags_1 = require("../constants/html_tags");
 var dedent_1 = require("../helpers/dedent");
 var fast_clone_1 = require("../helpers/fast-clone");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var collect_css_1 = require("../helpers/styles/collect-css");
 var plugins_1 = require("../modules/plugins");
-var jsx_1 = require("../parsers/jsx");
 var mitosis_node_1 = require("../types/mitosis-node");
 var mappers = {
     Fragment: function (json, options) {
@@ -74,7 +74,7 @@ var blockToTemplate = function (json, options) {
                 str += " ".concat(key, "=\"${").concat(useValue, "}\" ");
             }
         }
-        if (jsx_1.selfClosingTags.has(json.name)) {
+        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
             return str + ' />';
         }
         str += '>';

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

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToVue = void 0;
 var function_1 = require("fp-ts/lib/function");
+var html_tags_1 = require("../../constants/html_tags");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
@@ -23,7 +24,6 @@ var nullable_1 = require("../../helpers/nullable");
 var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
 var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var slots_1 = require("../../helpers/slots");
-var jsx_1 = require("../../parsers/jsx");
 var helpers_1 = require("./helpers");
 var SPECIAL_PROPERTIES = {
     V_IF: 'v-if',
@@ -295,8 +295,8 @@ var blockToVue = function (node, options, scope) {
     }
     if (SPECIAL_HTML_TAGS.includes(node.name)) {
         // Vue doesn't allow style/script tags in templates, but does support them through dynamic components.
+        node.bindings.is = { code: "'".concat(node.name, "'"), type: 'single' };
         node.name = 'component';
-        node.bindings.is = { code: "".concat(node.name), type: 'single' };
     }
     if (node.properties._text) {
         return "".concat(node.properties._text);
@@ -310,7 +310,7 @@ var blockToVue = function (node, options, scope) {
     }
     var str = "<".concat(node.name, " ");
     str += getBlockBindings(node);
-    if (jsx_1.selfClosingTags.has(node.name)) {
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(node.name)) {
         return str + ' />';
     }
     str += '>';

package/dist/src/generators/vue/vue.js

@@ -105,7 +105,7 @@ var componentToVue = function (userOptions) {
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h;
         var component = _a.component, path = _a.path;
-        var options = (0, merge_options_1.mergeOptions)(BASE_OPTIONS, userOptions);
+        var options = (0, merge_options_1.initializeOptions)((userOptions === null || userOptions === void 0 ? void 0 : userOptions.vueVersion) === 2 ? 'vue2' : 'vue3', BASE_OPTIONS, userOptions);
         options.plugins.unshift((0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
             if (options.api === 'composition') {
                 switch (codeType) {
@@ -121,6 +121,7 @@ var componentToVue = function (userOptions) {
                         return (0, replace_identifiers_1.replaceStateIdentifier)(null);
                     case 'properties':
                     case 'dynamic-jsx-elements':
+                    case 'types':
                         return function (c) { return c; };
                 }
             }
@@ -135,6 +136,7 @@ var componentToVue = function (userOptions) {
                     case 'properties':
                     case 'dynamic-jsx-elements':
                     case 'hooks-deps':
+                    case 'types':
                         return function (c) { return c; };
                     case 'state':
                         return function (c) { return (0, helpers_1.processBinding)({ code: c, options: options, json: component }); };

package/dist/src/helpers/get-state-object-string.d.ts

@@ -1,10 +1,11 @@
 import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisContext } from '../types/mitosis-context';
+declare type ValueMapper = (code: string, type: 'data' | 'function' | 'getter', typeParameter?: string, key?: string) => string;
 interface GetStateObjectStringOptions {
     data?: boolean;
     functions?: boolean;
     getters?: boolean;
-    valueMapper?: (code: string, type: 'data' | 'function' | 'getter', typeParameter?: string) => string;
+    valueMapper?: ValueMapper;
     format?: 'object' | 'class' | 'variables';
     keyPrefix?: string;
 }

package/dist/src/helpers/get-state-object-string.js

@@ -52,7 +52,7 @@ var convertStateMemberToString = function (_a) {
                 if (data === false) {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(code, 'data', typeParameter));
+                return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(code, 'data', typeParameter, key));
             }
             default:
                 break;

package/dist/src/helpers/handle-missing-state.js

@@ -6,7 +6,7 @@ function handleMissingState(json) {
     var stateUsed = (0, get_state_used_1.getStateUsed)(json);
     Array.from(stateUsed).forEach(function (property) {
         if (!(property in json.state)) {
-            json.state[property] = { code: 'null', type: 'property' };
+            json.state[property] = { code: 'null', type: 'property', propertyType: 'normal' };
         }
     });
 }