@builder.io/mitosis 0.9.5 → 0.10.0

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

@@ -541,6 +541,15 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
     for (const key in json.slots) {
         componentOptions[key] = json.slots[key].map((node) => (0, exports.blockToBuilder)(node, options));
     }
+    for (const key in json.blocksSlots) {
+        const value = json.blocksSlots[key];
+        (0, legacy_1.default)(value).forEach(function (v) {
+            if ((0, is_mitosis_node_1.isMitosisNode)(v)) {
+                this.update((0, exports.blockToBuilder)(v, options, _internalOptions));
+            }
+        });
+        componentOptions[key] = value;
+    }
     const hasCss = !!((_l = bindings.css) === null || _l === void 0 ? void 0 : _l.code);
     let responsiveStyles = {
         large: {},

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

@@ -20,6 +20,7 @@ const state_1 = require("../../helpers/state");
 const plugins_1 = require("../../modules/plugins");
 const mitosis_node_1 = require("../../types/mitosis-node");
 const json5_1 = __importDefault(require("json5"));
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
 const standalone_1 = require("prettier/standalone");
 const react_1 = require("../react");
 exports.DEFAULT_FORMAT = 'legacy';
@@ -197,6 +198,15 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
         }
         str += `}`;
     }
+    for (const key in json.blocksSlots) {
+        const value = json.blocksSlots[key];
+        (0, legacy_1.default)(value).forEach(function (v) {
+            if ((0, is_mitosis_node_1.isMitosisNode)(v)) {
+                this.update((0, exports.blockToMitosis)(v, toMitosisOptions, component, insideJsx));
+            }
+        });
+        str += `${key}={${generateBlockSlotsCode(value)}}`;
+    }
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }
@@ -213,6 +223,27 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
     return str;
 };
 exports.blockToMitosis = blockToMitosis;
+const generateBlockSlotsCode = (blockSlot) => {
+    let code = '';
+    // generate array props (foo=[...])
+    if (Array.isArray(blockSlot)) {
+        code += `[${blockSlot.map(generateBlockSlotsCode).join(',')}]`;
+        // generate object props (foo={{ ... }})
+    }
+    else if (typeof blockSlot === 'object' && blockSlot !== null) {
+        code += '{';
+        for (const key in blockSlot) {
+            if (blockSlot.hasOwnProperty(key)) {
+                code += `${key}: ${generateBlockSlotsCode(blockSlot[key])},`;
+            }
+        }
+        code += '}';
+    }
+    else {
+        code += blockSlot;
+    }
+    return code;
+};
 const getRefsString = (json, refs = Array.from((0, get_refs_1.getRefs)(json))) => {
     var _a, _b;
     let str = '';

package/dist/src/parsers/builder/builder.d.ts

@@ -19,6 +19,13 @@ type BuilderToMitosisOptions = {
      * Defaults to `false`.
      */
     escapeInvalidCode?: boolean;
+    /**
+     * When `true`, the `blocksSlots` field on Mitosis Nodes will be used to transform
+     * deeply nested Builder elements found in component options. Note that not every
+     * generator supports parsing `blocksSlots`.
+     * Defaults to `false`.
+     */
+    enableBlocksSlots?: boolean;
 };
 export declare const builderElementToMitosisNode: (block: BuilderElement, options: BuilderToMitosisOptions, _internalOptions?: InternalOptions) => MitosisNode;
 export declare const getMetaFromBlock: (block: BuilderElement, options: BuilderToMitosisOptions) => {};

package/dist/src/parsers/builder/builder.js

@@ -584,7 +584,7 @@ const componentMappers = {
     },
 };
 const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     const { includeSpecialBindings = true } = options;
     const localizedValues = {};
     if (((_a = block.component) === null || _a === void 0 ? void 0 : _a.name) === 'Core:Fragment') {
@@ -675,6 +675,7 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
     const bindings = {};
     const children = [];
     const slots = {};
+    const blocksSlots = {};
     if (blockBindings) {
         for (const key in blockBindings) {
             if (key === 'css') {
@@ -772,6 +773,35 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
                     .map(transformBldrElementToMitosisNode);
                 slots[key] = childrenElements;
             }
+            else if (options.enableBlocksSlots &&
+                !componentMappers[(_p = block.component) === null || _p === void 0 ? void 0 : _p.name] &&
+                (Array.isArray(value) || (typeof value === 'object' && value !== null))) {
+                /**
+                 * Builder Elements that have their own mappers should not use blocksSlots
+                 * even if the mapper is disabled via _internalOptions as it will cause
+                 * problems when trying to use the mapper in the future.
+                 */
+                const data = Array.isArray(value) ? [...value] : { ...value };
+                let hasElement = false;
+                (0, legacy_1.default)(data).forEach(function (d) {
+                    if ((0, exports.isBuilderElement)(d)) {
+                        /**
+                         * Replacing the Builder element with a Mitosis node in-place
+                         * allows us to assign to blockSlots while preserving the structure
+                         * of this deeply nested data.
+                         */
+                        this.update((0, exports.builderElementToMitosisNode)(d, options, _internalOptions));
+                        hasElement = true;
+                    }
+                });
+                // If no elements were updated then this is just a regular binding
+                if (hasElement) {
+                    blocksSlots[key] = data;
+                }
+                else {
+                    bindings[key] = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(value) });
+                }
+            }
             else {
                 bindings[key] = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(value) });
             }
