jsr を使うために esbuild を使う, secp256k1 で自動パスワード

client/app.tsx

@@ -0,0 +1,71 @@
+import {
+  Dispatch,
+  StateUpdater,
+} from "https://esm.sh/[email protected]/hooks?pin=v135";
+import { h } from "https://esm.sh/[email protected]?pin=v135";
+import { encodeBase64Url } from "jsr:@std/encoding/base64url";
+
+export const App = (props: {
+  readonly state: number;
+  readonly privateKey: Uint8Array | null;
+  readonly setState: Dispatch<StateUpdater<number>>;
+  readonly signUp: () => void;
+  readonly copyPassword: () => void;
+}) => {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gap: 16,
+      }}
+    >
+      <h1>definy</h1>
+      <button
+        type="button"
+        onClick={() => {
+          props.setState((prev) => prev + 1);
+        }}
+      >
+        count: {props.state}
+      </button>
+      <button type="button" onClick={props.signUp}>
+        Sign Up
+      </button>
+
+      {props.privateKey === null ? <div></div> : (
+        <dialog
+          open
+          style={{
+            width: "80%",
+            boxShadow: "0px 20px 36px 0px rgba(0, 0, 0, 0.6)",
+          }}
+        >
+          <form
+            style={{
+              display: "grid",
+            }}
+          >
+            <label>
+              Username
+              <input type="text" required />
+            </label>
+            <label>
+              Password (auto created. If you lose this password, you will not be
+              able to log in.)
+              <input
+                value={encodeBase64Url(props.privateKey)}
+                readOnly={true}
+                type="password"
+                autoComplete="new-password"
+              />
+              <button type="button" onClick={props.copyPassword}>
+                copy password
+              </button>
+            </label>
+            <button type="submit">sign up!</button>
+          </form>
+        </dialog>
+      )}
+    </div>
+  );
+};

client/start.tsx

@@ -1,6 +1,8 @@
-import { App } from "./main.tsx";
+import { App } from "./app.tsx";
 import { h, hydrate, JSX } from "https://esm.sh/[email protected]?pin=v135";
 import { useState } from "https://esm.sh/[email protected]/hooks?pin=v135";
+import { utils } from "jsr:@noble/secp256k1";
+import { encodeBase64Url } from "jsr:@std/encoding/base64url";
 
 const root = document.getElementById("root");
 if (root === null) {
@@ -9,7 +11,24 @@ if (root === null) {
 
 const AppWithState = (): JSX.Element => {
   const [state, setState] = useState(0);
-  return <App state={state} setState={setState} />;
+  const [privateKey, setPrivateKey] = useState<Uint8Array | null>(null);
+
+  return (
+    <App
+      state={state}
+      privateKey={privateKey}
+      setState={setState}
+      signUp={() => {
+        setPrivateKey(utils.randomPrivateKey());
+      }}
+      copyPassword={() => {
+        if (privateKey === null) {
+          return;
+        }
+        navigator.clipboard.writeText(encodeBase64Url(privateKey));
+      }}
+    />
+  );
 };
 
 hydrate(<AppWithState />, root);

deno.json

@@ -12,6 +12,6 @@
   },
   "tasks": {
     "server-dev": "deno run --check --watch --allow-env --allow-net --allow-read --allow-write=./dist.json ./script/startInLocal.ts",
-    "client-build": "deno run --check --allow-env --allow-net --allow-read --allow-write=./dist.json ./script/buildClient.ts"
+    "client-build": "deno run --check --allow-run --allow-env --allow-net --allow-read --allow-write=./dist.json --watch=client ./script/buildClient.ts"
   }
 }

script/buildClient.ts

@@ -1,12 +1,16 @@
-import { bundle } from "jsr:@deno/emit";
 import { encodeHex } from "jsr:@std/encoding/hex";
+import * as esbuild from "npm:esbuild";
+import { denoPlugins } from "jsr:@luca/esbuild-deno-loader";
 
-const { code } = await bundle(
-  new URL("../client/start.tsx", import.meta.url),
-  {
-    compilerOptions: { jsxFactory: "h" },
-  },
-);
+const buildResult = await esbuild.build({
+  entryPoints: ["./client/start.tsx"],
+  bundle: true,
+  plugins: [...denoPlugins()],
+  write: false,
+  jsxFactory: "h",
+});
+
+const code = buildResult.outputFiles[0]?.text ?? "";
 
 await Deno.writeTextFile(
   new URL("../dist.json", import.meta.url),
@@ -20,3 +24,5 @@ await Deno.writeTextFile(
     ),
   }),
 );
+
+await esbuild.stop();