@slicemachine/adapter-sveltekit 0.0.0 → 0.3.10-dev-adapter-svelte-kit.3

package/src/hooks/project-init.ts

@@ -0,0 +1,265 @@
+import * as path from "node:path";
+import type {
+	ProjectInitHook,
+	ProjectInitHookData,
+	SliceMachineContext,
+} from "@slicemachine/plugin-kit";
+import {
+	checkHasProjectFile,
+	writeProjectFile,
+} from "@slicemachine/plugin-kit/fs";
+import { source } from "common-tags";
+
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
+import { getJSFileExtension } from "../lib/getJSFileExtension";
+import { rejectIfNecessary } from "../lib/rejectIfNecessary";
+
+import type { PluginOptions } from "../types";
+import { upsertSliceLibraryIndexFile } from "../lib/upsertSliceLibraryIndexFile";
+
+type InstallDependenciesArgs = {
+	installDependencies: ProjectInitHookData["installDependencies"];
+};
+
+const installDependencies = async ({
+	installDependencies,
+}: InstallDependenciesArgs) => {
+	await installDependencies({
+		dependencies: {
+			"@prismicio/client": "latest",
+			"@prismicio/svelte": "latest",
+		},
+	});
+};
+
+type CreatePrismicIOFileArgs = SliceMachineContext<PluginOptions>;
+
+const createPrismicIOFile = async ({
+	helpers,
+	options,
+}: CreatePrismicIOFileArgs) => {
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+	const extension = await getJSFileExtension({ helpers, options });
+	const filename = path.join(`src/lib/prismicio.${extension}`);
+
+	if (await checkHasProjectFile({ filename, helpers })) {
+		return;
+	}
+
+	let createClientContents: string;
+
+	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: prismic.ClientConfig = {}) => {
+				const client = prismic.createClient(repositoryName, {
+					routes,
+					...config,
+				});
+
+				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 {prismic.ClientConfig} config - Configuration for the Prismic client.
+			 */
+			export const createClient = (config = {}) => {
+				const client = prismic.createClient(repositoryName, {
+					routes,
+					...config,
+				});
+
+				return client;
+			};
+		`;
+	}
+
+	let contents: string;
+
+	if (isTypeScriptProject) {
+		contents = source`
+			import * as prismic from "@prismicio/client";
+			import config from "../../slicemachine.config.json";
+
+			/**
+			 * The project's Prismic repository name.
+			 */
+			export const repositoryName = config.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}
+			 */
+			// TODO: Update the routes array to match your project's route structure.
+			const routes: prismic.ClientConfig["routes"] = [
+				{
+					type: "homepage",
+					path: "/",
+				},
+				{
+					type: "page",
+					path: "/:uid",
+				},
+			];
+
+			${createClientContents}
+		`;
+	} else {
+		contents = source`
+			import * as prismic from "@prismicio/client";
+			import config from "../../slicemachine.config.json";
+
+			/**
+			 * The project's Prismic repository name.
+			 */
+			export const repositoryName = config.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}
+			 *
+			 * @type {prismic.ClientConfig["routes"]}
+			 */
+			// TODO: Update the routes array to match your project's route structure.
+			const routes = [
+				{
+					type: "homepage",
+					path: "/",
+				},
+				{
+					type: "page",
+					path: "/:uid",
+				},
+			];
+
+			${createClientContents}
+		`;
+	}
+
+	await writeProjectFile({
+		filename,
+		contents,
+		format: options.format,
+		helpers,
+	});
+};
+
+const createSliceSimulatorPage = async ({
+	helpers,
+	options,
+}: SliceMachineContext<PluginOptions>) => {
+	const filename = path.join(
+		"src",
+		"routes",
+		"slice-simulator",
+		"+page.svelte",
+	);
+
+	if (await checkHasProjectFile({ filename, helpers })) {
+		return;
+	}
+
+	const contents = source`
+		<script>
+			import { SliceSimulator } from '@slicemachine/adapter-sveltekit/simulator';
+			import { SliceZone } from '@prismicio/svelte';
+			import { components } from '$lib/slices';
+		</script>
+
+		<SliceSimulator let:slices>
+			<SliceZone {slices} {components} />
+		</SliceSimulator>
+	`;
+
+	await writeProjectFile({
+		filename,
+		contents,
+		format: options.format,
+		formatOptions: {
+			prettier: {
+				plugins: ["prettier-plugin-svelte"],
+				parser: "svelte",
+			},
+		},
+		helpers,
+	});
+};
+
+const modifySliceMachineConfig = async ({
+	helpers,
+	options,
+	actions,
+}: SliceMachineContext<PluginOptions>) => {
+	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 (
+		(await checkHasProjectFile({
+			filename: "./src/lib",
+			helpers,
+		})) &&
+		project.config.libraries &&
+		JSON.stringify(project.config.libraries) === JSON.stringify(["./slices"])
+	) {
+		const sliceLibrary = await actions.readSliceLibrary({
+			libraryID: project.config.libraries[0],
+		});
+
+		if (sliceLibrary.sliceIDs.length < 1) {
+			project.config.libraries = ["./src/lib/slices"];
+		}
+	}
+
+	await helpers.updateSliceMachineConfig(project.config, {
+		format: options.format,
+	});
+};
+
+const upsertSliceLibraryIndexFiles = async (
+	context: SliceMachineContext<PluginOptions>,
+) => {
+	if (!context.project.config.libraries) {
+		return;
+	}
+
+	await Promise.all(
+		context.project.config.libraries?.map(async (libraryID) => {
+			await upsertSliceLibraryIndexFile({ libraryID, ...context });
+		}),
+	);
+};
+
+export const projectInit: ProjectInitHook<PluginOptions> = async (
+	{ installDependencies: _installDependencies },
+	context,
+) => {
+	rejectIfNecessary(
+		await Promise.allSettled([
+			installDependencies({ installDependencies: _installDependencies }),
+			modifySliceMachineConfig(context),
+			createPrismicIOFile(context),
+			createSliceSimulatorPage(context),
+			upsertSliceLibraryIndexFiles(context),
+		]),
+	);
+};

package/src/hooks/slice-create.ts

@@ -0,0 +1,120 @@
+import type {
+	SliceCreateHook,
+	SliceCreateHookData,
+	SliceMachineContext,
+} from "@slicemachine/plugin-kit";
+import {
+	upsertGlobalTypeScriptTypes,
+	writeSliceFile,
+	writeSliceModel,
+} from "@slicemachine/plugin-kit/fs";
+import { source } from "common-tags";
+
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
+import { pascalCase } from "../lib/pascalCase";
+import { rejectIfNecessary } from "../lib/rejectIfNecessary";
+import { upsertSliceLibraryIndexFile } from "../lib/upsertSliceLibraryIndexFile";
+
+import type { PluginOptions } from "../types";
+
+type Args = {
+	data: SliceCreateHookData;
+} & SliceMachineContext<PluginOptions>;
+
+const createComponentFile = async ({
+	data,
+	helpers,
+	actions,
+	options,
+}: Args) => {
+	const pascalName = pascalCase(data.model.name);
+
+	let contents: string;
+
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+
+	if (isTypeScriptProject) {
+		contents = source`
+			<script lang="ts">
+				import type { Content, SliceZone } from '@prismicio/client';
+
+				export let slice: Content.${pascalName}Slice;
+				export let slices: SliceZone;
+				export let index: number;
+				export let context: unknown;
+			</script>
+
+			<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+				Placeholder component for {slice.slice_type} (variation: {slice.variation}) Slices
+			</section>
+		`;
+	} else {
+		contents = source`
+			<script>
+				/** @type {import("@prismicio/client").Content.${pascalName}Slice} */
+				export let slice;
+				/** @type {import("@prismicio/client").SliceZone} */
+				export let slices;
+				/** @type {number} */
+				export let index;
+				/** @type {unknown} */
+				export let context;
+			</script>
+
+			<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+				Placeholder component for {slice.slice_type} (variation: {slice.variation}) Slices
+			</section>
+		`;
+	}
+
+	await writeSliceFile({
+		libraryID: data.libraryID,
+		model: data.model,
+		filename: "index.svelte",
+		contents,
+		format: options.format,
+		actions,
+		helpers,
+		formatOptions: {
+			prettier: {
+				plugins: ["prettier-plugin-svelte"],
+				parser: "svelte",
+			},
+		},
+	});
+};
+
+export const sliceCreate: SliceCreateHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	rejectIfNecessary(
+		await Promise.allSettled([
+			writeSliceModel({
+				libraryID: data.libraryID,
+				model: data.model,
+				format: context.options.format,
+				helpers: context.helpers,
+			}),
+			createComponentFile({ data, ...context }),
+		]),
+	);
+
+	rejectIfNecessary(
+		await Promise.allSettled([
+			upsertSliceLibraryIndexFile({
+				libraryID: data.libraryID,
+				...context,
+			}),
+			upsertGlobalTypeScriptTypes({
+				filename: context.options.generatedTypesFilePath,
+				format: context.options.format,
+				helpers: context.helpers,
+				actions: context.actions,
+			}),
+		]),
+	);
+};

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

@@ -0,0 +1,203 @@
+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 type { PluginOptions } from "../types";
+
+const REQUIRED_DEPENDENCIES = ["@prismicio/svelte"];
+
+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,
+}: Args): Promise<SliceSimulatorSetupStep> => {
+	const filePath = helpers.joinPathFromRoot(
+		"src",
+		"routes",
+		"slice-simulator",
+		"+page.svelte",
+	);
+
+	const fileContents = await helpers.format(
+		source`
+			<script>
+				import { SliceSimulator } from '@slicemachine/adapter-sveltekit/simulator';
+				import { SliceZone } from '@prismicio/svelte';
+				import { components } from '$lib/slices';
+			</script>
+
+			<SliceSimulator let:slices>
+				<SliceZone {slices} {components} />
+			</SliceSimulator>
+		`,
+		filePath,
+		{
+			includeNewlineAtEnd: false,
+			prettier: {
+				plugins: ["prettier-plugin-svelte"],
+				parser: "svelte",
+			},
+		},
+	);
+
+	return {
+		title: "Create a page for the simulator",
+		description: `Create a file at \`src/routes/slice-simulator/+page.svelte\` containing this code.`,
+		body: source`
+			Create a file at \`src/routes/slice-simulator/+page.svelte\` containing the following code. This route will be used to simulate and develop your components.
+
+			~~~svelte
+			${fileContents}
+			~~~
+		`,
+	};
+};
+
+const createStep3 = async ({
+	helpers,
+}: Args): Promise<SliceSimulatorSetupStep> => {
+	const filePath = helpers.joinPathFromRoot("slicemachine.config.json");
+	const fileContents = await helpers.format(
+		source`
+			{
+				"localSliceSimulatorURL": "http://localhost:5173/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/setup-nextjs) for more details.
+					`,
+				};
+			}
+		},
+	};
+};
+
+export const sliceSimulatorSetupRead: SliceSimulatorSetupReadHook<
+	PluginOptions
+> = async (_data, context) => {
+	return await Promise.all([
+		createStep1(context),
+		createStep2(context),
+		createStep3(context),
+	]);
+};