@slicemachine/adapter-nuxt 0.0.2-dev-plugins-m3.0

package/src/hooks/slice-delete.ts

@@ -0,0 +1,41 @@
+import type {
+	SliceDeleteHook,
+	SliceDeleteHookData,
+	SliceMachineContext,
+} from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+
+import { buildSliceDirectoryPath } from "../lib/buildSliceDirectoryPath";
+import { rejectIfNecessary } from "../lib/rejectIfNecessary";
+import { upsertGlobalContentTypes } from "../lib/upsertGlobalContentTypes";
+import { upsertSliceLibraryIndexFile } from "../lib/upsertSliceLibraryIndexFile";
+
+import type { PluginOptions } from "../types";
+
+type Args = {
+	data: SliceDeleteHookData;
+} & SliceMachineContext<PluginOptions>;
+
+const deleteSliceDir = async ({ data, helpers }: Args) => {
+	const dir = buildSliceDirectoryPath({
+		libraryID: data.libraryID,
+		model: data.model,
+		helpers,
+	});
+
+	await fs.rm(dir, { recursive: true });
+};
+
+export const sliceDelete: SliceDeleteHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	await deleteSliceDir({ data, ...context });
+
+	rejectIfNecessary(
+		await Promise.allSettled([
+			upsertGlobalContentTypes(context),
+			upsertSliceLibraryIndexFile({ libraryID: data.libraryID, ...context }),
+		]),
+	);
+};

package/src/hooks/slice-read.ts

@@ -0,0 +1,69 @@
+import type { SliceReadHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+import { buildSliceLibraryDirectoryPath } from "../lib/buildSliceLibraryDirectoryPath";
+import { isSharedSliceModel } from "../lib/isSharedSliceModel";
+import { readJSONFile } from "../lib/readJSONFile";
+
+import type { PluginOptions } from "../types";
+
+export const sliceRead: SliceReadHook<PluginOptions> = async (
+	data,
+	{ helpers },
+) => {
+	const libraryDir = buildSliceLibraryDirectoryPath({
+		libraryID: data.libraryID,
+		helpers,
+	});
+
+	// Ensure the directory exists.
+	await fs.mkdir(libraryDir, { recursive: true });
+
+	const childDirs = await fs.readdir(libraryDir, { withFileTypes: true });
+
+	const modelReadErrors: string[] = [];
+
+	// Find the first matching model.
+	const [model] = (
+		await Promise.all(
+			childDirs.map(async (childDir) => {
+				if (childDir.isDirectory()) {
+					const modelPath = path.join(libraryDir, childDir.name, "model.json");
+					try {
+						const modelContents = await readJSONFile(modelPath);
+
+						if (
+							isSharedSliceModel(modelContents) &&
+							modelContents.id === data.sliceID
+						) {
+							return modelContents;
+						}
+					} catch (error) {
+						modelReadErrors.push(modelPath);
+					}
+				}
+			}),
+		)
+	).filter((model): model is NonNullable<typeof model> => Boolean(model));
+
+	if (model) {
+		return {
+			model,
+		};
+	} else {
+		if (modelReadErrors.length) {
+			throw new Error(
+				`Did not find a Slice model with ID "${data.sliceID}" in the "${
+					data.libraryID
+				}" Slice Library.\n\nThose Slice models could not be read:\n  - ${modelReadErrors.join(
+					"\n  - ",
+				)}`,
+			);
+		}
+
+		throw new Error(
+			`Did not find a Slice model with ID "${data.sliceID}" in the "${data.libraryID}" Slice Library.`,
+		);
+	}
+};

package/src/hooks/slice-rename.ts

@@ -0,0 +1,46 @@
+import type { SliceRenameHook } from "@slicemachine/plugin-kit";
+import * as fse from "fs-extra";
+
+import { buildSliceDirectoryPath } from "../lib/buildSliceDirectoryPath";
+import { rejectIfNecessary } from "../lib/rejectIfNecessary";
+import { updateSliceModelFile } from "../lib/updateSliceModelFile";
+import { upsertGlobalContentTypes } from "../lib/upsertGlobalContentTypes";
+import { upsertSliceLibraryIndexFile } from "../lib/upsertSliceLibraryIndexFile";
+
+import type { PluginOptions } from "../types";
+
+export const sliceRename: SliceRenameHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	const { model: currentModel } = await context.actions.readSliceModel({
+		libraryID: data.libraryID,
+		sliceID: data.model.id,
+	});
+
+	await fse.move(
+		buildSliceDirectoryPath({
+			libraryID: data.libraryID,
+			model: currentModel,
+			helpers: context.helpers,
+		}),
+		buildSliceDirectoryPath({
+			libraryID: data.libraryID,
+			model: data.model,
+			helpers: context.helpers,
+		}),
+	);
+
+	await updateSliceModelFile({
+		libraryID: data.libraryID,
+		model: data.model,
+		...context,
+	});
+
+	rejectIfNecessary(
+		await Promise.allSettled([
+			upsertGlobalContentTypes(context),
+			upsertSliceLibraryIndexFile({ libraryID: data.libraryID, ...context }),
+		]),
+	);
+};

