feat: add getToolbarSrc() helper (#281)

prismicio · Apr 7, 2023 · f0e768c · f0e768c
1 parent d4720ad
commit f0e768c
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 0 deletions.
diff --git a/src/getToolbarSrc.ts b/src/getToolbarSrc.ts
@@ -0,0 +1,50 @@
+import { PrismicError } from "./errors/PrismicError";
+
+import { isRepositoryName } from "./isRepositoryName";
+
+/**
+ * Returns the URL for a Prismic repository's Prismic Toolbar script. Use the
+ * URL to inject the script into your app.
+ *
+ * @example
+ *
+ * ```typescriptreact
+ * // In Next.js apps, use `next/script` in your `app/layout.tsx` file.
+ *
+ * import Script from "next/script";
+ * import * as prismic from '@prismicio/client'
+ *
+ * export default function RootLayout({
+ * 	children,
+ * }: {
+ * 	children: React.ReactNode,
+ * }) {
+ * 	const toolbarSrc = prismic.getToolbarSrc("my-repo");
+ *
+ * 	return (
+ * 		<html lang="en">
+ * 			<body>{children}</body>
+ * 			<Script src={toolbarSrc} />
+ * 		</html>
+ * 	);
+ * }
+ * ```
+ *
+ * @param repositoryName - The name of the Prismic repository. For example,
+ *   `"my-repo"` if the repository URL is `my-repo.prismic.io`.
+ *
+ * @returns The URL for the given Prismic repository's Prismic Toolbar script.
+ */
+export const getToolbarSrc = <TRepositoryName extends string>(
+	repositoryName: TRepositoryName,
+): `https://static.cdn.prismic.io/prismic.js?new=true&repo=${TRepositoryName}` => {
+	if (isRepositoryName(repositoryName)) {
+		return `https://static.cdn.prismic.io/prismic.js?new=true&repo=${repositoryName}` as const;
+	} else {
+		throw new PrismicError(
+			`An invalid Prismic repository name was given: ${repositoryName}`,
+			undefined,
+			undefined,
+		);
+	}
+};
diff --git a/src/index.ts b/src/index.ts
@@ -21,6 +21,9 @@ export { isRepositoryName } from "./isRepositoryName";
 export { isRepositoryEndpoint } from "./isRepositoryEndpoint";
 export { buildQueryURL } from "./buildQueryURL";
 
+// Toolbar helpers.
+export { getToolbarSrc } from "./getToolbarSrc";
+
 // Query filters API.
 /**
  * @deprecated Renamed to `filter`

diff --git a/test/getToolbarSrc.test.ts b/test/getToolbarSrc.test.ts
@@ -0,0 +1,22 @@
+import { expect, it } from "vitest";
+
+import * as prismic from "../src";
+
+it("returns a URL for the Prismic Toolbar script", () => {
+	const endpoint = prismic.getToolbarSrc("qwerty");
+
+	expect(endpoint).toBe(
+		"https://static.cdn.prismic.io/prismic.js?new=true&repo=qwerty",
+	);
+});
+
+it("throws if an invalid repository name is given", () => {
+	expect(() => {
+		prismic.getToolbarSrc("this is invalid");
+	}).toThrowError(
+		/An invalid Prismic repository name was given: this is invalid/i,
+	);
+	expect(() => {
+		prismic.getToolbarSrc("this is invalid");
+	}).toThrowError(prismic.PrismicError);
+});