@slicemachine/adapter-next 0.0.1

package/src/hooks/slice-delete.ts

@@ -0,0 +1,50 @@
+import type {
+	SliceDeleteHook,
+	SliceDeleteHookData,
+	SliceMachineContext,
+} from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+
+import { buildSliceLibraryIndexFileContents } from "../lib/buildSliceLibraryIndexFileContents";
+import { pascalCase } from "../lib/pascalCase";
+
+import type { PluginOptions } from "../types";
+
+type Args = {
+	data: SliceDeleteHookData;
+} & SliceMachineContext<PluginOptions>;
+
+const deleteSliceDir = async ({ data, helpers }: Args) => {
+	const dir = helpers.joinPathFromRoot(
+		data.libraryID,
+		pascalCase(data.model.id),
+	);
+
+	await fs.rm(dir, { recursive: true });
+};
+
+const updateSliceLibraryIndexFile = async ({
+	data,
+	actions,
+	helpers,
+	project,
+	options,
+}: Args) => {
+	const { filePath, contents } = await buildSliceLibraryIndexFileContents({
+		libraryID: data.libraryID,
+		actions,
+		helpers,
+		project,
+		options,
+	});
+
+	await fs.writeFile(filePath, contents);
+};
+
+export const sliceDelete: SliceDeleteHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	await deleteSliceDir({ data, ...context });
+	await updateSliceLibraryIndexFile({ data, ...context });
+};

package/src/hooks/slice-library-read.ts

@@ -0,0 +1,51 @@
+import type { SliceLibraryReadHook } from "@slicemachine/plugin-kit";
+import * as prismicT from "@prismicio/types";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+import { readJSONFile } from "../lib/readJSONFile";
+
+import type { PluginOptions } from "../types";
+
+const isSharedSliceModel = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	input: any,
+): input is prismicT.SharedSliceModel => {
+	return (
+		typeof input === "object" &&
+		input !== null &&
+		"type" in input &&
+		input.type === prismicT.CustomTypeModelSliceType.SharedSlice
+	);
+};
+
+export const sliceLibraryRead: SliceLibraryReadHook<PluginOptions> = async (
+	data,
+	{ helpers },
+) => {
+	const dirPath = helpers.joinPathFromRoot(data.libraryID);
+
+	const childDirs = await fs.readdir(dirPath);
+
+	const sliceIDs: string[] = [];
+	await Promise.all(
+		childDirs.map(async (childDir) => {
+			const modelPath = path.join(dirPath, childDir, "model.json");
+
+			try {
+				const modelContents = await readJSONFile(modelPath);
+
+				if (isSharedSliceModel(modelContents)) {
+					sliceIDs.push(modelContents.id);
+				}
+			} catch {
+				// noop
+			}
+		}),
+	);
+
+	return {
+		id: data.libraryID,
+		sliceIDs: sliceIDs.sort(),
+	};
+};

package/src/hooks/slice-read.ts

@@ -0,0 +1,20 @@
+import type { SliceReadHook } from "@slicemachine/plugin-kit";
+import * as prismicT from "@prismicio/types";
+
+import { readJSONFile } from "../lib/readJSONFile";
+import { pascalCase } from "../lib/pascalCase";
+
+import type { PluginOptions } from "../types";
+
+export const sliceRead: SliceReadHook<PluginOptions> = async (
+	data,
+	{ helpers },
+) => {
+	const filePath = helpers.joinPathFromRoot(
+		data.libraryID,
+		pascalCase(data.sliceID),
+		"model.json",
+	);
+
+	return await readJSONFile<prismicT.SharedSliceModel>(filePath);
+};

package/src/hooks/slice-update.ts

