@builder.io/mitosis 0.11.5 → 0.11.6

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

@@ -2,6 +2,7 @@ import { ToBuilderOptions } from '../../generators/builder/types';
 import { MitosisNode } from '../../types/mitosis-node';
 import { TranspilerArgs } from '../../types/transpiler';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+export declare const builderBlockPrefixes: string[];
 type InternalOptions = {
     skipMapper?: boolean;
     includeStateMap?: boolean;

package/dist/src/generators/builder/generator.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.componentToBuilder = exports.blockToBuilder = void 0;
+exports.componentToBuilder = exports.blockToBuilder = exports.builderBlockPrefixes = void 0;
 const media_sizes_1 = require("../../constants/media-sizes");
 const dedent_1 = require("../../helpers/dedent");
 const fast_clone_1 = require("../../helpers/fast-clone");
@@ -114,12 +114,15 @@ const findStateWithinMitosisComponent = (component, options, state, stateMap) =>
     return state;
 };
 const omitMetaProperties = (obj) => (0, lodash_1.omitBy)(obj, (_value, key) => key.startsWith('$'));
-const builderBlockPrefixes = ['Amp', 'Core', 'Builder', 'Raw', 'Form'];
-const mapComponentName = (name) => {
+exports.builderBlockPrefixes = ['Amp', 'Core', 'Builder', 'Raw', 'Form'];
+const mapComponentName = (name, properties) => {
+    if (properties === null || properties === void 0 ? void 0 : properties['data-builder-originalName']) {
+        return properties['data-builder-originalName'];
+    }
     if (name === 'CustomCode') {
         return 'Custom Code';
     }
-    for (const prefix of builderBlockPrefixes) {
+    for (const prefix of exports.builderBlockPrefixes) {
         if (name.startsWith(prefix)) {
             const suffix = name.replace(prefix, '');
             const restOfName = suffix[0];
@@ -680,8 +683,8 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
         }),
         ...(thisIsComponent && {
             component: {
-                name: mapComponentName(json.name),
-                options: componentOptions,
+                name: mapComponentName(json.name, json.properties),
+                options: (0, lodash_1.omit)(componentOptions, ['data-builder-originalName']),
             },
         }),
         code: {
@@ -747,7 +750,6 @@ const componentToBuilder = (options = {}) => ({ component }) => {
             cssCode: component === null || component === void 0 ? void 0 : component.style,
             ...(() => {
                 const stateData = findStateWithinMitosisComponent(component, options, { ...convertMitosisStateToBuilderState(component.state) }, options.stateMap);
-                console.log('stateData', stateData);
                 return { state: stateData };
             })(),
             blocks: component.children

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

@@ -27,9 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractMitosisStateFromBuilderState = exports.extractStateHook = exports.getMetaFromBlock = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = exports.getStyleStringFromBlock = void 0;
+const generator_1 = require("../../generators/builder/generator");
 const symbol_processor_1 = require("../../symbols/symbol-processor");
 const babel = __importStar(require("@babel/core"));
-const generator_1 = __importDefault(require("@babel/generator"));
+const generator_2 = __importDefault(require("@babel/generator"));
+const traverse_1 = __importDefault(require("@babel/traverse"));
+const t = __importStar(require("@babel/types"));
 const json5_1 = __importDefault(require("json5"));
 const lodash_1 = require("lodash");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
@@ -129,7 +132,10 @@ const getStyleStringFromBlock = (block, options) => {
             }
             let code = ((_b = (_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings) === null || _b === void 0 ? void 0 : _b[key]) || block.bindings[key];
             const verifyCode = verifyIsValid(code);
-            if (!verifyCode.valid) {
+            if (verifyCode.valid) {
+                code = processBoundLogic(code);
+            }
+            else {
                 if (options.escapeInvalidCode) {
                     code = '`' + code + ' [INVALID CODE]`';
                 }
@@ -463,8 +469,8 @@ const componentMappers = {
         const actionBindings = getActionBindingsFromBlock(block, options);
         const localizedValues = {};
         const blockBindings = {
-            ...mapBuilderBindingsToMitosisBindingWithCode(block.bindings),
-            ...mapBuilderBindingsToMitosisBindingWithCode((_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings),
+            ...mapBuilderBindingsToMitosisBindingWithCode(block.bindings, options),
+            ...mapBuilderBindingsToMitosisBindingWithCode((_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings, options),
         };
         const bindings = {
             ...(0, lodash_1.omitBy)(blockBindings, (value, key) => {
@@ -598,8 +604,28 @@ const componentMappers = {
         });
     },
 };
+const processBoundLogic = (code) => {
+    const ast = babel.parse(code);
+    if (!ast)
+        return code;
+    let replacedWithReturn = false;
+    (0, traverse_1.default)(ast, {
+        ExportDefaultDeclaration(path) {
+            const exportedNode = path.node.declaration;
+            if (t.isExpression(exportedNode)) {
+                const returnStatement = t.returnStatement(exportedNode);
+                path.replaceWith(returnStatement);
+                replacedWithReturn = true;
+            }
+        },
+    });
+    if (replacedWithReturn) {
+        return (0, generator_2.default)(ast).code;
+    }
+    return code;
+};
 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, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const { includeSpecialBindings = true } = options;
     const localizedValues = {};
     if (((_a = block.component) === null || _a === void 0 ? void 0 : _a.name) === 'Core:Fragment') {
@@ -700,7 +726,10 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             if (!useKey.includes('.')) {
                 let code = blockBindings[key].code || blockBindings[key];
                 const verifyCode = verifyIsValid(code);
-                if (!verifyCode.valid) {
+                if (verifyCode.valid) {
+                    code = processBoundLogic(code);
+                }
+                else {
                     if (options.escapeInvalidCode) {
                         code = '`' + code + ' [INVALID CODE]`';
                     }
@@ -840,8 +869,13 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
     if (block.groupLocked !== undefined) {
         dataAttributes['data-builder-groupLocked'] = String(block.groupLocked);
     }
+    if (((_q = block.component) === null || _q === void 0 ? void 0 : _q.name) &&
+        /:/.test((_r = block.component) === null || _r === void 0 ? void 0 : _r.name) &&
+        !generator_1.builderBlockPrefixes.includes((_s = block.component) === null || _s === void 0 ? void 0 : _s.name.split(':')[0])) {
+        dataAttributes['data-builder-originalName'] = (_t = block.component) === null || _t === void 0 ? void 0 : _t.name;
+    }
     const node = (0, create_mitosis_node_1.createMitosisNode)({
-        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, '')) ||
+        name: ((_v = (_u = block.component) === null || _u === void 0 ? void 0 : _u.name) === null || _v === void 0 ? void 0 : _v.replace(/[^a-z0-9]/gi, '')) ||
             block.tagName ||
             (block.linkUrl ? 'a' : 'div'),
         properties: {
@@ -865,17 +899,19 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             ...slots,
         },
         ...(Object.keys(blocksSlots).length > 0 && { blocksSlots }),
-        meta: (0, exports.getMetaFromBlock)(block, options),
+        meta: {
+            ...(0, exports.getMetaFromBlock)(block, options),
+        },
         ...(Object.keys(localizedValues).length && { localizedValues }),
     });
     // Has single text node child
-    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' &&
+    const firstChild = (_w = block.children) === null || _w === void 0 ? void 0 : _w[0];
+    if (((_x = block.children) === null || _x === void 0 ? void 0 : _x.length) === 1 &&
+        ((_y = firstChild === null || firstChild === void 0 ? void 0 : firstChild.component) === null || _y === void 0 ? void 0 : _y.name) === 'Text' &&
         !options.preserveTextBlocks) {
         const textProperties = (0, exports.builderElementToMitosisNode)(firstChild, options);
-        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 parsedNodeCss = json5_1.default.parse(((_z = node.bindings.css) === null || _z === void 0 ? void 0 : _z.code) || '{}');
+        const parsedTextCss = json5_1.default.parse(((_0 = textProperties.bindings.css) === null || _0 === void 0 ? void 0 : _0.code) || '{}');
         const mergedCss = combineStyles(parsedNodeCss, parsedTextCss);
         // Don't merge if text has styling that matters
         const doNotMerge = 
@@ -977,7 +1013,7 @@ function extractStateHook(code) {
             }
         }
     }
-    const newCode = (0, generator_1.default)(types.program(newBody)).code || '';
+    const newCode = (0, generator_2.default)(types.program(newBody)).code || '';
     return { code: newCode, state };
 }
 exports.extractStateHook = extractStateHook;
@@ -1025,7 +1061,7 @@ function convertExportDefaultToReturn(code) {
                 }
             }
         }
-        return (0, generator_1.default)(types.program(newBody)).code || '';
+        return (0, generator_2.default)(types.program(newBody)).code || '';
     }
     catch (e) {
         const error = e;
@@ -1203,20 +1239,35 @@ const builderContentToMitosisComponent = (builderContent, options = {}) => {
     return componentJson;
 };
 exports.builderContentToMitosisComponent = builderContentToMitosisComponent;
-function mapBuilderBindingsToMitosisBindingWithCode(bindings) {
+function mapBuilderBindingsToMitosisBindingWithCode(bindings, options) {
     const result = {};
     bindings &&
         Object.keys(bindings).forEach((key) => {
             const value = bindings[key];
+            let code = '';
             if (typeof value === 'string') {
-                result[key] = (0, bindings_1.createSingleBinding)({ code: value });
+                code = value;
             }
             else if (value && typeof value === 'object' && value.code) {
-                result[key] = (0, bindings_1.createSingleBinding)({ code: value.code });
+                code = value.code;
             }
             else {
                 throw new Error('Unexpected binding value: ' + JSON.stringify(value));
             }
+            const verifyCode = verifyIsValid(code);
+            if (verifyCode.valid) {
+                code = processBoundLogic(code);
+            }
+            else {
+                if (options === null || options === void 0 ? void 0 : options.escapeInvalidCode) {
+                    code = '`' + code + ' [INVALID CODE]`';
+                }
+                else {
+                    console.warn(`Dropping binding "${key}" due to invalid code: ${code}`);
+                    return;
+                }
+            }
+            result[key] = (0, bindings_1.createSingleBinding)({ code });
         });
     return result;
 }

package/package.json

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