Merge pull request #3 from Liberluna/to-fresh

Aleph.js to Fresh

.gitignore

@@ -0,0 +1,6 @@
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno",
+    "sastan.twind-intellisense"
+  ]
+}

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "deno.enable": true,
   "deno.lint": true,
-  "deno.config": "./deno.json"
-}
+  "editor.defaultFormatter": "denoland.vscode-deno"
+}

README.md

@@ -1,5 +1,11 @@
-# LiberChat
-LiberChat is OSS Chat Service!!
-## What does it use?
-- [Deno](https://deno.land)
-- [Aleph.js](https://alephjs.org)
+# fresh project
+
+### Usage
+
+Start the project:
+
+```
+deno task start
+```
+
+This will watch the project directory and restart as necessary.

components/Button.tsx

@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      disabled={!IS_BROWSER || props.disabled}
+      class="px-2 py-1 border(gray-100 2) hover:bg-gray-200"
+    />
+  );
+}

system/chat/index.ts → core/chat/index.ts

@@ -1,8 +1,4 @@
-/**
- * メッセージのType定義
- */
 export interface Message {
-  body: string
   user: string
-  room: string
-}
+  body: string
+}

deno.json

@@ -1,24 +1,11 @@
 {
+  "lock": false,
+  "tasks": {
+    "start": "deno run -A --watch=static/,routes/ dev.ts"
+  },
+  "importMap": "./import_map.json",
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "dom.extras",
-      "deno.ns"
-    ],
-    "types": [
-      "https://deno.land/x/aleph@1.0.0-beta.43/types.d.ts"
-    ],
     "jsx": "react-jsx",
-    "jsxImportSource": "https://esm.sh/v125/react@18.2.0"
-  },
-  "importMap": "import_map.json",
-  "tasks": {
-    "dev": "deno run -A https://deno.land/x/aleph@1.0.0-beta.43/dev.ts",
-    "start": "deno run -A server.ts",
-    "build": "deno run -A server.ts --build",
-    "esm:add": "deno run -A https://esm.sh/v125 add",
-    "esm:update": "deno run -A https://esm.sh/v125 update",
-    "esm:remove": "deno run -A https://esm.sh/v125 remove"
+    "jsxImportSource": "preact"
   }
-}
+}

dev.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env -S deno run -A --watch=static/,routes/
+
+import dev from "$fresh/dev.ts";
+
+await dev(import.meta.url, "./main.ts");

fresh.gen.ts

@@ -0,0 +1,30 @@
+// DO NOT EDIT. This file is generated by fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+
+import config from "./deno.json" assert { type: "json" };
+import * as $0 from "./routes/[name].tsx";
+import * as $1 from "./routes/api/joke.ts";
+import * as $2 from "./routes/index.tsx";
+import * as $3 from "./routes/room/[roomid].tsx";
+import * as $4 from "./routes/socket/comet.ts";
+import * as $$0 from "./islands/Counter.tsx";
+import * as $$1 from "./islands/Room.tsx";
+
+const manifest = {
+  routes: {
+    "./routes/[name].tsx": $0,
+    "./routes/api/joke.ts": $1,
+    "./routes/index.tsx": $2,
+    "./routes/room/[roomid].tsx": $3,
+    "./routes/socket/comet.ts": $4,
+  },
+  islands: {
+    "./islands/Counter.tsx": $$0,
+    "./islands/Room.tsx": $$1,
+  },
+  baseUrl: import.meta.url,
+  config,
+};
+
+export default manifest;

import_map.json