@@ -0,0 +1,58 @@
+import type {
+	SliceMachineContext,
+	SliceUpdateHook,
+	SliceUpdateHookData,
+} from "@slicemachine/plugin-kit";
+import { generateTypes } from "prismic-ts-codegen";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+import { pascalCase } from "../lib/pascalCase";
+
+import type { PluginOptions } from "../types";
+
+type Args = {
+	dir: string;
+	data: SliceUpdateHookData;
+} & SliceMachineContext<PluginOptions>;
+
+const updateModelFile = async ({ dir, data, helpers, options }: Args) => {
+	const filePath = path.join(dir, "model.json");
+
+	let contents = JSON.stringify(data.model);
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath);
+	}
+
+	await fs.writeFile(filePath, contents);
+};
+
+const updateTypesFile = async ({ dir, data, helpers, options }: Args) => {
+	const filePath = path.join(dir, "types.ts");
+
+	let contents = generateTypes({
+		sharedSliceModels: [data.model],
+	});
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath);
+	}
+
+	await fs.writeFile(filePath, contents);
+};
+
+export const sliceUpdate: SliceUpdateHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	const dir = context.helpers.joinPathFromRoot(
+		data.libraryID,
+		pascalCase(data.model.id),
+	);
+
+	await Promise.allSettled([
+		updateModelFile({ dir, data, ...context }),
+		updateTypesFile({ dir, data, ...context }),
+	]);
+};

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

