@shopify/ui-extensions-server-kit 0.0.0-experimental-20260902222805

package/src/context/ExtensionServerProvider.test.tsx

@@ -0,0 +1,318 @@
+import {ExtensionServerProvider} from './ExtensionServerProvider'
+import {useExtensionServerContext} from '../hooks'
+import {createConnectedAction} from '../state'
+import {mockApp, mockExtension} from '../testing'
+import React from 'react'
+import {beforeEach, afterEach, expect} from 'vitest'
+import {renderHook, act} from '@testing-library/react'
+
+class MockWebSocketServer {
+  clients: MockWebSocket[] = []
+  messages: any[] = []
+
+  connect(socket: MockWebSocket) {
+    this.clients.push(socket)
+    socket.readyState = 1
+    socket.onopen?.({} as Event)
+  }
+
+  send(data: any) {
+    this.messages.push(data)
+    this.clients.forEach((client) => {
+      const event = new MessageEvent('message', {
+        data: typeof data === 'string' ? data : JSON.stringify(data),
+      })
+      client.onmessage?.(event)
+    })
+  }
+
+  close() {
+    this.clients.forEach((client) => {
+      client.readyState = 3
+      client.onclose?.({} as CloseEvent)
+    })
+    this.clients = []
+    this.messages = []
+  }
+}
+
+class MockWebSocket implements Partial<WebSocket> {
+  url: string
+  readyState = 0
+  onopen: ((ev: Event) => any) | null = null
+  onmessage: ((ev: MessageEvent) => any) | null = null
+  onclose: ((ev: CloseEvent) => any) | null = null
+  server: MockWebSocketServer
+  private eventListeners: Record<string, Set<EventListener>> = {
+    open: new Set(),
+    message: new Set(),
+    close: new Set(),
+    error: new Set(),
+  }
+
+  constructor(url: string, server: MockWebSocketServer) {
+    this.url = url
+    this.server = server
+  }
+
+  addEventListener(type: string, listener: EventListener): void {
+    if (!this.eventListeners[type]) {
+      this.eventListeners[type] = new Set()
+    }
+    this.eventListeners[type].add(listener)
+
+    if (type === 'open' && this.onopen === null) {
+      this.onopen = (event) => {
+        this.eventListeners.open.forEach((listener) => listener(event))
+      }
+    } else if (type === 'message' && this.onmessage === null) {
+      this.onmessage = (event) => {
+        this.eventListeners.message.forEach((listener) => listener(event))
+      }
+    } else if (type === 'close' && this.onclose === null) {
+      this.onclose = (event) => {
+        this.eventListeners.close.forEach((listener) => listener(event))
+      }
+    }
+  }
+
+  removeEventListener(type: string, listener: EventListener): void {
+    if (this.eventListeners[type]) {
+      this.eventListeners[type].delete(listener)
+    }
+  }
+
+  dispatchEvent(event: Event): boolean {
+    const type = event.type
+
+    if (type === 'open' && this.onopen) {
+      this.onopen(event)
+    } else if (type === 'message' && this.onmessage) {
+      this.onmessage(event as MessageEvent)
+    } else if (type === 'close' && this.onclose) {
+      this.onclose(event as CloseEvent)
+    }
+
+    if (this.eventListeners[type]) {
+      this.eventListeners[type].forEach((listener) => listener(event))
+    }
+
+    return true
+  }
+
+  send(data: string | ArrayBufferLike | Blob | ArrayBufferView) {
+    this.server.messages.push(data)
+  }
+
+  close() {
+    this.readyState = 3
+    this.onclose?.({} as CloseEvent)
+  }
+}
+
+let mockSocketServer: MockWebSocketServer
+let originalWebSocket: typeof WebSocket
+
+function createWrapper(options: {connection: {url?: string}}) {
+  return function Wrapper({children}: {children: React.ReactNode}) {
+    return <ExtensionServerProvider options={options}>{children}</ExtensionServerProvider>
+  }
+}
+
+beforeEach(() => {
+  mockSocketServer = new MockWebSocketServer()
+
+  originalWebSocket = globalThis.WebSocket
+
+  globalThis.WebSocket = function (url: string) {
+    const socket = new MockWebSocket(url, mockSocketServer)
+    return socket as unknown as WebSocket
+  } as unknown as typeof WebSocket
+})
+
+afterEach(() => {
+  globalThis.WebSocket = originalWebSocket
+})
+
+describe('ExtensionServerProvider tests', () => {
+  describe('client tests', () => {
+    test('creates a new ExtensionServerClient instance', async () => {
+      const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
+
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      expect(result.current.client).toBeDefined()
+    })
+
+    test('does not start a new connection if an empty url is passed', async () => {
+      const options = {connection: {}}
+
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      expect(result.current.client.connection).toBeUndefined()
+    })
+  })
+
+  describe('connect tests', () => {
+    test('starts a new connection by calling connect', async () => {
+      const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
+
+      const {result} = renderHook(useExtensionServerContext, {
+        wrapper: createWrapper({connection: {url: ''}}),
+      })
+
+      act(() => result.current.connect(options))
+
+      expect(result.current.client.connection).toBeDefined()
+    })
+  })
+
+  describe('dispatch tests', () => {
+    test('updates the state', async () => {
+      const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
+      const app = mockApp()
+      const extension = mockExtension()
+      const payload = {app, extensions: [extension], store: 'test-store.com'}
+
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch({type: 'connected', payload})
+      })
+
+      expect(result.current.state).toStrictEqual({
+        app,
+        extensions: [extension],
+        store: 'test-store.com',
+      })
+    })
+  })
+
+  describe('state tests', () => {
+    test('persists connection data to the state', async () => {
+      const app = mockApp()
+      const extension = mockExtension()
+      const data = {app, store: 'test-store.com', extensions: [extension]}
+      const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
+
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
+      })
+
+      expect(result.current.state).toEqual({
+        app,
+        extensions: [extension],
+        store: 'test-store.com',
+      })
+    })
+
+    test('persists update data to the state', async () => {
+      const app = mockApp()
+      const extension = mockExtension()
+      const update = {...extension, version: 'v2'}
+      const data = {app, store: 'test-store.com', extensions: [extension]}
+      const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
+
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
+      })
+
+      act(() => {
+        result.current.dispatch(createConnectedAction({...data, extensions: [update]}))
+      })
+
+      expect(result.current.state).toEqual({
+        app,
+        extensions: [update],
+        store: 'test-store.com',
+      })
+    })
+
+    test('persists refresh data to the state', async () => {
+      const app = mockApp()
+      const extension = mockExtension()
+      const data = {app, store: 'test-store.com', extensions: [extension]}
+      const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
+
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
+      })
+
+      expect(result.current.state.extensions.length).toBe(1)
+      expect(result.current.state.extensions[0].uuid).toBe(extension.uuid)
+    })
+
+    test('persists focus data to the state', async () => {
+      const app = mockApp()
+      const extension = {
+        ...mockExtension(),
+        development: {
+          ...mockExtension().development,
+          focused: false,
+        },
+      }
+      const data = {app, store: 'test-store.com', extensions: [extension]}
+      const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
+
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
+      })
+
+      act(() => {
+        const focusedExtension = {
+          ...extension,
+          development: {
+            ...extension.development,
+            focused: true,
+          },
+        }
+        result.current.dispatch(createConnectedAction({...data, extensions: [focusedExtension]}))
+      })
+
+      const [updatedExtension] = result.current.state.extensions
+      expect(updatedExtension.development.focused).toBe(true)
+    })
+
+    test('persists unfocus data to the state', async () => {
+      const app = mockApp()
+      const extension = {
+        ...mockExtension(),
+        development: {
+          ...mockExtension().development,
+          focused: true,
+        },
+      }
+
+      const data = {app, store: 'test-store.com', extensions: [extension]}
+      const options = {connection: {url: 'ws://example-host.com:8000/extensions/'}}
+
+      const {result} = renderHook(useExtensionServerContext, {wrapper: createWrapper(options)})
+
+      act(() => {
+        result.current.dispatch(createConnectedAction(data))
+      })
+
+      act(() => {
+        const unfocusedExtension = {
+          ...extension,
+          development: {
+            ...extension.development,
+            focused: false,
+          },
+        }
+        result.current.dispatch(createConnectedAction({...data, extensions: [unfocusedExtension]}))
+      })
+
+      const [updatedExtension] = result.current.state.extensions
+      expect(updatedExtension.development.focused).toBe(false)
+    })
+  })
+})

