prismic 0.0.0-pr.28.59bf330

package/src/framework/nextjs.templates.ts

@@ -0,0 +1,426 @@
+import { pascalCase } from "change-case";
+
+import { dedent } from "../lib/string";
+
+const SLICE_MARKUP = dedent`
+return (
+	<section
+		data-slice-type={slice.slice_type}
+		data-slice-variation={slice.variation}
+	>
+		Placeholder component for {slice.slice_type} (variation: {slice.variation}) slices.
+		<br />
+		<strong>You can edit this slice directly in your code editor.</strong>
+	</section>
+)
+`;
+
+export function sliceTemplate(args: { name: string; typescript: boolean }): string {
+	const { name, typescript } = args;
+
+	const pascalName = pascalCase(name);
+
+	const TS = dedent`
+		import { FC } from "react";
+		import { Content } from "@prismicio/client";
+		import { SliceComponentProps } from "@prismicio/react";
+
+		/**
+		 * Props for \`${pascalName}\`.
+		 */
+		export type ${pascalName}Props = SliceComponentProps<Content.${pascalName}Slice>;
+
+		/**
+		 * Component for "${name}" Slices.
+		 */
+		const ${pascalName}: FC<${pascalName}Props> = ({ slice }) => {
+			${SLICE_MARKUP}
+		};
+
+		export default ${pascalName}
+	`;
+
+	const JS = dedent`
+		/**
+		 * @typedef {import("@prismicio/client").Content.${pascalName}Slice} ${pascalName}Slice
+		 * @typedef {import("@prismicio/react").SliceComponentProps<${pascalName}Slice>} ${pascalName}Props
+		 * @type {import("react").FC<${pascalName}Props>}
+		 */
+		const ${pascalName} = ({ slice }) => {
+			${SLICE_MARKUP}
+		};
+
+		export default ${pascalName};
+	`;
+
+	return typescript ? TS : JS;
+}
+
+export function prismicIOFileTemplate(args: {
+	typescript: boolean;
+	appRouter: boolean;
+	hasSrcDirectory: boolean;
+}): string {
+	const { typescript, appRouter, hasSrcDirectory } = args;
+	const configImportPath = `${hasSrcDirectory ? ".." : "."}/prismic.config.json`;
+
+	let importsContents: string;
+	let createClientContents: string;
+
+	if (appRouter) {
+		if (typescript) {
+			importsContents = dedent`
+				import {
+					createClient as baseCreateClient,
+					type ClientConfig,
+					type Route,
+				} from "@prismicio/client";
+				import { enableAutoPreviews } from "@prismicio/next";
+				import prismicConfig from "${configImportPath}";
+			`;
+
+			createClientContents = dedent`
+				/**
+				 * Creates a Prismic client for the project's repository. The client is used to
+				 * query content from the Prismic API.
+				 *
+				 * @param config - Configuration for the Prismic client.
+				 */
+				export const createClient = (config: ClientConfig = {}) => {
+					const client = baseCreateClient(repositoryName, {
+						routes,
+						fetchOptions:
+							process.env.NODE_ENV === 'production'
+								? { next: { tags: ['prismic'] }, cache: 'force-cache' }
+								: { next: { revalidate: 5 } },
+						...config,
+					});
+
+					enableAutoPreviews({ client });
+
+					return client;
+				};
+			`;
+		} else {
+			importsContents = dedent`
+				import { createClient as baseCreateClient } from "@prismicio/client";
+				import { enableAutoPreviews } from "@prismicio/next";
+				import prismicConfig from "${configImportPath}";
+			`;
+
+			createClientContents = dedent`
+				/**
+				 * Creates a Prismic client for the project's repository. The client is used to
+				 * query content from the Prismic API.
+				 *
+				 * @param {import("@prismicio/client").ClientConfig} config - Configuration for the Prismic client.
+				 */
+				export const createClient = (config = {}) => {
+					const client = baseCreateClient(repositoryName, {
+						routes,
+						fetchOptions:
+							process.env.NODE_ENV === 'production'
+								? { next: { tags: ['prismic'] }, cache: 'force-cache' }
+								: { next: { revalidate: 5 } },
+						...config,
+					});
+
+					enableAutoPreviews({ client });
+
+					return client;
+				};
+			`;
+		}
+	} else {
+		if (typescript) {
+			importsContents = dedent`
+				import { createClient as baseCreateClient, type Routes } from "@prismicio/client";
+				import { enableAutoPreviews, type CreateClientConfig } from "@prismicio/next/pages";
+				import prismicConfig from "${configImportPath}";
+			`;
+
+			createClientContents = dedent`
+				/**
+				 * Creates a Prismic client for the project's repository. The client is used to
+				 * query content from the Prismic API.
+				 *
+				 * @param config - Configuration for the Prismic client.
+				 */
+				export const createClient = ({ previewData, req, ...config }: CreateClientConfig = {}) => {
+					const client = baseCreateClient(repositoryName, {
+						routes,
+						...config,
+					});
+
+					enableAutoPreviews({ client, previewData, req });
+
+					return client;
+				};
+			`;
+		} else {
+			importsContents = dedent`
+				import { createClient as baseCreateClient } from "@prismicio/client";
+				import { enableAutoPreviews } from "@prismicio/next/pages";
+				import prismicConfig from "${configImportPath}";
+			`;
+
+			createClientContents = dedent`
+				/**
+				 * Creates a Prismic client for the project's repository. The client is used to
+				 * query content from the Prismic API.
+				 *
+				 * @param {import("@prismicio/next/pages").CreateClientConfig} config - Configuration for the Prismic client.
+				 */
+				export const createClient = ({ previewData, req, ...config } = {}) => {
+					const client = baseCreateClient(repositoryName, {
+						routes,
+						...config,
+					});
+
+					enableAutoPreviews({ client, previewData, req });
+
+					return client;
+				};
+			`;
+		}
+	}
+
+	if (typescript) {
+		return dedent`
+			${importsContents}
+
+			/**
+			 * The project's Prismic repository name.
+			 */
+			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}
+		`;
+	}
+
+	return dedent`
+		${importsContents}
+
+		/**
+		 * The project's Prismic repository name.
+		 */
+		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}
+	`;
+}
+
+export function sliceSimulatorPageTemplate(args: {
+	typescript: boolean;
+	appRouter: boolean;
+}): string {
+	const { typescript, appRouter } = args;
+
+	if (appRouter) {
+		if (typescript) {
+			return dedent`
+				import {
+					SliceSimulator,
+					SliceSimulatorParams,
+					getSlices,
+				} from "@prismicio/next";
+				import { SliceZone } from "@prismicio/react";
+
+				import { components } from "../../slices";
+
+				export default async function SliceSimulatorPage({
+					searchParams,
+				}: SliceSimulatorParams) {
+					const { state } = await searchParams
+					const slices = getSlices(state);
+
+					return (
+						<SliceSimulator>
+							<SliceZone slices={slices} components={components} />
+						</SliceSimulator>
+					);
+				}
+			`;
+		}
+
+		return dedent`
+			import { SliceSimulator, getSlices } from "@prismicio/next";
+			import { SliceZone } from "@prismicio/react";
+
+			import { components } from "../../slices";
+
+			export default async function SliceSimulatorPage({ searchParams }) {
+				const { state } = await searchParams
+				const slices = getSlices(state);
+
+				return (
+					<SliceSimulator>
+						<SliceZone slices={slices} components={components} />
+					</SliceSimulator>
+				);
+			}
+		`;
+	}
+
+	return dedent`
+		import { SliceSimulator } from "@prismicio/next/pages";
+		import { SliceZone } from "@prismicio/react";
+
+		import { components } from "../slices";
+
+		export default function SliceSimulatorPage() {
+			return (
+				<SliceSimulator
+					sliceZone={(props) => <SliceZone {...props} components={components} />}
+				/>
+			);
+		}
+	`;
+}
+
+export function previewRouteTemplate(args: { typescript: boolean; appRouter: boolean }): string {
+	const { typescript, appRouter } = args;
+
+	if (appRouter) {
+		if (typescript) {
+			return dedent`
+				import { NextRequest } from "next/server";
+				import { redirectToPreviewURL } from "@prismicio/next";
+
+				import { createClient } from "../../../prismicio";
+
+				export async function GET(request: NextRequest) {
+					const client = createClient();
+
+					return await redirectToPreviewURL({ client, request });
+				}
+			`;
+		}
+
+		return dedent`
+			import { redirectToPreviewURL } from "@prismicio/next";
+
+			import { createClient } from "../../../prismicio";
+
+			export async function GET(request) {
+				const client = createClient();
+
+				return await redirectToPreviewURL({ client, request });
+			}
+		`;
+	}
+
+	if (typescript) {
+		return dedent`
+			import { NextApiRequest, NextApiResponse } from "next";
+			import { setPreviewData, redirectToPreviewURL } from "@prismicio/next/pages";
+
+			import { createClient } from "../../prismicio";
+
+			export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+				const client = createClient({ req });
+
+				setPreviewData({ req, res });
+
+				return await redirectToPreviewURL({ req, res, client });
+			};
+		`;
+	}
+
+	return dedent`
+		import { setPreviewData, redirectToPreviewURL } from "@prismicio/next/pages";
+
+		import { createClient } from "../../prismicio";
+
+		export default async function handler(req, res) {
+			const client = createClient({ req });
+
+			setPreviewData({ req, res });
+
+			return await redirectToPreviewURL({ req, res, client });
+		};
+	`;
+}
+
+export function exitPreviewRouteTemplate(args: {
+	typescript: boolean;
+	appRouter: boolean;
+}): string {
+	const { typescript, appRouter } = args;
+
+	if (appRouter) {
+		return dedent`
+			import { exitPreview } from "@prismicio/next";
+
+			export function GET() {
+				return exitPreview();
+			}
+		`;
+	}
+
+	if (typescript) {
+		return dedent`
+			import { NextApiRequest, NextApiResponse } from "next";
+			import { exitPreview } from "@prismicio/next/pages";
+
+			export default function handler(req: NextApiRequest, res: NextApiResponse) {
+				return exitPreview({ req, res });
+			}
+		`;
+	}
+
+	return dedent`
+		import { exitPreview } from "@prismicio/next/pages";
+
+		export default function handler(req, res) {
+			return exitPreview({ req, res });
+		}
+	`;
+}
+
+export function revalidateRouteTemplate(args: { supportsCacheLife: boolean }): string {
+	const { supportsCacheLife } = args;
+
+	return dedent`
+		import { NextResponse } from "next/server";
+		import { revalidateTag } from "next/cache";
+
+		export async function POST() {
+			revalidateTag("prismic"${supportsCacheLife ? ', "max"' : ""});
+
+			return NextResponse.json({ revalidated: true, now: Date.now() });
+		}
+	`;
+}

