Refactor website build script (#11488)

scripts/build-docs.mjs

@@ -1,70 +0,0 @@
-#!/usr/bin/env node
-
-import path from "node:path";
-import fs from "node:fs";
-import shell from "shelljs";
-import globby from "globby";
-import prettier from "prettier";
-import createEsmUtils from "esm-utils";
-
-shell.config.fatal = true;
-
-const { __dirname, require } = createEsmUtils(import.meta);
-const rootDir = path.join(__dirname, "..");
-const docs = path.join(rootDir, "website/static/lib");
-
-function pipe(string) {
-  return new shell.ShellString(string);
-}
-
-const isPullRequest = process.env.PULL_REQUEST === "true";
-const prettierPath = path.join(
-  rootDir,
-  isPullRequest ? "dist" : "node_modules/prettier"
-);
-
-shell.mkdir("-p", docs);
-
-if (isPullRequest) {
-  // --- Build prettier for PR ---
-  const pkg = require("../package.json");
-  const newPkg = { ...pkg, version: `999.999.999-pr.${process.env.REVIEW_ID}` };
-  pipe(JSON.stringify(newPkg, null, 2)).to("package.json");
-  shell.exec("yarn build --playground");
-  pipe(JSON.stringify(pkg, null, 2) + "\n").to("package.json"); // restore
-}
-
-shell.cp(`${prettierPath}/standalone.js`, `${docs}/`);
-shell.cp(`${prettierPath}/parser-*.js`, `${docs}/`);
-
-const parserModules = globby.sync(["parser-*.js"], { cwd: prettierPath });
-const parsers = {};
-for (const file of parserModules) {
-  const plugin = require(path.join(prettierPath, file));
-  const property = file.replace(/\.js$/, "").split("-")[1];
-  parsers[file] = {
-    parsers: Object.keys(plugin.parsers),
-    property,
-  };
-}
-
-fs.writeFileSync(
-  `${docs}/parsers-location.js`,
-  prettier.format(
-    `
-      "use strict";
-
-      const parsersLocation = ${JSON.stringify(parsers)};
-    `,
-    { parser: "babel" }
-  )
-);
-
-// --- Site ---
-shell.cd("website");
-shell.echo("Building website...");
-shell.exec("yarn install");
-
-shell.exec("yarn build");
-
-shell.echo();

scripts/build-website.mjs

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+
+import path from "node:path";
+import fs from "node:fs/promises";
+import globby from "globby";
+import prettier from "prettier";
+import createEsmUtils from "esm-utils";
+import execa from "execa";
+import {
+  PROJECT_ROOT,
+  DIST_DIR,
+  WEBSITE_DIR,
+  readJson,
+  writeJson,
+  copyFile,
+  writeFile,
+} from "./utils/index.mjs";
+
+const { require } = createEsmUtils(import.meta);
+const runYarn = (command, args, options) =>
+  execa("yarn", [command, ...args], {
+    stdout: "inherit",
+    stderr: "inherit",
+    ...options,
+  });
+const IS_PULL_REQUEST = process.env.PULL_REQUEST === "true";
+const PRETTIER_DIR = IS_PULL_REQUEST
+  ? DIST_DIR
+  : path.dirname(require.resolve("prettier"));
+const PLAYGROUND_PRETTIER_DIR = path.join(WEBSITE_DIR, "static/lib");
+
+async function buildPrettier() {
+  // --- Build prettier for PR ---
+  const packageJsonFile = path.join(PROJECT_ROOT, "package.json");
+  const content = await fs.readFile(packageJsonFile);
+  const packageJson = await readJson(packageJsonFile);
+  await writeJson(packageJsonFile, {
+    ...packageJson,
+    version: `999.999.999-pr.${process.env.REVIEW_ID}`,
+  });
+
+  try {
+    await runYarn("build", ["--playground"], { cwd: PROJECT_ROOT });
+  } finally {
+    // restore
+    await writeFile(packageJsonFile, content);
+  }
+}
+
+async function buildPlaygroundFiles() {
+  const files = await globby(["standalone.js", "parser-*.js"], {
+    cwd: PRETTIER_DIR,
+  });
+  const parsers = {};
+  for (const fileName of files) {
+    const file = path.join(PRETTIER_DIR, fileName);
+    await copyFile(file, path.join(PLAYGROUND_PRETTIER_DIR, fileName));
+
+    if (fileName === "standalone.js") {
+      continue;
+    }
+
+    const plugin = require(file);
+    // We add plugins to the global `prettierPlugins` object
+    // the name after `parser-` is used as property
+    // For example to get parsers in `parser-babel.js` via `prettierPlugins.babel`
+    // See `scripts/build/config.mjs`
+    const property = fileName.replace(/\.js$/, "").split("-")[1];
+    parsers[fileName] = {
+      property,
+      parsers: Object.keys(plugin.parsers),
+    };
+  }
+
+  await writeFile(
+    path.join(PLAYGROUND_PRETTIER_DIR, "parsers-location.js"),
+    prettier.format(
+      `
+        "use strict";
+
+        const parsersLocation = ${JSON.stringify(parsers)};
+      `,
+      { parser: "babel" }
+    )
+  );
+}
+
+(async () => {
+  if (IS_PULL_REQUEST) {
+    console.log("Building prettier...");
+    await buildPrettier();
+  }
+
+  console.log("Preparing files for playground...");
+  await buildPlaygroundFiles();
+
+  // --- Site ---
+  console.log("Installing website dependencies...");
+  await runYarn("install", [], { cwd: WEBSITE_DIR });
+
+  console.log("Building website...");
+  await runYarn("build", [], { cwd: WEBSITE_DIR });
+})();

scripts/build/build.mjs

@@ -7,16 +7,16 @@ import chalk from "chalk";
 import minimist from "minimist";
 import prettyBytes from "pretty-bytes";
 import rimraf from "rimraf";
-import bundler from "./bundler.mjs";
-import bundleConfigs from "./config.mjs";
 import {
   PROJECT_ROOT,
-  CACHE_DIR,
+  BUILD_CACHE_DIR,
   DIST_DIR,
   readJson,
   writeJson,
   copyFile,
-} from "./utils.mjs";
+} from "../utils/index.mjs";
+import bundler from "./bundler.mjs";
+import bundleConfigs from "./config.mjs";
 import Cache from "./cache.mjs";
 
 // Errors in promises should be fatal.
