@builder.io/mitosis 0.5.18 → 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/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) {

package/package.json

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