package/src/context/ExtensionServerProvider.tsx

@@ -0,0 +1,48 @@
+import {extensionServerContext} from './constants'
+import {
+  createConnectedAction,
+  createUpdateAction,
+  createRefreshAction,
+  createFocusAction,
+  createUnfocusAction,
+} from '../state'
+
+import {ExtensionServerClient} from '../ExtensionServerClient'
+import {ExtensionServer} from '../ExtensionServerClient/server-types.js'
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect'
+import {useExtensionServerState} from '../hooks/useExtensionServerState'
+
+import React, {useCallback, useMemo, useState} from 'react'
+
+import type {ExtensionServerProviderProps} from './types'
+
+export function ExtensionServerProvider({children, options: defaultOptions}: ExtensionServerProviderProps) {
+  const [state, dispatch] = useExtensionServerState()
+  const [options, setOptions] = useState(defaultOptions)
+  const [client] = useState<ExtensionServer.Client>(() => new ExtensionServerClient())
+
+  const connect = useCallback(
+    (newOptions: ExtensionServer.Options = options) => {
+      setOptions(newOptions)
+    },
+    [options],
+  )
+
+  useIsomorphicLayoutEffect(() => client.connect(options), [client, options])
+
+  useIsomorphicLayoutEffect(() => {
+    const listeners = [
+      client.on('update', (payload) => dispatch(createUpdateAction(payload))),
+      client.on('connected', (payload) => dispatch(createConnectedAction(payload))),
+      client.on('refresh', (payload) => dispatch(createRefreshAction(payload))),
+      client.on('focus', (payload) => dispatch(createFocusAction(payload))),
+      client.on('unfocus', (payload) => dispatch(createUnfocusAction(payload))),
+    ]
+
+    return () => listeners.forEach((unsubscribe) => unsubscribe())
+  }, [dispatch])
+
+  const context = useMemo(() => ({dispatch, state, connect, client}), [dispatch, connect, state, client])
+
+  return <extensionServerContext.Provider value={context}>{children}</extensionServerContext.Provider>
+}

