@builder.io/mitosis 0.0.71 → 0.0.72-1

package/dist/src/generators/angular.d.ts

@@ -3,6 +3,7 @@ import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler'
 export interface ToAngularOptions extends BaseTranspilerOptions {
     standalone?: boolean;
     preserveImports?: boolean;
+    preserveFileExtensions?: boolean;
 }
 interface AngularBlockOptions {
     contextVars?: string[];

package/dist/src/generators/angular.js

@@ -220,6 +220,7 @@ var componentToAngular = function (userOptions) {
         var _component = _a.component;
         var DEFAULT_OPTIONS = {
             preserveImports: false,
+            preserveFileExtensions: false,
         };
         var options = __assign(__assign({}, DEFAULT_OPTIONS), userOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain
@@ -337,6 +338,7 @@ var componentToAngular = function (userOptions) {
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone && !options.preserveImports,
+            preserveFileExtensions: options.preserveFileExtensions,
         }), Object.entries(componentMetadata)
             .map(function (_a) {
             var k = _a[0], v = _a[1];

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

@@ -0,0 +1,12 @@
+import { MitosisContext } from '../../types/mitosis-context';
+declare type ContextToRscOptions = {
+    format?: boolean;
+};
+/**
+ * React Server Components currently do not support context, so we use
+ * plain objects and prop drilling instead.
+ */
+export declare const contextToRsc: (options?: ContextToRscOptions) => ({ context }: {
+    context: MitosisContext;
+}) => string;
+export {};

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contextToRsc = void 0;
+var standalone_1 = require("prettier/standalone");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+/**
+ * React Server Components currently do not support context, so we use
+ * plain objects and prop drilling instead.
+ */
+var contextToRsc = function (options) {
+    if (options === void 0) { options = {}; }
+    return function (_a) {
+        var context = _a.context;
+        var str = "\n    export default ".concat((0, get_state_object_string_1.stringifyContextValue)(context.value), "\n    ");
+        if (options.format !== 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.contextToRsc = contextToRsc;

package/dist/src/generators/react/generator.d.ts

@@ -1,6 +1,7 @@
 import { TranspilerGenerator } from '../../types/transpiler';
 import { MitosisNode } from '../../types/mitosis-node';
 import { ToReactOptions } from './types';
+export declare const contextPropDrillingKey = "_context";
 export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, parentSlots?: any[]) => string;
 export declare const componentToPreact: TranspilerGenerator<ToReactOptions>;
 export declare const componentToReact: TranspilerGenerator<ToReactOptions>;

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

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentToReact = exports.componentToPreact = exports.blockToReact = void 0;
+exports.componentToReact = exports.componentToPreact = exports.blockToReact = exports.contextPropDrillingKey = void 0;
 var dedent_1 = __importDefault(require("dedent"));
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
@@ -50,6 +50,7 @@ var state_2 = require("./state");
 var helpers_2 = require("./helpers");
 var hash_sum_1 = __importDefault(require("hash-sum"));
 var for_1 = require("../../helpers/nodes/for");
+exports.contextPropDrillingKey = '_context';
 var openFrag = function (options) { return getFragment('open', options); };
 var closeFrag = function (options) { return getFragment('close', options); };
 function getFragment(type, options) {
@@ -251,37 +252,55 @@ var getRefsString = function (json, refs, options) {
     }
     return [hasStateArgument, code];
 };
-function addProviderComponents(json, options) {
-    for (var key in json.context.set) {
-        var _a = json.context.set[key], name_1 = _a.name, ref = _a.ref, value = _a.value;
-        if (value) {
-            json.children = [
-                (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: "".concat(name_1, ".Provider"), children: json.children }, (value && {
-                    bindings: {
-                        value: {
-                            code: (0, get_state_object_string_1.stringifyContextValue)(value),
-                        },
-                    },
-                }))),
-            ];
+function provideContext(json, options) {
+    if (options.contextType === 'prop-drill') {
+        var str = '';
+        for (var key in json.context.set) {
+            var _a = json.context.set[key], name_1 = _a.name, ref = _a.ref, value = _a.value;
+            if (value) {
+                str += "\n          ".concat(exports.contextPropDrillingKey, ".").concat(name_1, " = {\n            ...").concat(exports.contextPropDrillingKey, ".").concat(name_1, ",\n            ...").concat((0, get_state_object_string_1.stringifyContextValue)(value), "\n          }\n        ");
+            }
+            // TODO: support refs. I'm not sure what those are so unclear how to support them
         }
-        else if (ref) {
-            json.children = [
-                (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: 'Context.Provider', children: json.children }, (ref && {
-                    bindings: {
-                        value: {
-                            code: ref,
+        return str;
+    }
+    else {
+        for (var key in json.context.set) {
+            var _b = json.context.set[key], name_2 = _b.name, ref = _b.ref, value = _b.value;
+            if (value) {
+                json.children = [
+                    (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: "".concat(name_2, ".Provider"), children: json.children }, (value && {
+                        bindings: {
+                            value: {
+                                code: (0, get_state_object_string_1.stringifyContextValue)(value),
+                            },
+                        },
+                    }))),
+                ];
+            }
+            else if (ref) {
+                json.children = [
+                    (0, create_mitosis_node_1.createMitosisNode)(__assign({ name: 'Context.Provider', children: json.children }, (ref && {
+                        bindings: {
+                            value: {
+                                code: ref,
+                            },
                         },
-                    },
-                }))),
-            ];
+                    }))),
+                ];
+            }
         }
     }
 }
 function getContextString(component, options) {
     var str = '';
     for (var key in component.context.get) {
-        str += "\n      const ".concat(key, " = useContext(").concat(component.context.get[key].name, ");\n    ");
+        if (options.contextType === 'prop-drill') {
+            str += "\n        const ".concat(key, " = ").concat(exports.contextPropDrillingKey, "['").concat(component.context.get[key].name, "'];\n      ");
+        }
+        else {
+            str += "\n        const ".concat(key, " = useContext(").concat(component.context.get[key].name, ");\n      ");
+        }
     }
     return str;
 }
@@ -344,7 +363,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     (0, process_http_requests_1.processHttpRequests)(json);
     (0, handle_missing_state_1.handleMissingState)(json);
     (0, process_tag_references_1.processTagReferences)(json);
-    addProviderComponents(json, options);
+    var contextStr = provideContext(json, options);
     var componentHasStyles = (0, helpers_1.hasCss)(json);
     if (options.stateType === 'useState') {
         (0, getters_to_functions_1.gettersToFunctions)(json);
@@ -388,7 +407,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     if (useStateCode && useStateCode.includes('useState')) {
         reactLibImports.add('useState');
     }
-    if ((0, context_1.hasContext)(json)) {
+    if ((0, context_1.hasContext)(json) && options.contextType !== 'prop-drill') {
         reactLibImports.add('useContext');
     }
     if (allRefs.length) {
@@ -409,7 +428,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     var _o = getRefsString(json, allRefs, options), hasStateArgument = _o[0], refsString = _o[1];
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
     var propsArgs = "props: ".concat(json.propsTypeRef || 'any');
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), options.preact
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), options.preact
         ? "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    "
         : options.type !== 'native'
             ? "import * as React from 'react';"
@@ -422,7 +441,9 @@ var _componentToReact = function (json, options, isSubComponent) {
         : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
         component: json,
         target: options.type === 'native' ? 'reactNative' : 'react',
-    }), isSubComponent ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', hasStateArgument ? '' : refsString, hasState
+    }), isSubComponent ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', options.contextType === 'prop-drill'
+        ? "const ".concat(exports.contextPropDrillingKey, " = { ...props['").concat(exports.contextPropDrillingKey, "'] };")
+        : '', hasStateArgument ? '' : refsString, hasState
         ? stateType === 'mobx'
             ? "const state = useLocalObservable(() => (".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), "));")
             : stateType === 'useState'
@@ -430,9 +451,11 @@ var _componentToReact = function (json, options, isSubComponent) {
                 : stateType === 'solid'
                     ? "const state = useMutable(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
                     : stateType === 'builder'
-                        ? "var state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-                        : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-        : '', hasStateArgument ? refsString : '', getContextString(json, options), getInitCode(json, options), ((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
+                        ? "const state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
+                        : stateType === 'variables'
+                            ? "const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ";")
+                            : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
+        : '', hasStateArgument ? refsString : '', getContextString(json, options), getInitCode(json, options), contextStr || '', ((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
         ? "\n          useEffect(() => {\n            ".concat((0, state_2.processHookCode)({
             str: json.hooks.onInit.code,
             options: options,

package/dist/src/generators/react/types.d.ts

@@ -1,10 +1,15 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToReactOptions extends BaseTranspilerOptions {
     stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
-    stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
+    stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
     format?: 'lite' | 'safe';
     type?: 'dom' | 'native';
     preact?: boolean;
     forwardRef?: string;
     experimental?: any;
+    /**
+     * For RSC, normal React context is currently not supported, so provide a prop drilling
+     * option
+     */
+    contextType?: 'context' | 'prop-drill';
 }

package/dist/src/generators/rsc.d.ts

@@ -0,0 +1,4 @@
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
+export interface ToRscOptions extends BaseTranspilerOptions {
+}
+export declare const componentToRsc: TranspilerGenerator<ToRscOptions>;

package/dist/src/generators/rsc.js

@@ -0,0 +1,90 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToRsc = void 0;
+var traverse_1 = __importDefault(require("traverse"));
+var fast_clone_1 = require("../helpers/fast-clone");
+var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+var is_upper_case_1 = require("../helpers/is-upper-case");
+var react_1 = require("./react");
+/**
+ * Transform react to be RSC compatible, such as
+ * - remove event listeners
+ * - remove lifecycle hooks
+ * - remove refs
+ * - transform context to prop drilling
+ */
+var RSC_TRANSFORM_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            if (json.hooks.onMount) {
+                delete json.hooks.onMount;
+            }
+            if (json.hooks.onUnMount) {
+                delete json.hooks.onUnMount;
+            }
+            if (json.hooks.onUpdate) {
+                delete json.hooks.onUpdate;
+            }
+            if (json.refs) {
+                json.refs = {};
+            }
+            (0, traverse_1.default)(json).forEach(function (node) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    if ((0, is_upper_case_1.isUpperCase)(node.name[0])) {
+                        // Drill context down, aka
+                        // function (props) { return <Component _context{props._context} /> }
+                        if (!node.bindings[react_1.contextPropDrillingKey]) {
+                            node.bindings[react_1.contextPropDrillingKey] = {
+                                code: react_1.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];
+                        }
+                    }
+                }
+            });
+        },
+    },
+}); };
+var DEFAULT_OPTIONS = {
+    plugins: [RSC_TRANSFORM_PLUGIN],
+};
+var componentToRsc = function (_options) {
+    if (_options === void 0) { _options = {}; }
+    return function (_a) {
+        var component = _a.component, path = _a.path;
+        var json = (0, fast_clone_1.fastClone)(component);
+        var options = __assign(__assign(__assign({}, DEFAULT_OPTIONS), _options), { plugins: __spreadArray(__spreadArray([], (DEFAULT_OPTIONS.plugins || []), true), (_options.plugins || []), true), stylesType: 'style-tag', stateType: 'variables', contextType: 'prop-drill' });
+        return (0, react_1.componentToReact)(options)({ component: json, path: path });
+    };
+};
+exports.componentToRsc = componentToRsc;

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

@@ -0,0 +1,8 @@
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToVueOptions } from './types';
+declare type BlockRenderer = (json: MitosisNode, options: ToVueOptions, scope?: Scope) => string;
+interface Scope {
+    isRootNode?: boolean;
+}
+export declare const blockToVue: BlockRenderer;
+export {};