refactor: spin up a separate Node process for each preview server

chromeless/src/preview.ts

@@ -21,7 +21,7 @@ export async function startPreview({
   port?: number;
 }) {
   const preview = await workspace.startServer({ port });
-  await page.goto(preview.url());
+  await page.goto(`http://localhost:${preview.port}`);
 
   // This callback will be invoked each time a previewable is done rendering.
   let onRenderingDone = () => {

core/src/index.ts

@@ -200,7 +200,7 @@ export async function createWorkspace({
       await previewer.start();
       activePreviewers.add(previewer);
       return {
-        url: () => `http://localhost:${port}`,
+        port,
         stop: async () => {
           activePreviewers.delete(previewer);
           await previewer.stop();
@@ -245,6 +245,6 @@ export interface Workspace {
 }
 
 export interface PreviewServer {
-  url(): string;
+  port: number;
   stop(): Promise<void>;
 }

daemon/patch-build.ts

@@ -1,14 +1,26 @@
-// For some reason, index.mjs ends up with an incorrect import
+// For some reason, we end up with an incorrect import
 // that looks like `import ... from 'process/'`.
 //
 // This script removes the unwanted slash.
 
 import fs from "fs";
+import path from "path";
 
-const indexFilePath = "dist/index.mjs";
-const indexContent = fs.readFileSync(indexFilePath, "utf8");
-fs.writeFileSync(
-  indexFilePath,
-  indexContent.replace(`'process/'`, `'process'`),
-  "utf8"
-);
+visit("./dist");
+
+function visit(dirPath: string) {
+  for (const f of fs.readdirSync(dirPath)) {
+    const filePath = path.join(dirPath, f);
+    const stat = fs.statSync(filePath);
+    if (stat.isFile()) {
+      const content = fs.readFileSync(filePath, "utf8");
+      fs.writeFileSync(
+        filePath,
+        content.replace(`'process/'`, `'process'`),
+        "utf8"
+      );
+    } else if (stat.isDirectory()) {
+      visit(filePath);
+    }
+  }
+}

daemon/src/index.ts

@@ -108,19 +108,22 @@ if (logFilePath) {
 
 export interface DaemonStartOptions {
   loaderInstallDir: string;
+  loaderWorkerPath: string;
   onServerStartModuleName: string;
   versionCode: string;
   port: number;
 }
 
 export async function startDaemon({
   loaderInstallDir,
+  loaderWorkerPath,
   onServerStartModuleName,
   versionCode,
   port,
 }: DaemonStartOptions) {
   const previewjs = await load({
     installDir: loaderInstallDir,
+    workerFilePath: loaderWorkerPath,
     onServerStartModuleName,
   });
   const logger = previewjs.logger;
@@ -357,7 +360,7 @@ export async function startDaemon({
         previewServers[req.workspaceId] || (await workspace.startServer());
       previewServers[req.workspaceId] = previewServer;
       return {
-        url: previewServer.url(),
+        url: `http://localhost:${previewServer.port}`,
       };
     }
   );

daemon/src/main.ts

@@ -4,19 +4,25 @@ const port = parseInt(process.env.PORT || "9100");
 
 const onServerStartModuleName =
   process.env.PREVIEWJS_PACKAGE_NAME || "@previewjs/pro";
-const loaderInstallDir = process.env.PREVIEWJS_LOADER_INSTALL_DIR!;
 
+const loaderInstallDir = process.env.PREVIEWJS_LOADER_INSTALL_DIR!;
 if (!loaderInstallDir) {
   throw new Error(`Missing environment variable: PREVIEWJS_LOADER_INSTALL_DIR`);
 }
 
+const loaderWorkerPath = process.env.PREVIEWJS_LOADER_WORKER_PATH!;
+if (!loaderWorkerPath) {
+  throw new Error(`Missing environment variable: PREVIEWJS_LOADER_WORKER_PATH`);
+}
+
 const versionCode = process.env.PREVIEWJS_VERSION_CODE!;
 if (!versionCode) {
   throw new Error(`Missing environment variable: PREVIEWJS_VERSION_CODE`);
 }
 
 startDaemon({
   loaderInstallDir,
+  loaderWorkerPath,
   onServerStartModuleName,
   versionCode,
   port,

integrations/cli/esbuild.js

@@ -6,11 +6,11 @@ import url from "url";
 try {
   const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
   await build({
-    entryPoints: ["./src/main.ts"],
+    entryPoints: ["./src/main.ts", "./src/worker.ts"],
     minify: false,
     bundle: true,
     format: "esm",
-    outfile: "./dist/main.js",
+    outdir: "./dist",
     platform: "node",
     target: "es2020",
     banner: {

integrations/cli/src/main.ts

@@ -4,6 +4,7 @@ import { load } from "@previewjs/loader";
 import chalk from "chalk";
 import { program } from "commander";
 import { readFileSync } from "fs";
+import path from "path";
 import url from "url";
 
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
@@ -30,6 +31,7 @@ program
     const onServerStartModuleName = process.env.PREVIEWJS_PACKAGE_NAME;
     const previewjs = await load({
       installDir: process.env.PREVIEWJS_MODULES_DIR || __dirname,
+      workerFilePath: path.join(__dirname, "worker.js"),
       onServerStartModuleName,
     });
     const workspace = await previewjs.getWorkspace({

integrations/cli/src/worker.ts

@@ -0,0 +1 @@
+import "@previewjs/loader/worker";

integrations/intellij/daemon/esbuild.js

@@ -20,11 +20,11 @@ try {
   }
 
   await build({
-    entryPoints: ["./src/main.ts"],
+    entryPoints: ["./src/main.ts", "./src/worker.ts"],
     minify: false,
     bundle: true,
     format: "esm",
-    outfile: "./dist/main.js",
+    outdir: "./dist",
     platform: "node",
     target: "es2020",
     define: {

integrations/intellij/daemon/src/main.ts

@@ -1,4 +1,5 @@
 import { startDaemon } from "@previewjs/daemon";
+import path from "path";
 import url from "url";
 
 const port = parseInt(process.argv[2] || "0", 10);
@@ -19,6 +20,7 @@ if (!version) {
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 startDaemon({
   loaderInstallDir: __dirname,
+  loaderWorkerPath: path.join(__dirname, "worker.js"),
   onServerStartModuleName,
   versionCode: `intellij-${version}`,
   port,

integrations/intellij/daemon/src/worker.ts

@@ -0,0 +1 @@
+import "@previewjs/loader/worker";

integrations/vscode/esbuild.mjs

@@ -7,7 +7,7 @@ import url from "url";
 try {
   const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
   await build({
-    entryPoints: ["./src/index.ts", "./src/daemon.ts"],
+    entryPoints: ["./src/index.ts", "./src/daemon.ts", "./src/worker.ts"],
     minify: false,
     bundle: true,
     format: "cjs", // VS Code does not support ESM extensions

integrations/vscode/src/daemon.ts

@@ -1,5 +1,6 @@
 import { startDaemon } from "@previewjs/daemon";
 import { readFileSync } from "fs";
+import { join } from "path";
 
 const { version } = JSON.parse(
   readFileSync(`${__dirname}/../package.json`, "utf8")
@@ -17,6 +18,7 @@ if (!port) {
 
 startDaemon({
   loaderInstallDir: process.env.PREVIEWJS_MODULES_DIR || __dirname,
+  loaderWorkerPath: join(__dirname, "worker.js"),
   onServerStartModuleName,
   versionCode: `vscode-${version}`,
   port,

integrations/vscode/src/start-daemon.ts

@@ -133,6 +133,9 @@ async function startDaemon(outputChannel: OutputChannel): Promise<{
     });
   }
   daemonProcess.unref();
+  daemonProcess.on("error", (error) => {
+    outputChannel.append(`${error}`);
+  });
   return { daemonProcess };
 }
 

integrations/vscode/src/worker.ts

@@ -0,0 +1 @@
+import "@previewjs/loader/worker";

loader/package.json

@@ -24,6 +24,9 @@
     "./runner": {
       "default": "./dist/runner.js"
     },
+    "./worker": {
+      "default": "./dist/worker.js"
+    },
     "./setup": {
       "default": "./dist/setup.js"
     }
@@ -33,6 +36,9 @@
       "runner": [
         "./dist/runner.d.ts"
       ],
+      "worker": [
+        "./dist/worker.d.ts"
+      ],
       "setup": [
         "./dist/setup.d.ts"
       ]
@@ -44,7 +50,9 @@
   "devDependencies": {
     "@previewjs/core": "workspace:*",
     "@previewjs/vfs": "workspace:*",
-    "@types/fs-extra": "^11.0.3",
+    "@types/fs-extra": "^11.0.2",
+    "@types/proper-lockfile": "^4.1.2",
+    "assert-never": "^1.2.1",
     "exclusive-promises": "^1.0.3",
     "execa": "^8.0.1",
     "fs-extra": "^11.1.1",

loader/src/index.ts

@@ -1,3 +1,4 @@
-export type LogLevel = "silent" | "error" | "warn" | "info";
+export type LogLevel = "silent" | "error" | "warn" | "info" | "debug";
 
 export { load } from "./runner.js";
+export type { ServerWorker as WorkspaceWorker } from "./runner.js";

loader/src/modules.ts

@@ -6,15 +6,7 @@ import path from "path";
 import type { Logger } from "pino";
 import url from "url";
 
-export async function loadModules({
-  logger,
-  installDir,
-  onServerStartModuleName,
-}: {
-  logger: Logger;
-  installDir: string;
-  onServerStartModuleName?: string;
-}) {
+export async function installDependenciesIfRequired(installDir: string) {
   if (
     fs.existsSync(path.join(installDir, "pnpm")) &&
     !fs.existsSync(path.join(installDir, "node_modules"))
@@ -36,6 +28,17 @@ export async function loadModules({
     // Note: The bracketed tag is required for VS Code and IntelliJ to detect end of installation.
     process.stdout.write("[install:end] Done.\n");
   }
+}
+
+export async function loadModules({
+  logger,
+  installDir,
+  onServerStartModuleName,
+}: {
+  logger: Logger;
+  installDir: string;
+  onServerStartModuleName?: string;
+}) {
   const coreModule: typeof core = await importModule("@previewjs/core");
   const vfsModule: typeof vfs = await importModule("@previewjs/vfs");
   const frameworkPlugins: core.FrameworkPluginFactory[] = [

loader/src/resolvable-promise.ts

@@ -0,0 +1,22 @@
+export type ResolvablePromise<T> = Promise<T> & {
+  resolved: T | null;
+};
+
+export function resolvablePromise<T>(promise: Promise<T>) {
+  let onResolve: (value: T) => void;
+  let onReject: (error: any) => void;
+  const resolvablePromise = new Promise<T>((resolve, reject) => {
+    onResolve = resolve;
+    onReject = reject;
+  }) as ResolvablePromise<T>;
+  resolvablePromise.resolved = null;
+  promise
+    .then((value) => {
+      resolvablePromise.resolved = value;
+      onResolve(value);
+    })
+    .catch((e) => {
+      onReject(e);
+    });
+  return resolvablePromise;
+}