feat: add .jsx and .tsx support

justinawrey · Aug 24, 2022 · 0f1fb31 · 0f1fb31
1 parent b8438c9
commit 0f1fb31
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -37,6 +37,39 @@ export default (req) => {
 };
 ```
 
+As well as `.jsx` and `.tsx` files, with jsx runtime modules from whichever
+source you wish:
+
+```tsx
+// my-app/pages/blog/post.tsx
+
+/** @jsx h */
+import { h, renderSSR } from "https://deno.land/x/nano_jsx@v0.0.33/mod.ts";
+
+function App() {
+  return (
+    <html>
+      <head>
+        <title>Hello from JSX</title>
+      </head>
+      <body>
+        <h1>Hello world</h1>
+      </body>
+    </html>
+  );
+}
+
+export default (_req: Request) => {
+  const html = renderSSR(<App />);
+
+  return new Response(html, {
+    headers: {
+      "content-type": "text/html",
+    },
+  });
+};
+```
+
 Initialize a server by calling `fsRouter`:
 
 ```typescript

diff --git a/_scripts/pages/blog/author.tsx b/_scripts/pages/blog/author.tsx
@@ -0,0 +1,25 @@
+/** @jsx h */
+import { h, renderSSR } from "https://deno.land/x/nano_jsx@v0.0.33/mod.ts";
+
+function App() {
+  return (
+    <html>
+      <head>
+        <title>Hello from JSX</title>
+      </head>
+      <body>
+        <h1>Hello world</h1>
+      </body>
+    </html>
+  );
+}
+
+export default (_req: Request) => {
+  const html = renderSSR(<App />);
+
+  return new Response(html, {
+    headers: {
+      "content-type": "text/html",
+    },
+  });
+};
diff --git a/mod.ts b/mod.ts
@@ -145,7 +145,7 @@ export async function fsRouter(
     // Only allow typescript files because they are the only files which
     // will have actual handler definitions.
     // TODO: maybe act as a static file server for all other files?
-    exts: [".ts", ".js"],
+    exts: [".ts", ".js", ".jsx", ".tsx"],
   };
 
   for await (const filePath of walk(rootDir, walkOpts)) {

diff --git a/private/deps/std/path.ts b/private/deps/std/path.ts
@@ -1,4 +1,5 @@
 export {
+  extname,
   relative,
   resolve,
   toFileUrl,

diff --git a/private/parse.ts b/private/parse.ts
@@ -1,4 +1,17 @@
-import { relative } from "./deps/std/path.ts";
+import { extname, relative } from "./deps/std/path.ts";
+
+function removeExtension(path: string) {
+  const ext = extname(path);
+  return path.slice(0, -ext.length);
+}
+
+function removeIndex(path: string) {
+  if (!path.endsWith("/index")) {
+    return path;
+  }
+
+  return path.slice(0, -6);
+}
 
 // parseRoute takes an absolute file path and transforms it into
 // a valid route to which requests can be routed
@@ -8,21 +21,9 @@ export function parseRoute(
 ): string {
   let route = "/" + relative(absoluteRootDir, absolutePath);
 
-  // TODO: this feels janky, although this should work just fine
-  if (route.endsWith(".ts")) {
-    route = route.slice(0, -3);
-  } else if (route.endsWith(".js")) {
-    route = route.slice(0, -3);
-  }
-
-  if (route.endsWith("index")) {
-    route = route.slice(0, -5);
-  }
-
-  // Strip trailing '/' from folders acting as index.ts
-  if (route !== "/" && route.endsWith("/")) {
-    route = route.slice(0, -1);
-  }
+  // Do some processing on the file path to turn it into a valid route
+  route = removeExtension(route);
+  route = removeIndex(route);
 
-  return route;
+  return route || "/";
 }