Feature request: Sanity v3 support

[mosesoak]

Hi, we're loving this tool but after upgrading Sanity to its v3 dev-preview, it now gives an error TypeError: types.filter is not a function, presumably because the config entry point is now different.

I posted a question about whether v3 will feature type exporting here: https://github.com/sanity-io/sanity/discussions/3343#discussioncomment-3531595 -- it's still in development so potentially could be something they could add.

If it helps you jump in to make a v3-compatible version, here's how we have our project set up:

  "scripts": {
    "start": "sanity start",
    "build": "sanity build",
    "typegen": "sanity-codegen",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\""
  },
  "dependencies": {
    "@sanity/vision": "^3.0.0-dev-preview.15",
    "eslint": "^8.23.0",
    "prop-types": "^15.7",
    "react": "^17.0",
    "react-dom": "^17.0",
    "sanity": "^3.0.0-dev-preview.15",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@sanity/types": "^3.0.0-dev-preview.15",
    "prettier": "^2.7.1",
    "sanity-codegen": "^0.9.8"

sanity.config.ts

export default createConfig({
  name: '---',
  projectId: '---',
  dataset: 'production',
  plugins: [deskTool(), visionTool],
  schema: {
    types: [
      personDoc,
      clientDoc,
      projectDoc,
      jobDoc,
      newsItem,
      articleDoc,
    ],
  },
});

Thanks for considering it!

[alexbchr]

I agree that proper Sanity v3 support would be great! In the meantime, here is what I did to have the tool work in Sanity v3.

The idea is to have an index.ts file that exports all the schema types as a default export and that the  sanity-codegen CLI can actually trigger the type creation. Since the schema configuration didn't change much between Sanity V2 and V3, this seems to properly generate the types for me.

// src/schemas/index.ts
const schemas: SchemaTypeDefinition[] = [
  personDoc,
  clientDoc,
  projectDoc,
  jobDoc,
  newsItem,
  articleDoc,
]

export default schemas

// sanity.config.ts
import schemas from './src/schemas'
//... later in the config
schema: { types: schemas }

Along with that, you'll also need to create a sanity-codegen.config.ts file if not already created, with the following content:

import { SanityCodegenConfig } from 'sanity-codegen'

const config: SanityCodegenConfig = {
  schemaPath: './src/schemas/index',
  // Uncomment below to change output path
  // outputPath: './src/utils/types/schema/generated-schema-types.ts',
  babelOptions: {
    // Plugins are copy pasted from https://github.com/ricokahler/sanity-codegen/blob/main/src/cli.ts
    // Only the `babel-plugin-transform-vite-meta-env` plugin is added
    plugins: [
      // used to resolve and no-op sanity's part system
      [
        'module-resolver',
        {
          root: ['.'],
          alias: {
            'part:@sanity/base/schema-creator': 'sanity-codegen/schema-creator-shim',
            'all:part:@sanity/base/schema-type': 'sanity-codegen/schema-type-shim',
            'part:@sanity/base/schema-type': 'sanity-codegen/schema-type-shim',
            '^part:.*': 'sanity-codegen/no-op',
            '^config:.*': 'sanity-codegen/no-op',
            '^all:part:.*': 'sanity-codegen/no-op',
          },
        },
      ],
      // used to resolve css module imports that are allowed in sanity projects
      'css-modules-transform',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-numeric-separator',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      'babel-plugin-transform-vite-meta-env', // ADDED
    ],
  },
}

export default config

Also be sure to install the babel-plugin-transform-vite-meta-env Babel plugin using yarn add or npm install.

So far, I didn't encounter any bug or issue with this approach. If I do, I'll update this comment with my problems.

Hopefully this helps a few people out there 😉

UPDATE: I actually ran into one really annoying issue. I use environment variables throughout the studio, which uses import.meta.env.* to use environment variables. Since sanity-codegen runs using Babel instead of Vite, this straight up doesn't work... To fix it, I ended up manually specifying the Babel plugins used in the sanity-codegen.config.ts. I updated the code above to reflect that.

[eltorio]

Hi, I use the same sanity-codegen.config.ts as @alexbchr 🙏 but I simply add

const schemas = [
...schemaTypes
]
export default schemas

At the end of my schemas/index.ts