[dev-tools] ESM module build command improvements (#446)

uber-web · Jan 29, 2024 · eceb424 · eceb424
1 parent 3a7fd33
commit eceb424
Show file tree

Hide file tree

Showing 14 changed files with 289 additions and 86 deletions.
diff --git a/.ocularrc.js b/.ocularrc.js
@@ -7,6 +7,8 @@ let ocularConfig = {
     check: true
   },
 
+  babel: false,
+
   lint: {
     paths: ['modules']
   },

diff --git a/modules/dev-tools/package.json b/modules/dev-tools/package.json
@@ -15,11 +15,14 @@
     "src",
     "scripts",
     "templates",
+    "ts-plugins",
     "CHANGELOG.md"
   ],
   "exports": {
     ".": "./src/index.js",
-    "./configuration": "./src/configuration/index.cjs"
+    "./configuration": "./src/configuration/index.cjs",
+    "./ts-transform-version-inline": "./ts-plugins/ts-transform-version-inline/index.cjs",
+    "./ts-transform-append-extension": "./ts-plugins/ts-transform-append-extension/index.cjs"
   },
   "types": "./src/index.d.ts",
   "main": "./src/index.js",
@@ -39,7 +42,7 @@
     "bootstrap": "yarn install-fast && ocular-bootstrap",
     "install-fast": "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn",
     "clean": "echo No build needed",
-    "build": "echo No build needed",
+    "build": "tsc && find ./ts-plugins -depth -name \"*.js\" -exec sh -c 'f=\"{}\"; mv -- \"$f\" \"${f%.js}.cjs\"' \\;",
     "lint": "npm run lint-yarn",
     "lint-yarn": "!(grep -q unpm.u yarn.lock) || (echo 'Please rebuild yarn file using public npmrc' && false)",
     "publish-prod": "npm run build && npm run test && npm run test dist && npm publish",
@@ -86,6 +89,7 @@
     "tape-promise": "^4.0.0",
     "typescript": "^5.2.2",
     "ts-node": "~10.9.0",
+    "ts-patch": "^3.1.2",
     "tsconfig-paths": "^4.1.1",
     "url": "^0.11.0",
     "vite": "^4.0.1",

diff --git a/modules/dev-tools/scripts/build.sh b/modules/dev-tools/scripts/build.sh
@@ -20,25 +20,15 @@ build_src() {
   OUT_DIR=$1
   TARGET=$2
   check_target $TARGET
-  (set -x; BABEL_ENV=$TARGET npx babel src --config-file $CONFIG --out-dir $OUT_DIR --copy-files --source-maps --extensions $EXTENSIONS)
+
+  if [ ! -z "$CONFIG" ]; then
+    (set -x; BABEL_ENV=$TARGET npx babel src --config-file $CONFIG --out-dir $OUT_DIR --copy-files --source-maps --extensions $EXTENSIONS)
+  fi
 }
 
 build_module_esm() {
   build_src dist esm-strict
-
-  # build cjs bundles
-  CJS_ENTRIES=`node $DEV_TOOLS_DIR/src/helpers/get-cjs-entry-points.js | sed -E "s/,/ /g"`
-
-  for P in ${CJS_ENTRIES}; do (
-    if [ -e "src/${P}.ts" ]; then
-      ENTRY=src/${P}.ts
-    else
-      ENTRY=src/${P}.js
-    fi
-
-    echo "Bundling ${ENTRY}"
-    esbuild $ENTRY --bundle --packages=external --format=cjs --target=node16 --outfile=dist/${P}.cjs
-  ); done
+  node $DEV_TOOLS_DIR/src/build-cjs.js
 }
 
 build_module() {
@@ -108,7 +98,7 @@ build_monorepo() {
 }
 
 if [ ! -z "$TS_PROJECT" ]; then
-  tsc -b $TS_PROJECT
+  tspc -b $TS_PROJECT --verbose
 fi
 
 if [ -d "modules" ]; then

diff --git a/modules/dev-tools/scripts/bundle.js b/modules/dev-tools/scripts/bundle.js
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import esbuild from 'esbuild';
-import getBuildConfig from '../src/configuration/esbuild.config.js';
+import {getBundleConfig} from '../src/configuration/get-esbuild-config.js';
 
 // Parse command line arguments
 let entryPoint;
@@ -17,7 +17,7 @@ for (let i = 1; i < process.argv.length; i++) {
   }
 }
 
