fix: serveJsx hosted by remote server cannot resolve local file (#46)

* fix: serveJsx hosted by remote server cannot resolve local file

* ver: v0.22.0

serve_jsx.ts

@@ -7,16 +7,23 @@ export type DFC<P = {}> = React.FC<P> & {
   getInitialProps?: () => Promise<P>;
 };
 
-/** Serve jsx/tsx by dynamic import */
+/**
+ * Serve jsx/tsx by dynamic import
+ * @params dir directory that contains jsx files
+ * @params onImport import delegation, commonly pass f => import(f)
+ *   This is because deno's dynamic import resolution problem.
+ * @params parentComponent Custom wrapper component
+ * */
 export function serveJsx(
   dir: string,
+  onImport: (file: string) => Promise<any>,
   parentComponent: any = React.Fragment
 ): HttpHandler {
   return async function serveJsx(req) {
     const { pathname } = new URL(req.url, "http://dummy");
     const p = await resolveIndexPath(dir, pathname, [".tsx", ".jsx"]);
     if (p) {
-      const jsx = await import(p);
+      const jsx = await onImport(p);
       const el = jsx.default as DFC;
       if (!el) {
         throw new Error(

serve_jsx_test.ts

@@ -10,7 +10,9 @@ import { pathResolver, readString } from "./util.ts";
 import { it } from "./test_util.ts";
 
 it("serveJsx", t => {
-  const func = serveJsx(pathResolver(import.meta)("./fixtures/public"));
+  const func = serveJsx(pathResolver(import.meta)("./fixtures/public"), f =>
+    import(f)
+  );
   t.run("basic", async () => {
     const rec = createRecorder({
       url: "/",

site/index.ts

@@ -11,7 +11,7 @@ import { RoutingError } from "../error.ts";
 const router = createRouter({ logLevel: Loglevel.INFO });
 const resolve = pathResolver(import.meta);
 router.use(serveStatic(resolve("./public")));
-router.use(serveJsx(resolve("./pages"), Layout));
+router.use(serveJsx(resolve("./pages"), f => import(f), Layout));
 router.get(new RegExp("^/@(?<version>.*?)/(?<pathname>.+?)$"), async req => {
   let { version, pathname } = req.match.groups;
   if (!version) {

site/public/example/use_serve_jsx.ts

@@ -3,5 +3,5 @@ import { serveJsx } from "../../../serve_jsx.ts";
 const router = createRouter();
 // .jsx/.tsx files in ./pages directory will be dynamically imported
 // and rendered component served as html
-router.use(serveJsx("./pages"));
+router.use(serveJsx("./pages", f => import(f)));
 router.listen(":8899");

version.ts

@@ -1 +1 @@
-export const ServestVersion = "v0.21.0";
+export const ServestVersion = "v0.22.0";