refactor(storybook): rebuild the unified host as a devframe hub (#139)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: antfubot

examples/storybook-hub/README.md

@@ -21,7 +21,7 @@
     "docs": "pnpm -C docs run docs",
     "docs:build": "pnpm -C docs run docs:build",
     "docs:serve": "pnpm -C docs run docs:serve",
-    "storybook": "pnpm -r --parallel --if-present run storybook",
+    "storybook": "pnpm -C storybook dev",
     "storybook:build": "pnpm --filter @devframes/storybook run storybook:build",
     "lint": "eslint --cache",
     "test": "pnpm run build && vitest",

examples/storybook-hub/package.json

@@ -1,3 +1,4 @@
+import type { DevframeViewLauncher } from '../../types/docks'
 import type { DevframeHubContext } from '../context'
 import { mkdtempSync } from 'node:fs'
 import { tmpdir } from 'node:os'
@@ -305,4 +306,30 @@ describe('devframeDockHost ~builtin category', () => {
     expect(updatedLauncher?.digest).toBe('done')
     expect(updatedLauncher?.status).toBe('success')
   })
+
+  it('updates a registered entry whose stored view was frozen (Immer-projected shared state)', () => {
+    const host = new DevframeDocksHost(createContext())
+    const handle = host.register<DevframeViewLauncher>({
+      type: 'launcher',
+      id: 'app:build',
+      title: 'Build',
+      icon: 'ph:hammer-duotone',
+      launcher: { title: 'Run build', status: 'idle', command: 'app:run-build' },
+    })
+
+    // Projecting the entry into `devframe:docks` shared state runs it through
+    // Immer's `produce`, which deep-freezes the very object the registry holds.
+    Object.freeze(host.values()[0])
+
+    // The launch handler patches the launcher as the process boots; the update
+    // must not throw "Cannot assign to read only property" on the frozen entry.
+    expect(() => handle.update({
+      launcher: { title: 'Run build', status: 'loading', command: 'app:run-build', terminalSessionId: 'build-session', digest: 'compiling…' },
+    })).not.toThrow()
+
+    const entry = host.values()[0]
+    const launcher = entry.type === 'launcher' ? entry.launcher : undefined
+    expect(launcher?.status).toBe('loading')
+    expect(launcher?.digest).toBe('compiling…')
+  })
 })

examples/storybook-hub/src/client/main.ts

@@ -148,7 +148,12 @@ export class DevframeDocksHost implements DevframeDocksHostType {
         if (patch.id && patch.id !== view.id) {
           throw diagnostics.DF8101({ id: view.id, attempted: patch.id })
         }
-        this.update(Object.assign(this.views.get(view.id)!, patch))
+        // Merge into a fresh object rather than mutating the stored entry in
+        // place: once projected into the `devframe:docks` shared state, the
+        // stored entry is deep-frozen by Immer, so an in-place `Object.assign`
+        // would throw "Cannot assign to read only property". A new object is
+        // always writable, and `update()` swaps it into the registry.
+        this.update({ ...this.views.get(view.id)!, ...patch } as DevframeDockUserEntry)
       },
     }
   }