Remove require from UMD bundles (#12485)

.eslintignore

@@ -1,3 +1,4 @@
+.tmp
 !/*.js
 /tests/format/**/*.js
 /tests/integration/cli/

.eslintrc.js

@@ -167,7 +167,11 @@ module.exports = {
       },
     },
     {
-      files: ["**/*.mjs", "scripts/release/**/*.js"],
+      files: [
+        "**/*.mjs",
+        "scripts/release/**/*.js",
+        "scripts/tools/bundle-test/**/*.js",
+      ],
       parserOptions: {
         sourceType: "module",
       },

.github/workflows/bundler-friendly.yml

@@ -0,0 +1,62 @@
+name: Bundler_Friendly
+
+on:
+  schedule:
+    # “At 00:00 on Sunday.” https://crontab.guru/#0%C2%A00%C2%A0*%C2%A0*%C2%A00
+    - cron: "0 0 * * 0"
+  pull_request:
+    paths:
+      - "scripts/tools/bundle-test/**"
+      # This workflow file
+      - ".github/workflows/bundler-friendly.yml"
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: "yarn"
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build Package
+        run: yarn build
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: dist
+          path: dist
+
+  webpack:
+    name: Bundle Prettier with webpack
+    runs-on: ubuntu-latest
+    needs: [build]
+    defaults:
+      run:
+        working-directory: scripts/tools/bundle-test
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2.4.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2.5.1
+
+      - name: Download Artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: dist
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Test
+        run: yarn test

.github/workflows/dev-package-test.yml

@@ -2,12 +2,14 @@ name: Dev_Package_Test
 
 on:
   schedule:
-    - cron: "0 0 * * 1"
+    # “At 00:00 on Sunday.” https://crontab.guru/#0%C2%A00%C2%A0*%C2%A0*%C2%A00
+    - cron: "0 0 * * 0"
   pull_request:
     paths:
       - "package.json"
-      - ".github/workflows/dev-package-test.yml"
       - "yarn.lock"
+      # This workflow file
+      - ".github/workflows/dev-package-test.yml"
 
 jobs:
   test:

.github/workflows/eslint-rules.yml

@@ -4,10 +4,12 @@ on:
   push:
     paths:
       - "scripts/tools/eslint-plugin-prettier-internal-rules/**"
+      # This workflow file
       - ".github/workflows/eslint-rules.yml"
   pull_request:
     paths:
       - "scripts/tools/eslint-plugin-prettier-internal-rules/**"
+      # This workflow file
       - ".github/workflows/eslint-rules.yml"
 
 jobs:

.gitignore

@@ -1,12 +1,17 @@
-/.cache
+# node_modules
+# We have `node_modules` directory for tests, don't ignore them all
 /node_modules
+/website/node_modules
 /scripts/release/node_modules
+/scripts/tools/bundle-test/node_modules
+/scripts/tools/eslint-plugin-prettier-internal-rules/node_modules
+
+.tmp
 *.log
 /errors
 /test*.*
 /.vscode
 /dist
-/website/node_modules
 /website/build
 /website/i18n
 /website/static/playground.js
@@ -22,5 +27,4 @@ package-lock.json
 !.yarn/versions
 .pnp.*
 .nyc_output
-/scripts/tools/eslint-plugin-prettier-internal-rules/node_modules
 .devcontainer

.prettierignore

@@ -1,3 +1,4 @@
+.tmp
 dist/
 .cache/
 coverage/

changelog_unreleased/misc/12485.md

@@ -0,0 +1,3 @@
+#### Make artifact friendly for `webpack` (#12485 by @fisker)
+
+Previously, when bundling our UMD files `standalone.js`, `parser-typescript.js`, `webpack` warn about "Critical dependency: the request of a dependency is an expression", now this is fixed.

scripts/build/config.mjs

@@ -1,6 +1,7 @@
 import path from "node:path";
 import { createRequire } from "node:module";
 import createEsmUtils from "esm-utils";
+import { PROJECT_ROOT } from "../utils/index.mjs";
 
 const { require } = createEsmUtils(import.meta);
 
@@ -89,6 +90,24 @@ const parsers = [
         find: "typescriptVersionIsAtLeast[version] = semverCheck(version);",
         replacement: "typescriptVersionIsAtLeast[version] = true;",
       },
+      // The next two replacement fixed webpack warning `Critical dependency: require function is used in a way in which dependencies cannot be statically extracted`
+      // #12338
+      {
+        module: require.resolve(
+          "@typescript-eslint/typescript-estree/dist/create-program/shared.js"
+        ),
+        find: "moduleResolver = require(moduleResolverPath);",
+        replacement: "throw new Error('Dynamic require is not supported');",
+      },
+      {
+        module: require.resolve("typescript"),
+        process(text) {
+          return text.replace(
+            /(?<=\n)(?<indentString>\s+)function tryGetNodePerformanceHooks\(\) {.*?\n\k<indentString>}(?=\n)/s,
+            "function tryGetNodePerformanceHooks() {}"
+          );
+        },
+      },
 
       ...Object.entries({
         // `typescript/lib/typescript.js` expose extra global objects
@@ -285,6 +304,11 @@ const coreBundles = [
         path: require.resolve("./shims/chalk.cjs"),
       },
       replaceDiffPackageEntry("lib/diff/array.js"),
+      {
+        module: path.join(PROJECT_ROOT, "src/main/parser.js"),
+        find: "return requireParser(opts.parser);",
+        replacement: "",
+      },
     ],
   },
   {

scripts/tools/bundle-test/index.js

@@ -0,0 +1,73 @@
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import fs from "node:fs/promises";
+import webpack from "webpack";
+import { DIST_DIR } from "../../../scripts/utils/index.mjs";
+
+function runWebpack(config) {
+  return new Promise((resolve, reject) => {
+    webpack(config, (error, stats) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+
+      if (stats.hasErrors()) {
+        const { errors } = stats.toJson();
+        const error = new Error(errors[0].message);
+        error.errors = errors;
+        reject(error);
+        return;
+      }
+
+      resolve(stats);
+    });
+  });
+}
+
+const TEMPORARY_DIRECTORY = fileURLToPath(new URL("./.tmp", import.meta.url));
+
+/* `require` in `parser-typescript.js`, #12338 */
+(async () => {
+  const esmFilesDirectory = path.join(DIST_DIR, "esm");
+
+  const files = [
+    (await fs.readdir(DIST_DIR))
+      .filter(
+        (name) =>
+          name.startsWith("parser-") ||
+          name === "standalone.js" ||
+          name === "doc.js"
+      )
+      .map((name) => ({ name, file: path.join(DIST_DIR, name) })),
+    (await fs.readdir(esmFilesDirectory)).map((name) => ({
+      displayName: `esm/${name}`,
+      name,
+      file: path.join(esmFilesDirectory, name),
+    })),
+  ].flat();
+
+  for (const { displayName, name, file } of files) {
+    console.log(`${displayName || name}: `);
+
+    const stats = await runWebpack({
+      mode: "production",
+      entry: file,
+      output: {
+        path: TEMPORARY_DIRECTORY,
+        filename: `${name}.[contenthash:7].js`,
+      },
+      performance: { hints: false },
+      optimization: { minimize: false },
+    });
+    const result = stats.toJson();
+    const { warnings } = result;
+
+    if (warnings.length > 0) {
+      console.log(warnings);
+      throw new Error("Unexpected webpack warning.");
+    }
+
+    console.log("  Passed.");
+  }
+})();

scripts/tools/bundle-test/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@prettier/bundle-test",
+  "version": "0.0.0",
+  "private": "true",
+  "type": "module",
+  "devDependencies": {
+    "webpack": "5.70.0"
+  },
+  "scripts": {
+    "test": "node ./index.js"
+  }
+}