package/src/framework/nextjs.ts

@@ -0,0 +1,216 @@
+import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+
+import { mkdir, writeFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+
+import type { Framework } from ".";
+
+import { FrameworkAdapter } from ".";
+import { exists } from "../lib/file";
+import {
+	exitPreviewRouteTemplate,
+	previewRouteTemplate,
+	prismicIOFileTemplate,
+	revalidateRouteTemplate,
+	sliceSimulatorPageTemplate,
+	sliceTemplate,
+} from "./nextjs.templates";
+import { getNpmPackageVersion } from "../lib/packageJson";
+
+export class NextJsFramework extends FrameworkAdapter {
+	readonly id: Framework = "next";
+
+	async getDependencies(): Promise<Record<string, string>> {
+		return {
+			"@prismicio/client": `^${await getNpmPackageVersion("@prismicio/client")}`,
+			"@prismicio/react": `^${await getNpmPackageVersion("@prismicio/react")}`,
+			"@prismicio/next": `^${await getNpmPackageVersion("@prismicio/next")}`,
+		};
+	}
+
+	async initProject(): Promise<void> {
+		await super.initProject();
+
+		await this.#createPrismicIOFile();
+		await this.#createSliceSimulatorPage();
+		await this.#createPreviewRoute();
+		await this.#createExitPreviewRoute();
+		await this.#createRevalidateRoute();
+	}
+
+	async createSliceComponent(
+		model: SharedSlice,
+		sliceDirectory: URL,
+	): Promise<{ componentPath: URL }> {
+		const extension = await this.getJsFileExtension();
+		const componentPath = new URL(`index.${extension}x`, sliceDirectory);
+		const contents = sliceTemplate({
+			name: model.name,
+			typescript: await this.checkIsTypeScriptProject(),
+		});
+		await writeFile(componentPath, contents);
+		return { componentPath };
+	}
+
+	getSliceImportPath(relativeDirectory: string): string {
+		return `./${relativeDirectory}`;
+	}
+
+	async getDefaultSliceLibraryPath(projectRoot: URL): Promise<URL> {
+		const srcDirectory = new URL("src/", projectRoot);
+		const hasSrcDirectory = await exists(srcDirectory);
+		const sourceFilesRoot = hasSrcDirectory ? srcDirectory : projectRoot;
+		return new URL("slices/", sourceFilesRoot);
+	}
+
+	async getClientFilePath(): Promise<string | null> {
+		const hasSrcDirectory = await this.#checkHasSrcDirectory();
+		return hasSrcDirectory ? "src/prismicio.ts" : "prismicio.ts";
+	}
+
+	async getSlicesDirectoryPath(): Promise<string> {
+		const hasSrcDirectory = await this.#checkHasSrcDirectory();
+		return hasSrcDirectory ? "src/slices/" : "slices/";
+	}
+
+	getSliceComponentExtensions(): string[] {
+		return [".tsx", ".ts", ".jsx", ".js"];
+	}
+
+	async getRoutePath(route: string): Promise<{ path: string; extensions: string[] } | null> {
+		const hasSrcDirectory = await this.#checkHasSrcDirectory();
+		const base = hasSrcDirectory ? "src/app" : "app";
+		switch (route) {
+			case "/slice-simulator":
+				return { path: `${base}/slice-simulator/page`, extensions: [".tsx", ".ts", ".jsx", ".js"] };
+			case "/api/preview":
+				return { path: `${base}/api/preview/route`, extensions: [".ts", ".js"] };
+			case "/api/exit-preview":
+				return { path: `${base}/api/exit-preview/route`, extensions: [".ts", ".js"] };
+			case "/api/revalidate":
+				return { path: `${base}/api/revalidate/route`, extensions: [".ts", ".js"] };
+			default:
+				return null;
+		}
+	}
+
+	async #checkHasAppRouter(): Promise<boolean> {
+		const appPath = await this.#buildSrcPath("app");
+		return await exists(appPath);
+	}
+
+	async #checkHasSrcDirectory(): Promise<boolean> {
+		const projectRoot = await this.getProjectRoot();
+		return await exists(new URL("src/", projectRoot));
+	}
+
+	async #getNextJSVersion(): Promise<string> {
+		const projectRoot = await this.getProjectRoot();
+		const require = createRequire(new URL("package.json", projectRoot));
+		const { version } = require("next/package.json");
+		return version;
+	}
+
+	async #buildSrcPath(filename: string): Promise<URL> {
+		const projectRoot = await this.getProjectRoot();
+		const hasSrcDirectory = await this.#checkHasSrcDirectory();
+		const prefix = hasSrcDirectory ? "src/" : "";
+		return new URL(`${prefix}${filename}`, projectRoot);
+	}
+
+	async #createPrismicIOFile(): Promise<void> {
+		const extension = await this.getJsFileExtension();
+		const filePath = await this.#buildSrcPath(`prismicio.${extension}`);
+
+		if (await exists(filePath)) {
+			return;
+		}
+
+		const typescript = await this.checkIsTypeScriptProject();
+		const appRouter = await this.#checkHasAppRouter();
+		const hasSrcDirectory = await this.#checkHasSrcDirectory();
+
+		const contents = prismicIOFileTemplate({
+			typescript,
+			appRouter,
+			hasSrcDirectory,
+		});
+		await writeFile(filePath, contents);
+	}
+
+	async #createSliceSimulatorPage(): Promise<void> {
+		const appRouter = await this.#checkHasAppRouter();
+		const typescript = await this.checkIsTypeScriptProject();
+		const extension = `${await this.getJsFileExtension()}x`;
+		const filename = appRouter
+			? `app/slice-simulator/page.${extension}`
+			: `pages/slice-simulator.${extension}`;
+		const filePath = await this.#buildSrcPath(filename);
+
+		if (await exists(filePath)) {
+			return;
+		}
+
+		const contents = sliceSimulatorPageTemplate({ typescript, appRouter });
+		await mkdir(new URL(".", filePath), { recursive: true });
+		await writeFile(filePath, contents);
+	}
+
+	async #createPreviewRoute(): Promise<void> {
+		const appRouter = await this.#checkHasAppRouter();
+		const typescript = await this.checkIsTypeScriptProject();
+		const extension = await this.getJsFileExtension();
+		const filename = appRouter
+			? `app/api/preview/route.${extension}`
+			: `pages/api/preview.${extension}`;
+		const filePath = await this.#buildSrcPath(filename);
+
+		if (await exists(filePath)) {
+			return;
+		}
+
+		const contents = previewRouteTemplate({ typescript, appRouter });
+		await mkdir(new URL(".", filePath), { recursive: true });
+		await writeFile(filePath, contents);
+	}
+
+	async #createExitPreviewRoute(): Promise<void> {
+		const appRouter = await this.#checkHasAppRouter();
+		const typescript = await this.checkIsTypeScriptProject();
+		const extension = await this.getJsFileExtension();
+		const filename = appRouter
+			? `app/api/exit-preview/route.${extension}`
+			: `pages/api/exit-preview.${extension}`;
+		const filePath = await this.#buildSrcPath(filename);
+
+		if (await exists(filePath)) {
+			return;
+		}
+
+		const contents = exitPreviewRouteTemplate({ typescript, appRouter });
+		await mkdir(new URL(".", filePath), { recursive: true });
+		await writeFile(filePath, contents);
+	}
+
+	async #createRevalidateRoute(): Promise<void> {
+		const appRouter = await this.#checkHasAppRouter();
+		if (!appRouter) {
+			return;
+		}
+
+		const extension = await this.getJsFileExtension();
+		const filePath = await this.#buildSrcPath(`app/api/revalidate/route.${extension}`);
+
+		if (await exists(filePath)) {
+			return;
+		}
+
+		const version = await this.#getNextJSVersion();
+		const major = Number.parseInt(version.split(".")[0]);
+		const supportsCacheLife = major >= 16;
+
+		const contents = revalidateRouteTemplate({ supportsCacheLife });
+		await mkdir(new URL(".", filePath), { recursive: true });
+		await writeFile(filePath, contents);
+	}
+}

