@builder.io/mitosis 0.0.104-0 → 0.0.105

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

@@ -1,3 +1,3 @@
+export { blockToReact } from './blocks';
 export * from './generator';
 export * from './types';
-export { blockToReact } from './blocks';

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

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToReact = void 0;
-__exportStar(require("./generator"), exports);
-__exportStar(require("./types"), exports);
 var blocks_1 = require("./blocks");
 Object.defineProperty(exports, "blockToReact", { enumerable: true, get: function () { return blocks_1.blockToReact; } });
+__exportStar(require("./generator"), exports);
+__exportStar(require("./types"), exports);

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

@@ -16,13 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseStateCode = exports.processHookCode = void 0;
 var core_1 = require("@babel/core");
+var function_1 = require("fp-ts/lib/function");
 var traverse_1 = __importDefault(require("traverse"));
 var capitalize_1 = require("../../helpers/capitalize");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-var function_1 = require("fp-ts/lib/function");
-var helpers_1 = require("./helpers");
 var patterns_1 = require("../../helpers/patterns");
 var transform_state_setters_1 = require("../../helpers/transform-state-setters");
+var helpers_1 = require("./helpers");
 /**
  * Removes all `this.` references.
  */

package/dist/src/generators/react-native/index.js

@@ -17,15 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToReactNative = exports.collectReactNativeStyles = void 0;
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
-var fast_clone_1 = require("../../helpers/fast-clone");
 var traverse_1 = __importDefault(require("traverse"));
-var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-var react_1 = require("../react");
+var html_tags_1 = require("../../constants/html_tags");
 var bindings_1 = require("../../helpers/bindings");
-var merge_options_1 = require("../../helpers/merge-options");
+var fast_clone_1 = require("../../helpers/fast-clone");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
+var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+var merge_options_1 = require("../../helpers/merge-options");
+var react_1 = require("../react");
 var sanitize_react_native_block_styles_1 = require("./sanitize-react-native-block-styles");
