@tinacms/app 0.0.0-20230516160329 → 0.0.0-20230516164752

package/CHANGELOG.md

@@ -1,13 +1,14 @@
 # @tinacms/app
 
-## 0.0.0-20230516160329
+## 0.0.0-20230516164752
 
 ### Patch Changes
 
 - 7f95c1ce5: Reorganize the way fields are presented on the form to allow for deep-linking
+- Updated dependencies [b3d98d159]
 - Updated dependencies [7f95c1ce5]
-  - @tinacms/toolkit@0.0.0-20230516160329
-  - tinacms@0.0.0-20230516160329
+  - @tinacms/toolkit@0.0.0-20230516164752
+  - tinacms@0.0.0-20230516164752
 
 ## 1.2.12
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.0-20230516160329",
+  "version": "0.0.0-20230516164752",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -13,6 +13,8 @@
     "@headlessui/react": "1.6.6",
     "@heroicons/react": "1.0.6",
     "@monaco-editor/react": "4.4.5",
+    "@tinacms/mdx": "1.3.10",
+    "@tinacms/toolkit": "0.0.0-20230516164752",
     "@xstate/react": "3.0.0",
     "final-form": "4.20.7",
     "graphiql": "^2.4.0",
@@ -25,10 +27,8 @@
     "react-is": "17.0.2",
     "react-router-dom": "6.3.0",
     "tailwindcss": "^3.2.7",
+    "tinacms": "0.0.0-20230516164752",
     "typescript": "^4.6.4",
-    "zod": "^3.14.3",
-    "@tinacms/mdx": "1.3.10",
-    "@tinacms/toolkit": "0.0.0-20230516160329",
-    "tinacms": "0.0.0-20230516160329"
+    "zod": "^3.14.3"
   }
 }

package/src/lib/expand-query.ts

@@ -67,13 +67,6 @@ const addTypenameToDocument = (doc: G.DocumentNode) => {
   })
 }
 
-const CONTENT_SOURCE_FIELD: G.FieldNode = {
-  kind: G.Kind.FIELD,
-  name: {
-    kind: G.Kind.NAME,
-    value: '_content_source',
-  },
-}
 const METADATA_FIELD: G.FieldNode = {
   kind: G.Kind.FIELD,
   name: {
@@ -101,11 +94,7 @@ const addMetadataField = (
         selections: [],
       }),
       selections:
-        [
-          ...(node.selectionSet?.selections || []),
-          METADATA_FIELD,
-          CONTENT_SOURCE_FIELD,
-        ] || [],
+        [...(node.selectionSet?.selections || []), METADATA_FIELD] || [],
     },
   }
 }

package/src/lib/graphql-reducer.ts

@@ -1,7 +1,7 @@
 import React from 'react'
 import * as G from 'graphql'
 import { getIn } from 'final-form'
-import { z } from 'zod'
+import { z, ZodError } from 'zod'
 // @ts-expect-error
 import schemaJson from 'SCHEMA_IMPORT'
 import { expandQuery, isConnectionType, isNodeType } from './expand-query'
@@ -25,10 +25,9 @@ import type {
   PostMessage,
   Payload,
   SystemInfo,
+  Document,
   ResolvedDocument,
 } from './types'
