Update Sanity example deps and implementation (#65744)

- Uses the new `presentationTool.resolve.locations` instead of
`presentationTool.locate` API, which doesn't require wrangling `rxjs`.
- Sets up the new `presentationTool.resolve.mainDocuments` API, which
automatically opens up the post you're previewing on the left side in
the editor on the right side.
- Removes the `sanity-typegen.json` config file as `sanity typegen` now
looks for top level `app` and `sanity` folders by default.
- Enables `^` semver ranges for deps again now that our turbopack
support is stable, so that we only have to send you PRs when bumping
majors or changing the implementation itself.
- Sets up `sanity.config.ts` so it's possible to use `npx sanity dev`
for quickly iterating on schemas.

examples/cms-sanity/.gitignore

@@ -14,9 +14,9 @@
 /.next/
 /out/
 
-# production
-/build
-/studio/dist
+# sanity
+/.sanity/
+/dist/
 
 # misc
 .DS_Store

examples/cms-sanity/package.json

@@ -13,33 +13,31 @@
     "typegen": "sanity schema extract && sanity typegen generate"
   },
   "dependencies": {
-    "@sanity/assist": "3.0.3",
-    "@sanity/icons": "2.11.8",
-    "@sanity/image-url": "1.0.2",
-    "@sanity/preview-url-secret": "1.6.11",
-    "@sanity/vision": "3.39.0",
-    "@tailwindcss/typography": "^0.5.12",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@sanity/assist": "^3.0.4",
+    "@sanity/icons": "^2.11.8",
+    "@sanity/image-url": "^1.0.2",
+    "@sanity/preview-url-secret": "^1.6.13",
+    "@sanity/vision": "^3.42.1",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "@vercel/speed-insights": "^1.0.10",
     "autoprefixer": "^10.4.19",
     "date-fns": "^3.6.0",
     "next": "latest",
-    "next-sanity": "9.0.10",
+    "next-sanity": "^9.0.18",
     "postcss": "^8.4.38",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rxjs": "^7.8.1",
-    "sanity": "3.39.0",
-    "sanity-plugin-asset-source-unsplash": "3.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sanity": "^3.42.1",
+    "sanity-plugin-asset-source-unsplash": "^3.0.1",
     "server-only": "^0.0.1",
-    "styled-components": "6.1.8",
+    "styled-components": "^6.1.11",
     "tailwindcss": "^3.4.3",
     "typescript": "5.4.5"
   },
   "devDependencies": {
-    "@next/env": "latest",
     "eslint": "^8.57.0",
     "eslint-config-next": "latest"
   }

examples/cms-sanity/sanity.cli.ts

@@ -1,10 +1,19 @@
-import { loadEnvConfig } from "@next/env";
 import { defineCliConfig } from "sanity/cli";
 
-const dev = process.env.NODE_ENV !== "production";
-loadEnvConfig(__dirname, dev, { info: () => null, error: console.error });
-
 const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID;
 const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET;
 
-export default defineCliConfig({ api: { projectId, dataset } });
+export default defineCliConfig({
+  api: { projectId, dataset },
+  vite: {
+    define: {
+      "process.env.NEXT_PUBLIC_SANITY_PROJECT_ID": JSON.stringify(projectId),
+      "process.env.NEXT_PUBLIC_SANITY_DATASET": JSON.stringify(dataset),
+    },
+    resolve: {
+      alias: {
+        "@": __dirname,
+      },
+    },
+  },
+});

examples/cms-sanity/sanity.config.ts

@@ -5,16 +5,26 @@
 import { visionTool } from "@sanity/vision";
 import { PluginOptions, defineConfig } from "sanity";
 import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
-import { presentationTool } from "sanity/presentation";
+import {
+  presentationTool,
+  defineDocuments,
+  defineLocations,
+  type DocumentLocation,
+} from "sanity/presentation";
 import { structureTool } from "sanity/structure";
 
 import { apiVersion, dataset, projectId, studioUrl } from "@/sanity/lib/api";