@@ -0,0 +1,244 @@
+import type {
+	SliceMachineContext,
+	SliceSimulatorSetupReadHook,
+	SliceSimulatorSetupStep,
+} from "@slicemachine/plugin-kit";
+import { SliceSimulatorSetupStepValidationMessageType } from "@slicemachine/plugin-kit";
+import { stripIndent } from "common-tags";
+import { createRequire } from "node:module";
+import * as http from "node:http";
+
+import { getJSOrTSXFileExtension } from "../lib/getJSOrTSXFileExtension";
+
+import type { PluginOptions } from "../types";
+
+const REQUIRED_DEPENDENCIES = [
+	"@prismicio/react",
+	"@prismicio/slice-simulator-react",
+	"@prismicio/client@latest",
+	"@prismicio/helpers",
+];
+
+type Args = SliceMachineContext<PluginOptions>;
+
+const createStep1 = async ({
+	project,
+}: Args): Promise<SliceSimulatorSetupStep> => {
+	const require = createRequire(project.root);
+
+	return {
+		title: "Install packages",
+		body: stripIndent`
+			The simulator requires extra dependencies. Run the following command to install them.
+
+			~~~sh
+			npm install --save @prismicio/react @prismicio/slice-simulator-react @prismicio/client@latest @prismicio/helpers
+			~~~
+		`,
+		validate: async () => {
+			const missingDependencies: string[] = [];
+
+			for (const dependency of REQUIRED_DEPENDENCIES) {
+				try {
+					// `require.resolve()` is preferred
+					// over `import()` because we don't
+					// want to load the module. Loading a
+					// module could introduce side-effects.
+					require.resolve(dependency);
+				} catch {
+					missingDependencies.push(dependency);
+				}
+			}
+
+			if (missingDependencies.length >= REQUIRED_DEPENDENCIES.length) {
+				return {
+					type: SliceSimulatorSetupStepValidationMessageType.Error,
+					title: "Missing all dependencies",
+					message: stripIndent`
+						Install the required dependencies to continue.
+					`,
+				};
+			}
+
+			if (missingDependencies.length > 0) {
+				const formattedMissingDependencies = missingDependencies
+					.map((missingDependency) => `\`${missingDependency}\``)
+					.join(", ");
+
+				return {
+					type: SliceSimulatorSetupStepValidationMessageType.Warning,
+					title: "Missing some dependencies",
+					message: stripIndent`
+						The following dependencies are missing: ${formattedMissingDependencies}
+					`,
+				};
+			}
+		},
+	};
+};
+
+const createStep2 = async ({
+	helpers,
+	options,
+}: Args): Promise<SliceSimulatorSetupStep> => {
+	const fileName = `slice-simulator.${getJSOrTSXFileExtension}`;
+	const filePath = helpers.joinPathFromRoot("pages", fileName);
+
+	let fileContents: string;
+
+	if (options.typescript) {
+		fileContents = stripIndent`
+			import { GetStaticProps } from "next/types";
+			import { SliceSimulator } from "@prismicio/slice-simulator-react";
+			import { SliceZone } from "@prismicio/react";
+
+			import state from "../.slicemachine/libraries-state.json";
+			import { components } from "../slices";
+
+			const SliceSimulatorPage = () => {
+				return (
+					<SliceSimulator
+						sliceZone={(props) => <SliceZone {...props} components={components} />}
+						state={state}
+					/>
+				);
+			};
+
+			export default SliceSimulatorPage;
+
+			export const getStaticProps: GetStaticProps = () => {
+				return {
+					// Exclude this page from production builds.
+					notFound: process.env.NODE_ENV === "production",
+				};
+			};
+		`;
+	} else {
+		fileContents = stripIndent`
+			import { SliceSimulator } from "@prismicio/slice-simulator-react";
+			import { SliceZone } from "@prismicio/react";
+
+			import state from "../.slicemachine/libraries-state.json";
+			import { components } from "../slices";
+
+			const SliceSimulatorPage = () => {
+				return (
+					<SliceSimulator
+						sliceZone={(props) => <SliceZone {...props} components={components} />}
+						state={state}
+					/>
+				);
+			};
+
+			export default SliceSimulatorPage;
+
+			export const getStaticProps= () => {
+				return {
+					// Exclude this page from production builds.
+					notFound: process.env.NODE_ENV === "production",
+				};
+			};
+		`;
+	}
+
+	fileContents = await helpers.format(fileContents, filePath);
+
+	return {
+		title: "Create a page for the simulator",
+		body: stripIndent`
+			In your \`pages\` directory, create a file called \`${fileName}\` and add the following code. This route will be used to simulate and develop your components.
+
+			~~~tsx
+			${fileContents}
+			~~~
+		`,
+	};
+};
+
+const createStep3 = async ({
+	helpers,
+}: Args): Promise<SliceSimulatorSetupStep> => {
+	const filePath = helpers.joinPathFromRoot("sm.json");
+	const fileContents = await helpers.format(
+		`
+			{
+				"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
+			}
+		`,
+		filePath,
+	);
+
+	return {
+		title: "Update `sm.json`",
+		body: stripIndent`
+			Update your \`sm.json\` file with a \`localSliceSimulatorURL\` property pointing to your \`slice-simulator\` page.
+
+			~~~json
+			${fileContents}
+			~~~
+		`,
+		validate: async () => {
+			const project = await helpers.getProject();
+
+			if (!("localSliceSimulatorURL" in project.config)) {
+				return {
+					type: SliceSimulatorSetupStepValidationMessageType.Error,
+					title: "Missing `localSliceSimulatorURL` property",
+					message: stripIndent`
+						A \`localSliceSimulatorURL\` property was not found in your \`sm.json\` file.
+					`,
+				};
+			}
+
+			// Test if the URL is valid.
+			try {
+				if (project.config.localSliceSimulatorURL) {
+					new URL(project.config.localSliceSimulatorURL);
+				} else {
+					throw new Error("Undefined Slice Simulator URL");
+				}
+			} catch {
+				return {
+					type: SliceSimulatorSetupStepValidationMessageType.Warning,
+					title: "An invalid URL was provided",
+					message: stripIndent`
+						The \`localSliceSimulatorURL\` property should be of the shape \`http://localhost:PORT/PATH\`. See the codeblock for an example.
+					`,
+				};
+			}
+
+			// Check if the URL is accessible.
+			const ok = await new Promise<boolean>((resolve) => {
+				if (project.config.localSliceSimulatorURL) {
+					http.get(project.config.localSliceSimulatorURL, (res) => {
+						if (res.statusCode) {
+							resolve(res.statusCode >= 200 && res.statusCode < 300);
+						}
+					});
+				}
+
+				resolve(false);
+			});
+
+			if (!ok) {
+				return {
+					type: SliceSimulatorSetupStepValidationMessageType.Warning,
+					title: "Unable to connect to simulator page",
+					message: stripIndent`
+						Check that the \`localSliceSimulatorURL\` property in \`sm.json\` is correct and try again. See the [troubleshooting page](https://prismic.io/docs/technologies/setup-slice-simulator-nextjs) for more details.
+					`,
+				};
+			}
+		},
+	};
+};
+
+export const sliceSimulatorSetupRead: SliceSimulatorSetupReadHook<
+	PluginOptions
+> = async (_data, context) => {
+	return Promise.all([
+		createStep1(context),
+		createStep2(context),
+		createStep3(context),
+	]);
+};

