Chore/update-readme-and-examples (#26)

.changeset/heavy-clouds-look.md

@@ -0,0 +1,5 @@
+---
+"y-durableobjects": patch
+---
+
+enhanced readme

README.md

@@ -4,6 +4,10 @@
 
 The `y-durableobjects` library is designed to facilitate real-time collaboration in Cloudflare Workers environment using Yjs and Durable Objects. It provides a straightforward way to integrate Yjs for decentralized, scalable real-time editing features.
 
+## Requirements
+
+- Hono version 4.2 or higher is required.
+
 ## Installation
 
 To use `y-durableobjects`, you need to install the package along with `hono`, as it is a peer dependency.
@@ -109,7 +113,7 @@ import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { YDurableObjects } from "y-durableobjects";
 
-const app = new Hono<Env>();
+const app = new Hono();
 app.use("*", cors());
 app.get("/editor/:id", async (c) => {
   const id = c.env.Y_DURABLE_OBJECTS.idFromName(c.req.param("id"));
@@ -128,3 +132,41 @@ app.get("/editor/:id", async (c) => {
 export default app;
 export { YDurableObjects };
 ```
+
+### Hono RPC support
+
+- Utilizes Hono's WebSocket Helper, making the `$ws` method available in `hono/client` for WebSocket communications.
+  - For more information on server and client setup, see the [Hono WebSocket Helper documentation](https://hono.dev/helpers/websocket#server-and-client).
+
+#### Server Implementation
+
+```typescript
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { YDurableObjects, yRoute } from "y-durableobjects";
+
+const app = new Hono();
+app.use("*", cors());
+
+const route = app.route(
+  "/editor",
+  yRoute((env) => env.Y_DURABLE_OBJECTS),
+);
+
+export default route;
+export type AppType = typeof route;
+export { YDurableObjects };
+```
+
+#### Client Implementation
+
+```typescript
+import { hc } from "hono/client";
+import type { AppType } from "./server"; // Adjust the import path as needed
+
+const API_URL = "http://localhost:8787";
+
+export const client = hc<AppType>(API_URL);
+const ws = client.editor[":id"].$ws({ param: { id: "example" } });
+//    ^?const ws: WebSocket
+```

example/apps/web/package.json

@@ -8,18 +8,20 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
-    "lint": "biome lint src",
-    "fmt": "biome format src --write"
+    "lint": "biome check src",
+    "fmt": "biome check --apply src"
   },
   "dependencies": {
     "@acab/reset.css": "^0.8.0",
     "@lexical/code": "^0.13.1",
     "@lexical/html": "^0.13.1",
     "@lexical/link": "^0.13.1",
     "@lexical/list": "^0.13.1",
+    "@lexical/markdown": "^0.13.1",
     "@lexical/react": "^0.13.1",
     "@lexical/rich-text": "^0.13.1",
     "@lexical/table": "^0.13.1",
+    "hono": "^4.2.3",
     "lexical": "^0.13.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -33,6 +35,7 @@
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "workers": "workspace:*"
   }
 }

example/apps/web/src/adapters/client.ts

@@ -0,0 +1,8 @@
+import { hc } from "hono/client";
+import type { AppType } from "workers";
+
+const API_URL = import.meta.env.PROD ? import.meta.env.VITE_API_URL : "http://localhost:8787";
+
+export const client = hc<AppType>(API_URL);
+
+// const ws = client.editor[":id"].$ws({ param: { id: "1" } })

example/apps/web/src/editor/config.ts

@@ -1,9 +1,9 @@
-import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
 import { AutoLinkNode, LinkNode } from "@lexical/link";
-import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
-import { InitialConfigType } from "@lexical/react/LexicalComposer";
+import { ListItemNode, ListNode } from "@lexical/list";
+import type { InitialConfigType } from "@lexical/react/LexicalComposer";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { CodeNode, CodeHighlightNode } from "@lexical/code";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 
 export const initialConfig: InitialConfigType = {
   editorState: null,

example/apps/web/src/editor/index.tsx

@@ -1,21 +1,21 @@
+import { $generateHtmlFromNodes } from "@lexical/html";
+import { TRANSFORMERS } from "@lexical/markdown";
+import { CollaborationPlugin } from "@lexical/react/LexicalCollaborationPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { CollaborationPlugin } from "@lexical/react/LexicalCollaborationPlugin";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
-import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
 import { EditorRefPlugin } from "@lexical/react/LexicalEditorRefPlugin";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
-import { TRANSFORMERS } from "@lexical/markdown";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
-import { providerFactory } from "./provider";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
+import type { LexicalEditor } from "lexical";
+import { type FC, useCallback, useRef } from "react";
 import { initialConfig } from "./config";
-import { FC, useCallback, useRef } from "react";
-import { LexicalEditor } from "lexical";
-import { $generateHtmlFromNodes } from "@lexical/html";
+import { providerFactory } from "./provider";
 
 type Props = {
   id: string;

example/apps/web/src/editor/provider.ts

@@ -1,10 +1,9 @@
-import { CollaborationPlugin } from "@lexical/react/LexicalCollaborationPlugin";
-import { ComponentProps } from "react";
-import { WebsocketProvider } from "y-websocket";
+import type { CollaborationPlugin } from "@lexical/react/LexicalCollaborationPlugin";
 import type { Provider } from "@lexical/yjs";
+import type { ComponentProps } from "react";
+import { WebsocketProvider } from "y-websocket";
 import { Doc } from "yjs";
-
-const WS_URL = import.meta.env.PROD ? import.meta.env.VITE_WSS_URL : "ws://localhost:8787";
+import { client } from "../adapters/client";
 
 type Props = ComponentProps<typeof CollaborationPlugin>;
 type ProviderFactory = Props["providerFactory"];
@@ -13,7 +12,8 @@ export const providerFactory: ProviderFactory = (id, map) => {
   const doc = new Doc();
   map.set(id, doc);
 
-  const provider = new WebsocketProvider(new URL("/editor", WS_URL).href, id, doc);
+  const url = client.editor[":id"].$url();
+  const provider = new WebsocketProvider(url.toString().replace("http", "ws").replace("/:id", ""), id, doc);
 
   // 公式通りやると型エラーになる調査する
   return provider as unknown as Provider;

example/apps/web/src/main.tsx

@@ -1,7 +1,7 @@
+import "@acab/reset.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import Editor from "./editor";
-import "@acab/reset.css";
 import "./styles.css";
 
 // biome-ignore lint/style/noNonNullAssertion: <explanation>

example/apps/web/tsconfig.json

@@ -18,7 +18,6 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

example/apps/workers/.gitignore

@@ -7,4 +7,5 @@ dist
 package-lock.json
 yarn.lock
 pnpm-lock.yaml
-public
+public
+tsconfig.tsbuildinfo

example/apps/workers/package.json

@@ -1,19 +1,24 @@
 {
   "name": "workers",
   "type": "module",
+  "main": "src/index.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "dev": "wrangler dev",
     "deploy": "wrangler deploy --minify src/index.ts",
     "typecheck": "tsc --noEmit",
     "lint": "biome lint src",
-    "fmt": "biome format src --write"
+    "fmt": "biome format src --write",
+    "build": "tsc --emitDeclarationOnly"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.4.1",
     "@cloudflare/workers-types": "^4.20231218.0",
+    "typescript": "^5.2.2",
     "wrangler": "^3.26.0"
   },
   "dependencies": {
-    "y-durableobjects": "file:../../.."
+    "hono": "^4.2.3",
+    "y-durableobjects": "*"
   }
 }

example/apps/workers/src/index.ts

@@ -11,4 +11,5 @@ const route = app.route(
 );
 
 export default route;
+export type AppType = typeof route;
 export { YDurableObjects };

example/apps/workers/tsconfig.json

@@ -8,7 +8,11 @@
     "lib": ["esnext"],
     "types": ["@cloudflare/workers-types"],
     "jsx": "react-jsx",
-    "jsxImportSource": "hono/jsx"
+    "jsxImportSource": "hono/jsx",
+    "outDir": "dist",
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "declaration": true
   },
   "include": ["src"]
 }