change(web): app/browser now uses common bundler script

common/web/es-bundling/src/common-bundle.mts

@@ -9,6 +9,7 @@ let MINIFY = false;
 let sourceFromArgs;
 let destFromArgs;
 let profilePath;
+let sourceRoot;
 
 function doHelp(errCode?: number) {
   console.log(`
@@ -16,7 +17,7 @@ Summary:
   Uses esbuild to generate bundled-JS according to common, repo-wide KeymanWeb-oriented settings.
 
 Usage:
-  common-bundle.mjs <input-file> --outDir <out-file> [options...]
+  common-bundle.mjs <input-file> --out <out-file> [options...]
 
 Parameters:
   <input-file>:         Fully-bundled and compiled JS file to be wrapped.
@@ -30,6 +31,7 @@ Options:
                         If not specified, 'iife' will be used.
   --minify              Enables minification.
   --profile=<out-file>  Generates an associated filesize profile at the specified path.
+  --sourceRoot=<path>   Sets the sourceRoot for generated source maps
 ` );
   process.exit(errCode || 0);
 }
@@ -64,6 +66,9 @@ if(process.argv.length > 2) {
       case '--profile':
         profilePath = process.argv[++i];
         break;
+      case '--sourceRoot':
+        sourceRoot = process.argv[++i];
+        break;
       default:
         if(!sourceFromArgs) {
           sourceFromArgs = arg;
@@ -111,7 +116,8 @@ const config: esbuild.BuildOptions = {
   entryPoints: [sourceFile],
   outfile: destFile,
   minify: MINIFY,
-  metafile: !!profilePath
+  metafile: !!profilePath,
+  sourceRoot: sourceRoot, // may be undefined - is fine if so.
 };
 
 await prepareTslibTreeshaking(config);

web/common.inc.sh

@@ -1,6 +1,8 @@
 #!/usr/bin/env bash
 #
 
+BUNDLE_CMD="node $KEYMAN_ROOT/common/web/es-bundling/build/common-bundle.mjs"
+
 # Compiles all build products corresponding to the specified target.
 # This should be called from the working directory of a child project's
 # build script.
@@ -20,16 +22,15 @@ function compile() {
   fi
 
   local COMPILE_TARGET="$1"
-  local BUNDLE_FLAG="${2:-}"
 
   tsc -b "${KEYMAN_ROOT}/web/src/$COMPILE_TARGET"
 
   if [ -f "./build-bundler.js" ]; then
-    node "./build-bundler.js" "$BUNDLE_FLAG"
-
-    # So... tsc does declaration-bundling on its own pretty well, at least for local development.
-    tsc --emitDeclarationOnly --outFile "${KEYMAN_ROOT}/web/build/$COMPILE_TARGET/lib/index.d.ts" -p "${KEYMAN_ROOT}/web/src/$COMPILE_TARGET"
+    node "./build-bundler.js"
   fi
+
+  # So... tsc does declaration-bundling on its own pretty well, at least for local development.
+  tsc --emitDeclarationOnly --outFile "${KEYMAN_ROOT}/web/build/$COMPILE_TARGET/lib/index.d.ts" -p "${KEYMAN_ROOT}/web/src/$COMPILE_TARGET"
 }
 
 function _copy_dir_if_exists() {

web/src/app/browser/build-bundler.js

@@ -1,76 +0,0 @@
-/*
- * Note:  while this file is not meant to exist long-term, it provides a nice
- * low-level proof-of-concept for esbuild bundling of the various Web submodules.
- *
- * Add some extra code at the end of src/index.ts and run it to verify successful bundling!
- */
-
-import esbuild from 'esbuild';
-import fs from 'fs';
-import { esmConfiguration, iifeConfiguration, prepareTslibTreeshaking } from '../../../../common/web/es-bundling/build/index.mjs';
-
-let EMIT_FILESIZE_PROFILE = false;
-
-if(process.argv.length > 2) {
-  for(let i = 2; i < process.argv.length; i++) {
-    const arg = process.argv[i];
-
-    switch(arg) {
-      case '':
-        break;
-      case '--ci':
-        EMIT_FILESIZE_PROFILE=true
-        break;
-      // May add other options if desired in the future.
-      default:
-        console.error("Invalid command-line option set for script; only --ci is permitted.");
-        process.exit(1);
-    }
-  }
-}
-
-const commonConfig = {
-  ...iifeConfiguration,
-  entryPoints: {
-    'index': '../../../build/app/browser/obj/debug-main.js',
-  },
-  outfile: '../../../build/app/browser/debug/keymanweb.js',
-  // `esbuild`'s sourcemap output puts relative paths to the original sources from the
-  // directory of the build output.  The following keeps repo structure intact and
-  // puts our code under a common 'namespace' of sorts.
-  sourceRoot: '@keymanapp/keyman/web/build/app/browser/debug/'
-};
-
-await prepareTslibTreeshaking(commonConfig, /worker-main\.wrapped(?:\.min)?\.js/);
-
-// And now... do the actual builds.
-await esbuild.build(commonConfig);
-
-let result = await esbuild.build({
-  ...commonConfig,
-  entryPoints: {
-    'index': '../../../build/app/browser/obj/release-main.js',
-  },
-  // Enables source-file output size profiling!
-  metafile: true,
-  minify: true,
-  outfile: '../../../build/app/browser/release/keymanweb.js',
-});
-
-let filesizeProfile = await esbuild.analyzeMetafile(result.metafile, { verbose: true });
-fs.writeFileSync('../../../build/app/browser/filesize-profile.log', `
-// Minified Keyman Engine for Web ('app/browser' target), filesize profile
-${filesizeProfile}
-`);
-if(EMIT_FILESIZE_PROFILE) {
-  // Profiles the sourcecode!
-  console.log(filesizeProfile);
-}
-
-await esbuild.build({
-  ...esmConfiguration,
-  entryPoints: {
-    'index': '../../../build/app/browser/obj/test-index.js',
-  },
-  outfile: '../../../build/app/browser/lib/index.mjs'
-});

web/src/app/browser/build.sh

@@ -53,6 +53,23 @@ compile_and_copy() {
   fi
   compile $SUBPROJECT_NAME $COMPILE_FLAGS
 
+  BUILD_ROOT="${KEYMAN_ROOT}/web/build/app/browser"
+
+  $BUNDLE_CMD    "${BUILD_ROOT}/obj/debug-main.js" \
+    --out        "${BUILD_ROOT}/debug/keymanweb.js" \
+    --sourceRoot "@keymanapp/keyman/web/build/app/browser/debug"
+
+  $BUNDLE_CMD    "${BUILD_ROOT}/obj/release-main.js" \
+    --out        "${BUILD_ROOT}/release/keymanweb.js" \
+    --profile    "${BUILD_ROOT}/filesize-profile.log" \
+    --sourceRoot "@keymanapp/keyman/web/build/app/browser/release" \
+    --minify
+
+  $BUNDLE_CMD    "${BUILD_ROOT}/obj/test-index.js" \
+    --out        "${BUILD_ROOT}/lib/index.js" \
+    --sourceRoot "@keymanapp/keyman/web/build/app/browser/lib" \
+    --format esm
+
   mkdir -p "$KEYMAN_ROOT/web/build/app/resources/osk"
   cp -R "$KEYMAN_ROOT/web/src/resources/osk/." "$KEYMAN_ROOT/web/build/app/resources/osk/"
 
@@ -61,7 +78,7 @@ compile_and_copy() {
 
   local PROFILE_DEST="$KEYMAN_ROOT/web/build/profiling/"
   mkdir -p "$PROFILE_DEST"
-  cp "$KEYMAN_ROOT/web/build/app/browser/filesize-profile.log"      "$PROFILE_DEST/web-engine-filesize.log"
+  cp "${BUILD_ROOT}/filesize-profile.log"                           "$PROFILE_DEST/web-engine-filesize.log"
   cp "$KEYMAN_ROOT/common/web/lm-worker/build/filesize-profile.log" "$PROFILE_DEST/lm-worker-filesize.log"
 }