exhibitionist-digital · Danielduel · Oct 30, 2023 · Oct 30, 2023 · Nov 7, 2023 · Nov 11, 2023
diff --git a/examples/basic/server.tsx b/examples/basic/server.tsx
@@ -9,6 +9,8 @@ import { composeHandlers } from "ultra/lib/handler.ts";
 
 const root = Deno.cwd();
 
+// change hash
+
 const importMap = Deno.env.get("ULTRA_MODE") === "development"
   ? await readImportMap("./importMap.dev.json")
   : await readImportMap("./importMap.json");

diff --git a/examples/lite/app.tsx b/examples/lite/app.tsx
@@ -1,5 +1,7 @@
+
 import { useState } from "react";
-import hydrate from "ultra/hydrate.js";
+import UltraClient, { hydrate } from "ultra/lib/react/client.js";
+import { ImportMapScript } from "ultra/lib/react/client.js";
 
 export default function App() {
   const [count, setCount] = useState(0);
@@ -9,6 +11,7 @@ export default function App() {
         <meta charSet="utf-8" />
         <title>lite</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <ImportMapScript />
       </head>
       <body>
         <main>
@@ -22,6 +25,11 @@ export default function App() {
       </body>
     </html>
   );
-}
+};
 
-typeof document !== "undefined" && hydrate(document, <App />);
+typeof document !== "undefined" && hydrate(
+  document,
+  <UltraClient>
+    <App />
+  </UltraClient>,
+);
diff --git a/examples/lite/deno.json b/examples/lite/deno.json
@@ -0,0 +1,14 @@
+{
+  "tasks": {
+    "dev": "deno run -A --no-check --watch ./server.tsx",
+    "test": "deno test --allow-all",
+    "build": "deno run -A ./build.ts",
+    "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js"
+  },
+  "lock": false,
+  "compilerOptions": {
+    "jsx": "react-jsxdev",
+    "jsxImportSource": "react"
+  },
+  "importMap": "./importMap.json"
+}
diff --git a/examples/lite/server.tsx b/examples/lite/server.tsx
@@ -1,24 +1,76 @@
-import { createServer } from "ultra/server.ts";
+import { renderToReadableStream } from "react-dom/server";
+import { createCompilerHandler } from "ultra/lib/react/compiler.ts";
+import { createRenderHandler } from "ultra/lib/react/renderer.ts";
+import UltraServer from "ultra/lib/react/server.js";
+import { RequestHandler, composeHandlers } from "ultra/lib/handler.ts";
+
 import App from "./app.tsx";
 
-const server = await createServer({
-  importMapPath: import.meta.resolve("./importMap.json"),
-  browserEntrypoint: import.meta.resolve("./app.tsx"),
-});
+const root = Deno.cwd();
 
