@builder.io/mitosis 0.0.45-4 → 0.0.47

package/dist/src/generators/qwik/styles.js

@@ -0,0 +1,94 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderStyles = exports.collectStyles = void 0;
+var json5_1 = __importDefault(require("json5"));
+var dash_case_1 = require("../../helpers/dash-case");
+var src_generator_1 = require("./src-generator");
+function collectStyles(children, styleMap) {
+    var nodes = __spreadArray([], children, true);
+    while (nodes.length) {
+        var child = nodes.shift();
+        nodes.push.apply(nodes, child.children);
+        var css = child.bindings.css;
+        if (css && typeof css == 'string') {
+            var value = __assign({ CLASS_NAME: 'c' + hashCode(css) }, json5_1.default.parse(css));
+            styleMap.set(css, value);
+        }
+    }
+    return styleMap;
+}
+exports.collectStyles = collectStyles;
+function hashCode(text) {
+    var hash = 0, i, chr;
+    if (text.length === 0)
+        return hash;
+    for (i = 0; i < text.length; i++) {
+        chr = text.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return Number(Math.abs(hash)).toString(36);
+}
+function renderStyles(styles) {
+    return function () {
+        var _this = this;
+        this.emit('`', src_generator_1.NL, src_generator_1.INDENT);
+        var mediaStyles = [];
+        styles.forEach(function (styles) {
+            _this.emit('.', styles.CLASS_NAME, /*'.🏷️�', WS,*/ '{', src_generator_1.NL, src_generator_1.INDENT);
+            for (var key in styles) {
+                if (key !== 'CLASS_NAME' &&
+                    Object.prototype.hasOwnProperty.call(styles, key)) {
+                    var value = styles[key];
+                    if (value && typeof value == 'object') {
+                        mediaStyles.push(styles.CLASS_NAME, key, value);
+                    }
+                    else {
+                        _this.emit((0, dash_case_1.dashCase)(key), ':', src_generator_1.WS, value, ';', src_generator_1.NL);
+                    }
+                }
+            }
+            _this.emit(src_generator_1.UNINDENT, '}', src_generator_1.NL);
+        });
+        while (mediaStyles.length) {
+            var className = mediaStyles.shift();
+            var mediaKey = mediaStyles.shift();
+            var mediaObj = mediaStyles.shift();
+            this.emit(mediaKey, src_generator_1.WS, '{', src_generator_1.INDENT, src_generator_1.NL);
+            this.emit('.', className, /*'.🏷️�', WS,*/ '{', src_generator_1.NL, src_generator_1.INDENT);
+            for (var key in mediaObj) {
+                if (Object.prototype.hasOwnProperty.call(mediaObj, key)) {
+                    var value = mediaObj[key];
+                    this.emit((0, dash_case_1.dashCase)(key), ':', src_generator_1.WS, value, ';', src_generator_1.NL);
+                }
+            }
+            this.emit(src_generator_1.UNINDENT, '}', src_generator_1.NL);
+            this.emit(src_generator_1.UNINDENT, '}', src_generator_1.NL);
+        }
+        this.emit(src_generator_1.UNINDENT, '`');
+    };
+}
+exports.renderStyles = renderStyles;

package/dist/src/generators/react-native.d.ts

@@ -1,12 +1,9 @@
 import { ClassStyleMap } from '../helpers/collect-styles';
-import { Plugin } from '../modules/plugins';
 import { MitosisComponent } from '../types/mitosis-component';
-declare type ToReactNativeOptions = {
-    prettier?: boolean;
+import { BaseTranspilerOptions, Transpiler } from '../types/config';
+export interface ToReactNativeOptions extends BaseTranspilerOptions {
     stylesType?: 'emotion' | 'react-native';
     stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
-    plugins?: Plugin[];
-};
+}
 export declare const collectReactNativeStyles: (json: MitosisComponent) => ClassStyleMap;
-export declare const componentToReactNative: (componentJson: MitosisComponent, options?: ToReactNativeOptions) => string;
-export {};
+export declare const componentToReactNative: (options?: ToReactNativeOptions) => Transpiler;

package/dist/src/generators/react-native.js

@@ -25,12 +25,12 @@ var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
 var collectReactNativeStyles = function (json) {
     var styleMap = {};
     var componentIndexes = {};
-    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)) {
             if (typeof item.bindings.css === 'string') {
                 var value = json5_1.default.parse(item.bindings.css);
                 delete item.bindings.css;
-                if (!lodash_1.size(value)) {
+                if (!(0, lodash_1.size)(value)) {
                     return;
                 }
                 // Style properties like `"20px"` need to be numbers like `20` for react native
@@ -44,15 +44,15 @@ var collectReactNativeStyles = function (json) {
                     }
                     if (stylePropertiesThatMustBeNumber.has(key) &&
                         typeof value[key] !== 'number') {
-                        console.warn("Style key " + key + " must be a number, but had value `" + value[key] + "`");
+                        console.warn("Style key ".concat(key, " must be a number, but had value `").concat(value[key], "`"));
                         delete value[key];
                     }
                 }
-                var componentName = lodash_1.camelCase(item.name || 'view');
+                var componentName = (0, lodash_1.camelCase)(item.name || 'view');
                 var index = (componentIndexes[componentName] =
                     (componentIndexes[componentName] || 0) + 1);
-                var className = "" + componentName + index;
-                item.bindings.style = "styles." + className;
+                var className = "".concat(componentName).concat(index);
+                item.bindings.style = "styles.".concat(className);
                 styleMap[className] = value;
             }
         }