@@ -788,7 +818,7 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
         }
     }
     const node = (0, create_mitosis_node_1.createMitosisNode)({
-        name: ((_q = (_p = block.component) === null || _p === void 0 ? void 0 : _p.name) === null || _q === void 0 ? void 0 : _q.replace(/[^a-z0-9]/gi, '')) ||
+        name: ((_r = (_q = block.component) === null || _q === void 0 ? void 0 : _q.name) === null || _r === void 0 ? void 0 : _r.replace(/[^a-z0-9]/gi, '')) ||
             block.tagName ||
             (block.linkUrl ? 'a' : 'div'),
         properties: {
@@ -810,17 +840,18 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
         slots: {
             ...slots,
         },
+        ...(Object.keys(blocksSlots).length > 0 && { blocksSlots }),
         meta: (0, exports.getMetaFromBlock)(block, options),
         ...(Object.keys(localizedValues).length && { localizedValues }),
     });
     // Has single text node child
-    const firstChild = (_r = block.children) === null || _r === void 0 ? void 0 : _r[0];
-    if (((_s = block.children) === null || _s === void 0 ? void 0 : _s.length) === 1 &&
-        ((_t = firstChild === null || firstChild === void 0 ? void 0 : firstChild.component) === null || _t === void 0 ? void 0 : _t.name) === 'Text' &&
+    const firstChild = (_s = block.children) === null || _s === void 0 ? void 0 : _s[0];
+    if (((_t = block.children) === null || _t === void 0 ? void 0 : _t.length) === 1 &&
+        ((_u = firstChild === null || firstChild === void 0 ? void 0 : firstChild.component) === null || _u === void 0 ? void 0 : _u.name) === 'Text' &&
         !options.preserveTextBlocks) {
         const textProperties = (0, exports.builderElementToMitosisNode)(firstChild, options);
-        const parsedNodeCss = json5_1.default.parse(((_u = node.bindings.css) === null || _u === void 0 ? void 0 : _u.code) || '{}');
-        const parsedTextCss = json5_1.default.parse(((_v = textProperties.bindings.css) === null || _v === void 0 ? void 0 : _v.code) || '{}');
+        const parsedNodeCss = json5_1.default.parse(((_v = node.bindings.css) === null || _v === void 0 ? void 0 : _v.code) || '{}');
+        const parsedTextCss = json5_1.default.parse(((_w = textProperties.bindings.css) === null || _w === void 0 ? void 0 : _w.code) || '{}');
         const mergedCss = combineStyles(parsedNodeCss, parsedTextCss);
         // Don't merge if text has styling that matters
         const doNotMerge = 

package/dist/src/parsers/jsx/element-parser.d.ts

@@ -1,8 +1,9 @@
 import * as babel from '@babel/core';
 import { MitosisNode } from '../../types/mitosis-node';
+import type { ParseMitosisOptions } from './types';
 declare const types: typeof babel.types;
 /**
  * Parses a JSX element into a MitosisNode.
  */
-export declare const jsxElementToJson: (node: babel.types.Expression | babel.types.JSX) => MitosisNode | null;
+export declare const jsxElementToJson: (node: babel.types.Expression | babel.types.JSX, options: Partial<ParseMitosisOptions>) => MitosisNode | null;
 export {};

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

@@ -30,6 +30,7 @@ exports.jsxElementToJson = void 0;
 const babel = __importStar(require("@babel/core"));
 const generator_1 = __importDefault(require("@babel/generator"));
 const function_1 = require("fp-ts/lib/function");
+const json5_1 = __importDefault(require("json5"));
 const bindings_1 = require("../../helpers/bindings");
 const create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
 const nullable_1 = require("../../helpers/nullable");
@@ -65,7 +66,7 @@ const getForArguments = (params) => {
 /**
  * Parses a JSX element into a MitosisNode.
  */
-const jsxElementToJson = (node) => {
+const jsxElementToJson = (node, options) => {
     var _a;
     if (types.isJSXText(node)) {
         const value = typeof ((_a = node.extra) === null || _a === void 0 ? void 0 : _a.raw) === 'string' ? node.extra.raw : node.value;
@@ -79,7 +80,7 @@ const jsxElementToJson = (node) => {
         return null;
     }
     if (types.isJSXExpressionContainer(node)) {
-        return (0, exports.jsxElementToJson)(node.expression);
+        return (0, exports.jsxElementToJson)(node.expression, options);
     }
     if ((types.isCallExpression(node) || types.isOptionalCallExpression(node)) &&
         (node.callee.type === 'MemberExpression' || node.callee.type === 'OptionalMemberExpression')) {
@@ -103,7 +104,7 @@ const jsxElementToJson = (node) => {
                         }),
                     },
                     scope: forArguments,
-                    children: [(0, exports.jsxElementToJson)(bodyExpression)].filter(nullable_1.checkIsDefined),
+                    children: [(0, exports.jsxElementToJson)(bodyExpression, options)].filter(nullable_1.checkIsDefined),
                 });
             }
         }
@@ -127,7 +128,7 @@ const jsxElementToJson = (node) => {
                         }),
                     },
                     scope: forArguments,
