@builder.io/mitosis 0.0.115-0 → 0.0.115-2

package/dist/src/generators/alpine/generate.js

@@ -166,12 +166,12 @@ var componentToAlpine = function (_options) {
         var options = (0, merge_options_1.initializeOptions)({ target: 'alpine', component: component, defaults: _options });
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var css = (0, collect_css_1.collectCss)(json);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var componentName = (0, lodash_1.camelCase)(json.name) || 'MyComponent';
         var stateObjectString = getStateObjectString(json);
@@ -188,7 +188,7 @@ var componentToAlpine = function (_options) {
             str += "<script>\n          ".concat((0, babel_transform_1.babelTransformCode)("document.addEventListener('alpine:init', () => {\n              Alpine.data('".concat(componentName, "', () => (").concat(stateObjectString, "))\n          })")), "\n        </script>");
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             try {
@@ -208,7 +208,7 @@ var componentToAlpine = function (_options) {
             }
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };

package/dist/src/generators/angular.js

@@ -281,7 +281,7 @@ var componentToAngular = function (userOptions) {
             }),
         ], false);
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var _o = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _o[0], hasPropRef = _o[1];
         var childComponents = [];
@@ -339,7 +339,7 @@ var componentToAngular = function (userOptions) {
             return "this.".concat(isDomRef ? '' : '_').concat(refName).concat(isDomRef ? '.nativeElement' : '');
         });
         if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var css = (0, collect_css_1.collectCss)(json);
         if (options.prettier !== false) {
@@ -452,13 +452,13 @@ var componentToAngular = function (userOptions) {
             str = generateNgModule(str, json.name, componentsUsed, json, options.bootstrapMapper);
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             str = tryFormat(str, 'typescript');
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };

package/dist/src/generators/html.js

@@ -426,7 +426,7 @@ var componentToHtml = function (_options) {
         });
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         addUpdateAfterSet(json, options);
         var componentHasProps = (0, has_props_1.hasProps)(json);
