@builder.io/mitosis 0.5.24 → 0.5.26

package/dist/src/helpers/event-handlers.js

@@ -1,5 +1,112 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkIsBindingEventHandler = void 0;
-const checkIsBindingEventHandler = (code) => code.startsWith('on');
-exports.checkIsBindingEventHandler = checkIsBindingEventHandler;
+exports.checkIsBindingNativeEvent = exports.checkIsEvent = void 0;
+const checkIsEvent = (code) => code.startsWith('on');
+exports.checkIsEvent = checkIsEvent;
+const nativeEvents = [
+    'abort',
+    'animationcancel',
+    'animationend',
+    'animationiteration',
+    'animationstart',
+    'auxclick',
+    'beforeinput',
+    'beforetoggle',
+    'blur',
+    'cancel',
+    'canplay',
+    'canplaythrough',
+    'change',
+    'click',
+    'close',
+    'compositionend',
+    'compositionstart',
+    'compositionupdate',
+    'contextlost',
+    'contextmenu',
+    'contextrestored',
+    'copy',
+    'cuechange',
+    'cut',
+    'dblclick',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'dragstart',
+    'drop',
+    'durationchange',
+    'emptied',
+    'ended',
+    'error',
+    'focus',
+    'focusin',
+    'focusout',
+    'formdata',
+    'gotpointercapture',
+    'input',
+    'invalid',
+    'keydown',
+    'keypress',
+    'keyup',
+    'load',
+    'loadeddata',
+    'loadedmetadata',
+    'loadstart',
+    'lostpointercapture',
+    'mousedown',
+    'mouseenter',
+    'mouseleave',
+    'mousemove',
+    'mouseout',
+    'mouseover',
+    'mouseup',
+    'paste',
+    'pause',
+    'play',
+    'playing',
+    'pointercancel',
+    'pointerdown',
+    'pointerenter',
+    'pointerleave',
+    'pointermove',
+    'pointerout',
+    'pointerover',
+    'pointerup',
+    'progress',
+    'ratechange',
+    'reset',
+    'resize',
+    'scroll',
+    'scrollend',
+    'securitypolicyviolation',
+    'seeked',
+    'seeking',
+    'select',
+    'selectionchange',
+    'selectstart',
+    'slotchange',
+    'stalled',
+    'submit',
+    'suspend',
+    'timeupdate',
+    'toggle',
+    'touchcancel',
+    'touchend',
+    'touchmove',
+    'touchstart',
+    'transitioncancel',
+    'transitionend',
+    'transitionrun',
+    'transitionstart',
+    'volumechange',
+    'waiting',
+    'webkitanimationend',
+    'webkitanimationiteration',
+    'webkitanimationstart',
+    'webkittransitionend',
+    'wheel',
+];
+const checkIsBindingNativeEvent = (code) => !!nativeEvents.find((nativeEvent) => nativeEvent === code.toLowerCase());
+exports.checkIsBindingNativeEvent = checkIsBindingNativeEvent;

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

@@ -1,4 +1,7 @@
+import { Context } from '../../parsers/jsx/types';
 import * as babel from '@babel/core';
+import { BabelFileResult } from '@babel/core';
+import { Visitor } from '@babel/traverse';
 declare const types: typeof babel.types;
 export declare const uncapitalize: (str: string) => string;
 export declare const parseCode: (node: babel.types.Node) => string;
@@ -8,4 +11,7 @@ export declare const HTML_ATTR_FROM_JSX: {
     htmlFor: string;
 };
 export declare const transformAttributeName: (name: string) => string;
+export declare const babelStripTypes: (code: string, typescript?: boolean) => string;
+export declare const babelDefaultTransform: (code: string, visitor: Visitor<Context>) => BabelFileResult | null;
+export declare const isTypescriptFile: (fileName: string) => boolean;
 export {};

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

@@ -26,11 +26,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformAttributeName = exports.HTML_ATTR_FROM_JSX = exports.isImportOrDefaultExport = exports.parseCodeJson = exports.parseCode = exports.uncapitalize = void 0;
-const babel = __importStar(require("@babel/core"));
-const generator_1 = __importDefault(require("@babel/generator"));
+exports.isTypescriptFile = exports.babelDefaultTransform = exports.babelStripTypes = exports.transformAttributeName = exports.HTML_ATTR_FROM_JSX = exports.isImportOrDefaultExport = exports.parseCodeJson = exports.parseCode = exports.uncapitalize = void 0;
 const json_1 = require("../../helpers/json");
 const typescript_1 = require("../../helpers/typescript");