-                    children: [(0, exports.jsxElementToJson)(bodyExpression)],
+                    children: [(0, exports.jsxElementToJson)(bodyExpression, options)],
                 });
             }
         }
@@ -144,7 +145,7 @@ const jsxElementToJson = (node) => {
                         }).code,
                     }),
                 },
-                children: [(0, exports.jsxElementToJson)(node.right)].filter(nullable_1.checkIsDefined),
+                children: [(0, exports.jsxElementToJson)(node.right, options)].filter(nullable_1.checkIsDefined),
             });
         }
         else {
@@ -153,8 +154,8 @@ const jsxElementToJson = (node) => {
     }
     else if (types.isConditionalExpression(node)) {
         // {foo ? <div /> : <span />} -> <Show when={foo} else={<span />}>...</Show>
-        const child = (0, exports.jsxElementToJson)(node.consequent);
-        const elseCase = (0, exports.jsxElementToJson)(node.alternate);
+        const child = (0, exports.jsxElementToJson)(node.consequent, options);
+        const elseCase = (0, exports.jsxElementToJson)(node.alternate, options);
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Show',
             meta: {
@@ -169,7 +170,9 @@ const jsxElementToJson = (node) => {
     else if (types.isJSXFragment(node)) {
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Fragment',
-            children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
+            children: node.children
+                .map((child) => (0, exports.jsxElementToJson)(child, options))
+                .filter(nullable_1.checkIsDefined),
         });
     }
     else if (types.isJSXSpreadChild(node)) {
@@ -209,7 +212,7 @@ const jsxElementToJson = (node) => {
             : undefined;
         const elseValue = elseAttr &&
             types.isJSXExpressionContainer(elseAttr.value) &&
-            (0, exports.jsxElementToJson)(elseAttr.value.expression);
+            (0, exports.jsxElementToJson)(elseAttr.value.expression, options);
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Show',
             meta: {
@@ -218,7 +221,9 @@ const jsxElementToJson = (node) => {
             bindings: {
                 ...(whenValue ? { when: (0, bindings_1.createSingleBinding)({ code: whenValue }) } : {}),
             },
-            children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
+            children: node.children
+                .map((child) => (0, exports.jsxElementToJson)(child, options))
+                .filter(nullable_1.checkIsDefined),
         });
     }
     // <For ...> control flow component
@@ -245,7 +250,7 @@ const jsxElementToJson = (node) => {
                         }),
                     },
                     scope: forArguments,
-                    children: [(0, exports.jsxElementToJson)(childExpression.body)],
+                    children: [(0, exports.jsxElementToJson)(childExpression.body, options)],
                 });
             }
         }
