feat: with workers

Author: atinux

app/plugins/ws.client.ts

@@ -0,0 +1,17 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const { loggedIn } = useUserSession()
+  if (!loggedIn.value) return
+
+  const { data } = useWebSocket('/ws')
+  const queryCache = useQueryCache()
+
+  watch(data, async (message) => {
+    message = typeof message === 'string' ? message : await message.text()
+    message = JSON.parse(message)
+
+    if (message.event === 'todo:created') {
+      const todos = queryCache.getQueryData<Todo[]>(['todos']) || []
+      queryCache.setQueryData(['todos'], [...todos, message.data])
+    }
+  })
+})

nuxt.config.ts

@@ -5,13 +5,20 @@ export default defineNuxtConfig({
     'nuxt-auth-utils',
     '@nuxt/eslint',
     '@pinia/nuxt',
-    '@pinia/colada-nuxt'
+    '@pinia/colada-nuxt',
+    '@vueuse/nuxt'
   ],
   devtools: {
     enabled: true
   },
   future: { compatibilityVersion: 4 },
-  compatibilityDate: '2024-07-30',
+  compatibilityDate: '2025-01-29',
+  nitro: {
+    preset: 'cloudflare_durable',
+    experimental: {
+      websocket: true
+    }
+  },
   hub: {
     database: true
   },

package.json

@@ -9,27 +9,35 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@iconify-json/simple-icons": "^1.2.20",
-    "@nuxt/eslint": "^0.7.5",
+    "@iconify-json/simple-icons": "^1.2.22",
+    "@nuxt/eslint": "^0.7.6",
     "@nuxt/ui": "^2.21.0",
-    "@nuxthub/core": "^0.8.11",
+    "@nuxthub/core": "^0.8.15",
     "@pinia/colada": "^0.13.3",
     "@pinia/colada-nuxt": "^0.0.4",
     "@pinia/nuxt": "^0.9.0",
-    "drizzle-kit": "^0.30.1",
-    "drizzle-orm": "0.38.3",
+    "@vueuse/core": "^12.5.0",
+    "@vueuse/nuxt": "12.5.0",
+    "drizzle-kit": "^0.30.4",
+    "drizzle-orm": "0.39.0",
     "h3-zod": "^0.5.3",
-    "nuxt": "^3.15.2",
-    "nuxt-auth-utils": "^0.5.7",
-    "pinia": "^2.3.0",
+    "hookable": "^5.5.3",
+    "nuxt": "^3.15.4",
+    "nuxt-auth-utils": "^0.5.10",
+    "pinia": "^2.3.1",
     "zod": "^3.24.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.7.0",
-    "@nuxt/eslint-config": "^0.7.5",
-    "eslint": "^9.18.0",
+    "@nuxt/eslint-config": "^0.7.6",
+    "eslint": "^9.19.0",
     "typescript": "5.7.3",
-    "wrangler": "^3.102.0"
+    "wrangler": "^3.106.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "pnpm": {
+    "patchedDependencies": {
+      "nitropack": "patches/nitropack.patch"
+    }
+  }
 }

patches/nitropack.patch

@@ -0,0 +1,31 @@
+diff --git a/dist/presets/cloudflare/runtime/cloudflare-durable.mjs b/dist/presets/cloudflare/runtime/cloudflare-durable.mjs
+index 32ccfbbc6b0fef89fcbe8a15d73fba81fdada553..cdcd4650c86fc4dc7b871a40330e93fe3e6d1bf0 100644
+--- a/dist/presets/cloudflare/runtime/cloudflare-durable.mjs
++++ b/dist/presets/cloudflare/runtime/cloudflare-durable.mjs
+@@ -8,6 +8,8 @@ const nitroApp = useNitroApp();
+ const ws = import.meta._websocket ? wsAdapter(nitroApp.h3App.websocket) : void 0;
+ export default createHandler({
+   fetch(request, env, context, url) {
++    context.passThroughOnException();
++
+     if (env.ASSETS && isPublicAssetURL(url.pathname)) {
+       return env.ASSETS.fetch(request);
+     }
+@@ -29,12 +31,16 @@ export class $DurableObject extends DurableObject {
+       ws.handleDurableInit(this, state, env);
+     }
+   }
+-  fetch(request) {
++  async fetch(request) {
+     if (import.meta._websocket) {
+       return ws.handleDurableUpgrade(this, request);
+     }
+     return new Response("404", { status: 404 });
+   }
++  publish(topic, data) {
++    console.log('publish', topic, data)
++    ws.publish(topic, typeof data !== 'string' ? JSON.stringify(data) : data)
++  }
+   alarm() {
+     this.ctx.waitUntil(
+       nitroApp.hooks.callHook("cloudflare:durable:alarm", this)