prismic 1.2.1 → 1.3.0

package/src/adapters/nextjs.templates.ts

@@ -1,3 +1,5 @@
+import type { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
 import { pascalCase } from "change-case";
 
 import { dedent } from "../lib/string";
@@ -56,6 +58,169 @@ export function sliceTemplate(args: { name: string; typescript: boolean }): stri
 	return typescript ? TS : JS;
 }
 
+export function pageTemplate(args: {
+	model: CustomType;
+	routePath: string;
+	typescript: boolean;
+	appRouter: boolean;
+}): string {
+	const { model, routePath, typescript, appRouter } = args;
+
+	if (appRouter) {
+		if (model.repeatable) {
+			if (typescript) {
+				return dedent`
+					import { SliceZone } from "@prismicio/react";
+					import { createClient } from "@/prismicio";
+					import { components } from "@/slices";
+
+					export default async function Page({ params }: PageProps<"/${routePath}">) {
+						const { uid } = await params;
+						const client = createClient();
+						const page = await client.getByUID("${model.id}", uid);
+
+						return <SliceZone slices={page.data.slices} components={components} />;
+					}
+				`;
+			}
+
+			return dedent`
+				import { SliceZone } from "@prismicio/react";
+				import { createClient } from "@/prismicio";
+				import { components } from "@/slices";
+
+				/**
+				 * @type {PageProps<"/${routePath}">}
+				 */
+				export default async function Page({ params }) {
+					const { uid } = await params;
+					const client = createClient();
+					const page = await client.getByUID("${model.id}", uid);
+
+					return <SliceZone slices={page.data.slices} components={components} />;
+				}
+			`;
+		}
+
+		return dedent`
+			import { SliceZone } from "@prismicio/react";
+			import { createClient } from "@/prismicio";
+			import { components } from "@/slices";
+
+			export default async function Page() {
+				const client = createClient();
+				const page = await client.getSingle("${model.id}");
+
+				return <SliceZone slices={page.data.slices} components={components} />;
+			}
+		`;
+	}
+
+	if (model.repeatable) {
+		if (typescript) {
+			return dedent`
+				import type { InferGetStaticPropsType, GetStaticPropsContext } from "next";
+				import { SliceZone } from "@prismicio/react";
+				import { createClient } from "@/prismicio";
+				import { components } from "@/slices";
+
+				type Params = { uid: string };
+
+				export async function getStaticProps({ params, previewData }: GetStaticPropsContext<Params>) {
+					const client = createClient({ previewData });
+					const page = await client.getByUID("${model.id}", params.uid);
+
+					return { props: { page } };
+				}
+
+				export default function Page({ page }: InferGetStaticPropsType<typeof getStaticProps>) {
+					return <SliceZone slices={page.data.slices} components={components} />;
+				}
+
+				export async function getStaticPaths() {
+					const client = createClient();
+					const pages = await client.getAllByType("${model.id}");
+
+					return {
+						paths: pages.map((page) => ({ params: { uid: page.uid } })),
+						fallback: false,
+					};
+				}
+			`;
+		}
+
+		return dedent`
+			import { SliceZone } from "@prismicio/react";
+			import { createClient } from "@/prismicio";
+			import { components } from "@/slices";
+
+			/**
+			 * @param {import("next").InferGetStaticPropsType<typeof getStaticProps>} props
+			 */
+			export default function Page({ page }) {
+				return <SliceZone slices={page.data.slices} components={components} />;
+			}
+
+			export async function getStaticProps({ params, previewData }) {
+				const client = createClient({ previewData });
+				const page = await client.getByUID("${model.id}", params.uid);
+
+				return { props: { page } };
+			}
+
+			export async function getStaticPaths() {
+				const client = createClient();
+				const pages = await client.getAllByType("${model.id}");
+
+				return {
+					paths: pages.map((page) => ({ params: { uid: page.uid } })),
+					fallback: false,
+				};
+			}
+		`;
+	}
+
+	if (typescript) {
+		return dedent`
+			import type { InferGetStaticPropsType, GetStaticPropsContext } from "next";
+			import { SliceZone } from "@prismicio/react";
+			import { createClient } from "@/prismicio";
+			import { components } from "@/slices";
+
+			export async function getStaticProps({ previewData }: GetStaticPropsContext) {
+				const client = createClient({ previewData });
+				const page = await client.getSingle("${model.id}");
+
+				return { props: { page } };
+			}
+
+			export default function Page({ page }: InferGetStaticPropsType<typeof getStaticProps>) {
+				return <SliceZone slices={page.data.slices} components={components} />;
+			}
+		`;
+	}
+
+	return dedent`
+		import { SliceZone } from "@prismicio/react";
+		import { createClient } from "@/prismicio";
+		import { components } from "@/slices";
+
+		/**
+		 * @param {import("next").InferGetStaticPropsType<typeof getStaticProps>} props
+		 */
+		export default function Page({ page }) {
+			return <SliceZone slices={page.data.slices} components={components} />;
+		}
+
+		export async function getStaticProps({ previewData }) {
+			const client = createClient({ previewData });
+			const page = await client.getSingle("${model.id}");
+
+			return { props: { page } };
+		}
+	`;
+}
+
 export function prismicIOFileTemplate(args: {
 	typescript: boolean;
 	appRouter: boolean;
@@ -73,7 +238,6 @@ export function prismicIOFileTemplate(args: {
 				import {
 					createClient as baseCreateClient,
 					type ClientConfig,
-					type Route,
 				} from "@prismicio/client";
 				import { enableAutoPreviews } from "@prismicio/next";
 				import prismicConfig from "${configImportPath}";
@@ -88,7 +252,7 @@ export function prismicIOFileTemplate(args: {
 				 */
 				export const createClient = (config: ClientConfig = {}) => {
 					const client = baseCreateClient(repositoryName, {
-						routes,
+						routes: prismicConfig.routes,
 						fetchOptions:
 							process.env.NODE_ENV === 'production'
 								? { next: { tags: ['prismic'] }, cache: 'force-cache' }
@@ -117,7 +281,7 @@ export function prismicIOFileTemplate(args: {
 				 */
 				export const createClient = (config = {}) => {
 					const client = baseCreateClient(repositoryName, {
-						routes,
+						routes: prismicConfig.routes,
 						fetchOptions:
 							process.env.NODE_ENV === 'production'
 								? { next: { tags: ['prismic'] }, cache: 'force-cache' }
@@ -134,7 +298,7 @@ export function prismicIOFileTemplate(args: {
 	} else {
 		if (typescript) {
 			importsContents = dedent`
-				import { createClient as baseCreateClient, type Routes } from "@prismicio/client";
+				import { createClient as baseCreateClient } from "@prismicio/client";
 				import { enableAutoPreviews, type CreateClientConfig } from "@prismicio/next/pages";
 				import prismicConfig from "${configImportPath}";
 			`;
@@ -148,7 +312,7 @@ export function prismicIOFileTemplate(args: {
 				 */
 				export const createClient = ({ previewData, req, ...config }: CreateClientConfig = {}) => {
 					const client = baseCreateClient(repositoryName, {
-						routes,
+						routes: prismicConfig.routes,
 						...config,
 					});
 
@@ -173,7 +337,7 @@ export function prismicIOFileTemplate(args: {
 				 */
 				export const createClient = ({ previewData, req, ...config } = {}) => {
 					const client = baseCreateClient(repositoryName, {
-						routes,
+						routes: prismicConfig.routes,
 						...config,
 					});
 
@@ -194,21 +358,6 @@ export function prismicIOFileTemplate(args: {
 			 */
 			export const repositoryName = prismicConfig.repositoryName;
 
-			/**
-			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
-			 *
-			 * {@link https://prismic.io/docs/route-resolver#route-resolver}
-			 *
-			 * Note: \`prismic sync\` may append new default routes for Page Types. Feel free
-			 * to edit these to match your site's routing structure.
-			 */
-			// TODO: Update the routes array to match your project's route structure.
-			const routes: Route[] = [
-				// Examples:
-				// { type: "homepage", path: "/" },
-				// { type: "page", path: "/:uid" },
-			];
-
 			${createClientContents}
 		`;
 	}
@@ -221,23 +370,6 @@ export function prismicIOFileTemplate(args: {
 		 */
 		export const repositoryName = prismicConfig.repositoryName;
 
-		/**
-		 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
-		 *
-		 * {@link https://prismic.io/docs/route-resolver#route-resolver}
-		 *
-		 * Note: \`prismic sync\` may append new default routes for Page Types. Feel free
-		 * to edit these to match your site's routing structure.
-		 *
-		 * @type {import("@prismicio/client").Route[]}
-		 */
-		// TODO: Update the routes array to match your project's route structure.
-		const routes = [
-			// Examples:
-			// { type: "homepage", path: "/" },
-			// { type: "page", path: "/:uid" },
-		];
-
 		${createClientContents}
 	`;
 }

package/src/adapters/nextjs.ts

@@ -1,4 +1,4 @@
-import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import type { CustomType, SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
 import { pascalCase } from "change-case";
 import { createRequire } from "node:module";
@@ -6,12 +6,14 @@ import { relative } from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { Adapter } from ".";
+import { buildRoutePath } from "../config";
 import { exists, writeFileRecursive } from "../lib/file";
 import { addDependencies, findPackageJson, getNpmPackageVersion } from "../lib/packageJson";
 import { dedent } from "../lib/string";
 import { appendTrailingSlash } from "../lib/url";
 import { checkIsTypeScriptProject, findProjectRoot } from "../project";
 import {
+	pageTemplate,
 	revalidateRouteTemplate,
 	exitPreviewRouteTemplate,
 	previewRouteTemplate,
@@ -23,7 +25,7 @@ import {
 export class NextJsAdapter extends Adapter {
 	readonly id = "next";
 
-	async onProjectInitialized(): Promise<void> {
+	async setupProject(): Promise<void> {
 		await addDependencies({
 			"@prismicio/client": `^${await getNpmPackageVersion("@prismicio/client")}`,
 			"@prismicio/react": `^${await getNpmPackageVersion("@prismicio/react")}`,
@@ -36,6 +38,8 @@ export class NextJsAdapter extends Adapter {
 		await createRevalidateRoute();
 	}
 
+	onProjectInitialized(): void {}
+
 	async onSliceCreated(model: SharedSlice, library: URL): Promise<void> {
 		const sliceDirectoryName = pascalCase(model.name);
 		const sliceDirectory = new URL(sliceDirectoryName, appendTrailingSlash(library));
@@ -53,7 +57,9 @@ export class NextJsAdapter extends Adapter {
 
 	onSliceDeleted(): void {}
 
-	onCustomTypeCreated(): void {}
+	async onCustomTypeCreated(model: CustomType): Promise<void> {
+		if (model.format === "page") await createPageFile(model);
+	}
 
 	onCustomTypeUpdated(): void {}
 
@@ -177,6 +183,30 @@ async function createPrismicIoFile(): Promise<void> {
 	await writeFileRecursive(filePath, contents);
 }
 
+async function createPageFile(model: CustomType): Promise<void> {
+	const routePath = buildRoutePath(model)
+		.split("/")
+		.filter(Boolean)
+		.map((segment) => (segment.startsWith(":") ? `[${segment.slice(1)}]` : segment))
+		.join("/");
+	const sourceRoot = await getSourceRoot();
+	const extension = `${await getJsFileExtension()}x`;
+	const usesAppRouter = await checkUsesAppRouter();
+	const pageFilePath = usesAppRouter
+		? new URL(`app/${routePath}/page.${extension}`, sourceRoot)
+		: new URL(`pages/${routePath || "index"}.${extension}`, sourceRoot);
+
+	if (await exists(pageFilePath)) return;
+
+	const contents = pageTemplate({
+		model,
+		routePath,
+		typescript: await checkIsTypeScriptProject(),
+		appRouter: usesAppRouter,
+	});
+	await writeFileRecursive(pageFilePath, contents);
+}
+
 async function checkUsesAppRouter() {
 	const sourceDirectory = await getSourceRoot();
 	const appDirectory = new URL("app/", sourceDirectory);

package/src/adapters/nuxt.templates.ts

@@ -1,3 +1,5 @@
+import type { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
 import { pascalCase } from "change-case";
 
 import { dedent } from "../lib/string";
@@ -52,6 +54,52 @@ export function sliceTemplate(args: { name: string; typescript: boolean }): stri
 	`;
 }
 
+export function pageTemplate(args: { model: CustomType; typescript: boolean }): string {
+	const { model, typescript } = args;
+
+	const scriptAttributes = ["setup"];
+	if (typescript) scriptAttributes.push('lang="ts"');
+
+	if (model.repeatable) {
+		const uidExpression = typescript ? "route.params.uid as string" : "route.params.uid";
+
+		return dedent`
+			<script ${scriptAttributes.join(" ")}>
+			import { components } from "~/slices";
+
+			const prismic = usePrismic();
+			const route = useRoute();
+			const { data: page } = await useAsyncData(${uidExpression}, () =>
+				prismic.client.getByUID("${model.id}", ${uidExpression}),
+			);
+			</script>
+
+			<template>
+				<main>
+					<SliceZone :slices="page?.data.slices ?? []" :components="components" />
+				</main>
+			</template>
+		`;
+	}
+
+	return dedent`
+		<script ${scriptAttributes.join(" ")}>
+		import { components } from "~/slices";
+
+		const prismic = usePrismic();
+		const { data: page } = await useAsyncData("${model.id}", () =>
+			prismic.client.getSingle("${model.id}"),
+		);
+		</script>
+
+		<template>
+			<main>
+				<SliceZone :slices="page?.data.slices ?? []" :components="components" />
+			</main>
+		</template>
+	`;
+}
+
 export function sliceSimulatorPageTemplate(args: { typescript: boolean }): string {
 	const { typescript } = args;
 

package/src/adapters/nuxt.ts

@@ -1,4 +1,4 @@
-import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import type { CustomType, SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
 import { pascalCase } from "change-case";
 import { builders, loadFile, writeFile as magicastWriteFile } from "magicast";
@@ -7,20 +7,20 @@ import { relative } from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { Adapter } from ".";
-import { readConfig, updateConfig } from "../config";
+import { buildRoutePath, readConfig, updateConfig } from "../config";
 import { exists, writeFileRecursive } from "../lib/file";
 import { addDependencies, getNpmPackageVersion } from "../lib/packageJson";
 import { dedent } from "../lib/string";
 import { appendTrailingSlash } from "../lib/url";
 import { checkIsTypeScriptProject, findProjectRoot } from "../project";
-import { sliceSimulatorPageTemplate, sliceTemplate } from "./nuxt.templates";
+import { pageTemplate, sliceSimulatorPageTemplate, sliceTemplate } from "./nuxt.templates";
 
 const NUXT_PRISMIC = "@nuxtjs/prismic";
 
 export class NuxtAdapter extends Adapter {
 	readonly id = "nuxt";
 
-	async onProjectInitialized(): Promise<void> {
+	async setupProject(): Promise<void> {
 		await addDependencies({
 			"@prismicio/client": `^${await getNpmPackageVersion("@prismicio/client")}`,
 			[NUXT_PRISMIC]: `^${await getNpmPackageVersion(NUXT_PRISMIC)}`,
@@ -31,6 +31,8 @@ export class NuxtAdapter extends Adapter {
 		await modifySliceLibraryPath(this);
 	}
 
+	onProjectInitialized(): void {}
+
 	async onSliceCreated(model: SharedSlice, library: URL): Promise<void> {
 		const sliceDirectoryName = pascalCase(model.name);
 		const sliceDirectory = new URL(sliceDirectoryName, appendTrailingSlash(library));
@@ -47,7 +49,9 @@ export class NuxtAdapter extends Adapter {
 
 	onSliceDeleted(): void {}
 
-	onCustomTypeCreated(): void {}
+	async onCustomTypeCreated(model: CustomType): Promise<void> {
+		if (model.format === "page") await createPageFile(model);
+	}
 
 	onCustomTypeUpdated(): void {}
 
@@ -132,35 +136,35 @@ async function configureNuxtModule(): Promise<void> {
 	if (!hasInlinedConfiguration) {
 		mod.imports.$prepend({
 			from: "./prismic.config.json",
-			imported: "repositoryName",
+			imported: "default",
+			local: "prismicConfig",
 		});
 
 		config.prismic ||= {};
-		config.prismic.endpoint = builders.raw("repositoryName");
+		config.prismic.endpoint = builders.raw("prismicConfig.repositoryName");
+		config.prismic.clientConfig ||= {};
+		config.prismic.clientConfig.routes = builders.raw("prismicConfig.routes");
 	}
 
 	await magicastWriteFile(mod, filepath);
 }
 
-async function createSliceSimulatorPage(): Promise<void> {
+async function getPagesDir(): Promise<URL> {
 	const projectRoot = await findProjectRoot();
-	const typescript = await checkIsTypeScriptProject();
 
-	// Check for existing pages directories in priority order
 	const appPagesDir = new URL("app/pages/", projectRoot);
 	const srcPagesDir = new URL("src/pages/", projectRoot);
 	const pagesDir = new URL("pages/", projectRoot);
 
-	let targetDir: URL;
-	if (await exists(appPagesDir)) {
-		targetDir = appPagesDir;
-	} else if (await exists(srcPagesDir)) {
-		targetDir = srcPagesDir;
-	} else if (await exists(pagesDir)) {
-		targetDir = pagesDir;
-	} else {
-		targetDir = new URL("pages/", await getSrcDir());
-	}
+	if (await exists(appPagesDir)) return appPagesDir;
+	if (await exists(srcPagesDir)) return srcPagesDir;
+	if (await exists(pagesDir)) return pagesDir;
+	return new URL("pages/", await getSrcDir());
+}
+
+async function createSliceSimulatorPage(): Promise<void> {
+	const typescript = await checkIsTypeScriptProject();
+	const targetDir = await getPagesDir();
 
 	const filePath = new URL("slice-simulator.vue", targetDir);
 
@@ -226,6 +230,24 @@ async function modifySliceLibraryPath(adapter: NuxtAdapter): Promise<void> {
 	await updateConfig({ libraries: [newLibrary] });
 }
 
+async function createPageFile(model: CustomType): Promise<void> {
+	const routePath = buildRoutePath(model)
+		.split("/")
+		.filter(Boolean)
+		.map((segment) => (segment.startsWith(":") ? `[${segment.slice(1)}]` : segment))
+		.join("/");
+	const pagesDir = await getPagesDir();
+	const pageFilePath = new URL(`${routePath || "index"}.vue`, pagesDir);
+
+	if (await exists(pageFilePath)) return;
+
+	const contents = pageTemplate({
+		model,
+		typescript: await checkIsTypeScriptProject(),
+	});
+	await writeFileRecursive(pageFilePath, contents);
+}
+
 async function getJsFileExtension(): Promise<string> {
 	const isTypeScriptProject = await checkIsTypeScriptProject();
 	return isTypeScriptProject ? "ts" : "js";