@@ -153,13 +153,13 @@ async function run(params) {
   }
 
   if (params["purge-cache"]) {
-    rimraf.sync(CACHE_DIR);
+    rimraf.sync(BUILD_CACHE_DIR);
   }
 
   let bundleCache;
   if (shouldUseCache) {
     bundleCache = new Cache({
-      cacheDir: CACHE_DIR,
+      cacheDir: BUILD_CACHE_DIR,
       distDir: DIST_DIR,
       version: CACHE_VERSION,
     });

scripts/build/bundler.mjs

@@ -13,11 +13,11 @@ import { babel as rollupPluginBabel } from "@rollup/plugin-babel";
 import WebpackPluginTerser from "terser-webpack-plugin";
 import createEsmUtils from "esm-utils";
 import builtinModules from "builtin-modules";
+import { PROJECT_ROOT, DIST_DIR } from "../utils/index.mjs";
 import rollupPluginExecutable from "./rollup-plugins/executable.mjs";
 import rollupPluginEvaluate from "./rollup-plugins/evaluate.mjs";
 import rollupPluginReplaceModule from "./rollup-plugins/replace-module.mjs";
 import bundles from "./config.mjs";
-import { PROJECT_ROOT, DIST_DIR } from "./utils.mjs";
 
 const { __dirname, require, json } = createEsmUtils(import.meta);
 const packageJson = json.loadSync("../../package.json");

scripts/build/cache.mjs

@@ -3,7 +3,12 @@ import crypto from "node:crypto";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { rollup } from "rollup";
-import { PROJECT_ROOT, readJson, writeJson, copyFile } from "./utils.mjs";
+import {
+  PROJECT_ROOT,
+  readJson,
+  writeJson,
+  copyFile,
+} from "../utils/index.mjs";
 
 class Cache {
   constructor({ cacheDir, distDir, version }) {

scripts/utils/index.mjs

@@ -28,7 +28,17 @@ async function writeFile(file, content) {
 }
 
 const PROJECT_ROOT = url.fileURLToPath(new URL("../../", import.meta.url));
-const CACHE_DIR = path.join(PROJECT_ROOT, ".cache");
+const BUILD_CACHE_DIR = path.join(PROJECT_ROOT, ".cache");
 const DIST_DIR = path.join(PROJECT_ROOT, "dist");
+const WEBSITE_DIR = path.join(PROJECT_ROOT, "website");
 
-export { PROJECT_ROOT, DIST_DIR, CACHE_DIR, readJson, writeJson, copyFile };
+export {
+  PROJECT_ROOT,
+  DIST_DIR,
+  BUILD_CACHE_DIR,
+  WEBSITE_DIR,
+  readJson,
+  writeJson,
+  writeFile,
+  copyFile,
+};