Make esbuild to produce bundled and minified VSIX

This fix makes 'esbuild' to produce the bundled and minified VSIX extension archive,
free of unneeded dependency modules, when the packaging is started with `vsce package`.

On other hand, when building with `npm install && npm run build` and testing with `npm test`
the extension file structure is kept unchange and the trunspiled scripts aren't minified,
so the unit testing and coverage tests work as usual.

Note: `npm install` is needed to be executed after executing `vsce package` as the last one
clears the `node_modules/` of the depencencies not needed in production.

Fixes #4226

Signed-off-by: Victor Rubezhny <[email protected]>

Author: vrubezhny

.vscodeignore

@@ -1,36 +1,42 @@
-.vscode/**
-.vscode-test/**
+azure-pipelines.yml
+build/**
+build/**
+CONTRIBUTING.md
+coverage/**
+coverconfig.json
+doc/**
+.eslintignore
+.gitattributes
+.github
+.gitignore
+header.js
+images/demo-featured-image.png
 images/gif/**
-out/test/**
+Jenkinsfile
+.mocharc.js
+out/build**
 out/build/**
-out/test-resources/**
-out/tools-cache/**
+out/coverage/**
 out/**/*.map
 out/src-orig/**
+out/test/**
+out/test-resources/**
+out/tools-cache/**
+out/webview/**
+*.sha256
 src/**
 !src/tools.json
-doc/**
-.gitignore
-.github
-tsconfig.json
-vsc-extension-quickstart.md
-tslint.json
-*.vsix
 test/**
-out/coverage/**
-coverconfig.json
-Jenkinsfile
-.gitattributes
-.travis.yml
-CONTRIBUTING.md
-build/**
-out/build**
-azure-pipelines.yml
-images/demo-featured-image.png
+test/**
+test-resources/**
 test-resources/**
-header.js
-.mocharc.js
-.eslintignore
 *.tgz
-*.sha256
-**.tsbuildinfo
+.travis.yml
+*/**.tsbuildinfo
+tsconfig.json
+tsconfig.tsbuildinfo
+tslint.json
+vsc-extension-quickstart.md
+.vscode/**
+.vscode-test/**
+*.vsix

build/esbuild.mjs

@@ -7,6 +7,12 @@ import * as esbuild from 'esbuild';
 import svgr from 'esbuild-plugin-svgr';
 import { sassPlugin } from 'esbuild-sass-plugin';
 import * as fs from 'fs/promises';
+import * as glob from 'glob';
+import { createRequire } from 'module';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+const require = createRequire(import.meta.url);
 
 const webviews = [
     'cluster',
@@ -26,14 +32,138 @@ const webviews = [
     'openshift-terminal',
 ];
 
-await Promise.all([
-    esbuild.build({
-        entryPoints: webviews.map(webview => `./src/webview/${webview}/app/index.tsx`),
-        bundle: true,
-        outdir: 'out',
+const production = process.argv.includes('--production');
+
+// eslint-disable no-console
+console.log(`esbuild: building for production: ${production ? 'Yes' : 'No'}`);
+
+const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+const __dirname = path.resolve(path.dirname(__filename), '..'); // get the name of the directory
+const srcDir = 'src'; // Input source directory
+const outDir = 'out'; // Output dist directory
+
+function detectGoal(entryPoints) {
+    if (production) {
+        const isExtension = entryPoints.filter((ep) => `${ep}`.includes('extension.ts')).length > 0;
+        const isWebviews = entryPoints.filter((ep) => `${ep}`.includes('.tsx')).length > 0;
+        return isExtension ? 'Extension' :  isWebviews ? 'the Webviews' : '';
+    }
+    return 'Extension and the Webviews for testing/debugging';
+}
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+    name: 'esbuild-problem-matcher',
+
+    setup(build) {
+      build.onStart(() => {
+        const goal = detectGoal(build.initialOptions.entryPoints);
+        console.log(`[watch] build started${goal ? ' for ' + goal : ''}...` );
+      });
+      build.onEnd(result => {
+        result.errors.forEach(({ text, location }) => {
+          console.error(`✘ [ERROR] ${text}`);
+          if (location) {
+            console.error(`    ${location.file}:${location.line}:${location.column}:`);
+          }
+        });
+        const goal = detectGoal(build.initialOptions.entryPoints);
+        console.log(`[watch] build finished${goal ? ' for ' + goal : ''}`);
+      });
+    }
+  };
+
+const nativeNodeModulesPlugin = {
+    name: 'native-node-modules',
+    setup(build) {
+        try {
+            // If a ".node" file is imported within a module in the "file" namespace, resolve
+            // it to an absolute path and put it into the "node-file" virtual namespace.
+            build.onResolve({ filter: /\.node$/, namespace: 'file' }, args => ({
+                path: require.resolve(args.path, { paths: [args.resolveDir] }),
+                namespace: 'node-file',
+            }));
+
+            // Files in the "node-file" virtual namespace call "require()" on the
+            // path from esbuild of the ".node" file in the output directory.
+            build.onLoad({ filter: /.*/, namespace: 'node-file' }, args => ({
+            contents: `
+                import path from ${JSON.stringify(args.path)}
+                try {
+                    module.exports = require(path)
+                } catch {}
+            `,
+            }))
+
+            // If a ".node" file is imported within a module in the "node-file" namespace, put
+            // it in the "file" namespace where esbuild's default loading behavior will handle
+            // it. It is already an absolute path since we resolved it to one above.
+            build.onResolve({ filter: /\.node$/, namespace: 'node-file' }, args => ({
+                path: args.path,
+                namespace: 'file',
+            }));
+
+            // Tell esbuild's default loading behavior to use the "file" loader for
+            // these ".node" files.
+            let opts = build.initialOptions
+            opts.loader = opts.loader || {}
+            opts.loader['.node'] = 'file'
+        } catch (err) {
+            console.error(`native-node-modules: ERROR: ${err}`);
+        }
+    },
+};
+
+const baseConfig = {
+    bundle: true,
+    target: 'chrome108',
+    minify: production,
+    sourcemap: !production,
+    logLevel: 'warning',
+};
+
+if (production) {
+    // Build the extension.js
+    const extConfig = {
+        ...baseConfig,
+        platform: 'node',
+        entryPoints: [`./${srcDir}/extension.ts`],
+        outfile: `${outDir}/${srcDir}/extension.js`,
+        external: ['vscode', 'shelljs'],
+        plugins: [
+            nativeNodeModulesPlugin,
+            esbuildProblemMatcherPlugin // this one is to be added to the end of plugins array
+        ]
+    };
+    await esbuild.build(extConfig);
+
+    // Build the Webviews
+    const webviewsConfig = {
+        ...baseConfig,
+        platform: 'browser',
+        entryPoints: [...webviews.map(webview => `./${srcDir}/webview/${webview}/app/index.tsx`)],
+        outdir: `${outDir}`,
+        loader: {
+            '.png': 'file',
+        },
+        plugins: [
+            sassPlugin(),
+            svgr({
+                plugins: ['@svgr/plugin-jsx']
+            }),
+            esbuildProblemMatcherPlugin // this one is to be added to the end of plugins array
+        ]
+    };
+    await esbuild.build(webviewsConfig);
+} else {
+    // Build the Webviews
+    const devConfig = {
+        ...baseConfig,
         platform: 'browser',
-        target: 'chrome108',
-        sourcemap: true,
+        entryPoints: [...webviews.map(webview => `./${srcDir}/webview/${webview}/app/index.tsx`)],
+        outdir: `${outDir}`,
         loader: {
             '.png': 'file',
         },
@@ -42,9 +172,32 @@ await Promise.all([
             svgr({
                 plugins: ['@svgr/plugin-jsx']
             }),
+            esbuildProblemMatcherPlugin // this one is to be added to the end of plugins array
         ]
-    }),
-    ...webviews.map(webview =>
-        fs.cp(`./src/webview/${webview}/app/index.html`, `./out/${webview}/app/index.html`)
-    ),
-]);
+    };
+    await esbuild.build(devConfig);
+}
+
+async function dirExists(path) {
+    try {
+        if ((await fs.stat(path)).isDirectory()) {
+            return true;
+        }
+    } catch {
+        // Ignore
+    }
+    return false;
+}
+
+// Copy webview's 'index.html's to the output webview dirs
+await Promise.all([
+    ...webviews.map(async webview => {
+        const targetDir = path.join(__dirname, `${outDir}/${webview}/app`);
+        if (!dirExists(targetDir)) {
+            await fs.mkdir(targetDir, { recursive: true, mode: 0o750} );
+        }
+        glob.sync([ `${srcDir}/webview/${webview}/app/index.html` ]).map(async srcFile => {
+            await fs.cp(path.join(__dirname, srcFile), path.join(targetDir, `${path.basename(srcFile)}`))
+        });
+    })
+]);

build/run-tests.ts

@@ -27,9 +27,9 @@ async function main(): Promise<void> {
                 '--disable-workspace-trust',
             ],
         });
-    } catch {
+    } catch (err) {
         // eslint-disable-next-line no-console
-        console.error('Failed to run tests');
+        console.error(`Failed to run tests: ${err}`);
         process.exit(1);
     }
 }