-var html_tags_1 = require("../../constants/html_tags");
 var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
 var MEDIA_QUERY_KEY_REGEX = /^@media.*/;
 var sanitizeStyle = function (obj) { return function (key, value) {

package/dist/src/generators/rsc.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToRsc = void 0;
-var bindings_1 = require("../helpers/bindings");
 var traverse_1 = __importDefault(require("traverse"));
+var bindings_1 = require("../helpers/bindings");
 var fast_clone_1 = require("../helpers/fast-clone");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var react_1 = require("./react");
 var merge_options_1 = require("../helpers/merge-options");
+var react_1 = require("./react");
 /**
  * Transform react to be RSC compatible, such as
  * - remove event listeners

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

@@ -51,33 +51,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToSolid = void 0;
+var Array_1 = require("fp-ts/lib/Array");
+var S = __importStar(require("fp-ts/string"));
+var hash_sum_1 = __importDefault(require("hash-sum"));
 var standalone_1 = require("prettier/standalone");
+var traverse_1 = __importDefault(require("traverse"));
+var bindings_1 = require("../../helpers/bindings");
+var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 var dedent_1 = require("../../helpers/dedent");
-var helpers_1 = require("../../helpers/styles/helpers");
-var get_refs_1 = require("../../helpers/get-refs");
-var render_imports_1 = require("../../helpers/render-imports");
-var plugins_1 = require("../../modules/plugins");
 var fast_clone_1 = require("../../helpers/fast-clone");
-var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-var get_components_used_1 = require("../../helpers/get-components-used");
-var traverse_1 = __importDefault(require("traverse"));
-var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
-var state_1 = require("./state");
-var nullable_1 = require("../../helpers/nullable");
+var get_components_used_1 = require("../../helpers/get-components-used");
+var get_refs_1 = require("../../helpers/get-refs");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var collect_css_1 = require("../../helpers/styles/collect-css");
-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 is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+var is_root_text_node_1 = require("../../helpers/is-root-text-node");
 var merge_options_1 = require("../../helpers/merge-options");
+var nullable_1 = require("../../helpers/nullable");
 var process_code_1 = require("../../helpers/plugins/process-code");
+var render_imports_1 = require("../../helpers/render-imports");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var helpers_1 = require("../../helpers/styles/helpers");
+var plugins_1 = require("../../modules/plugins");
 var context_1 = require("../helpers/context");
 var blocks_1 = require("./blocks");
-var bindings_1 = require("../../helpers/bindings");
-var is_root_text_node_1 = require("../../helpers/is-root-text-node");
+var state_1 = require("./state");
+var helpers_2 = require("./state/helpers");
 // Transform <foo.bar key={value} /> to <Dynamic compnent={foo.bar} key={value} />
 function processDynamicComponents(json, options) {
     var found = false;
@@ -127,7 +127,7 @@ var DEFAULT_OPTIONS = {
 };
 var componentToSolid = function (passedOptions) {
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g;
+        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);
@@ -154,8 +154,11 @@ var componentToSolid = function (passedOptions) {
         }
         addProviderComponents(json, options);
         var componentHasStyles = (0, helpers_1.hasCss)(json);
+        var hasCustomStyles = !!((_b = json.style) === null || _b === void 0 ? void 0 : _b.length);
+        var shouldInjectCustomStyles = hasCustomStyles && options.stylesType === 'styled-components';
         var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1 ||
             options.stylesType === 'style-tag' ||
+            shouldInjectCustomStyles ||
             (0, is_root_text_node_1.isRootTextNode)(json);
         // we need to run this before we run the code processor plugin, so the dynamic component variables are transformed
         var foundDynamicComponents = processDynamicComponents(json, options);
@@ -172,14 +175,14 @@ var componentToSolid = function (passedOptions) {
             (0, context_1.hasGetContext)(json) ? 'useContext' : undefined,
             hasShowComponent ? 'Show' : undefined,
             hasForComponent ? 'For' : undefined,
-            ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? 'onMount' : undefined
-        ], (((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? ['on', 'createEffect'] : []), true), ((_d = state === null || state === void 0 ? void 0 : state.import.solidjs) !== null && _d !== void 0 ? _d : []), true).filter(nullable_1.checkIsDefined));
-        var storeImports = (_e = state === null || state === void 0 ? void 0 : state.import.store) !== null && _e !== void 0 ? _e : [];
+            ((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) ? 'onMount' : undefined
+        ], (((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length) ? ['on', 'createEffect'] : []), true), ((_e = state === null || state === void 0 ? void 0 : state.import.solidjs) !== null && _e !== void 0 ? _e : []), true).filter(nullable_1.checkIsDefined));
+        var storeImports = (_f = state === null || state === void 0 ? void 0 : state.import.store) !== null && _f !== void 0 ? _f : [];
         var propType = json.propsTypeRef || 'any';
         var propsArgs = "props".concat(options.typescript ? ":".concat(propType) : '');
-        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0 ? "import { ".concat(solidJSImports.join(', '), " } from 'solid-js';") : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", storeImports.length > 0 ? "import { ".concat(storeImports.join(', '), " } from 'solid-js/store';") : '', !componentHasStyles && options.stylesType === 'styled-components'
+        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(", ") {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0 ? "import { ".concat(solidJSImports.join(', '), " } from 'solid-js';") : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", storeImports.length > 0 ? "import { ".concat(storeImports.join(', '), " } from 'solid-js/store';") : '', !componentHasStyles && options.stylesType === 'styled-components'
             ? ''
-            : "import { css } from \"solid-styled-components\";", json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, propsArgs, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json, options), getContextString(json, options), !((_g = json.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), json.hooks.onUpdate
+            : "import { css } from \"solid-styled-components\";", json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, propsArgs, (_g = state === null || state === void 0 ? void 0 : state.str) !== null && _g !== void 0 ? _g : '', getRefsString(json, options), getContextString(json, options), !((_h = json.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), json.hooks.onUpdate
             ? json.hooks.onUpdate
                 .map(function (hook, index) {
                 if (hook.deps) {
@@ -198,7 +201,7 @@ var componentToSolid = function (passedOptions) {
             .join('\n'), options.stylesType === 'style-tag' && css && css.trim().length > 4
             ? // We add the jsx attribute so prettier formats this nicely
                 "<style jsx>{`".concat(css, "`}</style>")
-            : '', addWrapper ? '</>' : '', json.name);
+            : '', shouldInjectCustomStyles ? "<style>{`".concat(json.style, "`}</style>") : '', addWrapper ? '</>' : '', json.name);
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

package/dist/src/generators/solid/state/helpers.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateStateCode = exports.getStateTypeForValue = exports.getStateSetterName = void 0;
 var core_1 = require("@babel/core");
-var strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
 var function_1 = require("fp-ts/lib/function");
-var transform_state_setters_1 = require("../../../helpers/transform-state-setters");
 var capitalize_1 = require("../../../helpers/capitalize");
 var replace_identifiers_1 = require("../../../helpers/replace-identifiers");
+var strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
+var transform_state_setters_1 = require("../../../helpers/transform-state-setters");
 var getStateSetterName = function (stateName) { return "set".concat((0, capitalize_1.capitalize)(stateName)); };
 exports.getStateSetterName = getStateSetterName;
 var getStateTypeForValue = function (_a) {

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

@@ -21,8 +21,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getState = void 0;
-var get_state_object_string_1 = require("../../../helpers/get-state-object-string");
 var function_1 = require("fp-ts/lib/function");
+var get_state_object_string_1 = require("../../../helpers/get-state-object-string");
 var state_1 = require("../../../helpers/state");
 var helpers_1 = require("./helpers");
 var signals_1 = require("./signals");

package/dist/src/generators/solid/state/store.js

@@ -11,9 +11,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStoreCode = void 0;
 var core_1 = require("@babel/core");
+var function_1 = require("fp-ts/lib/function");
 var babel_transform_1 = require("../../../helpers/babel-transform");
 var capitalize_1 = require("../../../helpers/capitalize");
-var function_1 = require("fp-ts/lib/function");
 var patterns_1 = require("../../../helpers/patterns");
 var helpers_1 = require("./helpers");
 var collectUsedStateAndPropsInFunction = function (fnValue) {

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

@@ -6,23 +6,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToStencil = void 0;
 var standalone_1 = require("prettier/standalone");
+var dash_case_1 = require("../../helpers/dash-case");
 var dedent_1 = require("../../helpers/dedent");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var render_imports_1 = require("../../helpers/render-imports");
-var jsx_1 = require("../../parsers/jsx");
-var mitosis_node_1 = require("../../types/mitosis-node");
-var plugins_1 = require("../../modules/plugins");
 var fast_clone_1 = require("../../helpers/fast-clone");
-var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-var collect_class_string_1 = require("./collect-class-string");
-var get_props_1 = require("../../helpers/get-props");
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var dash_case_1 = require("../../helpers/dash-case");
-var collect_css_1 = require("../../helpers/styles/collect-css");
+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 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) {
     var _a, _b, _c, _d;
     if (options === void 0) { options = {}; }

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

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSvelte = void 0;
 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 bindings_1 = require("../../helpers/bindings");
+var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var is_upper_case_1 = require("../../helpers/is-upper-case");
 var for_1 = require("../../helpers/nodes/for");
+var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+var slots_1 = require("../../helpers/slots");
 var helpers_1 = require("./helpers");
-var bindings_1 = require("../../helpers/bindings");
 /**
  * blockToSvelte executed after stripStateAndProps,
  * when stripStateAndProps is executed,
@@ -93,6 +93,20 @@ var getTagName = function (_a) {
     if (parentComponent && json.name === parentComponent.name) {
         return SVELTE_SPECIAL_TAGS.SELF;
     }
+    /**
+     * These are special HTML tags that svelte requires `<svelte:element this={TAG}>`
+     */
+    var SPECIAL_HTML_TAGS = ['style', 'script', 'template'];
+    if (SPECIAL_HTML_TAGS.includes(json.name)) {
+        json.bindings.this = (0, bindings_1.createSingleBinding)({
+            code: json.name === 'style'
+                ? // We have to obfuscate `"style"` due to a limitation in the svelte-preprocessor plugin.
+                    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+                    "\"sty\" + \"le\""
+                : "\"".concat(json.name, "\""),
+        });
+        return SVELTE_SPECIAL_TAGS.ELEMENT;
+    }
     var isValidHtmlTag = html_tags_1.VALID_HTML_TAGS.includes(json.name);
     var isSpecialSvelteTag = json.name.startsWith('svelte:');
     // Check if any import matches `json.name`
@@ -100,12 +114,13 @@ var getTagName = 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 none of these are true, then we have some type of dynamic tag name
     if (!isValidHtmlTag && !isSpecialSvelteTag && !hasMatchingImport) {
         json.bindings.this = (0, bindings_1.createSingleBinding)({
             code: (0, helpers_1.stripStateAndProps)({ json: parentComponent, options: options })(json.name),
         });
+        // TO-DO: no way to perfectly decide between <svelte:component> and <svelte:element> for dynamic
+        // values...need to do that through metadata overrides for now.
         return SVELTE_SPECIAL_TAGS.COMPONENT;
     }
     return json.name;

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

@@ -1,8 +1,8 @@
 "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 slots_1 = require("../../helpers/slots");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var stripStateAndProps = function (_a) {
     var options = _a.options, json = _a.json;
     return function (code) {

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

@@ -17,30 +17,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToSvelte = void 0;
+var function_1 = require("fp-ts/lib/function");
 var standalone_1 = require("prettier/standalone");
 var traverse_1 = __importDefault(require("traverse"));
-var collect_css_1 = require("../../helpers/styles/collect-css");
+var babel_transform_1 = require("../../helpers/babel-transform");
 var dedent_1 = require("../../helpers/dedent");
-var helpers_1 = require("../../helpers/styles/helpers");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var get_props_1 = require("../../helpers/get-props");
 var get_refs_1 = require("../../helpers/get-refs");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var getters_to_functions_1 = require("../../helpers/getters-to-functions");
 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 render_imports_1 = require("../../helpers/render-imports");
-var plugins_1 = require("../../modules/plugins");
+var slots_1 = require("../../helpers/slots");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-var getters_to_functions_1 = require("../../helpers/getters-to-functions");
-var babel_transform_1 = require("../../helpers/babel-transform");
-var function_1 = require("fp-ts/lib/function");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var helpers_1 = require("../../helpers/styles/helpers");
+var plugins_1 = require("../../modules/plugins");
 var context_1 = require("../helpers/context");
-var slots_1 = require("../../helpers/slots");
 var functions_1 = require("../helpers/functions");
-var merge_options_1 = require("../../helpers/merge-options");
-var process_code_1 = require("../../helpers/plugins/process-code");
-var helpers_2 = require("./helpers");
 var blocks_1 = require("./blocks");
-var patterns_1 = require("../../helpers/patterns");
+var helpers_2 = require("./helpers");
 var getContextCode = function (json) {
     var contextGetters = json.context.get;
     return Object.entries(contextGetters)

package/dist/src/generators/swift-ui.js

@@ -8,7 +8,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToSwift = void 0;
-var try_prettier_format_1 = require("../helpers/try-prettier-format");
 var traverse_1 = __importDefault(require("traverse"));
 var dedent_1 = require("../helpers/dedent");
 var fast_clone_1 = require("../helpers/fast-clone");
@@ -18,8 +17,9 @@ var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var get_styles_1 = require("../helpers/get-styles");
 var is_children_1 = __importDefault(require("../helpers/is-children"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var mitosis_node_1 = require("../types/mitosis-node");
 var state_1 = require("../helpers/state");
+var try_prettier_format_1 = require("../helpers/try-prettier-format");
+var mitosis_node_1 = require("../types/mitosis-node");
 var scrolls = function (json) {
     var _a;
     return ((_a = (0, get_styles_1.getStyles)(json)) === null || _a === void 0 ? void 0 : _a.overflow) === 'auto';

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

@@ -1,7 +1,7 @@
 import { ClassStyleMap } from '../helpers/styles/helpers';
 import { MitosisComponent } from '../types/mitosis-component';
-import { ToReactOptions } from './react';
 import { TranspilerGenerator } from '../types/transpiler';
+import { ToReactOptions } from './react';
 export declare const DEFAULT_Component_SET: Set<string>;
 export declare type ToTaroOptions = ToReactOptions;
 export declare const collectTaroStyles: (json: MitosisComponent) => ClassStyleMap;

package/dist/src/generators/taro.js

@@ -7,11 +7,11 @@ exports.componentToTaro = exports.TagMap = exports.collectTaroStyles = exports.D
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
 var traverse_1 = __importDefault(require("traverse"));
+var bindings_1 = require("../helpers/bindings");
 var fast_clone_1 = require("../helpers/fast-clone");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var react_1 = require("./react");
-var bindings_1 = require("../helpers/bindings");
 var merge_options_1 = require("../helpers/merge-options");
+var react_1 = require("./react");
 // @tarojs/components
 exports.DEFAULT_Component_SET = new Set([
     'View',

package/dist/src/generators/template.js

@@ -6,13 +6,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToTemplate = void 0;
 var standalone_1 = require("prettier/standalone");
-var collect_css_1 = require("../helpers/styles/collect-css");
+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 plugins_1 = require("../modules/plugins");
-var dedent_1 = require("../helpers/dedent");
-var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var mappers = {
     Fragment: function (json, options) {
         return "<div>".concat(json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n'), "</div>");

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

@@ -19,12 +19,12 @@ var function_1 = require("fp-ts/lib/function");
 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");
+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 nullable_1 = require("../../helpers/nullable");
 var SPECIAL_PROPERTIES = {
     V_IF: 'v-if',
     V_FOR: 'v-for',
@@ -204,6 +204,7 @@ var NODE_MAPPERS = {
         return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName, SLOT_PREFIX).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
     },
 };
+var SPECIAL_HTML_TAGS = ['style', 'script'];
 var stringifyBinding = function (node) {
     return function (_a) {
         var key = _a[0], value = _a[1];
@@ -292,11 +293,10 @@ var blockToVue = function (node, options, scope) {
     if ((0, is_children_1.default)({ node: node })) {
         return "<slot/>";
     }
-    if (node.name === 'style') {
-        // Vue doesn't allow <style>...</style> in templates, but does support the synonymous
-        // <component is="'style'">...</component>
+    if (SPECIAL_HTML_TAGS.includes(node.name)) {
+        // Vue doesn't allow style/script tags in templates, but does support them through dynamic components.
         node.name = 'component';
-        node.bindings.is = { code: "'style'", type: 'single' };
+        node.bindings.is = { code: "".concat(node.name), type: 'single' };
     }
     if (node.properties._text) {
         return "".concat(node.properties._text);

package/dist/src/generators/vue/compositionApi.d.ts

@@ -1,3 +1,3 @@
-import { MitosisComponent, extendedHook } from '../../types/mitosis-component';
+import { extendedHook, MitosisComponent } from '../../types/mitosis-component';
 import { ToVueOptions } from './types';
 export declare function generateCompositionApiScript(component: MitosisComponent, options: ToVueOptions, template: string, props: Array<string>, onUpdateWithDeps: extendedHook[], onUpdateWithoutDeps: extendedHook[]): string;

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

@@ -12,9 +12,8 @@ var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
 var dedent_1 = require("../../helpers/dedent");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var helpers_1 = require("./helpers");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-var helpers_2 = require("./helpers");
+var helpers_1 = require("./helpers");
 var getCompositionPropDefinition = function (_a) {
     var options = _a.options, component = _a.component, props = _a.props;
     var isTs = options.typescript;
@@ -90,7 +89,7 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         var computedCode = "const ".concat(key, " = computed(").concat(getterAsFunction, ")");
         return computedCode;
     }).join('\n')) || '', (onUpdateWithoutDeps === null || onUpdateWithoutDeps === void 0 ? void 0 : onUpdateWithoutDeps.map(function (hook) { return "onUpdated(() => ".concat(hook.code, ")"); }).join('\n')) || '', (onUpdateWithDeps === null || onUpdateWithDeps === void 0 ? void 0 : onUpdateWithDeps.map(function (hook) {
-        return "watch(() => ".concat((0, helpers_2.processBinding)({
+        return "watch(() => ".concat((0, helpers_1.processBinding)({
             code: hook.deps || '',
             options: options,
             json: component,

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

@@ -21,15 +21,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getContextKey = exports.checkIfContextHasStrName = exports.getContextValue = exports.processBinding = exports.getContextNames = exports.renameMitosisComponentsToKebabCase = exports.encodeQuotes = exports.invertBooleanExpression = exports.getOnUpdateHookName = exports.addBindingsToJson = exports.addPropertiesToJson = void 0;
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var babel_transform_1 = require("../../helpers/babel-transform");
 var core_1 = require("@babel/core");
+var function_1 = require("fp-ts/lib/function");
 var lodash_1 = require("lodash");
+var html_tags_1 = require("../../constants/html_tags");
+var babel_transform_1 = require("../../helpers/babel-transform");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var patterns_1 = require("../../helpers/patterns");
 var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var slots_1 = require("../../helpers/slots");
-var html_tags_1 = require("../../constants/html_tags");
-var function_1 = require("fp-ts/lib/function");
 var addPropertiesToJson = function (properties) {
     return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
 };

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

@@ -1,2 +1,2 @@
-export * from './vue';
 export * from './types';
+export * from './vue';

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

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./vue"), exports);
 __exportStar(require("./types"), exports);
+__exportStar(require("./vue"), exports);

package/dist/src/generators/vue/optionsApi.d.ts

@@ -1,3 +1,3 @@
-import { MitosisComponent, extendedHook } from '../../types/mitosis-component';
+import { extendedHook, MitosisComponent } from '../../types/mitosis-component';
 import { ToVueOptions } from './types';
 export declare function generateOptionsApiScript(component: MitosisComponent, options: ToVueOptions, path: string | undefined, template: string, props: string[], onUpdateWithDeps: extendedHook[], onUpdateWithoutDeps: extendedHook[]): string;

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

@@ -19,31 +19,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToVue3 = exports.componentToVue2 = void 0;
+var function_1 = require("fp-ts/lib/function");
+var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
-var collect_css_1 = require("../../helpers/styles/collect-css");
+var traverse_1 = __importDefault(require("traverse"));
+var babel_transform_1 = require("../../helpers/babel-transform");
+var bindings_1 = require("../../helpers/bindings");
 var dedent_1 = require("../../helpers/dedent");
 var fast_clone_1 = require("../../helpers/fast-clone");
-var map_refs_1 = require("../../helpers/map-refs");
-var render_imports_1 = require("../../helpers/render-imports");
 var get_props_1 = require("../../helpers/get-props");
-var plugins_1 = require("../../modules/plugins");
-var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-var traverse_1 = __importDefault(require("traverse"));
-var lodash_1 = require("lodash");
+var map_refs_1 = require("../../helpers/map-refs");
+var merge_options_1 = require("../../helpers/merge-options");
+var process_code_1 = require("../../helpers/plugins/process-code");
 var process_http_requests_1 = require("../../helpers/process-http-requests");
-var function_1 = require("fp-ts/lib/function");
+var render_imports_1 = require("../../helpers/render-imports");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var slots_1 = require("../../helpers/slots");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var plugins_1 = require("../../modules/plugins");
 var functions_1 = require("../helpers/functions");
+var blocks_1 = require("./blocks");
+var compositionApi_1 = require("./compositionApi");
 var helpers_1 = require("./helpers");
 var optionsApi_1 = require("./optionsApi");
-var compositionApi_1 = require("./compositionApi");
-var blocks_1 = require("./blocks");
-var merge_options_1 = require("../../helpers/merge-options");
-var process_code_1 = require("../../helpers/plugins/process-code");
-var bindings_1 = require("../../helpers/bindings");
-var replace_identifiers_1 = require("../../helpers/replace-identifiers");
-var babel_transform_1 = require("../../helpers/babel-transform");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, _options) {
     (0, traverse_1.default)(json).forEach(function (node) {

package/dist/src/helpers/babel-transform.js

@@ -47,10 +47,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertTypeScriptToJS = exports.babelTransformExpression = exports.babelTransformCode = void 0;
-var preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
 var babel = __importStar(require("@babel/core"));
-var plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
 var plugin_syntax_decorators_1 = __importDefault(require("@babel/plugin-syntax-decorators"));
+var plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
+var preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
 var function_1 = require("fp-ts/lib/function");
 var patterns_1 = require("./patterns");
 var handleErrorOrExpression = function (_a) {

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

@@ -1,5 +1,5 @@
-import { MitosisContext } from '../types/mitosis-context';
 import { MitosisComponent } from '../types/mitosis-component';
+import { MitosisContext } from '../types/mitosis-context';
 interface GetStateObjectStringOptions {
     data?: boolean;
     functions?: boolean;