chore: change build lib to output library in esm (#3771)

* chore: change uild lib to output library in esm

* fix: add new build target for minimal build

Author: priyajeet

package.json

@@ -92,10 +92,11 @@
     "use-debounce": "10.0.6"
   },
   "scripts": {
-    "start": "NODE_OPTIONS=--max-http-header-size=32000 REACT_APP_CONNECT_ENV=Testnet vite --host",
-    "start:mainnet": "NODE_OPTIONS=--max-http-header-size=32000 REACT_APP_CONNECT_ENV=Mainnet vite --host",
+    "start": "NODE_OPTIONS=--max-http-header-size=32000 REACT_APP_CONNECT_ENV=Testnet vite --host --force",
+    "start:mainnet": "NODE_OPTIONS=--max-http-header-size=32000 REACT_APP_CONNECT_ENV=Mainnet vite --host --force",
     "build": "npm run build:lib; npm run build:hosted; npm run build:netlify",
     "build:lib": "NODE_ENV=production NODE_OPTIONS=--max-old-space-size=10240 vite build",
+    "build:minimal": "VITE_BUILD_MINIMAL=1 NODE_ENV=production NODE_OPTIONS=--max-old-space-size=10240 vite build",
     "build:hosted": "VITE_BUILD_HOSTED=1 NODE_ENV=production NODE_OPTIONS=--max-old-space-size=10240 vite build",
     "build:netlify": "VITE_BUILD_NETLIFY=1 NODE_ENV=production NODE_OPTIONS=--max-old-space-size=10240 vite build",
     "lint": "scripts/lint.sh",

vite.config.mts

@@ -1,8 +1,13 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { execSync } from 'child_process';
-import { defineConfig, loadEnv, ConfigEnv, LibraryFormats } from 'vite';
-import type { PreRenderedAsset } from 'rollup';
+import {
+  defineConfig,
+  loadEnv,
+  ConfigEnv,
+  BuildEnvironmentOptions,
+} from 'vite';
+import type { InputOption, PreRenderedAsset } from 'rollup';
 import react from '@vitejs/plugin-react-swc';
 import checker from 'vite-plugin-checker';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
@@ -12,10 +17,11 @@ import packageJson from './package.json';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-
 const { version } = packageJson;
+const isAnalyze = process.env.ANALYZE === 'true';
 
 let gitHash = 'unknown';
+
 try {
   gitHash = execSync('git log -1 --format=%H').toString().replace('\n', '');
 } catch (e) {
@@ -27,11 +33,6 @@ console.info(
   `\nBuilding Wormhole Connect version=${version} hash=${gitHash}\n`,
 );
 
-// There are three configs this file can return.
-// 1. local dev server
-// 2. production build, for direct import
-// 3. production build, hosted by unpkg.com (includes React, auto-binds to DOM)
-
 // TODO: consider using the "VITE_APP_" prefix which is the default for Vite
 const envPrefix = 'REACT_APP_';
 
@@ -65,12 +66,8 @@ const resolve = {
 };
 
 const plugins = [
-  checker({
-    typescript: true,
-  }),
-  dts({
-    insertTypesEntry: true,
-  }),
+  checker({ typescript: true }),
+  dts({ insertTypesEntry: true }),
   react(),
   nodePolyfills({
     include: [
@@ -97,135 +94,148 @@ const plugins = [
     }),
 ].filter(Boolean);
 
-const optimizeDeps = {};
+function assetFileNames(assetInfo: PreRenderedAsset) {
+  if (assetInfo.name === 'main.css') {
+    return '[name][extname]';
+  }
 
-const output: {
-  assetFileNames: (assetInfo: PreRenderedAsset) => string;
-  inlineDynamicImports: boolean;
-  exports: 'named' | 'default' | 'none' | 'auto';
-} = {
-  assetFileNames: (assetInfo: PreRenderedAsset) => {
-    if (assetInfo.name === 'main.css') {
-      return '[name][extname]';
-    }
-    return '[name]-[hash][extname]';
+  return '[name]-[hash][extname]';
+}
+
+// Netlify and local dev server
+const sampleAppBuild: BuildEnvironmentOptions = {
+  outDir: './build',
+  rollupOptions: {
+    input: {
+      main: 'src/SampleApp.tsx',
+      index: 'index.html',
+    } as Record<string, string>,
+    output: {
+      assetFileNames,
+      inlineDynamicImports: false,
+      exports: 'named' as const,
+    },
+  },
+};
+
+// Legacy production build, hosted by unpkg.com (includes React, auto-binds to DOM)
+const hostedBuild: BuildEnvironmentOptions = {
+  outDir: './dist',
+  rollupOptions: {
+    input: {
+      main: 'src/main.tsx',
+    } as Record<string, string>,
+    output: {
+      entryFileNames: '[name].mjs',
+      assetFileNames,
+      inlineDynamicImports: false,
+      exports: 'named' as const,
+    },
+  },
+};
+
+const libEntry: InputOption = [
+  path.resolve(__dirname, 'src/exports/index.ts'),
+  path.resolve(__dirname, 'src/exports/mayan.ts'),
+  path.resolve(__dirname, 'src/exports/ntt.ts'),
+  path.resolve(__dirname, 'src/exports/hosted.ts'),
+  path.resolve(__dirname, 'src/exports/executor.ts'),
+];
+
+const rollupInput: InputOption = {
+  index: 'src/exports/index.ts',
+  mayan: 'src/exports/mayan.ts',
+  ntt: 'src/exports/ntt.ts',
+  hosted: 'src/exports/hosted.ts',
+  executor: 'src/exports/executor.ts',
+};
+
+const external = [
+  'react',
+  'react/jsx-runtime',
+  '@emotion/react',
+  '@emotion/styled',
+  '@mui/material',
+  '@mui/icons-material',
+  '@mui/styled-engine',
+  '@mui/system',
+];
+
+// Production build, for npm import
+const libBuild: BuildEnvironmentOptions = {
+  outDir: './lib',
+  lib: {
+    entry: libEntry,
+    formats: isAnalyze ? ['es'] : ['es', 'cjs'],
+    fileName: (format, entryname) => {
+      const n = entryname.split('/').pop()!;
+      return `${n.split('.')[0]}.${format === 'es' ? 'mjs' : 'js'}`;
+    },
+  },
+  rollupOptions: {
+    input: rollupInput,
+    output: {
+      assetFileNames,
+      inlineDynamicImports: false,
+      exports: 'named' as const,
+    },
+    external,
+  },
+};
+
+// Minimal build, for submodule import
+const minimalBuild: BuildEnvironmentOptions = {
+  sourcemap: true,
+  minify: false,
+  outDir: './lib',
+  lib: {
+    entry: libEntry,
+    formats: ['es'],
+  },
+  rollupOptions: {
+    input: rollupInput,
+    output: {
+      entryFileNames: '[name].mjs',
+      chunkFileNames: '[name].mjs',
+      assetFileNames: '[name].[ext]',
+      inlineDynamicImports: false,
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+    external,
+  },
+  terserOptions: {
+    mangle: false,
+    compress: false,
   },
-  inlineDynamicImports: false,
-  exports: 'named' as const,
 };
 
 export default defineConfig(({ command, mode }: ConfigEnv) => {
   const env = loadEnv(mode, process.cwd(), '');
   const isHosted = !!env.VITE_BUILD_HOSTED;
   const isNetlify = !!env.VITE_BUILD_NETLIFY;
-  const isAnalyze = process.env.ANALYZE === 'true';
-
-  if (command === 'serve' || (command === 'build' && isNetlify)) {
-    // Local development
-    return {
-      define,
-      envPrefix,
-      resolve,
-      build: {
-        outDir: './build',
-        rollupOptions: {
-          input: {
-            main: 'src/SampleApp.tsx',
-            index: 'index.html',
-          } as Record<string, string>,
-          output,
-        },
-      },
-      plugins,
-      optimizeDeps,
-    };
-  } else if (command === 'build') {
-    //
-    // Building for production
-    // There are two possible configs here: invoked by "npm run build" and "npm run build:hosted"
-    //
-    // - by default, we build a component library that can be imported and used in React apps
-    //
-    // - alternatively, VITE_BUILD_HOSTED=1 causes Vite to build a bundle that is used
-    //   via unpkg.com hosting. This build looks for a DOM element #wormhole-connect and comes
-    //   bundled with a copy of React. This is "legacy mode" and useful only on web apps that don't
-    //   use React.
-    //
+  const isMinimal = !!env.VITE_BUILD_MINIMAL;
+  const isSampleApp = command === 'serve' || (command === 'build' && isNetlify);
 
+  let build: BuildEnvironmentOptions | undefined = undefined;
+
+  if (isSampleApp) {
+    build = sampleAppBuild;
+  } else if (command === 'build') {
     if (isHosted) {
-      return {
-        define,
-        envPrefix,
-        resolve,
-        build: {
-          outDir: './dist',
-          rollupOptions: {
-            input: {
-              main: 'src/main.tsx',
-            } as Record<string, string>,
-            output: {
-              entryFileNames: '[name].js',
-              ...output,
-            },
-          },
-        },
-        plugins,
-        optimizeDeps,
-      };
+      build = hostedBuild;
+    } else if (isMinimal) {
+      build = minimalBuild;
     } else {
-      return {
-        define,
-        envPrefix,
-        resolve,
-        build: {
-          outDir: './lib',
-          lib: {
-            entry: [
-              path.resolve(__dirname, 'src/exports/index.ts'),
-              path.resolve(__dirname, 'src/exports/mayan.ts'),
-              path.resolve(__dirname, 'src/exports/ntt.ts'),
-              path.resolve(__dirname, 'src/exports/hosted.ts'),
-              path.resolve(__dirname, 'src/exports/executor.ts'),
-            ],
-            formats: (isAnalyze ? ['es'] : ['es', 'cjs']) as LibraryFormats[],
-            fileName: (format, entryname) => {
-              const n = entryname.split('/').pop()!;
-              return `${n.split('.')[0]}.${format === 'es' ? 'mjs' : 'js'}`;
-            },
-          },
-          rollupOptions: {
-            input: {
-              index: 'src/exports/index.ts',
-              mayan: 'src/exports/mayan.ts',
-              ntt: 'src/exports/ntt.ts',
-              hosted: 'src/exports/hosted.ts',
-              executor: 'src/exports/executor.ts',
-            },
-            output,
-            external: [
-              'react',
-              'react/jsx-runtime',
-              '@emotion/react',
-              '@emotion/styled',
-              '@mui/material',
-              '@mui/icons-material',
-              '@mui/styled-engine',
-              '@mui/system',
-            ],
-          },
-        },
-        plugins,
-        optimizeDeps,
-      };
+      build = libBuild;
     }
   }
 
-  // Default configuration if no conditions are met
   return {
+    build,
     define,
     envPrefix,
     resolve,
     plugins,
-    optimizeDeps,
   };
 });