package/src/context/constants.ts

@@ -0,0 +1,16 @@
+import {ExtensionServerClient} from '../ExtensionServerClient'
+import {INITIAL_STATE} from '../state'
+import {noop} from '../utilities'
+import {ExtensionServer} from '../ExtensionServerClient/server-types.js'
+import {createContext} from 'react'
+
+import type {ExtensionServerContext} from './types'
+
+const DEFAULT_VALUE: ExtensionServerContext = {
+  connect: noop,
+  dispatch: noop,
+  state: INITIAL_STATE,
+  client: new ExtensionServerClient() as ExtensionServer.Client,
+}
+
+export const extensionServerContext = createContext<ExtensionServerContext>(DEFAULT_VALUE)

package/src/context/index.ts

@@ -0,0 +1,3 @@
+export * from './ExtensionServerProvider'
+export * from './constants'
+export * from './types'

package/src/context/types.ts

@@ -0,0 +1,14 @@
+import {ExtensionServer} from '../ExtensionServerClient/server-types.js'
+import type {ExtensionServerState, ExtensionServerActions} from '../state'
+
+export interface ExtensionServerContext {
+  client: ExtensionServer.Client
+  state: ExtensionServerState
+  connect(options?: ExtensionServer.Options): void
+  dispatch(action: ExtensionServerActions): void
+}
+
+export interface ExtensionServerProviderProps {
+  children?: React.ReactNode
+  options: ExtensionServer.Options
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useExtensionServerContext'
+export * from './useExtensionServerState'
+export * from './useIsomorphicLayoutEffect'

package/src/hooks/useExtensionServerContext.ts

@@ -0,0 +1,4 @@
+import {extensionServerContext} from '../context'
+import {useContext} from 'react'
+
+export const useExtensionServerContext = () => useContext(extensionServerContext)

package/src/hooks/useExtensionServerState.ts

@@ -0,0 +1,6 @@
+import {extensionServerReducer, INITIAL_STATE} from '../state'
+import {useReducer} from 'react'
+
+export function useExtensionServerState() {
+  return useReducer(extensionServerReducer, INITIAL_STATE)
+}

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,6 @@
+import {useEffect, useLayoutEffect} from 'react'
+
+const isSSR =
+  typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent)
+
+export const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect