v3.0.0-dev-preview.16/17

[rexxars]

✨ Highlights

Less custom input boilerplate

This release introduces a new spreadable elementProps property to all input components.

This currently includes things like onFocus/onBlur event handlers, ref, value (for primitive inputs) and an onChange that handles "native" React change events and emits the correct patches.

The intention is that you can safely pass (or "spread") these on to any "native" input element. This reduces the amount of boilerplate needed for custom inputs - especially those dealing with primitive values, and handles things like unsetting the field if the value is empty, extracting the value from a change event and similar.

For inputs dealing with complex values (objects and arrays), value is not included in elementProps, since it doesn't make sense to pass it to any native input.

This change also includes moving the change indicator rendering from individual primitive input components to their corresponding field component instead. This means even less boilerplate is needed in order to render a simple input component. In the future, we will provide a way to opt-out of this behavior, should you wish to handle the rendering of the change indicator yourself.

These changes means that in essence, all you need for the most basic custom string input would be:

import React from 'react'
import {StringInputProps} from 'sanity'

function StringInput(props: StringInputProps) {
  return <input type="text" {...props.elementProps} />
}

Note that this change means that input components will receive two "values" - props.value will now be of the "parsed" type defined in the schema (e.g. number), while elementProps.value will always be a string, since its intended to being forwarded as an attribute to the native HTML input element.

Context improvements

Custom validation functions and initial value resolvers now gets an extended context parameter passed to them, which includes the schema, the current user and a getClient() function.

Other features

• Now prints a warning when attempting to use an array with layout: 'tags' and a preconfigured list of options
• Now supports URL imports in sanity.config.ts
• Custom diff components are now supported and can be specified on schema types using the components.diff property
• A logo can now be passed to the configuration and will be rendered in the navigation bar. Note that this property name might change in an upcoming release, but we are including it for people who want to start working on the rendering of their studio logos.
• Studio loading should be between 50-300ms faster

BREAKING CHANGES

This release includes a few breaking changes:

Versioned client

The useClient() hook now requires you to pass an API version, for instance: useClient({apiVersion: '2022-09-14'}). This allows us to upgrade the API version used throughout the studio without breaking any custom queries or other requests performed from user code.

Similarily, the client property in various contexts (validation, config, initial value resolvers) is deprecated - instead there is a getClient() method attached to the context which takes the same API version configuration.

Router imports

Router imports have been moved from sanity/_unstable to sanity.

🐛 Notable bugfixes

• Fixes an issue where the reference input would sometimes be stuck in an initial loading phase
• Fixes an issue causing the tags layout not to work for string array inputs
• Fixes an issue where the content inside of a portable text annotation popover would sometimes not be displayed
• Fixes placement of custom markers in the portable text editor
• Fixes an issue where closing an empty array item would not automatically remove the item
• Fixes an issue where aliased schema types would get an extra layer of indentation in forms
• Fixes a peer dependency issue in @sanity/vision potentially causing installs to fail
• Fixes icons not being shown in certain structure panes
• Fixes an issue where previews using values from a schema type with a preconfigured list of options would use the name instead of the title
• Fixes an issue where fieldsets would not respect the readOnly property
• Fixes an issue where after hot-module reloading had been applied, some schema properties would not be reflected on Webpack-based environments such as Next.js
• Fixes an issue where the error screens would not be reset after a hot-module reload
• Fixes a bug where an invalid/expired session might cause the authentication screen to continously fail

📓 Full changelog

