@builder.io/mitosis 0.4.3 → 0.4.4

package/dist/src/generators/builder.js

@@ -149,7 +149,7 @@ function tryFormat(code) {
     return str;
 }
 const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const mapper = !_internalOptions.skipMapper && componentMappers[json.name];
     if (mapper) {
         return mapper(json, options);
@@ -168,7 +168,8 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
             component: {
                 name: 'Text',
                 options: {
-                    text: json.properties._text,
+                    // Mitosis uses {} for bindings, but Builder expects {{}} so we need to convert
+                    text: (_c = json.properties._text) === null || _c === void 0 ? void 0 : _c.replace(/\{(.*?)\}/g, '{{$1}}'),
                 },
             },
         }, options);
@@ -178,10 +179,10 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
     const actions = {};
     for (const key in bindings) {
         const eventBindingKeyRegex = /^on([A-Z])/;
-        const firstCharMatchForEventBindingKey = (_c = key.match(eventBindingKeyRegex)) === null || _c === void 0 ? void 0 : _c[1];
+        const firstCharMatchForEventBindingKey = (_d = key.match(eventBindingKeyRegex)) === null || _d === void 0 ? void 0 : _d[1];
         if (firstCharMatchForEventBindingKey) {
             actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] =
-                (0, remove_surrounding_block_1.removeSurroundingBlock)((_d = bindings[key]) === null || _d === void 0 ? void 0 : _d.code);
+                (0, remove_surrounding_block_1.removeSurroundingBlock)((_e = bindings[key]) === null || _e === void 0 ? void 0 : _e.code);
             delete bindings[key];
         }
     }
@@ -202,12 +203,12 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
             }
         }
     }
-    const hasCss = !!((_e = bindings.css) === null || _e === void 0 ? void 0 : _e.code);
+    const hasCss = !!((_f = bindings.css) === null || _f === void 0 ? void 0 : _f.code);
     let responsiveStyles = {
         large: {},
     };
     if (hasCss) {
-        const cssRules = json5_1.default.parse((_f = bindings.css) === null || _f === void 0 ? void 0 : _f.code);
+        const cssRules = json5_1.default.parse((_g = bindings.css) === null || _g === void 0 ? void 0 : _g.code);
         const cssRuleKeys = Object.keys(cssRules);
         for (const ruleKey of cssRuleKeys) {
             const mediaQueryMatch = ruleKey.match(media_sizes_1.mediaQueryRegex);
@@ -285,6 +286,7 @@ const componentToBuilder = (options = {}) => ({ component }) => {
                 ${(0, on_mount_1.stringifySingleScopeOnMount)(component)}
               })`}
       `),
+            cssCode: component === null || component === void 0 ? void 0 : component.style,
             blocks: component.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
                 .map((child) => (0, exports.blockToBuilder)(child, options)),

package/dist/src/generators/mitosis.js

@@ -171,6 +171,8 @@ const componentToMitosis = (toMitosisOptions = {}) => ({ component }) => {
 
       ${!((_a = json.hooks.onUnMount) === null || _a === void 0 ? void 0 : _a.code) ? '' : `onUnMount(() => { ${json.hooks.onUnMount.code} })`}
 
+      ${json.style ? `useStyle(\`${json.style}\`)` : ''}
+
       return (${addWrapper ? '<>' : ''}
         ${json.children.map((item) => (0, exports.blockToMitosis)(item, options, component)).join('\n')}
         ${addWrapper ? '</>' : ''})

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

@@ -393,10 +393,11 @@ const componentMappers = {
             });
         }
         const text = block.component.options.text;
+        // Builder uses {{}} for bindings, but Mitosis expects {} so we need to convert
         const innerProperties = innerBindings._text
             ? {}
             : {
-                [options.preserveTextBlocks ? 'innerHTML' : '_text']: text,
+                [options.preserveTextBlocks ? 'innerHTML' : '_text']: text.replace(/\{\{(.*?)\}\}/g, '{$1}'),
             };
         if (options.preserveTextBlocks) {
             return (0, create_mitosis_node_1.createMitosisNode)({
@@ -867,7 +868,7 @@ exports.createBuilderElement = createBuilderElement;
 const isBuilderElement = (el) => (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';
 exports.isBuilderElement = isBuilderElement;
 const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     builderContent = (0, fast_clone_1.fastClone)(builderContent);
     (0, legacy_1.default)(builderContent).forEach(function (elem) {
         var _a, _b;
@@ -910,9 +911,11 @@ const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
             useMetadata: {
                 httpRequests: (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.httpRequests,
             },
+            // cmp.meta.cssCode exists for backwards compatibility, prefer cmp.style
             ...(((_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.cssCode) && { cssCode: builderContent.data.cssCode }),
         },
-        inputs: (_g = (_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.inputs) === null || _g === void 0 ? void 0 : _g.map((input) => ({
+        ...(((_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.cssCode) && { style: (_g = builderContent.data) === null || _g === void 0 ? void 0 : _g.cssCode }),
+        inputs: (_j = (_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.inputs) === null || _j === void 0 ? void 0 : _j.map((input) => ({
             name: input.name,
             defaultValue: input.defaultValue,
         })),
@@ -926,7 +929,7 @@ const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
                         : []),
             ],
         },
-        children: (((_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.blocks) || [])
+        children: (((_k = builderContent.data) === null || _k === void 0 ? void 0 : _k.blocks) || [])
             .filter((item) => {
             var _a, _b;
             if ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.includes('/api/v1/pixel')) {

package/package.json

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