fix(build): ensure the dist files' directories exist before writing them (#54)

Author: symful

bundle_util.ts

@@ -1,6 +1,13 @@
-import { resolve, toFileUrl } from "./deps.ts";
-import { build, stop } from "https://deno.land/x/esbuild@v0.14.51/mod.js";
-import { denoPlugin } from "https://deno.land/x/esbuild_deno_loader@0.5.2/mod.ts";
+import { CommonOptions } from "https://deno.land/x/esbuild@v0.14.51/mod.js";
+import {
+  build,
+  denoPlugin,
+  exists,
+  parseJsonC,
+  resolve,
+  stop,
+  toFileUrl,
+} from "./deps.ts";
 
 export async function bundleByEsbuild(
   path: string,
@@ -11,6 +18,39 @@ export async function bundleByEsbuild(
     importMapURL = toFileUrl(resolve(importMapFile));
   }
 
+  // @NekoMaru76: option tsconfig in esbuild's build doesn't work, so I did this
+  let jsx: CommonOptions["jsx"];
+  let jsxFactory: CommonOptions["jsxFactory"];
+  let jsxFragment: CommonOptions["jsxFragment"];
+  let jsxDev: CommonOptions["jsxDev"];
+  let jsxImportSource: CommonOptions["jsxImportSource"];
+
+  const tsconfigFile = await getTsconfig();
+
+  if (tsconfigFile) {
+    const config = <{
+      compilerOptions: {
+        jsx: CommonOptions["jsx"];
+        jsxFactory: CommonOptions["jsxFactory"];
+        jsxFragmentFactory: CommonOptions["jsxFragment"];
+        jsxDev: CommonOptions["jsxDev"];
+        jsxImportSource: CommonOptions["jsxImportSource"];
+      };
+    }> parseJsonC(await Deno.readTextFile(tsconfigFile));
+
+    if (
+      config && typeof config === "object" &&
+      config.compilerOptions &&
+      typeof config.compilerOptions === "object"
+    ) {
+      jsx = config.compilerOptions.jsx;
+      jsxDev = config.compilerOptions.jsxDev;
+      jsxFactory = config.compilerOptions.jsxFactory;
+      jsxFragment = config.compilerOptions.jsxFragmentFactory;
+      jsxImportSource = config.compilerOptions.jsxImportSource;
+    }
+  }
+
   const bundle = await build({
     entryPoints: [toFileUrl(resolve(path)).href],
     plugins: [
@@ -20,6 +60,11 @@ export async function bundleByEsbuild(
     ],
     bundle: true,
     write: false,
+    jsx,
+    jsxFactory,
+    jsxDev,
+    jsxFragment,
+    jsxImportSource,
   });
 
   stop();
@@ -36,3 +81,40 @@ export function setImportMap(importMap: string) {
 export function getImportMap() {
   return _importMap;
 }
+
+let _tsconfig: string | undefined;
+
+export function setTsconfig(tsconfig: string) {
+  _tsconfig = tsconfig;
+}
+
+export async function getTsconfig() {
+  if (!_tsconfig) {
+    if (
+      await exists("./deno.json", {
+        isReadable: true,
+        isDirectory: false,
+      })
+    ) {
+      return "./deno.json";
+    }
+    if (
+      await exists("./deno.jsonc", {
+        isReadable: true,
+        isDirectory: false,
+      })
+    ) {
+      return "./deno.jsonc";
+    }
+    if (
+      await exists("./tsconfig.json", {
+        isReadable: true,
+        isDirectory: false,
+      })
+    ) {
+      return "./tsconfig.json";
+    }
+  }
+
+  return _tsconfig;
+}

cli.ts

@@ -1,4 +1,5 @@
 import {
+  dirname,
   ensureDir,
   join,
   NAME,
@@ -16,7 +17,7 @@ import {
 import { livereloadServer } from "./livereload_server.ts";
 import { byteSize, checkUniqueEntrypoints, mux } from "./util.ts";
 import { logger, setLogLevel } from "./logger_util.ts";
-import { setImportMap } from "./bundle_util.ts";
+import { setImportMap, setTsconfig } from "./bundle_util.ts";
 
 function usage() {
   logger.log(`
@@ -48,6 +49,7 @@ Options:
   --static-dist-prefix <prefix>   The prefix for static files in the destination.
   --public-url <prefix>           The path prefix for urls. Default is ".".
   -i, --import-map <file>         The path to an import map file.
+  -c, --config <file>             The path to a tsconfig file.
   -o, --open                      Automatically opens in specified browser.
   TODO --https                    Serves files over HTTPS.
   TODO --cert <path>              The path to certificate to use with HTTPS.
@@ -69,6 +71,7 @@ Options:
   --static-dist-prefix <prefix>   The prefix for static files in the destination.
   --public-url <prefix>           The path prefix for urls. Default is ".".
   -i, --import-map <file>         The path to an import map file.
+  -c, --config <file>             The path to a tsconfig file.
   -L, --log-level <level>         Set the log level (choices: "none", "error", "warn", "info", "verbose")
   -h, --help                      Display help for command
 `.trim());
@@ -87,6 +90,7 @@ type CliArgs = {
   "static-dir": string;
   "static-dist-prefix": string;
   "import-map": string;
+  "config": string;
 };
 
 /**
@@ -106,6 +110,7 @@ export async function main(cliArgs: string[] = Deno.args): Promise<number> {
     "public-url": publicUrl = ".",
     "livereload-port": livereloadPort = 35729,
     "import-map": importMap,
+    "config": config,
   } = parseFlags(cliArgs, {
     string: [
       "log-level",
@@ -114,6 +119,7 @@ export async function main(cliArgs: string[] = Deno.args): Promise<number> {
       "static-dir",
       "public-url",
       "import-map",
+      "config",
     ],
     boolean: ["help", "version", "open"],
     alias: {
@@ -124,6 +130,7 @@ export async function main(cliArgs: string[] = Deno.args): Promise<number> {
       L: "log-level",
       p: "port",
       i: "import-map",
+      c: "config",
     },
   }) as CliArgs;
 
@@ -191,6 +198,7 @@ export async function main(cliArgs: string[] = Deno.args): Promise<number> {
       publicUrl,
       staticDistPrefix,
       importMap,
+      config,
     });
     return 0;
   }
@@ -218,6 +226,7 @@ export async function main(cliArgs: string[] = Deno.args): Promise<number> {
     publicUrl,
     staticDistPrefix,
     importMap,
+    config,
   });
   return 0;
 }
@@ -227,6 +236,7 @@ type BuildAndServeCommonOptions = {
   staticDistPrefix: string;
   publicUrl: string;
   importMap: string;
+  config: string;
 };
 
 type BuildOptions = {
@@ -244,10 +254,12 @@ async function build(
     publicUrl,
     staticDistPrefix,
     importMap,
+    config,
   }: BuildOptions & BuildAndServeCommonOptions,
 ) {
   checkUniqueEntrypoints(paths);
   setImportMap(importMap);
+  setTsconfig(config);
 
   logger.log(`Writing the assets to ${distDir}`);
   await ensureDir(distDir);
@@ -267,6 +279,7 @@ async function build(
     const bytes = new Uint8Array(await asset.arrayBuffer());
     // TODO(kt3k): Print more structured report
     logger.log("Writing", filename, byteSize(bytes.byteLength));
+    await ensureDir(dirname(filename));
     await Deno.writeFile(filename, bytes);
   }
 }
@@ -290,10 +303,12 @@ async function serve(
     publicUrl,
     staticDistPrefix,
     importMap,
+    config,
   }: ServeOptions & BuildAndServeCommonOptions,
 ) {
   checkUniqueEntrypoints(paths);
   setImportMap(importMap);
+  setTsconfig(config);
 
   // This is used for propagating onBuild event to livereload server.
   const buildEventHub = new EventTarget();

deps.ts

@@ -8,8 +8,12 @@ export {
   resolve,
   toFileUrl,
 } from "https://deno.land/std@0.155.0/path/mod.ts";
+export { parse as parseJsonC } from "https://deno.land/std@0.193.0/jsonc/mod.ts";
 import { join } from "https://deno.land/std@0.155.0/path/posix.ts";
 export { join as posixPathJoin };
+export { denoPlugin } from "https://deno.land/x/esbuild_deno_loader@0.5.2/mod.ts";
+export { build, stop } from "https://deno.land/x/esbuild@v0.14.51/mod.js";
+export { exists } from "https://deno.land/std@0.194.0/fs/mod.ts";
 export { ensureDir } from "https://deno.land/std@0.155.0/fs/ensure_dir.ts";
 export { parse as parseFlags } from "https://deno.land/std@0.155.0/flags/mod.ts";
 export { red } from "https://deno.land/std@0.155.0/fmt/colors.ts";

generate_static_assets.ts

@@ -77,8 +77,10 @@ async function createStaticAssetFromPath(
 ): Promise<File> {
   logger.debug("Reading", path);
   const bytes = await Deno.readFile(path);
+  const webkitRelativePath = relative(root, path);
   return Object.assign(new Blob([bytes]), {
-    name: join(distPrefix, relative(root, path)),
+    name: join(distPrefix, webkitRelativePath),
     lastModified: 0,
+    webkitRelativePath,
   });
 }

serve_test.ts

@@ -1,9 +1,8 @@
 import { assertEquals } from "./test_deps.ts";
 
 Deno.test("cli.ts serve <entrypoint> --port <port> --livereload-port <port> -- serves the site at the given port and livereload port", async () => {
-  const p = Deno.run({
-    cmd: [
-      Deno.execPath(),
+  const cmd = new Deno.Command(Deno.execPath(), {
+    args: [
       "run",
       "-A",
       "cli.ts",
@@ -14,20 +13,36 @@ Deno.test("cli.ts serve <entrypoint> --port <port> --livereload-port <port> -- s
       "--livereload-port",
       "34567",
     ],
+    stdout: "piped",
   });
-  await new Promise((resolve) => setTimeout(resolve, 10000));
-  let res = await fetch("http://localhost:4567/index.html");
-  assertEquals(
-    await res.text(),
-    `<!DOCTYPE html><html><head></head><body><div>aaa</div>\n<script src="http://localhost:34567/livereload.js"></script></body></html>`,
-  );
+  const p = cmd.spawn();
+  const textDecoder = new TextDecoder();
+  let done = false;
 
-  // Non existent path returns the same response as the main html.
-  // This is useful for apps which use client side routing.
-  res = await fetch("http://localhost:4567/asdf");
-  assertEquals(
-    await res.text(),
-    `<!DOCTYPE html><html><head></head><body><div>aaa</div>\n<script src="http://localhost:34567/livereload.js"></script></body></html>`,
-  );
-  p.close();
+  for await (const a of p.stdout) {
+    if (textDecoder.decode(a).includes("Server running")) {
+      let res = await fetch("http://localhost:4567/index.html");
+      assertEquals(
+        await res.text(),
+        `<!DOCTYPE html><html><head></head><body><div>aaa</div>\n<script src="http://localhost:34567/livereload.js"></script></body></html>`,
+      );
+
+      // Non existent path returns the same response as the main html.
+      // This is useful for apps which use client side routing.
+      res = await fetch("http://localhost:4567/asdf");
+      assertEquals(
+        await res.text(),
+        `<!DOCTYPE html><html><head></head><body><div>aaa</div>\n<script src="http://localhost:34567/livereload.js"></script></body></html>`,
+      );
+
+      done = true;
+
+      break;
+    }
+  }
+
+  p.kill();
+  await p.status;
+
+  assertEquals(done, true);
 });

util.ts

@@ -17,21 +17,22 @@ export function md5(data: string | ArrayBuffer): string {
 }
 
 export async function getDependencies(path: string): Promise<string[]> {
-  const p = Deno.run({
-    cmd: [Deno.execPath(), "info", "--json", path],
+  const p = new Deno.Command(Deno.execPath(), {
+    args: ["info", "--json", path],
     stdout: "piped",
     stderr: "piped",
-  });
+  }).spawn();
   const [status, output, stderrOutput] = await Promise.all([
-    p.status(),
+    p.status,
     p.output(),
-    p.stderrOutput(),
+    p.stderr,
   ]);
   if (status.code !== 0) {
-    throw new Error(decoder.decode(stderrOutput));
+    throw new Error(
+      decoder.decode((await stderrOutput.getReader().read()).value),
+    );
   }
-  const denoInfo = JSON.parse(decoder.decode(output)) as DenoInfo;
-  p.close();
+  const denoInfo = JSON.parse(decoder.decode(output.stdout)) as DenoInfo;
   return denoInfo.modules.map((m) => m.specifier);
 }