[schema] Guess preview config based on raw schema def instead of parsed (#132)

Author: bjoerge

packages/@sanity/schema/src/preview/createPreviewGetter.js

@@ -29,11 +29,11 @@ function parsePreview(preview) {
   }
 }
 
-export default function createPreviewGetter(typeDef, parsed) {
+export default function createPreviewGetter(objectTypeDef) {
   return function previewGetter() {
-    warnIfPreviewOnOptions(typeDef)
-    warnIfPreviewHasFields(typeDef)
-    const preview = parsePreview(typeDef.preview || (typeDef.options || {}).preview)
-    return preview || guessPreviewConfig(parsed.fields)
+    warnIfPreviewOnOptions(objectTypeDef)
+    warnIfPreviewHasFields(objectTypeDef)
+    const preview = parsePreview(objectTypeDef.preview || (objectTypeDef.options || {}).preview)
+    return preview || guessPreviewConfig(objectTypeDef)
   }
 }

packages/@sanity/schema/src/preview/guessPreviewConfig.js

@@ -1,21 +1,27 @@
 import {omitBy, isUndefined} from 'lodash'
+import arrify from 'arrify'
 
 const TITLE_CANDIDATES = ['title', 'name', 'label', 'heading', 'header', 'caption']
 const DESCRIPTION_CANDIDATES = ['description', ...TITLE_CANDIDATES]
 
-function isImageField(field) {
-  return field.type.name === 'image'
+function isImageField(fieldDef) {
+  return fieldDef.type === 'image'
 }
 
-function resolveImageAssetPath(fields) {
-  const found = fields.find(field => isImageField(field))
-  return found && `${found.name}.url`
+function isImageAssetField(fieldDef) {
+  return fieldDef.type === 'reference'
+    && arrify(fieldDef.to).some(memberTypeDef => memberTypeDef.type === 'imageAsset')
 }
 
-export default function guessPreviewFields(fields) {
+function resolveImageAssetPath(fieldDefs) {
+  const found = fieldDefs.find(field => isImageAssetField(field) || isImageField(field))
+  return found && (isImageField(found) ? `${found.name}.asset.url` : `${found.name}.url`)
+}
+
+export default function guessPreviewFields(objectTypeDef) {
 
-  const stringFieldNames = fields
-    .filter(field => field.type.name === 'string')
+  const stringFieldNames = objectTypeDef.fields
+    .filter(field => field.type === 'string')
     .map(field => field.name)
 
   // Check if we have fields with names that is listed in candidate fields
@@ -32,11 +38,11 @@ export default function guessPreviewFields(fields) {
     descField = stringFieldNames[1]
   }
 
-  const imageAssetPath = resolveImageAssetPath(fields)
+  const imageAssetPath = resolveImageAssetPath(objectTypeDef.fields)
 
   if (!titleField && !imageAssetPath) {
     // last resort, pick all fields and concat them
-    const fieldNames = fields.map(field => field.name)
+    const fieldNames = objectTypeDef.fields.map(field => field.name)
     const fieldMapping = fieldNames.reduce((acc, fieldName) => {
       acc[fieldName] = fieldName
       return acc

packages/@sanity/schema/src/types/blocks/block.js

@@ -64,7 +64,7 @@ export const BlockType = {
       })
     })
 
-    lazyGetter(parsed, 'preview', createPreviewGetter(subTypeDef, parsed))
+    lazyGetter(parsed, 'preview', createPreviewGetter(subTypeDef))
 
     return subtype(parsed)
 

packages/@sanity/schema/src/types/blocks/span.js

@@ -44,7 +44,7 @@ export const SpanType = {
       })
     })
 
-    lazyGetter(parsed, 'preview', createPreviewGetter(subTypeDef, parsed))
+    lazyGetter(parsed, 'preview', createPreviewGetter(subTypeDef))
 
     return subtype(parsed)
 

packages/@sanity/schema/src/types/file.js

@@ -1,6 +1,5 @@
 import {pick} from 'lodash'
 import {lazyGetter} from './utils'
-import guessPreviewConfig from '../preview/guessPreviewConfig'
 import createPreviewGetter from '../preview/createPreviewGetter'
 
 export const ASSET_FIELD = {
@@ -54,7 +53,7 @@ export const FileType = {
       })
     })
 
-    lazyGetter(parsed, 'preview', createPreviewGetter(subTypeDef, parsed))
+    lazyGetter(parsed, 'preview', createPreviewGetter(subTypeDef))
 
     return subtype(parsed)
 

packages/@sanity/schema/src/types/image.js

@@ -20,11 +20,6 @@ const IMAGE_CORE = {
 }
 
 const DEFAULT_OPTIONS = {}
-const DEFAULT_PREVIEW = {
-  select: {
-    imageUrl: 'asset.url'
-  }
-}
 
 export const ImageType = {
   get() {
@@ -56,9 +51,7 @@ export const ImageType = {
       })
     })
 
-    lazyGetter(parsed, 'preview', createPreviewGetter(
-      Object.assign({}, {preview: DEFAULT_PREVIEW}, subTypeDef), parsed)
-    )
+    lazyGetter(parsed, 'preview', createPreviewGetter(Object.assign({}, subTypeDef, {fields})))
 
     return subtype(parsed)
 

packages/@sanity/schema/src/types/image/fieldDefs.js

@@ -1,7 +1,7 @@
 export const ASSET_FIELD = {
   name: 'asset',
   type: 'reference',
-  to: {type: 'imageAsset'}
+  to: [{type: 'imageAsset'}]
 }
 
 export const HOTSPOT_FIELD = {

packages/@sanity/schema/src/types/object.js

@@ -41,7 +41,7 @@ export const ObjectType = {
       return createFieldsets(subTypeDef, parsed.fields)
     })
 
-    lazyGetter(parsed, 'preview', createPreviewGetter(subTypeDef, parsed))
+    lazyGetter(parsed, 'preview', createPreviewGetter(subTypeDef))
 
     return subtype(parsed)
 

packages/example-studio/schemas/myImage.js

@@ -2,14 +2,6 @@ export default {
   name: 'myImage',
   title: 'Some image type',
   type: 'image',
-  options: {
-    preview: {
-      select: {
-        imageUrl: 'asset.url',
-        title: 'caption'
-      }
-    }
-  },
   fields: [
     {
       name: 'caption',