@builder.io/mitosis 0.4.6 → 0.4.7

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

@@ -26,3 +26,10 @@ export declare const addCodeToOnInit: (root: MitosisComponent, code: string) =>
  * @param code The code to be added to the onInit and onUpdate hooks.
  */
 export declare const makeReactiveState: (root: MitosisComponent, stateName: string, code: string) => void;
+export declare const getDefaultProps: ({ defaultProps }: MitosisComponent) => string;
+/**
+ * if any state "property" is trying to access state.* or props.*
+ * then we need to move them to onInit where they can be accessed
+ * @param json The MitosisComponent.
+ */
+export declare const transformState: (json: MitosisComponent) => void;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+exports.transformState = exports.getDefaultProps = exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 const HELPER_FUNCTIONS = (isTs) => ({
     useObjectWrapper: `useObjectWrapper(...args${isTs ? ': any[]' : ''}) {
     let obj = {}
@@ -83,3 +84,39 @@ const makeReactiveState = (root, stateName, code) => {
     (0, exports.addCodeToOnUpdate)(root, code);
 };
 exports.makeReactiveState = makeReactiveState;
+const getDefaultProps = ({ defaultProps }) => {
+    if (!defaultProps)
+        return '';
+    const defalutPropsString = Object.keys(defaultProps)
+        .map((prop) => {
+        var _a;
+        const value = defaultProps.hasOwnProperty(prop) ? (_a = defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code : 'undefined';
+        return `${prop}: ${value}`;
+    })
+        .join(',');
+    return `const defaultProps = {${defalutPropsString}};\n`;
+};
+exports.getDefaultProps = getDefaultProps;
+/**
+ * if any state "property" is trying to access state.* or props.*
+ * then we need to move them to onInit where they can be accessed
+ * @param json The MitosisComponent.
+ */
+const transformState = (json) => {
+    Object.entries(json.state)
+        .reverse()
+        .forEach(([key, value]) => {
+        var _a;
+        if ((value === null || value === void 0 ? void 0 : value.type) === 'property') {
+            if (value.code && (value.code.includes('state.') || value.code.includes('props.'))) {
+                const code = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value.code, { replaceWith: 'this' });
+                json.state[key].code = 'null';
+                if (!((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)) {
+                    json.hooks.onInit = { code: '' };
+                }
+                json.hooks.onInit.code = `\nthis.${key} = ${code};\n${json.hooks.onInit.code}`;
+            }
+        }
+    });
+};
+exports.transformState = transformState;

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

@@ -14,6 +14,7 @@ const get_props_1 = require("../../helpers/get-props");
 const get_props_ref_1 = require("../../helpers/get-props-ref");
 const get_refs_1 = require("../../helpers/get-refs");
 const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const get_typed_function_1 = require("../../helpers/get-typed-function");
 const indent_1 = require("../../helpers/indent");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const is_upper_case_1 = require("../../helpers/is-upper-case");
@@ -568,25 +569,6 @@ const classPropertiesPlugin = () => ({
         },
     },
 });
-// if any state "property" is trying to access state.* or props.*
-// then we need to move them to onInit where they can be accessed
-const transformState = (json) => {
-    Object.entries(json.state)
-        .reverse()
-        .forEach(([key, value]) => {
-        var _a;
-        if ((value === null || value === void 0 ? void 0 : value.type) === 'property') {
-            if (value.code && (value.code.includes('state.') || value.code.includes('props.'))) {
-                const code = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value.code, { replaceWith: 'this' });
-                json.state[key].code = 'null';
-                if (!((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)) {
-                    json.hooks.onInit = { code: '' };
-                }
-                json.hooks.onInit.code = `\nthis.${key} = ${code};\n${json.hooks.onInit.code}`;
-            }
-        }
-    });
-};
 const componentToAngular = (userOptions = {}) => ({ component: _component }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     // Make a copy we can safely mutate, similar to babel's toolchain
@@ -742,16 +724,23 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
         childComponents,
         nativeAttributes: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeAttributes) !== null && _d !== void 0 ? _d : [],
     });
-    transformState(json);
+    (0, helpers_2.transformState)(json);
     const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
         format: 'class',
-        valueMapper: processAngularCode({
-            replaceWith: 'this',
-            contextVars,
-            outputVars,
-            domRefs: Array.from(domRefs),
-            stateVars,
-        }),
+        withType: options.typescript,
+        valueMapper: (code, type, typeParameter) => {
+            let value = code;
+            if (type !== 'data') {
+                value = (0, get_typed_function_1.getTypedFunction)(code, options.typescript, typeParameter);
+            }
+            return processAngularCode({
+                replaceWith: 'this',
+                contextVars,
+                outputVars,
+                domRefs: Array.from(domRefs),
+                stateVars,
+            })(value);
+        },
     });
     const refsForObjSpread = (0, get_refs_1.getRefs)(json, 'spreadRef');
     const hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
@@ -782,20 +771,6 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     Object.entries(json.meta.angularConfig || {}).forEach(([key, value]) => {
         componentMetadata[key] = value;
     });
-    const getPropsDefinition = ({ json }) => {
-        if (!json.defaultProps)
-            return '';
-        const defalutPropsString = Object.keys(json.defaultProps)
-            .map((prop) => {
-            var _a;
-            const value = json.defaultProps.hasOwnProperty(prop)
-                ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-                : 'undefined';
-            return `${prop}: ${value}`;
-        })
-            .join(',');
-        return `const defaultProps = {${defalutPropsString}};\n`;
-    };
     const hasConstructor = Boolean(injectables.length) || dynamicComponents.size || refsForObjSpread.size;
     const angularCoreImports = [
         ...(outputs.length ? ['Output', 'EventEmitter'] : []),
@@ -814,7 +789,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     ${options.standalone ? `import { CommonModule } from '@angular/common';` : ''}
 
     ${json.types ? json.types.join('\n') : ''}
-    ${getPropsDefinition({ json })}
+    ${(0, helpers_2.getDefaultProps)(json)}
     ${(0, render_imports_1.renderPreComponent)({
         explicitImportFileExtension: options.explicitImportFileExtension,
         component: json,

package/dist/src/generators/angular/types.d.ts

@@ -1,3 +1,4 @@
+import { MitosisComponent } from '../../types/mitosis-component';
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export declare const BUILT_IN_COMPONENTS: Set<string>;
 export interface ToAngularOptions extends BaseTranspilerOptions {
@@ -8,6 +9,11 @@ export interface ToAngularOptions extends BaseTranspilerOptions {
     importMapper?: Function;
     bootstrapMapper?: Function;
     visuallyIgnoreHostElement?: boolean;
+    experimental?: {
+        injectables?: (variableName: string, variableType: string) => string;
+        inject?: boolean;
+        outputs?: (json: MitosisComponent, variableName: string) => string;
+    };
 }
 export declare const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions;
 export type AngularMetadata = {

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

@@ -5,19 +5,21 @@ const patterns_1 = require("../../helpers/patterns");
 const FUNCTION_HACK_PLUGIN = () => ({
     json: {
         pre: (json) => {
-            var _a, _b;
             for (const key in json.state) {
-                const value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
-                const type = (_b = json.state[key]) === null || _b === void 0 ? void 0 : _b.type;
+                const state = json.state[key];
+                const value = state === null || state === void 0 ? void 0 : state.code;
+                const type = state === null || state === void 0 ? void 0 : state.type;
                 if (typeof value === 'string' && type === 'method') {
                     const newValue = (0, patterns_1.prefixWithFunction)(value);
                     json.state[key] = {
+                        ...state,
                         code: newValue,
                         type: 'method',
                     };
                 }
                 else if (typeof value === 'string' && type === 'function') {
                     json.state[key] = {
+                        ...state,
                         code: value,
                         type: 'method',
                     };

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

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseStateCode = exports.processHookCode = void 0;
 const capitalize_1 = require("../../helpers/capitalize");
+const get_typed_function_1 = require("../../helpers/get-typed-function");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const patterns_1 = require("../../helpers/patterns");
 const transform_state_setters_1 = require("../../helpers/transform-state-setters");
@@ -34,24 +35,24 @@ const processStateValue = (options) => {
         if (!stateVal) {
             return '';
         }
-        const getDefaultCase = () => `const [${key}, ${getSetStateFnName(key)}] = useState(() => (${mapValue(value)}))`;
-        const value = stateVal.code || '';
+        let value = stateVal.code || '';
         const type = stateVal.type;
-        if (typeof value === 'string') {
-            switch (type) {
-                case 'getter':
-                    return (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
-                case 'function':
-                    return mapValue(value);
-                case 'method':
-                    return (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
-                default:
-                    return getDefaultCase();
-            }
+        const typeParameter = stateVal.typeParameter;
+        const stateType = options.typescript && stateVal.typeParameter ? `<${stateVal.typeParameter}>` : '';
+        let result = '';
+        if (type === 'getter') {
+            result = (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
+        }
+        else if (type === 'function') {
+            result = mapValue(value);
+        }
+        else if (type === 'method') {
+            result = (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
         }
         else {
-            return getDefaultCase();
+            return `const [${key}, ${getSetStateFnName(key)}] = useState${stateType}(() => (${mapValue(value)}))`;
         }
+        return (0, get_typed_function_1.getTypedFunction)(result, options.typescript, typeParameter);
     };
 };
 const getUseStateCode = (json, options) => {

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateCompositionApiScript = void 0;
 const dedent_1 = require("../../helpers/dedent");
 const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const get_typed_function_1 = require("../../helpers/get-typed-function");
 const json5_1 = __importDefault(require("json5"));
 const lodash_1 = require("lodash");
 const helpers_1 = require("./helpers");
@@ -49,6 +50,12 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         getters: false,
         functions: true,
         format: 'variables',
+        valueMapper: (code, type, typeParameter) => {
+            if (type != 'data') {
+                return (0, get_typed_function_1.getTypedFunction)(code, isTs, typeParameter);
+            }
+            return code;
+        },
     });
     if (template.includes('_classStringToObject')) {
         methods += ` function _classStringToObject(str${isTs ? ': string' : ''}) {

package/dist/src/helpers/get-state-object-string.d.ts

@@ -8,6 +8,7 @@ interface GetStateObjectStringOptions {
     valueMapper?: ValueMapper;
     format?: 'object' | 'class' | 'variables';
     keyPrefix?: string;
+    withType?: boolean;
 }
 export declare const getMemberObjectString: (object: MitosisComponent['state'], userOptions?: GetStateObjectStringOptions) => string;
 export declare const stringifyContextValue: (object: MitosisContext['value'], userOptions?: GetStateObjectStringOptions) => string;

package/dist/src/helpers/get-state-object-string.js

@@ -8,37 +8,39 @@ const DEFAULT_OPTIONS = {
     data: true,
     functions: true,
     getters: true,
+    withType: false,
 };
-const convertStateMemberToString = ({ data, format, functions, getters, keyPrefix, valueMapper }) => ([key, state]) => {
+const convertStateMemberToString = ({ data, format, functions, getters, keyPrefix, valueMapper, withType }) => ([key, state]) => {
     const keyValueDelimiter = format === 'object' ? ':' : '=';
     if (!state) {
         return undefined;
     }
     const { code, typeParameter } = state;
+    const type = withType && typeParameter ? `:${typeParameter}` : '';
     switch (state.type) {
         case 'function': {
-            if (functions === false || typeof code !== 'string') {
+            if (!functions) {
                 return undefined;
             }
             return `${keyPrefix} ${key} ${keyValueDelimiter} ${valueMapper(code, 'function', typeParameter, key)}`;
         }
         case 'method': {
-            if (functions === false || typeof code !== 'string') {
+            if (!functions) {
                 return undefined;
             }
             return `${keyPrefix} ${valueMapper(code, 'function', typeParameter, key)}`;
         }
         case 'getter': {
-            if (getters === false || typeof code !== 'string') {
+            if (!getters) {
                 return undefined;
             }
             return `${keyPrefix} ${valueMapper(code, 'getter', typeParameter, key)}`;
         }
         case 'property': {
-            if (data === false) {
+            if (!data) {
                 return undefined;
             }
-            return `${keyPrefix} ${key}${keyValueDelimiter} ${valueMapper(code, 'data', typeParameter, key)}`;
+            return `${keyPrefix} ${key}${type}${keyValueDelimiter} ${valueMapper(code, 'data', typeParameter, key)}`;
         }
         default:
             break;

package/dist/src/helpers/get-typed-function.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Get functions with typescript typing
+ */
+export declare const getTypedFunction: (code: string, typescript?: boolean, typeParameter?: string) => string;

package/dist/src/helpers/get-typed-function.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTypedFunction = void 0;
+/**
+ * Get functions with typescript typing
+ */
+const getTypedFunction = (code, typescript, typeParameter) => {
+    if (!typeParameter || !typescript) {
+        return code;
+    }
+    const firstParenthesisIndex = code.indexOf('{');
+    // The function should have at least one {
+    if (firstParenthesisIndex < 0) {
+        return code;
+    }
+    const preType = code.slice(0, firstParenthesisIndex - 1);
+    const postType = code.slice(firstParenthesisIndex, code.length);
+    return [preType, ': ', typeParameter, postType].join('');
+};
+exports.getTypedFunction = getTypedFunction;

package/dist/src/helpers/map-refs.js

@@ -36,12 +36,13 @@ const mapRefs = (component, mapper) => {
                     const isGet = stateVal.type === 'getter';
                     const isSet = Boolean(value.match(patterns_1.SETTER));
                     component.state[key] = {
+                        ...stateVal,
                         code: replaceRefsInString(value.replace(/^(get |set )?/, 'function '), refs, mapper).replace(/^function /, isGet ? 'get ' : isSet ? 'set ' : ''),
-                        type: stateVal.type,
                     };
                     break;
                 case 'function':
                     component.state[key] = {
+                        ...stateVal,
                         code: replaceRefsInString(value, refs, mapper),
                         type: 'function',
                     };

package/dist/src/helpers/strip-state-and-props-refs.js

@@ -71,14 +71,14 @@ const stripStateAndPropsRefs = (code, _options = {}) => {
         ...DEFAULT_OPTIONS,
         ..._options,
     };
-    if (includeProps !== false) {
+    if (includeProps) {
         newCode = (0, replace_identifiers_1.replacePropsIdentifier)(replaceWith)(newCode);
         // TODO: webcomponent edge-case
         if (/el\.this\.props/.test(newCode)) {
             newCode = newCode.replace(/el\.this\.props/g, 'el.props');
         }
     }
-    if (includeState !== false) {
+    if (includeState) {
         newCode = (0, replace_identifiers_1.replaceStateIdentifier)(replaceWith)(newCode);
     }
     return newCode;

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

@@ -258,6 +258,14 @@ const componentFunctionToJson = (node, context) => {
                     if (types.isObjectExpression(firstArg)) {
                         const useStoreState = (0, state_1.parseStateObjectToMitosisState)(firstArg);
                         Object.assign(state, useStoreState);
+                        const stateKeys = Object.keys(useStoreState);
+                        if (types.isTSTypeParameterInstantiation(init.typeParameters)) {
+                            const type = (0, generator_1.default)(init.typeParameters.params[0]);
+                            // Type for store has to be an object so we can use it like this
+                            for (const key of stateKeys) {
+                                state[key].typeParameter = `${type.code}["${key}"]`;
+                            }
+                        }
                     }
                 }
                 else if (init.callee.name === hooks_1.HOOKS.CONTEXT) {

package/package.json

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