@builder.io/mitosis 0.0.95 → 0.0.97-0

package/dist/src/generators/angular.js

@@ -269,6 +269,7 @@ var componentToAngular = function (userOptions) {
                     case 'hooks-deps':
                     case 'state':
                     case 'properties':
+                    case 'dynamic-jsx-elements':
                         return function (x) { return x; };
                 }
             }),

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

@@ -6,7 +6,6 @@ var fast_clone_1 = require("../../helpers/fast-clone");
 var collect_css_1 = require("../../helpers/styles/collect-css");
 var state_1 = require("../../helpers/state");
 var add_prevent_default_1 = require("./helpers/add-prevent-default");
-var convert_method_to_function_1 = require("./helpers/convert-method-to-function");
 var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
 var plugins_1 = require("../../modules/plugins");
@@ -34,6 +33,7 @@ var PLUGINS = [
             case 'hooks':
             case 'hooks-deps':
             case 'properties':
+            case 'dynamic-jsx-elements':
                 // update signal getters to have `.value`
                 return function (code, k) {
                     // `ref` should not update the signal value access
@@ -47,7 +47,19 @@ var PLUGINS = [
                             to: function (x) { return (x === ref ? "".concat(x, ".value") : "".concat(ref, ".value.").concat(x)); },
                         });
                     });
-                    return code;
+                    // update signal getters to have `.value`
+                    return (0, replace_identifiers_1.replaceStateIdentifier)(function (name) {
+                        var state = json.state[name];
+                        switch (state === null || state === void 0 ? void 0 : state.type) {
+                            case 'getter':
+                                return "".concat(name, ".value");
+                            case 'function':
+                            case 'method':
+                            case 'property':
+                            case undefined:
+                                return "state.".concat(name);
+                        }
+                    })(code);
                 };
         }
     }),