-const buildConfig = await getBuildConfig({
+const buildConfig = await getBundleConfig({
   ...env,
   input: entryPoint
 });

diff --git a/modules/dev-tools/src/build-cjs.js b/modules/dev-tools/src/build-cjs.js
@@ -0,0 +1,27 @@
+import esbuild from 'esbuild';
+import fs from 'fs/promises';
+import {getCJSEntryPoints} from './helpers/get-cjs-entry-points.js';
+import {getCJSExportConfig} from './configuration/get-esbuild-config.js';
+
+async function main() {
+  for (const fileName of getCJSEntryPoints()) {
+    const inputPath = `./dist/${fileName}.js`;
+    try {
+      await fs.stat(inputPath);
+
+      const esbuildConfig = await getCJSExportConfig({
+        input: inputPath,
+        output: `dist/${fileName}.cjs`
+      });
+      const result = await esbuild.build(esbuildConfig);
+      if (result.errors.length > 0) {
+        process.exit(1);
+      }
+    } catch {
+      // File does not exist
+      console.error(`\x1b[33mCannot find file ${inputPath}\x1b[0m`);
+    }
+  }
+}
+
+main();
diff --git a/...tools/src/configuration/esbuild.config.js → ...s/src/configuration/get-esbuild-config.js b/...tools/src/configuration/esbuild.config.js → ...s/src/configuration/get-esbuild-config.js
@@ -3,7 +3,6 @@ import fs from 'fs';
 import {join} from 'path';
 import util from 'util';
 import {getOcularConfig} from '../helpers/get-ocular-config.js';
-import babel from 'esbuild-plugin-babel';
 import ext from 'esbuild-plugin-external-global';
 
 /**
@@ -36,25 +35,6 @@ function getExternalGlobalsIIFE(externalPackages, mapping) {
   return externals;
 }
 
-/** Evaluate root babel config */
-async function getBabelConfig(configPath, env, target) {
-  let config = await import(configPath);
-  if (config.default) {
-    config = config.default;
-  }
-  if (typeof config === 'function') {
-    config = config({
-      env: () => env
-    });
-  }
-  const envPreset = config.presets.find((item) => item[0] === '@babel/env');
-  if (target && envPreset) {
-    envPreset[1] = envPreset[1] || {};
-    envPreset[1].targets = target;
-  }
-  return config;
-}
-
 // esbuild does not support umd format
 // Work around from https://github.com/evanw/esbuild/issues/819
 // Template: https://webpack.js.org/configuration/output/#type-umd
@@ -86,38 +66,52 @@ function umdWrapper(libName) {
   };
 }
 
+/**
+ *
+ * @param {String} opts.input - path to entry point
+ * @param {String} opts.output - output file path
+ */
+export async function getCJSExportConfig(opts) {
+  return {
+    entryPoints: [opts.input],
+    outfile: opts.output,
+    bundle: true,
+    format: 'cjs',
+    // Node 16 is out of support, kept for compatibility. Move to 18?
+    target: 'node16',
+    packages: 'external',
+    sourcemap: true,
+    logLevel: 'info'
+  };
+}
+
 /* eslint-disable max-statements,complexity */
-export default async function getBundleConfig(opts) {
+export async function getBundleConfig(opts) {
   // This script must be executed in a submodule's directory
   const packageRoot = process.cwd();
   const packageInfo = JSON.parse(fs.readFileSync(join(packageRoot, 'package.json'), 'utf-8'));
+
+  const devMode = opts.env === 'dev';
+
   const ocularConfig = await getOcularConfig({
-    root: join(packageRoot, '../..')
+    root: join(packageRoot, '../..'),
+    aliasMode: devMode ? 'src' : 'dist'
   });
 
   opts = {...ocularConfig.bundle, ...opts};
-  const devMode = opts.env === 'dev';
 
   const {
     input,
     output = devMode ? './dist/dist.dev.js' : './dist.min.js',
     format = 'iife',
-    target,
+    target = ['esnext'],
     externals,
     globalName,
     debug,
     sourcemap = false
   } = opts;
 
-  const babelConfig = devMode
-    ? {
-        filter: /src|bundle/,
-        config: await getBabelConfig(ocularConfig.babel.configPath, 'bundle-dev', target)
-      }
-    : {
-        filter: /src|bundle|esm/,
-        config: await getBabelConfig(ocularConfig.babel.configPath, 'bundle', target)
-      };
+  let babelConfig;
 
   let externalPackages = Object.keys(packageInfo.peerDependencies || {});
   if (typeof externals === 'string') {
@@ -134,10 +128,10 @@ export default async function getBundleConfig(opts) {
     minify: !devMode,
     alias: ocularConfig.aliases,
     platform: 'browser',
-    target: ['esnext'],
+    target,
     logLevel: 'info',
     sourcemap,
-    plugins: [babel(babelConfig)]
+    plugins: []
   };
   if (globalName) {
     config.globalName = globalName;

diff --git a/modules/dev-tools/src/helpers/get-cjs-entry-points.js b/modules/dev-tools/src/helpers/get-cjs-entry-points.js
@@ -1,16 +1,7 @@
 import fs from 'fs';
 import {basename} from 'path';
 
-try {
-  const entryPoints = await getCJSEntryPoints();
-  console.log(entryPoints.join(','));
-} catch (ex) {
-  console.error('Error reading package entry points');
-  console.error(ex);
-  process.exit(1);
-}
-
-function getCJSEntryPoints() {
+export function getCJSEntryPoints() {
   const packageInfo = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
 
   if (packageInfo.exports) {

diff --git a/modules/dev-tools/src/helpers/get-config.js b/modules/dev-tools/src/helpers/get-config.js
@@ -1,3 +1,9 @@
+/**
+ * Used by command line scripts to print a field from the local ocular config.
+   Path is period separated.
+   Example:
+   $ node get-config.js ".babel.configPath"
+ */
 import {getOcularConfig} from '../helpers/get-ocular-config.js';
 
 let ocularConfig;
@@ -18,7 +24,7 @@ configPath
   .split('.')
   .filter(Boolean)
   .forEach((path) => {
-    config = config[path];
+    config = config ? config[path] : undefined;
   });
 
 if (config === undefined) {

diff --git a/modules/dev-tools/src/helpers/get-ocular-config.js b/modules/dev-tools/src/helpers/get-ocular-config.js
@@ -11,22 +11,27 @@ export async function getOcularConfig(options = {}) {
 
   const IS_MONOREPO = fs.existsSync(resolve(packageRoot, './modules'));
 
+  const userConfig = await getUserConfig(packageRoot, options);
+
   const config = {
     root: packageRoot,
     ocularPath: ocularRoot,
 
     esm: getModuleInfo(packageRoot).packageInfo.type === 'module',
 
-    babel: {
-      configPath: getValidPath(
-        resolve(packageRoot, './.babelrc'),
-        resolve(packageRoot, './.babelrc.js'),
-        resolve(packageRoot, './.babelrc.cjs'),
-        resolve(packageRoot, './babel.config.js'),
-        resolve(packageRoot, './babel.config.cjs')
-      ),
-      extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx']
-    },
+    babel:
+      userConfig.babel !== false
+        ? {
+            configPath: getValidPath(
+              resolve(packageRoot, './.babelrc'),
+              resolve(packageRoot, './.babelrc.js'),
+              resolve(packageRoot, './.babelrc.cjs'),
+              resolve(packageRoot, './babel.config.js'),
+              resolve(packageRoot, './babel.config.cjs')
+            ),
+            extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx']
+          }
+        : null,
 
     bundle: {
       globals: {}
@@ -61,8 +66,6 @@ export async function getOcularConfig(options = {}) {
     }
   };
 
-  const userConfig = await getUserConfig(packageRoot, options);
-
   shallowMerge(config, userConfig);
 
   // Backward compatibility

diff --git a/modules/dev-tools/ts-plugins/.gitignore b/modules/dev-tools/ts-plugins/.gitignore
@@ -0,0 +1 @@
+*.cjs
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,8 @@ let ocularConfig = { @@
         check: true
       },
+      babel: false,
       lint: {
         paths: ['modules']
       },
@@ Expand Down @@