@builder.io/mitosis 0.0.80 → 0.0.82

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

@@ -175,7 +175,9 @@ var componentToVue = function (userOptions) {
             (0, lodash_1.size)(Object.keys(component.state).filter(function (key) { var _a; return ((_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; })) && vueImports.push('ref');
         }
         var tsLangAttribute = options.typescript ? "lang='ts'" : '';
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "])), template, options.api === 'composition' ? 'setup' : '', tsLangAttribute, vueImports.length ? "import { ".concat((0, lodash_1.uniq)(vueImports).sort().join(', '), " } from \"vue\"") : '', (options.typescript && ((_h = component.types) === null || _h === void 0 ? void 0 : _h.join('\n'))) || '', (0, render_imports_1.renderPreComponent)({
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "], ["\n    ", "\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "])), template.trim().length > 0
+            ? "<template>\n      ".concat(template, "\n    </template>")
+            : '', options.api === 'composition' ? 'setup' : '', tsLangAttribute, vueImports.length ? "import { ".concat((0, lodash_1.uniq)(vueImports).sort().join(', '), " } from \"vue\"") : '', (options.typescript && ((_h = component.types) === null || _h === void 0 ? void 0 : _h.join('\n'))) || '', (0, render_imports_1.renderPreComponent)({
             component: component,
             target: 'vue',
             asyncComponentImports: options.asyncComponentImports,
@@ -205,8 +207,9 @@ var componentToVue = function (userOptions) {
         str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
         for (var _i = 0, removePatterns_1 = removePatterns; _i < removePatterns_1.length; _i++) {
             var pattern = removePatterns_1[_i];
-            str = str.replace(pattern, '');
+            str = str.replace(pattern, '').trim();
         }
+        str = str.replace(/<script(.*)>\n?<\/script>/g, '').trim();
         return str;
     };
 };

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

@@ -38,31 +38,33 @@ var jsxPlugin = require('@babel/plugin-syntax-jsx');
 var tsPreset = require('@babel/preset-typescript');
 var decorators = 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;
     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
         // generate compile errors. They are of the form `foo() { ... }`
-        var isMethod = Boolean(!code.startsWith('function') && code.match(/^[a-z0-9_]+\s*\([^\)]*\)\s*[\{:]/i));
-        if (isMethod) {
+        var isMethod = Boolean(!code.trim().startsWith('function') && code.trim().match(/^[a-z0-9_]+\s*\([^\)]*\)\s*[\{:]/i));
+        var isGetter = (0, patterns_1.checkIsGetter)(code);
+        var isMethodOrGetter = isMethod || isGetter;
+        if (isMethodOrGetter) {
             useCode = "function ".concat(useCode);
         }
+        result = (0, function_1.pipe)(
         // 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
-        useCode = "let _ = ".concat(useCode);
-        result = (0, function_1.pipe)((0, exports.babelTransformCode)(useCode, visitor), trimSemicolons, function (str) {
-            // Remove our fake variable assignment
-            return str.replace(/let _ =\s/, '');
-        });
-        if (isMethod) {
+        "let _ = ".concat(useCode), function (code) { return (0, exports.babelTransformCode)(code, visitor); }, trimSemicolons, 
+        // Remove our fake variable assignment
+        function (str) { return str.replace(/let _ =\s/, ''); });
+        if (isMethodOrGetter) {
             return result.replace('function', '');
         }
         return result;
     }
     catch (err) {
-        console.error('Error parsing code:\n', code, '\n', result);
+        // console.error('Error parsing code:\n', { code, result, useCode });
         throw err;
     }
 };
@@ -109,18 +111,27 @@ var babelTransformExpression = function (code, visitor, initialType) {
     if (!code) {
         return '';
     }
-    var type = getType(code, initialType);
-    var useCode = type === 'functionBody' ? "function(){".concat(code, "}") : code;
-    if (type !== 'expression') {
-        try {
-            return (0, function_1.pipe)((0, exports.babelTransformCode)(useCode, visitor), trimExpression(type));
+    var isGetter = code.trim().startsWith('get ');
+    return (0, function_1.pipe)(code, function (code) {
+        code = isGetter ? code.replace('get', 'function ') : code;
+        var type = getType(code, initialType);
+        var useCode = type === 'functionBody' ? "function(){".concat(code, "}") : code;
+        return { type: type, useCode: useCode };
+    }, function (_a) {
+        var type = _a.type, useCode = _a.useCode;
+        if (type !== 'expression') {
+            try {
+                return (0, function_1.pipe)((0, exports.babelTransformCode)(useCode, visitor), trimExpression(type));
+            }
+            catch (error) {
+                return handleErrorOrExpression({ code: code, useCode: useCode, result: null, visitor: visitor });
+            }
         }
-        catch (error) {
+        else {
             return handleErrorOrExpression({ code: code, useCode: useCode, result: null, visitor: visitor });
         }
-    }
-    else {
-        return handleErrorOrExpression({ code: code, useCode: useCode, result: null, visitor: visitor });
-    }
+    }, function (transformed) {
+        return isGetter ? transformed.replace('function ', 'get ') : transformed;
+    });
 };
 exports.babelTransformExpression = babelTransformExpression;

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

@@ -1,5 +1,6 @@
 export declare const GETTER: RegExp;
 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 prefixWithFunction: (str: string) => string;

package/dist/src/helpers/patterns.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prefixWithFunction = exports.replaceGetterWithFunction = exports.stripGetter = exports.SETTER = exports.GETTER = void 0;
-exports.GETTER = /^get /;
-exports.SETTER = /^set /;
+exports.prefixWithFunction = 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); };
+exports.checkIsGetter = checkIsGetter;
 var stripGetter = function (str) { return str.replace(exports.GETTER, ''); };
 exports.stripGetter = stripGetter;
 var replaceGetterWithFunction = function (str) { return str.replace(/^(get )?/, 'function '); };

package/dist/src/helpers/plugins/process-code.js

@@ -9,12 +9,12 @@ var traverse_nodes_1 = require("../traverse-nodes");
 var preProcessBlockCode = function (_a) {
     var json = _a.json, codeProcessor = _a.codeProcessor;
     var propertiesProcessor = codeProcessor('properties');
-    for (var key in json.properties) {
-        var value = json.properties[key];
-        if (value) {
-            json.properties[key] = propertiesProcessor(value);
-        }
-    }
+    // for (const key in json.properties) {
+    //   const value = json.properties[key];
+    //   if (key !== '_text' && value) {
+    //     json.properties[key] = propertiesProcessor(value);
+    //   }
+    // }
     var bindingsProcessor = codeProcessor('bindings');
     for (var key in json.bindings) {
         var value = json.bindings[key];

package/dist/src/helpers/process-http-requests.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processHttpRequests = void 0;
 function processHttpRequests(json) {
-    var _a, _b;
-    var httpRequests = (_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.httpRequests;
-    var onMount = ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? json.hooks.onMount : { code: '' };
+    var _a, _b, _c;
+    var httpRequests = (_b = (_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests;
+    var onMount = ((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) ? json.hooks.onMount : { code: '' };
     if (httpRequests) {
         for (var key in httpRequests) {
             if (!json.state[key]) {

package/dist/src/helpers/replace-identifiers.d.ts

@@ -1,5 +1,7 @@
-export declare const replaceIdentifiers: ({ code, from, to, }: {
+declare type ReplaceArgs = {
     code: string;
     from: string | string[];
-    to: string | ((identifier: string) => string);
-}) => string;
+    to: string | ((identifier: string) => string) | null;
+};
+export declare const replaceIdentifiers: ({ code, from, to }: ReplaceArgs) => string;
+export {};

package/dist/src/helpers/replace-identifiers.js

@@ -1,33 +1,136 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.replaceIdentifiers = void 0;
 var core_1 = require("@babel/core");
+var generator_1 = __importDefault(require("@babel/generator"));
+var function_1 = require("fp-ts/lib/function");
 var babel_transform_1 = require("./babel-transform");
-var checkShouldReplaceIdentifier = function (path) {
-    // Identifier should not be an (optional) property access - like `foo` in `this.foo` or `this?.foo`
-    var isPropertyAccess = (core_1.types.isMemberExpression(path.parent) || core_1.types.isOptionalMemberExpression(path.parent)) &&
-        path.parent.property === path.node;
-    if (isPropertyAccess) {
-        return false;
+/**
+ * Given a `to` function given by the user, figure out the best argument to provide to the `to` function.
+ * This function makes a best guess based on the AST structure it's dealing with.
+ */
+var getToParam = function (path) {
+    if (core_1.types.isMemberExpression(path.node) || core_1.types.isOptionalMemberExpression(path.node)) {
+        // if simple member expression e.g. `props.foo`, returns `foo`
+        if (core_1.types.isIdentifier(path.node.property)) {
+            var newLocal = path.node.property.name;
+            return newLocal;
+        }
+        else {
+            // if nested member expression e.g. `props.foo.bar.baz`, returns `foo.bar.baz`
+            var x = (0, generator_1.default)(path.node.property).code;
+            return x;
+        }
     }
-    // Identifier should not be a function name - like `foo` in `function foo() {}`
-    var isFunctionName = core_1.types.isFunctionDeclaration(path.parent) && path.parent.id === path.node;
-    if (isFunctionName) {
-        return false;
+    else {
+        // if naked identifier e.g. `foo`, returns `foo`
+        return path.node.name;
+    }
+};
+var _replaceIdentifiers = function (path, _a) {
+    var from = _a.from, to = _a.to;
+    var memberExpressionObject = core_1.types.isIdentifier(path.node) ? path.node : path.node.object;
+    var normalizedFrom = Array.isArray(from) ? from : [from];
+    if (!core_1.types.isIdentifier(memberExpressionObject)) {
+        return;
+    }
+    var matchesFrom = normalizedFrom.includes(memberExpressionObject.name);
+    if (matchesFrom) {
+        if (to) {
+            // `props.foo` to `state`, e.g. `state.foo`
+            if (typeof to === 'string') {
+                var cleanedIdentifier = (0, function_1.pipe)(
+                // Remove trailing `.` if it exists in the user-provided string, as the dot is generated
+                // by babel from the AST
+                to.endsWith('.') ? to.substring(0, to.length - 1) : to, core_1.types.identifier);
+                if (core_1.types.isIdentifier(path.node)) {
+                    path.replaceWith(cleanedIdentifier);
+                }
+                else {
+                    path.replaceWith(core_1.types.memberExpression(cleanedIdentifier, path.node.property));
+                }
+                // `props.foo` to (name) => `state.${name}.bar`, e.g. `state.foo.bar`
+            }
+            else {
+                try {
+                    var newMemberExpression = (0, function_1.pipe)(getToParam(path), to, function (expression) {
+                        var _a = expression.split('.'), head = _a[0], tail = _a.slice(1);
+                        return [head, tail.join('.')];
+                    }, function (_a) {
+                        var obj = _a[0], prop = _a[1];
+                        var objIdentifier = core_1.types.identifier(obj);
+                        if (prop === '') {
+                            return objIdentifier;
+                        }
+                        else {
+                            return core_1.types.memberExpression(objIdentifier, core_1.types.identifier(prop));
+                        }
+                    });
+                    /**
+                     * If both `path` and `newMemberExpression` are equal nodes, do nothing.
+                     * This is to prevent infinite loops when the user-provided `to` function returns the same identifier.
+                     *
+                     * The infinite loop probably happens because we end up traversing the new `Identifier` node again?
+                     */
+                    if ((0, generator_1.default)(path.node).code === (0, generator_1.default)(newMemberExpression).code) {
+                        return;
+                    }
+                    path.replaceWith(newMemberExpression);
+                }
+                catch (err) {
+                    console.error('Could not replace', path.node, 'with', to);
+                    // throw err;
+                }
+            }
+        }
+        else {
+            if (core_1.types.isIdentifier(path.node)) {
+                console.error("Could not replace Identifier '".concat(from.toString(), "' with nothing."));
+            }
+            else {
+                // if we're looking at a member expression, e.g. `props.foo` and no `to` was provided, then we want to strip out
+                // the identifier and end up with `foo`. So we replace the member expression with just its `property` value.
+                path.replaceWith(path.node.property);
+            }
+        }
     }
-    return true;
 };
 var replaceIdentifiers = function (_a) {
     var code = _a.code, from = _a.from, to = _a.to;
-    return (0, babel_transform_1.babelTransformExpression)(code, {
-        Identifier: function (path) {
-            var matchesFrom = Array.isArray(from)
-                ? from.includes(path.node.name)
-                : path.node.name === from;
-            if (checkShouldReplaceIdentifier(path) && matchesFrom) {
-                path.replaceWith(core_1.types.identifier(typeof to === 'string' ? to : to(path.node.name)));
-            }
-        },
-    });
+    try {
+        return (0, function_1.pipe)((0, babel_transform_1.babelTransformExpression)(code, {
+            MemberExpression: function (path) {
+                _replaceIdentifiers(path, { from: from, to: to });
+            },
+            OptionalMemberExpression: function (path) {
+                _replaceIdentifiers(path, { from: from, to: to });
+            },
+            Identifier: function (path) {
+                // we only want to ignore certain identifiers:
+                if (
+                // (optional) member expressions are already handled in other visitors
+                !core_1.types.isMemberExpression(path.parent) &&
+                    !core_1.types.isOptionalMemberExpression(path.parent) &&
+                    // function declaration identifiers shouldn't be transformed
+                    !core_1.types.isFunctionDeclaration(path.parent)) {
+                    _replaceIdentifiers(path, { from: from, to: to });
+                }
+            },
+        }), 
+        // merely running `babel.transform` will add spaces around the code, even if we don't end up replacing anything.
+        // This is why we need to trim the output.
+        function (code) { return code.trim(); });
+    }
+    catch (err) {
+        // console.error('could not replace identifiers for ', {
+        //   code,
+        //   from: from.toString(),
+        //   to: to?.toString(),
+        // });
+        throw err;
+    }
 };
 exports.replaceIdentifiers = replaceIdentifiers;

package/dist/src/helpers/slots.js

@@ -6,7 +6,9 @@ var babel_transform_1 = require("./babel-transform");
 var SLOT_PREFIX = 'slot';
 var isSlotProperty = function (key) { return key.startsWith(SLOT_PREFIX); };
 exports.isSlotProperty = isSlotProperty;
-var stripSlotPrefix = function (key) { return key.substring(SLOT_PREFIX.length); };
+var stripSlotPrefix = function (key) {
+    return (0, exports.isSlotProperty)(key) ? key.substring(SLOT_PREFIX.length) : key;
+};
 exports.stripSlotPrefix = stripSlotPrefix;
 function replaceSlotsInString(code, mapper) {
     return (0, babel_transform_1.babelTransformExpression)(code, {

package/dist/src/helpers/strip-state-and-props-refs.d.ts

@@ -2,18 +2,37 @@ export declare type StripStateAndPropsRefsOptions = {
     replaceWith?: string | ((name: string) => string);
     includeProps?: boolean;
     includeState?: boolean;
-    contextVars?: string[];
+};
+/**
+ * Do not use this anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
+ * very brittle.
+ *
+ * If you need to re-use this, re-create it as an AST tranform first.
+ */
+export declare const DO_NOT_USE_CONTEXT_VARS_TRANSFORMS: ({ code, contextVars, context, }: {
+    code: string;
+    contextVars?: string[] | undefined;
+    context: string;
+}) => string;
+export declare type DO_NOT_USE_ARGS = {
     outputVars?: string[];
+    domRefs?: string[];
     stateVars?: string[];
+    contextVars?: string[];
     context?: string;
-    domRefs?: string[];
 };
+/**
+ * Do not use these anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
+ * very brittle.
+ *
+ * If you need to re-use a part of this, re-create it as an AST tranform first.
+ */
+export declare const DO_NOT_USE_VARS_TRANSFORMS: (newCode: string, { context, domRefs, outputVars, stateVars, contextVars }: DO_NOT_USE_ARGS) => string;
 /**
  * Remove state. and props. from expressions, e.g.
  * state.foo -> foo
  *
- * This is for support for frameworks like Vue, Svelte, liquid,  etc
+ * This is for support for frameworks like Vue, Svelte, liquid, etc
  *
- * @todo proper ref replacement with babel
  */
 export declare const stripStateAndPropsRefs: (code?: string, _options?: StripStateAndPropsRefsOptions) => string;

package/dist/src/helpers/strip-state-and-props-refs.js

@@ -11,82 +11,86 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stripStateAndPropsRefs = void 0;
+exports.stripStateAndPropsRefs = exports.DO_NOT_USE_VARS_TRANSFORMS = exports.DO_NOT_USE_CONTEXT_VARS_TRANSFORMS = void 0;
+var replace_identifiers_1 = require("./replace-identifiers");
 var DEFAULT_OPTIONS = {
     replaceWith: '',
-    contextVars: [],
-    outputVars: [],
-    stateVars: [],
-    context: 'this.',
-    domRefs: [],
     includeProps: true,
     includeState: true,
 };
 /**
- * Remove state. and props. from expressions, e.g.
- * state.foo -> foo
- *
- * This is for support for frameworks like Vue, Svelte, liquid,  etc
+ * Do not use this anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
+ * very brittle.
  *
- * @todo proper ref replacement with babel
+ * If you need to re-use this, re-create it as an AST tranform first.
  */
-var stripStateAndPropsRefs = function (code, _options) {
-    if (_options === void 0) { _options = {}; }
-    var newCode = code || '';
-    var _a = __assign(__assign({}, DEFAULT_OPTIONS), _options), replaceWith = _a.replaceWith, contextVars = _a.contextVars, outputVars = _a.outputVars, context = _a.context, domRefs = _a.domRefs, includeProps = _a.includeProps, includeState = _a.includeState, stateVars = _a.stateVars;
-    contextVars.forEach(function (_var) {
-        newCode = newCode.replace(
+var DO_NOT_USE_CONTEXT_VARS_TRANSFORMS = function (_a) {
+    var code = _a.code, contextVars = _a.contextVars, context = _a.context;
+    contextVars === null || contextVars === void 0 ? void 0 : contextVars.forEach(function (_var) {
+        code = code.replace(
         // determine expression edge cases - https://regex101.com/r/iNcTSM/1
         new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + _var + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g'), '$1' + context + _var + '$2');
     });
-    outputVars.forEach(function (_var) {
+    return code;
+};
+exports.DO_NOT_USE_CONTEXT_VARS_TRANSFORMS = DO_NOT_USE_CONTEXT_VARS_TRANSFORMS;
+/**
+ * Do not use these anywhere. We are migrating to AST transforms and should avoid Regex String.replace() as they are
+ * very brittle.
+ *
+ * If you need to re-use a part of this, re-create it as an AST tranform first.
+ */
+var DO_NOT_USE_VARS_TRANSFORMS = function (newCode, _a) {
+    var _b = _a.context, context = _b === void 0 ? 'this.' : _b, domRefs = _a.domRefs, outputVars = _a.outputVars, stateVars = _a.stateVars, contextVars = _a.contextVars;
+    newCode = (0, exports.DO_NOT_USE_CONTEXT_VARS_TRANSFORMS)({ code: newCode, context: context, contextVars: contextVars });
+    outputVars === null || outputVars === void 0 ? void 0 : outputVars.forEach(function (_var) {
         // determine expression edge cases onMessage( to this.onMessage.emit(
         var regexp = '(^|\\s|;|\\()(props\\.?)' + _var + '\\(';
         var replacer = '$1' + context + _var + '.emit(';
         newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
     });
+    var matchPropertyAccessorsArguments = '\\?\\.|,|\\.|\\(| |;|\\)|\\]|$'; // foo?.stuff | foo) | foo | foo] etc.
+    var matchVariableUseInClass = '^|\\n|\\r| |;|\\(|\\[|!|,'; //  foo | (foo | !foo | foo, | [foo etc.
+    domRefs === null || domRefs === void 0 ? void 0 : domRefs.forEach(function (_var) {
+        newCode = newCode.replace(new RegExp("(".concat(matchVariableUseInClass, ")").concat(_var, "(").concat(matchPropertyAccessorsArguments, ")"), 'g'), '$1' + 'this.' + _var + '$2');
+    });
+    stateVars === null || stateVars === void 0 ? void 0 : stateVars.forEach(function (_var) {
+        newCode = newCode.replace(
+        /*
+          1. Skip anything that is a class variable declaration
+            myClass() {
+              stuff = 'hi'
+              foo = 'bar'  <-- in the event that formatting is off
+            }
+          2. Skip anything that is the name of a function declaration or a getter
+            stuff = function stuff() {}  or  get stuff
+          3. If the conditions are met then try to match all use cases of the class variables, see above.
+        */
+        new RegExp("(?!^".concat(_var, "|^ ").concat(_var, ")(?<!function|get)(").concat(matchVariableUseInClass, ")").concat(_var, "(").concat(matchPropertyAccessorsArguments, ")"), 'g'), '$1' + 'this.' + _var + '$2');
+    });
+    return newCode;
+};
+exports.DO_NOT_USE_VARS_TRANSFORMS = DO_NOT_USE_VARS_TRANSFORMS;
+/**
+ * Remove state. and props. from expressions, e.g.
+ * state.foo -> foo
+ *
+ * This is for support for frameworks like Vue, Svelte, liquid, etc
+ *
+ */
+var stripStateAndPropsRefs = function (code, _options) {
+    if (_options === void 0) { _options = {}; }
+    var newCode = code || '';
+    var _a = __assign(__assign({}, DEFAULT_OPTIONS), _options), replaceWith = _a.replaceWith, includeProps = _a.includeProps, includeState = _a.includeState;
     if (includeProps !== false) {
-        if (typeof replaceWith === 'string') {
-            newCode = newCode.replace(/props\./g, replaceWith);
-        }
-        else {
-            newCode = newCode.replace(/props\.([\$a-z0-9_]+)/gi, function (memo, name) { return replaceWith(name); });
-        }
+        newCode = (0, replace_identifiers_1.replaceIdentifiers)({ code: newCode, from: 'props', to: replaceWith || null });
         // TODO: webcomponent edge-case
         if (/el\.this\.props/.test(newCode)) {
             newCode = newCode.replace(/el\.this\.props/g, 'el.props');
         }
     }
     if (includeState !== false) {
-        if (typeof replaceWith === 'string') {
-            newCode = newCode.replace(/state\./g, replaceWith);
-        }
-        else {
-            newCode = newCode.replace(/state\.([\$a-z0-9_]+)/gi, function (memo, name) { return replaceWith(name); });
-        }
-    }
-    var matchPropertyAccessorsArguments = '\\?\\.|,|\\.|\\(| |;|\\)|\\]|$'; // foo?.stuff | foo) | foo | foo] etc.
-    var matchVariableUseInClass = '^|\\n|\\r| |;|\\(|\\[|!|,'; //  foo | (foo | !foo | foo, | [foo etc.
-    if (domRefs.length) {
-        domRefs.forEach(function (_var) {
-            newCode = newCode.replace(new RegExp("(".concat(matchVariableUseInClass, ")").concat(_var, "(").concat(matchPropertyAccessorsArguments, ")"), 'g'), '$1' + 'this.' + _var + '$2');
-        });
-    }
-    if (stateVars.length) {
-        stateVars.forEach(function (_var) {
-            newCode = newCode.replace(
-            /*
-              1. Skip anything that is a class variable declaration
-                 myClass() {
-                  stuff = 'hi'
-                   foo = 'bar'  <-- in the event that formatting is off
-                 }
-              2. Skip anything that is the name of a function declaration or a getter
-                 stuff = function stuff() {}  or  get stuff
-              3. If the conditions are met then try to match all use cases of the class variables, see above.
-            */
-            new RegExp("(?!^".concat(_var, "|^ ").concat(_var, ")(?<!function|get)(").concat(matchVariableUseInClass, ")").concat(_var, "(").concat(matchPropertyAccessorsArguments, ")"), 'g'), '$1' + 'this.' + _var + '$2');
-        });
+        newCode = (0, replace_identifiers_1.replaceIdentifiers)({ code: newCode, from: 'state', to: replaceWith || null });
     }
     return newCode;
 };

package/dist/src/helpers/styles/collect-css.js

@@ -71,7 +71,7 @@ var classStyleMapToCss = function (map) {
     var str = '';
     for (var key in map) {
         var styles = (0, helpers_1.getStylesOnly)(map[key]);
-        str += ".".concat(key, " { ").concat((0, helpers_1.styleMapToCss)(styles), " }");
+        str += ".".concat(key, " {\n").concat((0, helpers_1.styleMapToCss)(styles), "\n}");
         var nestedSelectors = (0, helpers_1.getNestedSelectors)(map[key]);
         for (var nestedSelector in nestedSelectors) {
             var value = nestedSelectors[nestedSelector];
@@ -82,7 +82,7 @@ var classStyleMapToCss = function (map) {
                 var useSelector = nestedSelector.includes('&')
                     ? nestedSelector.replace(/&/g, ".".concat(key))
                     : ".".concat(key, " ").concat(nestedSelector);
-                str += "".concat(useSelector, " { ").concat((0, helpers_1.styleMapToCss)(value), " }");
+                str += "".concat(useSelector, " {\n").concat((0, helpers_1.styleMapToCss)(value), "\n}");
             }
         }
     }

package/dist/src/helpers/styles/helpers.js

@@ -69,16 +69,15 @@ var parseCssObject = function (css) {
 };
 exports.parseCssObject = parseCssObject;
 var styleMapToCss = function (map) {
-    var str = '';
-    for (var key in map) {
-        var value = map[key];
-        if (typeof value === 'string') {
-            str += "\n".concat((0, dash_case_1.dashCase)(key), ": ").concat(value, ";");
-        }
-        else {
-            // TODO: do nothing
-        }
-    }
-    return str;
+    return Object.entries(map)
+        .filter(function (_a) {
+        var key = _a[0], value = _a[1];
+        return typeof value === 'string';
+    })
+        .map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return "  ".concat((0, dash_case_1.dashCase)(key), ": ").concat(value, ";");
+    })
+        .join('\n');
 };
 exports.styleMapToCss = styleMapToCss;

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

@@ -3,3 +3,4 @@ export declare type OmitObj<T, U> = T extends U ? Omit<T, keyof U> : never;
 export declare type Dictionary<T> = {
     [key: string]: T;
 };
+export declare const objectHasKey: <T>(object: T, key: PropertyKey) => key is keyof T;

package/dist/src/helpers/typescript.js

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectHasKey = void 0;
+var objectHasKey = function (object, key) { return key in object; };
+exports.objectHasKey = objectHasKey;

package/dist/src/parsers/jsx/element-parser.js

@@ -43,6 +43,7 @@ var generator_1 = __importDefault(require("@babel/generator"));
 var nullable_1 = require("../../helpers/nullable");
 var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 var function_1 = require("fp-ts/lib/function");
+var helpers_1 = require("./helpers");
 var types = babel.types;
 var getForArguments = function (params) {
     var _a = params
@@ -191,7 +192,7 @@ var jsxElementToJson = function (node) {
         name: nodeName,
         properties: node.openingElement.attributes.reduce(function (memo, item) {
             if (types.isJSXAttribute(item)) {
-                var key = item.name.name;
+                var key = (0, helpers_1.transformAttributeName)(item.name.name);
                 var value = item.value;
                 if (types.isStringLiteral(value)) {
                     memo[key] = value.value;
@@ -206,7 +207,7 @@ var jsxElementToJson = function (node) {
         }, {}),
         bindings: node.openingElement.attributes.reduce(function (memo, item) {
             if (types.isJSXAttribute(item)) {
-                var key = item.name.name;
+                var key = (0, helpers_1.transformAttributeName)(item.name.name);
                 var value = item.value;
                 // boolean attribute
                 if (value === null) {