@builder.io/mitosis 0.5.17 → 0.5.19

package/dist/src/generators/angular/index.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -35,6 +58,7 @@ const traverse_nodes_1 = require("../../helpers/traverse-nodes");
 const plugins_1 = require("../../modules/plugins");
 const symbol_processor_1 = require("../../symbols/symbol-processor");
 const mitosis_node_1 = require("../../types/mitosis-node");
+const babel = __importStar(require("@babel/core"));
 const function_1 = require("fp-ts/lib/function");
 const lodash_1 = require("lodash");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
@@ -43,6 +67,7 @@ const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const on_mount_1 = require("../helpers/on-mount");
 const helpers_2 = require("./helpers");
 const types_1 = require("./types");
+const { types } = babel;
 const mappers = {
     Fragment: (root, json, options, blockOptions) => {
         return `<ng-container>${json.children
@@ -438,12 +463,31 @@ const traverseToGetAllDynamicComponents = (json, options, blockOptions) => {
         dynamicTemplate,
     };
 };
-const processAngularCode = ({ contextVars, outputVars, domRefs, stateVars, replaceWith, }) => (code) => (0, function_1.pipe)((0, strip_state_and_props_refs_1.DO_NOT_USE_VARS_TRANSFORMS)(code, {
+/**
+ * Prefixes state identifiers with this.
+ * e.g. state.foo --> this.foo
+ */
+const prefixState = (code) => {
+    return (0, replace_identifiers_1.replaceNodes)({
+        code,
+        nodeMaps: [
+            {
+                from: types.identifier('state'),
+                to: types.thisExpression(),
+            },
+        ],
+    }).trim();
+};
+const processAngularCode = ({ contextVars, outputVars, domRefs, replaceWith, }) => (code) => (0, function_1.pipe)((0, strip_state_and_props_refs_1.DO_NOT_USE_VARS_TRANSFORMS)(code, {
     contextVars,
     domRefs,
     outputVars,
-    stateVars,
-}), (newCode) => (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith }));
+}), 
+/**
+ * Only prefix state that is in the Angular class component.
+ * Do not prefix state referenced in the template
+ */
+replaceWith === 'this' ? prefixState : (x) => x, (newCode) => (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith }));
 const isASimpleProperty = (code) => {
     const expressions = ['==', '===', '!=', '!==', '<', '>', '<=', '>='];
     const invalidChars = ['{', '}', '(', ')', 'typeof'];
@@ -578,7 +622,6 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     // TODO: Why is 'outputs' used here and shouldn't it be typed in packages/core/src/types/metadata.ts
     const metaOutputVars = (useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.outputs) || [];
     const outputVars = (0, lodash_1.uniq)([...metaOutputVars, ...(0, get_prop_functions_1.getPropFunctions)(json)]);
-    const stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
     const options = (0, merge_options_1.initializeOptions)({
         target: 'angular',
         component: _component,
@@ -595,7 +638,6 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
                         contextVars,
                         outputVars,
                         domRefs: Array.from((0, get_refs_1.getRefs)(json)),
-                        stateVars,
                     }), (code) => {
                         const allMethodNames = Object.entries(json.state)
                             .filter(([_, value]) => (value === null || value === void 0 ? void 0 : value.type) === 'function' || (value === null || value === void 0 ? void 0 : value.type) === 'method')
@@ -731,7 +773,6 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
                 contextVars,
                 outputVars,
                 domRefs: Array.from(domRefs),
-                stateVars,
             })(value);
         },
     });
@@ -851,7 +892,6 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
                 contextVars,
                 outputVars,
                 domRefs: Array.from(domRefs),
-                stateVars,
             })(argument)}`
             : ''};`;
     })

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

@@ -57,10 +57,10 @@ const NODE_MAPPERS = {
         return `<>{${slotProp} ${hasChildren ? `|| (${renderChildren()})` : ''}}</>`;
     },
     Fragment(json, options, component) {
-        const wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
-        return `${wrap ? (0, helpers_1.getFragment)('open', options) : ''}${json.children
+        const wrap = (0, helpers_1.isFragmentWithKey)(json) || (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
+        return `${wrap ? (0, helpers_1.getFragment)('open', options, json) : ''}${json.children
             .map((item) => (0, exports.blockToReact)(item, options, component, wrap))
-            .join('\n')}${wrap ? (0, helpers_1.getFragment)('close', options) : ''}`;
+            .join('\n')}${wrap ? (0, helpers_1.getFragment)('close', options, json) : ''}`;
     },
     For(_json, options, component, insideJsx) {
         var _a;

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

@@ -4,6 +4,7 @@ import { ToReactOptions } from './types';
 export declare const processBinding: (str: string, options: ToReactOptions) => string;
 export declare const openFrag: (options: ToReactOptions) => string;
 export declare const closeFrag: (options: ToReactOptions) => string;
-export declare function getFragment(type: 'open' | 'close', options: ToReactOptions): string;
+export declare const isFragmentWithKey: (node?: MitosisNode) => boolean;
+export declare function getFragment(type: 'open' | 'close', options: ToReactOptions, node?: MitosisNode): string;
 export declare const wrapInFragment: (json: MitosisComponent | MitosisNode) => boolean;
 export declare function processTagReferences(json: MitosisComponent, options: ToReactOptions): void;

package/dist/src/generators/react/helpers.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
+exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.isFragmentWithKey = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 const lodash_1 = require("lodash");
@@ -23,9 +23,21 @@ const openFrag = (options) => getFragment('open', options);
 exports.openFrag = openFrag;
 const closeFrag = (options) => getFragment('close', options);
 exports.closeFrag = closeFrag;
-function getFragment(type, options) {
-    const tagName = options.preact ? 'Fragment' : '';
-    return type === 'open' ? `<${tagName}>` : `</${tagName}>`;
+const isFragmentWithKey = (node) => (node === null || node === void 0 ? void 0 : node.name) === 'Fragment' && !!(node === null || node === void 0 ? void 0 : node.bindings['key']);
+exports.isFragmentWithKey = isFragmentWithKey;
+function getFragment(type, options, node) {
+    var _a;
+    let tag = '';
+    if (node && node.bindings && (0, exports.isFragmentWithKey)(node)) {
+        tag = options.preact ? 'Fragment' : 'React.Fragment';
+        if (type === 'open') {
+            tag += ` key={${(_a = node.bindings['key']) === null || _a === void 0 ? void 0 : _a.code}}`;
+        }
+    }
+    else if (options.preact) {
+        tag = 'Fragment';
+    }
+    return type === 'open' ? `<${tag}>` : `</${tag}>`;
 }
 exports.getFragment = getFragment;
 const wrapInFragment = (json) => json.children.length !== 1;

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

@@ -50,7 +50,8 @@ const blockToSolid = (json, component, options, insideJsx) => {
     </For>`;
     }
     let str = '';
-    if (json.name === 'Fragment') {
+    const isFragmentWithoutKey = json.name === 'Fragment' && !json.bindings.key;
+    if (isFragmentWithoutKey) {
         str += '<';
     }
     else {
@@ -121,7 +122,7 @@ const blockToSolid = (json, component, options, insideJsx) => {
             .map((item) => (0, exports.blockToSolid)(item, component, options, true))
             .join('\n');
     }
-    if (json.name === 'Fragment') {
+    if (isFragmentWithoutKey) {
         str += '</>';
     }
     else {

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

@@ -5,5 +5,5 @@ declare const types: typeof babel.types;
 /**
  * Parses function declarations within the Mitosis copmonent's body to JSON
  */
-export declare const componentFunctionToJson: (node: babel.types.FunctionDeclaration, context: Context) => JSONOrNode;
+export declare const componentFunctionToJson: (node: babel.types.FunctionDeclaration, context: Context, stateToScope: string[]) => JSONOrNode;
 export {};

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

@@ -43,7 +43,7 @@ const { types } = babel;
 /**
  * Parses function declarations within the Mitosis copmonent's body to JSON
  */
-const componentFunctionToJson = (node, context) => {
+const componentFunctionToJson = (node, context, stateToScope) => {
     var _a;
     const hooks = {
         onMount: [],
@@ -206,6 +206,7 @@ const componentFunctionToJson = (node, context) => {
                     code: (0, generator_1.default)(item).code,
                     type: 'function',
                 };
+                stateToScope.push(item.id.name);
             }
         }
         if (types.isVariableDeclaration(item)) {
@@ -247,6 +248,7 @@ const componentFunctionToJson = (node, context) => {
                                 propertyType,
                             };
                         }
+                        stateToScope.push(varName);
                         // Typescript Parameter
                         if (types.isTSTypeParameterInstantiation(init.typeParameters)) {
                             state[varName].typeParameter = (0, generator_1.default)(init.typeParameters.params[0]).code;

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

@@ -84,6 +84,7 @@ function parseJsx(jsx, _options = {}) {
                 babelrc: false,
                 presets: [typescriptBabelPreset],
             })) === null || _a === void 0 ? void 0 : _a.code;
+    const stateToScope = [];
     const output = babel.transform(jsxToUse, {
         configFile: false,
         babelrc: false,
@@ -145,7 +146,7 @@ function parseJsx(jsx, _options = {}) {
                                         };
                                     },
                                 });
-                                path.replaceWith((0, ast_1.jsonToAst)((0, function_parser_1.componentFunctionToJson)(node, context)));
+                                path.replaceWith((0, ast_1.jsonToAst)((0, function_parser_1.componentFunctionToJson)(node, context, stateToScope)));
                             }
                         }
                     },
@@ -189,7 +190,7 @@ function parseJsx(jsx, _options = {}) {
         .replace(/^\({/, '{')
         .replace(/}\);$/, '}'));
     const mitosisComponent = (0, json_1.tryParseJson)(stringifiedMitosisComponent);
-    (0, state_1.mapStateIdentifiers)(mitosisComponent);
+    (0, state_1.mapStateIdentifiers)(mitosisComponent, stateToScope);
     (0, context_1.extractContextComponents)(mitosisComponent);
     mitosisComponent.subComponents = subComponentFunctions.map((item) => parseJsx(item, options));
     const signalTypeImportName = (0, signals_1.getSignalImportName)(jsxToUse);

package/dist/src/parsers/jsx/state.d.ts

@@ -5,6 +5,13 @@ import { ObjectExpression } from '@babel/types';
  * e.g.
  *   text -> state.text
  *   setText(...) -> state.text = ...
+ *
+ * This also applies to components that use both useState and useStore.
+ * e.g.
+ * const [foo, setFoo] = useState(1)
+ * const store = useStore({
+ *   bar() { return foo } // becomes bar() { return state.foo }
+ * })`
  */
-export declare function mapStateIdentifiers(json: MitosisComponent): void;
+export declare function mapStateIdentifiers(json: MitosisComponent, stateProperties: string[]): void;
 export declare const parseStateObjectToMitosisState: (object: ObjectExpression, isState?: boolean) => MitosisState;

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

@@ -97,9 +97,15 @@ const consolidateClassBindings = (item) => {
  * e.g.
  *   text -> state.text
  *   setText(...) -> state.text = ...
+ *
+ * This also applies to components that use both useState and useStore.
+ * e.g.
+ * const [foo, setFoo] = useState(1)
+ * const store = useStore({
+ *   bar() { return foo } // becomes bar() { return state.foo }
+ * })`
  */
-function mapStateIdentifiers(json) {
-    const stateProperties = Object.keys(json.state);
+function mapStateIdentifiers(json, stateProperties) {
     const plugin = (0, process_code_1.createCodeProcessorPlugin)(() => (code) => mapStateIdentifiersInExpression(code, stateProperties));
     plugin(json);
     for (const key in json.targetBlocks) {
@@ -198,7 +204,8 @@ const processStateObjectSlice = (item) => {
                 type: 'function',
             };
         }
-        const n = getCleanedStateCode((0, helpers_1.parseCode)({ ...item, returnType: null }));
+        const method = (0, types_1.objectMethod)(item.kind, item.key, item.params, item.body, false, false, item.async);
+        const n = getCleanedStateCode((0, helpers_1.parseCode)({ ...method, returnType: null }));
         const isGetter = item.kind === 'get';
         return {
             code: n,

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.17",
+  "version": "0.5.19",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {