@builder.io/mitosis 0.0.56-104 → 0.0.56-107

package/dist/src/__tests__/shared.d.ts

@@ -1,4 +1,8 @@
-import { Transpiler } from '../types/transpiler';
+import { TranspilerGenerator } from '../types/transpiler';
 import { Target } from '../types/config';
 export declare const runTestsForJsx: () => void;
-export declare const runTestsForTarget: (target: Target, generator: Transpiler) => void;
+export declare const runTestsForTarget: <X>({ target, generator, options, }: {
+    target: Target;
+    generator: TranspilerGenerator<X, string>;
+    options: X;
+}) => void;

package/dist/src/__tests__/shared.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runTestsForTarget = exports.runTestsForJsx = void 0;
 var jsx_1 = require("../parsers/jsx");
@@ -60,6 +71,7 @@ var submitButtonBlock = require('./data/blocks/submit-button.raw');
 var text = require('./data/blocks/text.raw');
 var textarea = require('./data/blocks/textarea.raw');
 var video = require('./data/blocks/video.raw');
+var builderRenderContent = require('./data/blocks/builder-render-content.raw');
 var path = 'test-path';
 var BASIC_TESTS = {
     Basic: basic,
@@ -93,6 +105,7 @@ var BASIC_TESTS = {
     preserveTyping: preserveTyping,
     typeDependency: typeDependency,
     defaultValsWithTypes: require('./data/types/component-with-default-values-types.raw'),
+    'import types': builderRenderContent,
     subComponent: subComponent,
     nestedStyles: nestedStyles,
     propsDestructure: propsDestructure,
@@ -296,6 +309,12 @@ var TESTS_FOR_TARGET = {
     ],
 };
 var runTestsForJsx = function () {
+    test('Remove Internal mitosis package', function () {
+        var component = (0, jsx_1.parseJsx)(basicMitosis, {
+            compileAwayPackages: ['@dummy/custom-mitosis'],
+        });
+        expect(component).toMatchSnapshot();
+    });
     JSX_TESTS.forEach(function (tests) {
         Object.keys(tests).forEach(function (key) {
             test(key, function () {
@@ -306,28 +325,38 @@ var runTestsForJsx = function () {
     });
 };
 exports.runTestsForJsx = runTestsForJsx;
-var runTestsForTarget = function (target, generator) {
+var runTestsForTarget = function (_a) {
+    var target = _a.target, generator = _a.generator, options = _a.options;
     var testsArray = TESTS_FOR_TARGET[target];
     test('Remove Internal mitosis package', function () {
         var component = (0, jsx_1.parseJsx)(basicMitosis, {
             compileAwayPackages: ['@dummy/custom-mitosis'],
         });
-        var output = generator({ component: component, path: path });
+        var output = generator(options)({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
+    var configurations = [
+        { options: __assign(__assign({}, options), { typescript: false }), testName: 'Javascript Test' },
+        { options: __assign(__assign({}, options), { typescript: true }), testName: 'Typescript Test' },
+    ];
     if (testsArray) {
-        testsArray.forEach(function (tests) {
-            Object.keys(tests).forEach(function (key) {
-                test(key, function () {
-                    try {
-                        var component = (0, jsx_1.parseJsx)(tests[key]);
-                        var output = generator({ component: component, path: path });
-                        expect(output).toMatchSnapshot();
-                    }
-                    catch (error) {
-                        console.log('failed to parse', error);
-                        throw error;
-                    }
+        configurations.forEach(function (_a) {
+            var options = _a.options, testName = _a.testName;
+            describe(testName, function () {
+                testsArray.forEach(function (tests) {
+                    Object.keys(tests).forEach(function (key) {
+                        test(key, function () {
+                            try {
+                                var component = (0, jsx_1.parseJsx)(tests[key]);
+                                var output = generator(options)({ component: component, path: path });
+                                expect(output).toMatchSnapshot();
+                            }
+                            catch (error) {
+                                console.log('failed to parse', error);
+                                throw error;
+                            }
+                        });
+                    });
                 });
             });
         });

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

@@ -1,5 +1,5 @@
 import { MitosisNode } from '../types/mitosis-node';
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToAngularOptions extends BaseTranspilerOptions {
     standalone?: boolean;
 }
@@ -10,5 +10,5 @@ interface AngularBlockOptions {
     domRefs?: string[];
 }
 export declare const blockToAngular: (json: MitosisNode, options?: ToAngularOptions, blockOptions?: AngularBlockOptions) => string;
-export declare const componentToAngular: (options?: ToAngularOptions) => Transpiler;
+export declare const componentToAngular: TranspilerGenerator<ToAngularOptions>;
 export {};

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

@@ -1,19 +1,12 @@
 import { MitosisNode } from '../types/mitosis-node';
-import { BuilderElement } from '@builder.io/sdk';
-import { TranspilerArgs } from '../types/transpiler';
-export interface ToBuilderOptions {
+import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+import { BaseTranspilerOptions, TranspilerArgs } from '../types/transpiler';
+export interface ToBuilderOptions extends BaseTranspilerOptions {
     includeIds?: boolean;
 }
 declare type InternalOptions = {
     skipMapper?: boolean;
 };
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
-export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => {
-    data: {
-        httpRequests: import("../types/json")._JSON;
-        jsCode: string;
-        tsCode: string;
-        blocks: BuilderElement[];
-    };
-};
+export declare const componentToBuilder: (options?: ToBuilderOptions) => ({ component }: TranspilerArgs) => BuilderContent;
 export {};

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

@@ -0,0 +1,2 @@
+import { Plugin } from '../../modules/plugins';
+export declare const FUNCTION_HACK_PLUGIN: Plugin;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FUNCTION_HACK_PLUGIN = void 0;
+var FUNCTION_HACK_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            var _a, _b;
+            for (var key in json.state) {
+                var value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
+                var type = (_b = json.state[key]) === null || _b === void 0 ? void 0 : _b.type;
+                if (typeof value === 'string' && type === 'method') {
+                    var newValue = "function ".concat(value);
+                    json.state[key] = {
+                        code: newValue,
+                        type: 'method',
+                    };
+                }
+                else if (typeof value === 'string' && type === 'function') {
+                    json.state[key] = {
+                        code: value,
+                        type: 'method',
+                    };
+                }
+            }
+        },
+    },
+}); };
+exports.FUNCTION_HACK_PLUGIN = FUNCTION_HACK_PLUGIN;

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

@@ -1,7 +1,7 @@
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToHtmlOptions extends BaseTranspilerOptions {
     format?: 'class' | 'script';
     prefix?: string;
 }
-export declare const componentToHtml: (options?: ToHtmlOptions) => Transpiler;
-export declare const componentToCustomElement: (options?: ToHtmlOptions) => Transpiler;
+export declare const componentToHtml: TranspilerGenerator<ToHtmlOptions>;
+export declare const componentToCustomElement: TranspilerGenerator<ToHtmlOptions>;

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

@@ -1,4 +1,4 @@
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToLiquidOptions extends BaseTranspilerOptions {
     reactive?: boolean;
 }
@@ -8,4 +8,4 @@ export interface ToLiquidOptions extends BaseTranspilerOptions {
  * Shopify will reject our PUT to update the template
  */
 export declare const isValidLiquidBinding: (str?: string) => boolean;
-export declare const componentToLiquid: (options?: ToLiquidOptions) => Transpiler;
+export declare const componentToLiquid: TranspilerGenerator<ToLiquidOptions>;

package/dist/src/generators/lit/generate.d.ts

@@ -1,5 +1,5 @@
-import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 export interface ToLitOptions extends BaseTranspilerOptions {
     useShadowDom?: boolean;
 }
-export declare const componentToLit: (options?: ToLitOptions) => Transpiler;
+export declare const componentToLit: TranspilerGenerator<ToLitOptions>;

package/dist/src/generators/marko/generate.d.ts

@@ -1,7 +1,7 @@
-import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 export interface ToMarkoOptions extends BaseTranspilerOptions {
 }
-export declare const componentToMarko: (userOptions?: ToMarkoOptions) => Transpiler;
+export declare const componentToMarko: TranspilerGenerator<ToMarkoOptions>;
 /**
  * Convert marko expressions to valid html
  *

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

@@ -1,9 +1,8 @@
-import { Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 import { MitosisNode } from '../types/mitosis-node';
-export interface ToMitosisOptions {
-    prettier?: boolean;
+export interface ToMitosisOptions extends BaseTranspilerOptions {
     format: 'react' | 'legacy';
 }
 export declare const DEFAULT_FORMAT: ToMitosisOptions['format'];
 export declare const blockToMitosis: (json: MitosisNode, toMitosisOptions?: Partial<ToMitosisOptions>) => string;
-export declare const componentToMitosis: (toMitosisOptions?: Partial<ToMitosisOptions>) => Transpiler;
+export declare const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>;

package/dist/src/generators/qwik/component-generator.d.ts

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

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

@@ -24,6 +24,7 @@ var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
 var plugins_1 = require("../../modules/plugins");
 var traverse_1 = __importDefault(require("traverse"));
+var stable_serialize_1 = require("./stable-serialize");
 Error.stackTraceLimit = 9999;
 // TODO(misko): styles are not processed.
 var DEBUG = false;
@@ -78,7 +79,7 @@ var componentToQwik = function (userOptions) {
                 : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentBody]), true, true);
             file.exportDefault(component.name);
             emitStyles(file, css_1);
-            DEBUG && file.exportConst('COMPONENT', JSON.stringify(component, null, 2));
+            DEBUG && file.exportConst('COMPONENT', (0, stable_serialize_1.stableJSONserialize)(component));
             return '// GENERATED BY MITOSIS\n\n' + file.toString();
         }
         catch (e) {
@@ -161,7 +162,7 @@ function emitUseContextProvider(file, component) {
                     throw new Error('Qwik: Functions are not supported in context');
                 }
                 else {
-                    file.src.emit(JSON.stringify(propValue));
+                    file.src.emit((0, stable_serialize_1.stableJSONserialize)(propValue));
                 }
             });
         file.src.emit('})', ');');
@@ -199,7 +200,7 @@ function emitUseStore(file, stateInit) {
     var hasState = state && Object.keys(state).length > 0;
     if (hasState) {
         file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName, '(');
-        file.src.emit(JSON.stringify(state));
+        file.src.emit((0, stable_serialize_1.stableJSONserialize)(state));
         file.src.emit(');');
     }
     else {

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

@@ -25,6 +25,7 @@ var compile_away_builder_components_1 = require("../../plugins/compile-away-buil
 var handlers_1 = require("./handlers");
 var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
+var stable_serialize_1 = require("./stable-serialize");
 var styles_1 = require("./styles");
 function createFileSet(options) {
     if (options === void 0) { options = {}; }
@@ -86,7 +87,7 @@ function addComponent(fileSet, component, opts) {
     }
     if (component.meta.cssCode) {
         var symbolName = componentName + 'UsrStyles';
-        onRenderFile.exportConst(symbolName, JSON.stringify(component.meta.cssCode));
+        onRenderFile.exportConst(symbolName, (0, stable_serialize_1.stableJSONserialize)(component.meta.cssCode));
         useStyles = (function (fns) {
             return function () {
                 var _this = this;
@@ -140,7 +141,7 @@ function addComponentOnMount(componentFile, onRenderEmit, componentName, compone
     if (component.inputs) {
         component.inputs.forEach(function (input) {
             input.defaultValue !== undefined &&
-                inputInitializer.push('if(!state.hasOwnProperty("', input.name, '"))state.', input.name, '=', JSON.stringify(input.defaultValue), ';');
+                inputInitializer.push('if(!state.hasOwnProperty("', input.name, '"))state.', input.name, '=', (0, stable_serialize_1.stableJSONserialize)(input.defaultValue), ';');
         });
     }
     componentFile.exportConst(componentName + 'OnMount', function () {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Block = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = void 0;
 var standalone_1 = require("prettier/standalone");
 var builder_1 = require("../../parsers/builder");
+var stable_serialize_1 = require("./stable-serialize");
 var File = /** @class */ (function () {
     function File(filename, options, qwikModule, qrlPrefix) {
         this.imports = new Imports();
@@ -477,7 +478,7 @@ function possiblyQuotePropertyName(key) {
     return /^\w[\w\d]*$/.test(key) ? key : quote(key);
 }
 function quote(text) {
-    var string = JSON.stringify(text);
+    var string = (0, stable_serialize_1.stableJSONserialize)(text);
     // So \u2028 is a line separator character and prettier treats it as such
     // https://www.fileformat.info/info/unicode/char/2028/index.htm
     // That means it can't be inside of a string, so we replace it with `\\u2028`.

package/dist/src/generators/qwik/stable-serialize.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Same as JSON.stringify, but sorts keys ensuring that the output is stable across runs.
+ * @param obj
+ * @returns JSON serialized string
+ */
+export declare function stableJSONserialize(obj: any): string;

package/dist/src/generators/qwik/stable-serialize.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stableJSONserialize = void 0;
+/**
+ * Same as JSON.stringify, but sorts keys ensuring that the output is stable across runs.
+ * @param obj
+ * @returns JSON serialized string
+ */
+function stableJSONserialize(obj) {
+    var output = [];
+    _serialize(output, obj);
+    return output.join('');
+}
+exports.stableJSONserialize = stableJSONserialize;
+function _serialize(output, obj) {
+    if (obj == null) {
+        output.push('null');
+    }
+    else if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+            output.push('[');
+            var sep = '';
+            for (var i = 0; i < obj.length; i++) {
+                output.push(sep);
+                _serialize(output, obj[i]);
+                sep = ',';
+            }
+            output.push(']');
+        }
+        else {
+            var keys = Object.keys(obj).sort();
+            output.push('{');
+            var sep = '';
+            for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+                var key = keys_1[_i];
+                var value = obj[key];
+                if (value !== undefined) {
+                    output.push(sep);
+                    output.push(JSON.stringify(key));
+                    output.push(':');
+                    _serialize(output, value);
+                    sep = ',';
+                }
+            }
+            output.push('}');
+        }
+    }
+    else {
+        output.push(JSON.stringify(obj));
+    }
+}

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

@@ -1,6 +1,6 @@
-import { Transpiler } from '../../types/transpiler';
+import { TranspilerGenerator } from '../../types/transpiler';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToReactOptions } from './types';
 export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, parentSlots?: any[]) => string;
-export declare const componentToPreact: (reactOptions?: ToReactOptions) => Transpiler;
-export declare const componentToReact: (reactOptions?: ToReactOptions) => Transpiler;
+export declare const componentToPreact: TranspilerGenerator<ToReactOptions>;
+export declare const componentToReact: TranspilerGenerator<ToReactOptions>;

package/dist/src/generators/react-native.d.ts

@@ -1,9 +1,9 @@
 import { ClassStyleMap } from '../helpers/styles/helpers';
 import { MitosisComponent } from '../types/mitosis-component';
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToReactNativeOptions extends BaseTranspilerOptions {
     stylesType?: 'emotion' | 'react-native';
     stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
 }
 export declare const collectReactNativeStyles: (json: MitosisComponent) => ClassStyleMap;
-export declare const componentToReactNative: (options?: ToReactNativeOptions) => Transpiler;
+export declare const componentToReactNative: TranspilerGenerator<ToReactNativeOptions>;

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

@@ -1,3 +1,3 @@
-import { Transpiler } from '../../types/transpiler';
+import { TranspilerGenerator } from '../../types/transpiler';
 import { ToSolidOptions } from './types';
-export declare const componentToSolid: (passedOptions?: Partial<ToSolidOptions>) => Transpiler;
+export declare const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>>;

package/dist/src/generators/stencil/generate.d.ts

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

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

@@ -1,6 +1,6 @@
 import { MitosisComponent } from '../types/mitosis-component';
 import { MitosisNode } from '../types/mitosis-node';
-import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToSvelteOptions extends BaseTranspilerOptions {
     stateType?: 'proxies' | 'variables';
 }
@@ -11,5 +11,5 @@ interface BlockToSvelteProps {
 }
 declare type BlockToSvelte = (props: BlockToSvelteProps) => string;
 export declare const blockToSvelte: BlockToSvelte;
-export declare const componentToSvelte: ({ plugins, ...userProvidedOptions }?: ToSvelteOptions) => Transpiler;
+export declare const componentToSvelte: TranspilerGenerator<ToSvelteOptions>;
 export {};

package/dist/src/generators/svelte.js

@@ -61,9 +61,9 @@ 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 is_upper_case_1 = require("../helpers/is-upper-case");
 var json5_1 = __importDefault(require("json5"));
+var functions_1 = require("./helpers/functions");
 var mappers = {
     Fragment: function (_a) {
         var _b;
@@ -197,7 +197,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, "} ");
@@ -264,31 +270,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, _b;
-            for (var key in json.state) {
-                var value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
-                var type = (_b = json.state[key]) === null || _b === void 0 ? void 0 : _b.type;
-                if (typeof value === 'string' && type === 'method') {
-                    var newValue = "function ".concat(value);
-                    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) {
@@ -325,7 +313,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;
@@ -334,16 +321,31 @@ 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' : '');
+        }
+        // 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 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))
+        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)) {
@@ -354,13 +356,13 @@ var componentToSvelte = function (_a) {
         })
             .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) {
@@ -374,7 +376,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/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/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 {};