From 79d542722c9898333cbbb40b5ef35c61cc4e993e Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Mon, 11 Mar 2024 18:32:03 +0100 Subject: [PATCH] chore: add PTE in Presentation race condition reproduction --- dev/test-studio/package.json | 1 + .../preview/SimpleBlockPortableText.tsx | 68 +++++++++++++++++++ dev/test-studio/preview/loader.tsx | 21 ++++++ dev/test-studio/preview/main.tsx | 64 ++--------------- dev/test-studio/sanity.config.ts | 9 +++ .../standard/portableText/simpleBlock.tsx | 4 ++ pnpm-lock.yaml | 3 + renovate.json | 6 ++ 8 files changed, 116 insertions(+), 60 deletions(-) create mode 100644 dev/test-studio/preview/SimpleBlockPortableText.tsx create mode 100644 dev/test-studio/preview/loader.tsx diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json index 83cfb65a4b4..d13d63b70d6 100644 --- a/dev/test-studio/package.json +++ b/dev/test-studio/package.json @@ -35,6 +35,7 @@ "@sanity/logos": "^2.1.2", "@sanity/migrate": "workspace:*", "@sanity/portable-text-editor": "workspace:*", + "@sanity/presentation": "1.11.4", "@sanity/preview-url-secret": "^1.6.1", "@sanity/react-loader": "^1.8.3", "@sanity/tsdoc": "1.0.0-alpha.44", diff --git a/dev/test-studio/preview/SimpleBlockPortableText.tsx b/dev/test-studio/preview/SimpleBlockPortableText.tsx new file mode 100644 index 00000000000..9a6339ae15e --- /dev/null +++ b/dev/test-studio/preview/SimpleBlockPortableText.tsx @@ -0,0 +1,68 @@ +import {PortableText, type PortableTextComponents} from '@portabletext/react' +import {type PortableTextBlock} from 'sanity' + +import {imageBuilder, useQuery} from './loader' + +const components: PortableTextComponents = { + types: { + image: ({value}) => { + if (!value?.asset?._ref) { + return null + } + return ( + {value.alt + ) + }, + }, +} + +export function SimpleBlockPortableText(): JSX.Element { + const {data, loading, error} = useQuery< + { + _id: string + title: string | null + body: PortableTextBlock[] + notes: {_key: string; title?: string; minutes?: number; notes?: PortableTextBlock[]}[] + }[] + >(/* groq */ `*[_type == "simpleBlock"]{_id,title,body,notes}`) + + if (error) { + throw error + } + + if (loading) { + return

Loading...

+ } + + return ( + <> + {data?.map((item) => { + return ( +
+

{item.title || 'Untitled'}

+ + {item.notes?.map((note) => ( +
+

{note.title}

+

{note.minutes} minutes

+ +
+ ))} +
+ ) + })} + + ) +} diff --git a/dev/test-studio/preview/loader.tsx b/dev/test-studio/preview/loader.tsx new file mode 100644 index 00000000000..0645b88a26f --- /dev/null +++ b/dev/test-studio/preview/loader.tsx @@ -0,0 +1,21 @@ +import {createClient} from '@sanity/client' +import imageUrlBuilder from '@sanity/image-url' +import {createQueryStore} from '@sanity/react-loader' + +const client = createClient({ + projectId: 'ppsg7ml5', + dataset: 'playground', + useCdn: true, + apiVersion: '2023-02-06', + stega: { + enabled: true, + studioUrl: '/presentation', + // logger: console, + filter: (props) => { + return props.filterDefault(props) + }, + }, +}) + +export const {useQuery, useLiveMode} = createQueryStore({client}) +export const imageBuilder: ReturnType = imageUrlBuilder(client) diff --git a/dev/test-studio/preview/main.tsx b/dev/test-studio/preview/main.tsx index 5d0ff5c8dad..2d8b6eac32e 100644 --- a/dev/test-studio/preview/main.tsx +++ b/dev/test-studio/preview/main.tsx @@ -1,33 +1,14 @@ -import {PortableText} from '@portabletext/react' -import {createClient} from '@sanity/client' -import {createQueryStore} from '@sanity/react-loader' import {enableVisualEditing} from '@sanity/visual-editing' import {Suspense, useEffect} from 'react' import {createRoot} from 'react-dom/client' -const client = createClient({ - projectId: 'ppsg7ml5', - dataset: 'playground', - useCdn: true, - apiVersion: '2023-02-06', - stega: { - enabled: true, - studioUrl: '/', - filter: (props) => { - if (props.sourcePath[0] == 'type') { - return true - } - return props.filterDefault(props) - }, - }, -}) - -const {useQuery, useLiveMode} = createQueryStore({client}) +import {useLiveMode} from './loader' +import {SimpleBlockPortableText} from './SimpleBlockPortableText' function Main() { return ( <> - + @@ -35,46 +16,9 @@ function Main() { ) } -function AllSchemaTypes() { - const {data, loading, error} = useQuery(/* groq */ `*[_type == "allTypes"]`) - - if (error) { - throw error - } - - if (loading) { - return

Loading...

- } - - return ( -
    - {data?.map((item) => { - return ( -
  1. -
    -
    string
    -
    {item.string}
    -
    type
    -
    {item.type}
    -
    text
    -
    {item.text}
    -
    array
    -
    {item.array?.map?.((word: any, i: number) => {word})}
    -
    blocks
    -
    - -
    -
    -
    2. - ) - })} -
- ) -} - function VisualEditing() { useEffect(() => enableVisualEditing(), []) - useLiveMode({client}) + useLiveMode({}) return null } diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts index c133faaa21b..86fca566927 100644 --- a/dev/test-studio/sanity.config.ts +++ b/dev/test-studio/sanity.config.ts @@ -7,6 +7,7 @@ import {nnNOLocale} from '@sanity/locale-nn-no' import {ptPTLocale} from '@sanity/locale-pt-pt' import {svSELocale} from '@sanity/locale-sv-se' import {SanityMonogram} from '@sanity/logos' +import {presentationTool as pinnedPresentationTool} from '@sanity/presentation' import {debugSecrets} from '@sanity/preview-url-secret/sanity-plugin-debug-secrets' import {tsdoc} from '@sanity/tsdoc/studio' import {visionTool} from '@sanity/vision' @@ -293,8 +294,16 @@ export default defineConfig([ plugins: [ debugSecrets(), presentationTool({ + name: 'presentation', + title: 'Presentation (stable)', previewUrl: '/preview/index.html', }), + pinnedPresentationTool({ + name: 'reproduction-presentation', + title: 'Presentation (reproduction)', + previewUrl: '/preview/index.html', + }), + assist(), sharedSettings(), ], basePath: '/presentation', diff --git a/dev/test-studio/schema/standard/portableText/simpleBlock.tsx b/dev/test-studio/schema/standard/portableText/simpleBlock.tsx index a0c917f5c21..004854a671a 100644 --- a/dev/test-studio/schema/standard/portableText/simpleBlock.tsx +++ b/dev/test-studio/schema/standard/portableText/simpleBlock.tsx @@ -118,6 +118,10 @@ export default defineType({ { type: 'image', name: 'image', + options: { + hotspot: true, + }, + fields: [{type: 'string', name: 'alt'}], }, { type: 'object', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3911e27f436..c6b8ecf879a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -425,6 +425,9 @@ importers: '@sanity/portable-text-editor': specifier: workspace:* version: link:../../packages/@sanity/portable-text-editor + '@sanity/presentation': + specifier: 1.11.4 + version: 1.11.4(@sanity/client@6.15.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@6.1.8) '@sanity/preview-url-secret': specifier: ^1.6.1 version: 1.6.4(@sanity/client@6.15.3) diff --git a/renovate.json b/renovate.json index b33f38fd614..62f6969f656 100644 --- a/renovate.json +++ b/renovate.json @@ -8,6 +8,12 @@ "matchFileNames": ["package.json", "dev/**/package.json", "examples/**/package.json"], "extends": [":semanticCommitTypeAll(chore)"] }, + { + "description": "Pin Presentation in Test Studio to the version that has the agressive focus path behavior that makes race conditions easier to debug", + "matchFileNames": ["dev/test-studio/package.json"], + "matchDepNames": ["@sanity/presentation"], + "allowedVersions": "<=1.11.4" + }, { "matchDepTypes": ["dependencies"], "matchPackageNames": ["get-it", "@sanity/client", "@sanity/presentation"],