@builder.io/mitosis 0.4.0 → 0.4.2

package/dist/src/generators/rsc.js

@@ -1,26 +1,15 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToRsc = void 0;
-var legacy_1 = __importDefault(require("neotraverse/legacy"));
-var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var merge_options_1 = require("../helpers/merge-options");
-var nullable_1 = require("../helpers/nullable");
-var rsc_1 = require("./helpers/rsc");
-var react_1 = require("./react");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+const merge_options_1 = require("../helpers/merge-options");
+const nullable_1 = require("../helpers/nullable");
+const rsc_1 = require("./helpers/rsc");
+const react_1 = require("./react");
 /**
  * Transform react to be RSC compatible, such as
  * - remove event listeners
@@ -28,18 +17,18 @@ var react_1 = require("./react");
  * - remove refs
  * - transform context to prop drilling
  */
-var RSC_TRANSFORM_PLUGIN = function () { return ({
+const RSC_TRANSFORM_PLUGIN = () => ({
     json: {
-        pre: function (json) {
+        pre: (json) => {
             json.hooks.onMount = [];
             delete json.hooks.onUnMount;
             delete json.hooks.onUpdate;
             json.refs = {};
             json.context.get = {};
             json.context.set = {};
-            (0, legacy_1.default)(json).forEach(function (node) {
+            (0, legacy_1.default)(json).forEach((node) => {
                 if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
-                    var isComponent = node.name.match(/[A-Z]/);
+                    const isComponent = node.name.match(/[A-Z]/);
                     // if (isComponent) {
                     //   // Drill context down, aka
                     //   // function (props) { return <Component _context{props._context} /> }
@@ -61,23 +50,28 @@ var RSC_TRANSFORM_PLUGIN = function () { return ({
             });
         },
     },
-}); };
-var RscOptions = {
+});
+const RscOptions = {
     plugins: [RSC_TRANSFORM_PLUGIN],
     stateType: 'variables',
 };
-var componentToRsc = function (_options) {
-    if (_options === void 0) { _options = {}; }
-    return function (_a) {
-        var _b, _c, _d, _e, _f;
-        var component = _a.component, path = _a.path;
-        if (!(0, nullable_1.checkIsDefined)((_c = (_b = component.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.rsc) === null || _c === void 0 ? void 0 : _c.componentType) &&
-            !(0, rsc_1.checkIfIsClientComponent)(component)) {
-            component.meta.useMetadata = __assign(__assign({}, component.meta.useMetadata), { rsc: __assign(__assign({}, (_d = component.meta.useMetadata) === null || _d === void 0 ? void 0 : _d.rsc), { componentType: 'server' }) });
-        }
-        var isRSC = ((_f = (_e = component.meta.useMetadata) === null || _e === void 0 ? void 0 : _e.rsc) === null || _f === void 0 ? void 0 : _f.componentType) === 'server';
-        var options = (0, merge_options_1.mergeOptions)(__assign({ rsc: true }, (isRSC ? RscOptions : {})), _options);
-        return (0, react_1.componentToReact)(options)({ component: component, path: path });
-    };
+const componentToRsc = (_options = {}) => ({ component, path }) => {
+    var _a, _b, _c, _d, _e;
+    if (!(0, nullable_1.checkIsDefined)((_b = (_a = component.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.rsc) === null || _b === void 0 ? void 0 : _b.componentType) &&
+        !(0, rsc_1.checkIfIsClientComponent)(component)) {
+        component.meta.useMetadata = {
+            ...component.meta.useMetadata,
+            rsc: {
+                ...(_c = component.meta.useMetadata) === null || _c === void 0 ? void 0 : _c.rsc,
+                componentType: 'server',
+            },
+        };
+    }
+    const isRSC = ((_e = (_d = component.meta.useMetadata) === null || _d === void 0 ? void 0 : _d.rsc) === null || _e === void 0 ? void 0 : _e.componentType) === 'server';
+    const options = (0, merge_options_1.mergeOptions)({
+        rsc: true,
+        ...(isRSC ? RscOptions : {}),
+    }, _options);
+    return (0, react_1.componentToReact)(options)({ component, path });
 };
 exports.componentToRsc = componentToRsc;

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

@@ -1,74 +1,78 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToSolid = void 0;
-var babel_transform_1 = require("../../helpers/babel-transform");
-var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-var typescript_1 = require("../../helpers/typescript");
-var mitosis_node_1 = require("../../types/mitosis-node");
-var core_1 = require("@babel/core");
-var lodash_1 = require("lodash");
-var html_tags_1 = require("../../constants/html_tags");
-var styles_1 = require("./helpers/styles");
-var ATTTRIBUTE_MAPPERS = {
+const babel_transform_1 = require("../../helpers/babel-transform");
+const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const typescript_1 = require("../../helpers/typescript");
+const mitosis_node_1 = require("../../types/mitosis-node");
+const core_1 = require("@babel/core");
+const lodash_1 = require("lodash");
+const html_tags_1 = require("../../constants/html_tags");
+const styles_1 = require("./helpers/styles");
+const ATTTRIBUTE_MAPPERS = {
 // for: 'htmlFor',
 };
-var transformAttributeName = function (name) {
+const transformAttributeName = (name) => {
     if ((0, typescript_1.objectHasKey)(ATTTRIBUTE_MAPPERS, name))
         return ATTTRIBUTE_MAPPERS[name];
     return name;
 };
-var blockToSolid = function (_a) {
-    var _b, _c;
-    var json = _a.json, options = _a.options, component = _a.component;
+const blockToSolid = ({ json, options, component, }) => {
+    var _a, _b;
     if (json.properties._text) {
         return json.properties._text;
     }
-    if ((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) {
-        return "{".concat(json.bindings._text.code, "}");
+    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+        return `{${json.bindings._text.code}}`;
     }
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        var needsWrapper = json.children.length !== 1;
+        const needsWrapper = json.children.length !== 1;
         // The SolidJS `<For>` component has a special index() signal function.
         // https://www.solidjs.com/docs/latest#%3Cfor%3E
-        return "<For each={".concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code, "}>\n    {(").concat(json.scope.forName, ", _index) => {\n      const ").concat(json.scope.indexName || 'index', " = _index();\n      return ").concat(needsWrapper ? '<>' : '').concat(json.children
+        return `<For each={${(_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code}}>
+    {(${json.scope.forName}, _index) => {
+      const ${json.scope.indexName || 'index'} = _index();
+      return ${needsWrapper ? '<>' : ''}${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (child) { return (0, exports.blockToSolid)({ component: component, json: child, options: options }); }), "}}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
+            .map((child) => (0, exports.blockToSolid)({ component, json: child, options }))}}}
+      ${needsWrapper ? '</>' : ''}
+    </For>`;
     }
-    var str = '';
+    let str = '';
     if (json.name === 'Fragment') {
         str += '<';
     }
     else {
-        str += "<".concat(json.name, " ");
+        str += `<${json.name} `;
     }
     if (json.name === 'Show' && json.meta.else) {
-        str += "fallback={".concat((0, exports.blockToSolid)({ component: component, json: json.meta.else, options: options }), "}");
+        str += `fallback={${(0, exports.blockToSolid)({ component, json: json.meta.else, options })}}`;
     }
-    var classString = (0, styles_1.collectClassString)(json, options);
+    const classString = (0, styles_1.collectClassString)(json, options);
     if (classString) {
-        str += " class=".concat(classString, " ");
+        str += ` class=${classString} `;
     }
-    for (var key in json.properties) {
-        var value = json.properties[key];
-        var newKey = transformAttributeName(key);
-        str += " ".concat(newKey, "=\"").concat(value, "\" ");
+    for (const key in json.properties) {
+        const value = json.properties[key];
+        const newKey = transformAttributeName(key);
+        str += ` ${newKey}="${value}" `;
     }
-    for (var key in json.bindings) {
-        var _d = json.bindings[key], code = _d.code, _e = _d.arguments, cusArg = _e === void 0 ? ['event'] : _e, type = _d.type;
+    for (const key in json.bindings) {
+        const { code, arguments: cusArg = ['event'], type } = json.bindings[key];
         if (!code)
             continue;
         if (type === 'spread') {
-            str += " {...(".concat(code, ")} ");
+            str += ` {...(${code})} `;
         }
         else if (key.startsWith('on')) {
-            var useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
-            str += " ".concat(useKey, "={(").concat(cusArg.join(','), ") => ").concat(code, "} ");
+            const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+            str += ` ${useKey}={(${cusArg.join(',')}) => ${code}} `;
         }
         else if (key === 'ref' && options.typescript) {
-            str += " ".concat(key, "={").concat(code, "!} ");
+            str += ` ${key}={${code}!} `;
         }
         else {
-            var useValue = code;
+            let useValue = code;
             if (key === 'style') {
                 // Convert camelCase keys to kebab-case
                 // TODO: support more than top level objects, may need
@@ -76,24 +80,23 @@ var blockToSolid = function (_a) {
                 // object literal, such as ternaries and other expression
                 // types
                 useValue = (0, babel_transform_1.babelTransformExpression)(code, {
-                    ObjectExpression: function (path) {
+                    ObjectExpression(path) {
                         // TODO: limit to top level objects only
-                        for (var _i = 0, _a = path.node.properties; _i < _a.length; _i++) {
-                            var property = _a[_i];
+                        for (const property of path.node.properties) {
                             if (core_1.types.isObjectProperty(property)) {
                                 if (core_1.types.isIdentifier(property.key) || core_1.types.isStringLiteral(property.key)) {
-                                    var key_1 = core_1.types.isIdentifier(property.key)
+                                    const key = core_1.types.isIdentifier(property.key)
                                         ? property.key.name
                                         : property.key.value;
-                                    property.key = core_1.types.stringLiteral((0, lodash_1.kebabCase)(key_1));
+                                    property.key = core_1.types.stringLiteral((0, lodash_1.kebabCase)(key));
                                 }
                             }
                         }
                     },
                 });
             }
-            var newKey = transformAttributeName(key);
-            str += " ".concat(newKey, "={").concat(useValue, "} ");
+            const newKey = transformAttributeName(key);
+            str += ` ${newKey}={${useValue}} `;
         }
     }
     if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
@@ -103,14 +106,14 @@ var blockToSolid = function (_a) {
     if (json.children) {
         str += json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToSolid)({ component: component, json: item, options: options }); })
+            .map((item) => (0, exports.blockToSolid)({ component, json: item, options }))
             .join('\n');
     }
     if (json.name === 'Fragment') {
         str += '</>';
     }
     else {
-        str += "</".concat(json.name, ">");
+        str += `</${json.name}>`;
     }
     return str;
 };

package/dist/src/generators/solid/helpers/styles.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.collectClassString = void 0;
 // This should really be a preprocessor mapping the `class` attribute binding based on what other values have
 // to make this more pluggable
-var collectClassString = function (json, options) {
+const collectClassString = (json, options) => {
     var _a, _b, _c;
-    var staticClasses = [];
+    const staticClasses = [];
     if (json.properties.class) {
         staticClasses.push(json.properties.class);
         delete json.properties.class;
@@ -14,7 +14,7 @@ var collectClassString = function (json, options) {
         staticClasses.push(json.properties.className);
         delete json.properties.className;
     }
-    var dynamicClasses = [];
+    const dynamicClasses = [];
     if (typeof ((_a = json.bindings.class) === null || _a === void 0 ? void 0 : _a.code) === 'string') {
         dynamicClasses.push(json.bindings.class.code);
         delete json.bindings.class;
@@ -26,21 +26,21 @@ var collectClassString = function (json, options) {
     if (typeof ((_c = json.bindings.css) === null || _c === void 0 ? void 0 : _c.code) === 'string' &&
         json.bindings.css.code.trim().length > 4 &&
         options.stylesType === 'styled-components') {
-        dynamicClasses.push("css(".concat(json.bindings.css.code, ")"));
+        dynamicClasses.push(`css(${json.bindings.css.code})`);
     }
     delete json.bindings.css;
-    var staticClassesString = staticClasses.join(' ');
-    var dynamicClassesString = dynamicClasses.join(" + ' ' + ");
-    var hasStaticClasses = Boolean(staticClasses.length);
-    var hasDynamicClasses = Boolean(dynamicClasses.length);
+    const staticClassesString = staticClasses.join(' ');
+    const dynamicClassesString = dynamicClasses.join(" + ' ' + ");
+    const hasStaticClasses = Boolean(staticClasses.length);
+    const hasDynamicClasses = Boolean(dynamicClasses.length);
     if (hasStaticClasses && !hasDynamicClasses) {
-        return "\"".concat(staticClassesString, "\"");
+        return `"${staticClassesString}"`;
     }
     if (hasDynamicClasses && !hasStaticClasses) {
-        return "{".concat(dynamicClassesString, "}");
+        return `{${dynamicClassesString}}`;
     }
     if (hasDynamicClasses && hasStaticClasses) {
-        return "{\"".concat(staticClassesString, " \" + ").concat(dynamicClassesString, "}");
+        return `{"${staticClassesString} " + ${dynamicClassesString}}`;
     }
     return null;
 };