@slicemachine/adapter-next 0.3.2-dev-next-release.5 → 0.3.2-dev-next-release.7

package/src/hooks/project-init.ts

@@ -5,14 +5,16 @@ import type {
 	ProjectInitHookData,
 	SliceMachineContext,
 } from "@slicemachine/plugin-kit";
-import { stripIndent } from "common-tags";
+import { source } from "common-tags";
 
+import { checkHasAppRouter } from "../lib/checkHasAppRouter";
+import { checkHasSrcDirectory } from "../lib/checkHasSrcDirectory";
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
 import { checkPathExists } from "../lib/checkPathExists";
-import { getJSOrTSXFileExtension } from "../lib/getJSOrTSXFileExtension";
+import { getJSFileExtension } from "../lib/getJSFileExtension";
 import { rejectIfNecessary } from "../lib/rejectIfNecessary";
 
 import type { PluginOptions } from "../types";
-import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
 
 type InstallDependenciesArgs = {
 	installDependencies: ProjectInitHookData["installDependencies"];
@@ -40,22 +42,134 @@ const createPrismicIOFile = async ({
 		helpers,
 		options,
 	});
+	const hasSrcDirectory = await checkHasSrcDirectory({ helpers });
+	const hasAppRouter = await checkHasAppRouter({ helpers });
 
-	const filePath = helpers.joinPathFromRoot(
-		isTypeScriptProject ? "prismicio.ts" : "prismicio.js",
-	);
+	const extension = await getJSFileExtension({ helpers, options });
+	const filename = `prismicio.${extension}`;
+	const filePath = hasSrcDirectory
+		? helpers.joinPathFromRoot("src", filename)
+		: helpers.joinPathFromRoot(filename);
 
 	if (await checkPathExists(filePath)) {
 		return;
 	}
 
+	let createClientContents: string;
+
+	if (hasAppRouter) {
+		if (isTypeScriptProject) {
+			createClientContents = source`
+				/**
+				 * 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: prismicNext.CreateClientConfig = {}) => {
+					const client = prismic.createClient(repositoryName, {
+						routes,
+						fetchOptions:
+							process.env.NODE_ENV === 'production'
+								? { next: { tags: ['prismic'] }, cache: 'force-cache' }
+								: { next: { revalidate: 5 } },
+						...config,
+					});
+
+					prismicNext.enableAutoPreviews({
+						client,
+						previewData: config.previewData,
+						req: config.req,
+					});
+
+					return client;
+				};
+			`;
+		} else {
+			createClientContents = source`
+				/**
+				 * Creates a Prismic client for the project's repository. The client is used to
+				 * query content from the Prismic API.
+				 *
+				 * @param {prismicNext.CreateClientConfig} config - Configuration for the Prismic client.
+				 */
+				export const createClient = (config = {}) => {
+					const client = prismic.createClient(repositoryName, {
+						routes,
+						fetchOptions:
+							process.env.NODE_ENV === 'production'
+								? { next: { tags: ['prismic'] }, cache: 'force-cache' }
+								: { next: { revalidate: 5 } },
+						...config,
+					});
+
+					prismicNext.enableAutoPreviews({
+						client,
+						previewData: config.previewData,
+						req: config.req,
+					});
+
+					return client;
+				};
+			`;
+		}
+	} else {
+		if (isTypeScriptProject) {
+			createClientContents = source`
+				/**
+				 * 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: prismicNext.CreateClientConfig = {}) => {
+					const client = prismic.createClient(repositoryName, {
+						routes,
+						...config,
+					});
+
+					prismicNext.enableAutoPreviews({
+						client,
+						previewData: config.previewData,
+						req: config.req,
+					});
+
+					return client;
+				};
+			`;
+		} else {
+			createClientContents = source`
+				/**
+				 * Creates a Prismic client for the project's repository. The client is used to
+				 * query content from the Prismic API.
+				 *
+				 * @param {prismicNext.CreateClientConfig} config - Configuration for the Prismic client.
+				 */
+				export const createClient = (config = {}) => {
+					const client = prismic.createClient(repositoryName, {
+						routes,
+						...config,
+					});
+
+					prismicNext.enableAutoPreviews({
+						client,
+						previewData: config.previewData,
+						req: config.req,
+					});
+
+					return client;
+				};
+			`;
+		}
+	}
+
 	let contents: string;
 
 	if (isTypeScriptProject) {
-		contents = stripIndent`
+		contents = source`
 			import * as prismic from "@prismicio/client";
 			import * as prismicNext from "@prismicio/next";
-			import config from "./slicemachine.config.json";
+			import config from "${hasSrcDirectory ? ".." : "."}/slicemachine.config.json";
 
 			/**
 			 * The project's Prismic repository name.
@@ -63,8 +177,7 @@ const createPrismicIOFile = async ({
 			export const repositoryName = config.repositoryName;
 
 			/**
-			 * A list of Route Resolver objects that define how a document's \`url\` field
-			 * is resolved.
+			 * 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}
 			 */
@@ -80,32 +193,13 @@ const createPrismicIOFile = async ({
 				},
 			];
 
-			/**
-			 * 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: prismicNext.CreateClientConfig = {}) => {
-				const client = prismic.createClient(repositoryName, {
-					routes,
-					...config,
-				});
-
-				prismicNext.enableAutoPreviews({
-					client,
-					previewData: config.previewData,
-					req: config.req,
-				});
-
-				return client;
-			};
+			${createClientContents}
 		`;
 	} else {
-		contents = stripIndent`
+		contents = source`
 			import * as prismic from "@prismicio/client";
 			import * as prismicNext from "@prismicio/next";
-			import config from "./slicemachine.config.json";
+			import config from "${hasSrcDirectory ? ".." : "."}/slicemachine.config.json";
 
 			/**
 			 * The project's Prismic repository name.
@@ -113,8 +207,7 @@ const createPrismicIOFile = async ({
 			export const repositoryName = config.repositoryName;
 
 			/**
-			 * A list of Route Resolver objects that define how a document's \`url\` field
-			 * is resolved.
+			 * 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}
 			 *
@@ -132,26 +225,7 @@ const createPrismicIOFile = async ({
 				},
 			];
 
-			/**
-			 * Creates a Prismic client for the project's repository. The client is used to
-			 * query content from the Prismic API.
-			 *
-			 * @param {prismicNext.CreateClientConfig} config - Configuration for the Prismic client.
-			 */
-			export const createClient = (config = {}) => {
-				const client = prismic.createClient(repositoryName, {
-					routes,
-					...config,
-				});
-
-				prismicNext.enableAutoPreviews({
-					client,
-					previewData: config.previewData,
-					req: config.req,
-				});
-
-				return client;
-			};
+			${createClientContents}
 		`;
 	}
 
@@ -168,13 +242,19 @@ const createSliceSimulatorPage = async ({
 	helpers,
 	options,
 }: CreateSliceSimulatorPageArgs) => {
-	const srcDirectoryExists = await checkPathExists(
-		helpers.joinPathFromRoot("src"),
-	);
+	const hasSrcDirectory = await checkHasSrcDirectory({ helpers });
+	const hasAppRouter = await checkHasAppRouter({ helpers });
 
+	const extension = await getJSFileExtension({ helpers, options, jsx: true });
 	const filePath = helpers.joinPathFromRoot(
-		srcDirectoryExists ? "src/pages" : "pages",
-		`slice-simulator.${await getJSOrTSXFileExtension({ helpers, options })}`,
+		...[
+			hasSrcDirectory ? "src" : undefined,
+			hasAppRouter
+				? `app/slice-simulator/page.${extension}`
+				: `pages/slice-simulator.${extension}`,
+		].filter((segment): segment is NonNullable<typeof segment> =>
+			Boolean(segment),
+		),
 	);
 
 	if (await checkPathExists(filePath)) {
@@ -183,11 +263,11 @@ const createSliceSimulatorPage = async ({
 
 	await fs.mkdir(path.dirname(filePath), { recursive: true });
 
-	let contents = stripIndent`
+	let contents = source`
 		import { SliceSimulator } from "@slicemachine/adapter-next/simulator";
 		import { SliceZone } from "@prismicio/react";
 
-		import { components } from "../slices";
+		import { components } from "${hasAppRouter ? "../.." : ".."}/slices";
 
 		export default function SliceSimulatorPage() {
 			return (
@@ -205,15 +285,283 @@ const createSliceSimulatorPage = async ({
 	await fs.writeFile(filePath, contents);
 };
 
+const createPreviewRoute = async ({
+	helpers,
+	options,
+}: SliceMachineContext<PluginOptions>) => {
+	const hasSrcDirectory = await checkHasSrcDirectory({ helpers });
+	const hasAppRouter = await checkHasAppRouter({ helpers });
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+
+	const extension = await getJSFileExtension({ helpers, options });
+	const filePath = helpers.joinPathFromRoot(
+		...[
+			hasSrcDirectory ? "src" : undefined,
+			hasAppRouter
+				? `app/api/preview/route.${extension}`
+				: `pages/api/preview.${extension}`,
+		].filter((segment): segment is NonNullable<typeof segment> =>
+			Boolean(segment),
+		),
+	);
+
+	if (await checkPathExists(filePath)) {
+		return;
+	}
+
+	let contents: string;
+
+	if (hasAppRouter) {
+		if (isTypeScriptProject) {
+			contents = source`
+				import { NextRequest } from "next/server";
+				import { draftMode } from "next/headers";
+				import { redirectToPreviewURL } from "@prismicio/next";
+
+				import { createClient } from "../../../prismicio";
+
+				export async function GET(request: NextRequest) {
+					const client = createClient();
+
+					draftMode().enable();
+
+					await redirectToPreviewURL({ client, request });
+				}
+			`;
+		} else {
+			contents = source`
+				import { draftMode } from "next/headers";
+				import { redirectToPreviewURL } from "@prismicio/next";
+
+				import { createClient } from "../../../prismicio";
+
+				export async function GET(request) {
+					const client = createClient();
+
+					draftMode().enable();
+
+					await redirectToPreviewURL({ client, request });
+				}
+			`;
+		}
+	} else {
+		if (isTypeScriptProject) {
+			contents = source`
+				import { NextApiRequest, NextApiResponse } from "next";
+				import { setPreviewData, redirectToPreviewURL } from "@prismicio/next";
+
+				import { createClient } from "../../prismicio";
+
+				export default async (req: NextApiRequest, res: NextApiResponse) => {
+					const client = createClient({ req });
+
+					await setPreviewData({ req, res });
+
+					await redirectToPreviewURL({ req, res, client });
+				};
+			`;
+		} else {
+			contents = source`
+				import { setPreviewData, redirectToPreviewURL } from "@prismicio/next";
+
+				import { createClient } from "../../prismicio";
+
+				export default async (req, res) => {
+					const client = createClient({ req });
+
+					await setPreviewData({ req, res });
+
+					await redirectToPreviewURL({ req, res, client });
+				};
+			`;
+		}
+	}
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath);
+	}
+
+	await fs.mkdir(path.dirname(filePath), { recursive: true });
+	await fs.writeFile(filePath, contents);
+};
+
+const createExitPreviewRoute = async ({
+	helpers,
+	options,
+}: SliceMachineContext<PluginOptions>) => {
+	const hasSrcDirectory = await checkHasSrcDirectory({ helpers });
+	const hasAppRouter = await checkHasAppRouter({ helpers });
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+
+	const extension = await getJSFileExtension({ helpers, options });
+	const filePath = helpers.joinPathFromRoot(
+		...[
+			hasSrcDirectory ? "src" : undefined,
+			hasAppRouter
+				? `app/api/exit-preview/route.${extension}`
+				: `pages/api/exit-preview.${extension}`,
+		].filter((segment): segment is NonNullable<typeof segment> =>
+			Boolean(segment),
+		),
+	);
+
+	if (await checkPathExists(filePath)) {
+		return;
+	}
+
+	let contents: string;
+
+	if (hasAppRouter) {
+		contents = `
+			import { exitPreview } from "@prismicio/next";
+
+			export async function GET() {
+				return await exitPreview();
+			}
+		`;
+	} else {
+		if (isTypeScriptProject) {
+			contents = source`
+				import { NextApiRequest, NextApiResponse } from "next";
+				import { exitPreview } from "@prismicio/next";
+
+				export async function handler(req: NextApiRequest, res: NextApiResponse) {
+					return await exitPreview({ req, res });
+				}
+			`;
+		} else {
+			contents = source`
+				import { exitPreview } from "@prismicio/next";
+
+				export async function handler(req, res) {
+					return await exitPreview({ req, res });
+				}
+			`;
+		}
+	}
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath);
+	}
+
+	await fs.mkdir(path.dirname(filePath), { recursive: true });
+	await fs.writeFile(filePath, contents);
+};
+
+const modifySliceMachineConfig = async ({
+	helpers,
+	options,
+}: SliceMachineContext<PluginOptions>) => {
+	const hasSrcDirectory = await checkHasSrcDirectory({ helpers });
+	const project = await helpers.getProject();
+
+	// Add Slice Simulator URL.
+	project.config.localSliceSimulatorURL ||=
+		"http://localhost:3000/slice-simulator";
+
+	// Nest the default Slice Library in the src directory if it exists and
+	// is empty.
+	if (
+		hasSrcDirectory &&
+		JSON.stringify(project.config.libraries) === JSON.stringify(["./slices"])
+	) {
+		try {
+			const entries = await fs.readdir(helpers.joinPathFromRoot("slices"));
+
+			if (!entries.map((entry) => path.parse(entry).name).includes("index")) {
+				project.config.libraries = ["./src/slices"];
+			}
+		} catch (error) {
+			if (
+				error instanceof Error &&
+				"code" in error &&
+				error.code === "ENOENT"
+			) {
+				// The directory does not exist, which means we
+				// can safely nest the library.
+				project.config.libraries = ["./src/slices"];
+			}
+		}
+	}
+
+	const filePath = helpers.joinPathFromRoot("slicemachine.config.json");
+
+	let contents = JSON.stringify(project.config);
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath);
+	}
+
+	await fs.writeFile(
+		helpers.joinPathFromRoot("slicemachine.config.json"),
+		contents,
+	);
+};
+
+const createRevalidateRoute = async ({
+	helpers,
+	options,
+}: SliceMachineContext<PluginOptions>) => {
+	const hasAppRouter = await checkHasAppRouter({ helpers });
+
+	if (!hasAppRouter) {
+		return;
+	}
+
+	const hasSrcDirectory = await checkHasSrcDirectory({ helpers });
+
+	const extension = await getJSFileExtension({ helpers, options });
+	const filePath = helpers.joinPathFromRoot(
+		...[
+			hasSrcDirectory ? "src" : undefined,
+			`app/api/revalidate/route.${extension}`,
+		].filter((segment): segment is NonNullable<typeof segment> =>
+			Boolean(segment),
+		),
+	);
+
+	if (await checkPathExists(filePath)) {
+		return;
+	}
+
+	let contents = source`
+		import { NextResponse } from "next/server";
+		import { revalidateTag } from "next/cache";
+
+		export async function POST() {
+			revalidateTag("prismic");
+
+			return NextResponse.json({ revalidated: true, now: Date.now() });
+		}
+	`;
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath);
+	}
+
+	await fs.mkdir(path.dirname(filePath), { recursive: true });
+	await fs.writeFile(filePath, contents);
+};
+
 export const projectInit: ProjectInitHook<PluginOptions> = async (
 	{ installDependencies: _installDependencies },
 	context,
 ) => {
 	rejectIfNecessary(
 		await Promise.allSettled([
-			await installDependencies({ installDependencies: _installDependencies }),
-			await createPrismicIOFile(context),
-			await createSliceSimulatorPage(context),
+			installDependencies({ installDependencies: _installDependencies }),
+			modifySliceMachineConfig(context),
+			createPrismicIOFile(context),
+			createSliceSimulatorPage(context),
+			createPreviewRoute(context),
+			createExitPreviewRoute(context),
+			createRevalidateRoute(context),
 		]),
 	);
 };

package/src/hooks/slice-create.ts

@@ -9,7 +9,7 @@ import * as path from "node:path";
 
 import { buildSliceDirectoryPath } from "../lib/buildSliceDirectoryPath";
 import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
-import { getJSOrTSXFileExtension } from "../lib/getJSOrTSXFileExtension";
+import { getJSFileExtension } from "../lib/getJSFileExtension";
 import { pascalCase } from "../lib/pascalCase";
 import { rejectIfNecessary } from "../lib/rejectIfNecessary";
 import { updateSliceModelFile } from "../lib/updateSliceModelFile";
@@ -24,10 +24,8 @@ type Args = {
 } & SliceMachineContext<PluginOptions>;
 
 const createComponentFile = async ({ dir, data, helpers, options }: Args) => {
-	const filePath = path.join(
-		dir,
-		`index.${await getJSOrTSXFileExtension({ helpers, options })}`,
-	);
+	const extension = await getJSFileExtension({ helpers, options, jsx: true });
+	const filePath = path.join(dir, `index.${extension}`);
 	const model = data.model;
 	const pascalName = pascalCase(model.name);
 

package/src/hooks/sliceSimulator-setup-read.ts

@@ -7,7 +7,7 @@ import { source } from "common-tags";
 import { createRequire } from "node:module";
 import fetch, { Response } from "node-fetch";
 
-import { getJSOrTSXFileExtension } from "../lib/getJSOrTSXFileExtension";
+import { getJSFileExtension } from "../lib/getJSFileExtension";
 
 import type { PluginOptions } from "../types";
 
@@ -79,10 +79,8 @@ const createStep2 = async ({
 	helpers,
 	options,
 }: Args): Promise<SliceSimulatorSetupStep> => {
-	const fileName = `slice-simulator.${await getJSOrTSXFileExtension({
-		helpers,
-		options,
-	})}`;
+	const extension = await getJSFileExtension({ helpers, options, jsx: true });
+	const fileName = `slice-simulator.${extension}`;
 	const filePath = helpers.joinPathFromRoot("pages", fileName);
 
 	const fileContents = await helpers.format(

package/src/lib/checkHasAppRouter.ts

@@ -0,0 +1,22 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+
+import { PluginOptions } from "../types";
+import { checkHasSrcDirectory } from "./checkHasSrcDirectory";
+import { checkPathExists } from "./checkPathExists";
+
+type CheckHasAppRouterArgs = Pick<
+	SliceMachineContext<PluginOptions>,
+	"helpers"
+>;
+
+export async function checkHasAppRouter(
+	args: CheckHasAppRouterArgs,
+): Promise<boolean> {
+	const hasSrcDirectory = await checkHasSrcDirectory({ helpers: args.helpers });
+
+	return await checkPathExists(
+		hasSrcDirectory
+			? args.helpers.joinPathFromRoot("src", "app")
+			: args.helpers.joinPathFromRoot("app"),
+	);
+}

package/src/lib/checkHasSrcDirectory.ts

@@ -0,0 +1,15 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+
+import { PluginOptions } from "../types";
+import { checkPathExists } from "./checkPathExists";
+
+type CheckHasSrcDirectoryArgs = Pick<
+	SliceMachineContext<PluginOptions>,
+	"helpers"
+>;
+
+export async function checkHasSrcDirectory(
+	args: CheckHasSrcDirectoryArgs,
+): Promise<boolean> {
+	return await checkPathExists(args.helpers.joinPathFromRoot("src"));
+}

package/src/lib/getJSFileExtension.ts

@@ -0,0 +1,29 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+
+import { PluginOptions } from "../types";
+
+import { checkIsTypeScriptProject } from "./checkIsTypeScriptProject";
+
+type GetJSFileExtensionArgs = Pick<
+	SliceMachineContext<PluginOptions>,
+	"helpers" | "options"
+> & {
+	jsx?: boolean;
+};
+
+export const getJSFileExtension = async ({
+	helpers,
+	options,
+	jsx = false,
+}: GetJSFileExtensionArgs): Promise<string> => {
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+
+	if (isTypeScriptProject) {
+		return jsx ? "tsx" : "ts";
+	} else {
+		return jsx && options.jsxExtension ? "jsx" : "js";
+	}
+};

package/src/lib/upsertGlobalContentTypes.ts

@@ -21,7 +21,9 @@ export const upsertGlobalContentTypes = async ({
 	options,
 	project,
 }: UpsertGlobalTypesArgs): Promise<void> => {
-	const filePath = helpers.joinPathFromRoot("prismicio-types.d.ts");
+	const filePath = helpers.joinPathFromRoot(
+		options.generatedTypesFilePath || "prismicio-types.d.ts",
+	);
 
 	const [customTypeModelDescriptors, sharedSliceModelDescriptors] =
 		await Promise.all([