-import { getFormAndFieldNameFromMetadata } from './util'
-import { useSearchParams } from 'react-router-dom'
 
 const sysSchema = z.object({
   breadcrumbs: z.array(z.string()),
@@ -58,50 +57,6 @@ const astNode = schemaJson as G.DocumentNode
 const astNodeWithMeta: G.DocumentNode = {
   ...astNode,
   definitions: astNode.definitions.map((def) => {
-    if (def.kind === 'InterfaceTypeDefinition') {
-      return {
-        ...def,
-        fields: [
-          ...(def.fields || []),
-          {
-            kind: 'FieldDefinition',
-            name: {
-              kind: 'Name',
-              value: '_tina_metadata',
-            },
-            arguments: [],
-            type: {
-              kind: 'NonNullType',
-              type: {
-                kind: 'NamedType',
-                name: {
-                  kind: 'Name',
-                  value: 'JSON',
-                },
-              },
-            },
-          },
-          {
-            kind: 'FieldDefinition',
-            name: {
-              kind: 'Name',
-              value: '_content_source',
-            },
-            arguments: [],
-            type: {
-              kind: 'NonNullType',
-              type: {
-                kind: 'NamedType',
-                name: {
-                  kind: 'Name',
-                  value: 'JSON',
-                },
-              },
-            },
-          },
-        ],
-      }
-    }
     if (def.kind === 'ObjectTypeDefinition') {
       return {
         ...def,
@@ -125,24 +80,6 @@ const astNodeWithMeta: G.DocumentNode = {
               },
             },
           },
-          {
-            kind: 'FieldDefinition',
-            name: {
-              kind: 'Name',
-              value: '_content_source',
-            },
-            arguments: [],
-            type: {
-              kind: 'NonNullType',
-              type: {
-                kind: 'NamedType',
-                name: {
-                  kind: 'Name',
-                  value: 'JSON',
-                },
-              },
-            },
-          },
         ],
       }
     }
@@ -159,18 +96,6 @@ export const useGraphQLReducer = (
   const cms = useCMS()
   const tinaSchema = cms.api.tina.schema as TinaSchema
   const [payloads, setPayloads] = React.useState<Payload[]>([])
-  const [searchParams, setSearchParams] = useSearchParams()
-  const [results, setResults] = React.useState<
-    {
-      id: string
-      data:
-        | {
-            [key: string]: any
-          }
-        | null
-        | undefined
-    }[]
-  >([])
   const [documentsToResolve, setDocumentsToResolve] = React.useState<string[]>(
     []
   )
@@ -179,11 +104,6 @@ export const useGraphQLReducer = (
   >([])
   const [operationIndex, setOperationIndex] = React.useState(0)
 
-  const helper = React.useMemo(() => {
-    const previewPlugins = cms.plugins.getType('preview-helper')
-    return previewPlugins.find('preview-helper')
-  }, [cms])
-
   React.useEffect(() => {
     const run = async () => {
       return Promise.all(
@@ -225,7 +145,7 @@ export const useGraphQLReducer = (
         setPayloads(updatedPayloads)
       })
     }
-  }, [JSON.stringify(payloads), cms])
+  }, [payloads.map(({ id }) => id).join('.'), cms])
 
   const processPayload = React.useCallback(
     (payload: Payload) => {
@@ -272,13 +192,6 @@ export const useGraphQLReducer = (
           if (fieldName === '_values') {
             return source._internalValues
           }
-          if (info.fieldName === '_content_source') {
-            const pathArray = G.responsePathAsArray(info.path)
-            return {
-              queryId: payload.id,
-              path: pathArray.slice(0, pathArray.length - 1),
-            }
-          }
           if (info.fieldName === '_tina_metadata') {
             if (value) {
               return value
@@ -288,7 +201,6 @@ export const useGraphQLReducer = (
             return {
               id: null,
               fields: [],
-              prefix: '',
             }
           }
           if (isConnectionType(info.returnType)) {
@@ -359,9 +271,13 @@ export const useGraphQLReducer = (
                 return pathString.startsWith(item.path)
               }
             })
-            const parent = ancestors[ancestors.length - 1]
+            let parent = ancestors[ancestors.length - 1]
             if (parent) {
               if (parent.type === 'document') {
+                // console.log(
+                //   'its a parent',
+                //   JSON.stringify({ id, value, pathString, parent }, null, 2)
+                // )
                 parent.subItems.push({
                   type: 'document',
                   path: pathString,
@@ -391,12 +307,7 @@ export const useGraphQLReducer = (
                 },
                 { values: true }
               )
-              return resolveDocument(
-                resolvedDocument,
-                template,
-                form,
-                pathString
-              )
+              return resolveDocument(resolvedDocument, template, form)
             } else {
               existingForm.tinaForm.addQuery(payload.id)
               const { template } = getTemplateForDocument(
@@ -407,19 +318,10 @@ export const useGraphQLReducer = (
               return resolveDocument(
                 resolvedDocument,
                 template,
-                existingForm.tinaForm,
-                pathString
+                existingForm.tinaForm
               )
             }
           }
-          if (typeof value === 'string' && source?._tina_metadata) {
-            // FIXME: hack to prevent breaking images
-            if (helper) {
-              const pathArray = G.responsePathAsArray(info.path)
-
-              return helper.encode(pathArray.join('.'), value, payload.id)
-            }
-          }
           return value
         },
       })
@@ -442,32 +344,6 @@ export const useGraphQLReducer = (
           }
         })
       } else {
-        if (result.data) {
-          setResults((results) => [
-            ...results,
-            { id: payload.id, data: result.data },
-          ])
-        }
-        const activeField = searchParams.get('active-field')
-        if (activeField) {
-          setSearchParams({})
-          const [queryId, eventFieldName] = activeField.split('---')
-          if (queryId === payload.id) {
-            if (result?.data) {
-              cms.dispatch({
-                type: 'forms:set-active-field-name',
-                value: getFormAndFieldNameFromMetadata(
-                  result.data,
-                  eventFieldName
-                ),
-              })
-            }
-            cms.dispatch({
-              type: 'sidebar:set-display-state',
-              value: 'openOrFull',
-            })
-          }
-        }
         iframe.current?.contentWindow?.postMessage({
           type: 'updateData',
           id: payload.id,
@@ -487,40 +363,24 @@ export const useGraphQLReducer = (
     [resolvedDocuments.map((doc) => doc._internalSys.path).join('.')]
   )
 
-  const handleMessage = React.useCallback(
+  const notifyEditMode = React.useCallback(
     (event: MessageEvent<PostMessage>) => {
-      if (event?.data?.type === 'quick-edit') {
-        cms.dispatch({
-          type: 'set-quick-editing-supported',
-          value: event.data.value,
-        })
-      }
       if (event?.data?.type === 'isEditMode') {
         iframe?.current?.contentWindow?.postMessage({
           type: 'tina:editMode',
         })
       }
-      if (event.data.type === 'field:selected') {
-        const [queryId, eventFieldName] = event.data.fieldName.split('---')
-        const result = results.find((res) => res.id === queryId)
-        if (result?.data) {
-          cms.dispatch({
-            type: 'forms:set-active-field-name',
-            value: getFormAndFieldNameFromMetadata(result.data, eventFieldName),
-          })
-        }
-        cms.dispatch({
-          type: 'sidebar:set-display-state',
-          value: 'openOrFull',
-        })
-      }
+    },
+    []
+  )
+  const handleOpenClose = React.useCallback(
+    (event: MessageEvent<PostMessage>) => {
       if (event.data.type === 'close') {
         const payloadSchema = z.object({ id: z.string() })
         const { id } = payloadSchema.parse(event.data)
         setPayloads((previous) =>
           previous.filter((payload) => payload.id !== id)
         )
-        setResults((previous) => previous.filter((result) => result.id !== id))
         cms.forms.all().map((form) => {
           form.removeQuery(id)
         })
@@ -541,7 +401,7 @@ export const useGraphQLReducer = (
         ])
       }
     },
-    [cms, JSON.stringify(results)]
+    [cms]
   )
 
   React.useEffect(() => {
@@ -555,31 +415,23 @@ export const useGraphQLReducer = (
   React.useEffect(() => {
     return () => {
       setPayloads([])
-      setResults([])
       cms.removeAllForms()
       cms.dispatch({ type: 'form-lists:clear' })
     }
   }, [url])
 
   React.useEffect(() => {
-    iframe.current?.contentWindow?.postMessage({
-      type: 'quickEditEnabled',
-      value: cms.state.quickEditEnabled,
-    })
-  }, [cms.state.quickEditEnabled])
-
-  React.useEffect(() => {
-    cms.dispatch({ type: 'set-edit-mode', value: 'visual' })
     if (iframe) {
-      window.addEventListener('message', handleMessage)
+      window.addEventListener('message', handleOpenClose)
+      window.addEventListener('message', notifyEditMode)
     }
 
     return () => {
-      window.removeEventListener('message', handleMessage)
+      window.removeEventListener('message', handleOpenClose)
+      window.removeEventListener('message', notifyEditMode)
       cms.removeAllForms()
-      cms.dispatch({ type: 'set-edit-mode', value: 'basic' })
     }
-  }, [iframe.current, JSON.stringify(results)])
+  }, [iframe.current])
 }
 
 const onSubmit = async (
@@ -617,8 +469,7 @@ type Path = (string | number)[]
 const resolveDocument = (
   doc: ResolvedDocument,
   template: Template<true>,
-  form: Form,
-  pathToDocument: string
+  form: Form
 ): ResolvedDocument => {
   // @ts-ignore AnyField and TinaField don't mix
   const fields = form.fields as TinaField<true>[]
@@ -629,7 +480,6 @@ const resolveDocument = (
     values: form.values,
     path,
     id,
-    pathToDocument,
   })
   const metadataFields: Record<string, string> = {}
   Object.keys(formValues).forEach((key) => {
@@ -642,9 +492,7 @@ const resolveDocument = (
     sys: doc._internalSys,
     values: form.values,
     _tina_metadata: {
-      prefix: pathToDocument,
       id: doc._internalSys.path,
-      name: '',
       fields: metadataFields,
     },
     _internalSys: doc._internalSys,
@@ -658,14 +506,12 @@ const resolveFormValue = <T extends Record<string, unknown>>({
   values,
   path,
   id,
-  pathToDocument,
 }: // tinaSchema,
 {
   fields: TinaField<true>[]
   values: T
   path: Path
   id: string
-  pathToDocument: string
   // tinaSchema: TinaSchema
 }): T & { __typename?: string } => {
   const accum: Record<string, unknown> = {}
@@ -682,7 +528,6 @@ const resolveFormValue = <T extends Record<string, unknown>>({
       value: v,
       path,
       id,
-      pathToDocument,
     })
   })
   return accum as T & { __typename?: string }
@@ -692,13 +537,11 @@ const resolveFieldValue = ({
   value,
   path,
   id,
-  pathToDocument,
 }: {
   field: TinaField<true>
   value: unknown
   path: Path
   id: string
-  pathToDocument: string
 }) => {
   switch (field.type) {
     case 'object': {
@@ -719,16 +562,13 @@ const resolveFieldValue = ({
                 __typename: NAMER.dataTypeName(template.namespace),
                 _tina_metadata: {
                   id,
-                  name: nextPath.join('.'),
                   fields: metadataFields,
-                  prefix: pathToDocument,
                 },
                 ...resolveFormValue({
                   fields: template.fields,
                   values: item,
                   path: nextPath,
                   id,
-                  pathToDocument,
                 }),
               }
             })
@@ -757,16 +597,13 @@ const resolveFieldValue = ({
               __typename: NAMER.dataTypeName(field.namespace),
               _tina_metadata: {
                 id,
-                name: nextPath.join('.'),
                 fields: metadataFields,
-                prefix: pathToDocument,
               },
               ...resolveFormValue({
                 fields: templateFields,
                 values: item,
-                path: nextPath,
+                path,
                 id,
-                pathToDocument,
               }),
             }
           })
@@ -781,16 +618,13 @@ const resolveFieldValue = ({
           __typename: NAMER.dataTypeName(field.namespace),
           _tina_metadata: {
             id,
-            name: nextPath.join('.'),
             fields: metadataFields,
-            prefix: pathToDocument,
           },
           ...resolveFormValue({
             fields: templateFields,
             values: value as any,
-            path: nextPath,
+            path,
             id,
-            pathToDocument,
           }),
         }
       }
@@ -853,7 +687,7 @@ const expandPayload = async (payload: Payload, cms: TinaCMS) => {
     documentNode,
   })
   const expandedQueryForResolver = G.print(expandedDocumentNodeForResolver)
-  return { ...payload, expandedQuery, expandedData, expandedQueryForResolver }
+  return { ...payload, expandQuery, expandedData, expandedQueryForResolver }
 }
 
 /**

package/src/lib/types.ts

@@ -1,11 +1,8 @@
-export type PostMessage =
-  | {
-      type: 'open' | 'close' | 'isEditMode'
-      id: string
-      data: object
-    }
-  | { type: 'field:selected'; fieldName: string }
-  | { type: 'quick-edit'; value: boolean }
+export type PostMessage = {
+  type: 'open' | 'close' | 'isEditMode'
+  id: string
+  data: object
+}
 
 export type Payload = {
   id: string

package/src/lib/util.ts

@@ -1,124 +0,0 @@
-const charCodeOfDot = '.'.charCodeAt(0)
-const reEscapeChar = /\\(\\)?/g
-const rePropName = RegExp(
-  // Match anything that isn't a dot or bracket.
-  '[^.[\\]]+' +
-    '|' +
-    // Or match property names within brackets.
-    '\\[(?:' +
-    // Match a non-string expression.
-    '([^"\'][^[]*)' +
-    '|' +
-    // Or match strings (supports escaping characters).
-    '(["\'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2' +
-    ')\\]' +
-    '|' +
-    // Or match "" as the space between consecutive dots or empty brackets.
-    '(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))',
-  'g'
-)
-
-/**
- * Converts `string` to a property path array.
- *
- * @private
- * @param {string} string The string to convert.
- * @returns {Array} Returns the property path array.
- */
-const stringToPath = (string: string) => {
-  const result = []
-  if (string.charCodeAt(0) === charCodeOfDot) {
-    result.push('')
-  }
-  string.replace(rePropName, (match, expression, quote, subString) => {
-    let key = match
-    if (quote) {
-      key = subString.replace(reEscapeChar, '$1')
-    } else if (expression) {
-      key = expression.trim()
-    }
-    result.push(key)
-  })
-  return result
-}
-
-const keysCache: { [key: string]: string[] } = {}
-const keysRegex = /[.[\]]+/
-
-const toPath = (key: string): string[] => {
-  if (key === null || key === undefined || !key.length) {
-    return []
-  }
-  if (typeof key !== 'string') {
-    throw new Error('toPath() expects a string')
-  }
-  if (keysCache[key] == null) {
-    /**
-     * The following patch fixes issue 456, introduced since v4.20.3:
-     *
-     * Before v4.20.3, i.e. in v4.20.2, a `key` like 'choices[]' would map to ['choices']
-     * (e.g. an array of choices used where 'choices[]' is name attribute of an input of type checkbox).
-     *
-     * Since v4.20.3, a `key` like 'choices[]' would map to ['choices', ''] which is wrong and breaks
-     * this kind of inputs e.g. in React.
-     *
-     * v4.20.3 introduced an unwanted breaking change, this patch fixes it, see the issue at the link below.
-     *
-     * @see https://github.com/final-form/final-form/issues/456
-     */
-    if (key.endsWith('[]')) {
-      // v4.20.2 (a `key` like 'choices[]' should map to ['choices'], which is fine).
-      keysCache[key] = key.split(keysRegex).filter(Boolean)
-    } else {
-      // v4.20.3 (a `key` like 'choices[]' maps to ['choices', ''], which breaks applications relying on inputs like `<input type="checkbox" name="choices[]" />`).
-      keysCache[key] = stringToPath(key)
-    }
-  }
-  return keysCache[key]
-}
-export const getDeepestMetadata = (state: Object, complexKey: string): any => {
-  // Intentionally using iteration rather than recursion
-  const path = toPath(complexKey)
-  let current: any = state
-  let metadata: any
-  for (let i = 0; i < path.length; i++) {
-    const key = path[i]
-    if (
-      current === undefined ||
-      current === null ||
-      typeof current !== 'object' ||
-      (Array.isArray(current) && isNaN(Number(key)))
-    ) {
-      return undefined
-    }
-    const value = current[key]
-    if (value?._tina_metadata) {
-      metadata = value._tina_metadata
-    }
-    current = value
-  }
-  return metadata
-}
-export const getFormAndFieldNameFromMetadata = (
-  object: object,
-  eventFieldName: string
-) => {
-  let formId
-  let n
-  const value = getDeepestMetadata(object, eventFieldName)
-  if (value) {
-    if (value.prefix) {
-      const fieldName = eventFieldName.slice(value?.prefix?.length + 1)
-      const localFieldName = value.name
-        ? fieldName.slice(value?.name?.length + 1)
-        : fieldName
-      if (localFieldName) {
-        n = value.fields[localFieldName]
-      } else {
-        n = value.name
-      }
-      formId = value.id
-    }
-  }
-  return { formId, fieldName: n }
-}