@builder.io/mitosis 0.0.93 → 0.0.95

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

@@ -64,10 +64,6 @@ export declare class Imports {
     get(moduleName: string, symbolName: string, as?: string): Symbol;
     hasImport(localName: string): boolean;
 }
-export declare class Block {
-    imports: Imports;
-    constructor(imports: Imports);
-}
 export declare function quote(text: string): string;
 export declare function invoke(symbol: Symbol | string, args: any[], typeParameters?: string[]): (this: SrcBuilder) => void;
 export declare function arrowFnBlock(args: string[], statements: any[], argTypes?: string[]): (this: SrcBuilder) => void;

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

@@ -1,10 +1,10 @@
 "use strict";
 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;
+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 jsx_1 = require("../../parsers/jsx");
 var builder_1 = require("../../parsers/builder");
-var stable_serialize_1 = require("./stable-serialize");
+var stable_serialize_1 = require("./helpers/stable-serialize");
 var File = /** @class */ (function () {
     function File(filename, options, qwikModule, qrlPrefix) {
         this.imports = new Imports();
@@ -111,7 +111,6 @@ function removeExt(filename) {
     var indx = filename.lastIndexOf('.');
     return indx == -1 ? filename : filename.substr(0, indx);
 }
-var spaces = [''];
 var SrcBuilder = /** @class */ (function () {
     function SrcBuilder(file, options) {
         this.buf = [];
@@ -373,8 +372,6 @@ var SrcBuilder = /** @class */ (function () {
             if (value) {
                 if (key === 'innerHTML')
                     key = 'dangerouslySetInnerHTML';
-                if (key === 'for')
-                    key = 'htmlFor';
                 if (key === 'dataSet')
                     return; // ignore
                 if (self.isJSX) {
@@ -494,13 +491,6 @@ function ignoreKey(key) {
         key == '' ||
         key.indexOf('.') !== -1);
 }
-var Block = /** @class */ (function () {
-    function Block(imports) {
-        this.imports = imports;
-    }
-    return Block;
-}());
-exports.Block = Block;
 function possiblyQuotePropertyName(key) {
     return /^\w[\w\d]*$/.test(key) ? key : quote(key);
 }
@@ -580,10 +570,15 @@ function literalTagName(symbol) {
  * it is not 100% but a good enough approximation
  */
 function isStatement(code) {
+    // remove trailing `!` as it is used to mark a non-null assertion in TS
+    // it messes up the logic afterwards
+    if (code.endsWith('!')) {
+        code = code.substr(0, code.length - 1);
+    }
     code = code.trim();
     if ((code.startsWith('(') && code.endsWith(')')) ||
         (code.startsWith('{') && code.endsWith('}'))) {
-        // Code starting with `(` is most likely and IFF and hence is an expression.
+        // Code starting with `(` is most likely an IFF and hence is an expression.
         return false;
     }
     var codeNoStrings = code.replace(STRING_LITERAL, 'STRING_LITERAL');

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

@@ -48,11 +48,11 @@ var bindings_1 = require("../../helpers/bindings");
 var blocks_1 = require("./blocks");
 var merge_options_1 = require("../../helpers/merge-options");
 var replace_new_lines_in_strings_1 = require("../../helpers/replace-new-lines-in-strings");
+var is_root_text_node_1 = require("../../helpers/is-root-text-node");
 exports.contextPropDrillingKey = '_context';
 /**
  * If the root Mitosis component only has 1 child, and it is a `Show`/`For` node, then we need to wrap it in a fragment.
  * Otherwise, we end up with invalid React render code.
- *
  */
 var isRootSpecialNode = function (json) {
     return json.children.length === 1 && ['Show', 'For'].includes(json.children[0].name);
@@ -278,6 +278,7 @@ var _componentToReact = function (json, options, isSubComponent) {
         reactLibImports.add('useEffect');
     }
     var wrap = (0, helpers_2.wrapInFragment)(json) ||
+        (0, is_root_text_node_1.isRootTextNode)(json) ||
         (componentHasStyles &&
             (options.stylesType === 'styled-jsx' || options.stylesType === 'style-tag')) ||
         isRootSpecialNode(json);

package/dist/src/generators/{react-native.d.ts → react-native/index.d.ts}

@@ -1,6 +1,6 @@
-import { ClassStyleMap } from '../helpers/styles/helpers';
-import { MitosisComponent } from '../types/mitosis-component';
-import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
+import { ClassStyleMap } from '../../helpers/styles/helpers';
+import { MitosisComponent } from '../../types/mitosis-component';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 export interface ToReactNativeOptions extends BaseTranspilerOptions {
     stylesType: 'emotion' | 'react-native';
     stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';

package/dist/src/generators/{react-native.js → react-native/index.js}

@@ -17,57 +17,68 @@ 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 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 bindings_1 = require("../helpers/bindings");
-var merge_options_1 = require("../helpers/merge-options");
-var is_children_1 = __importDefault(require("../helpers/is-children"));
+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 is_children_1 = __importDefault(require("../../helpers/is-children"));
+var sanitize_react_native_block_styles_1 = require("./sanitize-react-native-block-styles");
 var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
 var MEDIA_QUERY_KEY_REGEX = /^@media.*/;
+var sanitizeStyle = function (obj) { return function (key, value) {
+    var propertyValue = obj[key];
+    if (key.match(MEDIA_QUERY_KEY_REGEX)) {
+        console.warn('Unsupported: skipping media queries for react-native: ', key, propertyValue);
+        delete obj[key];
+        return;
+    }
+}; };
 var collectReactNativeStyles = function (json) {
     var styleMap = {};
     var componentIndexes = {};
+    var getStyleSheetName = function (item) {
+        var componentName = (0, lodash_1.camelCase)(item.name || 'view');
+        // If we have already seen this component name, we will increment the index. Otherwise, we will set the index to 1.
+        var index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
+        return "".concat(componentName).concat(index);
+    };
     (0, traverse_1.default)(json).forEach(function (item) {
-        var _a, _b;
-        if (!(0, is_mitosis_node_1.isMitosisNode)(item) || typeof ((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code) !== 'string') {
+        var _a, _b, _c;
+        if (!(0, is_mitosis_node_1.isMitosisNode)(item)) {
             return;
         }
-        var value = json5_1.default.parse(item.bindings.css.code);
+        var cssValue = json5_1.default.parse(((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code) || '{}');
         delete item.bindings.css;
-        if (!(0, lodash_1.size)(value)) {
-            return;
-        }
-        // Style properties like `"20px"` need to be numbers like `20` for react native
-        for (var key in value) {
-            var propertyValue = value[key];
-            if (key.match(MEDIA_QUERY_KEY_REGEX)) {
-                console.warn('Unsupported: skipping media queries for react-native: ', key, propertyValue);
-                delete value[key];
-                continue;
-            }
-            if (stylePropertiesThatMustBeNumber.has(key) && typeof propertyValue !== 'number') {
-                console.warn("Style key ".concat(key, " must be a number, but had value `").concat(propertyValue, "`"));
-                delete value[key];
-                continue;
+        if ((0, lodash_1.size)(cssValue)) {
+            // Style properties like `"20px"` need to be numbers like `20` for react native
+            for (var key in cssValue) {
+                sanitizeStyle(cssValue)(key, cssValue[key]);
+                cssValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(cssValue);
             }
-            // convert strings to number if applicable
-            if (typeof propertyValue === 'string' && propertyValue.match(/^\d/)) {
-                var newValue = parseFloat(propertyValue);
-                if (!isNaN(newValue)) {
-                    value[key] = newValue;
+        }
+        try {
+            var styleValue = json5_1.default.parse(((_b = item.bindings.style) === null || _b === void 0 ? void 0 : _b.code) || '{}');
+            if ((0, lodash_1.size)(styleValue)) {
+                // Style properties like `"20px"` need to be numbers like `20` for react native
+                for (var key in styleValue) {
+                    sanitizeStyle(styleValue)(key, styleValue[key]);
+                    styleValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(styleValue);
                 }
+                item.bindings.style.code = json5_1.default.stringify(styleValue);
             }
         }
-        var componentName = (0, lodash_1.camelCase)(item.name || 'view');
-        var index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
-        var className = "".concat(componentName).concat(index);
-        var styleSheetName = "styles.".concat(className);
+        catch (e) { }
+        if (!(0, lodash_1.size)(cssValue)) {
+            return;
+        }
+        var styleSheetName = getStyleSheetName(item);
+        var styleSheetAccess = "styles.".concat(styleSheetName);
         item.bindings.style = (0, bindings_1.createSingleBinding)({
-            code: ((_b = item.bindings.style) === null || _b === void 0 ? void 0 : _b.code.replace(/}$/, ", ...".concat(styleSheetName, " }"))) || styleSheetName,
+            code: ((_c = item.bindings.style) === null || _c === void 0 ? void 0 : _c.code.replace(/}$/, ", ...".concat(styleSheetAccess, " }"))) || styleSheetAccess,
         });
-        styleMap[className] = value;
+        styleMap[styleSheetName] = cssValue;
     });
     return styleMap;
 };

package/dist/src/generators/react-native/sanitize-react-native-block-styles.d.ts

@@ -0,0 +1,3 @@
+declare type Styles = Record<string, string | number>;
+export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
+export {};

package/dist/src/generators/react-native/sanitize-react-native-block-styles.js

@@ -0,0 +1,63 @@
+"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.sanitizeReactNativeBlockStyles = void 0;
+var propertiesThatMustBeNumber = new Set(['lineHeight']);
+var displayValues = new Set(['flex', 'none']);
+var normalizeNumber = function (value) {
+    if (Number.isNaN(value)) {
+        return undefined;
+    }
+    else if (value < 0) {
+        // TODO: why are negative values not allowed?
+        return 0;
+    }
+    else {
+        return value;
+    }
+};
+var sanitizeReactNativeBlockStyles = function (styles) {
+    return Object.keys(styles).reduce(function (acc, key) {
+        var _a, _b, _c;
+        var propertyValue = styles[key];
+        if (key === 'display' && !displayValues.has(propertyValue)) {
+            console.warn("Style value for key \"display\" must be \"flex\" or \"none\" but had ".concat(propertyValue));
+            return acc;
+        }
+        if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== 'number') {
+            console.warn("Style key ".concat(key, " must be a number, but had value `").concat(styles[key], "`"));
+            return acc;
+        }
+        if (typeof propertyValue === 'string') {
+            // `px` units need to be stripped and replaced with numbers
+            // https://regexr.com/6ualn
+            var isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+            if (isPixelUnit) {
+                var newValue = parseFloat(propertyValue);
+                var normalizedValue = normalizeNumber(newValue);
+                if (normalizedValue) {
+                    return __assign(__assign({}, acc), (_a = {}, _a[key] = normalizedValue, _a));
+                }
+                else {
+                    return acc;
+                }
+            }
+            else if (propertyValue === '0') {
+                // 0 edge case needs to be handled
+                return __assign(__assign({}, acc), (_b = {}, _b[key] = 0, _b));
+            }
+        }
+        return __assign(__assign({}, acc), (_c = {}, _c[key] = propertyValue, _c));
+    }, {});
+};
+exports.sanitizeReactNativeBlockStyles = sanitizeReactNativeBlockStyles;

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

@@ -77,6 +77,7 @@ var process_code_1 = require("../../helpers/plugins/process-code");
 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");
 // Transform <foo.bar key={value} /> to <Dynamic compnent={foo.bar} key={value} />
 function processDynamicComponents(json, options) {
     var found = false;
@@ -152,7 +153,9 @@ var componentToSolid = function (passedOptions) {
         }
         addProviderComponents(json, options);
         var componentHasStyles = (0, helpers_1.hasCss)(json);
-        var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1 || options.stylesType === 'style-tag';
+        var addWrapper = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).length !== 1 ||
+            options.stylesType === 'style-tag' ||
+            (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);
         if (options.plugins) {

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

@@ -109,6 +109,18 @@ var componentToSvelte = function (userProvidedOptions) {
         var component = _a.component;
         var options = (0, merge_options_1.mergeOptions)(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) {
+                switch (codeType) {
+                    case 'bindings':
+                    case 'properties':
+                        return babel_transform_1.convertTypeScriptToJS;
+                    case 'hooks':
+                    case 'hooks-deps':
+                    case 'state':
+                        return function (x) { return x; };
+                }
+            }),
             (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
                 switch (codeType) {
                     case 'hooks':
@@ -251,7 +263,7 @@ var componentToSvelte = function (userProvidedOptions) {
             }
             catch (err) {
                 console.warn('Could not prettify');
-                console.warn({ string: str }, err);
+                console.warn(str, err);
             }
         }
         str = str.replace(/<script>\n<\/script>/g, '').trim();

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

@@ -196,7 +196,7 @@ var processBinding = function (_a) {
         });
     }
     catch (e) {
-        console.log('could not process bindings in ', { code: code });
+        console.error('could not process bindings in ', { code: code });
         throw e;
     }
 };

package/dist/src/helpers/babel-transform.d.ts

@@ -1,7 +1,7 @@
 import * as babel from '@babel/core';
 import type { Visitor } from '@babel/traverse';
-export declare const babelTransform: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined) => babel.BabelFileResult | null;
-export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined) => string;
+export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined, stripTypes?: boolean) => string;
 declare type ExpressionType = 'expression' | 'unknown' | 'block' | 'functionBody';
-export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: babel.Visitor<VisitorContextType>, initialType?: ExpressionType) => string;
+export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: babel.Visitor<VisitorContextType>, initialType?: ExpressionType, stripTypes?: boolean) => string;
+export declare const convertTypeScriptToJS: (code: string) => string;
 export {};

package/dist/src/helpers/babel-transform.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);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -31,16 +42,19 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.babelTransformExpression = exports.babelTransformCode = exports.babelTransform = void 0;
+exports.convertTypeScriptToJS = exports.babelTransformExpression = exports.babelTransformCode = void 0;
+var preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
 var babel = __importStar(require("@babel/core"));
-var jsxPlugin = require('@babel/plugin-syntax-jsx');
-var tsPreset = require('@babel/preset-typescript');
-var decorators = require('@babel/plugin-syntax-decorators');
+var plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
+var plugin_syntax_decorators_1 = __importDefault(require("@babel/plugin-syntax-decorators"));
 var function_1 = require("fp-ts/lib/function");
 var patterns_1 = require("./patterns");
 var handleErrorOrExpression = function (_a) {
-    var code = _a.code, useCode = _a.useCode, result = _a.result, visitor = _a.visitor;
+    var code = _a.code, useCode = _a.useCode, result = _a.result, visitor = _a.visitor, stripTypes = _a.stripTypes;
     try {
         // If it can't, e.g. this is an expression or code fragment, modify the code below and try again
         // Detect method fragments. These get passed sometimes and otherwise
@@ -55,7 +69,7 @@ var handleErrorOrExpression = function (_a) {
         // Parse the code as an expression (instead of the default, a block) by giving it a fake variable assignment
         // e.g. if the code parsed is { ... } babel will treat that as a block by deafult, unless processed as an expression
         // that is an object
-        "let _ = ".concat(useCode), function (code) { return (0, exports.babelTransformCode)(code, visitor); }, trimSemicolons, 
+        "let _ = ".concat(useCode), function (code) { return (0, exports.babelTransformCode)(code, visitor, stripTypes); }, trimSemicolons, 
         // Remove our fake variable assignment
         function (str) { return str.replace(/let _ =\s/, ''); });
         if (isMethodOrGetter) {
@@ -68,18 +82,18 @@ var handleErrorOrExpression = function (_a) {
         throw err;
     }
 };
-var babelTransform = function (code, visitor) {
-    return babel.transform(code, {
-        sourceFileName: 'file.tsx',
-        configFile: false,
-        babelrc: false,
-        presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
-        parserOpts: { allowReturnOutsideFunction: true },
-        plugins: __spreadArray([[decorators, { legacy: true }], jsxPlugin], (visitor ? [function () { return ({ visitor: visitor }); }] : []), true),
-    });
+var babelTransform = function (_a) {
+    var code = _a.code, visitor = _a.visitor, stripTypes = _a.stripTypes;
+    return babel.transform(code, __assign(__assign({ sourceFileName: 'file.tsx', configFile: false, babelrc: false, parserOpts: { allowReturnOutsideFunction: true } }, (stripTypes ? { presets: [[preset_typescript_1.default, { isTSX: true, allExtensions: true }]] } : {})), { plugins: __spreadArray([
+            [plugin_syntax_typescript_1.default, { isTSX: true }],
+            [plugin_syntax_decorators_1.default, { legacy: true }]
+        ], (visitor ? [function () { return ({ visitor: visitor }); }] : []), true) }));
+};
+var babelTransformCode = function (code, visitor, stripTypes) {
+    var _a;
+    if (stripTypes === void 0) { stripTypes = false; }
+    return ((_a = babelTransform({ code: code, visitor: visitor, stripTypes: stripTypes })) === null || _a === void 0 ? void 0 : _a.code) || '';
 };
-exports.babelTransform = babelTransform;
-var babelTransformCode = function (code, visitor) { var _a; return ((_a = (0, exports.babelTransform)(code, visitor)) === null || _a === void 0 ? void 0 : _a.code) || ''; };
 exports.babelTransformCode = babelTransformCode;
 // Babel adds trailing semicolons, but for expressions we need those gone
 // TODO: maybe detect if the original code ended with one, and keep it if so, for the case
@@ -106,14 +120,14 @@ var getType = function (code, initialType) {
     }
     return initialType;
 };
-var babelTransformExpression = function (code, visitor, initialType) {
+var babelTransformExpression = function (code, visitor, initialType, stripTypes) {
     if (initialType === void 0) { initialType = 'unknown'; }
+    if (stripTypes === void 0) { stripTypes = false; }
     if (!code) {
         return '';
     }
     var isGetter = code.trim().startsWith('get ');
-    return (0, function_1.pipe)(code, function (code) {
-        code = isGetter ? code.replace('get', 'function ') : code;
+    return (0, function_1.pipe)(code, isGetter ? patterns_1.replaceGetterWithFunction : function_1.identity, function (code) {
         var type = getType(code, initialType);
         var useCode = type === 'functionBody' ? "function(){".concat(code, "}") : code;
         return { type: type, useCode: useCode };
@@ -121,17 +135,19 @@ var babelTransformExpression = function (code, visitor, initialType) {
         var type = _a.type, useCode = _a.useCode;
         if (type !== 'expression') {
             try {
-                return (0, function_1.pipe)((0, exports.babelTransformCode)(useCode, visitor), trimExpression(type));
+                return (0, function_1.pipe)((0, exports.babelTransformCode)(useCode, visitor, stripTypes), trimExpression(type));
             }
             catch (error) {
-                return handleErrorOrExpression({ code: code, useCode: useCode, result: null, visitor: visitor });
+                return handleErrorOrExpression({ code: code, useCode: useCode, result: null, visitor: visitor, stripTypes: stripTypes });
             }
         }
         else {
-            return handleErrorOrExpression({ code: code, useCode: useCode, result: null, visitor: visitor });
+            return handleErrorOrExpression({ code: code, useCode: useCode, result: null, visitor: visitor, stripTypes: stripTypes });
         }
-    }, function (transformed) {
-        return isGetter ? transformed.replace('function ', 'get ') : transformed;
-    });
+    }, isGetter ? patterns_1.replaceFunctionWithGetter : function_1.identity);
 };
 exports.babelTransformExpression = babelTransformExpression;
+var convertTypeScriptToJS = function (code) {
+    return (0, exports.babelTransformExpression)(code, {}, 'unknown', true);
+};
+exports.convertTypeScriptToJS = convertTypeScriptToJS;

package/dist/src/helpers/is-root-text-node.d.ts

@@ -0,0 +1,4 @@
+import { MitosisNode } from '../types/mitosis-node';
+import { MitosisComponent } from '../types/mitosis-component';
+export declare function isRootTextNode(json: MitosisComponent): boolean;
+export declare function isTextNode(node: MitosisNode): boolean;

package/dist/src/helpers/is-root-text-node.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTextNode = exports.isRootTextNode = void 0;
+function isRootTextNode(json) {
+    var firstChild = json.children[0];
+    return Boolean(firstChild && isTextNode(firstChild));
+}
+exports.isRootTextNode = isRootTextNode;
+function isTextNode(node) {
+    return Boolean(node.properties._text || node.bindings._text);
+}
+exports.isTextNode = isTextNode;

package/dist/src/helpers/map-refs.js

@@ -10,48 +10,24 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mapRefs = void 0;
 var traverse_1 = __importDefault(require("traverse"));
-var babel = __importStar(require("@babel/core"));
+var core_1 = require("@babel/core");
 var get_refs_1 = require("./get-refs");
 var is_mitosis_node_1 = require("./is-mitosis-node");
 var babel_transform_1 = require("./babel-transform");
 var patterns_1 = require("./patterns");
-var tsPreset = require('@babel/preset-typescript');
 var replaceRefsInString = function (code, refs, mapper) {
     return (0, babel_transform_1.babelTransformExpression)(code, {
         Identifier: function (path) {
             var name = path.node.name;
             var isRef = refs.includes(name);
             if (isRef) {
-                path.replaceWith(babel.types.identifier(mapper(name)));
+                path.replaceWith(core_1.types.identifier(mapper(name)));
             }
         },
     });

package/dist/src/helpers/parsers.js

@@ -22,16 +22,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isCodeBodyIdentifier = exports.isExpression = exports.isCodeBodyExpression = exports.parseCode = void 0;
 var babel = __importStar(require("@babel/core"));
-var jsxPlugin = require('@babel/plugin-syntax-jsx');
-var tsPreset = require('@babel/preset-typescript');
-var decorators = 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 plugin_syntax_decorators_1 = __importDefault(require("@babel/plugin-syntax-decorators"));
 function parseCode(code) {
     var ast = babel.parse(code, {
-        presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
-        plugins: [[decorators, { legacy: true }], jsxPlugin],
+        presets: [[preset_typescript_1.default, { isTSX: true, allExtensions: true }]],
+        plugins: [
+            [plugin_syntax_typescript_1.default, { isTSX: true }],
+            [plugin_syntax_decorators_1.default, { legacy: true }],
+        ],
     });
     var body = babel.types.isFile(ast)
         ? ast.program.body

package/dist/src/helpers/patterns.d.ts

@@ -3,4 +3,5 @@ export declare const SETTER: RegExp;
 export declare const checkIsGetter: (code: string) => RegExpMatchArray | null;
 export declare const stripGetter: (str: string) => string;
 export declare const replaceGetterWithFunction: (str: string) => string;
+export declare const replaceFunctionWithGetter: (str: string) => string;
 export declare const prefixWithFunction: (str: string) => string;

package/dist/src/helpers/patterns.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prefixWithFunction = exports.replaceGetterWithFunction = exports.stripGetter = exports.checkIsGetter = exports.SETTER = exports.GETTER = void 0;
+exports.prefixWithFunction = exports.replaceFunctionWithGetter = exports.replaceGetterWithFunction = exports.stripGetter = exports.checkIsGetter = exports.SETTER = exports.GETTER = void 0;
 exports.GETTER = /^\s*get /;
 exports.SETTER = /^\s*set /;
 var checkIsGetter = function (code) { return code.match(exports.GETTER); };
@@ -9,5 +9,7 @@ var stripGetter = function (str) { return str.replace(exports.GETTER, ''); };
 exports.stripGetter = stripGetter;
 var replaceGetterWithFunction = function (str) { return str.replace(/^(get )?/, 'function '); };
 exports.replaceGetterWithFunction = replaceGetterWithFunction;
+var replaceFunctionWithGetter = function (str) { return str.replace(/^(function )?/, 'get '); };
+exports.replaceFunctionWithGetter = replaceFunctionWithGetter;
 var prefixWithFunction = function (str) { return "function ".concat(str); };
 exports.prefixWithFunction = prefixWithFunction;

package/dist/src/helpers/plugins/process-code.d.ts

@@ -1,7 +1,7 @@
 import { Plugin } from '../../types/plugins';
 import { MitosisComponent } from '../../types/mitosis-component';
 declare type CodeType = 'hooks' | 'hooks-deps' | 'bindings' | 'properties' | 'state';
-declare function codeProcessor(codeType: CodeType): (code: string, hookType?: keyof MitosisComponent['hooks']) => string;
+declare function codeProcessor(codeType: CodeType, json: MitosisComponent): (code: string, hookType: string) => string;
 declare type CodeProcessor = typeof codeProcessor;
 /**
  * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.