fix(build): fix build after dependency updates (#6251)

* fix(build): fix build after dependency updates

* more build improvements

* prettier

Author: christian-bromann

package.json

@@ -97,7 +97,7 @@
     "build": "npm run clean && npm run tsc.prod && npm run ts scripts/index.ts -- --prod --ci",
     "build.watch": "npm run build -- --watch",
     "build.updateSelectorEngine": "npm run ts scripts/updateSelectorEngine.ts",
-    "clean": "rimraf build/ cli/ compiler/ dev-server/ internal/ mock-doc/ sys/ testing/ && npm run clean:scripts && npm run clean.screenshots",
+    "clean": "rimraf --max-retries=2 build/ cli/ compiler/ dev-server/ internal/ mock-doc/ sys/node/ sys/ testing/ && npm run clean:scripts && npm run clean.screenshots",
     "clean.screenshots": "rimraf test/end-to-end/screenshot/builds test/end-to-end/screenshot/images",
     "clean:scripts": "rimraf scripts/build",
     "lint": "eslint 'bin/*' 'scripts/*.ts' 'scripts/**/*.ts' 'src/*.ts' 'src/**/*.ts' 'src/**/*.tsx' 'test/wdio/**/*.tsx'",

scripts/esbuild/dev-server.ts

@@ -9,7 +9,6 @@ import ts from 'typescript';
 import { getBanner } from '../utils/banner';
 import { type BuildOptions, createReplaceData } from '../utils/options';
 import { writePkgJson } from '../utils/write-pkg-json';
-import { bundleExternal, sysNodeBundleCacheDir } from './sys-node';
 import { externalAlias, getBaseEsbuildOptions, getEsbuildAliases, getFirstOutputFile, runBuilds } from './utils';
 import { createContentTypeData } from './utils/content-types';
 
@@ -64,20 +63,7 @@ export async function buildDevServer(opts: BuildOptions) {
   const xdgOpenDestPath = join(opts.output.devServerDir, 'xdg-open');
   await fs.copy(xdgOpenSrcPath, xdgOpenDestPath);
 
-  const cachedDir = join(opts.scriptsBuildDir, sysNodeBundleCacheDir);
-  await Promise.all([
-    bundleExternal(opts, opts.output.devServerDir, cachedDir, 'ws.js'),
-    bundleExternal(opts, opts.output.devServerDir, cachedDir, 'open-in-editor-api.js'),
-  ]);
-
-  const external = [
-    ...builtinModules,
-    // ws.js is externally bundled
-    './ws.js',
-    // open-in-editor-api is externally bundled
-    './open-in-editor-api',
-  ];
-
+  const external = [...builtinModules];
   const devServerAliases = {
     ...getEsbuildAliases(),
     glob: '../../sys/node/glob.js',

scripts/esbuild/sys-node.ts

@@ -90,16 +90,12 @@ async function sysNodeExternalBundles(opts: BuildOptions) {
   const cachedDir = path.join(opts.scriptsBuildDir, sysNodeBundleCacheDir);
 
   await fs.ensureDir(cachedDir);
-
   await Promise.all([
     bundleExternal(opts, opts.output.sysNodeDir, cachedDir, 'autoprefixer.js'),
     bundleExternal(opts, opts.output.sysNodeDir, cachedDir, 'glob.js'),
     bundleExternal(opts, opts.output.sysNodeDir, cachedDir, 'graceful-fs.js'),
     bundleExternal(opts, opts.output.sysNodeDir, cachedDir, 'node-fetch.js'),
     bundleExternal(opts, opts.output.sysNodeDir, cachedDir, 'prompts.js'),
-    // TODO(STENCIL-1052): remove next two entries once Rollup -> esbuild migration is complete
-    bundleExternal(opts, opts.output.devServerDir, cachedDir, 'open-in-editor-api.js'),
-    bundleExternal(opts, opts.output.devServerDir, cachedDir, 'ws.js'),
   ]);
 
   /**
@@ -110,18 +106,6 @@ async function sysNodeExternalBundles(opts: BuildOptions) {
   const globOutputPath = path.join(opts.output.sysNodeDir, 'glob.js');
   const glob = fs.readFileSync(globOutputPath, 'utf8');
   fs.writeFileSync(globOutputPath, glob.replace(/require\("node:/g, 'require("'));
-
-  // open-in-editor's visualstudio.vbs file
-  // TODO(STENCIL-1052): remove once Rollup -> esbuild migration is complete
-  const visualstudioVbsSrc = path.join(opts.nodeModulesDir, 'open-in-editor', 'lib', 'editors', 'visualstudio.vbs');
-  const visualstudioVbsDesc = path.join(opts.output.devServerDir, 'visualstudio.vbs');
-  await fs.copy(visualstudioVbsSrc, visualstudioVbsDesc);
-
-  // copy open's xdg-open file
-  // TODO(STENCIL-1052): remove once Rollup -> esbuild migration is complete
-  const xdgOpenSrcPath = path.join(opts.nodeModulesDir, 'open', 'xdg-open');
-  const xdgOpenDestPath = path.join(opts.output.devServerDir, 'xdg-open');
-  await fs.copy(xdgOpenSrcPath, xdgOpenDestPath);
 }
 
 export function bundleExternal(opts: BuildOptions, outputDir: string, cachedDir: string, entryFileName: string) {
@@ -184,34 +168,40 @@ export function bundleExternal(opts: BuildOptions, outputDir: string, cachedDir:
       mode: 'production',
     };
 
+    console.log(`[sys-node] bundleExternal ${entryFileName} via webpack`);
     webpack(webpackConfig, async (err, stats) => {
-      const { minify } = await import('terser');
-      if (err && err.message) {
-        rejectBundle(err);
-      } else if (stats) {
-        const info = stats.toJson({ errors: true });
-        if (stats.hasErrors() && info && info.errors) {
-          const webpackError = info.errors.join('\n');
-          rejectBundle(webpackError);
-        } else {
-          let code = await fs.readFile(outputFile, 'utf8');
-
-          if (opts.isProd) {
-            try {
-              const minifyResults = await minify(code);
-              if (minifyResults.code) {
-                code = minifyResults.code;
+      try {
+        console.log(`[sys-node] bundleExternal ${entryFileName} success, err: ${err}, stats: ${stats}`);
+        const { minify } = await import('terser');
+        if (err && err.message) {
+          rejectBundle(err);
+        } else if (stats) {
+          const info = stats.toJson({ errors: true });
+          if (stats.hasErrors() && info && info.errors) {
+            const webpackError = info.errors.join('\n');
+            rejectBundle(webpackError);
+          } else {
+            let code = await fs.readFile(outputFile, 'utf8');
+
+            if (opts.isProd) {
+              try {
+                const minifyResults = await minify(code);
+                if (minifyResults.code) {
+                  code = minifyResults.code;
+                }
+              } catch (e) {
+                rejectBundle(e);
+                return;
               }
-            } catch (e) {
-              rejectBundle(e);
-              return;
             }
-          }
-          await fs.writeFile(cachedFile, code);
-          await fs.writeFile(outputFile, code);
+            await fs.writeFile(cachedFile, code);
+            await fs.writeFile(outputFile, code);
 
-          resolveBundle();
+            resolveBundle();
+          }
         }
+      } catch (e) {
+        rejectBundle(e);
       }
     });
   });

scripts/esbuild/utils/index.ts

@@ -22,9 +22,6 @@ export function getEsbuildAliases(): Record<string, string> {
     '@stencil/core/internal/testing': '../internal/testing/index.js',
     '@stencil/core/cli': '../cli/index.cjs',
     '@sys-api-node': '../sys/node/index.js',
-
-    // dev server related aliases
-    ws: './ws.js',
   };
 }
 

scripts/test/validate-build.ts

@@ -30,11 +30,9 @@ const pkgs: TestPackage[] = [
       'dev-server/templates/directory-index.html',
       'dev-server/templates/initial-load.html',
       'dev-server/connector.html',
-      'dev-server/open-in-editor-api.js',
       'dev-server/server-process.js',
       'dev-server/server-worker-thread.js',
       'dev-server/visualstudio.vbs',
-      'dev-server/ws.js',
       'dev-server/xdg-open',
     ],
   },

src/dev-server/server-web-socket.ts

@@ -1,20 +1,20 @@
 import { noop } from '@utils';
 import type { Server } from 'http';
-import ws from 'ws';
+import WebSocket, { type ServerOptions, WebSocketServer } from 'ws';
 
 import type * as d from '../declarations';
 
 export function createWebSocket(
   httpServer: Server,
   onMessageFromClient: (msg: d.DevServerMessage) => void,
 ): DevWebSocket {
-  const wsConfig: ws.ServerOptions = {
+  const wsConfig: ServerOptions = {
     server: httpServer,
   };
 
-  const wsServer: ws.Server = new ws.Server(wsConfig);
+  const wsServer = new WebSocketServer(wsConfig);
 
-  function heartbeat(this: ws) {
+  function heartbeat(this: WebSocket) {
     // we need to coerce the `ws` type to our custom `DevWS` type here, since
     // this function is going to be passed in to `ws.on('pong'` which expects
     // to be passed a function where `this` is bound to `ws`.
@@ -84,6 +84,6 @@ export interface DevWebSocket {
   close: () => Promise<void>;
 }
 
-interface DevWS extends ws {
+interface DevWS extends WebSocket {
   isAlive: boolean;
 }

src/sys/node/bundles/open-in-editor-api.js

@@ -12,7 +12,7 @@
     "jsxFragmentFactory": "Fragment",
     "lib": ["dom", "es2021"],
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "noImplicitAny": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,