@builder.io/mitosis 0.0.89 → 0.0.91

package/dist/src/generators/rsc.js

@@ -1,24 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 };
 };
@@ -29,6 +9,7 @@ var traverse_1 = __importDefault(require("traverse"));
 var fast_clone_1 = require("../helpers/fast-clone");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var react_1 = require("./react");
+var merge_options_1 = require("../helpers/merge-options");
 /**
  * Transform react to be RSC compatible, such as
  * - remove event listeners
@@ -84,7 +65,11 @@ var componentToRsc = function (_options) {
     return function (_a) {
         var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = __assign(__assign(__assign({}, DEFAULT_OPTIONS), _options), { plugins: __spreadArray(__spreadArray([], (DEFAULT_OPTIONS.plugins || []), true), (_options.plugins || []), true), stylesType: 'style-tag', stateType: 'variables', contextType: 'prop-drill' });
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options, {
+            stylesType: 'style-tag',
+            stateType: 'variables',
+            contextType: 'prop-drill',
+        });
         return (0, react_1.componentToReact)(options)({ component: json, path: path });
     };
 };

package/dist/src/generators/stencil/collect-class-string.js

@@ -8,7 +8,6 @@ function collectClassString(json, bindingOpenChar, bindingCloseChar) {
     if (bindingOpenChar === void 0) { bindingOpenChar = '{'; }
     if (bindingCloseChar === void 0) { bindingCloseChar = '}'; }
     var staticClasses = [];
-    var hasStaticClasses = Boolean(staticClasses.length);
     if (json.properties.class) {
         staticClasses.push(json.properties.class);
         delete json.properties.class;
@@ -28,6 +27,7 @@ function collectClassString(json, bindingOpenChar, bindingCloseChar) {
     }
     var staticClassesString = staticClasses.join(' ');
     var dynamicClassesString = dynamicClasses.join(" + ' ' + ");
+    var hasStaticClasses = Boolean(staticClasses.length);
     var hasDynamicClasses = Boolean(dynamicClasses.length);
     if (hasStaticClasses && !hasDynamicClasses) {
         return "\"".concat(staticClassesString, "\"");

package/dist/src/generators/taro.d.ts

@@ -0,0 +1,9 @@
+import { ClassStyleMap } from '../helpers/styles/helpers';
+import { MitosisComponent } from '../types/mitosis-component';
+import { ToReactOptions } from './react';
+import { TranspilerGenerator } from '../types/transpiler';
+export declare const DEFAULT_Component_SET: Set<string>;
+export declare type ToTaroOptions = ToReactOptions;
+export declare const collectTaroStyles: (json: MitosisComponent) => ClassStyleMap;
+export declare const TagMap: Record<string, string>;
+export declare const componentToTaro: TranspilerGenerator<Partial<ToTaroOptions>>;

package/dist/src/generators/taro.js

@@ -0,0 +1,172 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToTaro = exports.TagMap = exports.collectTaroStyles = exports.DEFAULT_Component_SET = void 0;
+var json5_1 = __importDefault(require("json5"));
+var lodash_1 = require("lodash");
+var traverse_1 = __importDefault(require("traverse"));
+var fast_clone_1 = require("../helpers/fast-clone");
+var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+var react_1 = require("./react");
+var bindings_1 = require("../helpers/bindings");
+var merge_options_1 = require("../helpers/merge-options");
+// @tarojs/components
+exports.DEFAULT_Component_SET = new Set([
+    'View',
+    'Icon',
+    'Progress',
+    'RichText',
+    'Text',
+    'Button',
+    'Checkbox',
+    'CheckboxGroup',
+    'Form',
+    'Input',
+    'Label',
+    'Picker',
+    'PickerView',
+    'PickerViewColumn',
+    'Radio',
+    'RadioGroup',
+    'Slider',
+    'Switch',
+    'CoverImage',
+    'Textarea',
+    'CoverView',
+    'MovableArea',
+    'MovableView',
+    'ScrollView',
+    'Swiper',
+    'SwiperItem',
+    'Navigator',
+    'Audio',
+    'Camera',
+    'Image',
+    'LivePlayer',
+    'Video',
+    'Canvas',
+    'Ad',
+    'WebView',
+    'Block',
+    'Map',
+    'Slot',
+    'SlotView',
+    'Editor',
+    'MatchMedia',
+    'FunctionalPageNavigator',
+    'LivePusher',
+    'OfficialAccount',
+    'OpenData',
+    'NavigationBar',
+    'PageMeta',
+    'VoipRoom',
+    'AdCustom',
+]);
+// TODO: px to 2 px
+var collectTaroStyles = function (json) {
+    var styleMap = {};
+    var componentIndexes = {};
+    (0, traverse_1.default)(json).forEach(function (item) {
+        var _a;
+        if (!(0, is_mitosis_node_1.isMitosisNode)(item) || typeof ((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code) !== 'string') {
+            return;
+        }
+        var value = json5_1.default.parse(item.bindings.css.code);
+        delete item.bindings.css;
+        if (!(0, lodash_1.size)(value)) {
+            return;
+        }
+        for (var key in value) {
+            var propertyValue = value[key];
+            // convert px to 2 * px, PX to PX
+            if (typeof propertyValue === 'string' && propertyValue.match(/^\d/)) {
+                var newValue = parseFloat(propertyValue);
+                if (!isNaN(newValue)) {
+                    if (propertyValue.endsWith('px')) {
+                        newValue = 2 * newValue;
+                        value[key] = "".concat(newValue, "px");
+                    }
+                    else {
+                        value[key] = newValue;
+                    }
+                }
+            }
+        }
+        var componentName = (0, lodash_1.camelCase)(item.name || 'view');
+        var index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
+        var className = "".concat(componentName).concat(index);
+        item.bindings.style = (0, bindings_1.createSingleBinding)({ code: "styles.".concat(className) });
+        styleMap[className] = value;
+    });
+    return styleMap;
+};
+exports.collectTaroStyles = collectTaroStyles;
+exports.TagMap = {
+    span: 'Text',
+    button: 'Button',
+    input: 'Input',
+    img: 'Image',
+    form: 'Form',
+    textarea: 'Textarea',
+};
+/**
+ * Plugin that handles necessary transformations from React to React Native:
+ * - Converts DOM tags to @tarojs/components
+ * - Removes redundant `class`/`className` attributes
+ */
+var PROCESS_TARO_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            var TaroComponentsImports = { path: '@tarojs/components', imports: {} };
+            json.imports.push(TaroComponentsImports);
+            (0, traverse_1.default)(json).forEach(function (node) {
+                var _a, _b, _c, _d;
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    // TODO: More dom tags convert to  @tarojs/components
+                    if (!!exports.TagMap[node.name]) {
+                        TaroComponentsImports.imports[exports.TagMap[node.name]] = exports.TagMap[node.name];
+                        node.name = exports.TagMap[node.name];
+                    }
+                    else if (node.name.toLowerCase() === node.name) {
+                        TaroComponentsImports.imports.View = 'View';
+                        node.name = 'View';
+                    }
+                    if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) || ((_d = (_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.trim()) === null || _d === void 0 ? void 0 : _d.length)) {
+                        TaroComponentsImports.imports.Text = 'Text';
+                        node.name = 'Text';
+                    }
+                    if (node.properties.class) {
+                        delete node.properties.class;
+                    }
+                    if (node.properties.className) {
+                        delete node.properties.className;
+                    }
+                    if (node.bindings.class) {
+                        delete node.bindings.class;
+                    }
+                    if (node.bindings.className) {
+                        delete node.bindings.className;
+                    }
+                }
+            });
+        },
+    },
+}); };
+var DEFAULT_OPTIONS = {
+    stateType: 'useState',
+    plugins: [PROCESS_TARO_PLUGIN],
+};
+var componentToTaro = function (_options) {
+    if (_options === void 0) { _options = {}; }
+    return function (_a) {
+        var component = _a.component, path = _a.path;
+        var json = (0, fast_clone_1.fastClone)(component);
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options, {
+            type: 'taro',
+        });
+        return (0, react_1.componentToReact)(options)({ component: json, path: path });
+    };
+};
+exports.componentToTaro = componentToTaro;