-import { locate } from "@/sanity/plugins/locate";
 import { pageStructure, singletonPlugin } from "@/sanity/plugins/settings";
 import { assistWithPresets } from "@/sanity/plugins/assist";
 import author from "@/sanity/schemas/documents/author";
 import post from "@/sanity/schemas/documents/post";
 import settings from "@/sanity/schemas/singletons/settings";
+import { resolveHref } from "@/sanity/lib/utils";
+
+const homeLocation = {
+  title: "Home",
+  href: "/",
+} satisfies DocumentLocation;
 
 export default defineConfig({
   basePath: studioUrl,
@@ -31,7 +41,36 @@ export default defineConfig({
   },
   plugins: [
     presentationTool({
-      locate,
+      resolve: {
+        mainDocuments: defineDocuments([
+          {
+            route: "/posts/:slug",
+            filter: `_type == "post" && slug.current == $slug`,
+          },
+        ]),
+        locations: {
+          settings: defineLocations({
+            locations: [homeLocation],
+            message: "This document is used on all pages",
+            tone: "caution",
+          }),
+          post: defineLocations({
+            select: {
+              title: "title",
+              slug: "slug.current",
+            },
+            resolve: (doc) => ({
+              locations: [
+                {
+                  title: doc?.title || "Untitled",
+                  href: resolveHref("post", doc?.slug)!,
+                },
+                homeLocation,
+              ],
+            }),
+          }),
+        },
+      },
       previewUrl: { previewMode: { enable: "/api/draft" } },
     }),
     structureTool({ structure: pageStructure([settings]) }),

examples/cms-sanity/sanity.types.ts

@@ -394,7 +394,7 @@ export type SanityAssistSchemaTypeField = {
 };
 export declare const internalGroqTypeReferenceTo: unique symbol;
 
-// Source: sanity/lib/queries.ts
+// Source: ./sanity/lib/queries.ts
 // Variable: settingsQuery
 // Query: *[_type == "settings"][0]
 export type SettingsQueryResult = {
@@ -454,6 +454,7 @@ export type SettingsQueryResult = {
     _type: "image";
   };
 } | null;
+
 // Variable: heroQuery
 // Query: *[_type == "post" && defined(slug.current)] | order(date desc, _updatedAt desc) [0] {  content,    _id,  "status": select(_originalId in path("drafts.**") => "draft", "published"),  "title": coalesce(title, "Untitled"),  "slug": slug.current,  excerpt,  coverImage,  "date": coalesce(date, _updatedAt),  "author": author->{"name": coalesce(name, "Anonymous"), picture},}
 export type HeroQueryResult = {
@@ -509,6 +510,7 @@ export type HeroQueryResult = {
     } | null;
   } | null;
 } | null;
+
 // Variable: moreStoriesQuery
 // Query: *[_type == "post" && _id != $skip && defined(slug.current)] | order(date desc, _updatedAt desc) [0...$limit] {    _id,  "status": select(_originalId in path("drafts.**") => "draft", "published"),  "title": coalesce(title, "Untitled"),  "slug": slug.current,  excerpt,  coverImage,  "date": coalesce(date, _updatedAt),  "author": author->{"name": coalesce(name, "Anonymous"), picture},}
 export type MoreStoriesQueryResult = Array<{
@@ -546,6 +548,7 @@ export type MoreStoriesQueryResult = Array<{
     } | null;
   } | null;
 }>;
+
 // Variable: postQuery
 // Query: *[_type == "post" && slug.current == $slug] [0] {  content,    _id,  "status": select(_originalId in path("drafts.**") => "draft", "published"),  "title": coalesce(title, "Untitled"),  "slug": slug.current,  excerpt,  coverImage,  "date": coalesce(date, _updatedAt),  "author": author->{"name": coalesce(name, "Anonymous"), picture},}
 export type PostQueryResult = {
@@ -602,7 +605,7 @@ export type PostQueryResult = {
   } | null;
 } | null;
 
-// Source: app/(blog)/posts/[slug]/page.tsx
+// Source: ./app/(blog)/posts/[slug]/page.tsx
 // Variable: postSlugs
 // Query: *[_type == "post"]{slug}
 export type PostSlugsResult = Array<{