Replace useChannel with useGlobals

src/Tab.tsx

@@ -1,8 +1,8 @@
-import { useChannel } from '@storybook/manager-api'
+import { useGlobals } from '@storybook/manager-api'
 import { styled } from '@storybook/theming'
 import React, { memo, useState } from 'react'
 
-import { EVENTS } from './constants'
+import { EVENTS, PARAM_KEY } from './constants'
 
 interface TabProps {
   active: boolean
@@ -19,16 +19,16 @@ const Iframe = styled.iframe({
 })
 
 export const Tab = memo<TabProps>(({ active }) => {
-  const [url, setUrl] = useState('')
-  useChannel({ [EVENTS.UPDATE]: setUrl })
+  const [globals] = useGlobals()
+  const { codeUrl } = globals[PARAM_KEY]
 
   if (!active) {
     return null
   }
 
-  if (!url) {
+  if (!codeUrl) {
     return <Message>Playroom has been disabled for this story.</Message>
   }
 
-  return <Iframe key={url} allowFullScreen src={url} title="Playroom" />
+  return <Iframe key={codeUrl} allowFullScreen src={codeUrl} title="Playroom" />
 })

src/manager.tsx

@@ -8,9 +8,6 @@ addons.register(ADDON_ID, () => {
   addons.add(TAB_ID, {
     type: types.TAB,
     title: 'Playroom',
-    route: ({ storyId }) => `/playroom/${storyId}`,
-    match: ({ viewMode }) => viewMode === 'playroom',
     render: ({ active }) => <Tab active={active} />,
-    paramKey: PARAM_KEY,
   })
 })

src/utils.tsx

@@ -1,5 +1,8 @@
+import { type useGlobals } from '@storybook/preview-api'
 import { Options as ReactElementToJSXStringOptions } from 'react-element-to-jsx-string'
 
+import { PARAM_KEY } from './constants'
+
 type Options = {
   url?: string
   code?: string
@@ -8,6 +11,12 @@ type Options = {
   reactElementToJSXStringOptions?: ReactElementToJSXStringOptions
 }
 
+type Globals = {
+  codeUrl?: string
+}
+
+type UseGlobals = ReturnType<typeof useGlobals>
+
 export const getOptions = ({
   url = 'http://localhost:9000',
   code = '',
@@ -21,3 +30,9 @@ export const getOptions = ({
   includeDecorators,
   reactElementToJSXStringOptions,
 })
+
+export const getGlobals = (globals: UseGlobals[0]): Globals =>
+  globals[PARAM_KEY]
+
+export const setGlobals = (updateGlobals: UseGlobals[1], globals: Globals) =>
+  updateGlobals({ [PARAM_KEY]: globals })

src/withGlobals.ts

@@ -1,4 +1,4 @@
-import { useChannel } from '@storybook/preview-api'
+import { useGlobals } from '@storybook/preview-api'
 import type {
   Renderer,
   PartialStoryFn as StoryFunction,
@@ -9,27 +9,43 @@ import type { ReactElement } from 'react'
 import reactElementToJSXString from 'react-element-to-jsx-string'
 
 import { EVENTS, PARAM_KEY } from './constants'
-import { getOptions } from './utils'
+import { getGlobals, getOptions, setGlobals } from './utils'
+
+const updateCodeUrl = (
+  [globals, updateGlobals]: ReturnType<typeof useGlobals>,
+  codeUrl: string | undefined,
+) =>
+  getGlobals(globals).codeUrl !== codeUrl &&
+  setGlobals(updateGlobals, { codeUrl })
 
 export const withGlobals = (
   StoryFn: StoryFunction<Renderer>,
   context: StoryContext<Renderer>,
 ) => {
+  const globals = useGlobals()
   const { parameters, undecoratedStoryFn } = context
-  const playroomConfig = parameters[PARAM_KEY]
-  const { url, code, includeDecorators, reactElementToJSXStringOptions } =
-    getOptions(playroomConfig)
+  const {
+    url,
+    code,
+    disable,
+    includeDecorators,
+    reactElementToJSXStringOptions,
+  } = getOptions(parameters[PARAM_KEY])
+
   const story = StoryFn() as ReactElement
+
+  if (disable) {
+    updateCodeUrl(globals, undefined)
+    return story
+  }
+
   const storyCode = includeDecorators
     ? story
     : (undecoratedStoryFn(context) as ReactElement)
-
   const jsxString =
     code || reactElementToJSXString(storyCode, reactElementToJSXStringOptions)
   const codeUrl = url && createUrl({ baseUrl: url, code: jsxString })
 
-  const emit = useChannel({})
-  emit(EVENTS.UPDATE, codeUrl)
-
+  updateCodeUrl(globals, codeUrl)
   return story
 }