feat: change preview dimension

johannes-lindgren · johannes-lindgren · commit 47ed4a4d8f87 · 2025-07-22T17:05:05.000+02:00
diff --git a/packages/demo/src/components/NonModalView.tsx b/packages/demo/src/components/NonModalView.tsx
@@ -8,6 +8,7 @@ import { UserContextRequester } from './UserContextRequester'
 import { PluginComponent } from './FieldPluginDemo'
 import { LanguageView } from './LanguageView'
 import { PromptAI } from './PromptAI'
+import { PreviewWidth } from './PreviewWidth'
 
 export const NonModalView: PluginComponent = (props) => (
   <Paper>
@@ -20,6 +21,7 @@ export const NonModalView: PluginComponent = (props) => (
       <HeightChangeDemo {...props} />
       <LanguageView {...props} />
       <PromptAI {...props} />
+      <PreviewWidth {...props} />
     </Stack>
   </Paper>
 )
diff --git a/packages/demo/src/components/PreviewWidth.tsx b/packages/demo/src/components/PreviewWidth.tsx
@@ -0,0 +1,38 @@
+import { Button, Stack, Typography } from '@mui/material'
+import { PluginComponent } from './FieldPluginDemo'
+
+export const PreviewWidth: PluginComponent = (props) => {
+  const { data, actions } = props
+
+  const handleClickIncrement = () =>
+    actions?.setContent(
+      (typeof data.content === 'number' ? data.content : 0) + 1,
+    )
+  const handleClickReset = () => actions?.setContent(0)
+
+  const label =
+    typeof data.content === 'undefined'
+      ? 'undefined'
+      : JSON.stringify(data.content)
+
+  return (
+    <Stack gap={2}>
+      <Typography variant="subtitle1">Field Value</Typography>
+      <Typography textAlign="center">{label}</Typography>
+      <Button
+        variant="outlined"
+        color="secondary"
+        onClick={handleClickIncrement}
+      >
+        Increment
+      </Button>
+      <Button
+        variant="outlined"
+        color="secondary"
+        onClick={handleClickReset}
+      >
+        Reset
+      </Button>
+    </Stack>
+  )
+}
diff --git a/packages/field-plugin/package.json b/packages/field-plugin/package.json
@@ -43,6 +43,9 @@
     "test": "vitest",
     "build": "unbuild"
   },
+  "dependencies": {
+    "pure-parse": "^1.0.1"
+  },
   "devDependencies": {
     "@types/core-js": "2.5.8",
     "@types/node": "18.19.85",
diff --git a/packages/field-plugin/src/createFieldPlugin/FieldPluginActions.ts b/packages/field-plugin/src/createFieldPlugin/FieldPluginActions.ts
@@ -20,6 +20,22 @@ export type PromptAI = (payload: PromptAIPayload) => Promise<PromptAIResponse>
 export type RequestUserContext = () => Promise<UserData>
 export type SelectAsset = () => Promise<Asset>
 export type Initialize<Content> = () => Promise<FieldPluginData<Content>>
+export type SetPreviewWidth = (
+  previewWidth:
+    | {
+        tag: 'desktop'
+      }
+    | {
+        tag: 'tablet'
+      }
+    | {
+        tag: 'mobile'
+      }
+    | {
+        tag: 'custom'
+        width: number
+      },
+) => Promise<void>
 
 export type FieldPluginActions<Content> = {
   setContent: SetContent<Content>
@@ -28,4 +44,5 @@ export type FieldPluginActions<Content> = {
   promptAI: PromptAI
   requestUserContext: RequestUserContext
   selectAsset: SelectAsset
+  setPreviewDimension: SetPreviewWidth
 }
diff --git a/packages/field-plugin/src/createFieldPlugin/createPluginActions/callbackQueue.ts b/packages/field-plugin/src/createFieldPlugin/createPluginActions/callbackQueue.ts
@@ -6,6 +6,7 @@ import type {
   LoadedMessage,
   OnMessage,
   StateChangedMessage,
+  PreviewDimensionChangeMessage,
 } from '../../messaging'
 import { getRandomUid } from '../../utils'
 
@@ -18,6 +19,7 @@ type CallbackMap = {
   stateChanged: Record<CallbackId, OnMessage<StateChangedMessage>>
   loaded: Record<CallbackId, OnMessage<LoadedMessage>>
   promptAI: Record<CallbackId, OnMessage<PromptAIResponseMessage>>
+  previewDimension: Record<CallbackId, OnMessage<PreviewDimensionChangeMessage>>
 }
 type CallbackType = keyof CallbackMap
 
@@ -29,6 +31,7 @@ export const callbackQueue = () => {
     stateChanged: {},
     loaded: {},
     promptAI: {},
+    previewDimension: {},
   }
 
   const pushCallback = <T extends CallbackType>(
diff --git a/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.ts b/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.ts
@@ -11,6 +11,7 @@ import {
   pluginLoadedMessage,
   getPluginPromptAIMessage,
   valueChangeMessage,
+  previewDimensionsChangeMessage,
   type OnAssetSelectMessage,
   type OnContextRequestMessage,
   type OnUserContextRequestMessage,
@@ -176,6 +177,18 @@ export const createPluginActions: CreatePluginActions = ({
           postToContainer(getUserContextMessage({ uid, callbackId }))
         })
       },
+      setPreviewDimension: (previewWidth) => {
+        return new Promise((resolve) => {
+          const callbackId = pushCallback('previewDimension', () => resolve())
+          postToContainer(
+            previewDimensionsChangeMessage({
+              uid,
+              callbackId,
+              data: previewWidth,
+            }),
+          )
+        })
+      },
     },
     messageCallbacks,
     onHeightChange,
diff --git a/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PreviewDimensionChangeMessage.test.ts b/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PreviewDimensionChangeMessage.test.ts
@@ -0,0 +1,184 @@
+import {
+  isPreviewDimensionChangeMessage,
+  previewDimensionsChangeMessage,
+  PreviewDimensionChangeMessage,
+} from './PreviewDimensionChangeMessage'
+import { isMessageToContainer } from './MessageToContainer'
+import { expect } from 'vitest'
+
+const uid = '-preview-abc-123'
+const callbackId = 'test-callback-id'
+const stub: PreviewDimensionChangeMessage = {
+  action: 'plugin-changed',
+  event: 'previewDimension',
+  uid,
+  data: {
+    tag: 'desktop',
+  },
+}
+
+describe('PreviewDimensionsChangeMessage', () => {
+  describe('validator', () => {
+    it('is a MessageToContainer', () => {
+      expect(isMessageToContainer(stub)).toEqual(true)
+    })
+    it('requires event to be "previewDimension"', () => {
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          event: 'previewDimension',
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          event: 'somethingElse',
+        }),
+      ).toEqual(false)
+    })
+    test('that the data property is present', () => {
+      const { data: _data, ...withoutModel } = stub
+      expect(isPreviewDimensionChangeMessage(withoutModel)).toEqual(false)
+    })
+    test('that the data property can be one of the tagged objects', () => {
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {
+            tag: 'desktop',
+          },
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {
+            tag: 'tablet',
+          },
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {
+            tag: 'mobile',
+          },
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {
+            tag: 'custom',
+            width: 1234,
+          },
+        }),
+      ).toEqual(true)
+    })
+    test('that the data property cannot be any value', () => {
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: undefined,
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: null,
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {},
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: 'a string',
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: true,
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: 123.123,
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: [],
+        }),
+      ).toEqual(false)
+    })
+  })
+  describe('constructor', () => {
+    it('includes the uid', () => {
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'desktop',
+          },
+        }),
+      ).toHaveProperty('uid', uid)
+    })
+    it('includes the data', () => {
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'desktop',
+          },
+        }),
+      ).toHaveProperty('data', {
+        tag: 'desktop',
+      })
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'tablet',
+          },
+        }),
+      ).toHaveProperty('data', {
+        tag: 'tablet',
+      })
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'mobile',
+          },
+        }),
+      ).toHaveProperty('data', {
+        tag: 'mobile',
+      })
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'custom',
+            width: 1234,
+          },
+        }),
+      ).toHaveProperty('data', {
+        tag: 'custom',
+        width: 1234,
+      })
+    })
+  })
+})
diff --git a/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PreviewDimensionChangeMessage.ts b/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PreviewDimensionChangeMessage.ts
@@ -0,0 +1,57 @@
+import { MessageToContainer } from './MessageToContainer'
+import {
+  equalsGuard,
+  isNumber,
+  isString,
+  objectGuard,
+  oneOfGuard,
+  optionalGuard,
+} from 'pure-parse'
+
+export type PreviewDimensionChangeMessage =
+  MessageToContainer<'previewDimension'> & {
+    data:
+      | {
+          tag: 'desktop'
+        }
+      | {
+          tag: 'tablet'
+        }
+      | {
+          tag: 'mobile'
+        }
+      | {
+          tag: 'custom'
+          width: number
+        }
+  }
+export const isPreviewDimensionChangeMessage =
+  objectGuard<PreviewDimensionChangeMessage>({
+    action: equalsGuard('plugin-changed'),
+    uid: isString,
+    callbackId: optionalGuard(isString),
+    event: equalsGuard('previewDimension'),
+    data: oneOfGuard(
+      objectGuard({
+        tag: equalsGuard('desktop'),
+      }),
+      objectGuard({
+        tag: equalsGuard('tablet'),
+      }),
+      objectGuard({
+        tag: equalsGuard('mobile'),
+      }),
+      objectGuard({
+        tag: equalsGuard('custom'),
+        width: isNumber,
+      }),
+    ),
+  })
+
+export const previewDimensionsChangeMessage = (
+  options: Pick<PreviewDimensionChangeMessage, 'uid' | 'callbackId' | 'data'>,
+): PreviewDimensionChangeMessage => ({
+  action: 'plugin-changed',
+  event: 'previewDimension',
+  ...options,
+})
diff --git a/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/index.ts b/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/index.ts
@@ -2,6 +2,7 @@ export * from './MessageToContainer'
 export * from './ValueChangeMessage'
 export * from './ModalChangeMessage'
 export * from './PluginLoadedMessage'
+export * from './PreviewDimensionChangeMessage'
 export * from './HeightChangeMessage'
 export * from './GetContextMessage'
 export * from './GetUserContextMessage'
diff --git a/packages/sandbox/src/dom/createSandboxMessageListener.ts b/packages/sandbox/src/dom/createSandboxMessageListener.ts
diff --git a/yarn.lock b/yarn.lock
