@builder.io/mitosis 0.5.4 → 0.5.6

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

@@ -3,5 +3,5 @@ import { MitosisComponent } from '../../types/mitosis-component';
 import { MitosisNode } from '../../types/mitosis-node';
 import { TranspilerGenerator } from '../../types/transpiler';
 export declare const DEFAULT_FORMAT: ToMitosisOptions['format'];
-export declare const blockToMitosis: (json: MitosisNode, toMitosisOptions: Partial<ToMitosisOptions> | undefined, component: MitosisComponent) => string;
+export declare const blockToMitosis: (json: MitosisNode, toMitosisOptions: Partial<ToMitosisOptions> | undefined, component: MitosisComponent, insideJsx: boolean) => string;
 export declare const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToMitosis = exports.blockToMitosis = exports.DEFAULT_FORMAT = void 0;
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const plugins_1 = require("../../modules/plugins");
 const json5_1 = __importDefault(require("json5"));
 const standalone_1 = require("prettier/standalone");
@@ -25,8 +26,8 @@ exports.DEFAULT_FORMAT = 'legacy';
 const isValidAttributeName = (str) => {
     return Boolean(str && /^[$a-z0-9\-_:]+$/i.test(str));
 };
-const blockToMitosis = (json, toMitosisOptions = {}, component) => {
-    var _a, _b, _c, _d, _e, _f;
+const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const options = {
         format: exports.DEFAULT_FORMAT,
         ...toMitosisOptions,
@@ -38,22 +39,48 @@ const blockToMitosis = (json, toMitosisOptions = {}, component) => {
             stylesType: 'emotion',
             type: 'dom',
             prettier: options.prettier,
-        }, component, true);
+        }, component, insideJsx);
+    }
+    if (options.nativeConditionals && (0, mitosis_node_1.checkIsShowNode)(json)) {
+        const when = (_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code;
+        const elseCase = json.meta.else;
+        const needsWrapper = json.children.length !== 1;
+        const renderChildren = `${needsWrapper ? '<>' : ''}
+      ${json.children
+            .map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))
+            .join('\n')}
+  ${needsWrapper ? '</>' : ''}`;
+        const renderElse = elseCase && (0, is_mitosis_node_1.isMitosisNode)(elseCase)
+            ? (0, exports.blockToMitosis)(elseCase, options, component, false)
+            : 'null';
+        return `${insideJsx ? '{' : ''}(${when}) ? ${renderChildren} : ${renderElse}${insideJsx ? '}' : ''}`;
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
         const needsWrapper = json.children.length !== 1;
-        return `<For each={${(_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code}}>
+        if (options.nativeLoops) {
+            const a = `${insideJsx ? '{' : ''}(${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code}).map(
+      (${json.scope.forName}, ${json.scope.indexName || 'index'}) => (
+      ${needsWrapper ? '<>' : ''}
+        ${json.children
+                .map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))
+                .join('\n')}
+      ${needsWrapper ? '</>' : ''}
+      ))${insideJsx ? '}' : ''}`;
+            console.log(a);
+            return a;
+        }
+        return `<For each={${(_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code}}>
     {(${json.scope.forName}, ${json.scope.indexName || 'index'}) =>
       ${needsWrapper ? '<>' : ''}
-        ${json.children.map((child) => (0, exports.blockToMitosis)(child, options, component))}}
+        ${json.children.map((child) => (0, exports.blockToMitosis)(child, options, component, needsWrapper))}}
       ${needsWrapper ? '</>' : ''}
     </For>`;
     }
     if (json.properties._text) {
         return json.properties._text;
     }
-    if ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) {
-        return `{${(_c = json.bindings._text) === null || _c === void 0 ? void 0 : _c.code}}`;
+    if ((_d = json.bindings._text) === null || _d === void 0 ? void 0 : _d.code) {
+        return `{${(_e = json.bindings._text) === null || _e === void 0 ? void 0 : _e.code}}`;
     }
     let str = '';
     str += `<${json.name} `;
@@ -67,9 +94,9 @@ const blockToMitosis = (json, toMitosisOptions = {}, component) => {
         }
     }
     for (const key in json.bindings) {
-        const value = (_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.code;
-        if (((_e = json.bindings[key]) === null || _e === void 0 ? void 0 : _e.type) === 'spread') {
-            str += ` {...(${(_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code})} `;
+        const value = (_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code;
+        if (((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.type) === 'spread') {
+            str += ` {...(${(_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.code})} `;
         }
         else if (key.startsWith('on')) {
             str += ` ${key}={event => ${value.replace(/\s*;$/, '')}} `;
@@ -93,7 +120,7 @@ const blockToMitosis = (json, toMitosisOptions = {}, component) => {
     }
     str += '>';
     if (json.children) {
-        str += json.children.map((item) => (0, exports.blockToMitosis)(item, options, component)).join('\n');
+        str += json.children.map((item) => (0, exports.blockToMitosis)(item, options, component, true)).join('\n');
     }
     str += `</${json.name}>`;
     return str;
@@ -137,6 +164,13 @@ const componentToMitosis = (toMitosisOptions = {}) => ({ component }) => {
     });
     const addWrapper = json.children.length !== 1 || (0, is_root_text_node_1.isRootTextNode)(json);
     const components = Array.from((0, get_components_1.getComponents)(json));
+    const mitosisCoreComponents = [];
+    if (!options.nativeConditionals) {
+        mitosisCoreComponents.push('Show');
+    }
+    if (!options.nativeLoops) {
+        mitosisCoreComponents.push('For');
+    }
     const mitosisComponents = components.filter((item) => mitosisCoreComponents.includes(item));
     const otherComponents = components.filter((item) => !mitosisCoreComponents.includes(item));
     if (options.plugins) {
@@ -174,7 +208,9 @@ const componentToMitosis = (toMitosisOptions = {}) => ({ component }) => {
       ${json.style ? `useStyle(\`${json.style}\`)` : ''}
 
       return (${addWrapper ? '<>' : ''}
-        ${json.children.map((item) => (0, exports.blockToMitosis)(item, options, component)).join('\n')}
+        ${json.children
+        .map((item) => (0, exports.blockToMitosis)(item, options, component, addWrapper))
+        .join('\n')}
         ${addWrapper ? '</>' : ''})
     }
 

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

@@ -1,5 +1,7 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToMitosisOptions extends BaseTranspilerOptions {
     format: 'react' | 'legacy';
+    nativeConditionals?: boolean;
+    nativeLoops?: boolean;
 }
 export type MitosisMetadata = {};

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

@@ -100,6 +100,15 @@ function mapStateIdentifiers(json) {
     const stateProperties = Object.keys(json.state);
     const plugin = (0, process_code_1.createCodeProcessorPlugin)(() => (code) => mapStateIdentifiersInExpression(code, stateProperties));
     plugin(json);
+    for (const key in json.targetBlocks) {
+        const targetBlock = json.targetBlocks[key];
+        for (const targetBlockKey of Object.keys(targetBlock)) {
+            const block = targetBlock[targetBlockKey];
+            if (block && 'code' in block) {
+                block.code = mapStateIdentifiersInExpression(block.code, stateProperties);
+            }
+        }
+    }
     (0, legacy_1.default)(json).forEach(function (item) {
         // only consolidate bindings for HTML tags, not custom components
         // custom components are always PascalCase, e.g. MyComponent

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

@@ -60,6 +60,10 @@ export type ForNode = BaseNode & {
         collectionName: string | undefined;
     };
 };
+export type ShowNode = BaseNode & {
+    name: 'Show';
+};
 export type MitosisNode = BaseNode | ForNode;
 export declare const checkIsForNode: (node: MitosisNode) => node is ForNode;
+export declare const checkIsShowNode: (node: MitosisNode) => node is ShowNode;
 export {};

package/dist/src/types/mitosis-node.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkIsForNode = void 0;
+exports.checkIsShowNode = exports.checkIsForNode = void 0;
 const checkIsForNode = (node) => node.name === 'For';
 exports.checkIsForNode = checkIsForNode;
+const checkIsShowNode = (node) => node.name === 'Show';
+exports.checkIsShowNode = checkIsShowNode;

package/package.json

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