@builder.io/mitosis 0.0.82 → 0.0.83

package/dist/src/generators/angular.js

@@ -57,7 +57,7 @@ var html_tags_1 = require("../constants/html_tags");
 var function_1 = require("fp-ts/lib/function");
 var merge_options_1 = require("../helpers/merge-options");
 var process_code_1 = require("../helpers/plugins/process-code");
-var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment']);
+var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);
 var mappers = {
     Fragment: function (json, options) {
         return "<ng-container>".concat(json.children
@@ -85,7 +85,7 @@ var mappers = {
     },
 };
 var generateNgModule = function (content, name, componentsUsed, component, bootstrapMapper) {
-    return "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\n\n".concat(content, "\n\n@NgModule({\n  declarations: [").concat(name, "],\n  imports: [BrowserModule").concat(componentsUsed.length ? ', ' + componentsUsed.map(function (comp) { return "".concat(comp, "Module"); }).join(', ') : '', "],\n  exports: [").concat(name, "],\n  ").concat(bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : '', "\n})\nexport class ").concat(name, "Module {}");
+    return "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\n".concat(content, "\n\n@NgModule({\n  declarations: [").concat(name, "],\n  imports: [CommonModule").concat(componentsUsed.length ? ', ' + componentsUsed.map(function (comp) { return "".concat(comp, "Module"); }).join(', ') : '', "],\n  exports: [").concat(name, "],\n  ").concat(bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : '', "\n})\nexport class ").concat(name, "Module {}");
 };
 // TODO: Maybe in the future allow defining `string | function` as values
 var BINDINGS_MAPPER = {

package/dist/src/generators/context/helpers/context-with-symbol-key.d.ts

@@ -0,0 +1,5 @@
+import { MitosisContext } from '../../../types/mitosis-context';
+import { BaseTranspilerOptions } from '../../../types/transpiler';
+export declare const getContextWithSymbolKey: (options: Pick<BaseTranspilerOptions, 'prettier'>) => ({ context }: {
+    context: MitosisContext;
+}) => string;

package/dist/src/generators/context/helpers/context-with-symbol-key.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContextWithSymbolKey = void 0;
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+var getContextWithSymbolKey = function (options) {
+    return function (_a) {
+        var context = _a.context;
+        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ", \n    key \n  }\n  ");
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'), // To support running in browsers
+                    ],
+                });
+            }
+            catch (err) {
+                console.error('Format error for file:', str);
+                throw err;
+            }
+        }
+        return str;
+    };
+};
+exports.getContextWithSymbolKey = getContextWithSymbolKey;

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

@@ -1,11 +1,7 @@
-import { MitosisContext } from '../../types/mitosis-context';
 import { BaseTranspilerOptions } from '../../types/transpiler';
-interface ContextToSvelteOptions extends Pick<BaseTranspilerOptions, 'prettier'> {
-}
 /**
  * TO-DO: support types
  */
