@builder.io/mitosis 0.0.72-4 → 0.0.72

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

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToVue = void 0;
 var function_1 = require("fp-ts/lib/function");
+var lodash_1 = require("lodash");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var is_children_1 = __importDefault(require("../../helpers/is-children"));
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
@@ -186,9 +187,10 @@ var NODE_MAPPERS = {
 };
 var stringifyBinding = function (node) {
     return function (_a) {
+        var _b;
         var key = _a[0], value = _a[1];
-        if (key === '_spread') {
-            return '';
+        if (((_b = node.bindings[key]) === null || _b === void 0 ? void 0 : _b.type) === 'spread') {
+            return ''; // we handle this after
         }
         else if (key === 'class') {
             return " :class=\"_classStringToObject(".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value === null || value === void 0 ? void 0 : value.code, {
@@ -201,7 +203,7 @@ var stringifyBinding = function (node) {
             // TODO: proper babel transform to replace. Util for this
             var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value === null || value === void 0 ? void 0 : value.code);
             if (key.startsWith('on')) {
-                var _b = value.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
+                var _c = value.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
                 var event_1 = key.replace('on', '').toLowerCase();
                 if (event_1 === 'change' && node.name === 'input') {
                     event_1 = 'input';
@@ -233,7 +235,7 @@ var stringifyBinding = function (node) {
     };
 };
 var blockToVue = function (node, options, scope) {
-    var _a, _b;
+    var _a;
     var nodeMapper = NODE_MAPPERS[node.name];
     if (nodeMapper) {
         return nodeMapper(node, options, scope);
@@ -260,9 +262,6 @@ var blockToVue = function (node, options, scope) {
     }
     var str = '';
     str += "<".concat(node.name, " ");
-    if ((_b = node.bindings._spread) === null || _b === void 0 ? void 0 : _b.code) {
-        str += "v-bind=\"".concat((0, helpers_1.encodeQuotes)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._spread.code)), "\"");
-    }
     for (var key in node.properties) {
         var value = node.properties[key];
         if (key === 'className') {
@@ -282,6 +281,17 @@ var blockToVue = function (node, options, scope) {
     })
         .join('');
     str += stringifiedBindings;
+    // spreads
+    var spreads = (0, lodash_1.filter)(node.bindings, function (binding) { return (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread'; }).map(function (value) { return value === null || value === void 0 ? void 0 : value.code; });
+    if (spreads === null || spreads === void 0 ? void 0 : spreads.length) {
+        if (spreads.length > 1) {
+            var spreadsString = "{...".concat(spreads.join(', ...'), "}");
+            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(spreadsString)), "\"");
+        }
+        else {
+            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(spreads.join(''))), "\"");
+        }
+    }
     if (jsx_1.selfClosingTags.has(node.name)) {
         return str + ' />';
     }

package/dist/src/generators/vue/compositionApi.js

@@ -3,6 +3,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 };
 };
@@ -31,17 +40,43 @@ var getCompositionPropDefinition = function (_a) {
     }
     return str;
 };
+function shouldAppendValueToRef(path) {
+    var parent = path.parent, node = path.node;
+    if (core_1.types.isFunctionDeclaration(parent) && parent.id === node) {
+        return false;
+    }
+    if (core_1.types.isCallExpression(parent)) {
+        return false;
+    }
+    var isMemberExpression = core_1.types.isMemberExpression(parent);
+    if (isMemberExpression &&
+        core_1.types.isThisExpression(parent.object) &&
+        core_1.types.isProgram(path.scope.block) &&
+        path.scope.hasReference(node.name)) {
+        return false;
+    }
+    if (isMemberExpression &&
+        core_1.types.isIdentifier(parent.object) &&
+        core_1.types.isIdentifier(parent.property) &&
+        parent.property.name === node.name) {
+        return false;
+    }
+    if (Object.keys(path.scope.bindings).includes(path.node.name)) {
+        return false;
+    }
+    if (path.parentPath.listKey === 'arguments' || path.parentPath.listKey === 'params') {
+        return false;
+    }
+    return true;
+}
 function appendValueToRefs(input, component, options) {
-    var refKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'property'; }));
+    var refKeys = Object.keys(component.refs);
+    var stateKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'property'; }));
+    var allKeys = __spreadArray(__spreadArray([], refKeys, true), stateKeys, true);
     var output = (0, helpers_1.processBinding)({ code: input, options: options, json: component, includeProps: false });
     return (0, babel_transform_1.babelTransformExpression)(output, {
         Identifier: function (path) {
-            if (!(core_1.types.isFunctionDeclaration(path.parent) && path.parent.id === path.node) &&
-                !core_1.types.isCallExpression(path.parent) &&
-                (!core_1.types.isMemberExpression(path.parent) || core_1.types.isThisExpression(path.parent.object)) &&
-                path.parentPath.listKey !== 'arguments' &&
-                path.parentPath.listKey !== 'params' &&
-                refKeys.includes(path.node.name)) {
+            if (allKeys.includes(path.node.name) && shouldAppendValueToRef(path)) {
                 path.replaceWith(core_1.types.identifier("".concat(path.node.name, ".value")));
             }
         },

package/dist/src/helpers/has.d.ts

@@ -4,6 +4,6 @@ import { MitosisNode } from '../types/mitosis-node';
  * Test if the component has something
  *
  * e.g.
- *    const hasSpread = has(component, node => Boolean(node.bindings._spread));
+ *    const hasSpread = has(component, node => some(node.bindings, { type: 'spread' }));
  */
 export declare function has(json: MitosisComponent, test: (node: MitosisNode) => boolean): boolean;

package/dist/src/helpers/has.js

@@ -10,7 +10,7 @@ var is_mitosis_node_1 = require("./is-mitosis-node");
  * Test if the component has something
  *
  * e.g.
- *    const hasSpread = has(component, node => Boolean(node.bindings._spread));
+ *    const hasSpread = has(component, node => some(node.bindings, { type: 'spread' }));
  */
 function has(json, test) {
     var found = false;

package/dist/src/index.d.ts

@@ -39,12 +39,10 @@ export * from './generators/vue';
 export * from './generators/angular';
 export * from './generators/context/react';
 export * from './generators/context/qwik';
-export * from './generators/context/rsc';
 export * from './generators/context/solid';
 export * from './generators/context/vue';
 export * from './generators/context/svelte';
 export * from './generators/react';
-export * from './generators/rsc';
 export * from './generators/solid';
 export * from './generators/liquid';
 export * from './generators/builder';

package/dist/src/index.js

@@ -77,12 +77,10 @@ __exportStar(require("./generators/vue"), exports);
 __exportStar(require("./generators/angular"), exports);
 __exportStar(require("./generators/context/react"), exports);
 __exportStar(require("./generators/context/qwik"), exports);
-__exportStar(require("./generators/context/rsc"), exports);
 __exportStar(require("./generators/context/solid"), exports);
 __exportStar(require("./generators/context/vue"), exports);
 __exportStar(require("./generators/context/svelte"), exports);
 __exportStar(require("./generators/react"), exports);
-__exportStar(require("./generators/rsc"), exports);
 __exportStar(require("./generators/solid"), exports);
 __exportStar(require("./generators/liquid"), exports);
 __exportStar(require("./generators/builder"), exports);

package/dist/src/parsers/jsx/element-parser.js

@@ -238,8 +238,10 @@ var jsxElementToJson = function (node) {
                 // TODO: potentially like Vue store bindings and properties as array of key value pairs
                 // too so can do this accurately when order matters. Also tempting to not support spread,
                 // as some frameworks do not support it (e.g. Angular) tho Angular may be the only one
-                memo._spread = {
+                var key = (0, generator_1.default)(item.argument).code;
+                memo[key] = {
                     code: types.stringLiteral((0, generator_1.default)(item.argument).code).value,
+                    type: 'spread',
                 };
             }
             return memo;

package/dist/src/parsers/jsx/function-parser.d.ts

@@ -1,6 +1,7 @@
 import * as babel from '@babel/core';
 import { JSONOrNode } from '../../types/json';
 import { Context } from './types';
+export declare function generateUseStyleCode(expression: babel.types.CallExpression): string;
 /**
  * Parses function declarations within the Mitosis copmonent's body to JSON
  */

package/dist/src/parsers/jsx/function-parser.js

@@ -46,7 +46,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentFunctionToJson = void 0;
+exports.componentFunctionToJson = exports.generateUseStyleCode = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var trace_reference_to_module_path_1 = require("../../helpers/trace-reference-to-module-path");
@@ -58,6 +58,10 @@ var helpers_1 = require("./helpers");
 var component_types_1 = require("./component-types");
 var element_parser_1 = require("./element-parser");
 var types = babel.types;
+function generateUseStyleCode(expression) {
+    return (0, generator_1.default)(expression.arguments[0]).code.replace(/(^("|'|`)|("|'|`)$)/g, '');
+}
+exports.generateUseStyleCode = generateUseStyleCode;
 /**
  * Parses function declarations within the Mitosis copmonent's body to JSON
  */
@@ -187,7 +191,7 @@ var componentFunctionToJson = function (node, context) {
                         }
                     }
                     else if (expression.callee.name === hooks_1.HOOKS.STYLE) {
-                        context.builder.component.style = (0, generator_1.default)(expression.arguments[0]).code.replace(/(^("|'|`)|("|'|`)$)/g, '');
+                        context.builder.component.style = generateUseStyleCode(expression);
                     }
                 }
             }

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

@@ -25,6 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.collectMetadata = exports.METADATA_HOOK_NAME = void 0;
 var babel = __importStar(require("@babel/core"));
+var hooks_1 = require("../../constants/hooks");
+var function_parser_1 = require("./function-parser");
 var helpers_1 = require("./helpers");
 var types = babel.types;
 var getHook = function (node) {
@@ -54,14 +56,20 @@ var collectMetadata = function (nodes, component, options) {
         if (!hook) {
             return true;
         }
-        if (types.isIdentifier(hook.callee) && hookNames.has(hook.callee.name)) {
-            try {
-                component.meta[hook.callee.name] = (0, helpers_1.parseCodeJson)(hook.arguments[0]);
-                return false;
+        if (types.isIdentifier(hook.callee)) {
+            if (hookNames.has(hook.callee.name)) {
+                try {
+                    component.meta[hook.callee.name] = (0, helpers_1.parseCodeJson)(hook.arguments[0]);
+                    return false;
+                }
+                catch (e) {
+                    console.error("Error parsing metadata hook ".concat(hook.callee.name));
+                    throw e;
+                }
             }
-            catch (e) {
-                console.error("Error parsing metadata hook ".concat(hook.callee.name));
-                throw e;
+            else if (hook.callee.name === hooks_1.HOOKS.STYLE) {
+                component.style = (0, function_parser_1.generateUseStyleCode)(hook);
+                return false;
             }
         }
         return true;

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

@@ -85,7 +85,7 @@ function mapStateIdentifiers(json) {
         }
     }
     (0, traverse_1.default)(json).forEach(function (item) {
-        var _a;
+        var _a, _b;
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             for (var key in item.bindings) {
                 var value = item.bindings[key];
@@ -96,6 +96,9 @@ function mapStateIdentifiers(json) {
                     if ((_a = value.arguments) === null || _a === void 0 ? void 0 : _a.length) {
                         item.bindings[key].arguments = value.arguments;
                     }
+                    if ((_b = value.type) === null || _b === void 0 ? void 0 : _b.length) {
+                        item.bindings[key].type = value.type;
+                    }
                 }
             }
             if (item.bindings.className) {

package/dist/src/targets.d.ts

@@ -20,5 +20,4 @@ export declare const targets: {
     readonly marko: import(".").TranspilerGenerator<import("./generators/marko").ToMarkoOptions, string>;
     readonly preact: import(".").TranspilerGenerator<import("./generators/react").ToReactOptions, string>;
     readonly lit: import(".").TranspilerGenerator<import("./generators/lit").ToLitOptions, string>;
-    readonly rsc: import(".").TranspilerGenerator<import("./generators/rsc").ToRscOptions, string>;
 };

package/dist/src/targets.js

@@ -18,7 +18,6 @@ var stencil_1 = require("./generators/stencil");
 var qwik_1 = require("./generators/qwik");
 var marko_1 = require("./generators/marko");
 var lit_1 = require("./generators/lit");
-var rsc_1 = require("./generators/rsc");
 exports.builder = builder_1.componentToBuilder;
 exports.targets = {
     angular: angular_1.componentToAngular,
@@ -41,5 +40,4 @@ exports.targets = {
     marko: marko_1.componentToMarko,
     preact: react_2.componentToPreact,
     lit: lit_1.componentToLit,
-    rsc: rsc_1.componentToRsc,
 };

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

@@ -1,4 +1,9 @@
 import { JSONObject } from './json';
+export declare type Binding = {
+    code: string;
+    arguments?: string[];
+    type?: 'spread';
+};
 export declare type BaseNode = {
     '@type': '@builder.io/mitosis/node';
     meta: JSONObject;
@@ -29,10 +34,7 @@ export declare type BaseNode = {
      * ```
      */
     bindings: {
-        [key: string]: {
-            code: string;
-            arguments?: string[];
-        } | undefined;
+        [key: string]: Binding | undefined;
     };
     children: MitosisNode[];
 };