feat: implove soure map url (#14)

* feat: soure map url * update test * add JSDoc * add comment
ayame113 · Aug 20, 2022 · afaf9e3 · afaf9e3
1 parent 988398d
commit afaf9e3
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 69 deletions.
diff --git a/deno.json b/deno.json
@@ -1,6 +1,6 @@
 {
   "tasks": {
-    "test": "deno test --doc --jobs --shuffle --allow-net --allow-read=.",
+    "test": "deno test --doc --parallel --shuffle --allow-net --allow-read=.",
     "check": "deno check ./mod.ts"
   },
   "importMap": "./import-map.json"

diff --git a/file_server_test.ts b/file_server_test.ts
@@ -1,6 +1,11 @@
 import { assertEquals } from "https://deno.land/std@0.151.0/testing/asserts.ts";
 import { serve } from "https://deno.land/std@0.151.0/http/mod.ts";
-import { serveDirWithTs, serveFileWithTs, transpile } from "./mod.ts";
+import {
+  MediaType,
+  serveDirWithTs,
+  serveFileWithTs,
+  transpile,
+} from "./mod.ts";
 
 Deno.test({
   name: "file server - serveFileWithTs",
@@ -31,7 +36,7 @@ Deno.test({
         await res.text(),
         await transpile(
           await Deno.readTextFile(new URL("./mod.ts", import.meta.url)),
-          new URL("file:///src.ts"),
+          new URL("http://localhost:8886/mod.ts"),
         ),
       );
       assertEquals(
@@ -45,7 +50,7 @@ Deno.test({
         await res.text(),
         await transpile(
           await Deno.readTextFile(new URL("./test/a.tsx", import.meta.url)),
-          new URL("file:///src.tsx"),
+          new URL("http://localhost:8886/test/a.tsx"),
         ),
       );
       assertEquals(
@@ -59,7 +64,7 @@ Deno.test({
         await res.text(),
         await transpile(
           await Deno.readTextFile(new URL("./test/a.jsx", import.meta.url)),
-          new URL("file:///src.jsx"),
+          new URL("http://localhost:8886/test/a.jsx"),
         ),
       );
       assertEquals(
@@ -91,6 +96,31 @@ Deno.test({
   },
 });
 
+Deno.test({
+  name: "file server - serveFileWithTs (invalid url)",
+  async fn() {
+    const request = new Request("http://localhost/");
+    Object.defineProperty(request, "url", {
+      value: "http://",
+    });
+    // Determine file type from file path and don't give error
+    const res = await serveFileWithTs(request, "./mod.ts");
+    assertEquals(
+      await res.text(),
+      await transpile(
+        await Deno.readTextFile(new URL("./mod.ts", import.meta.url)),
+        new URL("file:///src"),
+        MediaType.TypeScript,
+      ),
+    );
+    assertEquals(res.status, 200);
+    assertEquals(
+      res.headers.get("Content-Type"),
+      "application/javascript; charset=UTF-8",
+    );
+  },
+});
+
 Deno.test({
   name: "file server - serveDirWithTs",
   async fn() {
@@ -110,7 +140,7 @@ Deno.test({
         await res.text(),
         await transpile(
           await Deno.readTextFile(new URL("./mod.ts", import.meta.url)),
-          new URL("file:///src.ts"),
+          new URL("http://localhost:8887/mod.ts"),
         ),
       );
       assertEquals(
@@ -124,7 +154,7 @@ Deno.test({
         await res.text(),
         await transpile(
           await Deno.readTextFile(new URL("./test/a.tsx", import.meta.url)),
-          new URL("file:///src.tsx"),
+          new URL("http://localhost:8887/test/a.tsx"),
         ),
       );
       assertEquals(
@@ -138,7 +168,7 @@ Deno.test({
         await res.text(),
         await transpile(
           await Deno.readTextFile(new URL("./test/a.jsx", import.meta.url)),
-          new URL("file:///src.jsx"),
+          new URL("http://localhost:8887/test/a.jsx"),
         ),
       );
       assertEquals(
@@ -198,7 +228,7 @@ Deno.test({
       await res.text(),
       await transpile(
         await Deno.readTextFile(new URL("./mod.ts", import.meta.url)),
-        new URL("file:///src.ts"),
+        new URL("file:///mod.ts"),
       ),
     );
     assertEquals(

diff --git a/mod.ts b/mod.ts
@@ -7,17 +7,14 @@ import {
 import { contentType } from "https://deno.land/std@0.151.0/media_types/mod.ts";
 import type { Context } from "https://deno.land/x/oak@v10.6.0/mod.ts";
 import { convertBodyToBodyInit } from "https://deno.land/x/oak@v10.6.0/response.ts";
-import { transpile } from "./utils/transpile.ts";
+import { MediaType, transpile } from "./utils/transpile.ts";
 
 const decoder = new TextDecoder();
 const tsType = new Set<string | undefined>(
   ["ts", ".ts", "mts", ".mts", "video/mp2t"],
 );
 const tsxType = new Set<string | undefined>(["tsx", ".tsx"]);
 const jsxType = new Set<string | undefined>(["jsx", ".jsx", "text/jsx"]);
-const tsUrl = new URL("file:///src.ts");
-const tsxUrl = new URL("file:///src.tsx");
-const jsxUrl = new URL("file:///src.jsx");
 const jsContentType = contentType(".js")!;
 
 /**
@@ -36,14 +33,21 @@ export async function serveFileWithTs(
   options?: ServeFileOptions,
 ): Promise<Response> {
   const response = await serveFile(request, filePath, options);
+
+  let url;
+  try {
+    url = new URL(request.url, "file:///");
+  } catch {
+    url = new URL("file:///src");
+  }
   // if range request, skip
   if (response.status === 200) {
     if (filePath.endsWith(".ts")) {
-      return rewriteTsResponse(response, tsUrl);
+      return rewriteTsResponse(response, url, MediaType.TypeScript);
     } else if (filePath.endsWith(".tsx")) {
-      return rewriteTsResponse(response, tsxUrl);
+      return rewriteTsResponse(response, url, MediaType.Tsx);
     } else if (filePath.endsWith(".jsx")) {
-      return rewriteTsResponse(response, jsxUrl);
+      return rewriteTsResponse(response, url, MediaType.Jsx);
     }
   }
   return response;
@@ -63,29 +67,34 @@ export async function serveDirWithTs(
   request: Request,
   options?: ServeDirOptions,
 ): Promise<Response> {
-  let pathname;
+  const response = await serveDir(request, options);
+
+  let url;
   try {
-    pathname = new URL(request.url, "file:///").pathname;
+    url = new URL(request.url, "file:///");
   } catch {
-    return await serveDir(request, options);
+    return response;
   }
-  const response = await serveDir(request, options);
   // if range request, skip
   if (response.status === 200) {
-    if (pathname.endsWith(".ts")) {
-      return rewriteTsResponse(response, tsUrl);
-    } else if (pathname.endsWith(".tsx")) {
-      return rewriteTsResponse(response, tsxUrl);
-    } else if (pathname.endsWith(".jsx")) {
-      return rewriteTsResponse(response, jsxUrl);
+    if (url.pathname.endsWith(".ts")) {
+      return rewriteTsResponse(response, url);
+    } else if (url.pathname.endsWith(".tsx")) {
+      return rewriteTsResponse(response, url);
+    } else if (url.pathname.endsWith(".jsx")) {
+      return rewriteTsResponse(response, url);
     }
   }
   return response;
 }
 
-async function rewriteTsResponse(response: Response, url: URL) {
+async function rewriteTsResponse(
+  response: Response,
+  url: URL,
+  mediaType?: MediaType,
+) {
   const tsCode = await response.text();
-  const jsCode = await transpile(tsCode, url);
+  const jsCode = await transpile(tsCode, url, mediaType);
   const { headers } = response;
   headers.set("content-type", jsContentType);
   headers.delete("content-length");
@@ -125,36 +134,40 @@ export async function tsMiddleware(
   next: () => Promise<unknown>,
 ) {
   await next();
-  const specifier = tsType.has(ctx.response.type)
-    ? tsUrl
+  const mediaType = tsType.has(ctx.response.type)
+    ? MediaType.TypeScript
     : tsxType.has(ctx.response.type)
-    ? tsxUrl
+    ? MediaType.Tsx
     : jsxType.has(ctx.response.type)
-    ? jsxUrl
+    ? MediaType.Jsx
     : undefined;
 
-  if (specifier) {
-    if (ctx.response.body == null) {
-      // skip
-    } else if (typeof ctx.response.body === "string") {
-      // major fast path
-      const tsCode = ctx.response.body;
-      const jsCode = await transpile(tsCode, specifier);
-      ctx.response.body = jsCode;
-    } else if (ctx.response.body instanceof Uint8Array) {
-      // major fast path
-      const tsCode = decoder.decode(ctx.response.body);
-      const jsCode = await transpile(tsCode, specifier);
-      ctx.response.body = jsCode;
-    } else {
-      // fallback
-      const [responseInit] = await convertBodyToBodyInit(ctx.response.body);
-      const tsCode = await new Response(responseInit).text();
-      const jsCode = await transpile(tsCode, specifier);
-      ctx.response.body = jsCode;
-    }
-    ctx.response.type = ".js";
+  if (mediaType == undefined) {
+    return;
+  }
+
+  const specifier = ctx.request.url;
+
+  if (ctx.response.body == null) {
+    // skip
+  } else if (typeof ctx.response.body === "string") {
+    // major fast path
+    const tsCode = ctx.response.body;
+    const jsCode = await transpile(tsCode, specifier, mediaType);
+    ctx.response.body = jsCode;
+  } else if (ctx.response.body instanceof Uint8Array) {
+    // major fast path
+    const tsCode = decoder.decode(ctx.response.body);
+    const jsCode = await transpile(tsCode, specifier, mediaType);
+    ctx.response.body = jsCode;
+  } else {
+    // fallback
+    const [responseInit] = await convertBodyToBodyInit(ctx.response.body);
+    const tsCode = await new Response(responseInit).text();
+    const jsCode = await transpile(tsCode, specifier, mediaType);
+    ctx.response.body = jsCode;
   }
+  ctx.response.type = ".js";
 }
 
-export { type ServeDirOptions, type ServeFileOptions, transpile };
+export { MediaType, type ServeDirOptions, type ServeFileOptions, transpile };
diff --git a/oak_test.ts b/oak_test.ts
@@ -1,7 +1,7 @@
 import { assertEquals } from "https://deno.land/std@0.151.0/testing/asserts.ts";
 import { deferred } from "https://deno.land/std@0.151.0/async/mod.ts";
 import { Application } from "https://deno.land/x/oak@v10.6.0/mod.ts";
-import { transpile, tsMiddleware } from "./mod.ts";
+import { MediaType, transpile, tsMiddleware } from "./mod.ts";
 
 const port = 8888;
 const jsContentType = "application/javascript; charset=utf-8";
@@ -41,11 +41,7 @@ async function readTextFile(path: string) {
   return await Deno.readTextFile(new URL(path, import.meta.url));
 }
 async function transpileFile(path: string) {
-  const url = path.endsWith(".ts")
-    ? new URL("file:///src.ts")
-    : path.endsWith(".tsx")
-    ? new URL("file:///src.tsx")
-    : new URL("file:///src.jsx");
+  const url = new URL(path, `http://localhost:${port}`);
   return await transpile(await readTextFile(path), url);
 }
 
@@ -125,7 +121,7 @@ Deno.test({
     const res = await app.handle(new Request("http://localhost/"));
     assertEquals(
       await res!.text(),
-      await transpile(code, new URL("file:///src.ts")),
+      await transpile(code, new URL("http://localhost/"), MediaType.TypeScript),
     );
   },
 });
@@ -143,7 +139,7 @@ Deno.test({
     const res = await app.handle(new Request("http://localhost/"));
     assertEquals(
       await res!.text(),
-      await transpile(code, new URL("file:///src.ts")),
+      await transpile(code, new URL("http://localhost/"), MediaType.TypeScript),
     );
   },
 });
@@ -161,7 +157,7 @@ Deno.test({
     const res = await app.handle(new Request("http://localhost/"));
     assertEquals(
       await res!.text(),
-      await transpile(code, new URL("file:///src.ts")),
+      await transpile(code, new URL("http://localhost/"), MediaType.TypeScript),
     );
   },
 });
diff --git a/utils/transpile.ts b/utils/transpile.ts
@@ -1,21 +1,41 @@
 import { emit } from "https://deno.land/x/emit@0.4.0/mod.ts";
 
+/** File type. You can pass it as an option to the transpile function to tell it what media type the source is. */
+export enum MediaType {
+  TypeScript,
+  Jsx,
+  Tsx,
+}
+
+// https://github.com/denoland/deno_ast/blob/ea1ccec37e1aa8e5e1e70f983a7ed1472d0e132a/src/media_type.rs#L117
+const contentType = {
+  [MediaType.TypeScript]: "text/typescript; charset=utf-8",
+  [MediaType.Jsx]: "text/jsx; charset=utf-8",
+  [MediaType.Tsx]: "text/tsx; charset=utf-8",
+};
+
 /**
  * Transpile the given TypeScript code into JavaScript code.
  *
  * @param content TypeScript code
- * @param specifier URL like `new URL("file:///src.ts")` or `new URL("file:///src.tsx")`
+ * @param specifier The URL that will be used for the source map.
+ * @param mediaType Indicates whether the source code is TypeScript, JSX or TSX. If this argument is not passed, the file type is guessed using the extension of the URL passed as the second argument.
  * @return JavaScript code
  *
  * ```ts
- * import { transpile } from "https://deno.land/x/ts_serve@$VERSION/mod.ts";
+ * import { transpile, MediaType } from "https://deno.land/x/ts_serve@$VERSION/mod.ts";
  * console.log(await transpile(
  *   "function name(params:type) {}",
- *   new URL("file:///src.ts")
+ *   new URL("file:///src.ts"),
+ *   MediaType.TypeScript,
  * ));
  * ```
  */
-export async function transpile(content: string, specifier: URL) {
+export async function transpile(
+  content: string,
+  specifier: URL,
+  mediaType?: MediaType,
+) {
   const urlStr = specifier.toString();
   const result = await emit(specifier, {
     load(specifier) {
@@ -27,7 +47,16 @@ export async function transpile(content: string, specifier: URL) {
           headers: { "content-type": "application/javascript; charset=utf-8" },
         });
       }
-      return Promise.resolve({ kind: "module", specifier, content });
+      return Promise.resolve({
+        kind: "module",
+        specifier,
+        content,
+        headers: {
+          "content-type": mediaType != undefined
+            ? contentType[mediaType]
+            : undefined!,
+        },
+      });
     },
   });
   return result[urlStr];