refactor: migrate packages to ESM (fwouts#1413)

kongweiying2 · Mar 8, 2023 · ebedf83 · ebedf83
1 parent dff55e0
commit ebedf83
Show file tree

Hide file tree

Showing 145 changed files with 480 additions and 465 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
diff --git a/.eslintrc.react.js → .eslintrc.react.cjs b/.eslintrc.react.js → .eslintrc.react.cjs
@@ -1,4 +1,4 @@
-const base = require("./.eslintrc");
+const base = require("./.eslintrc.cjs");
 
 module.exports = {
   ...base,

diff --git a/.github/workflows/test-app-e2e.yaml b/.github/workflows/test-app-e2e.yaml
@@ -31,25 +31,13 @@ jobs:
         os: [ubuntu-20.04, macos-11, windows-2022]
         group: [1, 2, 3]
         include:
-          # Important: Node 14 version must match minimum checked
-          # for CLI package.json, as well as IntelliJ and VS Code
-          # node --version checks.
-          - node-version: 14.18.0
+          - node-version: 16.x
             os: ubuntu-latest
             group: 1
-          - node-version: 14.18.0
+          - node-version: 16.x
             os: ubuntu-latest
             group: 2
-          - node-version: 14.18.0
-            os: ubuntu-latest
-            group: 3
-          - node-version: 16.9.0
-            os: ubuntu-latest
-            group: 1
-          - node-version: 16.9.0
-            os: ubuntu-latest
-            group: 2
-          - node-version: 16.9.0
+          - node-version: 16.x
             os: ubuntu-latest
             group: 3
     steps:

diff --git a/api/build.config.ts b/api/build.config.ts
@@ -1,8 +1,5 @@
 export default {
   entries: ["./src/index"],
-  rollup: {
-    emitCJS: true,
-  },
   declaration: true,
   clean: true,
 };
diff --git a/api/package.json b/api/package.json
@@ -14,16 +14,9 @@
     "url": "https://github.com/fwouts/previewjs/issues"
   },
   "homepage": "https://previewjs.com",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "type": "module",
+  "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
   "scripts": {
     "prepublish": "cd .. && turbo run build --scope=@previewjs/api --no-deps --include-dependencies",
     "build": "tsc && unbuild"

diff --git a/app/.eslintrc.cjs b/app/.eslintrc.cjs
@@ -0,0 +1 @@
+module.exports = require("../.eslintrc.react.cjs");
diff --git a/app/.eslintrc.js b/app/.eslintrc.js
diff --git a/app/build.config.ts b/app/build.config.ts
@@ -1,8 +1,5 @@
 export default {
   entries: ["./src/index"],
-  rollup: {
-    emitCJS: true,
-  },
   externals: ["@previewjs/api", "@previewjs/core"],
   clean: true,
   failOnWarn: false,

diff --git a/app/package.json b/app/package.json
@@ -14,14 +14,9 @@
     "url": "https://github.com/fwouts/previewjs/issues"
   },
   "homepage": "https://previewjs.com",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
-    }
-  },
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "prepublish": "cd .. && turbo run build --scope=@previewjs/app --no-deps --include-dependencies",
     "build": "tsc && unbuild && tsc -p client/tsconfig.json && vite build client",

diff --git a/app/src/index.ts b/app/src/index.ts
@@ -1,8 +1,10 @@
 import type { SetupPreviewEnvironment } from "@previewjs/core";
 import express from "express";
 import path from "path";
+import url from "url";
 
 const setup: SetupPreviewEnvironment = async () => {
+  const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
   return {
     middlewares: [express.static(path.join(__dirname, "..", "client", "dist"))],
   };

diff --git a/chromeless/build.config.ts b/chromeless/build.config.ts
@@ -1,8 +1,5 @@
 export default {
   entries: ["./src/index"],
-  rollup: {
-    emitCJS: true,
-  },
   declaration: true,
   clean: true,
 };
diff --git a/chromeless/package.json b/chromeless/package.json
@@ -14,16 +14,9 @@
     "url": "https://github.com/fwouts/previewjs/issues"
   },
   "homepage": "https://previewjs.com",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "type": "module",