@@ -253,7 +258,7 @@ const jsxElementToJson = (node) => {
     // const properties: MitosisNode['properties'] = {}
     // const bindings: MitosisNode['bindings'] = {}
     // const slots: MitosisNode['slots'] = {}
-    const { bindings, properties, slots } = node.openingElement.attributes.reduce((memo, item) => {
+    const { bindings, properties, slots, blocksSlots } = node.openingElement.attributes.reduce((memo, item) => {
         if (types.isJSXAttribute(item)) {
             const key = (0, helpers_1.transformAttributeName)(item.name.name);
             const value = item.value;
@@ -296,7 +301,7 @@ const jsxElementToJson = (node) => {
             else if (types.isJSXElement(expression) || types.isJSXFragment(expression)) {
                 // <Foo myProp={<MoreMitosisNode><div /></MoreMitosisNode>} />
                 // <Foo myProp={<><Node /><Node /></>} />
-                const slotNode = (0, exports.jsxElementToJson)(expression);
+                const slotNode = (0, exports.jsxElementToJson)(expression, options);
                 if (!slotNode)
                     return memo;
                 memo.slots[key] = [slotNode];
@@ -306,6 +311,77 @@ const jsxElementToJson = (node) => {
                 });
             }
             else {
+                if (options.enableBlocksSlots &&
+                    (types.isArrayExpression(expression) || types.isObjectExpression(expression))) {
+                    /**
+                     * Find any deeply nested JSX Elements, convert them to Mitosis nodes
+                     * then store them in "replacements" to later do a string substitution
+                     * to swap out the stringified JSX with stringified Mitosis nodes.
+                     *
+                     * Object expressions need to wrapped in an expression statement (e.g. `({... })`)
+                     * otherwise Babel generate will fail.
+                     */
+                    const code = types.isObjectExpression(expression)
+                        ? (0, generator_1.default)(types.expressionStatement(expression)).code
+                        : (0, generator_1.default)(expression).code;
+                    const replacements = [];
+                    (0, helpers_1.babelDefaultTransform)(code, {
+                        JSXElement(path) {
+                            const { start, end } = path.node;
+                            if (start == null || end == null) {
+                                return;
+                            }
+                            const node = (0, exports.jsxElementToJson)(path.node, options);
+                            if (!node)
+                                return;
+                            /**
+                             * Perform replacements in the reverse order in which we saw them
+                             * otherwise start/end indices will quickly become incorrect.
+                             */
+                            replacements.unshift({
+                                start,
+                                end,
+                                node,
+                            });
+                            /**
+                             * babelTransform will keep iterating into deeper nodes. However,
+                             * the "jsxElementToJson" call above will handle deeper nodes.
+                             * Replace the path will null so we do not accidentally process
+                             * child nodes multiple times.
+                             */
+                            path.replaceWith(types.nullLiteral());
+                        },
+                    });
+                    // If no replacements then this is just a regular binding
+                    if (replacements.length > 0) {
+                        // Replace stringified JSX (e.g. <Foo></Foo>) with stringified Mitosis JSON
+                        let replacedCode = code;
+                        replacements.forEach(({ start, end, node }) => {
+                            replacedCode =
+                                replacedCode.substring(0, start) +
+                                    JSON.stringify(node) +
+                                    replacedCode.substring(end);
+                        });
+                        let finalCode = replacedCode;
+                        if (types.isObjectExpression(expression)) {
+                            /**
+                             * Remove the ( and ); surrounding the expression because we just want
+                             * a valid JS object instead.
+                             */
+                            const match = replacedCode.match(/\(([\s\S]*?)\);/);
+                            if (match) {
+                                finalCode = match[1];
+                            }
+                        }
+                        /**
+                         * The result should be a valid array of objects. Use json5 to parse
+                         * as not every key will be wrapped in quotes, so a normal JSON.parse
+                         * will fail.
+                         */
+                        memo.blocksSlots[key] = json5_1.default.parse(finalCode);
+                        return memo;
+                    }
+                }
                 memo.bindings[key] = (0, bindings_1.createSingleBinding)({
                     code: (0, generator_1.default)(expression, { compact: true }).code,
                 });
@@ -328,13 +404,15 @@ const jsxElementToJson = (node) => {
         bindings: {},
         properties: {},
         slots: {},
+        blocksSlots: {},
     });
     return (0, create_mitosis_node_1.createMitosisNode)({
         name: nodeName,
         properties,
         bindings,
-        children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
+        children: node.children.map((child) => (0, exports.jsxElementToJson)(child, options)).filter(nullable_1.checkIsDefined),
         slots: Object.keys(slots).length > 0 ? slots : undefined,
+        blocksSlots: Object.keys(blocksSlots).length > 0 ? blocksSlots : undefined,
     });
 };
 exports.jsxElementToJson = jsxElementToJson;

package/dist/src/parsers/jsx/function-parser.d.ts

@@ -1,9 +1,9 @@
 import * as babel from '@babel/core';
 import { JSONOrNode } from '../../types/json';
-import { Context } from './types';
+import type { Context, ParseMitosisOptions } from './types';
 declare const types: typeof babel.types;
 /**
  * Parses function declarations within the Mitosis copmonent's body to JSON
  */
-export declare const componentFunctionToJson: (node: babel.types.FunctionDeclaration, context: Context, stateToScope: string[]) => JSONOrNode;
+export declare const componentFunctionToJson: (node: babel.types.FunctionDeclaration, context: Context, stateToScope: string[], options: Partial<ParseMitosisOptions>) => JSONOrNode;
 export {};

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

@@ -44,7 +44,7 @@ const { types } = babel;
 /**
  * Parses function declarations within the Mitosis copmonent's body to JSON
  */
-const componentFunctionToJson = (node, context, stateToScope) => {
+const componentFunctionToJson = (node, context, stateToScope, options) => {
     var _a;
     const hooks = {
         onMount: [],
@@ -327,7 +327,7 @@ const componentFunctionToJson = (node, context, stateToScope) => {
     if (theReturn) {
         const value = theReturn.argument;
         if (types.isJSXElement(value) || types.isJSXFragment(value)) {
-            const jsxElement = (0, element_parser_1.jsxElementToJson)(value);
+            const jsxElement = (0, element_parser_1.jsxElementToJson)(value, options);
             if (jsxElement) {
                 children.push(jsxElement);
             }

package/dist/src/parsers/jsx/jsx.js

@@ -130,7 +130,7 @@ function parseJsx(jsx, _options = {}) {
                             };
                         },
                     });
-                    path.replaceWith((0, ast_1.jsonToAst)((0, function_parser_1.componentFunctionToJson)(node, context, stateToScope)));
+                    path.replaceWith((0, ast_1.jsonToAst)((0, function_parser_1.componentFunctionToJson)(node, context, stateToScope, options)));
                 }
             }
         },
@@ -142,7 +142,7 @@ function parseJsx(jsx, _options = {}) {
         },
         JSXElement(path) {
             const { node } = path;
-            path.replaceWith((0, ast_1.jsonToAst)((0, element_parser_1.jsxElementToJson)(node)));
+            path.replaceWith((0, ast_1.jsonToAst)((0, element_parser_1.jsxElementToJson)(node, _options)));
         },
         ExportNamedDeclaration(path, context) {
             const { node } = path;

package/dist/src/parsers/jsx/types.d.ts

@@ -8,6 +8,13 @@ export type ParseMitosisOptions = {
         project: Project;
     };
     filePath?: string;
+    /**
+     * When `true`, the `blocksSlots` field on Mitosis Nodes will be used to transform
+     * deeply nested JSX elements found on properties. Note that not every generator
+     * supports parsing `blocksSlots`.
+     * Defaults to `false`.
+     */
+    enableBlocksSlots?: boolean;
 };
 export type ResolvedImport = {
     path: string;

package/dist/src/parsers/svelte/html/text.d.ts

@@ -17,6 +17,7 @@ export declare function parseText(node: TemplateNode): {
     localizedValues?: {
         [index: string]: import("../../..").BuilderLocalizedValue;
     } | undefined;
+    blocksSlots?: import("../../..").BlockSlot | undefined;
 } | {
     name: string;
     properties: {
@@ -39,6 +40,7 @@ export declare function parseText(node: TemplateNode): {
     localizedValues?: {
         [index: string]: import("../../..").BuilderLocalizedValue;
     } | undefined;
+    blocksSlots?: import("../../..").BlockSlot | undefined;
 } | {
     name: string;
     properties: {
@@ -57,4 +59,5 @@ export declare function parseText(node: TemplateNode): {
     localizedValues?: {
         [index: string]: import("../../..").BuilderLocalizedValue;
     } | undefined;
+    blocksSlots?: import("../../..").BlockSlot | undefined;
 };

package/dist/src/types/mitosis-node.d.ts

@@ -80,7 +80,15 @@ export type BaseNode = {
     localizedValues?: {
         [index: string]: BuilderLocalizedValue;
     };
+    /**
+     * Key-value store of serialized elements passed into properties.
+     * Disabled by default. Use `enableBlocksSlots` on supported parsers to enable.
+     */
+    blocksSlots?: BlockSlot;
 };
+export interface BlockSlot {
+    [key: string]: BlockSlot | BlockSlot[] | MitosisNode | MitosisNode[];
+}
 export declare const ForNodeName = "For";
 export declare const FragmentNodeName = "Fragment";
 export declare const ShowNodeName = "Show";

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.9.5",
+  "version": "0.10.0",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {