plugin-main.ts

import { exists } from "jsr:@std/fs@^1";
import { dirname, esbuild, isAbsolute, parseJsonc } from "./deps.ts";

import {
  denoPlugin,
  extname,
  join,
  normalize,
  parse,
  resolve,
} from "./deps.ts";
import { serve, setServeDir } from "./serve.ts";
import {
  DEFAULT_SERVE_DIR,
  DenoTempFile,
  IS_DEV,
  omitKeys,
  REACT_STATIC_TS_CONFIG,
  REACT_STATIC_TS_CONFIG_DEV,
} from "./stuff.ts";

/**
 * Options for configuring the build process
 */
export type BuildOptions = {
  /** Watch for changes to source files and rebuild automatically */
  watch?: boolean | string;

  /** Whether to serve files only, or serve and build */
  serve?: "only" | boolean;

  /** Path to import map file (e.g. importMap.json) */
  importMap?: string;

  /** esbuild target (e.g. chrome99, firefox99, safari15) */
  target?: string;

  /** Path to config file (e.g. deno.json) */
  configPath?: string;

  /** Input file path (e.g. src/app.tsx) */
  inFile: string;

  /** Array of input files (used for code splitting) */
  inFiles?: string[];

  /** Output file path (e.g. public/app.js) */
  outFile: string;

  /** Output directory path (used for code splitting) */
  outDir?: string;

  /** Base directory for output files (used for code splitting) */
  outbase: string;

  /** Directory to serve files from (e.g. public) */
  serveDir?: string;

  /** Whether to include a hash in output filenames */
  hash?: boolean;

  /** External dependencies to exclude from bundle */
  external?: string[];

  /** Whether to automatically open browser when serving */
  launchBrowser?: boolean;

  /** Additional esbuild plugins */
  plugins?: esbuild.Plugin[];

  /** esbuild log level */
  logLevel?: esbuild.LogLevel;

  /** Warning messages to ignore */
  ignoredWarnings?: string[];

  /** Source map generation options */
  sourcemap?: boolean | "linked" | "inline" | "external" | "both";

  /** Port number to serve on */
  port?: number;

  /** Path to esbuild config file (e.g. esbuild.config.json) */
  esbuildConfig?: string;
};

let isFirstBuild = true;

/**
 * Configuration resource for managing TypeScript/JSX config conformance
 */
type ConformedConfig = {
  readonly path: string | undefined;
  [Symbol.dispose](): void;
};

/**
 * Creates a conformed config with automatic resource cleanup
 * @param options - Config options
 * @returns Resource-managed config object
 */
async function withConformedConfig({
  configPath,
  inFiles,
  isDev
}: {
  configPath?: string;
  inFiles?: string[];
  isDev: boolean;
}): Promise<ConformedConfig> {
  // Check if input files contain JSX/TSX
  const isJsx = inFiles?.find((file) =>
    file.endsWith(".jsx") || file.endsWith(".tsx")
  );

  const finalConfig = configPath
    ? parseJsonc(await Deno.readTextFile(configPath)) as Record<string, any>
    : isJsx
    ? isDev ? REACT_STATIC_TS_CONFIG_DEV : REACT_STATIC_TS_CONFIG
    : undefined;

  // Adjust JSX compiler options based on dev mode
  if (finalConfig && "compilerOptions" in finalConfig) {
    if (!isDev && finalConfig["compilerOptions"]?.["jsx"] === "react-jsxdev") {
      finalConfig["compilerOptions"]["jsx"] = "react-jsx";
    }
    if (isDev && finalConfig["compilerOptions"]?.["jsx"] === "react-jsx") {
      finalConfig["compilerOptions"]["jsx"] = "react-jsxdev";
    }
  }

  if (finalConfig && configPath && "importMap" in finalConfig) {
    // Convert to absolute path if not already
    if (finalConfig["importMap"] && !isAbsolute(finalConfig["importMap"])) {
      finalConfig["importMap"] = resolve(dirname(configPath), finalConfig["importMap"] as string);
    }
  }

  
  const tmpFile = finalConfig
    ? new DenoTempFile(JSON.stringify(finalConfig))
    : undefined;

  const finalConfigPath = tmpFile ? tmpFile.getPath() : configPath;

  return {
    path: finalConfigPath,
    [Symbol.dispose]() {
      tmpFile?.[Symbol.dispose]();
    }
  };
}

/**
 * Builds a project using esbuild
 * @param options - Build options
 */
export const build = async (options: BuildOptions): Promise<void> => {
  const {
    watch,
    serve: shouldServe,
    importMap,
    target,
    inFile,
    inFiles,
    outFile,
    outDir: outDir_,
    outbase,
    serveDir = DEFAULT_SERVE_DIR,
    plugins = [],
    hash,
    logLevel,
    external,
    configPath,
    sourcemap,
    launchBrowser,
    port,
    esbuildConfig: esbuildConfig_,
  } = options;

  // Generate directories recursively if they don't exist
  const outDir = outDir_ ?? dirname(outFile);
  await Deno.mkdir(outDir, { recursive: true });

  const split = inFiles?.length ? true : false;

  let esbuildConfig = esbuildConfig_
    ? esbuildConfig_.endsWith(".jsonc")
      ? parseJsonc(await Deno.readTextFile(esbuildConfig_))
      : JSON.parse(await Deno.readTextFile(esbuildConfig_))
    : undefined;

  if (esbuildConfig) {
    esbuildConfig = omitKeys(esbuildConfig, ["plugins"]);
  }

  let finalConfigPath: string | undefined = configPath;
  if (!finalConfigPath && !importMap) {
    // try to automatically find a deno.jsonc or deno.json file
    const denoJson = await exists(join(Deno.cwd(), "deno.json"));
    if (denoJson) {
      finalConfigPath = "deno.json";
    } else {
      const denoJsonc = await exists(join(Deno.cwd(), "deno.jsonc"));
      if (denoJsonc) {
        finalConfigPath = "deno.jsonc";
      }
    }
  }

  // Conform config json to match needed JSX config
  using config = await withConformedConfig({
    configPath: finalConfigPath,
    inFiles: inFiles,
    isDev: IS_DEV
  });

  finalConfigPath = config.path;

  const opts: esbuild.BuildOptions = {
    plugins: [
      denoPlugin({
        configPath: importMap ?? finalConfigPath ?? undefined,
      }),
    ],
    entryPoints: split ? inFiles : [inFile],
    ...(split ? { outdir: outDir } : { outfile: outFile }),
    bundle: true,
    format: "esm",
    outbase: outbase,
    target: target ? target : ["chrome99", "firefox99", "safari15"],
    platform: "browser",
    treeShaking: true,
    minify: !IS_DEV,
    jsx: "automatic",
    splitting: split,
    logLevel,
    external,
    sourcemap: sourcemap,
    // write: false,
    banner: IS_DEV
      ? { js: "globalThis.window.DENO_ENV = 'development';\n" }
      : undefined,
    ...esbuildConfig,
  };

  const context = await esbuild.context(opts);

  const rebuild = async () => {
    console.log(isFirstBuild ? "Building..." : "Rebuilding...");
    const startTime = performance.now();
    try {
      // rebuild
      const _result = await context.rebuild();

      if (hash) {
        // Add hash to output file
        const { name, ext } = parse(outFile);
        const hash = Math.random().toString(36).substring(2, 8);
        const newOutFile = join(outDir, `${name}.${hash}${ext}`);
        await Deno.rename(outFile, newOutFile);
        // console.log(`Renamed ${outFile} to ${newOutFile}`);

        // Delete old files (SKIP new file)
        const files = Deno.readDirSync(outDir);
        for (const file of files) {
          const { name: fileName, ext: fileExt } = parse(file.name);
          if (
            file.isFile &&
            fileName.startsWith(name + ".") &&
            fileExt === ext &&
            file.name !== `${name}.${hash}${ext}`
          ) {
            const oldFile = join(outDir, file.name);
            await Deno.remove(oldFile);
          }
        }
      }

      isFirstBuild = false;
      const dt = performance.now() - startTime;
      console.log(`%c✅ Built JS in ${dt.toFixed(2)}ms`, `color: green`);
    } catch (e) {
      const dt = performance.now() - startTime;
      console.error(
        `%c🚨 Build error after ${dt.toFixed(2)}ms`,
        `color: red; font-weight: bold`,
      );
      console.error(e);
    }
  };

  const serveBlock = async () => {
    // Just serve and don't terminate
    setServeDir(serveDir);
    await serve({
      launchBrowser,
      port,
    });
    return;
  };

  const serveBackground = () => {
    // Start a separate worker to serve the files
    const worker = new Worker(new URL("serve.ts", import.meta.url).href, {
      type: "module",
    });
    worker.postMessage({ serveDir, launchBrowser, port });
  };

  let exited = false;
  const exit = async () => {
    if (exited) return;
    exited = true;
    try {
      esbuild.stop();
    } catch (e) {
      console.warn("Error stopping esbuild: ", e);
    }
  };

  if (!watch && !shouldServe) {
    // DEFAULT: Build once
    await rebuild();
    await exit();
  }

  Deno.addSignalListener("SIGINT", async () => {
    await exit();
    Deno.exit(0);
  });

  if (shouldServe === "only" || (shouldServe && !watch)) {
    // SERVE-ONLY: Now, serve indefinitely
    await serveBlock();
    return;
  } else if (!watch) {
    // DEFAULT: Now exit
    return;
  }

  if (shouldServe) {
    // SERVE: Serve in background
    serveBackground();
  }

  let timeSinceLastRebuild = 0;
  let timer: number | null = null;
  const debounceRebuild = () => {
    if (performance.now() - timeSinceLastRebuild > 1000 * 1000) {
      // 1 second
      timeSinceLastRebuild = performance.now();
      rebuild();
      timer = null;
      return;
    } else {
      if (timer) clearTimeout(timer);
      timer = setTimeout(rebuild, 50);
    }
  };

  debounceRebuild();

  const inDir = dirname(inFile);
  const watchDirs = typeof watch === "string"
    ? watch.split(",").map(normalize)
    : [inDir];
  const arePathsEqual = (path1: string, path2: string) => {
    return normalize(resolve(path1)) === normalize(resolve(path2));
  };

  if (watchDirs.some((dir) => arePathsEqual(dir, outDir))) {
    throw new Error(
      "Input watch directory and output directories cannot be the same when using --watch, will cause infinite loop.",
    );
  }

  const watcher = Deno.watchFs(watchDirs, { recursive: true });
  for await (const event of watcher) {
    // Skip events for files that might be output files (i.e. name and extension are similar, ignoring hash)
    const paths = event.paths;
    const isOutputFile = paths.some((path) => {
      const { name, ext } = parse(path);
      const nameWithoutHash = name.split(".").slice(0, -1).join(".");
      const outFileName = parse(outFile).name;
      const isSimilar =
        (nameWithoutHash === outFileName || name === outFileName) &&
        extname(outFile) === ext;
      return isSimilar;
    });
    if (isOutputFile) {
      continue;
    }

    debounceRebuild();
  }

  await exit();
};