package/src/hooks/snippet-read.ts

@@ -0,0 +1,115 @@
+import type { SnippetReadHook } from "@slicemachine/plugin-kit";
+import * as prismicT from "@prismicio/types";
+import { stripIndent } from "common-tags";
+import type { Config as PrettierConfig } from "prettier";
+
+import type { PluginOptions } from "../types";
+
+const prettierOptions: PrettierConfig = { parser: "typescript" };
+
+const dotPath = (segments: string[]): string => {
+	return segments.join(".");
+};
+
+export const snippetRead: SnippetReadHook<PluginOptions> = async (
+	data,
+	{ helpers },
+) => {
+	const { fieldPath } = data;
+
+	const label = "React";
+
+	switch (data.model.type) {
+		case prismicT.CustomTypeModelFieldType.Link: {
+			return {
+				label,
+				language: "tsx",
+				code: await helpers.format(
+					stripIndent`
+						<PrismicLink field={${dotPath(fieldPath)}}>Link</PrismicLink>
+					`,
+					undefined,
+					{ prettier: prettierOptions },
+				),
+			};
+		}
+
+		case prismicT.CustomTypeModelFieldType.Image: {
+			return [
+				{
+					label: `${label} (next/image)`,
+					language: "tsx",
+					code: await helpers.format(
+						stripIndent`
+							<PrismicNextImage field={${dotPath(fieldPath)}} />
+						`,
+						undefined,
+						{ prettier: prettierOptions },
+					),
+				},
+				{
+					label,
+					language: "tsx",
+					code: await helpers.format(
+						stripIndent`
+							<PrismicImage field={${dotPath(fieldPath)}} />
+						`,
+						undefined,
+						{ prettier: prettierOptions },
+					),
+				},
+			];
+		}
+
+		case prismicT.CustomTypeModelFieldType.Group: {
+			const code = await helpers.format(
+				stripIndent`
+					<>{${dotPath(fieldPath)}.map(item => (
+					  <>{/* Render content for item */}</>
+					))}</>
+				`,
+				undefined,
+				{ prettier: prettierOptions },
+			);
+
+			return {
+				label,
+				language: "tsx",
+				code,
+			};
+		}
+
+		case prismicT.CustomTypeModelFieldType.Slices: {
+			const code = await helpers.format(
+				stripIndent`
+					<SliceZone
+					  slices={${dotPath(fieldPath)}}
+					  components={components}
+					/>
+				`,
+				undefined,
+				{ prettier: prettierOptions },
+			);
+
+			return {
+				label,
+				language: "tsx",
+				code,
+			};
+		}
+
+		default: {
+			return {
+				label,
+				language: "tsx",
+				code: await helpers.format(
+					stripIndent`
+						<>{${dotPath(fieldPath)}}</>
+					`,
+					undefined,
+					{ prettier: prettierOptions },
+				),
+			};
+		}
+	}
+};

package/src/index.ts

@@ -0,0 +1,10 @@
+import { plugin } from "./plugin";
+export default plugin;
+
+export type { PluginOptions } from "./types";
+
+export { SliceSimulator } from "./SliceSimulator";
+export type {
+	SliceSimulatorProps,
+	SliceSimulatorSliceZoneProps,
+} from "./SliceSimulator";

package/src/lib/buildSliceLibraryIndexFileContents.ts