-export declare const contextToSvelte: (options?: ContextToSvelteOptions) => ({ context }: {
-    context: MitosisContext;
+export declare const contextToSvelte: (options: Pick<BaseTranspilerOptions, "prettier">) => ({ context }: {
+    context: import("../../types/mitosis-context").MitosisContext;
 }) => string;
-export {};

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

@@ -1,31 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToSvelte = void 0;
-var standalone_1 = require("prettier/standalone");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var context_with_symbol_key_1 = require("./helpers/context-with-symbol-key");
 /**
  * TO-DO: support types
  */
-var contextToSvelte = function (options) {
-    if (options === void 0) { options = {}; }
-    return function (_a) {
-        var context = _a.context;
-        var str = "\n  const key = Symbol();  \n\n  export default {\n    ".concat(context.name, ": ").concat((0, get_state_object_string_1.stringifyContextValue)(context.value), ", \n    key \n  }\n  ");
-        if (options.prettier !== false) {
-            try {
-                str = (0, standalone_1.format)(str, {
-                    parser: 'typescript',
-                    plugins: [
-                        require('prettier/parser-typescript'), // To support running in browsers
-                    ],
-                });
-            }
-            catch (err) {
-                console.error('Format error for file:', str);
-                throw err;
-            }
-        }
-        return str;
-    };
-};
-exports.contextToSvelte = contextToSvelte;
+exports.contextToSvelte = context_with_symbol_key_1.getContextWithSymbolKey;

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

@@ -1,6 +1,3 @@
-import { MitosisContext } from '../../types/mitosis-context';
-declare type ContextToVueOptions = {
-    format?: boolean;
-};
-export declare function contextToVue(context: MitosisContext, options?: ContextToVueOptions): string;
-export {};
+export declare const contextToVue: (options: Pick<import("../..").BaseTranspilerOptions, "prettier">) => ({ context }: {
+    context: import("../../types/mitosis-context").MitosisContext;
+}) => string;

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

@@ -1,9 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contextToVue = void 0;
-function contextToVue(context, options) {
-    if (options === void 0) { options = {}; }
-    var str = "\n    // Noop file\n    export default {};\n  ";
-    return str;
-}
-exports.contextToVue = contextToVue;
+var context_with_symbol_key_1 = require("./helpers/context-with-symbol-key");
+exports.contextToVue = context_with_symbol_key_1.getContextWithSymbolKey;

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

@@ -61,11 +61,13 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         methods += " function _classStringToObject(str) {\n      const obj = {};\n      if (typeof str !== 'string') { return obj }\n      const classNames = str.trim().split(/\\s+/);\n      for (const name of classNames) {\n        obj[name] = true;\n      }\n      return obj;\n    } ";
     }
     var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "])), props.length ? getCompositionPropDefinition({ component: component, props: props, options: options }) : '', refs, (_a = Object.keys(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(function (key) { return "const ".concat(key, " = inject(").concat(component.context.get[key].name, ")"); }).join('\n'), (_b = Object.values(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (contextSet) {
-        return "provide(".concat(contextSet.name, ", ").concat((0, helpers_1.getContextValue)({
-            json: component,
-            options: options,
-        })(contextSet), ")");
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n  "])), props.length ? getCompositionPropDefinition({ component: component, props: props, options: options }) : '', refs, (_a = Object.entries(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
+        var key = _a[0], context = _a[1];
+        return "const ".concat(key, " = inject(").concat((0, helpers_1.getContextKey)(context), ")");
+    }).join('\n'), (_b = Object.values(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (contextSet) {
+        var contextValue = (0, helpers_1.getContextValue)({ json: component, options: options })(contextSet);
+        var key = (0, helpers_1.getContextKey)(contextSet);
+        return "provide(".concat(key, ", ").concat(contextValue, ")");
     }).join('\n'), (_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map(function (key) {
         if (options.typescript) {
             return "const ".concat(key, " = ref<").concat(component.refs[key].typeParameter, ">()");

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

@@ -1,5 +1,5 @@
 import { Nullable } from '../../helpers/nullable';
-import { ContextSetInfo, MitosisComponent } from '../../types/mitosis-component';
+import { ContextGetInfo, ContextSetInfo, MitosisComponent } from '../../types/mitosis-component';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToVueOptions } from './types';
 export declare const addPropertiesToJson: (properties: MitosisNode['properties']) => (json: MitosisNode) => MitosisNode;
@@ -9,14 +9,15 @@ export declare const invertBooleanExpression: (expression: string) => string;
 export declare function encodeQuotes(string: string): string;
 export declare const renameMitosisComponentsToKebabCase: (str: string) => string;
 export declare function getContextNames(json: MitosisComponent): string[];
-export declare const processBinding: ({ code, options, json, preserveGetter, }: {
+declare type ProcessBinding = {
     code: string;
     options: ToVueOptions;
     json: MitosisComponent;
-    preserveGetter?: boolean | undefined;
-}) => string;
-export declare const getContextValue: ({ options, json }: {
-    options: ToVueOptions;
-    json: MitosisComponent;
-}) => ({ name, ref, value }: ContextSetInfo) => Nullable<string>;
-export declare const getContextProvideString: (json: MitosisComponent, options: ToVueOptions) => string;
+    preserveGetter?: boolean;
+    thisPrefix?: 'this' | '_this';
+};
+export declare const processBinding: ({ code, options, json, preserveGetter, thisPrefix, }: ProcessBinding) => string;
+export declare const getContextValue: (args: Pick<ProcessBinding, 'options' | 'json' | 'thisPrefix'>) => ({ name, ref, value }: ContextSetInfo) => Nullable<string>;
+export declare const checkIfContextHasStrName: (context: ContextGetInfo | ContextSetInfo) => boolean;
+export declare const getContextKey: (context: ContextGetInfo | ContextSetInfo) => string;
+export {};

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

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getContextProvideString = exports.getContextValue = exports.processBinding = exports.getContextNames = exports.renameMitosisComponentsToKebabCase = exports.encodeQuotes = exports.invertBooleanExpression = exports.getOnUpdateHookName = exports.addBindingsToJson = exports.addPropertiesToJson = void 0;
+exports.getContextKey = exports.checkIfContextHasStrName = exports.getContextValue = exports.processBinding = exports.getContextNames = exports.renameMitosisComponentsToKebabCase = exports.encodeQuotes = exports.invertBooleanExpression = exports.getOnUpdateHookName = exports.addBindingsToJson = exports.addPropertiesToJson = void 0;
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var function_1 = require("fp-ts/lib/function");
@@ -29,6 +29,7 @@ var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
 var patterns_1 = require("../../helpers/patterns");
 var replace_identifiers_1 = require("../../helpers/replace-identifiers");
+var html_tags_1 = require("../../constants/html_tags");
 var addPropertiesToJson = function (properties) {
     return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
 };
@@ -48,7 +49,15 @@ function encodeQuotes(string) {
 exports.encodeQuotes = encodeQuotes;
 // Transform <FooBar> to <foo-bar> as Vue2 needs
 var renameMitosisComponentsToKebabCase = function (str) {
-    return str.replace(/<\/?\w+/g, function (match) { return match.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); });
+    return str.replace(/<\/?\w+/g, function (match) {
+        var tagName = match.replaceAll('<', '').replaceAll('/', '');
+        if (html_tags_1.VALID_HTML_TAGS.includes(tagName)) {
+            return match;
+        }
+        else {
+            return match.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        }
+    });
 };
 exports.renameMitosisComponentsToKebabCase = renameMitosisComponentsToKebabCase;
 function getContextNames(json) {
@@ -90,13 +99,14 @@ var getAllRefs = function (component) {
     var allKeys = __spreadArray(__spreadArray([], refKeys, true), stateKeys, true);
     return allKeys;
 };
-function processRefs(input, component, options) {
+function processRefs(_a) {
+    var input = _a.input, component = _a.component, options = _a.options, thisPrefix = _a.thisPrefix;
     var refs = options.api === 'options' ? getContextNames(component) : getAllRefs(component);
     return (0, babel_transform_1.babelTransformExpression)(input, {
         Identifier: function (path) {
             var name = path.node.name;
             if (refs.includes(name) && shouldAppendValueToRef(path)) {
-                var newValue = options.api === 'options' ? "this.".concat(name) : "".concat(name, ".value");
+                var newValue = options.api === 'options' ? "".concat(thisPrefix, ".").concat(name) : "".concat(name, ".value");
                 path.replaceWith(core_1.types.identifier(newValue));
             }
         },
@@ -124,7 +134,7 @@ function prefixMethodsWithThis(input, component, options) {
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
 var processBinding = function (_a) {
-    var code = _a.code, options = _a.options, json = _a.json, _b = _a.preserveGetter, preserveGetter = _b === void 0 ? false : _b;
+    var code = _a.code, options = _a.options, json = _a.json, _b = _a.preserveGetter, preserveGetter = _b === void 0 ? false : _b, _c = _a.thisPrefix, thisPrefix = _c === void 0 ? 'this' : _c;
     try {
         return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
             includeState: true,
@@ -137,13 +147,13 @@ var processBinding = function (_a) {
                         return name;
                     case 'options':
                         if (name === 'children' || name.startsWith('children.')) {
-                            return 'this.$slots.default';
+                            return '${thisPrefix}.$slots.default';
                         }
-                        return "this.".concat(name);
+                        return "".concat(thisPrefix, ".").concat(name);
                 }
             },
         }), function (x) {
-            return (0, function_1.pipe)(x, function (code) { return processRefs(code, json, options); }, function (code) { return prefixMethodsWithThis(code, json, options); }, function (code) { return (preserveGetter === false ? (0, patterns_1.stripGetter)(code) : code); });
+            return (0, function_1.pipe)(x, function (code) { return processRefs({ input: code, component: json, options: options, thisPrefix: thisPrefix }); }, function (code) { return prefixMethodsWithThis(code, json, options); }, function (code) { return (preserveGetter === false ? (0, patterns_1.stripGetter)(code) : code); });
         });
     }
     catch (e) {
@@ -152,24 +162,29 @@ var processBinding = function (_a) {
     }
 };
 exports.processBinding = processBinding;
-var getContextValue = function (_a) {
-    var options = _a.options, json = _a.json;
+var getContextValue = function (args) {
     return function (_a) {
         var name = _a.name, ref = _a.ref, value = _a.value;
         var valueStr = value
             ? (0, get_state_object_string_1.stringifyContextValue)(value, {
-                valueMapper: function (code) { return (0, exports.processBinding)({ code: code, options: options, json: json, preserveGetter: true }); },
+                valueMapper: function (code) { return (0, exports.processBinding)(__assign(__assign({ code: code }, args), { preserveGetter: true })); },
             })
             : ref
-                ? (0, exports.processBinding)({ code: ref, options: options, json: json, preserveGetter: true })
+                ? (0, exports.processBinding)(__assign(__assign({ code: ref }, args), { preserveGetter: true }))
                 : null;
         return valueStr;
     };
 };
 exports.getContextValue = getContextValue;
-var getContextProvideString = function (json, options) {
-    return "{\n    ".concat(Object.values(json.context.set)
-        .map(function (setVal) { return "".concat(setVal.name, ": ").concat((0, exports.getContextValue)({ options: options, json: json })(setVal)); })
-        .join(','), "\n  }");
+var checkIfContextHasStrName = function (context) {
+    // check if the name is wrapped in single or double quotes
+    var isStrName = context.name.startsWith("'") || context.name.startsWith('"');
+    return isStrName;
+};
+exports.checkIfContextHasStrName = checkIfContextHasStrName;
+var getContextKey = function (context) {
+    var isStrName = (0, exports.checkIfContextHasStrName)(context);
+    var key = isStrName ? context.name : "".concat(context.name, ".key");
+    return key;
 };
-exports.getContextProvideString = getContextProvideString;
+exports.getContextKey = getContextKey;

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

@@ -21,10 +21,20 @@ var get_state_object_string_1 = require("../../helpers/get-state-object-string")
 var nullable_1 = require("../../helpers/nullable");
 var render_imports_1 = require("../../helpers/render-imports");
 var helpers_1 = require("./helpers");
+var getContextProvideString = function (json, options) {
+    return "{\n    ".concat(Object.values(json.context.set)
+        .map(function (setVal) {
+        var key = (0, helpers_1.getContextKey)(setVal);
+        return "[".concat(key, "]: ").concat((0, helpers_1.getContextValue)({ options: options, json: json, thisPrefix: '_this' })(setVal));
+    })
+        .join(','), "\n  }");
+};
 function getContextInjectString(component, options) {
     var str = '{';
-    for (var key in component.context.get) {
-        str += "\n      ".concat(key, ": ").concat((0, helpers_1.encodeQuotes)(component.context.get[key].name), ",\n    ");
+    var contextGetters = component.context.get;
+    for (var key in contextGetters) {
+        var context = contextGetters[key];
+        str += "\n      ".concat(key, ": ").concat((0, helpers_1.encodeQuotes)((0, helpers_1.getContextKey)(context)), ",\n    ");
     }
     str += '}';
     return str;
@@ -138,7 +148,7 @@ function generateOptionsApiScript(component, options, path, template, props, onU
         : "name: '".concat(path && ((_a = options.namePrefix) === null || _a === void 0 ? void 0 : _a.call(options, path)) ? ((_b = options.namePrefix) === null || _b === void 0 ? void 0 : _b.call(options, path)) + '-' : '').concat((0, lodash_1.kebabCase)(component.name), "',"), "\n        ").concat(generateComponents(componentsUsed, options), "\n        ").concat(props.length ? getPropDefinition({ component: component, props: props }) : '', "\n        ").concat(dataString.length < 4
         ? ''
         : "\n        data: () => (".concat(dataString, "),\n        "), "\n\n        ").concat((0, lodash_1.size)(component.context.set)
-        ? "provide() {\n                return ".concat((0, helpers_1.getContextProvideString)(component, options), "\n              },")
+        ? "provide() {\n                const _this = this;\n                return ".concat(getContextProvideString(component, options), "\n              },")
         : '', "\n        ").concat((0, lodash_1.size)(component.context.get)
         ? "inject: ".concat(getContextInjectString(component, options), ",")
         : '', "\n        ").concat(((_c = component.hooks.onInit) === null || _c === void 0 ? void 0 : _c.code)

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

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

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

@@ -7,14 +7,14 @@ var traverse_nodes_1 = require("../traverse-nodes");
  * Process code in bindings and properties of a node
  */
 var preProcessBlockCode = function (_a) {
-    var json = _a.json, codeProcessor = _a.codeProcessor;
-    var propertiesProcessor = codeProcessor('properties');
+    // const propertiesProcessor = codeProcessor('properties');
     // for (const key in json.properties) {
     //   const value = json.properties[key];
     //   if (key !== '_text' && value) {
     //     json.properties[key] = propertiesProcessor(value);
     //   }
     // }
+    var json = _a.json, codeProcessor = _a.codeProcessor;
     var bindingsProcessor = codeProcessor('bindings');
     for (var key in json.bindings) {
         var value = json.bindings[key];
@@ -30,26 +30,27 @@ var CODE_PROCESSOR_PLUGIN = function (codeProcessor) {
     return function () { return ({
         json: {
             post: function (json) {
-                var processHookCode = codeProcessor('hooks');
+                function processHook(key, hook) {
+                    hook.code = codeProcessor('hooks')(hook.code, key);
+                    if (hook.deps) {
+                        hook.deps = codeProcessor('hooks-deps')(hook.deps);
+                    }
+                }
                 /**
                  * process code in hooks
                  */
                 for (var key in json.hooks) {
                     var typedKey = key;
                     var hooks = json.hooks[typedKey];
-                    if ((0, nullable_1.checkIsDefined)(hooks) && Array.isArray(hooks)) {
-                        for (var _i = 0, hooks_1 = hooks; _i < hooks_1.length; _i++) {
-                            var hook = hooks_1[_i];
-                            hook.code = processHookCode(hook.code);
-                            if (hook.deps) {
-                                hook.deps = codeProcessor('hooks-deps')(hook.deps);
+                    if ((0, nullable_1.checkIsDefined)(hooks)) {
+                        if (Array.isArray(hooks)) {
+                            for (var _i = 0, hooks_1 = hooks; _i < hooks_1.length; _i++) {
+                                var hook = hooks_1[_i];
+                                processHook(typedKey, hook);
                             }
                         }
-                    }
-                    else if ((0, nullable_1.checkIsDefined)(hooks)) {
-                        hooks.code = processHookCode(hooks.code);
-                        if (hooks.deps) {
-                            hooks.deps = codeProcessor('hooks-deps')(hooks.deps);
+                        else {
+                            processHook(typedKey, hooks);
                         }
                     }
                 }

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

@@ -14,10 +14,10 @@ var babel_transform_1 = require("./babel-transform");
  */
 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;
+            // if simple member expression e.g. `props.foo`, returns `foo`
+            var propertyName = path.node.property.name;
+            return propertyName;
         }
         else {
             // if nested member expression e.g. `props.foo.bar.baz`, returns `foo.bar.baz`
@@ -27,14 +27,17 @@ var getToParam = function (path) {
     }
     else {
         // if naked identifier e.g. `foo`, returns `foo`
-        return path.node.name;
+        var nodeName = path.node.name;
+        return nodeName;
     }
 };
 var _replaceIdentifiers = function (path, _a) {
+    var _b, _c;
     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)) {
+    if (!core_1.types.isIdentifier(memberExpressionObject) ||
+        ((_c = (_b = path.node) === null || _b === void 0 ? void 0 : _b._builder_meta) === null || _c === void 0 ? void 0 : _c.newlyGenerated)) {
         return;
     }
     var matchesFrom = normalizedFrom.includes(memberExpressionObject.name);
@@ -78,17 +81,18 @@ var _replaceIdentifiers = function (path, _a) {
                     if ((0, generator_1.default)(path.node).code === (0, generator_1.default)(newMemberExpression).code) {
                         return;
                     }
+                    newMemberExpression._builder_meta = { newlyGenerated: true };
                     path.replaceWith(newMemberExpression);
                 }
                 catch (err) {
-                    console.error('Could not replace', path.node, 'with', to);
+                    console.debug('Could not replace', path.node, 'with', to.toString());
                     // throw err;
                 }
             }
         }
         else {
             if (core_1.types.isIdentifier(path.node)) {
-                console.error("Could not replace Identifier '".concat(from.toString(), "' with nothing."));
+                console.debug("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
@@ -115,13 +119,16 @@ var replaceIdentifiers = function (_a) {
                 !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)) {
+                    !core_1.types.isFunctionDeclaration(path.parent)
+                // variable declaration identifiers shouldn't be transformed
+                // !(types.isVariableDeclarator(path.parent) && path.parent.id === path.node)
+                ) {
                     _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.
+        // we have some other code downstream that cannot have untrimmed spaces, so we need to trim the output.
         function (code) { return code.trim(); });
     }
     catch (err) {