/scripts/website/build.ts at ba4c2d034e27dac39a04a193dca35cd93644d17a

// This script builds ef.js document website and outputs to `website/dist`.

import { cssPlugin } from "../../website/plugins/css.js";
import { markdownPlugin } from "../../website/plugins/markdown.js";

// @ts-expect-error: brotli-wasm ships with broken manifest
import brotliPromise from "brotli-wasm";
import { write, gzipSync } from "bun";
import chalk from "chalk";
import * as esbuild from "esbuild";
import { copyFile, mkdir, readdir, rm } from "node:fs/promises";
import { dirname, relative } from "node:path";

import { bytesToString } from "../_filesize.js";
import { bundle } from "../bundle.js";
import { getNetworkFilesize } from "../print-filesize.js";
import { listEntries } from "./_docs.js";
import { buildThirdPartyLicense, type ThirdPartyInfo } from "./_license.js";

import { page, styles } from "../../website/html.js";
import { type LibBundleEntry } from "../../website/route.js";

import { version } from "../../package.json";

const brotli = await brotliPromise;

const websiteDir = new URL("../../website/", import.meta.url);
const destDir = new URL("dist/", websiteDir);
const docsDir = new URL("../../docs/", import.meta.url);

// --- Prep

await rm(destDir, {
  force: true,
  recursive: true,
});
await mkdir(destDir, { recursive: true });

const cwd = process.cwd();

// --- Copy assets

const assetsDir = new URL("assets/", websiteDir);

const files = await readdir(assetsDir, {
  withFileTypes: true,
});

for (const file of files) {
  if (!file.isFile()) {
    continue;
  }

  const srcPath = new URL(file.name, assetsDir);
  const outPath = new URL(file.name, destDir);

  console.error(
    chalk.gray(`Copying asset "%s" to "%s"...`),
    relative(cwd, srcPath.pathname),
    relative(cwd, outPath.pathname),
  );

  await copyFile(srcPath, outPath);

  console.error(chalk.white(`Copied to "%s"`), relative(cwd, outPath.pathname));
}

// --- Bundle lib

declare global {
  var libBundles: LibBundleEntry[];
}

if (!globalThis.libBundles) {
  const matrix: readonly Required<Parameters<typeof bundle>[0]>[] = [
    { header: true, minify: true },
    { header: true, minify: false },
    { header: false, minify: true },
    { header: false, minify: false },
  ];

  globalThis.libBundles = await Promise.all(
    matrix.map(async ({ header, minify }) => {
      const content = await bundle({ header, minify });

      return {
        header,
        minified: minify,
        content,
        size: {
          raw: content.byteLength,
          gzip: gzipSync(content).byteLength,
          brotli: brotli.compress(content).byteLength,
        },
      };
    }),
  );
}

// Needs to write everytime because this script deletes /dist on every run.
await copyFile(
  new URL("../../bundle.zip", import.meta.url),
  new URL("ef.zip", destDir),
);

// --- Bundle main JS

declare global {
  var bundler: esbuild.BuildContext;
}

const entrypoint = new URL("client.ts", websiteDir);

globalThis.bundler ??= await esbuild.context({
  entryPoints: [entrypoint.pathname],
  bundle: true,
  format: "esm",
  target: "es2019",
  outdir: destDir.pathname,
  loader: {
    ".woff": "file",
    ".woff2": "file",
  },
  plugins: [cssPlugin, markdownPlugin],
  tsconfig: new URL("tsconfig.json", websiteDir).pathname,
  splitting: true,
  write: false,
  minify: true,
  legalComments: "none",
  metafile: true,
  define: {
    __VERSION__: JSON.stringify(version),
    __BUNDLE_INFO__: JSON.stringify(globalThis.libBundles),
  },
});

console.error(
  chalk.gray(`Bundling client JS code from "%s"...`),
  relative(cwd, entrypoint.pathname),
);

const result = await globalThis.bundler.rebuild();

if (result.errors.length > 0) {
  console.error(chalk.red(`Build aborted due to bundle error.`));
  process.exit(1);
}

for (const output of result.outputFiles || []) {
  await write(output.path, output.contents);

  const size = getNetworkFilesize(output.contents);

  console.error(
    chalk.white(`Built "%s" (raw: %s, gzip: %s)`),
    relative(cwd, output.path),
    bytesToString(size.raw, true),
    bytesToString(size.gzip, true),
  );
}

// --- Generate third-party license file
declare global {
  var thirdPartyInfo: ThirdPartyInfo | undefined | null;
}

// Skip generating third-party-license.txt on hot-reloading, as its purpose is
// for distribution. The file is essentially meaningless in development.
if (!globalThis.thirdPartyInfo && result.metafile) {
  console.error(chalk.gray(`Generating third-party licenses file...`));

  globalThis.thirdPartyInfo = await buildThirdPartyLicense(result.metafile);
}

if (globalThis.thirdPartyInfo) {
  const filepath = new URL("third-party-license.txt", destDir);
  await write(filepath, globalThis.thirdPartyInfo.licenseText);

  console.error(
    chalk.white(
      `Wrote "%s" (%s external packages found, %s license files included)`,
    ),
    relative(cwd, filepath.pathname),
    chalk.yellow(globalThis.thirdPartyInfo.thirdPartyCounts),
    chalk.yellow(globalThis.thirdPartyInfo.includedLicenseFileCounts),
  );
}

// --- Bundle main CSS

const globalCssDest = new URL("styles.css", destDir);

console.error(
  chalk.gray(`Writing "%s" to "%s"...`),
  relative(cwd, new URL("styles.css", websiteDir).pathname),
  relative(cwd, globalCssDest.pathname),
);

await write(globalCssDest, styles);

const globalCssSize = getNetworkFilesize(styles);

console.error(
  chalk.white(`Wrote "%s" (raw: %s, gzip: %s)`),
  relative(cwd, globalCssDest.pathname),
  bytesToString(globalCssSize.raw, true),
  bytesToString(globalCssSize.gzip, true),
);

// --- Build HTML files

const docs = await listEntries(docsDir);

const paths: readonly (readonly [string, string])[] = [
  ["/", "index.html"],
  ["/download/", "download/index.html"],
  ["/404", "404.html"],
  ...docs.map((entry) => {
    return [`/docs/${entry.name}/`, `docs/${entry.name}/index.html`] as const;
  }),
];

for (const [path, filename] of paths) {
  const outPath = relative(cwd, new URL(filename, destDir).pathname);

  console.error(chalk.gray(`Generating route "%s" at "%s"...`), path, outPath);

  const html = await page(path, {
    version,
    bundle: globalThis.libBundles,
  });

  await mkdir(dirname(outPath), { recursive: true });

  await write(outPath, html);
  const size = getNetworkFilesize(html);

  console.error(
    chalk.white(`Built "%s" (raw: %s, gzip: %s)`),
    outPath,
    bytesToString(size.raw, true),
    bytesToString(size.gzip, true),
  );
}

// --- fin.

// Bun currently does not provide a way to detect `--hot`.
// Assuming this script is running without `--hot`.
if (import.meta.main) {
  globalThis.bundler.dispose();
}