Open Service: Add sync between server, manager and preview

code/.storybook/main.ts

@@ -37,6 +37,10 @@ const config = defineMain({
       directory: '../core/src/preview',
       titlePrefix: 'preview',
     },
+    {
+      directory: '../core/src/shared',
+      titlePrefix: 'core/shared',
+    },
     {
       directory: '../core/src/components/brand',
       titlePrefix: 'brand',

code/.storybook/manager.tsx

@@ -6,3 +6,5 @@ addons.setConfig({
     renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
   },
 });
+
+import '../core/src/shared/open-service/sync-test/manager.tsx';

code/.storybook/open-service-debug-service.ts

@@ -3,7 +3,7 @@ import * as v from 'valibot';
 import { logger } from 'storybook/internal/node-logger';
 import type { StoryIndexGenerator } from '../core/src/core-server/utils/StoryIndexGenerator.ts';
 
-import { defineService } from '../core/src/shared/open-service/index.ts';
+import { defineService } from 'storybook/open-service';
 import { describeService, registerService } from '../core/src/shared/open-service/server.ts';
 
 const DEBUG_SERVICE_ID = 'storybook/internal/open-service-debug';

code/.storybook/preview.tsx

@@ -51,6 +51,8 @@ sb.mock(import('lodash-es/sum'));
 sb.mock(import('uuid'));
 /* eslint-enable depend/ban-dependencies */
 
+import '../core/src/shared/open-service/sync-test/preview.ts';
+
 const { document } = global;
 globalThis.CONFIG_TYPE = 'DEVELOPMENT';
 

code/.storybook/services-preset.ts

@@ -1,15 +1,16 @@
 import type { Options, StorybookConfigRaw } from 'storybook/internal/types';
 
+import { registerOpenServiceSyncDemos } from '../core/src/shared/open-service/sync-test/server.ts';
 import { registerOpenServiceDebugService } from './open-service-debug-service.ts';
 
 /**
- * Preset hook that registers the internal open-service debug service.
+ * Preset hook that registers internal open-service examples and the opt-in debug service.
  *
- * Lives in its own preset file so the `services` slot stays out of the public `StorybookConfig`
- * surface while still letting the internal Storybook self-test the registration path. Set
- * `STORYBOOK_OPEN_SERVICE_DEBUG=true` to opt in.
+ * Set `STORYBOOK_OPEN_SERVICE_DEBUG=true` to additionally register the debug service.
  */
 export const services = async (_value: void, options: Options): Promise<void> => {
+  registerOpenServiceSyncDemos();
+
   if (process.env.STORYBOOK_OPEN_SERVICE_DEBUG === 'true') {
     await registerOpenServiceDebugService(
       options.presets.apply<NonNullable<StorybookConfigRaw['storyIndexGenerator']>>(

code/.storybook/storybook.setup.ts

@@ -5,6 +5,7 @@ import { setProjectAnnotations } from '@storybook/react';
 import { userEvent as storybookEvent, expect as storybookExpect } from 'storybook/test';
 
 import '../core/src/shared/utils/toHaveLiveRegion.ts';
+
 import preview from './preview.tsx';
 
 vi.spyOn(console, 'warn').mockImplementation((...args) => console.log(...args));

code/.storybook/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*"]
+}

code/addons/vitest/src/vitest-plugin/setup-file.test.ts

@@ -1,34 +1,48 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { Channel } from 'storybook/internal/channels';
+import { Channel, clearChannel, getChannel, setChannel } from 'storybook/internal/channels';
 
-import { type Task, initTransport, modifyErrorMessage } from './setup-file.ts';
+import {
+  type Task,
+  initTransport,
+  modifyErrorMessage,
+  restoreDefaultChannel,
+} from './setup-file.ts';
 
 describe('initTransport', () => {
   afterEach(() => {
-    // Cleanup the global channel so each test can assert initialization behavior independently.
-
-    (globalThis as { __STORYBOOK_ADDONS_CHANNEL__?: Channel }).__STORYBOOK_ADDONS_CHANNEL__ =
-      undefined;
+    clearChannel();
   });
 
   it('should initialize the addons channel when missing', () => {
-    (globalThis as { __STORYBOOK_ADDONS_CHANNEL__?: Channel }).__STORYBOOK_ADDONS_CHANNEL__ =
-      undefined;
+    clearChannel();
+
+    initTransport();
 
+    expect(getChannel()).toBeInstanceOf(Channel);
+  });
+
+  it('restoreDefaultChannel reinstalls the default when the slot was replaced', () => {
     initTransport();
+    const defaultRef = getChannel();
+
+    setChannel(new Channel({ transport: { setHandler: vi.fn(), send: vi.fn() } }));
 
-    expect(globalThis.__STORYBOOK_ADDONS_CHANNEL__).toBeInstanceOf(Channel);
+    restoreDefaultChannel();
+
+    expect(getChannel()).toBe(defaultRef);
   });
 
   it('should not overwrite an existing addons channel', () => {
     const transport = { setHandler: vi.fn(), send: vi.fn() };
     const existingChannel = new Channel({ transport });
-    globalThis.__STORYBOOK_ADDONS_CHANNEL__ = existingChannel;
+    clearChannel();
+    (globalThis as { __STORYBOOK_ADDONS_CHANNEL__?: Channel }).__STORYBOOK_ADDONS_CHANNEL__ =
+      existingChannel;
 
     initTransport();
 
-    expect(globalThis.__STORYBOOK_ADDONS_CHANNEL__).toBe(existingChannel);
+    expect(getChannel()).toBe(existingChannel);
   });
 });
 

code/addons/vitest/src/vitest-plugin/setup-file.ts

@@ -2,6 +2,7 @@ import { afterEach, beforeAll, vi } from 'vitest';
 import type { RunnerTask } from 'vitest';
 
 import { Channel } from 'storybook/internal/channels';
+import { getChannel, setChannel } from 'storybook/internal/channels';
 
 import { COMPONENT_TESTING_PANEL_ID } from '../constants.ts';
 
@@ -16,9 +17,31 @@ export type Task = Partial<RunnerTask> & {
   meta: Record<string, any>;
 };
 
+let defaultChannel: Channel | null = null;
+
 export const initTransport = () => {
+  const existing = getChannel();
+  if (existing) {
+    defaultChannel ??= existing as Channel;
+    return;
+  }
+
   const transport = { setHandler: vi.fn(), send: vi.fn() };
-  globalThis.__STORYBOOK_ADDONS_CHANNEL__ ??= new Channel({ transport });
+  const channel = new Channel({ transport });
+  defaultChannel = channel;
+  setChannel(channel);
+};
+
+/** Restore the channel installed for story tests (e.g. after manager stories swap in a mock). */
+export const restoreDefaultChannel = () => {
+  if (!defaultChannel) {
+    initTransport();
+    return;
+  }
+
+  if (getChannel() !== defaultChannel) {
+    setChannel(defaultChannel);
+  }
 };
 
 export const modifyErrorMessage = ({ task }: { task: Task }) => {
@@ -44,4 +67,7 @@ beforeAll(() => {
   }
 });
 
-afterEach(modifyErrorMessage);
+afterEach((ctx) => {
+  restoreDefaultChannel();
+  modifyErrorMessage({ task: ctx.task });
+});

code/builders/builder-vite/src/codegen-set-addon-channel.ts

@@ -5,7 +5,6 @@ export async function generateAddonSetupCode() {
 
     const channel = createBrowserChannel({ page: 'preview' });
     addons.setChannel(channel);
-    window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
 
     if (window.CONFIG_TYPE === 'DEVELOPMENT'){
       window.__STORYBOOK_SERVER_CHANNEL__ = channel;

code/builders/builder-webpack5/templates/virtualModuleModernEntry.js

@@ -30,7 +30,6 @@ const preview = new PreviewWeb(importFn, getProjectAnnotations);
 
 window.__STORYBOOK_PREVIEW__ = preview;
 window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
 
 if (import.meta.webpackHot) {
   import.meta.webpackHot.addStatusHandler((status) => {

code/core/build-config.ts

@@ -190,6 +190,10 @@ const config: BuildEntries = {
         exportEntries: ['./internal/types'],
         entryPoint: './src/types/index.ts',
       },
+      {
+        exportEntries: ['./open-service'],
+        entryPoint: './src/shared/open-service/index.ts',
+      },
     ],
     runtime: [
       {

code/core/package.json

@@ -202,6 +202,11 @@
       "code": "./src/manager-api/index.ts",
       "default": "./dist/manager-api/index.js"
     },
+    "./open-service": {
+      "types": "./dist/shared/open-service/index.d.ts",
+      "code": "./src/shared/open-service/index.ts",
+      "default": "./dist/shared/open-service/index.js"
+    },
     "./package.json": "./package.json",
     "./preview-api": {
       "types": "./dist/preview-api/index.d.ts",
@@ -238,7 +243,6 @@
     "!src/**/*"
   ],
   "dependencies": {
-    "@preact/signals-core": "^1.14.2",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^2.0.2",
     "@testing-library/dom": "^10.4.1",
@@ -247,7 +251,6 @@
     "@vitest/expect": "3.2.4",
     "@vitest/spy": "3.2.4",
     "@webcontainer/env": "^1.1.1",
-    "deepsignal": "^1.6.0",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0",
     "open": "^10.2.0",
     "oxc-parser": "^0.127.0",
@@ -275,6 +278,7 @@
     "@happy-dom/global-registrator": "^20.0.11",
     "@ngard/tiny-isequal": "^1.1.0",
     "@polka/compression": "^1.0.0-next.28",
+    "@preact/signals-core": "^1.14.2",
     "@radix-ui/react-scroll-area": "1.2.0-rc.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@react-aria/interactions": "^3.25.5",
@@ -321,6 +325,7 @@
     "copy-to-clipboard": "^3.3.1",
     "cross-spawn": "^7.0.6",
     "deep-object-diff": "^1.1.0",
+    "deepsignal": "^1.6.0",
     "dequal": "^2.0.2",
     "detect-indent": "^7.0.1",
     "detect-port": "^1.6.1",

code/core/src/channels/README.md

@@ -30,3 +30,27 @@ class Transport {
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)
+
+## Channel access (internal)
+
+Storybook installs one shared addons channel per runtime (manager, preview iframe, dev server).
+Use the channel-slot API from `storybook/internal/channels` in TypeScript — not direct reads of
+`__STORYBOOK_ADDONS_CHANNEL__`.
+
+| Operation | API |
+| --------- | --- |
+| Read (nullable) | `getChannel()` |
+| Read (installed) | `requireChannel()` — use when the runtime entry has already installed a channel |
+| Install / replace | `setChannel(channel)` or `addons.setChannel(channel)` |
+| Clear | `clearChannel()` / `setChannel(null)` |
+
+The global `__STORYBOOK_ADDONS_CHANNEL__` is mirrored when `setChannel` runs so builder preamble and
+legacy snippets stay in sync. `getChannel()` reads the global slot first so duplicate bundles still
+see the live channel.
+
+**Per-runtime install (call sites do not wait):**
+
+- **Preview iframe:** builders run generated `addons.setChannel(createBrowserChannel(...))` before `preview.ts` loads.
+- **Manager:** `addons.setChannel` during manager boot, before `addons.register` callbacks.
+- **Node server:** `services` preset calls `setChannel(options.channel)` before registering services; a noop channel is also bootstrapped at import in non-browser realms.
+- **Tests:** `setChannel(mock)` in `beforeEach`, or rely on the Node import bootstrap noop.

code/core/src/channels/channel-slot.test.ts

@@ -0,0 +1,116 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { Channel } from './main.ts';
+import {
+  clearChannel,
+  ensureChannel,
+  getChannel,
+  installNoopChannel,
+  setChannel,
+} from './channel-slot.ts';
+
+describe('channel slot', () => {
+  afterEach(() => {
+    clearChannel();
+    vi.unstubAllGlobals();
+  });
+
+  it('returns null after clearChannel', () => {
+    setChannel(new Channel({}));
+    clearChannel();
+
+    expect(getChannel()).toBeNull();
+    expect(globalThis.__STORYBOOK_ADDONS_CHANNEL__).toBeUndefined();
+  });
+
+  it('mirrors setChannel to the global slot', () => {
+    const channel = new Channel({});
+
+    setChannel(channel);
+
+    expect(getChannel()).toBe(channel);
+    expect(globalThis.__STORYBOOK_ADDONS_CHANNEL__).toBe(channel);
+  });
+
+  it('hydrates the module slot from a pre-existing global assignment', () => {
+    const channel = new Channel({});
+    clearChannel();
+    vi.stubGlobal('__STORYBOOK_ADDONS_CHANNEL__', channel);
+
+    expect(getChannel()).toBe(channel);
+  });
+
+  it('prefers the global slot over a stale module-level noop', () => {
+    clearChannel();
+    installNoopChannel();
+
+    const real = new Channel({ transport: { setHandler: vi.fn(), send: vi.fn() } });
+    vi.stubGlobal('__STORYBOOK_ADDONS_CHANNEL__', real);
+
+    expect(getChannel()).toBe(real);
+  });
+
+  it('installNoopChannel provides an in-process channel', () => {
+    clearChannel();
+    installNoopChannel();
+
+    expect(getChannel()).toBeInstanceOf(Channel);
+    expect(getChannel()?.hasTransport).toBe(false);
+  });
+
+  it('ensureChannel is a no-op when a channel is already installed', () => {
+    const channel = new Channel({});
+    setChannel(channel);
+
+    ensureChannel();
+
+    expect(getChannel()).toBe(channel);
+  });
+
+  it('ensureChannel installs a noop channel when missing', () => {
+    clearChannel();
+
+    ensureChannel();
+
+    expect(getChannel()).toBeInstanceOf(Channel);
+  });
+
+  it('setChannel(null) clears both module and global slots', () => {
+    const channel = new Channel({});
+    setChannel(channel);
+
+    setChannel(null);
+
+    expect(getChannel()).toBeNull();
+    expect(globalThis.__STORYBOOK_ADDONS_CHANNEL__).toBeUndefined();
+  });
+
+  it('replaces an existing channel on setChannel', () => {
+    const first = new Channel({});
+    const second = new Channel({ transport: { setHandler: vi.fn(), send: vi.fn() } });
+
+    setChannel(first);
+    setChannel(second);
+
+    expect(getChannel()).toBe(second);
+    expect(globalThis.__STORYBOOK_ADDONS_CHANNEL__).toBe(second);
+  });
+});
+
+describe('module import', () => {
+  it('does not auto-install a channel in a browser-like environment', async () => {
+    vi.stubGlobal('window', {});
+    vi.stubGlobal('document', {});
+    vi.stubEnv('VITEST', '');
+
+    vi.resetModules();
+    try {
+      const { getChannel } = await import('./channel-slot.ts');
+      expect(getChannel()).toBeNull();
+    } finally {
+      vi.unstubAllGlobals();
+      vi.unstubAllEnvs();
+      vi.resetModules();
+    }
+  });
+});