feat: support react 19, upgrade build tooling (#111)

* chore: bump dependencies

* feat: support react 19, upgrade build tooling

* refactor: feedback from code review

* refactor: fix lint errors

.gitignore

@@ -61,3 +61,9 @@ lib
 
 # Workshop runtime files
 .workshop
+
+# Typescript build info
+tsconfig.tsbuildinfo
+
+# Sanity runtime output
+.sanity

package.json

@@ -25,75 +25,69 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
-      "require": "./lib/index.cjs",
-      "node": {
-        "import": "./lib/index.cjs.js"
-      },
       "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
       "default": "./lib/index.js"
     },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.cjs",
-  "module": "./lib/index.js",
-  "source": "./src/index.ts",
+  "module": "./lib/index.esm.js",
   "types": "./lib/index.d.ts",
   "files": [
     "lib",
     "sanity.json",
     "src",
     "v2-incompatible.js"
   ],
+  "sideEffects": false,
+  "browserslist": "extends @sanity/browserslist-config",
   "scripts": {
-    "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
-    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
     "clean": "rimraf lib",
     "compile": "tsc --noEmit",
-    "dev": "workshop dev",
+    "dev": "sanity dev",
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
     "prepare": "husky install",
-    "prepublishOnly": "run-s build",
+    "prepublishOnly": "npm run build",
     "test": "jest",
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.11.1",
-    "@codemirror/commands": "^6.3.2",
-    "@codemirror/lang-html": "^6.4.7",
+    "@codemirror/autocomplete": "^6.18.3",
+    "@codemirror/commands": "^6.7.1",
+    "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-java": "^6.0.1",
-    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/lang-markdown": "^6.3.1",
     "@codemirror/lang-php": "^6.0.1",
-    "@codemirror/lang-sql": "^6.5.4",
-    "@codemirror/language": "^6.9.3",
-    "@codemirror/legacy-modes": "^6.3.3",
-    "@codemirror/search": "^6.5.5",
-    "@codemirror/state": "^6.3.3",
-    "@codemirror/view": "^6.22.3",
-    "@juggle/resize-observer": "^3.3.1",
-    "@lezer/highlight": "^1.2.0",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/language": "^6.10.6",
+    "@codemirror/legacy-modes": "^6.4.2",
+    "@codemirror/search": "^6.5.8",
+    "@codemirror/state": "^6.5.0",
+    "@codemirror/view": "^6.35.3",
+    "@juggle/resize-observer": "^3.4.0",
+    "@lezer/highlight": "^1.2.1",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^2.0.0",
-    "@uiw/codemirror-themes": "^4.21.21",
-    "@uiw/react-codemirror": "^4.21.21"
+    "@sanity/ui": "^2.10.9",
+    "@uiw/codemirror-themes": "^4.23.6",
+    "@uiw/react-codemirror": "^4.23.6"
   },
   "devDependencies": {
     "@babel/core": "^7.23.6",
     "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
     "@sanity/icons": "^2.8.0",
-    "@sanity/pkg-utils": "^3.3.5",
-    "@sanity/plugin-kit": "^3.1.10",
+    "@sanity/pkg-utils": "^6.12.0",
+    "@sanity/plugin-kit": "^4.0.18",
     "@sanity/semantic-release-preset": "^4.1.6",
-    "@sanity/ui-workshop": "^1.2.0",
-    "@sanity/ui-workshop-plugin-sanity": "^1.0.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
@@ -118,22 +112,20 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^5.0.5",
-    "sanity": "^3.21.3",
-    "sanity-extra": "^1.0.0",
-    "sanity-testing-library": "^1.0.0",
-    "semantic-release": "^22.0.0",
+    "sanity": "^3.67.1",
+    "semantic-release": "^24.2.0",
     "styled-components": "^6.1.1",
     "ts-jest": "^29.1.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18 || >=19.0.0-0",
+    "react-dom": "^18 || >=19.0.0-0",
     "sanity": "^3",
     "styled-components": "^5.2 || ^6"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "sanityExchangeUrl": "https://www.sanity.io/plugins/code-input",
   "sanityPlugin": {

sanity.config.ts

@@ -0,0 +1,41 @@
+import {defineConfig} from 'sanity'
+import {structureTool} from 'sanity/structure'
+
+import {codeInput} from './src/index'
+
+export default defineConfig({
+  projectId: 'ppsg7ml5',
+  dataset: 'test',
+  plugins: [
+    structureTool({
+      structure: (S) => S.documentTypeList('codeTest'),
+    }),
+    codeInput(),
+  ],
+  schema: {
+    types: [
+      {
+        name: 'codeTest',
+        type: 'document',
+        fields: [
+          {name: 'title', type: 'string'},
+          {name: 'code', type: 'code'},
+        ],
+      },
+    ],
+  },
+  tasks: {
+    enabled: false,
+  },
+  scheduledPublishing: {
+    enabled: false,
+  },
+  announcements: {
+    enabled: false,
+  },
+  beta: {
+    create: {
+      startInCreateEnabled: false,
+    },
+  },
+})

src/CodeInput.tsx

@@ -1,14 +1,15 @@
+import {Box, Card, Stack, Text} from '@sanity/ui'
 import {Suspense, useCallback} from 'react'
 import {MemberField, ObjectInputProps, RenderInputCallback, set, setIfMissing, unset} from 'sanity'
-import {Box, Card, Stack, Text} from '@sanity/ui'
 import styled, {css} from 'styled-components'
-import {LanguageField} from './LanguageField'
+
 import {useCodeMirror} from './codemirror/useCodeMirror'
 import {useLanguageMode} from './codemirror/useLanguageMode'
 import {PATH_CODE} from './config'
+import {LanguageField} from './LanguageField'
 import {CodeInputValue, CodeSchemaType} from './types'
-import {useFieldMember} from './useFieldMember'
 import {focusRingBorderStyle, focusRingStyle} from './ui/focusRingStyle'
+import {useFieldMember} from './useFieldMember'
 
 export type {CodeInputLanguage, CodeInputValue} from './types'
 

src/LanguageField.tsx

@@ -1,7 +1,8 @@
 import {useCallback} from 'react'
 import {FieldMember, InputProps, MemberField, MemberFieldProps, StringInputProps} from 'sanity'
-import {CodeInputLanguage} from './types'
+
 import {LanguageInput} from './LanguageInput'
+import {CodeInputLanguage} from './types'
 
 export function LanguageField(
   props: MemberFieldProps & {member: FieldMember; language: string; languages: CodeInputLanguage[]},

src/LanguageInput.tsx

@@ -1,6 +1,7 @@
-import {ChangeEvent, useCallback} from 'react'
-import {StringInputProps, set, unset} from 'sanity'
 import {Select} from '@sanity/ui'
+import {ChangeEvent, useCallback} from 'react'
+import {set, StringInputProps, unset} from 'sanity'
+
 import {CodeInputLanguage} from './types'
 
 export interface LanguageInputProps extends StringInputProps {

src/PreviewCode.tsx

@@ -1,10 +1,11 @@
+import {Box, Card, Flex, Label, Text} from '@sanity/ui'
 import {Suspense} from 'react'
-import styled from 'styled-components'
-import {Label, Box, Card, Flex, Text} from '@sanity/ui'
-import {CodeInputValue, CodeSchemaType} from './types'
 import {PreviewProps} from 'sanity'
+import styled from 'styled-components'
+
 import {useCodeMirror} from './codemirror/useCodeMirror'
 import {useLanguageMode} from './codemirror/useLanguageMode'
+import {CodeInputValue, CodeSchemaType} from './types'
 
 const PreviewContainer = styled(Box)`
   position: relative;
@@ -20,7 +21,7 @@ export interface PreviewCodeProps extends PreviewProps {
 /**
  * @public
  */
-export default function PreviewCode(props: PreviewCodeProps) {
+export function PreviewCode(props: PreviewCodeProps) {
   const {selection, schemaType: type} = props
   const {languageMode} = useLanguageMode(type as CodeSchemaType, props.selection)
 

src/codemirror/CodeMirrorProxy.tsx

@@ -1,18 +1,19 @@
+import type {Extension} from '@codemirror/state'
+import {EditorView} from '@codemirror/view'
+import {useRootTheme} from '@sanity/ui'
+import CodeMirror, {type ReactCodeMirrorProps, type ReactCodeMirrorRef} from '@uiw/react-codemirror'
 import {forwardRef, useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import CodeMirror, {ReactCodeMirrorProps, ReactCodeMirrorRef} from '@uiw/react-codemirror'
-import {useCodeMirrorTheme} from './extensions/useCodeMirrorTheme'
-import {Extension} from '@codemirror/state'
+
 import {CodeInputConfigContext} from './CodeModeContext'
 import {defaultCodeModes} from './defaultCodeModes'
 import {
   highlightLine,
   highlightState,
   setHighlightedLines,
 } from './extensions/highlightLineExtension'
-import {EditorView} from '@codemirror/view'
-import {useRootTheme} from '@sanity/ui'
-import {useFontSizeExtension} from './extensions/useFontSize'
 import {useThemeExtension} from './extensions/theme'
+import {useCodeMirrorTheme} from './extensions/useCodeMirrorTheme'
+import {useFontSizeExtension} from './extensions/useFontSize'
 
 export interface CodeMirrorProps extends ReactCodeMirrorProps {
   highlightLines?: number[]