Author	Message	Commit
Espen Hovlandsdal	fix(vision): temporarily remove sanity peer dep while in preview	0ba345f
Herman Wikner	feat(validation): add array validation when using tags layout with list in options	443a734
Herman Wikner	feat(form): render TagsArrayInput before OptionsArray	260e050
Herman Wikner	fix(form): placement of custom markers in portable text editor	8f048ef
Herman Wikner	fix(form): only enable focus of ArrayItem when the dialog is closed	632151a
Cody Olsen	fix(server): allow URL imports (#3536)	32f120f
Marius Lundgård	build: fix package versions	06f93b9
Marius Lundgård	build: update design system	6c883de
Marius Lundgård	build: add jsonc-parser dependency	cfc8ae8
Marius Lundgård	feat(pkg-utils): respect target of tsconfig file	5941e51
Marius Lundgård	build(portable-text-editor): set build target to ES2019	8b1e844
Espen Hovlandsdal	fix(form): remove unnecessary placement prop for popover dialog	15316c1
Espen Hovlandsdal	fix(next-studio): allow routing at any depth	aac001d
Espen Hovlandsdal	refactor(test-studio): pass whole schema type to group builder	2e19691
Espen Hovlandsdal	fix(desk): pass whole schema type to item and list builder	0700476
Espen Hovlandsdal	test(form): update snapshot for @sanity/ui update	608803f
Marius Lundgård	build: update design system	206c188
Herman Wikner	fix(desk): update getSchemaType in ListItemBuilder	ad7d724
Herman Wikner	chore(types): add diff to components in BaseDefinitionOptions and BaseSchemaType	9473981
Herman Wikner	feat(field): use components.diff instead of diffComponent in resolveDiffComponent	64a4d42
Espen Hovlandsdal	docs(vision): fix usage example in readme	5cd1700
Marius Lundgård	build: update @sanity/tsdoc-to-portable-text	b490d72
Marius Lundgård	build: define API extraction reporting settings	47bea8e
Marius Lundgård	build: update etl script	c95e2e6
Bjørge Næss	feat(form): introduce spreadable "elementProps" to reduce custom input boilerplate	ac60168
Espen Hovlandsdal	fix(config): include logo in resolved studio config	96d61b3
Marius Lundgård	test(portable-text-editor): increase timeout	66b1766
Marius Lundgård	build: update design system	cd2aa91
Marius Lundgård	fix(sanity): use correct icon in document list context menu	f0e18d1
Herman Wikner	fix(form): always return SanityPreview in defaultResolvePreviewComponent since SanityPreview takes care of resolving the preview component	88363f9
Marius Lundgård	build: update design system	83bd89c
Per-Kristian Nordnes	fix(form): fix issue where ref.input auto complete was disabled initially	949dba4
Per-Kristian Nordnes	fix(preview): string of options must return option value for preview, not the title	7bdfd29
Herman Wikner	fix(form): read only fieldsets	520535a
Marius Lundgård	build: remove etl exit code override	d49a27d
Marius Lundgård	build: update etl script	9feb8f3
Marius Lundgård	build: update etl script	16d160f
Per-Kristian Nordnes	chore: upgrade eslint and @sanity/ui-workshop to avoid peer legacy deps	f6a4c5b
Bjørge Næss	refactor(form): hide 'parents' argument in immutableReconcile	5b9fdb9
Bjørge Næss	fix(types): make disableNew optional for reference types	6627358
Marius Lundgård	chore(deps): update design system dependencies	8ae7663
Espen Hovlandsdal	fix(hooks): short-circuit invalid dates in useTimeAgo hook	3ff700e
Espen Hovlandsdal	fix(form): handle number and boolean changes in elementProps (#3580)	796227e
Espen Hovlandsdal	fix(datastores): memoize edit state in document store instance (#3565)	1eab7ba
Espen Hovlandsdal	fix(studio): reset error boundaries on hot module reload	67a83cc
Bjørge Næss	fix(base): improve correctness of error check	58d8bce
Espen Hovlandsdal	chore: upgrade dependencies	35d31f3
Espen Hovlandsdal	chore: fix typescript 4.8 typing issues	3778698
Snorre Eskeland Brekke	chore(deps): downgraded @sanity/logos to 1.1.15	506579a
Snorre Eskeland Brekke	feat: context available to initialValue function and added schema to validation context	deb115d
Marius Lundgård	chore(deps): update design system dependencies	cd97217
Espen Hovlandsdal	chore(deps): temporarily pin logos package to 1.1.5	76262a0
Per-Kristian Nordnes	fix(form): fix issue with popover content not displaying	673e81a
Espen Hovlandsdal	fix: move presence menu to leftmost position in navbar	d172946
Espen Hovlandsdal	feat(types): add missing Geopoint data type	3f34928
Snorre Eskeland Brekke	chore: removed some debug logging	35065be
Marius Lundgård	refactor(sanity): export router members from main export	8b8f3d6
Marius Lundgård	refactor(sanity): update router api and exports	bfedd3c
Marius Lundgård	refactor(vision): update router imports	919aee5
Marius Lundgård	refactor(test-studio): adjust router imports	a37093d
Espen Hovlandsdal	refactor(datastores): optimize cors check, clear token on 401	852cf86
Snorre Eskeland Brekke	feat: defineType second pass	66e5624
Espen Hovlandsdal	fix(form): apply JSON syntax highlighting on unknown array item value	4560afd
Espen Hovlandsdal	feat(cli): use define helpers for template schema types	69d8cae
Snorre Eskeland Brekke	fix: empty array items are deleted when edit modal is closed	77beb12
Snorre Eskeland Brekke	fix: corrected object level indentation for slug and alias types (#3638)	90c2bb9
Snorre Eskeland Brekke	fix: dark-mode checkerboard for images	dc8a1c8
Espen Hovlandsdal	chore(deps): upgrade @sanity/client to 3.4.1	58d7a73
Espen Hovlandsdal	fix(datastores): disallow reconfiguration of source client	6889632
Espen Hovlandsdal	feat!: require api version when using client, freeze config	fd5065a
Espen Hovlandsdal	chore: provide an API version where clients are used	880856a
Espen Hovlandsdal	feat: temporarily provide backwards compatibility with versionless client	e102803
Espen Hovlandsdal	test: provide correct mocks for updated getClient implementation	5d55e65
Espen Hovlandsdal	chore(types): normalize react dependency version	4e449ea

---

This discussion was created from the release v3.0.0-dev-preview.16.

[filipego]

Hi, when is the official release of v3?

[somarand]

No ETA. Expect sometime in late Q1 2023, but no guarantees. I don't work for Sanity

[filipego]

around march 2023 wow thats in a while, thanks

[kmelve]

Not sure where the Q1 2023 comes from :)

We are currently targeting late Q4 2022 for official release.

[somarand]

Oh Thanks. My reply was a misinformation campaign coz it spreads faster 😄 . Just kidding, I got that from a slack thread. But anyway, great to know we might have a v3 before new year 👍

[bryandowning]

Updating both sanity and vision to dev-preview.17 breaks vision for me when I try to execute a fetch:

Error: Existing client instance cannot be reconfigured - use `withConfig(newConfig)` to return a new client
    at SanityClient.config2 [as config] (sanityClient.js:79:13)
    at VisionGui.ensureSelectedApiVersion (VisionGui.tsx:430:20)
    at VisionGui.handleQueryExecution (VisionGui.tsx:515:10)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:25)
    at executeDispatch (react-dom.development.js:8243:3)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:7)
    at processDispatchQueue (react-dom.development.js:8288:5)

[kmelve]

This happens because Vision isn't updated with the breaking changes yet. Updates are on the way though!

[bryandowning]

Is there more work pending on the typings for defineType and defineField? After updating, I'm getting tons of difficult to understand type errors in my schema files which were previously all passing TS checks.

A few examples:

  defineField({
    type: 'reference',
    name: 'level',
    title: 'Level',
    to: [{type: 'level'}],
  }),

Object literal may only specify known properties, and 'to' does not exist in type '{ type: string; name: string; } & BaseDefinitionOptions & { type: string; options?: unknown; validation?: SchemaValidationValue; initialValue?: any; preview?: PreviewConfig<...> | undefined; } & { ...; } & FieldBase'.ts(2345)

  defineField({
    type: 'array',
    name: 'equipmentRequired',
    title: 'Required Equipment',
    of: [
      {
        type: 'reference',
        to: [{type: 'equipment'}],
      },
    ],
  }),

Object literal may only specify known properties, and 'of' does not exist in type '{ type: string; name: string; } & BaseDefinitionOptions & { type: string; options?: unknown; validation?: SchemaValidationValue; initialValue?: any; preview?: PreviewConfig<...> | undefined; } & { ...; } & FieldBase'.ts(2345)

This field generator util I made is basically unusable now :(

import {defineField} from 'sanity'

export type SchemaFields = Parameters<typeof defineField>[0]
export type DefinedField = ReturnType<typeof defineField>
export type FieldGenerator = (schemaFields?: Partial<SchemaFields>) => DefinedField[]

/**
 * This function returns a funtion that allows the caller to merge additional
 * schema fields onto a shared field.
 *
 * Example usage:
 *
 * export const title = fieldGenerator([
 *   defineField({
 *     type: 'string',
 *     name: 'title',
 *     title: 'Title',
 *   })
 * ])
 *
 * title({fieldset: 'My Fieldset'})
 */
export function fieldGenerator(fields: DefinedField[]): FieldGenerator {
  return (schemaFields) => fields.map((field) => ({...field, ...(schemaFields as {})}))
}


When I use it, I now get incomprehensible errors like this:

Type '({ type: string; name: string; } & BaseDefinitionOptions & { type: string; options?: unknown; validation?: SchemaValidationValue; initialValue?: any; preview?: PreviewConfig<...> | undefined; } & { ...; } & FieldBase & WidenValidation & WidenInitialValue)[]' is not assignable to type '[FieldDefinition<"string" | "number" | "boolean" | "object" | "array" | "block" | "date" | "datetime" | "document" | "file" | "geopoint" | "image" | "reference" | "crossDatasetReference" | "slug" | "span" | "text" | "url", undefined>, ...FieldDefinition<...>[]]'.
  Source provides no match for required element at position 0 in target.ts(2322)
types.d.ts(357, 9): The expected type comes from property 'fields' which is declared here on type '{ type: "document"; name: "recipe"; } & Omit<DocumentDefinition, "preview"> & { preview?: PreviewConfig<Record<string, string>, Record<never, any>> | undefined; }'

[bryandowning]

...but actually, I still have a problem with this localizedString object:

import {defineType, defineField} from 'sanity'

import {supportedLanguages} from '../../constants/languages'

export const localeString = defineType({
  title: 'Localized string',
  name: 'localeString',
  type: 'object',
  fieldsets: [
    {
      title: 'Translations',
      name: 'translations',
      options: {collapsible: true, collapsed: true},
    },
  ],
  fields: supportedLanguages.map((lang) =>
    defineField({
      title: lang.title,
      name: lang.id,
      type: 'string',
      fieldset: lang.isDefault ? undefined : 'translations',
    })
  ),
})

TS error on the fields key:

Type '({ type: "string"; name: string; } & Omit<StringDefinition, "preview"> & FieldBase & WidenValidation & WidenInitialValue)[]' is not assignable to type '[FieldDefinition<"string" | "number" | "boolean" | "object" | "array" | "block" | "date" | "datetime" | "document" | "file" | "geopoint" | "image" | "reference" | "crossDatasetReference" | "slug" | "span" | "text" | "url", undefined>, ...FieldDefinition<...>[]]'.
  Source provides no match for required element at position 0 in target.ts(2322)
types.d.ts(357, 9): The expected type comes from property 'fields' which is declared here on type '{ type: "object"; name: "localeString"; } & Omit<ObjectDefinition, "preview"> & { preview?: PreviewConfig<Record<string, string>, Record<never, any>> | undefined; }'

I think the culprit here is:

  export interface ObjectDefinition extends BaseDefinitionOptions {
    type: 'object'
    /**
     * Object must have at least one field.
     */
    fields: [FieldDefinition, ...FieldDefinition[]]

Basically, I can't just have the map result as my fields array. It needs to at least start with a single field, which seems problematic.

[bryandowning]

Solved with the following:

import {defineType, defineField} from 'sanity'

import {primaryLanguage, secondaryLanguages} from '../../constants/languages'

export const localeString = defineType({
  title: 'Localized string',
  name: 'localeString',
  type: 'object',
  fieldsets: [
    {
      title: 'Translations',
      name: 'translations',
      options: {collapsible: true, collapsed: true},
    },
  ],
  fields: [
    defineField({
      title: primaryLanguage.title,
      name: primaryLanguage.id,
      type: 'string',
    }),
    ...secondaryLanguages.map((lang) =>
      defineField({
        title: lang.title,
        name: lang.id,
        type: 'string',
        fieldset: 'translations',
      })
    ),
  ],
})

languages.ts looks like this:

export const primaryLanguage = {id: 'en', title: 'English'}
export const secondaryLanguages = [
  {id: 'fr', title: 'French'},
  {id: 'es', title: 'Spanish'},
]

[kmelve]

I believe we have some bigger typings changes/improvements coming to defineType and defineField soon. You can learn more in this PR.

[wimbarelds]

The above PR doesn't change this.

The 'issue' is that when you defineType with type: 'object', then the type for the fields property is [FieldDefinition, FieldDefinition[]], which more or less comes down to "an array containing 1 or more FieldDefinitions". The "problem" is that array.map just returns an array of "unknown" length.

Basically with the definition being what it is, you must always manually define at least one field, and cannot only have fields sourced via array.map(...).

I can see this being technically correct, but it is also very annoying for developers. I think it would be a better developer experience if instead validation for all fields having length >= 1 happened during runtime in Sanity Studio.

[bryandowning]

Looks like this is coming soon!
ae58cc5