deno preact

narumincho · Jul 7, 2024 · c0d9fbe · c0d9fbe
1 parent c993945
commit c0d9fbe
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 28 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,6 +2,7 @@
   "deno.enable": true,
   "eslint.enable": false,
   "prettier.enable": false,
+  "editor.tabSize": 2,
   "editor.formatOnSave": true,
   "[json]": {
     "editor.defaultFormatter": "denoland.vscode-deno"
@@ -17,5 +18,5 @@
   },
   "[markdown]": {
     "editor.defaultFormatter": "denoland.vscode-deno"
-  },
-}
+  }
+}
diff --git a/client/main.tsx b/client/main.tsx
@@ -1,17 +1,22 @@
-import React from "https://esm.sh/[email protected]";
-
-export const App = () => {
-  const [count, setCount] = React.useState(0);
+import {
+  Dispatch,
+  StateUpdater,
+} from "https://esm.sh/[email protected]/hooks?pin=v135";
+import { h } from "https://esm.sh/[email protected]?pin=v135";
 
+export const App = (props: {
+  readonly state: number;
+  readonly setState: Dispatch<StateUpdater<number>>;
+}) => {
   return (
     <div>
       <h1>definy</h1>
       <button
         onClick={() => {
-          setCount(count + 1);
+          props.setState((prev) => prev + 1);
         }}
       >
-        count: {count}
+        count: {props.state}
       </button>
     </div>
   );

diff --git a/client/start.tsx b/client/start.tsx
@@ -1,10 +1,15 @@
-import { createRoot } from "https://esm.sh/[email protected]/client";
 import { App } from "./main.tsx";
-import React from "https://esm.sh/v128/@types/[email protected]/index.d.ts";
+import { h, hydrate, JSX } from "https://esm.sh/[email protected]?pin=v135";
+import { useState } from "https://esm.sh/[email protected]/hooks?pin=v135";
 
 const root = document.getElementById("root");
 if (root === null) {
-    throw new Error("root element not found");
+  throw new Error("root element not found");
 }
 
-createRoot(root).render(<App />);
+const AppWithState = (): JSX.Element => {
+  const [state, setState] = useState(0);
+  return <App state={state} setState={setState} />;
+};
+
+hydrate(<AppWithState />, root);
diff --git a/deno.json b/deno.json
@@ -7,7 +7,8 @@
       "dom.iterable",
       "deno.ns",
       "deno.unstable"
-    ]
+    ],
+    "jsxFactory": "h"
   },
   "tasks": {
     "server-dev": "deno run --check --watch --allow-env --allow-net --allow-read --allow-write=./dist.json ./script/startInLocal.ts",

diff --git a/deno.lock b/deno.lock
diff --git a/dist.json b/dist.json
diff --git a/script/buildClient.ts b/script/buildClient.ts
@@ -1,10 +1,22 @@
-import { bundle } from "https://deno.land/x/[email protected]/mod.ts";
+import { bundle } from "jsr:@deno/emit";
+import { encodeHex } from "jsr:@std/encoding/hex";
 
 const { code } = await bundle(
-    new URL("../client/start.tsx", import.meta.url),
+  new URL("../client/start.tsx", import.meta.url),
+  {
+    compilerOptions: { jsxFactory: "h" },
+  },
 );
 
 await Deno.writeTextFile(
-    new URL("../dist.json", import.meta.url),
-    JSON.stringify({ code }),
+  new URL("../dist.json", import.meta.url),
+  JSON.stringify({
+    clientJavaScript: code,
+    clientJavaScriptHash: encodeHex(
+      await crypto.subtle.digest(
+        "SHA-256",
+        new TextEncoder().encode(code),
+      ),
+    ),
+  }),
 );
diff --git a/server/main.tsx b/server/main.tsx
@@ -2,15 +2,19 @@ import { printSchema } from "npm:graphql";
 import { createHandler } from "npm:graphql-http/lib/use/fetch";
 import { Context, createContext } from "./context.ts";
 import { schema } from "./schema.ts";
-import { renderToString } from "https://esm.sh/[email protected]/server";
-import * as React from "https://esm.sh/[email protected]";
+import { renderToString } from "npm:preact-render-to-string";
+import { h } from "https://esm.sh/[email protected]?pin=v135";
 import { App } from "../client/main.tsx";
 import dist from "../dist.json" with { type: "json" };
 
 export const startDefinyServer = (parameter: {
   readonly denoKvDatabasePath: string | undefined;
 }) => {
   Deno.serve(async (request) => {
+    const cors = supportCrossOriginResourceSharing(request);
+    if (cors.type === "skipMainProcess") {
+      return cors.response;
+    }
     const pathname = new URL(request.url).pathname;
     switch (pathname) {
       case "/":
@@ -19,11 +23,11 @@ export const startDefinyServer = (parameter: {
             <html>
               <head>
                 <title>definy</title>
-                <script type="module" src="/script" />
+                <script type="module" src={`/${dist.clientJavaScriptHash}`} />
               </head>
               <body>
                 <div id="root">
-                  <App />
+                  <App state={0} setState={() => {}} />
                 </div>
               </body>
             </html>,
@@ -34,17 +38,13 @@ export const startDefinyServer = (parameter: {
             },
           },
         );
-      case "/script":
-        return new Response(dist.code, {
+      case `/${dist.clientJavaScriptHash}`:
+        return new Response(dist.clientJavaScript, {
           headers: {
             "content-type": "application/javascript; charset=utf-8",
           },
         });
     }
-    const cors = supportCrossOriginResourceSharing(request);
-    if (cors.type === "skipMainProcess") {
-      return cors.response;
-    }
 
     if (request.headers.get("accept")?.includes("html")) {
       return new Response(apolloStudioEmbeddedHtml(printSchema(schema)), {