@builder.io/mitosis 0.0.56-13 → 0.0.56-14

package/dist/src/index.d.ts

@@ -1,7 +1,7 @@
 export * from './flow';
 export declare type Context<T> = {};
 export declare const useState: <T>(obj: T) => T;
-export declare const useRef: () => any;
+export declare const useRef: <T>(obj?: void | T | null | undefined) => T;
 export declare const useContext: <T = {
     [key: string]: any;
 }>(key: Context<T>) => T;
@@ -12,7 +12,7 @@ export declare const setContext: <T = {
     [key: string]: any;
 }>(key: Context<T>, value: Partial<T>) => void;
 export declare const onMount: (fn: () => any) => any;
-export declare const onUpdate: (fn: () => any, deps?: any[] | undefined) => any;
+export declare const onUpdate: (fn: () => any, deps?: any[]) => any;
 export declare const onCreate: (fn: () => any) => any;
 export declare const onInit: (fn: () => any) => any;
 export declare const onUnMount: (fn: () => any) => any;

package/dist/src/index.js

@@ -19,7 +19,7 @@ __exportStar(require("./flow"), exports);
 // These compile away
 var useState = function (obj) { return obj; };
 exports.useState = useState;
-var useRef = function () { return null; };
+var useRef = function (obj) { return obj; };
 exports.useRef = useRef;
 var useContext = function (key) {
     return null;

package/dist/src/parsers/builder.d.ts

@@ -27,30 +27,27 @@ export declare function extractStateHook(code: string): {
     state: any;
 };
 export declare function convertExportDefaultToReturn(code: string): string;
-export declare const createBuilderElement: (options?: Partial<BuilderElement> | undefined) => BuilderElement;
+export declare const createBuilderElement: (options?: Partial<BuilderElement>) => BuilderElement;
 export declare const isBuilderElement: (el: unknown) => el is BuilderElement;
 export declare const builderContentToMitosisComponent: (builderContent: BuilderContent, options?: BuilderToMitosisOptions) => {
     subComponents: {
         name: string;
         '@type': "@builder.io/mitosis/component";
         imports: import("..").MitosisImport[];
+        exports?: import("..").MitosisExport | undefined;
         meta: import("../types/json").JSONObject & {
             useMetadata?: import("../types/json").JSONObject | undefined;
         };
         inputs: import("..").MitosisComponentInput[];
         state: import("../types/json").JSONObject;
         context: {
-            get: {
-                [key: string]: {
-                    name: string;
-                    path: string;
-                };
-            };
-            set: {
-                [key: string]: {
-                    name: string;
-                    value?: import("../types/json").JSONObject | undefined;
-                };
+            get: import("..").ContextGet;
+            set: import("..").ContextSet;
+        };
+        refs: {
+            [useRef: string]: {
+                typeParameter?: string | undefined;
+                argument: string;
             };
         };
         hooks: {
@@ -64,27 +61,27 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         };
         children: MitosisNode[];
         subComponents: import("..").MitosisComponent[];
+        types?: string[] | undefined;
+        interfaces?: string[] | undefined;
+        propsTypeRef?: string | undefined;
     }[];
     '@type': "@builder.io/mitosis/component";
     name: string;
     imports: import("..").MitosisImport[];
+    exports?: import("..").MitosisExport | undefined;
     meta: import("../types/json").JSONObject & {
         useMetadata?: import("../types/json").JSONObject | undefined;
     };
     inputs: import("..").MitosisComponentInput[];
     state: import("../types/json").JSONObject;
     context: {
-        get: {
-            [key: string]: {
-                name: string;
-                path: string;
-            };
-        };
-        set: {
-            [key: string]: {
-                name: string;
-                value?: import("../types/json").JSONObject | undefined;
-            };
+        get: import("..").ContextGet;
+        set: import("..").ContextSet;
+    };
+    refs: {
+        [useRef: string]: {
+            typeParameter?: string | undefined;
+            argument: string;
         };
     };
     hooks: {
@@ -97,5 +94,8 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         onUpdate?: import("..").extendedHook[] | undefined;
     };
     children: MitosisNode[];
+    types?: string[] | undefined;
+    interfaces?: string[] | undefined;
+    propsTypeRef?: string | undefined;
 };
 export {};

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

@@ -2,12 +2,13 @@ import * as babel from '@babel/core';
 import { MitosisComponent } from '../types/mitosis-component';
 export declare const selfClosingTags: Set<string>;
 export declare const createFunctionStringLiteral: (node: babel.types.Node) => babel.types.StringLiteral;
-export declare const createFunctionStringLiteralObjectProperty: (key: babel.types.Expression, node: babel.types.Node) => babel.types.ObjectProperty;
+export declare const createFunctionStringLiteralObjectProperty: (key: babel.types.PrivateName | babel.types.Expression, node: babel.types.Node) => babel.types.ObjectProperty;
 export declare const parseStateObject: (object: babel.types.ObjectExpression) => any;
 export declare const METADATA_HOOK_NAME = "useMetadata";
 declare type ParseMitosisOptions = {
     format: 'react' | 'simple';
     jsonHookNames?: string[];
+    compileAwayPackages?: string[];
 };
 /**
  * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by

package/dist/src/parsers/jsx.js

@@ -59,6 +59,7 @@ var create_mitosis_component_1 = require("../helpers/create-mitosis-component");
 var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var replace_idenifiers_1 = require("../helpers/replace-idenifiers");
+var get_bindings_1 = require("../helpers/get-bindings");
 var replace_new_lines_in_strings_1 = require("../helpers/replace-new-lines-in-strings");
 var json_1 = require("../helpers/json");
 var jsxPlugin = require('@babel/plugin-syntax-jsx');
@@ -172,12 +173,28 @@ var parseCodeJson = function (node) {
     var code = (0, generator_1.default)(node).code;
     return (0, json_1.tryParseJson)(code);
 };
+var getPropsTypeRef = function (node) {
+    var param = node.params[0];
+    // TODO: component function params name must be props
+    if (babel.types.isIdentifier(param) &&
+        param.name === 'props' &&
+        babel.types.isTSTypeAnnotation(param.typeAnnotation)) {
+        var paramIdentifier = babel.types.variableDeclaration('let', [
+            babel.types.variableDeclarator(param),
+        ]);
+        return (0, generator_1.default)(paramIdentifier)
+            .code.replace(/^let\sprops:\s+/, '')
+            .replace(/;/g, '');
+    }
+    return undefined;
+};
 var componentFunctionToJson = function (node, context) {
     var _a;
     var hooks = {};
     var state = {};
     var accessedContext = {};
     var setContext = {};
+    var refs = {};
     for (var _i = 0, _b = node.body.body; _i < _b.length; _i++) {
         var item = _b[_i];
         if (types.isExpressionStatement(item)) {
@@ -191,12 +208,22 @@ var componentFunctionToJson = function (node, context) {
                             var key = keyNode.name;
                             var keyPath = (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(context.builder.component.imports, key);
                             var valueNode = expression.arguments[1];
-                            setContext[keyPath] = {
-                                name: keyNode.name,
-                                value: valueNode && types.isObjectExpression(valueNode)
-                                    ? (0, exports.parseStateObject)(valueNode)
-                                    : undefined,
-                            };
+                            if (valueNode) {
+                                if (types.isObjectExpression(valueNode)) {
+                                    var value = (0, exports.parseStateObject)(valueNode);
+                                    setContext[keyPath] = {
+                                        name: keyNode.name,
+                                        value: value,
+                                    };
+                                }
+                                else {
+                                    var ref = (0, generator_1.default)(valueNode).code;
+                                    setContext[keyPath] = {
+                                        name: keyNode.name,
+                                        ref: ref,
+                                    };
+                                }
+                            }
                         }
                     }
                     else if (expression.callee.name === 'onMount' ||
@@ -320,6 +347,27 @@ var componentFunctionToJson = function (node, context) {
                                     path: (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(context.builder.component.imports, name_1),
                                 };
                             }
+                            else {
+                                var varName = declaration.id.name;
+                                var name_2 = (0, generator_1.default)(firstArg).code;
+                                accessedContext[varName] = {
+                                    name: name_2,
+                                    path: '',
+                                };
+                            }
+                        }
+                    }
+                    else if (init.callee.name === 'useRef') {
+                        if (types.isIdentifier(declaration.id)) {
+                            var firstArg = init.arguments[0];
+                            var varName = declaration.id.name;
+                            refs[varName] = {
+                                argument: (0, generator_1.default)(firstArg).code,
+                            };
+                            // Typescript Parameter
+                            if (types.isTSTypeParameterInstantiation(init.typeParameters)) {
+                                refs[varName].typeParameter = (0, generator_1.default)(init.typeParameters.params[0]).code;
+                            }
                         }
                     }
                 }
@@ -336,10 +384,21 @@ var componentFunctionToJson = function (node, context) {
             children.push(jsxElementToJson(value));
         }
     }
-    return (0, create_mitosis_component_1.createMitosisComponent)(__assign(__assign({}, context.builder.component), { name: (_a = node.id) === null || _a === void 0 ? void 0 : _a.name, state: state, children: children, hooks: hooks, context: {
+    var localExports = context.builder.component.exports;
+    if (localExports) {
+        var bindingsCode_1 = (0, get_bindings_1.getBindingsCode)(children);
+        Object.keys(localExports).forEach(function (name) {
+            var found = bindingsCode_1.find(function (code) {
+                return code.match(new RegExp("\\b".concat(name, "\\b")));
+            });
+            localExports[name].usedInLocal = Boolean(found);
+        });
+        context.builder.component.exports = localExports;
+    }
+    return (0, create_mitosis_component_1.createMitosisComponent)(__assign(__assign({}, context.builder.component), { name: (_a = node.id) === null || _a === void 0 ? void 0 : _a.name, state: state, children: children, refs: refs, hooks: hooks, context: {
             get: accessedContext,
             set: setContext,
-        } }));
+        }, propsTypeRef: getPropsTypeRef(node) }));
 };
 var jsxElementToJson = function (node) {
     if (types.isJSXText(node)) {
@@ -658,10 +717,10 @@ function extractContextComponents(json) {
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             if (item.name.endsWith('.Provider')) {
                 var value = (_b = (_a = item.bindings) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.code;
-                var name_2 = item.name.split('.')[0];
-                var refPath = (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(json.imports, name_2);
+                var name_3 = item.name.split('.')[0];
+                var refPath = (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(json.imports, name_3);
                 json.context.set[refPath] = {
-                    name: name_2,
+                    name: name_3,
                     value: value
                         ? (0, exports.parseStateObject)(expressionToNode(value))
                         : undefined,
@@ -679,6 +738,26 @@ function extractContextComponents(json) {
 var isImportOrDefaultExport = function (node) {
     return types.isExportDefaultDeclaration(node) || types.isImportDeclaration(node);
 };
+var isTypeOrInterface = function (node) {
+    return types.isTSTypeAliasDeclaration(node) ||
+        types.isTSInterfaceDeclaration(node) ||
+        (types.isExportNamedDeclaration(node) &&
+            types.isTSTypeAliasDeclaration(node.declaration)) ||
+        (types.isExportNamedDeclaration(node) &&
+            types.isTSInterfaceDeclaration(node.declaration));
+};
+var collectTypes = function (node, context) {
+    var typeStr = (0, generator_1.default)(node).code;
+    var _a = context.builder.component.types, types = _a === void 0 ? [] : _a;
+    types.push(typeStr);
+    context.builder.component.types = types.filter(Boolean);
+};
+var collectInterfaces = function (node, context) {
+    var interfaceStr = (0, generator_1.default)(node).code;
+    var _a = context.builder.component.interfaces, interfaces = _a === void 0 ? [] : _a;
+    interfaces.push(interfaceStr);
+    context.builder.component.interfaces = interfaces.filter(Boolean);
+};
 /**
  * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by
  * each generator function.
@@ -712,8 +791,38 @@ function parseJsx(jsx, options) {
                             component: (0, create_mitosis_component_1.createMitosisComponent)(),
                         };
                         var keepStatements = path.node.body.filter(function (statement) {
-                            return isImportOrDefaultExport(statement);
+                            return isImportOrDefaultExport(statement) ||
+                                isTypeOrInterface(statement);
+                        });
+                        var exportsOrLocalVariables = path.node.body.filter(function (statement) {
+                            return !isImportOrDefaultExport(statement) &&
+                                !isTypeOrInterface(statement) &&
+                                !types.isExpressionStatement(statement);
                         });
+                        context.builder.component.exports = exportsOrLocalVariables.reduce(function (pre, node) {
+                            var name, isFunction;
+                            if (babel.types.isExportNamedDeclaration(node) &&
+                                babel.types.isVariableDeclaration(node.declaration) &&
+                                babel.types.isIdentifier(node.declaration.declarations[0].id)) {
+                                name = node.declaration.declarations[0].id.name;
+                                isFunction = babel.types.isFunction(node.declaration.declarations[0].init);
+                            }
+                            else if (babel.types.isVariableDeclaration(node) &&
+                                babel.types.isIdentifier(node.declarations[0].id)) {
+                                name = node.declarations[0].id.name;
+                                isFunction = babel.types.isFunction(node.declarations[0].init);
+                            }
+                            if (name) {
+                                pre[name] = {
+                                    code: (0, generator_1.default)(node).code,
+                                    isFunction: isFunction,
+                                };
+                            }
+                            else {
+                                console.warn('export statement without name', node);
+                            }
+                            return pre;
+                        }, {});
                         var cutStatements = path.node.body.filter(function (statement) { return !isImportOrDefaultExport(statement); });
                         subComponentFunctions = path.node.body
                             .filter(function (node) {
@@ -731,15 +840,20 @@ function parseJsx(jsx, options) {
                     FunctionDeclaration: function (path, context) {
                         var node = path.node;
                         if (types.isIdentifier(node.id)) {
-                            var name_3 = node.id.name;
-                            if (name_3[0].toUpperCase() === name_3[0]) {
+                            var name_4 = node.id.name;
+                            if (name_4[0].toUpperCase() === name_4[0]) {
                                 path.replaceWith(jsonToAst(componentFunctionToJson(node, context)));
                             }
                         }
                     },
                     ImportDeclaration: function (path, context) {
                         // @builder.io/mitosis or React imports compile away
-                        if (['react', '@builder.io/mitosis', '@emotion/react'].includes(path.node.source.value)) {
+                        var customPackages = (options === null || options === void 0 ? void 0 : options.compileAwayPackages) || [];
+                        if (__spreadArray([
+                            'react',
+                            '@builder.io/mitosis',
+                            '@emotion/react'
+                        ], customPackages, true).includes(path.node.source.value)) {
                             path.remove();
                             return;
                         }
@@ -769,6 +883,22 @@ function parseJsx(jsx, options) {
                         var node = path.node;
                         path.replaceWith(jsonToAst(jsxElementToJson(node)));
                     },
+                    ExportNamedDeclaration: function (path, context) {
+                        var node = path.node;
+                        var newTypeStr = (0, generator_1.default)(node).code;
+                        if (babel.types.isTSInterfaceDeclaration(node.declaration)) {
+                            collectInterfaces(path.node, context);
+                        }
+                        if (babel.types.isTSTypeAliasDeclaration(node.declaration)) {
+                            collectTypes(path.node, context);
+                        }
+                    },
+                    TSTypeAliasDeclaration: function (path, context) {
+                        collectTypes(path.node, context);
+                    },
+                    TSInterfaceDeclaration: function (path, context) {
+                        collectInterfaces(path.node, context);
+                    },
                 },
             }); },
         ],

package/dist/src/symbols/symbol-processor.js

@@ -81,7 +81,7 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
         if (cssCode) {
             collectComponentStyles && collectComponentStyles.push((0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), cssCode));
         }
-        while (path[0 /* DEPTH */] >= this.path.length) {
+        while (path[0 /* Path.DEPTH */] >= this.path.length) {
             path.shift();
             path.shift();
         }
@@ -97,10 +97,10 @@ function convertBuilderContentToSymbolHierarchy(content, _a) {
                         collectComponentState[id] = state;
                     }
                 }
-                if (path[0 /* DEPTH */] < this.path.length) {
+                if (path[0 /* Path.DEPTH */] < this.path.length) {
                     var id = getIdFromSymbol(el);
                     hierarchy[id] = [];
-                    addIfMissing(hierarchy[path[1 /* ID */]], id);
+                    addIfMissing(hierarchy[path[1 /* Path.ID */]], id);
                     path.unshift(this.path.length, id);
                 }
                 // TODO(misko): This should be `el.content` not `el`

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

@@ -27,9 +27,20 @@ export interface MitosisImport {
         [key: string]: string | undefined;
     };
 }
-declare type ContextInfo = {
+export interface ContextGetInfo {
     name: string;
     path: string;
+}
+export interface ContextSetInfo {
+    name: string;
+    value?: JSONObject;
+    ref?: string;
+}
+export declare type ContextGet = {
+    [key: string]: ContextGetInfo;
+};
+export declare type ContextSet = {
+    [key: string]: ContextSetInfo;
 };
 export declare type extendedHook = {
     code: string;
@@ -39,24 +50,31 @@ export declare type MitosisComponentInput = {
     name: string;
     defaultValue: any;
 };
+export declare type MitosisExport = {
+    [name: string]: {
+        code: string;
+        usedInLocal?: boolean;
+        isFunction?: boolean;
+    };
+};
 export declare type MitosisComponent = {
     '@type': '@builder.io/mitosis/component';
     name: string;
     imports: MitosisImport[];
+    exports?: MitosisExport;
     meta: JSONObject & {
         useMetadata?: JSONObject;
     };
     inputs: MitosisComponentInput[];
     state: JSONObject;
     context: {
-        get: {
-            [key: string]: ContextInfo;
-        };
-        set: {
-            [key: string]: {
-                name: string;
-                value?: JSONObject;
-            };
+        get: ContextGet;
+        set: ContextSet;
+    };
+    refs: {
+        [useRef: string]: {
+            typeParameter?: string;
+            argument: string;
         };
     };
     hooks: {
@@ -70,5 +88,7 @@ export declare type MitosisComponent = {
     };
     children: MitosisNode[];
     subComponents: MitosisComponent[];
+    types?: string[];
+    interfaces?: string[];
+    propsTypeRef?: string;
 };
-export {};