@builder.io/mitosis 0.0.45 → 0.0.46

package/dist/src/plugins/compile-away-builder-components.js

@@ -29,10 +29,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -63,8 +67,8 @@ function updateQueryParam(uri, key, value) {
 }
 var wrapOutput = function (node, child, components) {
     var inputNames = getComponentInputNames(node.name);
-    exports.compileAwayBuilderComponentsFromTree(child, components);
-    return create_mitosis_node_1.createMitosisNode(__assign(__assign({}, node), { properties: __assign({}, lodash_1.omit.apply(void 0, __spreadArray([node.properties], inputNames))), bindings: __assign({}, lodash_1.omit.apply(void 0, __spreadArray([node.bindings], inputNames))), 
+    (0, exports.compileAwayBuilderComponentsFromTree)(child, components);
+    return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({}, node), { properties: __assign({}, lodash_1.omit.apply(void 0, __spreadArray([node.properties], inputNames, false))), bindings: __assign({}, lodash_1.omit.apply(void 0, __spreadArray([node.bindings], inputNames, false))), 
         // TODO: forward tagName as a $tagName="..."
         name: node.properties._tagName || node.properties.$tagName || 'div', children: Array.isArray(child) ? child : [child] }));
 };
@@ -85,14 +89,14 @@ exports.components = {
             bindings.innerHTML = node.properties.text;
         }
         if ('openInNewTab' in node.bindings) {
-            bindings.target = node.bindings.openInNewTab + " ? '_blank' : '_self'";
+            bindings.target = "".concat(node.bindings.openInNewTab, " ? '_blank' : '_self'");
         }
         var omitFields = ['link', 'openInNewTab', 'text'];
         var hasLink = node.properties.link || node.bindings.link;
-        return create_mitosis_node_1.createMitosisNode(__assign(__assign({}, node), { name: hasLink ? 'a' : node.properties.$tagName || 'span', properties: __assign(__assign({}, lodash_1.omit(node.properties, omitFields)), properties), bindings: __assign(__assign({}, lodash_1.omit(node.bindings, omitFields)), bindings) }));
+        return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({}, node), { name: hasLink ? 'a' : node.properties.$tagName || 'span', properties: __assign(__assign({}, (0, lodash_1.omit)(node.properties, omitFields)), properties), bindings: __assign(__assign({}, (0, lodash_1.omit)(node.bindings, omitFields)), bindings) }));
     },
     Embed: function (node, context, components) {
-        return wrapOutput(node, create_mitosis_node_1.createMitosisNode({
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: node.properties.builderTag || 'div',
             properties: {
                 innerHTML: node.properties.content || '',
@@ -104,27 +108,27 @@ exports.components = {
         var accordionItems = JSON5.parse(itemsJSON);
         var children = accordionItems.map(function (accordionItem) {
             var titleChildren = accordionItem.title.map(function (element) {
-                return builder_1.builderElementToMitosisNode(element, {
+                return (0, builder_1.builderElementToMitosisNode)(element, {
                     includeBuilderExtras: true,
                     preserveTextBlocks: true,
                 });
             });
             var detailChildren = accordionItem.detail.map(function (element) {
-                return builder_1.builderElementToMitosisNode(element, {
+                return (0, builder_1.builderElementToMitosisNode)(element, {
                     includeBuilderExtras: true,
                     preserveTextBlocks: true,
                 });
             });
-            return create_mitosis_node_1.createMitosisNode({
+            return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'div',
                 properties: { builder: 'accordion' },
                 children: [
-                    create_mitosis_node_1.createMitosisNode({
+                    (0, create_mitosis_node_1.createMitosisNode)({
                         name: 'div',
                         properties: { builder: 'accordion-title' },
                         children: titleChildren,
                     }),
-                    create_mitosis_node_1.createMitosisNode({
+                    (0, create_mitosis_node_1.createMitosisNode)({
                         name: 'div',
                         properties: { builder: 'accordion-detail' },
                         children: detailChildren,
@@ -132,7 +136,7 @@ exports.components = {
                 ],
             });
         });
-        return wrapOutput(node, create_mitosis_node_1.createMitosisNode({
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: node.properties.builderTag || 'div',
             properties: {
                 $name: 'accordion',
@@ -142,27 +146,27 @@ exports.components = {
     },
     BuilderMasonry: function () {
         // TODO
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderMasonry' },
         });
     },
     BuilderTabs: function () {
         // TODO
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderTabs' },
         });
     },
     BuilderCarousel: function () {
         // TODO
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: { 'data-missing-component': 'BuilderCarousel' },
         });
     },
     CustomCode: function (node, context, components) {
-        return wrapOutput(node, create_mitosis_node_1.createMitosisNode({
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: node.properties.builderTag || 'div',
             properties: {
                 innerHTML: node.properties.code || '',
@@ -170,7 +174,7 @@ exports.components = {
         }), components);
     },
     CoreSection: function (node, context, components) {
-        return wrapOutput(node, create_mitosis_node_1.createMitosisNode({
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: 'section',
             properties: __assign(__assign(__assign({}, node.properties), { $name: 'section' }), (node.bindings.lazyLoad === 'true' && {
                 lazyLoad: 'true',
@@ -181,9 +185,9 @@ exports.components = {
                     alignSelf: 'stretch',
                     flexGrow: '1',
                     boxSizing: 'border-box',
-                    maxWidth: ((node.bindings.maxWidth &&
+                    maxWidth: "".concat((node.bindings.maxWidth &&
                         Number(node.bindings.maxWidth)) ||
-                        1200) + "px",
+                        1200, "px"),
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'stretch',
@@ -207,10 +211,10 @@ exports.components = {
         }
         function getColumnWidth(index) {
             var subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-            return "calc(" + getWidth(index) + "% - " + subtractWidth + "px)";
+            return "calc(".concat(getWidth(index), "% - ").concat(subtractWidth, "px)");
         }
         var properties = node.properties;
-        return wrapOutput(node, create_mitosis_node_1.createMitosisNode({
+        return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: {
                 class: 'builder-columns',
@@ -219,7 +223,7 @@ exports.components = {
                 css: JSON.stringify(__assign({ display: 'flex' }, (properties.stackColumnsAt === 'never'
                     ? {}
                     : (_a = {},
-                        _a["@media (max-width: " + (properties.stackColumnsAt !== 'tablet' ? 639 : 999) + "px)"] = {
+                        _a["@media (max-width: ".concat(properties.stackColumnsAt !== 'tablet' ? 639 : 999, "px)")] = {
                             flexDirection: properties.reverseColumnsWhenStacked === 'true'
                                 ? 'column-reverse'
                                 : 'column',
@@ -229,17 +233,17 @@ exports.components = {
             },
             children: columns.map(function (col, index) {
                 var _a;
-                return create_mitosis_node_1.createMitosisNode({
+                return (0, create_mitosis_node_1.createMitosisNode)({
                     name: 'div',
                     properties: {
                         $name: 'column',
                         class: 'builder-column',
                     },
                     bindings: {
-                        css: JSON.stringify(__assign({ display: 'flex', flexDirection: 'column', alignItems: 'stretch', lineHeight: 'normal', width: "" + getColumnWidth(index), marginLeft: (index === 0 ? 0 : gutterSize) + "px" }, (properties.stackColumnsAt === 'never'
+                        css: JSON.stringify(__assign({ display: 'flex', flexDirection: 'column', alignItems: 'stretch', lineHeight: 'normal', width: "".concat(getColumnWidth(index)), marginLeft: "".concat(index === 0 ? 0 : gutterSize, "px") }, (properties.stackColumnsAt === 'never'
                             ? {}
                             : (_a = {},
-                                _a["@media (max-width: " + (properties.stackColumnsAt !== 'tablet' ? 639 : 999) + "px)"] = {
+                                _a["@media (max-width: ".concat(properties.stackColumnsAt !== 'tablet' ? 639 : 999, "px)")] = {
                                     width: '100%',
                                     marginLeft: 0,
                                 },
@@ -261,23 +265,23 @@ exports.components = {
             aspectRatio = null;
         }
         var srcSet = srcset ||
-            "" + ((node.properties.image || '').match(/builder\.io/)
+            "".concat((node.properties.image || '').match(/builder\.io/)
                 ? widths
                     .map(function (size) {
-                    return updateQueryParam(node.properties.image, 'width', String(size)) + " " + size + "w";
+                    return "".concat(updateQueryParam(node.properties.image, 'width', String(size)), " ").concat(size, "w");
                 })
                     .concat([node.properties.image])
                     .join(', ')
                 : '');
         var source = node.bindings.noWebp !== 'true' &&
-            create_mitosis_node_1.createMitosisNode({
+            (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'source',
                 properties: {
                     srcset: srcSet.replace(/\?/g, '?format=webp&'),
                     type: 'image/webp',
                 },
             });
-        var img = create_mitosis_node_1.createMitosisNode({
+        var img = (0, create_mitosis_node_1.createMitosisNode)({
             name: 'img',
             properties: noUndefined({
                 $name: 'image',
@@ -301,12 +305,12 @@ exports.components = {
                     : {}))),
             }),
         });
-        var picture = create_mitosis_node_1.createMitosisNode({
+        var picture = (0, create_mitosis_node_1.createMitosisNode)({
             name: 'picture',
             children: source ? [source, img] : [img],
         });
         var imgSizer = aspectRatio &&
-            create_mitosis_node_1.createMitosisNode({
+            (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'div',
                 properties: {
                     $name: 'image-sizer',
@@ -323,7 +327,7 @@ exports.components = {
             });
         var children = node.children &&
             node.children.length &&
-            create_mitosis_node_1.createMitosisNode({
+            (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'div',
                 properties: {
                     $name: 'image-contents',
@@ -355,7 +359,7 @@ exports.components = {
             aspectRatio = null;
         }
         var videoContainerNodes = [];
-        videoContainerNodes.push(create_mitosis_node_1.createMitosisNode({
+        videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
             name: 'video',
             properties: noUndefined({
                 $name: 'builder-video',
@@ -384,7 +388,7 @@ exports.components = {
                 }),
             }),
             children: [
-                create_mitosis_node_1.createMitosisNode({
+                (0, create_mitosis_node_1.createMitosisNode)({
                     name: 'source',
                     properties: {
                         type: 'video/mp4',
@@ -397,7 +401,7 @@ exports.components = {
             ],
         }));
         aspectRatio &&
-            videoContainerNodes.push(create_mitosis_node_1.createMitosisNode({
+            videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
                 name: 'div',
                 properties: {
                     $name: 'builder-video-sizer',
@@ -413,7 +417,7 @@ exports.components = {
             }));
         node.children &&
             node.children.length &&
-            videoContainerNodes.push(create_mitosis_node_1.createMitosisNode({
+            videoContainerNodes.push((0, create_mitosis_node_1.createMitosisNode)({
                 name: 'div',
                 properties: {
                     $name: 'image-contents',
@@ -432,7 +436,7 @@ exports.components = {
                 },
                 children: node.children,
             }));
-        var videoContainer = create_mitosis_node_1.createMitosisNode({
+        var videoContainer = (0, create_mitosis_node_1.createMitosisNode)({
             name: 'div',
             properties: {
                 $name: 'video-container',
@@ -446,8 +450,8 @@ exports.components = {
     },
 };
 var compileAwayBuilderComponentsFromTree = function (tree, components) {
-    traverse_1.default(tree).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(tree).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             var mapper = components[item.name];
             if (mapper) {
                 var result = mapper(item, this, components);
@@ -463,15 +467,15 @@ var compileAwayBuilderComponents = function (pluginOptions) {
     if (pluginOptions === void 0) { pluginOptions = {}; }
     var obj = exports.components;
     if (pluginOptions.omit) {
-        obj = lodash_1.omit(obj, pluginOptions.omit);
+        obj = (0, lodash_1.omit)(obj, pluginOptions.omit);
     }
     if (pluginOptions.only) {
-        obj = lodash_1.pick(obj, pluginOptions.only);
+        obj = (0, lodash_1.pick)(obj, pluginOptions.only);
     }
     return function (options) { return ({
         json: {
             pre: function (json) {
-                exports.compileAwayBuilderComponentsFromTree(json, exports.components);
+                (0, exports.compileAwayBuilderComponentsFromTree)(json, exports.components);
             },
         },
     }); };

package/dist/src/plugins/compile-away-components.js

@@ -19,7 +19,7 @@ var lodash_1 = require("lodash");
 var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var getRenderOptions = function (node) {
-    return __assign(__assign({}, lodash_1.mapValues(node.properties, function (value) { return "\"" + value + "\""; })), lodash_1.mapValues(node.bindings, function (value) { return "{" + value + "}"; }));
+    return __assign(__assign({}, (0, lodash_1.mapValues)(node.properties, function (value) { return "\"".concat(value, "\""); })), (0, lodash_1.mapValues)(node.bindings, function (value) { return "{".concat(value, "}"); }));
 };
 exports.getRenderOptions = getRenderOptions;
 /**
@@ -41,8 +41,8 @@ exports.getRenderOptions = getRenderOptions;
 var compileAwayComponents = function (pluginOptions) { return function (options) { return ({
     json: {
         pre: function (json) {
-            traverse_1.default(json).forEach(function (item) {
-                if (is_mitosis_node_1.isMitosisNode(item)) {
+            (0, traverse_1.default)(json).forEach(function (item) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
                     var mapper = pluginOptions.components[item.name];
                     if (mapper) {
                         var result = mapper(item, this);

package/dist/src/plugins/map-styles.js

@@ -6,9 +6,9 @@ var traverse_nodes_1 = require("../helpers/traverse-nodes");
 var mapStyles = function (pluginOptions) { return function (options) { return ({
     json: {
         pre: function (json) {
-            traverse_nodes_1.tarverseNodes(json, function (node, context) {
-                var styles = get_styles_1.getStyles(node);
-                get_styles_1.setStyles(node, pluginOptions.map(styles || {}, context));
+            (0, traverse_nodes_1.tarverseNodes)(json, function (node, context) {
+                var styles = (0, get_styles_1.getStyles)(node);
+                (0, get_styles_1.setStyles)(node, pluginOptions.map(styles || {}, context));
             });
         },
     },

package/dist/src/targets.d.ts

@@ -0,0 +1,24 @@
+export declare const targets: {
+    angular: (options?: import("./generators/angular").ToAngularOptions) => import(".").Transpiler;
+    builder: (options?: import("./generators/builder").ToBuilderOptions) => ({ component, }: import(".").TranspilerArgs) => {
+        data: {
+            httpRequests: any;
+            jsCode: string;
+            tsCode: string;
+            blocks: import("@builder.io/sdk").BuilderElement[];
+        };
+    };
+    customElement: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
+    html: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;
+    mitosis: (toMitosisOptions?: Partial<import("./generators/mitosis").ToMitosisOptions>) => import(".").Transpiler;
+    liquid: (options?: import("./generators/liquid").ToLiquidOptions) => import(".").Transpiler;
+    react: (reactOptions?: import("./generators/react").ToReactOptions) => import(".").Transpiler;
+    reactNative: (options?: import("./generators/react-native").ToReactNativeOptions) => import(".").Transpiler;
+    solid: (options?: import("./generators/solid").ToSolidOptions) => import(".").Transpiler;
+    svelte: (options?: import("./generators/svelte").ToSvelteOptions) => import(".").Transpiler;
+    swift: (options?: import("./generators/swift-ui").ToSwiftOptions) => import(".").Transpiler;
+    template: (options?: import("./generators/template").ToTemplateOptions) => import(".").Transpiler;
+    vue: (options?: import("./generators/vue").ToVueOptions) => ({ component, path }: import(".").TranspilerArgs & {
+        path: string;
+    }) => string;
+};

package/dist/src/targets.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.targets = void 0;
+var angular_1 = require("./generators/angular");
+var builder_1 = require("./generators/builder");
+var html_1 = require("./generators/html");
+var mitosis_1 = require("./generators/mitosis");
+var liquid_1 = require("./generators/liquid");
+var react_1 = require("./generators/react");
+var react_native_1 = require("./generators/react-native");
+var solid_1 = require("./generators/solid");
+var svelte_1 = require("./generators/svelte");
+var swift_ui_1 = require("./generators/swift-ui");
+var template_1 = require("./generators/template");
+var vue_1 = require("./generators/vue");
+exports.targets = {
+    angular: angular_1.componentToAngular,
+    builder: builder_1.componentToBuilder,
+    customElement: html_1.componentToCustomElement,
+    html: html_1.componentToHtml,
+    mitosis: mitosis_1.componentToMitosis,
+    liquid: liquid_1.componentToLiquid,
+    react: react_1.componentToReact,
+    reactNative: react_native_1.componentToReactNative,
+    solid: solid_1.componentToSolid,
+    svelte: svelte_1.componentToSvelte,
+    swift: swift_ui_1.componentToSwift,
+    template: template_1.componentToTemplate,
+    vue: vue_1.componentToVue,
+};

package/dist/src/types/config.d.ts

@@ -0,0 +1,31 @@
+import { MitosisComponent } from '..';
+import { Plugin } from './plugins';
+declare type Targets = typeof import('../targets').targets;
+export declare type Target = keyof Targets;
+export declare type GeneratorOptions = {
+    [K in keyof Targets]: NonNullable<Parameters<Targets[K]>[0]>;
+};
+declare type FileInfo = {
+    path: string;
+    content: string;
+    target: string;
+};
+export interface TranspilerArgs {
+    path?: string;
+    component: MitosisComponent;
+}
+export declare type Transpiler = (args: TranspilerArgs) => string;
+export interface BaseTranspilerOptions {
+    prettier?: boolean;
+    plugins?: Plugin[];
+}
+export declare type MitosisConfig = {
+    type?: 'library';
+    targets: Target[];
+    dest?: string;
+    files?: string | string[];
+    overridesDir?: string;
+    mapFile?: (info: FileInfo) => FileInfo | Promise<FileInfo>;
+    options: Partial<GeneratorOptions>;
+};
+export {};

package/dist/src/types/generators.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/types/plugins.d.ts

@@ -0,0 +1,11 @@
+import { MitosisComponent } from './mitosis-component';
+export declare type Plugin = (options?: any) => {
+    json?: {
+        pre?: (json: MitosisComponent) => MitosisComponent | void;
+        post?: (json: MitosisComponent) => MitosisComponent | void;
+    };
+    code?: {
+        pre?: (code: string) => string;
+        post?: (code: string) => string;
+    };
+};