@@ -60,22 +60,25 @@ var collectReactNativeStyles = function (json) {
     return styleMap;
 };
 exports.collectReactNativeStyles = collectReactNativeStyles;
-var componentToReactNative = function (componentJson, options) {
+var componentToReactNative = function (options) {
     if (options === void 0) { options = {}; }
-    var json = fast_clone_1.fastClone(componentJson);
-    traverse_1.default(json).forEach(function (node) {
-        var _a, _b, _c;
-        if (is_mitosis_node_1.isMitosisNode(node)) {
-            // TODO: handle TextInput, Image, etc
-            if (node.name.toLowerCase() === node.name) {
-                node.name = 'View';
-            }
-            if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
-                ((_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.length)) {
-                node.name = 'Text';
+    return function (_a) {
+        var component = _a.component, path = _a.path;
+        var json = (0, fast_clone_1.fastClone)(component);
+        (0, traverse_1.default)(json).forEach(function (node) {
+            var _a, _b, _c;
+            if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                // TODO: handle TextInput, Image, etc
+                if (node.name.toLowerCase() === node.name) {
+                    node.name = 'View';
+                }
+                if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
+                    ((_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.length)) {
+                    node.name = 'Text';
+                }
             }
-        }
-    });
-    return react_1.componentToReact(json, __assign(__assign({}, options), { stylesType: options.stylesType || 'react-native', type: 'native' }));
+        });
+        return (0, react_1.componentToReact)(__assign(__assign({}, options), { stylesType: options.stylesType || 'react-native', type: 'native' }))({ component: json, path: path });
+    };
 };
 exports.componentToReactNative = componentToReactNative;

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

@@ -1,14 +1,10 @@
-import { Plugin } from '../modules/plugins';
-import { MitosisComponent } from '../types/mitosis-component';
+import { BaseTranspilerOptions, Transpiler } from '../types/config';
 import { MitosisNode } from '../types/mitosis-node';
-declare type ToReactOptions = {
-    prettier?: boolean;
+export interface ToReactOptions extends BaseTranspilerOptions {
     stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native';
     stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
     format?: 'lite' | 'safe';
     type?: 'dom' | 'native';
-    plugins?: Plugin[];
-};
+}
 export declare const blockToReact: (json: MitosisNode, options: ToReactOptions) => string;
-export declare const componentToReact: (componentJson: MitosisComponent, reactOptions?: ToReactOptions) => string;
-export {};
+export declare const componentToReact: (reactOptions?: ToReactOptions) => Transpiler;