@@ -1,20 +1,16 @@
 {
   "imports": {
-    "~/": "./",
-    "std/": "https://deno.land/std@0.180.0/",
-    "aleph/": "https://deno.land/x/aleph@1.0.0-beta.43/",
-    "aleph/react": "https://deno.land/x/aleph@1.0.0-beta.43/framework/react/mod.ts",
-    "aleph/plugins/react": "https://deno.land/x/aleph@1.0.0-beta.43/framework/react/plugin.ts",
-    "aleph/plugins/deploy": "https://deno.land/x/aleph@1.0.0-beta.43/plugins/deploy.ts",
-    "aleph/plugins/unocss": "https://deno.land/x/aleph@1.0.0-beta.43/plugins/unocss.ts",
-    "aleph/dev": "https://deno.land/x/aleph@1.0.0-beta.43/server/dev.ts",
-    "aleph/server": "https://deno.land/x/aleph@1.0.0-beta.43/server/mod.ts",
-    "@unocss/core": "https://esm.sh/v125/@unocss/core@0.50.6",
-    "@unocss/preset-uno": "https://esm.sh/v125/@unocss/preset-uno@0.50.6",
-    "ky": "https://esm.sh/v125/ky@0.33.3",
-    "react-dom": "https://esm.sh/v125/react-dom@18.2.0",
-    "react-dom/": "https://esm.sh/v125/react-dom@18.2.0/",
-    "react": "https://esm.sh/v125/react@18.2.0"
-  },
-  "scopes": {}
-}
+    "$fresh/": "https://deno.land/x/fresh@1.1.6/",
+    "preact": "https://esm.sh/preact@10.13.1",
+    "preact/": "https://esm.sh/preact@10.13.1/",
+    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.6",
+    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
+    "twind": "https://esm.sh/twind@0.16.19",
+    "twind/": "https://esm.sh/twind@0.16.19/",
+    "$std/": "https://deno.land/std@0.187.0/",
+    "resx": "https://deno.land/x/resx@0.1.3/mod.ts",
+    "ky": "https://esm.sh/ky@0.33.3",
+    "~/": "./"
+  }
+}

islands/Counter.tsx

@@ -0,0 +1,17 @@
+import { useState } from "preact/hooks";
+import { Button } from "../components/Button.tsx";
+
+interface CounterProps {
+  start: number;
+}
+
+export default function Counter(props: CounterProps) {
+  const [count, setCount] = useState(props.start);
+  return (
+    <div class="flex gap-2 w-full">
+      <p class="flex-grow-1 font-bold text-xl">{count}</p>
+      <Button onClick={() => setCount(count - 1)}>-1</Button>
+      <Button onClick={() => setCount(count + 1)}>+1</Button>
+    </div>
+  );
+}

islands/Room.tsx

@@ -0,0 +1,78 @@
+import { YieldExpression } from "https://deno.land/x/ts_morph@17.0.1/ts_morph.js"
+import { useRef } from "preact/hooks"
+import ky from "ky"
+import { Attributes, Component, ComponentChild, ComponentChildren, Ref } from "preact"
+import { type Message } from "~/core/chat/index.ts"
+
+interface Props {
+  roomId: string
+}
+const connect = async (options: { roomId: string }) => {
+  const { roomId } = options
+
+  const res = await fetch("/socket/comet", {
+    method: "POST",
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      room: roomId,
+    }),
+  })
+  if(res.status !== 200){
+    // Error
+    return { error: "error" }
+  }
+  // OK
+  return {
+    data: await res.json()
+  }
+}
+async function *getMessages(options: { roomId: string }){
+  while(true){
+    const result = await connect({
+      roomId: options.roomId,
+    })
+    if(result.error) {
+      continue
+    }
+    yield result
+  }
+}
+export default class extends Component{
+  state: Readonly<{
+    messages: Message[]
+  }>
+  byProps: Props
+  constructor(props: Props){
+    super()
+    this.state = {
+      messages: []
+    }
+    this.byProps = props
+  }
+  render(props?: Readonly<Attributes & { children?: ComponentChildren; ref?: Ref<any> | undefined; }> | undefined, state?: Readonly<{}> | undefined, context?: any): ComponentChild {
+    const inp = useRef<HTMLInputElement>(null)
+    return <>
+      <input ref={inp} placeholder="なにか伝えたいことは...?" class="border"/>
+      <button onClick={()=>{
+        console.log(inp.current)
+        ky.post("/socket/comet", {
+          json: {
+            room: this.byProps.roomId,
+            message: inp.current?.value
+          }
+        })
+      }}>Send :)</button>
+    </>
+  }
+  componentDidMount(): void {
+    (async()=>{
+      for await (const message of getMessages({ roomId: this.byProps.roomId })){
+        (async()=>{
+          await alert(message.data.message)
+        })()
+      }
+    })()
+  }
+}

main.ts

@@ -1,3 +1,15 @@
-import { bootstrap } from "aleph/react";
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
 
-bootstrap();
+import "$std/dotenv/load.ts";
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+
+import twindPlugin from "$fresh/plugins/twind.ts";
+import twindConfig from "./twind.config.ts";
+
+await start(manifest, { plugins: [twindPlugin(twindConfig)] });

routes/[name].tsx

@@ -0,0 +1,5 @@
+import { PageProps } from "$fresh/server.ts";
+
+export default function Greet(props: PageProps) {
+  return <div>Hello {props.params.name}</div>;
+}