@@ -77,27 +89,27 @@ var componentToQwik = function (userOptions) {
             emitImports(file, component);
             emitTypes(file, component);
             emitExports(file, component);
-            var metadata = component.meta.useMetadata || {};
-            var isLightComponent = ((_c = (_b = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
-            var mutable_1 = ((_d = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _d === void 0 ? void 0 : _d.mutable) || [];
-            var imports_1 = ((_e = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _e === void 0 ? void 0 : _e.imports) || {};
+            var metadata_1 = component.meta.useMetadata || {};
+            var isLightComponent = ((_c = (_b = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.isLight) || false;
+            var mutable_1 = ((_d = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _d === void 0 ? void 0 : _d.mutable) || [];
+            var imports_1 = ((_e = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _e === void 0 ? void 0 : _e.imports) || {};
             Object.keys(imports_1).forEach(function (key) { return file.import(imports_1[key], key); });
-            var state_3 = (0, state_2.emitStateMethodsAndRewriteBindings)(file, component, metadata);
+            var state_3 = (0, state_2.emitStateMethodsAndRewriteBindings)(file, component, metadata_1);
             var hasState_1 = (0, state_1.checkHasState)(component);
             var css_1 = null;
             var componentFn = (0, src_generator_1.arrowFnBlock)(['props'], [
                 function () {
-                    var _a, _b;
+                    var _a;
                     css_1 = emitUseStyles(file, component);
                     emitUseContext(file, component);
                     emitUseRef(file, component);
-                    hasState_1 && (0, state_2.emitUseStore)(file, state_3);
+                    hasState_1 &&
+                        (0, state_2.emitUseStore)({ file: file, stateInit: state_3, isDeep: (_a = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _a === void 0 ? void 0 : _a.hasDeepStore });
+                    emitUseComputed(file, component);
                     emitUseContextProvider(file, component);
                     emitUseClientEffect(file, component);
                     emitUseMount(file, component);
                     emitUseTask(file, component);
-                    emitTagNameHack(file, component, (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.elementTag);
-                    emitTagNameHack(file, component, (_b = component.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.componentElementTag);
                     emitJSX(file, component, mutable_1);
                 },
             ], [(component.propsTypeRef || 'any') + (isLightComponent ? '&{key?:any}' : '')]);
@@ -126,11 +138,6 @@ function emitExports(file, component) {
         file.src.emit(code);
     });
 }
-function emitTagNameHack(file, component, metadataValue) {
-    if (typeof metadataValue === 'string' && metadataValue) {
-        file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, (0, state_2.getStateMethodsAndGetters)(component.state), (0, state_2.getLexicalScopeVars)(component)), ';');
-    }
-}
 function emitUseClientEffect(file, component) {
     if (component.hooks.onMount) {
         // This is called useMount, but in practice it is used as
@@ -265,3 +272,13 @@ function extractGetterBody(code) {
     var end = code.lastIndexOf('}');
     return code.substring(start + 1, end).trim();
 }
+function emitUseComputed(file, component) {
+    for (var _i = 0, _a = Object.entries(component.state); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], stateValue = _b[1];
+        switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
+            case 'getter':
+                file.src.const("\n          ".concat(key, " = ").concat(file.import(file.qwikModule, 'useComputed$').localName, "(() => {\n            ").concat(extractGetterBody(stateValue.code), "\n          })\n        "));
+                continue;
+        }
+    }
+}

package/dist/src/generators/qwik/directives.d.ts

@@ -21,12 +21,4 @@ interface ImageProps {
     noWebp?: boolean;
 }
 export declare function Image(props: ImageProps): any;
-export declare function __passThroughProps__(dstProps: Record<string, any>, srcProps: Record<string, any>): Record<string, any>;
-export declare function CoreButton(props: {
-    text?: string;
-    link?: string;
-    class?: string;
-    openInNewTab?: string;
-    tagName$: string;
-}): any;
 export {};

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

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CoreButton = exports.__passThroughProps__ = exports.Image = exports.DIRECTIVES = void 0;
+exports.Image = exports.DIRECTIVES = void 0;
 var for_1 = require("../../helpers/nodes/for");
 var minify_1 = require("../minify");
 var src_generator_1 = require("./src-generator");
@@ -124,7 +124,6 @@ function __passThroughProps__(dstProps, srcProps) {
     }
     return dstProps;
 }
-exports.__passThroughProps__ = __passThroughProps__;
 function CoreButton(props) {
     var hasLink = !!props.link;
     var hProps = {
@@ -135,5 +134,4 @@ function CoreButton(props) {
     };
     return h(hasLink ? 'a' : props.tagName$ || 'span', __passThroughProps__(hProps, props));
 }
-exports.CoreButton = CoreButton;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/generators/qwik/helpers/state.d.ts

@@ -20,7 +20,11 @@ export declare type StateValues = Record<PropertyName, StateValue>;
  * @param file
  * @param stateInit
  */
-export declare function emitUseStore(file: File, stateInit: StateInit): void;
+export declare function emitUseStore({ file, stateInit, isDeep, }: {
+    file: File;
+    stateInit: StateInit;
+    isDeep: boolean;
+}): void;
 export declare function emitStateMethodsAndRewriteBindings(file: File, component: MitosisComponent, metadata: Record<string, any>): StateInit;
 export declare function getLexicalScopeVars(component: MitosisComponent): string[];
 export declare type MethodMap = Record<string, 'method' | 'getter'>;

package/dist/src/generators/qwik/helpers/state.js

@@ -21,7 +21,8 @@ var babel_transform_1 = require("../../../helpers/babel-transform");
  * @param file
  * @param stateInit
  */
-function emitUseStore(file, stateInit) {
+function emitUseStore(_a) {
+    var file = _a.file, stateInit = _a.stateInit, isDeep = _a.isDeep;
     var state = stateInit[0];
     var hasState = state && Object.keys(state).length > 0;
     if (hasState) {
@@ -29,7 +30,8 @@ function emitUseStore(file, stateInit) {
         if (file.options.isTypeScript) {
             file.src.emit('<any>');
         }
-        file.src.emit("(".concat((0, stable_inject_1.stableInject)(state), ");"));
+        var fnArgs = [(0, stable_inject_1.stableInject)(state), isDeep ? '{deep: true}' : undefined].filter(Boolean);
+        file.src.emit("(".concat(fnArgs, ");"));
     }
     else {
         // TODO hack for now so that `state` variable is defined, even though it is never read.
@@ -45,22 +47,15 @@ function emitStateMethods(file, componentState, lexicalArgs) {
         var stateValue = componentState[key];
         switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
             case 'method':
-            case 'getter':
             case 'function':
                 var code = stateValue.code;
                 var prefixIdx = 0;
-                if (stateValue.type === 'getter') {
-                    prefixIdx += 'get '.length;
-                }
-                else if (stateValue.type === 'function') {
+                if (stateValue.type === 'function') {
                     prefixIdx += 'function '.length;
                 }
                 code = code.substring(prefixIdx);
                 code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', "(".concat(lexicalArgs.join(','), ","));
                 var functionName = code.split(/\(/)[0];
-                if (stateValue.type === 'getter') {
-                    stateInit.push("state.".concat(key, "=").concat(functionName, "(").concat(lexicalArgs.join(','), ")"));
-                }
                 if (!file.options.isTypeScript) {
                     // Erase type information
                     code = (0, babel_transform_1.convertTypeScriptToJS)(code);

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

@@ -190,11 +190,11 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings) {
         if (Object.prototype.hasOwnProperty.call(bindings, key)) {
             var bindingValue = bindings[key];
             var bindingExpr = bindingValue.code;
-            var handlerBlock = void 0;
+            var handlerBlock = handlers.get(bindingExpr);
             if (key == 'css') {
                 continue;
             }
-            else if ((handlerBlock = handlers.get(bindingExpr))) {
+            else if (handlerBlock) {
                 key = "".concat(key, "$");
                 bindingExpr = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qrl'), [
                     (0, src_generator_1.quote)(file.qrlPrefix + 'high.js'),

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

@@ -61,7 +61,7 @@ export declare class Symbol {
 }
 export declare class Imports {
     imports: Map<string, Map<string, Symbol>>;
-    get(moduleName: string, symbolName: string, as?: string): Symbol;
+    get(moduleName: string, symbolName: string, asVar?: string): Symbol;
     hasImport(localName: string): boolean;
 }
 export declare function quote(text: string): string;

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

@@ -456,7 +456,7 @@ var Imports = /** @class */ (function () {
     function Imports() {
         this.imports = new Map();
     }
-    Imports.prototype.get = function (moduleName, symbolName, as) {
+    Imports.prototype.get = function (moduleName, symbolName, asVar) {
         var importSymbols = this.imports.get(moduleName);
         if (!importSymbols) {
             importSymbols = new Map();
@@ -464,7 +464,7 @@ var Imports = /** @class */ (function () {
         }
         var symbol = importSymbols.get(symbolName);
         if (!symbol) {
-            symbol = new Symbol(symbolName, as || symbolName);
+            symbol = new Symbol(symbolName, asVar || symbolName);
             importSymbols.set(symbolName, symbol);
         }
         return symbol;

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

@@ -135,6 +135,7 @@ var componentToSolid = function (passedOptions) {
             (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
                 switch (codeType) {
                     case 'state':
+                    case 'dynamic-jsx-elements':
                         return function (c) { return c; };
                     case 'bindings':
                     case 'hooks':

package/dist/src/generators/solid/state/helpers.js

@@ -6,6 +6,7 @@ var strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-pro
 var function_1 = require("fp-ts/lib/function");
 var transform_state_setters_1 = require("../../../helpers/transform-state-setters");
 var capitalize_1 = require("../../../helpers/capitalize");
+var replace_identifiers_1 = require("../../../helpers/replace-identifiers");
 var getStateSetterName = function (stateName) { return "set".concat((0, capitalize_1.capitalize)(stateName)); };
 exports.getStateSetterName = getStateSetterName;
 var getStateTypeForValue = function (_a) {
@@ -73,32 +74,26 @@ var updateStateSettersInCode = function (_a) {
     };
 };
 var updateStateGettersInCode = function (options, component) {
-    return function (value) {
-        return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
-            includeState: true,
-            includeProps: false,
-            replaceWith: function (name) {
-                var stateType = (0, exports.getStateTypeForValue)({ value: name, component: component, options: options });
-                var state = component.state[name];
-                switch (stateType) {
-                    case 'signals':
-                        if (
-                        // signal accessors are lazy, so we need to add a function call to property calls
-                        (state === null || state === void 0 ? void 0 : state.type) === 'property' ||
-                            // getters become plain functions, requiring a function call to access their value
-                            (state === null || state === void 0 ? void 0 : state.type) === 'getter') {
-                            return "".concat(name, "()");
-                        }
-                        else {
-                            return name;
-                        }
-                    case 'store':
-                    case 'mutable':
-                        return name;
+    return (0, replace_identifiers_1.replaceStateIdentifier)(function (name) {
+        var stateType = (0, exports.getStateTypeForValue)({ value: name, component: component, options: options });
+        var state = component.state[name];
+        switch (stateType) {
+            case 'signals':
+                if (
+                // signal accessors are lazy, so we need to add a function call to property calls
+                (state === null || state === void 0 ? void 0 : state.type) === 'property' ||
+                    // getters become plain functions, requiring a function call to access their value
+                    (state === null || state === void 0 ? void 0 : state.type) === 'getter') {
+                    return "".concat(name, "()");
                 }
-            },
-        });
-    };
+                else {
+                    return name;
+                }
+            case 'store':
+            case 'mutable':
+                return name;
+        }
+    });
 };
 var updateStateCode = function (_a) {
     var options = _a.options, component = _a.component, _b = _a.updateSetters, updateSetters = _b === void 0 ? true : _b;

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

@@ -118,6 +118,7 @@ var componentToSvelte = function (userProvidedOptions) {
                     case 'hooks':
                     case 'hooks-deps':
                     case 'state':
+                    case 'dynamic-jsx-elements':
                         return function (x) { return x; };
                 }
             }),
@@ -131,6 +132,8 @@ var componentToSvelte = function (userProvidedOptions) {
                         return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json: json, options: options }), patterns_1.stripGetter);
                     case 'properties':
                         return (0, helpers_2.stripStateAndProps)({ json: json, options: options });
+                    case 'dynamic-jsx-elements':
+                        return function (x) { return x; };
                 }
             }),
         ], false);

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

@@ -22,8 +22,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
@@ -31,6 +29,7 @@ var patterns_1 = require("../../helpers/patterns");
 var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var slots_1 = require("../../helpers/slots");
 var html_tags_1 = require("../../constants/html_tags");
+var function_1 = require("fp-ts/lib/function");
 var addPropertiesToJson = function (properties) {
     return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
 };
@@ -148,52 +147,36 @@ function optionsApiStateAndPropsReplace(name, thisPrefix, codeType) {
 var processBinding = function (_a) {
     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, codeType = _a.codeType;
     try {
-        return (0, function_1.pipe)(
-        // processed twice, once for props and once for state
-        (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-            includeState: false,
-            includeProps: true,
-            replaceWith: function (name) {
-                switch (options.api) {
-                    // keep pointing to `props.${value}`
-                    case 'composition':
-                        if (codeType === 'bindings') {
-                            return (0, slots_1.isSlotProperty)(name)
-                                ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "$slots.".concat(x); })
-                                : name;
-                        }
-                        if (name === 'children' || name.startsWith('children.')) {
-                            return "useSlots().default";
-                        }
-                        return (0, slots_1.isSlotProperty)(name)
-                            ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "useSlots().".concat(x); })
-                            : "props.".concat(name);
-                    case 'options':
-                        return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
-                }
-            },
-        }), function (code) {
-            return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-                includeState: true,
-                includeProps: false,
-                replaceWith: function (name) {
-                    switch (options.api) {
-                        case 'composition':
-                            return name;
-                        case 'options':
-                            return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
+        return (0, function_1.pipe)(code, (0, replace_identifiers_1.replacePropsIdentifier)(function (name) {
+            switch (options.api) {
+                // keep pointing to `props.${value}`
+                case 'composition':
+                    if (codeType === 'bindings') {
+                        return (0, slots_1.isSlotProperty)(name) ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "$slots.".concat(x); }) : name;
                     }
-                },
-            });
-        }, function (x) {
-            return (0, function_1.pipe)(x, 
-            // bindings does not need process refs and prefix this
-            function (code) {
-                return codeType === 'bindings'
-                    ? code
-                    : processRefs({ input: code, component: json, options: options, thisPrefix: thisPrefix });
-            }, function (code) { return (codeType === 'bindings' ? code : prefixMethodsWithThis(code, json, options)); }, function (code) { return (preserveGetter === false ? (0, patterns_1.stripGetter)(code) : code); });
-        });
+                    if (name === 'children' || name.startsWith('children.')) {
+                        return "useSlots().default";
+                    }
+                    return (0, slots_1.isSlotProperty)(name)
+                        ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "useSlots().".concat(x); })
+                        : "props.".concat(name);
+                case 'options':
+                    return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
+            }
+        }), (0, replace_identifiers_1.replaceStateIdentifier)(function (name) {
+            switch (options.api) {
+                case 'composition':
+                    return name;
+                case 'options':
+                    return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
+            }
+        }), 
+        // bindings does not need process refs and prefix this
+        function (x) {
+            return codeType === 'bindings'
+                ? x
+                : processRefs({ input: x, component: json, options: options, thisPrefix: thisPrefix });
+        }, function (x) { return (codeType === 'bindings' ? x : prefixMethodsWithThis(x, json, options)); }, function (x) { return (preserveGetter === false ? (0, patterns_1.stripGetter)(x) : x); });
     }
     catch (e) {
         console.error('could not process bindings in ', { code: code });

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

@@ -41,8 +41,9 @@ var compositionApi_1 = require("./compositionApi");
 var blocks_1 = require("./blocks");
 var merge_options_1 = require("../../helpers/merge-options");
 var process_code_1 = require("../../helpers/plugins/process-code");
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var bindings_1 = require("../../helpers/bindings");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
+var babel_transform_1 = require("../../helpers/babel-transform");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, _options) {
     (0, traverse_1.default)(json).forEach(function (node) {
@@ -112,10 +113,13 @@ var componentToVue = function (userOptions) {
                     case 'state':
                         return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
                     case 'bindings':
-                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); };
+                        return (0, function_1.flow)(
+                        // Strip types from any JS code that ends up in the template, because Vue does not support TS code in templates.
+                        babel_transform_1.convertTypeScriptToJS, function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); });
                     case 'hooks-deps':
-                        return function (c) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(c, { includeProps: false }); };
+                        return (0, replace_identifiers_1.replaceStateIdentifier)(null);
                     case 'properties':
+                    case 'dynamic-jsx-elements':
                         return function (c) { return c; };
                 }
             }
@@ -124,8 +128,11 @@ var componentToVue = function (userOptions) {
                     case 'hooks':
                         return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
                     case 'bindings':
-                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); };
+                        return (0, function_1.flow)(
+                        // Strip types from any JS code that ends up in the template, because Vue does not support TS code in templates.
+                        babel_transform_1.convertTypeScriptToJS, function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); });
                     case 'properties':
+                    case 'dynamic-jsx-elements':
                     case 'hooks-deps':
                         return function (c) { return c; };
                     case 'state':

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

@@ -1,6 +1,6 @@
 import { Plugin } from '../../types/plugins';
 import { MitosisComponent } from '../../types/mitosis-component';
-declare type CodeType = 'hooks' | 'hooks-deps' | 'bindings' | 'properties' | 'state';
+declare type CodeType = 'hooks' | 'hooks-deps' | 'bindings' | 'properties' | 'state' | 'dynamic-jsx-elements';
 declare function codeProcessor(codeType: CodeType, json: MitosisComponent): (code: string, hookType: string) => string;
 declare type CodeProcessor = typeof codeProcessor;
 /**

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

@@ -22,6 +22,7 @@ var preProcessNodeCode = function (_a) {
             value.code = bindingsProcessor(value.code, key);
         }
     }
+    json.name = codeProcessor('dynamic-jsx-elements', parentComponent)(json.name, '');
 };
 /**
  * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.

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

@@ -4,4 +4,6 @@ declare type ReplaceArgs = {
     to: string | ((identifier: string) => string) | null;
 };
 export declare const replaceIdentifiers: ({ code, from, to }: ReplaceArgs) => string;
+export declare const replaceStateIdentifier: (to: ReplaceArgs['to']) => (code: string) => string;
+export declare const replacePropsIdentifier: (to: ReplaceArgs['to']) => (code: string) => string;
 export {};

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.replaceIdentifiers = void 0;
+exports.replacePropsIdentifier = exports.replaceStateIdentifier = 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");
@@ -141,3 +141,11 @@ var replaceIdentifiers = function (_a) {
     }
 };
 exports.replaceIdentifiers = replaceIdentifiers;
+var replaceStateIdentifier = function (to) { return function (code) {
+    return (0, exports.replaceIdentifiers)({ code: code, from: 'state', to: to });
+}; };
+exports.replaceStateIdentifier = replaceStateIdentifier;
+var replacePropsIdentifier = function (to) { return function (code) {
+    return (0, exports.replaceIdentifiers)({ code: code, from: 'props', to: to });
+}; };
+exports.replacePropsIdentifier = replacePropsIdentifier;

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

@@ -83,14 +83,14 @@ var stripStateAndPropsRefs = function (code, _options) {
     var newCode = code || '';
     var _a = __assign(__assign({}, DEFAULT_OPTIONS), _options), replaceWith = _a.replaceWith, includeProps = _a.includeProps, includeState = _a.includeState;
     if (includeProps !== false) {
-        newCode = (0, replace_identifiers_1.replaceIdentifiers)({ code: newCode, from: 'props', to: replaceWith || null });
+        newCode = (0, replace_identifiers_1.replacePropsIdentifier)(replaceWith)(newCode);
         // TODO: webcomponent edge-case
         if (/el\.this\.props/.test(newCode)) {
             newCode = newCode.replace(/el\.this\.props/g, 'el.props');
         }
     }
     if (includeState !== false) {
-        newCode = (0, replace_identifiers_1.replaceIdentifiers)({ code: newCode, from: 'state', to: replaceWith || null });
+        newCode = (0, replace_identifiers_1.replaceStateIdentifier)(replaceWith)(newCode);
     }
     return newCode;
 };