package/src/framework/nuxt.templates.ts

@@ -0,0 +1,74 @@
+import { pascalCase } from "change-case";
+
+import { dedent } from "../lib/string";
+
+export function sliceTemplate(args: { name: string; typescript: boolean }): string {
+	const { name, typescript } = args;
+
+	const pascalName = pascalCase(name);
+
+	if (typescript) {
+		return dedent`
+			<script setup lang="ts">
+			import type { Content } from "@prismicio/client";
+
+			// The array passed to \`getSliceComponentProps\` is purely optional.
+			// Consider it as a visual hint for you when templating your slice.
+			defineProps(getSliceComponentProps<Content.${pascalName}Slice>(
+				["slice", "index", "slices", "context"]
+			));
+			</script>
+
+			<template>
+				<section
+					:data-slice-type="slice.slice_type"
+					:data-slice-variation="slice.variation"
+				>
+					Placeholder component for {{ slice.slice_type }} (variation: {{ slice.variation }}) slices.
+					<br />
+					<strong>You can edit this slice directly in your code editor.</strong>
+				</section>
+			</template>
+		`;
+	}
+
+	return dedent`
+		<script setup>
+		// The array passed to \`getSliceComponentProps\` is purely optional.
+		// Consider it as a visual hint for you when templating your slice.
+		defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
+		</script>
+
+		<template>
+			<section
+				:data-slice-type="slice.slice_type"
+				:data-slice-variation="slice.variation"
+			>
+				Placeholder component for {{ slice.slice_type }} (variation: {{ slice.variation }}) slices.
+				<br />
+				<strong>You can edit this slice directly in your code editor.</strong>
+			</section>
+		</template>
+	`;
+}
+
+export function sliceSimulatorPageTemplate(args: { typescript: boolean }): string {
+	const { typescript } = args;
+
+	const scriptAttributes = ["setup"];
+	if (typescript) {
+		scriptAttributes.push('lang="ts"');
+	}
+
+	return dedent`
+		<script ${scriptAttributes.join(" ")}>
+		import { components } from "~/slices";
+		</script>
+
+		<template>
+			<SliceSimulator #default="{ slices }">
+				<SliceZone :slices="slices" :components="components" />
+			</SliceSimulator>
+		</template>
+	`;
+}