+  "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
   "scripts": {
     "prepublish": "cd .. && turbo run build --scope=@previewjs/chromeless --no-deps --include-dependencies",
     "build": "rimraf dist && tsc && unbuild && vite build client"
@@ -35,7 +28,7 @@
     "@previewjs/properties": "^1.0.8",
     "@previewjs/vfs": "^1.2.16",
     "express": "^4.18.2",
-    "playwright": "^1.31.2"
+    "playwright": "~1.29.2"
   },
   "devDependencies": {
     "@types/express": "^4.17.17",

diff --git a/chromeless/src/workspace.ts b/chromeless/src/workspace.ts
@@ -6,6 +6,7 @@ import {
 import { createFileSystemReader, Reader } from "@previewjs/vfs";
 import express from "express";
 import path from "path";
+import url from "url";
 
 export async function createChromelessWorkspace({
   rootDirPath,
@@ -26,6 +27,7 @@ export async function createChromelessWorkspace({
       `No compatible framework plugin found for directory: ${rootDirPath}`
     );
   }
+  const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
   const clientDirPath = path.join(__dirname, "..", "client", "dist");
   const workspace = await createWorkspace({
     rootDirPath,

diff --git a/config/build.config.ts b/config/build.config.ts
@@ -1,8 +1,5 @@
 export default {
   entries: ["./src/index"],
-  rollup: {
-    emitCJS: true,
-  },
   externals: ["vite"],
   declaration: true,
   clean: true,

diff --git a/config/package.json b/config/package.json
@@ -14,16 +14,9 @@
     "url": "https://github.com/fwouts/previewjs/issues"
   },
   "homepage": "https://previewjs.com",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "type": "module",
+  "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
   "sideEffects": false,
   "scripts": {
     "prepublish": "cd .. && turbo run build --scope=@previewjs/config --no-deps --include-dependencies",

diff --git a/config/src/read-config.ts b/config/src/read-config.ts
@@ -1,7 +1,10 @@
 import fs from "fs";
+import { createRequire } from "module";
 import path from "path";
 import type { PreviewConfig } from "./config";
 
+const require = createRequire(import.meta.url);
+
 export const PREVIEW_CONFIG_NAME = "preview.config.js";
 
 export function readConfig(rootDirPath: string): PreviewConfig {

diff --git a/core/build.config.ts b/core/build.config.ts
@@ -1,8 +1,5 @@
 export default {
   entries: ["./src/index"],
-  rollup: {
-    emitCJS: true,
-  },
   externals: ["vite"],
   declaration: true,
   clean: true,

diff --git a/core/package.json b/core/package.json
@@ -14,16 +14,9 @@
     "url": "https://github.com/fwouts/previewjs/issues"
   },
   "homepage": "https://previewjs.com",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "type": "module",
+  "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
   "scripts": {
     "prepublish": "cd .. && turbo run build --scope=@previewjs/core --no-deps --include-dependencies",
     "build": "tsc && unbuild",

diff --git a/core/src/caching.ts b/core/src/caching.ts
@@ -1,8 +1,10 @@
 import fs from "fs";
 import path from "path";
+import url from "url";
 
 export function getCacheDir(rootDirPath: string) {
   try {
+    const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
     const { version } = JSON.parse(
       fs.readFileSync(path.resolve(__dirname, "..", "package.json"), "utf8")
     );

diff --git a/core/src/index.ts b/core/src/index.ts
@@ -4,6 +4,7 @@ import type { Reader } from "@previewjs/vfs";
 import express from "express";
 import fs from "fs-extra";
 import getPort from "get-port";
+import { createRequire } from "module";
 import path from "path";
 import type * as vite from "vite";
 import {
@@ -25,6 +26,8 @@ export type {
 export { setupFrameworkPlugin } from "./plugins/setup-framework-plugin";
 export type { SetupPreviewEnvironment } from "./preview-env";
 
+const require = createRequire(import.meta.url);
+
 process.on("uncaughtException", (e) => {
   console.error("Uncaught Exception:", e);
 });

diff --git a/core/src/plugins/setup-framework-plugin.ts b/core/src/plugins/setup-framework-plugin.ts
@@ -1,8 +1,11 @@
 import fs from "fs-extra";
+import { createRequire } from "module";
 import path from "path";
 import type { PackageDependencies } from "./dependencies";
 import type { FrameworkPluginFactory } from "./framework";
 
+const require = createRequire(import.meta.url);
+
 export async function setupFrameworkPlugin({
   rootDirPath,
   frameworkPluginFactories,

diff --git a/core/src/vite/plugins/component-loader-plugin.ts b/core/src/vite/plugins/component-loader-plugin.ts
@@ -1,5 +1,5 @@
 import type { PreviewConfig } from "@previewjs/config";
-import { pathExistsSync } from "fs-extra";
+import fs from "fs-extra";
 import path from "path";
 import { URLSearchParams } from "url";
 import type { Plugin } from "vite";
@@ -64,7 +64,7 @@ export async function refresh() {
   const shouldAbortRender = () => renderId !== (getLatestComponentLoadId() + "-" + refreshId);
   let loadingError = null;
   ${
-    wrapper && pathExistsSync(path.join(rootDirPath, wrapper.path))
+    wrapper && fs.pathExistsSync(path.join(rootDirPath, wrapper.path))
       ? `
   let wrapperModulePromise;
   if (import.meta.hot.data.preloadedWrapperModule) {

diff --git a/core/src/vite/vite-manager.ts b/core/src/vite/vite-manager.ts
@@ -143,8 +143,7 @@ export class ViteManager {
       ])
     );
     const vitePlugins: Array<vite.PluginOption | vite.PluginOption[]> = [
-      // @ts-expect-error
-      viteTsconfigPaths.default({
+      viteTsconfigPaths({
         root: this.options.rootDirPath,
         projects: validTypeScriptFilePaths,
       }),

diff --git a/core/tsconfig.json b/core/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "lib": ["ES2019", "DOM"],
+    "lib": ["ES2020", "DOM"],
     "moduleResolution": "node",
     "rootDir": ".",
     "outDir": "dist",

diff --git a/csf3/build.config.ts b/csf3/build.config.ts
@@ -1,8 +1,5 @@
 export default {
   entries: ["./src/index"],
-  rollup: {
-    emitCJS: true,
-  },
   declaration: true,
   clean: true,
 };
diff --git a/csf3/package.json b/csf3/package.json
@@ -14,16 +14,9 @@
     "url": "https://github.com/fwouts/previewjs/issues"
   },
   "homepage": "https://previewjs.com",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "type": "module",
+  "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
   "scripts": {
     "prepublish": "cd .. && turbo run build --scope=@previewjs/csf3 --no-deps --include-dependencies",
     "build": "tsc && unbuild",

diff --git a/daemon/build.config.ts b/daemon/build.config.ts
@@ -1,13 +1,9 @@
 export default {
   entries: ["./src/client", "./src/index"],
   rollup: {
-    emitCJS: true,
     inlineDependencies: true,
     resolve: {
-      browser: false
-    },
-    commonjs: {
-      ignoreDynamicRequires: true,
+      browser: false,
     },
   },
   declaration: true,

diff --git a/daemon/package.json b/daemon/package.json
@@ -13,18 +13,15 @@
     "url": "https://github.com/fwouts/previewjs/issues"
   },
   "homepage": "https://previewjs.com",
-  "type": "commonjs",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "type": "module",
+  "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
     "./client": {
-      "require": "./dist/client.cjs",
       "import": "./dist/client.mjs",
       "types": "./dist/client.d.ts"
     }

diff --git a/daemon/src/client.ts b/daemon/src/client.ts
@@ -19,9 +19,9 @@ import type {
   UpdateClientStatusResponse,
   UpdatePendingFileRequest,
   UpdatePendingFileResponse,
-} from "./api";
+} from "./api.js";
 import { waitForSuccessfulPromise } from "./wait-for-successful-promise";
-export * from "./api";
+export * from "./api.js";
 
 export function createClient(baseUrl: string): Client {
   const locking = exclusivePromiseRunner();

diff --git a/daemon/src/index.ts b/daemon/src/index.ts
@@ -31,8 +31,8 @@ import type {
   UpdateClientStatusResponse,
   UpdatePendingFileRequest,
   UpdatePendingFileResponse,
-} from "./api";
-import { createClient } from "./client";
+} from "./api.js";
+import { createClient } from "./client.js";
 
 const AUTOMATIC_SHUTDOWN_DELAY_SECONDS = 30;
 

diff --git a/daemon/src/main.ts b/daemon/src/main.ts
@@ -1,4 +1,4 @@
-import { startDaemon } from ".";
+import { startDaemon } from "./index.js";
 
 const port = parseInt(process.env.PORT || "9100");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require("../.eslintrc.react.cjs");