@@ -0,0 +1,38 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+import { stripIndent } from "common-tags";
+
+import { PluginOptions } from "../types";
+
+import { pascalCase } from "./pascalCase";
+
+type BuildSliceLibraryIndexFileContentsArgs = {
+	libraryID: string;
+} & SliceMachineContext<PluginOptions>;
+
+export const buildSliceLibraryIndexFileContents = async (
+	args: BuildSliceLibraryIndexFileContentsArgs,
+): Promise<{ filePath: string; contents: string }> => {
+	const filePath = args.helpers.joinPathFromRoot(
+		args.libraryID,
+		args.options.typescript ? "index.ts" : "index.js",
+	);
+	const sliceLibrary = await args.actions.readSliceLibrary({
+		libraryID: args.libraryID,
+	});
+
+	let contents = stripIndent`
+		import dynamic from 'next/dynamic'
+
+		export const components = {
+			${sliceLibrary.sliceIDs.map(
+				(id) => `${id}: dynamic(() => import('./${pascalCase(id)}')),`,
+			)}
+		}
+	`;
+
+	if (args.options.format) {
+		contents = await args.helpers.format(contents, filePath);
+	}
+
+	return { filePath, contents };
+};

package/src/lib/getJSOrTSXFileExtension.ts

@@ -0,0 +1,13 @@
+import type { PluginOptions } from "../types";
+
+export const getJSOrTSXFileExtension = (
+	pluginOptions: PluginOptions,
+): string => {
+	if (pluginOptions.typescript) {
+		return "tsx";
+	} else if (pluginOptions.jsxExtension) {
+		return "jsx";
+	} else {
+		return "js";
+	}
+};

package/src/lib/pascalCase.ts

@@ -0,0 +1,12 @@
+import { pascalCase as basePascalCase } from "pascal-case";
+
+/**
+ * Converts a string to a Pascal cased string.
+ *
+ * @param input - String to convert into a Pascal cased string.
+ *
+ * @returns Pascal cased string version of `input`.
+ */
+export const pascalCase = (...input: (string | undefined)[]): string => {
+	return basePascalCase(input.filter(Boolean).join(" "));
+};

package/src/lib/readJSONFile.ts

@@ -0,0 +1,7 @@
+import * as fs from "node:fs/promises";
+
+export const readJSONFile = async <T = unknown>(path: string): Promise<T> => {
+	const contents = await fs.readFile(path, "utf8");
+
+	return JSON.parse(contents);
+};

package/src/plugin.ts

@@ -0,0 +1,43 @@
+import { defineSliceMachinePlugin } from "@slicemachine/plugin-kit";
+
+import { name as pkgName } from "../package.json";
+import { PluginOptions } from "./types";
+
+import { sliceCreate } from "./hooks/slice-create";
+import { sliceUpdate } from "./hooks/slice-update";
+import { sliceDelete } from "./hooks/slice-delete";
+import { sliceRead } from "./hooks/slice-read";
+import { sliceLibraryRead } from "./hooks/slice-library-read";
+import { customTypeCreate } from "./hooks/customType-create";
+import { customTypeUpdate } from "./hooks/customType-update";
+import { customTypeDelete } from "./hooks/customType-delete";
+import { customTypeRead } from "./hooks/customType-read";
+import { customTypeLibraryRead } from "./hooks/customType-library-read";
+import { snippetRead } from "./hooks/snippet-read";
+import { sliceSimulatorSetupRead } from "./hooks/sliceSimulator-setup-read";
+
+export const plugin = defineSliceMachinePlugin<PluginOptions>({
+	meta: {
+		name: pkgName,
+	},
+	defaultOptions: {
+		format: true,
+	},
+	setup({ hook }) {
+		hook("slice:create", sliceCreate);
+		hook("slice:update", sliceUpdate);
+		hook("slice:delete", sliceDelete);
+		hook("slice:read", sliceRead);
+		hook("slice-library:read", sliceLibraryRead);
+
+		hook("custom-type:create", customTypeCreate);
+		hook("custom-type:update", customTypeUpdate);
+		hook("custom-type:delete", customTypeDelete);
+		hook("custom-type:read", customTypeRead);
+		hook("custom-type-library:read", customTypeLibraryRead);
+
+		hook("snippet:read", snippetRead);
+
+		hook("slice-simulator:setup:read", sliceSimulatorSetupRead);
+	},
+});

package/src/types.ts

@@ -0,0 +1,12 @@
+export type PluginOptions = {
+	format?: boolean;
+} & (
+	| {
+			typescript?: false;
+			jsxExtension?: boolean;
+	  }
+	| {
+			typescript: true;
+			jsxExtension?: never;
+	  }
+);