@@ -434,7 +434,7 @@ var componentToHtml = function (_options) {
         var hasShow = (0, has_component_1.hasComponent)('Show', json);
         var hasTextBinding = (0, has_bindings_text_1.hasBindingsText)(json);
         if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var css = (0, collect_css_1.collectCss)(json, {
             prefix: options.prefix,
@@ -480,7 +480,7 @@ var componentToHtml = function (_options) {
                 : "\n          // Helper to render loops\n          function renderLoop(template, array, itemName, itemIndex, collectionName) {\n            const collection = [];\n            for (let [index, value] of array.entries()) {\n              const elementFragment = template.content.cloneNode(true);\n              const children = Array.from(elementFragment.childNodes)\n              const localScope = {};\n              let scope = localScope;\n              if (template?.scope) {\n                const getParent = {\n                  get(target, prop, receiver) {\n                    if (prop in target) {\n                      return target[prop];\n                    }\n                    if (prop in template.scope) {\n                      return template.scope[prop];\n                    }\n                    return target[prop];\n                  }\n                };\n                scope = new Proxy(localScope, getParent);\n              }\n              children.forEach((child) => {\n                if (itemName !== undefined) {\n                  scope[itemName] = value;\n                }\n                if (itemIndex !== undefined) {\n                  scope[itemIndex] = index;\n                }\n                if (collectionName !== undefined) {\n                  scope[collectionName] = array;\n                }\n                child.scope = scope;\n                if (template.context) {\n                  child.context = template.context;\n                }\n                this.nodesToDestroy.push(child);\n                collection.unshift(child);\n              });\n              collection.forEach(child => template.after(child));\n            }\n          }\n\n          function getScope(el, name) {\n            do {\n              let value = el?.scope?.[name]\n              if (value !== undefined) {\n                return value\n              }\n            } while ((el = el.parentNode));\n          }\n        ", "\n      })()\n      </script>\n    ");
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             try {
@@ -500,7 +500,7 @@ var componentToHtml = function (_options) {
             }
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };
@@ -521,7 +521,7 @@ var componentToCustomElement = function (_options) {
         });
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var _15 = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _15[0], hasPropRef = _15[1];
         var contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
@@ -556,7 +556,7 @@ var componentToCustomElement = function (_options) {
         var hasScope = hasLoop;
         var hasShow = (0, has_component_1.hasComponent)('Show', json);
         if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var css = '';
         if ((_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.css) {
@@ -740,7 +740,7 @@ var componentToCustomElement = function (_options) {
             ? (_14 = options === null || options === void 0 ? void 0 : options.experimental) === null || _14 === void 0 ? void 0 : _14.customElementsDefine(kebabName, component, options)
             : "customElements.define('".concat(kebabName, "', ").concat(ComponentName, ");"), "\n    ");
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             try {
@@ -760,7 +760,7 @@ var componentToCustomElement = function (_options) {
             }
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };

package/dist/src/generators/liquid.js

@@ -112,12 +112,12 @@ var componentToLiquid = function (options) {
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var css = (0, collect_css_1.collectCss)(json);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var str = json.children.map(function (item) { return blockToLiquid(item); }).join('\n');
         if (css.trim().length) {
@@ -130,7 +130,7 @@ var componentToLiquid = function (options) {
             }
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             try {
@@ -150,7 +150,7 @@ var componentToLiquid = function (options) {
             }
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };

package/dist/src/generators/lit/generate.js

@@ -119,14 +119,14 @@ var componentToLit = function (_options) {
         var options = (0, merge_options_1.initializeOptions)({ target: 'lit', component: component, defaults: _options });
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var props = (0, get_props_1.getProps)(component);
         var css = (0, collect_css_1.collectCss)(json);
         var domRefs = (0, get_refs_1.getRefs)(json);
         (0, map_refs_1.mapRefs)(component, function (refName) { return "this.".concat((0, lodash_1.camelCase)(refName)); });
         if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
@@ -197,7 +197,7 @@ var componentToLit = function (_options) {
             ? ''
             : "updated() { \n              ".concat(json.hooks.onUpdate.map(function (hook) { return processBinding(hook.code); }).join('\n\n'), " \n            }"), options.useShadowDom || !css.length ? '' : "<style>".concat(css, "</style>"), (0, indent_1.indent)(html, 8));
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             try {
@@ -211,7 +211,7 @@ var componentToLit = function (_options) {
             }
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };

package/dist/src/generators/marko/generate.js

@@ -143,7 +143,7 @@ var componentToMarko = function (userOptions) {
             defaults: __assign(__assign({}, userOptions), { component: json }),
         });
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var css = (0, collect_css_1.collectCss)(json, {
             prefix: (0, hash_sum_1.default)(json),
@@ -151,7 +151,7 @@ var componentToMarko = function (userOptions) {
         var domRefs = (0, get_refs_1.getRefs)(json);
         (0, map_refs_1.mapRefs)(json, function (refName) { return "this.".concat((0, lodash_1.camelCase)(refName)); });
         if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
@@ -224,7 +224,7 @@ var componentToMarko = function (userOptions) {
             .replace(/\n{3,}/g, '\n\n')
             .trim();
         if (options.plugins) {
-            finalStr = (0, plugins_1.runPreCodePlugins)(finalStr, options.plugins);
+            finalStr = (0, plugins_1.runPreCodePlugins)({ json: json, code: finalStr, plugins: options.plugins });
         }
         if (USE_MARKO_PRETTIER && options.prettier !== false) {
             // Commented out for now as there are strange module import issues as
@@ -235,7 +235,7 @@ var componentToMarko = function (userOptions) {
             // });
         }
         if (options.plugins) {
-            finalStr = (0, plugins_1.runPostCodePlugins)(finalStr, options.plugins);
+            finalStr = (0, plugins_1.runPostCodePlugins)({ json: json, code: finalStr, plugins: options.plugins });
         }
         return finalStr;
     };

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

@@ -83,8 +83,8 @@ var componentToQwik = function (userOptions) {
             defaults: DEFAULT_OPTIONS,
             userOptions: userOptions,
         });
-        component = (0, plugins_1.runPreJsonPlugins)(component, options.plugins);
-        component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
+        component = (0, plugins_1.runPreJsonPlugins)({ json: component, plugins: options.plugins });
+        component = (0, plugins_1.runPostJsonPlugins)({ json: component, plugins: options.plugins });
         var isTypeScript = !!options.typescript;
         var file = new src_generator_1.File(component.name + (isTypeScript ? '.ts' : '.js'), {
             isPretty: true,
@@ -105,15 +105,18 @@ var componentToQwik = function (userOptions) {
             var state_3 = (0, state_2.emitStateMethodsAndRewriteBindings)(file, component, metadata_1);
             var hasState_1 = (0, state_1.checkHasState)(component);
             var css_1 = null;
+            var emitStore_1 = function () { var _a; return 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 }); };
             var componentFn = (0, src_generator_1.arrowFnBlock)(['props'], [
                 function () {
-                    var _a;
+                    var _a, _b;
+                    if ((_a = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _a === void 0 ? void 0 : _a.setUseStoreFirst)
+                        emitStore_1();
                     css_1 = emitUseStyles(file, component);
                     emitUseComputed(file, component);
                     emitUseContext(file, component);
                     emitUseRef(file, component);
-                    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 });
+                    if (!((_b = metadata_1 === null || metadata_1 === void 0 ? void 0 : metadata_1.qwik) === null || _b === void 0 ? void 0 : _b.setUseStoreFirst))
+                        emitStore_1();
                     emitUseContextProvider(file, component);
                     emitUseClientEffect(file, component);
                     emitUseMount(file, component);
@@ -128,8 +131,16 @@ var componentToQwik = function (userOptions) {
             emitStyles(file, css_1);
             DEBUG && file.exportConst('COMPONENT', JSON.stringify(component));
             var sourceFile = file.toString();
-            sourceFile = (0, plugins_1.runPreCodePlugins)(sourceFile, options.plugins);
-            sourceFile = (0, plugins_1.runPostCodePlugins)(sourceFile, options.plugins);
+            sourceFile = (0, plugins_1.runPreCodePlugins)({
+                json: component,
+                code: sourceFile,
+                plugins: options.plugins,
+            });
+            sourceFile = (0, plugins_1.runPostCodePlugins)({
+                json: component,
+                code: sourceFile,
+                plugins: options.plugins,
+            });
             return sourceFile;
         }
         catch (e) {

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

@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToReact = exports.componentToPreact = exports.contextPropDrillingKey = void 0;
+var core_1 = require("@babel/core");
 var hash_sum_1 = __importDefault(require("hash-sum"));
 var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
@@ -34,8 +35,10 @@ var handle_missing_state_1 = require("../../helpers/handle-missing-state");
 var is_root_text_node_1 = require("../../helpers/is-root-text-node");
 var map_refs_1 = require("../../helpers/map-refs");
 var merge_options_1 = require("../../helpers/merge-options");
+var process_code_1 = require("../../helpers/plugins/process-code");
 var process_http_requests_1 = require("../../helpers/process-http-requests");
 var render_imports_1 = require("../../helpers/render-imports");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var replace_new_lines_in_strings_1 = require("../../helpers/replace-new-lines-in-strings");
 var state_1 = require("../../helpers/state");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
@@ -124,11 +127,6 @@ function getContextString(component, options) {
     }
     return str;
 }
-var DEFAULT_OPTIONS = {
-    stateType: 'useState',
-    stylesType: 'styled-jsx',
-    type: 'dom',
-};
 var componentToPreact = function (reactOptions) {
     if (reactOptions === void 0) { reactOptions = {}; }
     return (0, exports.componentToReact)(__assign(__assign({}, reactOptions), { preact: true }));
@@ -137,6 +135,7 @@ exports.componentToPreact = componentToPreact;
 var componentToReact = function (reactOptions) {
     if (reactOptions === void 0) { reactOptions = {}; }
     return function (_a) {
+        var _b, _c;
         var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
         var target = reactOptions.preact
@@ -148,6 +147,40 @@ var componentToReact = function (reactOptions) {
                     : reactOptions.rsc
                         ? 'rsc'
                         : 'react';
+        var isRsc = (_c = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.rsc) === null || _c === void 0 ? void 0 : _c.isRSC;
+        var stateType = isRsc
+            ? 'variables'
+            : reactOptions.stateType || 'useState';
+        var DEFAULT_OPTIONS = {
+            stateType: stateType,
+            stylesType: 'styled-jsx',
+            type: 'dom',
+            plugins: stateType === 'variables'
+                ? [
+                    (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType, json) { return function (code, hookType) {
+                        code = (0, replace_identifiers_1.replaceNodes)({
+                            code: code,
+                            nodeMaps: Object.entries(json.state)
+                                .filter(function (_a) {
+                                var key = _a[0], value = _a[1];
+                                return (value === null || value === void 0 ? void 0 : value.type) === 'getter';
+                            })
+                                .map(function (_a) {
+                                var key = _a[0], value = _a[1];
+                                var expr = core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier(key));
+                                return {
+                                    from: expr,
+                                    // condition: (path) => !types.isObjectMethod(path.parent),
+                                    to: core_1.types.callExpression(expr, []),
+                                };
+                            }),
+                        });
+                        code = (0, replace_identifiers_1.replaceStateIdentifier)(null)(code);
+                        return code;
+                    }; }),
+                ]
+                : [],
+        };
         var options = (0, merge_options_1.initializeOptions)({
             target: target,
             component: component,
@@ -155,14 +188,14 @@ var componentToReact = function (reactOptions) {
             userOptions: reactOptions,
         });
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var str = _componentToReact(json, options);
         str +=
             '\n\n\n' +
                 json.subComponents.map(function (item) { return _componentToReact(item, options, true); }).join('\n\n\n');
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             try {
@@ -182,7 +215,7 @@ var componentToReact = function (reactOptions) {
             }
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };
@@ -251,7 +284,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     }
     var useStateCode = options.stateType === 'useState' ? (0, state_2.getUseStateCode)(json, options) : '';
     if (options.plugins) {
-        json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+        json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
     }
     var css = options.stylesType === 'styled-jsx'
         ? (0, collect_css_1.collectCss)(json)
@@ -317,7 +350,17 @@ var _componentToReact = function (json, options, isSubComponent) {
                     : options.stateType === 'builder'
                         ? "const state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
                         : options.stateType === 'variables'
-                            ? "const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ";")
+                            ? (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+                                format: 'variables',
+                                keyPrefix: 'const',
+                                valueMapper: function (code, type, _, key) {
+                                    if (type === 'getter')
+                                        return "".concat(key, " = function ").concat(code.replace('get ', ''));
+                                    if (type === 'function')
+                                        return "".concat(key, " = function ").concat(code);
+                                    return code;
+                                },
+                            })
                             : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
         : '', hasStateArgument ? refsString : '', getContextString(json, options), (0, helpers_2.getCode)((_h = json.hooks.init) === null || _h === void 0 ? void 0 : _h.code, options), contextStr || '', ((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code)
         ? "\n        useEffect(() => {\n          ".concat((0, state_2.processHookCode)({

package/dist/src/generators/rsc.js

@@ -1,12 +1,21 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToRsc = void 0;
 var traverse_1 = __importDefault(require("traverse"));
-var bindings_1 = require("../helpers/bindings");
-var fast_clone_1 = require("../helpers/fast-clone");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var merge_options_1 = require("../helpers/merge-options");
 var react_1 = require("./react");
@@ -35,43 +44,40 @@ var RSC_TRANSFORM_PLUGIN = function () { return ({
             (0, traverse_1.default)(json).forEach(function (node) {
                 if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
                     var isComponent = node.name.match(/[A-Z]/);
-                    if (isComponent) {
-                        // Drill context down, aka
-                        // function (props) { return <Component _context{props._context} /> }
-                        if (!node.bindings[react_1.contextPropDrillingKey]) {
-                            node.bindings[react_1.contextPropDrillingKey] = (0, bindings_1.createSingleBinding)({
-                                code: react_1.contextPropDrillingKey,
-                            });
-                        }
-                    }
+                    // if (isComponent) {
+                    //   // Drill context down, aka
+                    //   // function (props) { return <Component _context{props._context} /> }
+                    //   if (!node.bindings[contextPropDrillingKey]) {
+                    //     node.bindings[contextPropDrillingKey] = createSingleBinding({
+                    //       code: contextPropDrillingKey,
+                    //     });
+                    //   }
+                    // }
                     if (node.bindings.ref) {
                         delete node.bindings.ref;
                     }
-                    for (var key in node.bindings) {
-                        if (key.match(/^on[A-Z]/)) {
-                            delete node.bindings[key];
-                        }
-                    }
+                    // for (const key in node.bindings) {
+                    //   if (key.match(/^on[A-Z]/)) {
+                    //     delete node.bindings[key];
+                    //   }
+                    // }
                 }
             });
         },
     },
 }); };
-var DEFAULT_OPTIONS = {
+var RscOptions = {
     plugins: [RSC_TRANSFORM_PLUGIN],
+    stateType: 'variables',
 };
 var componentToRsc = function (_options) {
     if (_options === void 0) { _options = {}; }
     return function (_a) {
+        var _b, _c;
         var component = _a.component, path = _a.path;
-        var json = (0, fast_clone_1.fastClone)(component);
-        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options, {
-            stylesType: 'style-tag',
-            stateType: 'variables',
-            contextType: 'prop-drill',
-            rsc: true,
-        });
-        return (0, react_1.componentToReact)(options)({ component: json, path: path });
+        var isRSC = (_c = (_b = component.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.rsc) === null || _c === void 0 ? void 0 : _c.isRSC;
+        var options = (0, merge_options_1.mergeOptions)(__assign({ rsc: true }, (isRSC ? RscOptions : {})), _options);
+        return (0, react_1.componentToReact)(options)({ component: component, path: path });
     };
 };
 exports.componentToRsc = componentToRsc;

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

@@ -158,7 +158,7 @@ var componentToSolid = function (passedOptions) {
             }),
         ], false);
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         addProviderComponents(json, options);
         var componentHasStyles = (0, helpers_1.hasCss)(json);
@@ -171,7 +171,7 @@ var componentToSolid = function (passedOptions) {
         // 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) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var css = options.stylesType === 'style-tag' && (0, collect_css_1.collectCss)(json, { prefix: (0, hash_sum_1.default)(json) });
@@ -211,7 +211,7 @@ var componentToSolid = function (passedOptions) {
                 "<style jsx>{`".concat(css, "`}</style>")
             : '', shouldInjectCustomStyles ? "<style>{`".concat(json.style, "`}</style>") : '', addWrapper ? '</>' : '', json.name);
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             str = (0, standalone_1.format)(str, {
@@ -220,7 +220,7 @@ var componentToSolid = function (passedOptions) {
             });
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };

package/dist/src/generators/stencil/generate.js

@@ -95,13 +95,13 @@ var componentToStencil = function (_options) {
         var options = (0, merge_options_1.initializeOptions)({ target: 'stencil', component: component, defaults: _options });
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         }
         var props = (0, get_props_1.getProps)(component);
         var css = (0, collect_css_1.collectCss)(json);
         (0, map_refs_1.mapRefs)(component, function (refName) { return "this.".concat(refName); });
         if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
@@ -163,7 +163,7 @@ var componentToStencil = function (_options) {
             ? ''
             : json.hooks.onUpdate.map(function (hook) { return "componentDidUpdate() { ".concat(processBinding(hook.code), " }"); }), wrap ? '<>' : '', json.children.map(function (item) { return blockToStencil(item, options); }).join('\n'), wrap ? '</>' : '');
         if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         if (options.prettier !== false) {
             str = (0, standalone_1.format)(str, {
@@ -172,7 +172,7 @@ var componentToStencil = function (_options) {
             });
         }
         if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         }
         return str;
     };

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

@@ -162,7 +162,7 @@ var componentToSvelte = function (userProvidedOptions) {
         ], false);
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
-        json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+        json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
         useBindValue(json, options);
         (0, getters_to_functions_1.gettersToFunctions)(json);
         var filteredProps = Array.from((0, get_props_1.getProps)(json))
@@ -174,7 +174,7 @@ var componentToSvelte = function (userProvidedOptions) {
         var refs = Array.from((0, get_refs_1.getRefs)(json))
             .map((0, helpers_2.stripStateAndProps)({ json: json, options: options }))
             .filter(function (x) { return !props.includes(x); });
-        json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+        json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
         var css = (0, collect_css_1.collectCss)(json);
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         var usesWritable = false;
@@ -289,7 +289,7 @@ var componentToSvelte = function (userProvidedOptions) {
             .join('\n'), !css.trim().length
             ? ''
             : "<style>\n      ".concat(css, "\n    </style>"));
-        str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
         if (options.prettier !== false) {
             try {
                 str = (0, standalone_1.format)(str, {
@@ -310,7 +310,7 @@ var componentToSvelte = function (userProvidedOptions) {
             }
         }
         str = str.replace(/<script>\n<\/script>/g, '').trim();
-        str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
         return str;
     };
 };