@slicemachine/adapter-next 0.3.85 → 0.3.86-alpha.lg-page-routes.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slicemachine/adapter-next",
-  "version": "0.3.85",
+  "version": "0.3.86-alpha.lg-page-routes.1",
   "description": "Slice Machine adapter for Next.js.",
   "keywords": [
     "typescript",
@@ -68,7 +68,7 @@
   "dependencies": {
     "@prismicio/simulator": "^0.1.4",
     "@prismicio/types-internal": "3.11.2",
-    "@slicemachine/plugin-kit": "0.4.83",
+    "@slicemachine/plugin-kit": "0.4.84-alpha.lg-page-routes.1",
     "common-tags": "^1.8.2",
     "fp-ts": "^2.13.1",
     "io-ts": "^2.2.20",
@@ -113,5 +113,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "stableVersion": "0.3.85"
 }

package/src/hooks/page-route-create.ts

@@ -0,0 +1,472 @@
+import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+import { stripIndent } from "common-tags";
+
+import type {
+	CustomTypeUpdateRouteHook,
+	CustomTypeUpdateRouteHookData,
+	SliceMachineContext,
+} from "@slicemachine/plugin-kit";
+import {
+	checkHasProjectFile,
+	writeProjectFile,
+} from "@slicemachine/plugin-kit/fs";
+
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
+import { getJSFileExtension } from "../lib/getJSFileExtension";
+
+import type { PluginOptions } from "../types";
+import { checkHasAppRouter } from "../lib/checkHasAppRouter";
+import path from "node:path";
+
+type Args = {
+	data: CustomTypeUpdateRouteHookData;
+} & SliceMachineContext<PluginOptions>;
+
+const createComponentFile = async ({ data, helpers, options }: Args) => {
+	const isTypeScript = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+	const hasSrcDirectory = await checkHasProjectFile({
+		filename: "src",
+		helpers,
+	});
+	const hasAppRouter = await checkHasAppRouter({ helpers });
+
+	const pageRoute = data.model.route ?? data.model.id;
+	const pageRouteLength = pageRoute.split("/").length - 1;
+
+	const contents = generatePageComponent(data.model, {
+		hasAppRouter,
+		isTypeScript,
+		hasSrcDirectory,
+		pageRouteLength,
+	});
+
+	const routeBase = hasAppRouter ? "app" : "pages";
+	const routeDirectoryPath = hasSrcDirectory
+		? path.join("src", routeBase)
+		: routeBase;
+
+	const extension = await getJSFileExtension({
+		helpers,
+		options,
+		jsx: true,
+	});
+	let filePath: string;
+
+	if (hasAppRouter) {
+		const fileName = data.model.repeatable
+			? `[uid]/page.${extension}`
+			: `page.${extension}`;
+
+		filePath = path.join(routeDirectoryPath, pageRoute, fileName);
+	} else {
+		const fileName = data.model.repeatable
+			? `${pageRoute}/[uid].${extension}`
+			: `${pageRoute}.${extension}`;
+
+		filePath = path.join(routeDirectoryPath, fileName);
+	}
+
+	await writeProjectFile({
+		filename: filePath,
+		contents,
+		format: options.format,
+		helpers,
+	});
+};
+
+export const pageRouteCreate: CustomTypeUpdateRouteHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	await createComponentFile({ data, ...context });
+};
+
+export function generatePageComponent(
+	customType: CustomType,
+	env: {
+		hasAppRouter: boolean;
+		isTypeScript: boolean;
+		hasSrcDirectory: boolean;
+		pageRouteLength: number;
+	},
+): string {
+	if (env.hasAppRouter) {
+		return generateAppRouterPage(
+			customType,
+			env.isTypeScript,
+			env.hasSrcDirectory,
+			env.pageRouteLength,
+		);
+	} else {
+		return generatePagesRouterPage(
+			customType,
+			env.isTypeScript,
+			env.hasSrcDirectory,
+			env.pageRouteLength,
+		);
+	}
+}
+
+function generateAppRouterPage(
+	customType: CustomType,
+	isTypeScript: boolean,
+	hasSrcDirectory: boolean,
+	pageRouteLength: number,
+): string {
+	// Calculate import paths based on directory depth
+	// Single: app/[id]/page.tsx → ../../prismicio (or ../../../prismicio if src/)
+	// Repeatable: app/[id]/[uid]/page.tsx → ../../../prismicio (or ../../../../prismicio if src/)
+	const levelsUp = customType.repeatable
+		? pageRouteLength + 1
+		: pageRouteLength;
+	const levelsUpWithSrc = hasSrcDirectory ? levelsUp + 1 : levelsUp;
+	const importPath = "../".repeat(levelsUpWithSrc) + "prismicio";
+	const slicesPath = "../".repeat(levelsUpWithSrc) + "slices";
+
+	if (customType.repeatable) {
+		if (isTypeScript) {
+			return stripIndent`
+        import { Metadata } from "next";
+        import { notFound } from "next/navigation";
+        import { asImageSrc } from "@prismicio/client";
+        import { SliceZone } from "@prismicio/react";
+
+        import { createClient } from "${importPath}";
+        import { components } from "${slicesPath}";
+
+        type Params = { uid: string };
+
+        export default async function Page({ params }: { params: Promise<Params> }) {
+          const { uid } = await params;
+          const client = createClient();
+          const page = await client
+            .getByUID("${customType.id}", uid)
+            .catch(() => notFound());
+
+          return <SliceZone slices={page.data.slices} components={components} />;
+        }
+
+        export async function generateMetadata({
+          params,
+        }: {
+          params: Promise<Params>;
+        }): Promise<Metadata> {
+          const { uid } = await params;
+          const client = createClient();
+          const page = await client
+            .getByUID("${customType.id}", uid)
+            .catch(() => notFound());
+
+          return {
+            title: page.data.meta_title,
+            description: page.data.meta_description,
+            openGraph: {
+              images: [{ url: asImageSrc(page.data.meta_image) ?? "" }],
+            },
+          };
+        }
+
+        export async function generateStaticParams() {
+          const client = createClient();
+          const pages = await client.getAllByType("${customType.id}");
+
+          return pages.map((page) => ({ uid: page.uid }));
+        }
+      `;
+		} else {
+			return stripIndent`
+        import { notFound } from "next/navigation";
+        import { asImageSrc } from "@prismicio/client";
+        import { SliceZone } from "@prismicio/react";
+
+        import { createClient } from "${importPath}";
+        import { components } from "${slicesPath}";
+
+        export default async function Page({ params }) {
+          const { uid } = await params;
+          const client = createClient();
+          const page = await client
+            .getByUID("${customType.id}", uid)
+            .catch(() => notFound());
+
+          return <SliceZone slices={page.data.slices} components={components} />;
+        }
+
+        export async function generateMetadata({ params }) {
+          const { uid } = await params;
+          const client = createClient();
+          const page = await client
+            .getByUID("${customType.id}", uid)
+            .catch(() => notFound());
+
+          return {
+            title: page.data.meta_title,
+            description: page.data.meta_description,
+            openGraph: {
+              images: [{ url: asImageSrc(page.data.meta_image) ?? "" }],
+            },
+          };
+        }
+
+        export async function generateStaticParams() {
+          const client = createClient();
+          const pages = await client.getAllByType("${customType.id}");
+
+          return pages.map((page) => ({ uid: page.uid }));
+        }
+      `;
+		}
+	} else {
+		// Single type
+		if (isTypeScript) {
+			return stripIndent`
+        import { type Metadata } from "next";
+        import { notFound } from "next/navigation";
+        import { asImageSrc } from "@prismicio/client";
+        import { SliceZone } from "@prismicio/react";
+
+        import { createClient } from "${importPath}";
+        import { components } from "${slicesPath}";
+
+        export default async function Page() {
+          const client = createClient();
+          const page = await client.getSingle("${customType.id}").catch(() => notFound());
+
+          return <SliceZone slices={page.data.slices} components={components} />;
+        }
+
+        export async function generateMetadata(): Promise<Metadata> {
+          const client = createClient();
+          const page = await client.getSingle("${customType.id}").catch(() => notFound());
+
+          return {
+            title: page.data.meta_title,
+            description: page.data.meta_description,
+            openGraph: {
+              images: [{ url: asImageSrc(page.data.meta_image) ?? "" }],
+            },
+          };
+        }
+      `;
+		} else {
+			return stripIndent`
+        import { notFound } from "next/navigation";
+        import { asImageSrc } from "@prismicio/client";
+        import { SliceZone } from "@prismicio/react";
+
+        import { createClient } from "${importPath}";
+        import { components } from "${slicesPath}";
+
+        export default async function Page() {
+          const client = createClient();
+          const page = await client.getSingle("${customType.id}").catch(() => notFound());
+
+          return <SliceZone slices={page.data.slices} components={components} />;
+        }
+
+        export async function generateMetadata() {
+          const client = createClient();
+          const page = await client.getSingle("${customType.id}").catch(() => notFound());
+
+          return {
+            title: page.data.meta_title,
+            description: page.data.meta_description,
+            openGraph: {
+              images: [{ url: asImageSrc(page.data.meta_image) ?? "" }],
+            },
+          };
+        }
+      `;
+		}
+	}
+}
+
+function generatePagesRouterPage(
+	customType: CustomType,
+	isTypeScript: boolean,
+	hasSrcDirectory: boolean,
+	pageRouteLength: number,
+): string {
+	// Calculate import paths based on directory depth
+	// Single: pages/[id].tsx → ../prismicio (or ../../prismicio if src/)
+	// Repeatable: pages/[id]/[uid].tsx → ../../prismicio (or ../../../prismicio if src/)
+	const levelsUp = customType.repeatable
+		? pageRouteLength + 1
+		: pageRouteLength;
+	const levelsUpWithSrc = hasSrcDirectory ? levelsUp + 1 : levelsUp;
+	const importPath = "../".repeat(levelsUpWithSrc) + "prismicio";
+	const slicesPath = "../".repeat(levelsUpWithSrc) + "slices";
+
+	if (customType.repeatable) {
+		if (isTypeScript) {
+			return stripIndent`
+        import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
+        import Head from "next/head";
+        import { isFilled, asLink, asImageSrc } from "@prismicio/client";
+        import { SliceZone } from "@prismicio/react";
+
+        import { components } from "${slicesPath}";
+        import { createClient } from "${importPath}";
+
+        type Params = { uid: string };
+
+        export default function Page({
+          page,
+        }: InferGetStaticPropsType<typeof getStaticProps>) {
+          return (
+            <>
+              <Head>
+                <title>{page.data.meta_title}</title>
+                {isFilled.keyText(page.data.meta_description) ? (
+                  <meta name="description" content={page.data.meta_description} />
+                ) : null}
+                {isFilled.image(page.data.meta_image) ? (
+                  <meta property="og:image" content={asImageSrc(page.data.meta_image) || ""} />
+                ) : null}
+              </Head>
+              <SliceZone slices={page.data.slices} components={components} />
+            </>
+          );
+        }
+
+        export async function getStaticProps({
+          params,
+          previewData,
+        }: GetStaticPropsContext<Params>) {
+          const client = createClient({ previewData });
+          const page = await client.getByUID("${customType.id}", params!.uid);
+
+          return { props: { page } };
+        }
+
+        export async function getStaticPaths() {
+          const client = createClient();
+          const pages = await client.getAllByType("${customType.id}");
+
+          return {
+            paths: pages.map((page) => asLink(page)),
+            fallback: false,
+          };
+        }
+      `;
+		} else {
+			return stripIndent`
+        import Head from "next/head";
+        import { isFilled, asLink, asImageSrc } from "@prismicio/client";
+        import { SliceZone } from "@prismicio/react";
+
+        import { components } from "${slicesPath}";
+        import { createClient } from "${importPath}";
+
+        export default function Page({ page }) {
+          return (
+            <>
+              <Head>
+                <title>{page.data.meta_title}</title>
+                {isFilled.keyText(page.data.meta_description) ? (
+                  <meta name="description" content={page.data.meta_description} />
+                ) : null}
+                {isFilled.image(page.data.meta_image) ? (
+                  <meta property="og:image" content={asImageSrc(page.data.meta_image) || ""} />
+                ) : null}
+              </Head>
+              <SliceZone slices={page.data.slices} components={components} />
+            </>
+          );
+        }
+
+        export async function getStaticProps({ params, previewData }) {
+          const client = createClient({ previewData });
+          const page = await client.getByUID("${customType.id}", params.uid);
+
+          return { props: { page } };
+        }
+
+        export async function getStaticPaths() {
+          const client = createClient();
+          const pages = await client.getAllByType("${customType.id}");
+
+          return {
+            paths: pages.map((page) => asLink(page)),
+            fallback: false,
+          };
+        }
+      `;
+		}
+	} else {
+		// Single type
+		if (isTypeScript) {
+			return stripIndent`
+        import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
+        import Head from "next/head";
+        import { isFilled, asImageSrc } from "@prismicio/client";
+        import { SliceZone } from "@prismicio/react";
+
+        import { components } from "${slicesPath}";
+        import { createClient } from "${importPath}";
+
+        export default function Page({
+          page,
+        }: InferGetStaticPropsType<typeof getStaticProps>) {
+          return (
+            <>
+              <Head>
+                <title>{page.data.meta_title}</title>
+                {isFilled.keyText(page.data.meta_description) ? (
+                  <meta name="description" content={page.data.meta_description} />
+                ) : null}
+                {isFilled.image(page.data.meta_image) ? (
+                  <meta property="og:image" content={asImageSrc(page.data.meta_image) || ""} />
+                ) : null}
+              </Head>
+              <SliceZone slices={page.data.slices} components={components} />
+            </>
+          );
+        }
+
+        export async function getStaticProps({ previewData }: GetStaticPropsContext) {
+          const client = createClient({ previewData });
+          const page = await client.getSingle("${customType.id}");
+
+          return { props: { page } };
+        }
+      `;
+		} else {
+			return stripIndent`
+        import Head from "next/head";
+        import { isFilled, asImageSrc } from "@prismicio/client";
+        import { SliceZone } from "@prismicio/react";
+
+        import { components } from "${slicesPath}";
+        import { createClient } from "${importPath}";
+
+        export default function Page({ page }) {
+          return (
+            <>
+              <Head>
+                <title>{page.data.meta_title}</title>
+                {isFilled.keyText(page.data.meta_description) ? (
+                  <meta name="description" content={page.data.meta_description} />
+                ) : null}
+                {isFilled.image(page.data.meta_image) ? (
+                  <meta property="og:image" content={asImageSrc(page.data.meta_image) || ""} />
+                ) : null}
+              </Head>
+              <SliceZone slices={page.data.slices} components={components} />
+            </>
+          );
+        }
+
+        export async function getStaticProps({ previewData }) {
+          const client = createClient({ previewData });
+          const page = await client.getSingle("${customType.id}");
+
+          return { props: { page } };
+        }
+      `;
+		}
+	}
+}

