@builder.io/mitosis 0.1.2 → 0.1.4

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

@@ -216,6 +216,17 @@ var blockToReact = function (json, options, component, parentSlots) {
             }
         }
     }
+    if (json.slots) {
+        for (var key in json.slots) {
+            var value = json.slots[key];
+            if (!(value === null || value === void 0 ? void 0 : value.length)) {
+                continue;
+            }
+            var reactComponents = value.map(function (node) { return (0, exports.blockToReact)(node, options, component); });
+            var slotStringValue = reactComponents.length === 1 ? reactComponents[0] : "<>".concat(reactComponents.join('\n'), "</>");
+            str += " ".concat(key, "={").concat(slotStringValue, "} ");
+        }
+    }
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
         return str + ' />';
     }

package/dist/src/helpers/component-file-extensions.d.ts

@@ -1,4 +1,4 @@
-import { MitosisConfig, Target } from '..';
+import { MitosisConfig, Target } from '../types/config';
 export declare const COMPONENT_IMPORT_EXTENSIONS: string[];
 export declare const checkIsSvelteComponentFilePath: (filePath: string) => boolean;
 export declare const checkIsLiteComponentFilePath: (filePath: string) => boolean;

package/dist/src/helpers/component-file-extensions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getComponentFileExtensionForTarget = exports.renameImport = exports.renameComponentFile = exports.INPUT_EXTENSION_REGEX = exports.checkIsMitosisComponentFilePath = exports.checkIsLiteComponentFilePath = exports.checkIsSvelteComponentFilePath = exports.COMPONENT_IMPORT_EXTENSIONS = void 0;
-var mitosis_1 = require("..");
+var output_1 = require("./output");
 var COMPONENT_EXTENSIONS = {
     jsx: ['.lite.tsx', '.lite.jsx'],
     svelte: ['.svelte'],
@@ -30,7 +30,7 @@ var renameComponentFile = function (_a) {
     return path.replace(exports.INPUT_EXTENSION_REGEX, (0, exports.getComponentFileExtensionForTarget)({
         type: 'filename',
         target: target,
-        isTypescript: (0, mitosis_1.checkShouldOutputTypeScript)({ options: options, target: target }),
+        isTypescript: (0, output_1.checkShouldOutputTypeScript)({ options: options, target: target }),
     }));
 };
 exports.renameComponentFile = renameComponentFile;

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

@@ -1,5 +1,5 @@
+import { MitosisComponent, MitosisState } from '../../types/mitosis-component';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
-import { MitosisComponent, MitosisState } from '../..';
 import { MitosisNode } from '../../types/mitosis-node';
 type InternalOptions = {
     skipMapper?: boolean;

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

@@ -47,12 +47,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.builderContentToMitosisComponent = exports.isBuilderElement = exports.createBuilderElement = exports.convertExportDefaultToReturn = exports.extractStateHook = exports.builderElementToMitosisNode = exports.symbolBlocksAsChildren = void 0;
+var symbol_processor_1 = require("../../symbols/symbol-processor");
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
 var traverse_1 = __importDefault(require("traverse"));
-var __1 = require("../..");
 var media_sizes_1 = require("../../constants/media-sizes");
 var bindings_1 = require("../../helpers/bindings");
 var capitalize_1 = require("../../helpers/capitalize");
@@ -495,6 +495,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     }
     var bindings = {};
     var children = [];
+    var slots = {};
     if (blockBindings) {
         for (var key in blockBindings) {
             if (key === 'css') {
@@ -527,15 +528,12 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
         for (var key in block.component.options) {
             var value = block.component.options[key];
             var valueIsArrayOfBuilderElements = Array.isArray(value) && value.every(exports.isBuilderElement);
-            var transformBldrElementToBinding = function (item) {
+            var transformBldrElementToMitosisNode = function (item) {
                 var node = (0, exports.builderElementToMitosisNode)(item, __assign(__assign({}, options), { includeSpecialBindings: false }));
-                // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
-                // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
-                // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
-                return (0, __1.blockToMitosis)(node, {}, null);
+                return node;
             };
             if ((0, exports.isBuilderElement)(value)) {
-                bindings[key] = (0, bindings_1.createSingleBinding)({ code: transformBldrElementToBinding(value) });
+                slots[key] = [transformBldrElementToMitosisNode(value)];
             }
             else if (typeof value === 'string') {
                 properties[key] = value;
@@ -549,9 +547,8 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                     }
                     return true;
                 })
-                    .map(transformBldrElementToBinding);
-                var strVal = childrenElements.length === 1 ? childrenElements[0] : "<>".concat(childrenElements.join(''), "</>");
-                bindings[key] = (0, bindings_1.createSingleBinding)({ code: strVal });
+                    .map(transformBldrElementToMitosisNode);
+                slots[key] = childrenElements;
             }
             else {
                 bindings[key] = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(value) });
@@ -582,6 +579,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             Object.keys(css).length && {
             css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
         })),
