@builder.io/mitosis 0.0.56-97 → 0.0.56

package/dist/src/generators/svelte.js

@@ -61,11 +61,10 @@ var babel_transform_1 = require("../helpers/babel-transform");
 var function_1 = require("fp-ts/lib/function");
 var context_1 = require("./helpers/context");
 var html_tags_1 = require("../constants/html_tags");
-var lodash_1 = require("lodash");
-var function_literal_prefix_1 = require("../constants/function-literal-prefix");
-var method_literal_prefix_1 = require("../constants/method-literal-prefix");
-var patterns_1 = require("../helpers/patterns");
 var is_upper_case_1 = require("../helpers/is-upper-case");
+var json5_1 = __importDefault(require("json5"));
+var functions_1 = require("./helpers/functions");
+var for_1 = require("../helpers/nodes/for");
 var mappers = {
     Fragment: function (_a) {
         var _b;
@@ -92,7 +91,8 @@ var mappers = {
             delete firstChild.properties.key;
             delete firstChild.bindings.key;
         }
-        return "\n{#each ".concat(stripStateAndProps((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, options), " as ").concat(json.scope.For[0]).concat(json.scope.For[1] ? ", ".concat(json.scope.For[1]) : '', " ").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");
+        var args = (0, for_1.getForArguments)(json, { excludeCollectionName: true }).join(', ');
+        return "\n{#each ".concat(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;
@@ -158,7 +158,11 @@ var blockToSvelte = function (_a) {
     var _b, _c, _d, _e, _f;
     var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
     if (mappers[json.name]) {
-        return mappers[json.name]({ json: json, options: options, parentComponent: parentComponent });
+        return mappers[json.name]({
+            json: json,
+            options: options,
+            parentComponent: parentComponent,
+        });
     }
     var tagName = getTagName({ json: json, parentComponent: parentComponent });
     if ((0, is_children_1.default)(json)) {
@@ -199,7 +203,13 @@ var blockToSvelte = function (_a) {
         if (key.startsWith('on')) {
             var event_1 = key.replace('on', '').toLowerCase();
             // TODO: handle quotes in event handler values
-            str += " on:".concat(event_1, "=\"{").concat(cusArgs.join(','), " => {").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(useValue), "}}\" ");
+            var valueWithoutBlock = (0, remove_surrounding_block_1.removeSurroundingBlock)(useValue);
+            if (valueWithoutBlock === key) {
+                str += " on:".concat(event_1, "={").concat(valueWithoutBlock, "} ");
+            }
+            else {
+                str += " on:".concat(event_1, "=\"{").concat(cusArgs.join(','), " => {").concat(valueWithoutBlock, "}}\" ");
+            }
         }
         else if (key === 'ref') {
             str += " bind:this={".concat(useValue, "} ");
@@ -223,7 +233,7 @@ var blockToSvelte = function (_a) {
     if (json.children) {
         str += json.children
             .map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); })
-            .join('\n');
+            .join('');
     }
     str += "</".concat(tagName, ">");
     return str;
@@ -266,33 +276,13 @@ var useBindValue = function (json, options) {
 var stripThisRefs = function (str) {
     return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
 };
-var FUNCTION_HACK_PLUGIN = function () { return ({
-    json: {
-        pre: function (json) {
-            var _a;
-            for (var key in json.state) {
-                var value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
-                if (typeof value === 'string' && value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
-                    var strippedValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
-                    if (!Boolean(strippedValue.match(patterns_1.GETTER))) {
-                        var newValue = "".concat(function_literal_prefix_1.functionLiteralPrefix, " function ").concat(strippedValue);
-                        json.state[key] = {
-                            code: newValue,
-                            type: 'function',
-                        };
-                    }
-                }
-            }
-        },
-    },
-}); };
 var componentToSvelte = function (_a) {
     if (_a === void 0) { _a = {}; }
     var _b = _a.plugins, plugins = _b === void 0 ? [] : _b, userProvidedOptions = __rest(_a, ["plugins"]);
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var component = _a.component;
-        var options = __assign({ stateType: 'variables', prettier: true, plugins: __spreadArray([FUNCTION_HACK_PLUGIN], plugins, true) }, userProvidedOptions);
+        var options = __assign({ stateType: 'variables', prettier: true, plugins: __spreadArray([functions_1.FUNCTION_HACK_PLUGIN], plugins, true) }, userProvidedOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
@@ -321,7 +311,7 @@ var componentToSvelte = function (_a) {
             format: 'variables',
             keyPrefix: '$: ',
             valueMapper: function (code) {
-                return (0, function_1.pipe)(stripStateAndProps(code.replace(/^get ([a-zA-Z_\$0-9]+)/, '$1 = ').replace(/\)/, ') => '), options), stripThisRefs);
+                return (0, function_1.pipe)(code.replace(/^get ([a-zA-Z_\$0-9]+)/, '$1 = ').replace(/\)/, ') => '), function (str) { return stripStateAndProps(str, options); }, stripThisRefs);
             },
         }), babel_transform_1.babelTransformCode);
         var functionsString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
@@ -329,7 +319,6 @@ var componentToSvelte = function (_a) {
             getters: false,
             functions: true,
             format: 'variables',
-            keyPrefix: 'const ',
             valueMapper: function (code) { return (0, function_1.pipe)(stripStateAndProps(code, options), stripThisRefs); },
         }), babel_transform_1.babelTransformCode);
         var hasData = dataString.length > 4;
@@ -338,30 +327,48 @@ var componentToSvelte = function (_a) {
             return (0, function_1.pipe)(stripStateAndProps(hookCode, options), babel_transform_1.babelTransformCode);
         };
         var str = '';
-        if ((_b = json.types) === null || _b === void 0 ? void 0 : _b.length) {
-            str += (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <script context='module' lang='ts'>\n        ", "\n      </script>\n      \n\n      \n\n      "], ["\n      <script context='module' lang='ts'>\n        ", "\n      </script>\n      \\n\n      \\n\n      "])), json.types ? json.types.join('\n\n') + '\n' : '');
+        var tsLangAttribute = options.typescript ? "lang='ts'" : '';
+        if (options.typescript && ((_b = json.types) === null || _b === void 0 ? void 0 : _b.length)) {
+            str += (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <script context='module' ", ">\n        ", "\n      </script>\n      \n\n      \n\n      "], ["\n      <script context='module' ", ">\n        ", "\n      </script>\n      \\n\n      \\n\n      "])), tsLangAttribute, json.types ? json.types.join('\n\n') + '\n' : '');
         }
-        str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <script lang='ts'>\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 lang='ts'>\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  "])), !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "import { onMount } from 'svelte'", !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length) ? '' : "import { afterUpdate } from 'svelte'", !((_e = json.hooks.onUnMount) === null || _e === void 0 ? void 0 : _e.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), (0, context_1.hasContext)(component) ? 'import { getContext, setContext } from "svelte";' : '', !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", (0, lodash_1.uniq)(refs.map(function (ref) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref); }).concat(props))
+        // prepare svelte imports
+        var svelteImports = [];
+        if ((_d = (_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) === null || _d === void 0 ? void 0 : _d.length) {
+            svelteImports.push('onMount');
+        }
+        if ((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length) {
+            svelteImports.push('afterUpdate');
+        }
+        if ((_g = (_f = json.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code) === null || _g === void 0 ? void 0 : _g.length) {
+            svelteImports.push('onDestroy');
+        }
+        if ((0, context_1.hasContext)(component)) {
+            svelteImports.push('getContext', 'setContext');
+        }
+        str += (0, dedent_1.default)(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    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\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  "])), tsLangAttribute, !svelteImports.length ? '' : "import { ".concat(svelteImports.sort().join(', '), " } from 'svelte'"), (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
             .map(function (name) {
             if (name === 'children') {
                 return '';
             }
             var propDeclaration = "export let ".concat(name);
-            if (json.propsTypeRef && json.propsTypeRef !== 'any') {
+            if (options.typescript && json.propsTypeRef && json.propsTypeRef !== 'any') {
                 propDeclaration += ": ".concat(json.propsTypeRef.split(' |')[0], "['").concat(name, "']");
             }
+            if (json.defaultProps && json.defaultProps.hasOwnProperty(name)) {
+                propDeclaration += "=".concat(json5_1.default.stringify(json.defaultProps[name]));
+            }
             propDeclaration += ';';
             return propDeclaration;
         })
             .join('\n'), (0, helpers_1.hasStyle)(json)
             ? "\n        function mitosis_styling (node, vars) {\n          Object.entries(vars).forEach(([ p, v ]) => { node.style[p] = v })\n        }\n      "
-            : '', getContextCode(json), setContextCode(json), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, options.stateType === 'proxies'
+            : '', getContextCode(json), setContextCode(json), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, refs.map(function (ref) { return "let ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref)); }).join('\n'), options.stateType === 'proxies'
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")
-            : dataString, !((_f = json.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code)
+            : dataString, !((_h = json.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code)
             ? ''
-            : "onMount(() => { ".concat(transformHookCode(json.hooks.onMount.code), " });"), !((_g = json.hooks.onUpdate) === null || _g === void 0 ? void 0 : _g.length)
+            : "onMount(() => { ".concat(transformHookCode(json.hooks.onMount.code), " });"), !((_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.length)
             ? ''
             : json.hooks.onUpdate
                 .map(function (_a, index) {
@@ -375,7 +382,7 @@ var componentToSvelte = function (_a) {
                     return "afterUpdate(() => { ".concat(hookCode, " })");
                 }
             })
-                .join(';'), !((_h = json.hooks.onUnMount) === null || _h === void 0 ? void 0 : _h.code)
+                .join(';'), !((_k = json.hooks.onUnMount) === null || _k === void 0 ? void 0 : _k.code)
             ? ''
             : "onDestroy(() => { ".concat(transformHookCode(json.hooks.onUnMount.code), " });"), json.children
             .map(function (item) {

package/dist/src/generators/swift-ui.d.ts

@@ -1,5 +1,3 @@
-import { Transpiler } from '../types/transpiler';
-export declare type ToSwiftOptions = {
-    prettier?: boolean;
-};
-export declare const componentToSwift: (options?: ToSwiftOptions) => Transpiler;
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
+export declare type ToSwiftOptions = BaseTranspilerOptions;
+export declare const componentToSwift: TranspilerGenerator<ToSwiftOptions>;

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

@@ -18,6 +18,7 @@ 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 scrolls = function (json) {
     var _a;
@@ -91,8 +92,8 @@ var blockToSwift = function (json, options) {
         delete json.properties.placeholder;
         json.properties._ = placeholder || '';
     }
-    if (json.name === 'For') {
-        str += "ForEach(".concat(processBinding((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), ", id: \\.self) { ").concat(json.properties._forName, " in ").concat(children
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        str += "ForEach(".concat(processBinding((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), ", id: \\.self) { ").concat(json.scope.forName, " in ").concat(children
             .map(function (item) { return blockToSwift(item, options); })
             .join('\n'), " }");
     }

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

@@ -1,4 +1,4 @@
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToTemplateOptions extends BaseTranspilerOptions {
 }
-export declare const componentToTemplate: (options?: ToTemplateOptions) => Transpiler;
+export declare const componentToTemplate: TranspilerGenerator<ToTemplateOptions>;

package/dist/src/generators/template.js

@@ -12,6 +12,7 @@ var standalone_1 = require("prettier/standalone");
 var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
 var jsx_1 = require("../parsers/jsx");
+var mitosis_node_1 = require("../types/mitosis-node");
 var plugins_1 = require("../modules/plugins");
 var dedent_1 = __importDefault(require("dedent"));
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
@@ -34,8 +35,8 @@ var blockToTemplate = function (json, options) {
         return "${".concat((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code, "}");
     }
     var str = '';
-    if (json.name === 'For') {
-        str += "${".concat((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code, "?.map(").concat(json.properties._forName, " => `");
+    if ((0, mitosis_node_1.checkIsForNode)(json)) {
+        str += "${".concat((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code, "?.map(").concat(json.scope.forName, " => `");
         if (json.children) {
             str += json.children.map(function (item) { return blockToTemplate(item, options); }).join('\n');
         }

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

@@ -1,7 +1,8 @@
 import { MitosisNode } from '../types/mitosis-node';
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions } from '../types/transpiler';
 import { OmitObj } from '../helpers/typescript';
 export declare type VueVersion = 2 | 3;
+export declare type Api = 'options' | 'composition';
 interface VueVersionOpt {
     vueVersion: VueVersion;
 }
@@ -9,6 +10,7 @@ export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
     cssNamespace?: () => string;
     namePrefix?: (path: string) => string;
     asyncComponentImports?: boolean;
+    api?: Api;
 }
 declare type BlockRenderer = (json: MitosisNode, options: ToVueOptions, scope?: Scope) => string;
 interface Scope {
@@ -16,6 +18,6 @@ interface Scope {
 }
 export declare const blockToVue: BlockRenderer;
 declare type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
-export declare const componentToVue2: (vueOptions?: VueOptsWithoutVersion) => Transpiler;
-export declare const componentToVue3: (vueOptions?: VueOptsWithoutVersion) => Transpiler;
+export declare const componentToVue2: (vueOptions?: VueOptsWithoutVersion) => import("../types/transpiler").Transpiler<string>;
+export declare const componentToVue3: (vueOptions?: VueOptsWithoutVersion) => import("../types/transpiler").Transpiler<string>;
 export {};