feature!: Add support for third-party templating languages (#62)

* feat!: remove hook and refactor to virtual module BREAKING CHANGE: This deprecates the `useSanityClient` hook and exposes `sanityClient` on the 'sanity:client' module * chore: put studio on virtual module (`sanity:studio`) * chore: update examples for new imports * fix(readme): update documentation for new module names * chore: tidy up
sanity-io · Sep 29, 2023 · 0e213cb · 0e213cb · vercel · Sep 29, 2023
1 parent d485cca
commit 0e213cb
Show file tree

Hide file tree

Showing 20 changed files with 156 additions and 114 deletions.
diff --git a/apps/example-ssr/src/components/InternalLink.astro b/apps/example-ssr/src/components/InternalLink.astro
@@ -1,16 +1,15 @@
 ---
-import { useSanityClient } from "@sanity/astro";
+import { sanityClient } from "sanity:client";
 const { node } = Astro.props;
 const { markDef } = node;
 
-const client = useSanityClient();
 // Only deal with posts links for this example
-const destination = markDef._ref && await client.fetch(
+const destination = markDef._ref && await sanityClient.fetch(
   `* [_type == "post" && _id == $id] {slug {current}}[0]`,
   { id: markDef._ref }
 );
 
-const linkText = node.children.map(c => c.text).join(' ')
+const linkText = node.children.map((c: any) => c.text).join(' ')
 ---
 
 {

diff --git a/apps/example-ssr/src/components/NewsBar.jsx b/apps/example-ssr/src/components/NewsBar.jsx
@@ -0,0 +1,29 @@
+/**
+ * A dynamic Newsbar that fetches content live from Sanity.
+ *
+ */
+import { useState, useEffect, useCallback } from "react";
+import { sanityClient } from "sanity:client";
+
+export function NewsBar() {
+  const [news, setNews] = useState({ message: "Loading news…" });
+  const client = sanityClient;
+  const getNews = useCallback(async () => {
+    const response = await client.fetch(
+      `*[_type == "sanityIoSettings"][0].banner`
+    );
+    setNews(response || { message: "no news" });
+  }, [client]);
+
+  useEffect(() => {
+    getNews();
+  }, [getNews]);
+
+  return (
+    <marquee style={{ background: "blue", padding: "1em" }}>
+      <a style={{ color: "white" }} href={`https://www.sanity.io/${news.link}`}>
+        {news.message}
+      </a>
+    </marquee>
+  );
+}
diff --git a/apps/example-ssr/src/components/SanityImage.astro b/apps/example-ssr/src/components/SanityImage.astro
@@ -1,21 +1,20 @@
 ---
 import imageUrlBuilder from "@sanity/image-url";
-import {useSanityClient} from "@sanity/astro"
+import {sanityClient} from "sanity:client"
 
-const client = useSanityClient()
-const builder = imageUrlBuilder(client)
+const builder = imageUrlBuilder(sanityClient)
 
 const {node} = Astro.props
 const { width = 960 } = Astro.props
 
 // See https://www.sanity.io/docs/presenting-images for general documentation on
 // presenting images, and https://www.sanity.io/docs/image-url for specifics on
 // this builder API
-const image = builder
+const image = node && builder
   .image(node)
   .width(width)
   .fit('max')
   .auto('format')
 ---
 
-<img src={image.url()} alt={node.alt || ""} title={node.alt} />
+{image && <img src={image.url()} alt={node.alt || ""} title={node.alt} />}
diff --git a/apps/example-ssr/src/layouts/Layout.astro b/apps/example-ssr/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
---- 
+---
+import { NewsBar } from '../components/NewsBar';
+
 interface Props {
 	title: string;
 }
@@ -17,6 +19,7 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		<NewsBar client:only="react" />
 		<slot />
 	</body>
 </html>

diff --git a/apps/example-ssr/src/pages/index.astro b/apps/example-ssr/src/pages/index.astro
@@ -1,27 +1,19 @@
 ---
-import { useSanityClient } from "@sanity/astro";
+import { sanityClient } from "sanity:client";
+import Layout from "../layouts/Layout.astro";
 
-const client = useSanityClient();
-const posts = await client.fetch(`*[_type == "post" && defined(publishedAt)] | order(publishedAt desc)`);
+const posts = await sanityClient.fetch(`*[_type == "post" && defined(publishedAt)] | order(publishedAt desc)`);
 ---
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Sanity.io blog</title>
-	</head>
-	<body>
+<Layout title="Sanity.io blog">
 		<h1>Sanity.io blog</h1>
 		<ul>
-			{posts.map((post) => (
-				<li>,
+			{posts.map((post: any) => (
+				<li>
 					<a href={'/posts/' + post.slug.current} class="post-link">
 						{post.title}
 					</a>
 				</li>
 			))}
-	</body>
-</html>
+			</ul>
+</Layout>
diff --git a/apps/example-ssr/src/pages/posts/[slug].astro b/apps/example-ssr/src/pages/posts/[slug].astro
@@ -1,20 +1,19 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import { useSanityClient } from "@sanity/astro";
+import { sanityClient } from "sanity:client";
 import PortableText from "../../components/PortableText.astro";
 import SanityImage from "../../components/SanityImage.astro";
 
-  const client = useSanityClient();
-  const post = await client.fetch(
-    `*[_type == "post" && defined(publishedAt) && slug.current == $slug] | order(publishedAt desc) {
-			...,
-			authors[]-> {
-				name
-			}
-		}[0]`, {
-      slug: Astro.params.slug,
+const post = await sanityClient.fetch(
+  `*[_type == "post" && defined(publishedAt) && slug.current == $slug] | order(publishedAt desc) {
+    ...,
+    authors[]-> {
+      name
     }
-  );
+  }[0]`, {
+    slug: Astro.params.slug,
+  }
+);
 
 const byline = (post.authors || []).map((a:any) => a.name).join(", ");
 ---

diff --git a/apps/example/sanity.config.ts b/apps/example/sanity.config.ts
@@ -1,11 +1,10 @@
 import { visionTool } from "@sanity/vision";
 import { defineConfig } from "sanity";
 import { deskTool } from "sanity/desk";
+import { sanityClient } from "sanity:client";
 import { schemaTypes } from "./schemas";
 
-export const projectId =
-  import.meta.env.PUBLIC_SANITY_PROJECT_ID! || "3do82whm";
-export const dataset = import.meta.env.PUBLIC_SANITY_DATASET! || "next";
+const { projectId, dataset } = sanityClient.config();
 
 export default defineConfig({
   name: "project-name",

diff --git a/apps/example/src/components/InternalLink.astro b/apps/example/src/components/InternalLink.astro
@@ -1,16 +1,15 @@
 ---
-import { useSanityClient } from "@sanity/astro";
+import { sanityClient } from "sanity:client";
 const { node } = Astro.props;
 const { markDef } = node;
 
-const client = useSanityClient();
 // Only deal with posts links for this example
-const destination = markDef._ref && await client.fetch(
+const destination = markDef._ref && await sanityClient.fetch(
   `* [_type == "post" && _id == $id] {slug {current}}[0]`,
   { id: markDef._ref }
 );
 
-const linkText = node.children.map(c => c.text).join(' ')
+const linkText = node.children.map((c: any) => c.text).join(' ')
 ---
 
 {

diff --git a/apps/example/src/components/NewsBar.jsx b/apps/example/src/components/NewsBar.jsx
@@ -0,0 +1,29 @@
+/**
+ * A dynamic Newsbar that fetches content live from Sanity.
+ *
+ */
+import { useState, useEffect, useCallback } from "react";
+import { sanityClient } from "sanity:client";
+
+export function NewsBar() {
+  const [news, setNews] = useState({ message: "Loading news…" });
+  const client = sanityClient;
+  const getNews = useCallback(async () => {
+    const response = await client.fetch(
+      `*[_type == "sanityIoSettings"][0].banner`
+    );
+    setNews(response || { message: "no news" });
+  }, [client]);
+
+  useEffect(() => {
+    getNews();
+  }, [getNews]);
+
+  return (
+    <marquee style={{ background: "blue", padding: "1em" }}>
+      <a style={{ color: "white" }} href={`https://www.sanity.io/${news.link}`}>
+        {news.message}
+      </a>
+    </marquee>
+  );
+}
diff --git a/apps/example/src/components/SanityImage.astro b/apps/example/src/components/SanityImage.astro
@@ -1,21 +1,21 @@
 ---
 import imageUrlBuilder from "@sanity/image-url";
-import {useSanityClient} from "@sanity/astro"
+import { sanityClient } from "sanity:client";
 
-const client = useSanityClient()
-const builder = imageUrlBuilder(client)
+
+const builder = imageUrlBuilder(sanityClient)
 
 const {node} = Astro.props
 const { width = 960 } = Astro.props
 
 // See https://www.sanity.io/docs/presenting-images for general documentation on
 // presenting images, and https://www.sanity.io/docs/image-url for specifics on
 // this builder API
-const image = builder
+const image = node && builder
   .image(node)
   .width(width)
   .fit('max')
   .auto('format')
 ---
 
-<img src={image.url()} alt={node.alt || ""} title={node.alt} />
+{image && <img src={image.url()} alt={node.alt || ""} title={node.alt} />}
diff --git a/apps/example/src/layouts/Layout.astro b/apps/example/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
---- 
+---
+import { NewsBar } from '../components/NewsBar';
+
 interface Props {
 	title: string;
 }
@@ -17,6 +19,7 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		<NewsBar client:only="react" />
 		<slot />
 	</body>
 </html>

diff --git a/apps/example/src/pages/index.astro b/apps/example/src/pages/index.astro
@@ -1,27 +1,19 @@
 ---
-import { useSanityClient } from "@sanity/astro";
+import {sanityClient}  from "sanity:client";
+import Layout from "../layouts/Layout.astro";
 
-const client = useSanityClient();
-const posts = await client.fetch(`*[_type == "post" && defined(publishedAt)] | order(publishedAt desc)`);
+const posts = await sanityClient.fetch(`*[_type == "post" && defined(publishedAt)] | order(publishedAt desc)`);
 ---
 
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Sanity.io blog</title>
-	</head>
-	<body>
+<Layout title="Sanity.io blog">
 		<h1>Sanity.io blog</h1>
 		<ul>
 			{posts.map((post: any) => (
-				<li>,
+				<li>
 					<a href={'/posts/' + post.slug.current} class="post-link">
 						{post.title}
 					</a>
 				</li>
 			))}
-	</body>
-</html>
+	</ul>
+</Layout>
diff --git a/apps/example/src/pages/posts/[slug].astro b/apps/example/src/pages/posts/[slug].astro
@@ -1,12 +1,11 @@
 ---
+import { sanityClient } from "sanity:client";
 import Layout from "../../layouts/Layout.astro";
-import { useSanityClient } from "@sanity/astro";
 import PortableText from "../../components/PortableText.astro";
 import SanityImage from "../../components/SanityImage.astro";
 
 export async function getStaticPaths() {
-  const client = useSanityClient();
-  const posts = await client.fetch(
+  const posts = await sanityClient.fetch(
     `*[_type == "post" && defined(publishedAt)] | order(publishedAt desc) {
 			...,
 			authors[]-> {

diff --git a/packages/sanity-astro/README.md b/packages/sanity-astro/README.md
@@ -50,15 +50,14 @@ export default defineConfig({
 });
 ```
 
-This enables the use of `useSanityClient()` in your template files. For example:
+This enables the use of `sanityClient` in your template files. For example:
 
 ```mdx
 ---
 // /blog/index.astro
-import { useSanityClient } from "@sanity/astro";
+import { sanityClient } from "sanity:client";
 
-const client = useSanityClient();
-const posts = await client.fetch(`*[_type == "post" && defined(slug)] | order(publishedAt desc)`);
+const posts = await sanityClient.fetch(`*[_type == "post" && defined(slug)] | order(publishedAt desc)`);
 ---
 
 <h1>Blog</h1>
@@ -114,14 +113,14 @@ You can use this configuration file to install plugins, add a schema with docume
 
 ```javascript
 // astro.config.mjs
-import sanityIntegration from "@sanity/astro";
+import sanity from "@sanity/astro";
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 
 export default defineConfig({
   output: "hybrid",
   integrations: [
-    sanityIntegration({
+    sanity({
       projectId: "3do82whm",
       dataset: "next",
       // Set useCdn to false if you're building statically.