package/src/hooks/slice-update.ts

@@ -0,0 +1,19 @@
+import type { SliceUpdateHook } from "@slicemachine/plugin-kit";
+
+import { updateSliceModelFile } from "../lib/updateSliceModelFile";
+import { upsertGlobalContentTypes } from "../lib/upsertGlobalContentTypes";
+
+import type { PluginOptions } from "../types";
+
+export const sliceUpdate: SliceUpdateHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	await updateSliceModelFile({
+		libraryID: data.libraryID,
+		model: data.model,
+		...context,
+	});
+
+	await upsertGlobalContentTypes(context);
+};

package/src/hooks/sliceLibrary-read.ts

@@ -0,0 +1,48 @@
+import type { SliceLibraryReadHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+import { buildSliceLibraryDirectoryPath } from "../lib/buildSliceLibraryDirectoryPath";
+import { isSharedSliceModel } from "../lib/isSharedSliceModel";
+import { readJSONFile } from "../lib/readJSONFile";
+
+import type { PluginOptions } from "../types";
+
+export const sliceLibraryRead: SliceLibraryReadHook<PluginOptions> = async (
+	data,
+	{ helpers },
+) => {
+	const dir = buildSliceLibraryDirectoryPath({
+		libraryID: data.libraryID,
+		helpers,
+	});
+
+	// Ensure the directory exists.
+	await fs.mkdir(dir, { recursive: true });
+
+	const childDirs = await fs.readdir(dir, { withFileTypes: true });
+
+	const sliceIDs: string[] = [];
+	await Promise.all(
+		childDirs.map(async (childDir) => {
+			if (childDir.isDirectory()) {
+				const modelPath = path.join(dir, childDir.name, "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/sliceSimulator-setup-read.ts

@@ -0,0 +1,209 @@
+import type {
+	SliceMachineContext,
+	SliceSimulatorSetupReadHook,
+	SliceSimulatorSetupStep,
+} from "@slicemachine/plugin-kit";
+import { source } from "common-tags";
+import { createRequire } from "node:module";
+import fetch, { Response } from "node-fetch";
+
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
+
+import type { PluginOptions } from "../types";
+
+const REQUIRED_DEPENDENCIES = ["@nuxtjs/prismic"];
+
+type Args = SliceMachineContext<PluginOptions>;
+
+const createStep1 = async ({
+	project,
+	helpers,
+}: Args): Promise<SliceSimulatorSetupStep> => {
+	const require = createRequire(project.root);
+
+	return {
+		title: "Install packages",
+		description: "The simulator requires some dependencies.",
+		// TODO: Create a plugin runner helper to provide the correct
+		// package manager
+		body: source`
+			The simulator requires extra dependencies. Run the following command to install them.
+
+			~~~sh
+			npm install --save ${REQUIRED_DEPENDENCIES.join(" ")}
+			~~~
+		`,
+		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, {
+						paths: [helpers.joinPathFromRoot("node_modules")],
+					});
+				} catch {
+					missingDependencies.push(dependency);
+				}
+			}
+
+			if (missingDependencies.length >= REQUIRED_DEPENDENCIES.length) {
+				return {
+					title: "Missing all dependencies",
+					message: source`
+						Install the required dependencies to continue.
+					`,
+				};
+			}
+
+			if (missingDependencies.length > 0) {
+				const formattedMissingDependencies = missingDependencies
+					.map((missingDependency) => `\`${missingDependency}\``)
+					.join(", ");
+
+				return {
+					title: "Missing some dependencies",
+					message: source`
+						The following dependencies are missing: ${formattedMissingDependencies}
+					`,
+				};
+			}
+		},
+	};
+};
+
+const createStep2 = async ({
+	helpers,
+	options,
+}: Args): Promise<SliceSimulatorSetupStep> => {
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+
+	const fileName = "slice-simulator.vue";
+	const filePath = helpers.joinPathFromRoot("pages", fileName);
+
+	const scriptAttributes = ["setup"];
+	if (isTypeScriptProject) {
+		scriptAttributes.push('lang="ts"');
+	}
+
+	const fileContents = await helpers.format(
+		source`
+			<template>
+				<SliceSimulator #default="{ slices }">
+					<SliceZone :slices="slices" :components="components" />
+				</SliceSimulator>
+			</template>
+
+			<script ${scriptAttributes.join(" ")}>
+			import { SliceSimulator } from "@slicemachine/adapter-nuxt/simulator";
+			import { components } from "~/slices";
+			</script>
+		`,
+		filePath,
+		{
+			includeNewlineAtEnd: false,
+		},
+	);
+
+	return {
+		title: "Create a page for the simulator",
+		description: `In your \`pages\` directory, create a file called \`${fileName}\` containing this code.`,
+		body: source`
+			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.
+
+			~~~vue
+			${fileContents}
+			~~~
+		`,
+	};
+};
+
+const createStep3 = async ({
+	helpers,
+}: Args): Promise<SliceSimulatorSetupStep> => {
+	const filePath = helpers.joinPathFromRoot("slicemachine.config.json");
+	const fileContents = await helpers.format(
+		source`
+			{
+				"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
+			}
+		`,
+		filePath,
+		{
+			includeNewlineAtEnd: false,
+		},
+	);
+
+	return {
+		title: "Update `slicemachine.config.json`",
+		description: `Update your \`slicemachine.config.json\` file with a \`localSliceSimulatorURL\` property pointing to your \`/slice-simulator\` page.`,
+		body: source`
+			Update your \`slicemachine.config.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 {
+					title: "Missing `localSliceSimulatorURL` property",
+					message: source`
+						A \`localSliceSimulatorURL\` property was not found in your \`slicemachine.config.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 {
+					title: "An invalid URL was provided",
+					message: source`
+						The \`localSliceSimulatorURL\` property should be of the shape \`http://localhost:PORT/PATH\`. See the codeblock for an example.
+					`,
+				};
+			}
+
+			// Check if the URL is accessible.
+			let res: Response | undefined = undefined;
+			try {
+				res = await fetch(project.config.localSliceSimulatorURL);
+			} catch (error) {
+				// Noop, we return if `res` is not defined
+			}
+
+			if (!res || !res.ok) {
+				return {
+					title: "Unable to connect to simulator page",
+					message: source`
+						Check that the \`localSliceSimulatorURL\` property in \`slicemachine.config.json\` is correct and try again. See the [troubleshooting page](https://prismic.io/docs/nuxt-setup) 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,145 @@
+import type {
+	SliceMachineHelpers,
+	SnippetReadHook,
+} from "@slicemachine/plugin-kit";
+import { stripIndent } from "common-tags";
+
+import type { PluginOptions } from "../types";
+
+const dotPath = (segments: string[]): string => {
+	return segments.join(".");
+};
+
+const format = async (input: string, helpers: SliceMachineHelpers) => {
+	const formattedInput = await helpers.format(input, undefined, {
+		includeNewlineAtEnd: false,
+		prettier: {
+			parser: "vue",
+		},
+	});
+
+	return formattedInput.endsWith(";")
+		? formattedInput.substring(0, formattedInput.length - 1)
+		: formattedInput;
+};
+
+export const snippetRead: SnippetReadHook<PluginOptions> = async (
+	data,
+	{ helpers },
+) => {
+	const { fieldPath } = data;
+
+	const label = "Vue";
+
+	switch (data.model.type) {
+		case "StructuredText": {
+			return [
+				{
+					label: `${label} (rich)`,
+					language: "vue",
+					code: await format(
+						stripIndent`
+						<PrismicRichText :field="${dotPath(fieldPath)}" />
+					`,
+						helpers,
+					),
+				},
+				{
+					label: `${label} (plain)`,
+					language: "vue",
+					code: await format(
+						stripIndent`
+						<PrismicText :field="${dotPath(fieldPath)}" />
+					`,
+						helpers,
+					),
+				},
+			];
+		}
+
+		case "Link": {
+			return {
+				label,
+				language: "vue",
+				code: await format(
+					stripIndent`
+						<PrismicLink :field="${dotPath(fieldPath)}">Link</PrismicLink>
+					`,
+					helpers,
+				),
+			};
+		}
+
+		case "Image": {
+			return {
+				label,
+				language: "vue",
+				code: await format(
+					stripIndent`
+							<PrismicImage :field="${dotPath(fieldPath)}" />
+						`,
+					helpers,
+				),
+			};
+		}
+
+		case "Embed": {
+			return {
+				label,
+				language: "vue",
+				code: await format(
+					stripIndent`
+							<PrismicEmbed :field="${dotPath(fieldPath)}" />
+						`,
+					helpers,
+				),
+			};
+		}
+
+		case "Group": {
+			return {
+				label,
+				language: "vue",
+				code: await format(
+					stripIndent`
+						<template v-for="item in ${dotPath(fieldPath)}">
+							{{ item }}
+						</template>
+					`,
+					helpers,
+				),
+			};
+		}
+
+		case "Slices": {
+			const code = await format(
+				stripIndent`
+					<SliceZone
+						:slices="${dotPath(fieldPath)}"
+						:components="components"
+					/>
+				`,
+				helpers,
+			);
+
+			return {
+				label,
+				language: "vue",
+				code,
+			};
+		}
+
+		default: {
+			return {
+				label,
+				language: "vue",
+				code: await format(
+					stripIndent`
+						{{${dotPath(fieldPath)}}}
+					`,
+					helpers,
+				),
+			};
+		}
+	}
+};

package/src/index.ts

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

package/src/lib/buildCustomTypeAssetPath.ts

@@ -0,0 +1,24 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+import * as path from "node:path";
+
+import { PluginOptions } from "../types";
+
+import { buildCustomTypeDirectoryPath } from "./buildCustomTypeDirectoryPath";
+
+type BuildCustomTypeAssetPathArgs = {
+	customTypeID: string;
+	assetID: string;
+	helpers: SliceMachineContext<PluginOptions>["helpers"];
+};
+
+export const buildCustomTypeAssetPath = (
+	args: BuildCustomTypeAssetPathArgs,
+): string => {
+	return path.join(
+		buildCustomTypeDirectoryPath({
+			customTypeID: args.customTypeID,
+			helpers: args.helpers,
+		}),
+		args.assetID,
+	);
+};

package/src/lib/buildCustomTypeDirectoryPath.ts

@@ -0,0 +1,20 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+import * as path from "node:path";
+
+import { PluginOptions } from "../types";
+
+import { buildCustomTypeLibraryDirectoryPath } from "./buildCustomTypeLibraryDirectoryPath";
+
+type BuildCustomTypeDirectoryPathArgs = {
+	customTypeID: string;
+	helpers: SliceMachineContext<PluginOptions>["helpers"];
+};
+
+export const buildCustomTypeDirectoryPath = (
+	args: BuildCustomTypeDirectoryPathArgs,
+): string => {
+	return path.join(
+		buildCustomTypeLibraryDirectoryPath({ helpers: args.helpers }),
+		args.customTypeID,
+	);
+};

package/src/lib/buildCustomTypeLibraryDirectoryPath.ts

@@ -0,0 +1,13 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+
+import { PluginOptions } from "../types";
+
+type BuildCustomTypeLibraryDirectoryPathArgs = {
+	helpers: SliceMachineContext<PluginOptions>["helpers"];
+};
+
+export const buildCustomTypeLibraryDirectoryPath = (
+	args: BuildCustomTypeLibraryDirectoryPathArgs,
+): string => {
+	return args.helpers.joinPathFromRoot("customtypes");
+};

package/src/lib/buildSliceAssetPath.ts

@@ -0,0 +1,32 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+import * as path from "node:path";
+
+import { PluginOptions } from "../types";
+
+import { buildSliceDirectoryPath } from "./buildSliceDirectoryPath";
+
+type BuildSliceAssetPathArgs = {
+	libraryID: string;
+	sliceID: string;
+	assetID: string;
+	actions: SliceMachineContext<PluginOptions>["actions"];
+	helpers: SliceMachineContext<PluginOptions>["helpers"];
+};
+
+export const buildSliceAssetPath = async (
+	args: BuildSliceAssetPathArgs,
+): Promise<string> => {
+	const { model } = await args.actions.readSliceModel({
+		libraryID: args.libraryID,
+		sliceID: args.sliceID,
+	});
+
+	return path.join(
+		buildSliceDirectoryPath({
+			libraryID: args.libraryID,
+			model,
+			helpers: args.helpers,
+		}),
+		args.assetID,
+	);
+};

package/src/lib/buildSliceDirectoryPath.ts

@@ -0,0 +1,26 @@
+import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+import * as path from "node:path";
+
+import { PluginOptions } from "../types";
+
+import { buildSliceLibraryDirectoryPath } from "./buildSliceLibraryDirectoryPath";
+import { pascalCase } from "./pascalCase";
+
+type BuildSliceDirectoryPathArgs = {
+	libraryID: string;
+	model: SharedSlice;
+	helpers: SliceMachineContext<PluginOptions>["helpers"];
+};
+
+export const buildSliceDirectoryPath = (
+	args: BuildSliceDirectoryPathArgs,
+): string => {
+	return path.join(
+		buildSliceLibraryDirectoryPath({
+			libraryID: args.libraryID,
+			helpers: args.helpers,
+		}),
+		pascalCase(args.model.name),
+	);
+};