+        slots: __assign({}, slots),
     });
     // Has single text node child
     var firstChild = (_s = block.children) === null || _s === void 0 ? void 0 : _s[0];
@@ -751,7 +749,7 @@ function extractSymbols(json) {
         subComponents: subComponents,
     };
 }
-var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' + (0, __1.hashCodeAsString)(options) }, options)); };
+var createBuilderElement = function (options) { return (__assign({ '@type': '@builder.io/sdk:Element', id: 'builder-' + (0, symbol_processor_1.hashCodeAsString)(options) }, options)); };
 exports.createBuilderElement = createBuilderElement;
 var isBuilderElement = function (el) {
     return (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';

package/dist/src/parsers/jsx/hooks/use-target.js

@@ -29,7 +29,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getUseTargetStatements = exports.getIdFromMatch = exports.USE_TARGET_MAGIC_REGEX = exports.USE_TARGET_MAGIC_STRING = exports.getMagicString = exports.getTargetId = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
-var targets_1 = require("../../../targets");
+var TARGETS = {
+    alpine: null,
+    angular: null,
+    customElement: null,
+    html: null,
+    mitosis: null,
+    liquid: null,
+    react: null,
+    reactNative: null,
+    solid: null,
+    svelte: null,
+    swift: null,
+    template: null,
+    webcomponent: null,
+    vue: null,
+    stencil: null,
+    qwik: null,
+    marko: null,
+    preact: null,
+    lit: null,
+    rsc: null,
+    taro: null,
+};
 var types = babel.types;
 var getTargetId = function (component) {
     var latestId = Object.keys(component.targetBlocks || {}).length;
@@ -76,7 +98,7 @@ var getUseTargetStatements = function (path) {
         if (!types.isIdentifier(prop.key)) {
             throw new Error('ERROR Parsing `useTarget()`: Expected an identifier, instead got: ' + prop.key);
         }
-        if (!Object.keys(targets_1.targets).concat('default').includes(prop.key.name)) {
+        if (!Object.keys(TARGETS).concat('default').includes(prop.key.name)) {
             throw new Error('ERROR Parsing `useTarget()`: Invalid target: ' + prop.key.name);
         }
         var keyName = prop.key.name;

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

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseStateObjectToMitosisState = exports.mapStateIdentifiers = void 0;
 var babel = __importStar(require("@babel/core"));
-var generator_1 = __importDefault(require("@babel/generator"));
 var function_1 = require("fp-ts/lib/function");
 var traverse_1 = __importDefault(require("traverse"));
 var babel_transform_1 = require("../../helpers/babel-transform");
@@ -79,12 +78,13 @@ function mapStateIdentifiersInExpression(expression, stateProperties) {
                         path.replaceWith(newExpression);
                     }
                     catch (err) {
-                        console.log('err: ', {
-                            from: (0, generator_1.default)(path.parent).code,
-                            fromChild: (0, generator_1.default)(path.node).code,
-                            to: newExpression,
-                            // err,
-                        });
+                        console.error(err);
+                        // console.log('err: ', {
+                        //   from: generate(path.parent).code,
+                        //   fromChild: generate(path.node).code,
+                        //   to: newExpression,
+                        //   // err,
+                        // });
                     }
                 }
             }

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

@@ -11,6 +11,9 @@ export declare function parseText(node: TemplateNode): {
         [key: string]: import("../../..").Binding | undefined;
     };
     children: import("../../..").MitosisNode[];
+    slots?: {
+        [key: string]: import("../../..").MitosisNode[];
+    } | undefined;
 } | {
     name: string;
     properties: {
@@ -27,4 +30,7 @@ export declare function parseText(node: TemplateNode): {
         [key: string]: import("../../..").Binding | undefined;
     };
     children: import("../../..").MitosisNode[];
+    slots?: {
+        [key: string]: import("../../..").MitosisNode[];
+    } | undefined;
 };

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

@@ -43,6 +43,13 @@ export type BaseNode = {
         [key: string]: Binding | undefined;
     };
     children: MitosisNode[];
+    /**
+     * Key-value store of slots. The key is the slot name and the value is an array of nodes.
+     * It is used when components have props that are also nodes
+     */
+    slots?: {
+        [key: string]: MitosisNode[];
+    };
 };
 export type SpecialNodesNames = 'For' | 'Fragment' | 'Show' | 'Slot';
 export type ForNode = BaseNode & {

package/package.json

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