package/dist/src/helpers/merge-options.d.ts

@@ -2,6 +2,6 @@ import { BaseTranspilerOptions } from '..';
 /**
  * Merges options while combining the `plugins` array.
  */
-export declare const mergeOptions: <T extends BaseTranspilerOptions>(a: T, b?: Partial<T>) => T & {
+export declare const mergeOptions: <T extends BaseTranspilerOptions>(a: T, b?: Partial<T>, c?: Partial<T> | undefined) => T & {
     plugins: NonNullable<T["plugins"]>;
 };

package/dist/src/helpers/merge-options.js

@@ -24,8 +24,8 @@ exports.mergeOptions = void 0;
 /**
  * Merges options while combining the `plugins` array.
  */
-var mergeOptions = function (a, b) {
+var mergeOptions = function (a, b, c) {
     if (b === void 0) { b = {}; }
-    return __assign(__assign(__assign({}, a), b), { plugins: __spreadArray(__spreadArray([], (a.plugins || []), true), (b.plugins || []), true) });
+    return __assign(__assign(__assign(__assign({}, a), b), c), { plugins: __spreadArray(__spreadArray(__spreadArray([], (a.plugins || []), true), (b.plugins || []), true), ((c === null || c === void 0 ? void 0 : c.plugins) || []), true) });
 };
 exports.mergeOptions = mergeOptions;

package/dist/src/index.d.ts

@@ -60,6 +60,7 @@ export * from './generators/template';
 export * from './generators/swift-ui';
 export * from './generators/lit';
 export * from './generators/react-native';
+export * from './generators/taro';
 export * from './helpers/is-mitosis-node';
 export * from './types/mitosis-node';
 export * from './types/mitosis-component';

package/dist/src/index.js

@@ -97,6 +97,7 @@ __exportStar(require("./generators/template"), exports);
 __exportStar(require("./generators/swift-ui"), exports);
 __exportStar(require("./generators/lit"), exports);
 __exportStar(require("./generators/react-native"), exports);
+__exportStar(require("./generators/taro"), exports);
 __exportStar(require("./helpers/is-mitosis-node"), exports);
 __exportStar(require("./types/mitosis-node"), exports);
 __exportStar(require("./types/mitosis-component"), exports);

package/dist/src/targets.d.ts

@@ -6,8 +6,8 @@ export declare const targets: {
     readonly html: import(".").TranspilerGenerator<import("./generators/html").ToHtmlOptions, string>;
     readonly mitosis: import(".").TranspilerGenerator<Partial<import("./generators/mitosis").ToMitosisOptions>, string>;
     readonly liquid: import(".").TranspilerGenerator<import("./generators/liquid").ToLiquidOptions, string>;
-    readonly react: import(".").TranspilerGenerator<import("./generators/react").ToReactOptions, string>;
-    readonly reactNative: import(".").TranspilerGenerator<import("./generators/react-native").ToReactNativeOptions, string>;
+    readonly react: import(".").TranspilerGenerator<Partial<import("./generators/react").ToReactOptions>, string>;
+    readonly reactNative: import(".").TranspilerGenerator<Partial<import("./generators/react-native").ToReactNativeOptions>, string>;
     readonly solid: import(".").TranspilerGenerator<Partial<import("./generators/solid/types").ToSolidOptions>, string>;
     readonly svelte: import(".").TranspilerGenerator<import("./generators/svelte/types").ToSvelteOptions, string>;
     readonly swift: import(".").TranspilerGenerator<import(".").BaseTranspilerOptions, string>;
@@ -19,7 +19,8 @@ export declare const targets: {
     readonly stencil: import(".").TranspilerGenerator<import("./generators/stencil").ToStencilOptions, string>;
     readonly qwik: import(".").TranspilerGenerator<import("./generators/qwik/component-generator").ToQwikOptions, string>;
     readonly marko: import(".").TranspilerGenerator<import("./generators/marko").ToMarkoOptions, string>;
-    readonly preact: import(".").TranspilerGenerator<import("./generators/react").ToReactOptions, string>;
+    readonly preact: import(".").TranspilerGenerator<Partial<import("./generators/react").ToReactOptions>, string>;
     readonly lit: import(".").TranspilerGenerator<import("./generators/lit").ToLitOptions, string>;
-    readonly rsc: import(".").TranspilerGenerator<import("./generators/rsc").ToRscOptions, string>;
+    readonly rsc: import(".").TranspilerGenerator<Partial<import("./generators/react").ToReactOptions>, string>;
+    readonly taro: import(".").TranspilerGenerator<Partial<import("./generators/react").ToReactOptions>, string>;
 };

package/dist/src/targets.js

@@ -20,6 +20,7 @@ var qwik_1 = require("./generators/qwik");
 var marko_1 = require("./generators/marko");
 var lit_1 = require("./generators/lit");
 var rsc_1 = require("./generators/rsc");
+var taro_1 = require("./generators/taro");
 exports.builder = builder_1.componentToBuilder;
 exports.targets = {
     alpine: alpine_1.componentToAlpine,
@@ -44,4 +45,5 @@ exports.targets = {
     preact: react_2.componentToPreact,
     lit: lit_1.componentToLit,
     rsc: rsc_1.componentToRsc,
+    taro: taro_1.componentToTaro,
 };

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

@@ -24,6 +24,10 @@ export declare type MitosisConfig = {
      * globs of files to transpile. Defaults to `src/*`.
      */
     files?: string | string[];
+    /**
+     * Optional list of globs to exclude from transpilation.
+     */
+    exclude?: string[];
     /**
      * The directory where overrides are stored. The structure of the override directory must match that of the source code,
      * with each target having its own sub-directory: `${overridesDir}/${target}/*`