+const babel = __importStar(require("@babel/core"));
+const generator_1 = __importDefault(require("@babel/generator"));
+const plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
+const preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
+const typescriptBabelPreset = [preset_typescript_1.default, { isTSX: true, allExtensions: true }];
 const { types } = babel;
 const uncapitalize = (str) => {
     if (!str) {
@@ -40,7 +43,8 @@ const uncapitalize = (str) => {
 };
 exports.uncapitalize = uncapitalize;
 const parseCode = (node) => {
-    return (0, generator_1.default)(node).code;
+    const generatorResult = (0, generator_1.default)(node);
+    return generatorResult.code;
 };
 exports.parseCode = parseCode;
 const parseCodeJson = (node) => {
@@ -59,3 +63,23 @@ const transformAttributeName = (name) => {
     return name;
 };
 exports.transformAttributeName = transformAttributeName;
+const babelStripTypes = (code, typescript) => {
+    var _a;
+    return typescript
+        ? (_a = babel.transform(code, {
+            configFile: false,
+            babelrc: false,
+            presets: [typescriptBabelPreset],
+        })) === null || _a === void 0 ? void 0 : _a.code
+        : code;
+};
+exports.babelStripTypes = babelStripTypes;
+const babelDefaultTransform = (code, visitor) => babel.transform(code, {
+    configFile: false,
+    babelrc: false,
+    comments: false,
+    plugins: [[plugin_syntax_typescript_1.default, { isTSX: true }], () => ({ visitor })],
+});
+exports.babelDefaultTransform = babelDefaultTransform;
+const isTypescriptFile = (fileName) => fileName.endsWith('.ts') || fileName.endsWith('.tsx');
+exports.isTypescriptFile = isTypescriptFile;

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

@@ -1,6 +1,7 @@
-import * as babel from '@babel/core';
 import { MitosisComponent } from '../../../types/mitosis-component';
-import { ParseMitosisOptions } from '../types';
+import * as babel from '@babel/core';
+import { NodePath } from '@babel/core';
+import { Context, ParseMitosisOptions } from '../types';
 declare const types: typeof babel.types;
 export declare function parseDefaultPropsHook(component: MitosisComponent, expression: babel.types.CallExpression): void;
 export declare function generateUseStyleCode(expression: babel.types.CallExpression): string;
@@ -11,5 +12,5 @@ export declare function generateUseStyleCode(expression: babel.types.CallExpress
  * This function collects metadata and removes the statement from
  * the returned nodes array
  */
-export declare const collectModuleScopeHooks: (component: MitosisComponent, options: ParseMitosisOptions) => (nodes: babel.types.Statement[]) => babel.types.Statement[];
+export declare const collectModuleScopeHooks: (context: Context, options: ParseMitosisOptions) => (path: NodePath<babel.types.Program>) => babel.types.Statement[];
 export {};

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

@@ -27,9 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.collectModuleScopeHooks = exports.generateUseStyleCode = exports.parseDefaultPropsHook = void 0;
+const hooks_1 = require("../../../constants/hooks");
+const use_metadata_1 = require("../../../parsers/jsx/hooks/use-metadata");
 const babel = __importStar(require("@babel/core"));
 const generator_1 = __importDefault(require("@babel/generator"));
-const hooks_1 = require("../../../constants/hooks");
 const helpers_1 = require("../helpers");
 const state_1 = require("../state");
 const helpers_2 = require("./helpers");
@@ -52,34 +53,44 @@ exports.generateUseStyleCode = generateUseStyleCode;
  * This function collects metadata and removes the statement from
  * the returned nodes array
  */
-const collectModuleScopeHooks = (component, options) => (nodes) => nodes.filter((node) => {
-    const hook = (0, helpers_2.getHook)(node);
-    if (!hook) {
-        return true;
-    }
-    if (types.isIdentifier(hook.callee)) {
-        const metadataHooks = new Set((options.jsonHookNames || []).concat(hooks_1.HOOKS.METADATA));
-        if (metadataHooks.has(hook.callee.name)) {
-            try {
-                component.meta[hook.callee.name] = {
-                    ...(component.meta[hook.callee.name] || {}),
-                    ...(0, helpers_1.parseCodeJson)(hook.arguments[0]),
+const collectModuleScopeHooks = (context, options) => (path) => {
+    const programNodes = path.node.body;
+    return programNodes.filter((node) => {
+        const hook = (0, helpers_2.getHook)(node);
+        if (!hook) {
+            return true;
+        }
+        if (types.isIdentifier(hook.callee)) {
+            const metadataHooks = new Set((options.jsonHookNames || []).concat(hooks_1.HOOKS.METADATA));
+            const name = hook.callee.name;
+            if (metadataHooks.has(name)) {
+                const metaDataObjectNode = hook.arguments[0];
+                let json;
+                try {
+                    json = options.filePath
+                        ? (0, use_metadata_1.resolveMetadata)({ context, node: metaDataObjectNode, nodePath: path, options })
+                        : (0, helpers_1.parseCodeJson)(metaDataObjectNode);
+                }
+                catch (e) {
+                    // Meta data isn't simple json convert it to ast
+                    console.error(`Error parsing metadata hook ${name}`);
+                    throw e;
+                }
+                context.builder.component.meta[name] = {
+                    ...(context.builder.component.meta[name] || {}),
+                    ...json,
                 };
                 return false;
             }
-            catch (e) {
-                console.error(`Error parsing metadata hook ${hook.callee.name}`);
-                throw e;
+            else if (name === hooks_1.HOOKS.STYLE) {
+                context.builder.component.style = generateUseStyleCode(hook);
+                return false;
+            }
+            else if (name === hooks_1.HOOKS.DEFAULT_PROPS) {
+                parseDefaultPropsHook(context.builder.component, hook);
             }
         }
-        else if (hook.callee.name === hooks_1.HOOKS.STYLE) {
-            component.style = generateUseStyleCode(hook);
-            return false;
-        }
-        else if (hook.callee.name === hooks_1.HOOKS.DEFAULT_PROPS) {
-            parseDefaultPropsHook(component, hook);
-        }
-    }
-    return true;
-});
+        return true;
+    });
+};
 exports.collectModuleScopeHooks = collectModuleScopeHooks;

package/dist/src/parsers/jsx/hooks/use-metadata.d.ts

@@ -0,0 +1,9 @@
+import { Context, ParseMitosisOptions } from '../../../parsers/jsx/types';
+import * as babel from '@babel/core';
+import { NodePath } from '@babel/core';
+export declare const resolveMetadata: ({ context, node, nodePath, options, }: {
+    context: Context;
+    node: babel.types.Node;
+    nodePath: NodePath<babel.types.Program>;
+    options: ParseMitosisOptions;
+}) => Record<string, any>;

package/dist/src/parsers/jsx/hooks/use-metadata.js

@@ -0,0 +1,184 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveMetadata = void 0;
+const mitosis_imports_1 = require("../../../helpers/mitosis-imports");
+const helpers_1 = require("../../../parsers/jsx/helpers");
+const babel = __importStar(require("@babel/core"));
+const fs_extra_promise_1 = require("fs-extra-promise");
+const path = __importStar(require("path"));
+const getCodeFromImport = (importObject, currentFile) => {
+    if (currentFile) {
+        // resolve path of import
+        const originFile = path.basename(currentFile);
+        const typescript = (0, helpers_1.isTypescriptFile)(originFile);
+        const importFile = (0, helpers_1.isTypescriptFile)(importObject.path) || importObject.path.endsWith('.js')
+            ? importObject.path
+            : `${importObject.path}.${typescript ? 'ts' : 'js'}`;
+        const importFilePath = path.resolve(path.dirname(currentFile), importFile);
+        if ((0, fs_extra_promise_1.existsSync)(importFilePath)) {
+            return { code: (0, fs_extra_promise_1.readFileSync)(importFilePath).toString(), typescript, importFilePath };
+        }
+        return { typescript };
+    }
+    return {};
+};
+const fillDeclarations = ({ declaration, valueToResolve, currentFilePath, nodePath, }) => {
+    let result = {};
+    for (const variable of declaration.declarations) {
+        if (babel.types.isIdentifier(variable.id)) {
+            if (variable.id.name === valueToResolve && variable.init) {
+                const filled = resolveObjectsRecursive({
+                    node: variable.init,
+                    nodePath,
+                    currentFilePath,
+                });
+                result = {
+                    ...result,
+                    ...filled,
+                };
+            }
+        }
+    }
+    return result;
+};
+const resolve = ({ nodePath, currentFilePath, valueToResolve, resolvedImports, }) => {
+    let result = {};
+    const programNodes = nodePath.node.body;
+    for (const statement of programNodes) {
+        if (babel.types.isImportDeclaration(statement)) {
+            const importObject = (0, mitosis_imports_1.mapImportDeclarationToMitosisImport)(statement);
+            if (Object.keys(importObject.imports).includes(valueToResolve)) {
+                if (resolvedImports) {
+                    // We add this statement, to remove it from imports of generated file
+                    resolvedImports.push({ path: importObject.path, value: valueToResolve });
+                }
+                // In this case the variable was imported
+                const { code, typescript, importFilePath } = getCodeFromImport(importObject, currentFilePath);
+                if (code) {
+                    const jsxToUse = (0, helpers_1.babelStripTypes)(code, typescript);
+                    (0, helpers_1.babelDefaultTransform)(jsxToUse, {
+                        Program(path) {
+                            const statements = path.node.body;
+                            for (const pStatement of statements) {
+                                if (babel.types.isExportNamedDeclaration(pStatement)) {
+                                    const declaration = pStatement.declaration;
+                                    if (babel.types.isVariableDeclaration(declaration)) {
+                                        const filledDeclaration = fillDeclarations({
+                                            declaration,
+                                            valueToResolve,
+                                            currentFilePath: importFilePath,
+                                            nodePath: path,
+                                        });
+                                        result = {
+                                            ...result,
+                                            ...filledDeclaration,
+                                        };
+                                    }
+                                }
+                            }
+                        },
+                    });
+                }
+            }
+        }
+        else if (babel.types.isVariableDeclaration(statement)) {
+            // In this case the variable is inside the same file
+            const filledDeclaration = fillDeclarations({
+                declaration: statement,
+                valueToResolve,
+                currentFilePath,
+                nodePath,
+            });
+            result = {
+                ...result,
+                ...filledDeclaration,
+            };
+        }
+    }
+    return result;
+};
+const resolveObjectsRecursive = ({ node, nodePath, currentFilePath, resolvedImports, }) => {
+    let result = {};
+    if (babel.types.isObjectExpression(node)) {
+        for (const prop of node.properties) {
+            if (babel.types.isObjectProperty(prop)) {
+                if (babel.types.isIdentifier(prop.key)) {
+                    const objectKey = prop.key.name;
+                    if (babel.types.isIdentifier(prop.value)) {
+                        const valueToResolve = prop.value.name;
+                        // In this case we have some variable defined in the same or another file
+                        const resolved = resolve({
+                            nodePath,
+                            currentFilePath,
+                            valueToResolve,
+                            resolvedImports,
+                        });
+                        result = {
+                            ...result,
+                            [objectKey]: { ...resolved },
+                        };
+                    }
+                    else {
+                        // In this case we have a primitive value
+                        const json = (0, helpers_1.parseCodeJson)(prop.value);
+                        result = {
+                            ...result,
+                            [objectKey]: json,
+                        };
+                    }
+                }
+            }
+            else if (babel.types.isSpreadElement(prop)) {
+                if (babel.types.isIdentifier(prop.argument)) {
+                    const valueToResolve = prop.argument.name;
+                    result = {
+                        ...result,
+                        ...resolve({ nodePath, currentFilePath, valueToResolve }),
+                    };
+                }
+            }
+            else {
+                // In this case we have a primitive value
+                result = {
+                    ...result,
+                    ...(0, helpers_1.parseCodeJson)(prop),
+                };
+            }
+        }
+    }
+    return result;
+};
+const resolveMetadata = ({ context, node, nodePath, options, }) => {
+    if (context.cwd && (options === null || options === void 0 ? void 0 : options.filePath)) {
+        const resolvedImports = [];
+        const currentFilePath = `${context.cwd}/${options.filePath}`;
+        const metadata = resolveObjectsRecursive({ node, nodePath, currentFilePath, resolvedImports });
+        context.builder.resolvedImports = resolvedImports;
+        return metadata;
+    }
+    return {};
+};
+exports.resolveMetadata = resolveMetadata;

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

@@ -1,9 +1,7 @@
 import * as babel from '@babel/core';
 import { Context, ParseMitosisOptions } from './types';
-declare const types: typeof babel.types;
 export declare const handleImportDeclaration: ({ options, path, context, }: {
     options: Partial<ParseMitosisOptions>;
     path: babel.NodePath<babel.types.ImportDeclaration>;
     context: Context;
 }) => void;
-export {};

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

@@ -1,33 +1,9 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleImportDeclaration = void 0;
-const babel = __importStar(require("@babel/core"));
 const mitosis_imports_1 = require("../../helpers/mitosis-imports");
-const { types } = babel;
 const handleImportDeclaration = ({ options, path, context, }) => {
+    var _a;
     // @builder.io/mitosis or React imports compile away
     const customPackages = (options === null || options === void 0 ? void 0 : options.compileAwayPackages) || [];
     if (['react', '@builder.io/mitosis', '@emotion/react', ...customPackages].includes(path.node.source.value)) {
@@ -35,7 +11,13 @@ const handleImportDeclaration = ({ options, path, context, }) => {
         return;
     }
     const importObject = (0, mitosis_imports_1.mapImportDeclarationToMitosisImport)(path.node);
-    context.builder.component.imports.push(importObject);
+    const resolvedImport = (_a = context.builder.resolvedImports) === null || _a === void 0 ? void 0 : _a.find((rImport) => rImport.path === importObject.path);
+    if (resolvedImport) {
+        delete importObject.imports[resolvedImport.value];
+    }
+    if (Object.keys(importObject.imports).length > 0) {
+        context.builder.component.imports.push(importObject);
+    }
     path.remove();
 };
 exports.handleImportDeclaration = handleImportDeclaration;