chore: add cloudflare and deno playgrounds

.gitignore

@@ -6,3 +6,4 @@ dist
 .eslintcache
 *.log*
 *.env*
+.wrangler

README.md

@@ -19,7 +19,7 @@ We first need to initiate universal cross-hooks:
 ```js
 import { createHandler } from "y-crossws";
 
-const crosswsHandler = createHandler({});
+const crosswsHandler = createHandler();
 ```
 
 Depending on your server choice, use any of the [crossws supported adapters](https://crossws.unjs.io/adapters).
@@ -36,7 +36,7 @@ const server = createServer((req, res) => {
   res.end("");
 });
 
-const ws = crossws(createHandler({}));
+const ws = crossws(createHandler());
 
 server.on("upgrade", ws.handleUpgrade);
 
@@ -52,7 +52,7 @@ server.listen(3000);
 import { createHandler } from "y-crossws";
 import crossws from "crossws/adapters/bun";
 
-const ws = crossws(createHandler({}));
+const ws = crossws(createHandler());
 
 Bun.serve({
   port: 3000,
@@ -75,7 +75,7 @@ Bun.serve({
 import { createHandler } from "y-crossws";
 import crossws from "crossws/adapters/deno";
 
-const ws = crossws(createHandler({}));
+const ws = crossws(createHandler());
 
 Deno.serve({ port: 3000 }, (request, info) => {
   if (request.headers.get("upgrade") === "websocket") {
@@ -96,7 +96,7 @@ Without durable object support:
 import { createHandler } from "y-crossws";
 import crossws from "crossws/adapters/cloudflare";
 
-const ws = crossws(createHandler({}));
+const ws = crossws(createHandler());
 
 export default {
   async fetch(request, env, context) {
@@ -115,7 +115,7 @@ import { createHandler } from "y-crossws";
 import { DurableObject } from "cloudflare:workers";
 import crossws from "crossws/adapters/cloudflare-durable";
 
-const ws = crossws(createHandler({}));
+const ws = crossws(createHandler());
 
 export default {
   async fetch(request, env, context) {
@@ -151,8 +151,6 @@ tag = "v1"
 new_classes = ["$DurableObject"]
 ```
 
-
-
 > [!NOTE]
 > Read more in [crossws docs](https://crossws.unjs.io/adapters/cloudflare).
 
@@ -167,7 +165,7 @@ import { WebsocketProvider } from "y-crossws/provider";
 const ydoc = new Y.Doc();
 const wsUrl = `ws://${window.location.host}`;
 const roomName = "default";
-const provider = new WebsocketProvider(wsURL, roomName, ydoc, /* options */);
+const provider = new WebsocketProvider(wsURL, roomName, ydoc /* options */);
 ```
 
 ### Provider options

package.json

@@ -39,8 +39,11 @@
     "lint": "eslint . && prettier -c src playground",
     "lint:fix": "automd && eslint . --fix && prettier -w src playground",
     "prepack": "pnpm build",
-    "play:bun": "bun run --watch ./playground/bun.ts",
-    "play:node": "node ./playground/node.mjs",
+    "play:bun": "PORT=3000 bun run --watch ./playground/bun.ts",
+    "play:cf-durable": "wrangler dev -c ./playground/wrangler.toml --env durable --port 3000",
+    "play:cf-worker": "wrangler dev -c ./playground/wrangler.toml --env worker --port 3000",
+    "play:deno": "PORT=3000 deno run --unstable-byonm -A ./playground/deno.ts",
+    "play:node": "PORT=3000 node ./playground/node.mjs",
     "release": "pnpm test && changelogen --release && npm publish && git push --follow-tags",
     "test": "pnpm lint && pnpm test:types",
     "test:types": "tsc --noEmit --skipLibCheck"
@@ -50,6 +53,9 @@
     "y-protocols": "^1.0.5"
   },
   "devDependencies": {
+    "@cloudflare/kv-asset-handler": "^0.3.4",
+    "@cloudflare/workers-types": "^4.20240806.0",
+    "@deno/types": "^0.0.1",
     "@types/bun": "^1.1.6",
     "@types/node": "^22.1.0",
     "@types/ws": "^8.5.12",
@@ -62,6 +68,7 @@
     "prettier": "^3.3.3",
     "typescript": "^5.5.4",
     "unbuild": "^3.0.0-rc.7",
+    "wrangler": "^3.71.0",
     "ws": "^8.18.0",
     "yjs": "^13.6.18"
   },

playground/bun.ts

@@ -1,10 +1,10 @@
 import crossws from "crossws/adapters/bun";
-import { createHandler } from "y-crossws";
+import { createHandler } from "../src/index.ts";
 
 const ws = crossws(createHandler());
 
 const server = Bun.serve({
-  port: 3000,
+  port: process.env.PORT || 3000,
   websocket: ws.websocket,
   async fetch(request, server) {
     // Websocket

playground/cf-durable.ts

@@ -0,0 +1,44 @@
+import { createHandler } from "../src/index.ts";
+import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
+import { DurableObject } from "cloudflare:workers";
+import crossws from "crossws/adapters/cloudflare-durable";
+
+// @ts-ignore
+import manifestJSON from "__STATIC_CONTENT_MANIFEST";
+const assetManifest = JSON.parse(manifestJSON);
+
+const ws = crossws(createHandler());
+
+export default {
+  async fetch(request: Request, env: any, ctx: any) {
+    // Handle websocket
+    if (request.headers.get("upgrade") === "websocket") {
+      return ws.handleUpgrade(request as any, env, ctx);
+    }
+    // Handle static assets
+    try {
+      return await getAssetFromKV(
+        { request, waitUntil: ctx.waitUntil.bind(ctx) },
+        {
+          ASSET_NAMESPACE: env.__STATIC_CONTENT,
+          ASSET_MANIFEST: assetManifest,
+        },
+      );
+    } catch {
+      const pathname = new URL(request.url).pathname;
+      return new Response(`"${pathname}" not found`, { status: 404 });
+    }
+  },
+};
+
+export class $DurableObject extends DurableObject {
+  fetch(request) {
+    return ws.handleDurableUpgrade(this, request);
+  }
+  webSocketMessage(client, message) {
+    return ws.handleDurableMessage(this, client, message);
+  }
+  webSocketClose(client, code, reason, wasClean) {
+    return ws.handleDurableClose(this, client, code, reason, wasClean);
+  }
+}

playground/cf-worker.ts

@@ -0,0 +1,31 @@
+import { createHandler } from "../src/index.ts";
+import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
+import crossws from "crossws/adapters/cloudflare";
+
+// @ts-ignore
+import manifestJSON from "__STATIC_CONTENT_MANIFEST";
+const assetManifest = JSON.parse(manifestJSON);
+
+const ws = crossws(createHandler());
+
+export default {
+  async fetch(request: Request, env: any, ctx: any) {
+    // Handle websocket
+    if (request.headers.get("upgrade") === "websocket") {
+      return ws.handleUpgrade(request as any, env, ctx);
+    }
+    // Handle static assets
+    try {
+      return await getAssetFromKV(
+        { request, waitUntil: ctx.waitUntil.bind(ctx) },
+        {
+          ASSET_NAMESPACE: env.__STATIC_CONTENT,
+          ASSET_MANIFEST: assetManifest,
+        },
+      );
+    } catch {
+      const pathname = new URL(request.url).pathname;
+      return new Response(`"${pathname}" not found`, { status: 404 });
+    }
+  },
+};

playground/deno.ts

@@ -0,0 +1,46 @@
+import crossws from "crossws/adapters/deno";
+import { createHandler } from "../src/index.ts";
+
+const ws = crossws(createHandler());
+
+const mimes = {
+  ".html": "text/html",
+  ".js": "text/javascript",
+  ".css": "text/css",
+};
+
+Deno.serve(
+  {
+    port: Number.parseInt(Deno.env.get("PORT") || "3000"),
+    onListen: ({ port }) => {
+      console.log(`Server running at http://localhost:${port}`);
+    },
+  },
+  async (request, info) => {
+    // Websocket
+    if (request.headers.get("upgrade") === "websocket") {
+      return ws.handleUpgrade(request, info as any);
+    }
+    // Static
+    const url = new URL(request.url);
+    for (const path of [
+      `public${url.pathname}`,
+      `public${url.pathname}/index.html`,
+    ]) {
+      const contents = await Deno.readTextFile(
+        new URL(path, import.meta.url),
+      ).catch(() => undefined);
+      if (contents) {
+        const extname = path.match(/\.\w+$/)?.[0] as
+          | keyof typeof mimes
+          | undefined;
+        return new Response(contents, {
+          headers: {
+            "content-type": extname ? mimes[extname] : "text/plain",
+          },
+        });
+      }
+    }
+    return new Response("Not found", { status: 404 });
+  },
+);

playground/node.mjs

@@ -26,10 +26,10 @@ const server = createServer(async (req, res) => {
   res.end("");
 });
 
-const ws = crossws(createHandler({}));
+const ws = crossws(createHandler());
 
 server.on("upgrade", ws.handleUpgrade);
 
-server.listen(3000, () => {
-  console.log(`Server running at http://localhost:3000`);
+server.listen(process.env.PORT || 3000, () => {
+  console.log(`Server running at http://localhost:${server.address().port}`);
 });

playground/public/tiptap/editor.js

@@ -28,7 +28,7 @@ const defaultContent = `
 
 const getInitialUser = () => {
   return {
-    name: faker.name.fullName(),
+    name: faker.person.fullName(),
     color: colors[Math.floor(Math.random() * colors.length)],
   };
 };

playground/wrangler.toml

@@ -0,0 +1,15 @@
+compatibility_date = "2024-01-01"
+
+site = { bucket = "./public" }
+
+[env.worker]
+main = "./cf-worker.ts"
+
+[env.durable]
+main = "./cf-durable.ts"
+durable_objects.bindings = [
+  { name = "$DurableObject", class_name = "$DurableObject" }
+]
+migrations = [
+  { tag = "v1", new_classes = ["$DurableObject"] }
+]