package/src/plugin.ts

@@ -16,6 +16,7 @@ import {
 	readSliceModel,
 	readSliceTemplateLibrary,
 	renameCustomType,
+	updateCustomTypeRoute,
 	renameSlice,
 	upsertGlobalTypeScriptTypes,
 	writeCustomTypeFile,
@@ -40,6 +41,7 @@ import { documentationRead } from "./hooks/documentation-read";
 import { projectInit } from "./hooks/project-init";
 import { sliceCreate } from "./hooks/slice-create";
 import { snippetRead } from "./hooks/snippet-read";
+import { pageRouteCreate } from "./hooks/page-route-create";
 
 // Slice Template Library
 import * as Hero from "./sliceTemplates/Hero";
@@ -269,6 +271,14 @@ export const plugin = defineSliceMachinePlugin<PluginOptions>({
 				...context,
 			});
 		});
+		hook("custom-type:update-route", async (data, context) => {
+			await updateCustomTypeRoute({
+				model: data.model,
+				...context,
+			});
+
+			await pageRouteCreate(data, context);
+		});
 		hook("custom-type:read", async (data, context) => {
 			return await readCustomTypeModel({
 				customTypeID: data.id,

package/src/sliceTemplates/AlternateGrid/index.ts

@@ -76,6 +76,7 @@ export const mocks: SharedSliceContent[] = [
 				value: [
 					{
 						__TYPE__: "GroupItemContent",
+						key: "01",
 						value: [
 							[
 								"title",
@@ -113,6 +114,7 @@ export const mocks: SharedSliceContent[] = [
 					},
 					{
 						__TYPE__: "GroupItemContent",
+						key: "02",
 						value: [
 							[
 								"title",
@@ -150,6 +152,7 @@ export const mocks: SharedSliceContent[] = [
 					},
 					{
 						__TYPE__: "GroupItemContent",
+						key: "03",
 						value: [
 							[
 								"title",
@@ -259,6 +262,7 @@ export const mocks: SharedSliceContent[] = [
 				value: [
 					{
 						__TYPE__: "GroupItemContent",
+						key: "01",
 						value: [
 							[
 								"title",

package/src/sliceTemplates/CustomerLogos/index.ts

@@ -38,6 +38,7 @@ export const mocks: SharedSliceContent[] = [
 				value: [
 					{
 						__TYPE__: "GroupItemContent",
+						key: "01",
 						value: [
 							[
 								"image",
@@ -80,6 +81,7 @@ export const mocks: SharedSliceContent[] = [
 					},
 					{
 						__TYPE__: "GroupItemContent",
+						key: "02",
 						value: [
 							[
 								"image",
@@ -123,6 +125,7 @@ export const mocks: SharedSliceContent[] = [
 					},
 					{
 						__TYPE__: "GroupItemContent",
+						key: "03",
 						value: [
 							[
 								"image",
@@ -166,6 +169,7 @@ export const mocks: SharedSliceContent[] = [
 					},
 					{
 						__TYPE__: "GroupItemContent",
+						key: "04",
 						value: [
 							[
 								"image",
@@ -209,6 +213,7 @@ export const mocks: SharedSliceContent[] = [
 					},
 					{
 						__TYPE__: "GroupItemContent",
+						key: "05",
 						value: [
 							[
 								"image",