fix(core): change ValidProjection to string type (#627)

Author: cngonzalez

apps/kitchensink-react/src/DocumentCollection/MultiResourceRoute.tsx

@@ -70,7 +70,7 @@ function ProjectionCard<TData = unknown>({
   const {data, isPending} = useDocumentProjection({
     ...docHandle,
     ref,
-    projection: projection as `{${string}}`,
+    projection: projection,
   })
 
   return (

apps/kitchensink-react/src/routes/releases/ReleasesRoute.tsx

@@ -117,7 +117,7 @@ export function ReleasesRoute(): JSX.Element {
   const documentProjectionOptions = useMemo(
     () => ({
       ...documentOptions,
-      projection: `{name, "bestFriend": bestFriend->name}` as `{${string}}`,
+      projection: `{name, "bestFriend": bestFriend->name}`,
     }),
     [documentOptions],
   )

packages/core/src/projection/getProjectionState.ts

@@ -12,11 +12,11 @@ import {
 import {hashString} from '../utils/hashString'
 import {getPublishedId, insecureRandomId} from '../utils/ids'
 import {projectionStore} from './projectionStore'
-import {type ProjectionStoreState, type ProjectionValuePending, type ValidProjection} from './types'
+import {type ProjectionStoreState, type ProjectionValuePending} from './types'
 import {PROJECTION_STATE_CLEAR_DELAY, STABLE_EMPTY_PROJECTION, validateProjection} from './util'
 
 export interface ProjectionOptions<
-  TProjection extends ValidProjection = ValidProjection,
+  TProjection extends string = string,
   TDocumentType extends string = string,
   TDataset extends string = string,
   TProjectId extends string = string,
@@ -28,7 +28,7 @@ export interface ProjectionOptions<
  * @beta
  */
 export function getProjectionState<
-  TProjection extends ValidProjection = ValidProjection,
+  TProjection extends string = string,
   TDocumentType extends string = string,
   TDataset extends string = string,
   TProjectId extends string = string,
@@ -75,13 +75,13 @@ export const _getProjectionState = bindActionByDataset(
   createStateSourceAction({
     selector: (
       {state}: SelectorContext<ProjectionStoreState>,
-      options: ProjectionOptions<ValidProjection, string, string, string>,
+      options: ProjectionOptions<string, string, string, string>,
     ): ProjectionValuePending<object> | undefined => {
       const documentId = getPublishedId(options.documentId)
       const projectionHash = hashString(options.projection)
       return state.values[documentId]?.[projectionHash] ?? STABLE_EMPTY_PROJECTION
     },
-    onSubscribe: ({state}, options: ProjectionOptions<ValidProjection, string, string, string>) => {
+    onSubscribe: ({state}, options: ProjectionOptions<string, string, string, string>) => {
       const {projection, ...docHandle} = options
       const subscriptionId = insecureRandomId()
       const documentId = getPublishedId(docHandle.documentId)

packages/core/src/projection/projectionQuery.test.ts

@@ -1,12 +1,11 @@
 import {describe, expect, it} from 'vitest'
 
 import {createProjectionQuery, processProjectionQuery} from './projectionQuery'
-import {type ValidProjection} from './types'
 
 describe('createProjectionQuery', () => {
   it('creates a query and params for given ids and projections', () => {
     const ids = new Set(['doc1', 'doc2'])
-    const projectionHash: ValidProjection = '{title, description}'
+    const projectionHash = '{title, description}'
     const documentProjections = {
       doc1: {[projectionHash]: projectionHash},
       doc2: {[projectionHash]: projectionHash},
@@ -21,8 +20,8 @@ describe('createProjectionQuery', () => {
 
   it('handles multiple different projections', () => {
     const ids = new Set(['doc1', 'doc2'])
-    const projectionHash1: ValidProjection = '{title, description}'
-    const projectionHash2: ValidProjection = '{name, age}'
+    const projectionHash1 = '{title, description}'
+    const projectionHash2 = '{name, age}'
     const documentProjections = {
       doc1: {[projectionHash1]: projectionHash1},
       doc2: {[projectionHash2]: projectionHash2},
@@ -39,9 +38,9 @@ describe('createProjectionQuery', () => {
 
   it('filters out ids without projections', () => {
     const ids = new Set(['doc1', 'doc2', 'doc3'])
-    const projectionHash1: ValidProjection = '{title}'
+    const projectionHash1 = '{title}'
     // projectionHash2 missing intentionally
-    const projectionHash3: ValidProjection = '{name}'
+    const projectionHash3 = '{name}'
 
     const documentProjections = {
       doc1: {[projectionHash1]: projectionHash1},

packages/core/src/projection/projectionQuery.ts

@@ -1,9 +1,6 @@
 import {getDraftId, getPublishedId} from '../utils/ids'
-import {
-  type DocumentProjections,
-  type DocumentProjectionValues,
-  type ValidProjection,
-} from './types'
+import {type DocumentProjections, type DocumentProjectionValues} from './types'
+import {validateProjection} from './util'
 
 export type ProjectionQueryResult = {
   _id: string
@@ -18,7 +15,7 @@ interface CreateProjectionQueryResult {
   params: Record<string, unknown>
 }
 
-type ProjectionMap = Record<string, {projection: ValidProjection; documentIds: Set<string>}>
+type ProjectionMap = Record<string, {projection: string; documentIds: Set<string>}>
 
 export function createProjectionQuery(
   documentIds: Set<string>,
@@ -31,7 +28,7 @@ export function createProjectionQuery(
 
       return Object.entries(projectionsForDoc).map(([projectionHash, projection]) => ({
         documentId: id,
-        projection,
+        projection: validateProjection(projection),
         projectionHash,
       }))
     })

packages/core/src/projection/resolveProjection.test.ts

@@ -6,7 +6,7 @@ import {createSanityInstance, type SanityInstance} from '../store/createSanityIn
 import {type StateSource} from '../store/createStateSourceAction'
 import {getProjectionState} from './getProjectionState'
 import {resolveProjection} from './resolveProjection'
-import {type ProjectionValuePending, type ValidProjection} from './types'
+import {type ProjectionValuePending} from './types'
 
 vi.mock('./getProjectionState')
 
@@ -35,7 +35,7 @@ describe('resolveProjection', () => {
       documentId: 'doc123',
       documentType: 'movie',
     })
-    const projection = '{title}' as ValidProjection
+    const projection = '{title}'
 
     const result = await resolveProjection(instance, {...docHandle, projection})
 

packages/core/src/projection/resolveProjection.ts

@@ -5,11 +5,11 @@ import {bindActionByDataset} from '../store/createActionBinder'
 import {type SanityInstance} from '../store/createSanityInstance'
 import {getProjectionState, type ProjectionOptions} from './getProjectionState'
 import {projectionStore} from './projectionStore'
-import {type ProjectionValuePending, type ValidProjection} from './types'
+import {type ProjectionValuePending} from './types'
 
 /** @beta */
 export function resolveProjection<
-  TProjection extends ValidProjection = ValidProjection,
+  TProjection extends string = string,
   TDocumentType extends string = string,
   TDataset extends string = string,
   TProjectId extends string = string,

packages/core/src/projection/types.ts

@@ -1,8 +1,3 @@
-/**
- * @public
- */
-export type ValidProjection = `{${string}}`
-
 /**
  * @public
  * The result of a projection query
@@ -16,8 +11,16 @@ export interface DocumentProjectionValues<TValue extends object = object> {
   [projectionHash: string]: ProjectionValuePending<TValue>
 }
 
+/**
+ * @public
+ * @deprecated
+ * Template literals are a bit too limited, so this type is deprecated.
+ * Use `string` instead. Projection strings are validated at runtime.
+ */
+export type ValidProjection = string
+
 export interface DocumentProjections {
-  [projectionHash: string]: ValidProjection
+  [projectionHash: string]: string
 }
 
 interface DocumentProjectionSubscriptions {

packages/core/src/projection/util.ts

@@ -1,5 +1,3 @@
-import {type ValidProjection} from './types'
-
 export const PROJECTION_TAG = 'projection'
 export const PROJECTION_PERSPECTIVE = 'raw'
 export const PROJECTION_STATE_CLEAR_DELAY = 1000
@@ -9,11 +7,11 @@ export const STABLE_EMPTY_PROJECTION = {
   isPending: false,
 }
 
-export function validateProjection(projection: string): ValidProjection {
+export function validateProjection(projection: string): string {
   if (!projection.startsWith('{') || !projection.endsWith('}')) {
     throw new Error(
       `Invalid projection format: "${projection}". Projections must be enclosed in curly braces, e.g. "{title, 'author': author.name}"`,
     )
   }
-  return projection as ValidProjection
+  return projection
 }

packages/react/src/hooks/projection/useDocumentProjection.test.tsx

@@ -1,9 +1,4 @@
-import {
-  type DocumentHandle,
-  getProjectionState,
-  resolveProjection,
-  type ValidProjection,
-} from '@sanity/sdk'
+import {type DocumentHandle, getProjectionState, resolveProjection} from '@sanity/sdk'
 import {act, render, screen} from '@testing-library/react'
 import {Suspense, useRef} from 'react'
 import {type Mock} from 'vitest'
@@ -53,13 +48,7 @@ interface ProjectionResult {
   description: string
 }
 
-function TestComponent({
-  document,
-  projection,
-}: {
-  document: DocumentHandle
-  projection: ValidProjection
-}) {
+function TestComponent({document, projection}: {document: DocumentHandle; projection: string}) {
   const ref = useRef(null)
   const {data, isPending} = useDocumentProjection<ProjectionResult>({...document, projection, ref})
 
@@ -224,10 +213,7 @@ describe('useDocumentProjection', () => {
     const eventsUnsubscribe = vi.fn()
     subscribe.mockImplementation(() => eventsUnsubscribe)
 
-    function NoRefComponent({
-      projection,
-      ...docHandle
-    }: DocumentHandle & {projection: ValidProjection}) {
+    function NoRefComponent({projection, ...docHandle}: DocumentHandle & {projection: string}) {
       const {data} = useDocumentProjection<ProjectionResult>({...docHandle, projection}) // No ref provided
       return (
         <div>
@@ -259,7 +245,7 @@ describe('useDocumentProjection', () => {
     function NonHtmlRefComponent({
       projection,
       ...docHandle
-    }: DocumentHandle & {projection: ValidProjection}) {
+    }: DocumentHandle & {projection: string}) {
       const ref = useRef({}) // ref.current is not an HTML element
       const {data} = useDocumentProjection<ProjectionResult>({...docHandle, projection, ref})
       return (