-server.get("*", async (context) => {
-  /**
-   * Render the request
-   */
-  const result = await server.render(<App />);
+const importMap = {
+  "imports": {
+    "react": "https://esm.sh/v122/[email protected]?dev",
+    "react/": "https://esm.sh/v122/[email protected]/",
+    "react-dom": "https://esm.sh/v122/[email protected]",
+    "react-dom/server": "https://esm.sh/v122/[email protected]/server?dev",
+    "react-dom/client": "https://esm.sh/v122/[email protected]/client?dev",
+    "ultra/": root,
+    "ultra/lib/react/client.js": "/ultra-github-proxy/https://raw.githubusercontent.com/exhibitionist-digital/ultra/main/lib/react/client.js"
+  }
+}
+
+const renderer = createRenderHandler({
+  root,
+  render(request) {
+    return renderToReadableStream(
+      <UltraServer request={request} importMap={importMap}>
+        <App />
+      </UltraServer>,
+      {
+        bootstrapModules: [
+          import.meta.resolve("./app.tsx"),
+        ],
+      },
+    );
+  },
+});
 
-  return context.body(result, 200, {
-    "content-type": "text/html; charset=utf-8",
-  });
+const compiler = createCompilerHandler({
+  root,
 });
 
-if (import.meta.main) {
-  Deno.serve(server.fetch);
+// @todo(Danielduel): Do we want to have an util to do proxies with feature like
+//                    this one + an ability to transform content (f.e. compile)
+const handleGithubRawProxy: RequestHandler = {
+  supportsRequest: (request) => {
+    return request.url.includes("/ultra-github-proxy/");
+  },
+  handleRequest: async (request) => {
+    const { pathname } = new URL(request.url);
+    const realPathName = pathname.split("/ultra-github-proxy/")[1];
+    const content = await fetch(realPathName);
+
+    return new Response(
+      content.body,
+      {
+        headers: {
+          "Content-Type": "application/javascript",
+        },
+      },
+    );
+  },
 }
 
-export default server;
+const executeHandlers = composeHandlers(
+  compiler,
+  renderer,
+  handleGithubRawProxy,
+);
+
+Deno.serve((request) => {
+  const response = executeHandlers(request);
+  if (response) return response;
+
+  return new Response("Not Found", { status: 404 });
+});
diff --git a/lib/build/deps.ts b/lib/build/deps.ts
@@ -4,13 +4,13 @@ export {
   createCompiler,
   FileBag,
   VirtualFile,
-} from "https://deno.land/x/[email protected]/mod.ts";
+} from "https://deno.land/x/[email protected]/mod.ts";
 export type {
   BuilderOptions,
   BuildResult,
   PatternLike,
-} from "https://deno.land/x/[email protected]/mod.ts";
-export type { EntrypointConfig } from "https://deno.land/x/[email protected]/lib/entrypoint.ts";
+} from "https://deno.land/x/[email protected]/mod.ts";
+export type { EntrypointConfig } from "https://deno.land/x/[email protected]/lib/entrypoint.ts";
 export { deepMerge } from "https://deno.land/[email protected]/collections/deep_merge.ts";
 export { crayon } from "https://deno.land/x/[email protected]/mod.ts";
 export {

diff --git a/lib/react/compiler.ts b/lib/react/compiler.ts
@@ -1,13 +1,26 @@
 import { join } from "https://deno.land/[email protected]/url/mod.ts";
-import { compile } from "https://deno.land/x/[email protected]/lib/compiler.ts";
+import { compile } from "https://deno.land/x/[email protected]/lib/compiler.ts";
 import { type RequestHandler } from "../handler.ts";
+import { log } from "ultra/lib/logger.ts";
 
 type CompilerOptions = {
   root: URL | string;
   allowList?: string[];
   denyList?: string[];
 };
 
+async function getSourceFile(fileUrl: URL) {
+  try {
+    return await Deno.readTextFile(fileUrl);
+  } catch (_) {
+    return await (await fetch(fileUrl, {
+      headers: {
+        "Content-Type": "application/javascript",
+      }
+    })).text();
+  }
+}
+
 export function createCompilerHandler(
   options: CompilerOptions,
 ): RequestHandler {
@@ -18,11 +31,15 @@ export function createCompilerHandler(
   });
 
   const handleRequest = async (request: Request): Promise<Response> => {
+    log.debug(`[react/compiler.ts] Root ${root}`)
     const { pathname } = new URL(request.url);
+    log.debug(`[react/compiler.ts] Received ${pathname}`)
     const filePath = pathname.replace(prefix, "./");
+    log.debug(`[react/compiler.ts] Tramsformed ${filePath}`)
     const fileUrl = join(root, filePath);
 
-    const source = await Deno.readTextFile(fileUrl);
+    log.debug(`[react/compiler.ts] Compiling ${fileUrl}`)
+    const source = await getSourceFile(fileUrl);
     const result = await compile(fileUrl.toString(), source, {
       jsxImportSource: "react",
       development: true,