prismic 0.0.0-pr.28.59bf330

package/src/framework/nuxt.ts

@@ -0,0 +1,250 @@
+import type { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+
+import { builders, loadFile, writeFile as magicastWriteFile } from "magicast";
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { relative } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import type { Framework } from ".";
+
+import { FrameworkAdapter } from ".";
+import { readConfig, updateConfig } from "../lib/config";
+import { exists } from "../lib/file";
+import { sliceSimulatorPageTemplate, sliceTemplate } from "./nuxt.templates";
+import { getNpmPackageVersion } from "../lib/packageJson";
+import { dedent } from "../lib/string";
+
+const NUXT_PRISMIC = "@nuxtjs/prismic";
+
+export class NuxtFramework extends FrameworkAdapter {
+	readonly id: Framework = "nuxt";
+
+	async getDependencies(): Promise<Record<string, string>> {
+		return {
+			"@prismicio/client": `^${await getNpmPackageVersion("@prismicio/client")}`,
+			[NUXT_PRISMIC]: `^${await getNpmPackageVersion(NUXT_PRISMIC)}`,
+		};
+	}
+
+	async initProject(): Promise<void> {
+		await super.initProject();
+
+		await this.#configureNuxtModule();
+		await this.#createSliceSimulatorPage();
+		await this.#moveOrDeleteAppVue();
+		await this.#modifySliceLibraryPath();
+	}
+
+	async createSliceComponent(
+		model: SharedSlice,
+		sliceDirectory: URL,
+	): Promise<{ componentPath: URL }> {
+		const componentPath = new URL("index.vue", sliceDirectory);
+		const contents = sliceTemplate({
+			name: model.name,
+			typescript: await this.checkIsTypeScriptProject(),
+		});
+		await writeFile(componentPath, contents);
+		return { componentPath };
+	}
+
+	getSliceImportPath(relativeDirectory: string): string {
+		return `./${relativeDirectory}/index.vue`;
+	}
+
+	async getDefaultSliceLibraryPath(_projectRoot: URL): Promise<URL> {
+		const srcDir = await this.#getSrcDir();
+		return new URL("slices/", srcDir);
+	}
+
+	async getClientFilePath(): Promise<string | null> {
+		return null;
+	}
+
+	async getSlicesDirectoryPath(): Promise<string> {
+		const projectRoot = await this.getProjectRoot();
+		const appDir = new URL("app/", projectRoot);
+		if (await exists(appDir)) return "app/slices/";
+		const srcDir = new URL("src/", projectRoot);
+		if (await exists(srcDir)) return "src/slices/";
+		return "slices/";
+	}
+
+	getSliceComponentExtensions(): string[] {
+		return [".vue"];
+	}
+
+	async getRoutePath(route: string): Promise<{ path: string; extensions: string[] } | null> {
+		if (route === "/slice-simulator") {
+			return { path: "pages/slice-simulator", extensions: [".vue"] };
+		}
+		return null;
+	}
+
+	protected override async generateSliceLibraryIndexContents(
+		slices: { library: URL; directory: URL; model: SharedSlice }[],
+	): Promise<string> {
+		const componentLines = await Promise.all(
+			slices.map(async (slice) => {
+				const relativeDirectory = relative(
+					fileURLToPath(slice.library),
+					fileURLToPath(slice.directory),
+				);
+				return `${slice.model.id}: defineAsyncComponent(() => import("./${relativeDirectory}/index.vue"))`;
+			}),
+		);
+
+		return dedent`
+			// Code generated by Prismic. DO NOT EDIT.
+
+			import { defineAsyncComponent } from "vue";
+			import { defineSliceZoneComponents } from "@prismicio/vue";
+
+			export const components = defineSliceZoneComponents({
+				${componentLines.join(",\n")}
+			});
+		`;
+	}
+
+	async #getSrcDir(): Promise<URL> {
+		const projectRoot = await this.getProjectRoot();
+		const appDir = new URL("app/", projectRoot);
+		if (await exists(appDir)) return appDir;
+		const srcDir = new URL("src/", projectRoot);
+		if (await exists(srcDir)) return srcDir;
+		return projectRoot;
+	}
+
+	async #configureNuxtModule(): Promise<void> {
+		const projectRoot = await this.getProjectRoot();
+
+		let configUrl = new URL("nuxt.config.js", projectRoot);
+		if (!(await exists(configUrl))) {
+			configUrl = new URL("nuxt.config.ts", projectRoot);
+		}
+		if (!(await exists(configUrl))) {
+			return;
+		}
+
+		const filepath = fileURLToPath(configUrl);
+		const mod = await loadFile(filepath);
+		const config =
+			mod.exports.default.$type === "function-call"
+				? mod.exports.default.$args[0]
+				: mod.exports.default;
+
+		// Check if @nuxtjs/prismic is already registered
+		let hasInlinedConfiguration = false;
+		const hasPrismicModuleRegistered = (config.modules || []).find(
+			(registration: string | [string, unknown]) => {
+				if (typeof registration === "string") {
+					return registration === NUXT_PRISMIC;
+				} else if (Array.isArray(registration)) {
+					hasInlinedConfiguration = !!registration[1];
+					return registration[0] === NUXT_PRISMIC;
+				}
+				return false;
+			},
+		);
+
+		if (!hasPrismicModuleRegistered) {
+			config.modules ||= [];
+			config.modules.push(NUXT_PRISMIC);
+		}
+
+		// Append Prismic module configuration if not inlined
+		if (!hasInlinedConfiguration) {
+			mod.imports.$prepend({
+				from: "./prismic.config.json",
+				imported: "repositoryName",
+			});
+
+			config.prismic ||= {};
+			config.prismic.endpoint = builders.raw("repositoryName");
+		}
+
+		await magicastWriteFile(mod, filepath);
+	}
+
+	async #createSliceSimulatorPage(): Promise<void> {
+		const projectRoot = await this.getProjectRoot();
+		const typescript = await this.checkIsTypeScriptProject();
+
+		// Check for existing pages directories in priority order
+		const appPagesDir = new URL("app/pages/", projectRoot);
+		const srcPagesDir = new URL("src/pages/", projectRoot);
+		const pagesDir = new URL("pages/", projectRoot);
+
+		let targetDir: URL;
+		if (await exists(appPagesDir)) {
+			targetDir = appPagesDir;
+		} else if (await exists(srcPagesDir)) {
+			targetDir = srcPagesDir;
+		} else if (await exists(pagesDir)) {
+			targetDir = pagesDir;
+		} else {
+			targetDir = new URL("pages/", await this.#getSrcDir());
+		}
+
+		const filePath = new URL("slice-simulator.vue", targetDir);
+
+		if (await exists(filePath)) {
+			return;
+		}
+
+		const contents = sliceSimulatorPageTemplate({ typescript });
+		await mkdir(targetDir, { recursive: true });
+		await writeFile(filePath, contents);
+	}
+
+	async #moveOrDeleteAppVue(): Promise<void> {
+		const srcDir = await this.#getSrcDir();
+		const appVuePath = new URL("app.vue", srcDir);
+
+		if (!(await exists(appVuePath))) {
+			return;
+		}
+
+		const contents = await readFile(appVuePath, "utf8");
+
+		if (!contents.includes("<NuxtWelcome")) {
+			return;
+		}
+
+		const indexVuePath = new URL("pages/index.vue", srcDir);
+
+		if (!(await exists(indexVuePath))) {
+			await mkdir(new URL(".", indexVuePath), { recursive: true });
+			await writeFile(indexVuePath, contents);
+		}
+
+		await rm(appVuePath);
+	}
+
+	async #modifySliceLibraryPath(): Promise<void> {
+		const projectRoot = await this.getProjectRoot();
+		const hasAppDir = await exists(new URL("app/", projectRoot));
+		const hasSrcDir = await exists(new URL("src/", projectRoot));
+
+		if (!hasAppDir && !hasSrcDir) {
+			return;
+		}
+
+		const configResult = await readConfig();
+		if (!configResult.ok) return;
+
+		const libraries = configResult.config.libraries;
+		if (!libraries || JSON.stringify(libraries) !== JSON.stringify(["./slices"])) {
+			return;
+		}
+
+		// Only modify if the default library has no slices yet
+		const slices = await this.getSlices();
+		if (slices.length > 0) {
+			return;
+		}
+
+		const newLibrary = hasAppDir ? "./app/slices" : "./src/slices";
+		await updateConfig({ libraries: [newLibrary] });
+	}
+}

package/src/framework/sveltekit.templates.ts

@@ -0,0 +1,278 @@
+import { pascalCase } from "change-case";
+
+import { dedent } from "../lib/string";
+
+export function prismicIOFileTemplate(args: { typescript: boolean }): string {
+	const { typescript } = args;
+
+	if (typescript) {
+		return dedent`
+			import { createClient as baseCreateClient, type Route } from "@prismicio/client";
+			import { type CreateClientConfig, enableAutoPreviews } from '@prismicio/svelte/kit';
+			import prismicConfig from "../../prismic.config.json";
+
+			/**
+			 * The project's Prismic repository name.
+			 */
+			export const repositoryName = prismicConfig.repositoryName;
+
+			/**
+			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
+			 *
+			 * {@link https://prismic.io/docs/route-resolver}
+			 *
+			 * Note: \`prismic sync\` may append new default routes for Page Types. Feel free
+			 * to edit these to match your site's routing structure.
+			 */
+			// TODO: Update the routes array to match your project's route structure.
+			const routes: Route[] = [
+				// Examples:
+				// { type: "homepage", path: "/" },
+				// { type: "page", path: "/:uid" },
+			];
+
+			/**
+			 * 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 = ({ cookies, ...config }: CreateClientConfig = {}) => {
+				const client = baseCreateClient(repositoryName, {
+					routes,
+					...config,
+				});
+
+				enableAutoPreviews({ client, cookies });
+
+				return client;
+			};
+		`;
+	}
+
+	return dedent`
+		import { createClient as baseCreateClient } from "@prismicio/client";
+		import { enableAutoPreviews } from '@prismicio/svelte/kit';
+		import prismicConfig from "../../prismic.config.json";
+
+		/**
+		 * The project's Prismic repository name.
+		 */
+		export const repositoryName = prismicConfig.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}
+		 *
+		 * Note: \`prismic sync\` may append new default routes for Page Types. Feel free
+		 * to edit these to match your site's routing structure.
+		 *
+		 * @type {import("@prismicio/client").Route[]}
+		 */
+		// TODO: Update the routes array to match your project's route structure.
+		const routes = [
+			// Examples:
+			// { type: "homepage", path: "/" },
+			// { type: "page", path: "/:uid" },
+		];
+
+		/**
+		 * Creates a Prismic client for the project's repository. The client is used to
+		 * query content from the Prismic API.
+		 *
+		 * @param {import('@prismicio/svelte/kit').CreateClientConfig} config - Configuration for the Prismic client.
+		 */
+		export const createClient = ({ cookies, ...config } = {}) => {
+			const client = baseCreateClient(repositoryName, {
+				routes,
+				...config,
+			});
+
+			enableAutoPreviews({ client, cookies });
+
+			return client;
+		};
+	`;
+}
+
+export function sliceSimulatorPageTemplate(args: { version: number }): string {
+	const { version } = args;
+
+	const v5 = dedent`
+		<script>
+			import { SliceSimulator, SliceZone } from '@prismicio/svelte';
+			import { components } from '$lib/slices';
+		</script>
+
+		<!-- Slot syntax is used for backward compatibility with Svelte <=4. -->
+		<SliceSimulator let:slices>
+			<SliceZone {slices} {components} />
+		</SliceSimulator>
+	`;
+
+	const v4 = dedent`
+		<script>
+			import { SliceSimulator, SliceZone } from '@prismicio/svelte';
+			import { components } from '$lib/slices';
+		</script>
+
+		<SliceSimulator let:slices>
+			<SliceZone {slices} {components} />
+		</SliceSimulator>
+	`;
+
+	return version <= 4 ? v4 : v5;
+}
+
+export function previewAPIRouteTemplate(args: { typescript: boolean }): string {
+	const { typescript } = args;
+
+	if (typescript) {
+		return dedent`
+			import { redirectToPreviewURL } from '@prismicio/svelte/kit';
+			import { createClient } from '$lib/prismicio';
+			import type { RequestHandler } from "./$types";
+
+			export const GET: RequestHandler = async ({ fetch, request, cookies }) => {
+				const client = createClient({ fetch });
+
+				return await redirectToPreviewURL({ client, request, cookies });
+			}
+		`;
+	}
+
+	return dedent`
+		import { redirectToPreviewURL } from '@prismicio/svelte/kit';
+		import { createClient } from '$lib/prismicio';
+
+		/* @type {import("./$types").RequestHandler} */
+		export async function GET({ fetch, request, cookies }) {
+			const client = createClient({ fetch });
+
+			return await redirectToPreviewURL({ client, request, cookies });
+		}
+	`;
+}
+
+export function rootLayoutTemplate(args: { version: number }): string {
+	const { version } = args;
+
+	const v5 = dedent`
+		<script>
+			import { isFilled, asImageSrc } from '@prismicio/client';
+			import { PrismicPreview } from '@prismicio/svelte/kit';
+			import { page } from '$app/state';
+			import { repositoryName } from '$lib/prismicio';
+
+			const { children } = $props();
+		</script>
+
+		<svelte:head>
+			<title>{page.data.page?.data.meta_title}</title>
+			<meta property="og:title" content={page.data.page?.data.meta_title} />
+			{#if isFilled.keyText(page.data.page?.data.meta_description)}
+				<meta name="description" content={page.data.page.data.meta_description} />
+				<meta property="og:description" content={page.data.page.data.meta_description} />
+			{/if}
+			{#if isFilled.image(page.data.page?.data.meta_image)}
+				<meta property="og:image" content={asImageSrc(page.data.page.data.meta_image)} />
+			{/if}
+		</svelte:head>
+		{@render children()}
+		<PrismicPreview {repositoryName} />
+	`;
+
+	const v4 = dedent`
+		<script>
+			import { isFilled, asImageSrc } from '@prismicio/client';
+			import { PrismicPreview } from '@prismicio/svelte/kit';
+			import { page } from '$app/state';
+			import { repositoryName } from '$lib/prismicio';
+		</script>
+
+		<svelte:head>
+			<title>{page.data.page?.data.meta_title}</title>
+			<meta property="og:title" content={page.data.page?.data.meta_title} />
+			{#if isFilled.keyText(page.data.page?.data.meta_description)}
+				<meta name="description" content={page.data.page.data.meta_description} />
+				<meta property="og:description" content={page.data.page.data.meta_description} />
+			{/if}
+			{#if isFilled.image(page.data.page?.data.meta_image)}
+				<meta property="og:image" content={asImageSrc(page.data.page.data.meta_image)} />
+			{/if}
+		</svelte:head>
+		<slot />
+		<PrismicPreview {repositoryName} />
+	`;
+
+	return version <= 4 ? v4 : v5;
+}
+
+const SLICE_MARKUP = dedent`
+<section data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
+	Placeholder component for {slice.slice_type} (variation: {slice.variation}) slices.
+	<br />
+	<strong>You can edit this slice directly in your code editor.</strong>
+</section>
+`;
+
+export function sliceTemplate(args: {
+	name: string;
+	typescript: boolean;
+	version: number;
+}): string {
+	const { name, typescript, version } = args;
+
+	const pascalName = pascalCase(name);
+
+	const v5TS = dedent`
+		<script lang="ts">
+			import type { Content } from '@prismicio/client';
+			import type { SliceComponentProps } from '@prismicio/svelte';
+
+			type Props = SliceComponentProps<Content.${pascalName}Slice>;
+
+			const { slice }: Props = $props();
+		</script>
+
+		${SLICE_MARKUP}
+	`;
+
+	const v5JS = dedent`
+		<script>
+			/* @typedef {import("@prismicio/client").Content} Content */
+			/* @typedef {import("@prismicio/svelte").SliceComponentProps} SliceComponentProps */
+
+			/* @type {SliceComponentProps<Content.${pascalName}Slice>} */
+			const { slice } = $props();
+		</script>
+
+		${SLICE_MARKUP}
+	`;
+
+	const v4TS = dedent`
+		<script lang="ts">
+			import type { Content } from '@prismicio/client';
+
+			export let slice: Content.${pascalName}Slice;
+		</script>
+
+		${SLICE_MARKUP}
+	`;
+
+	const v4JS = dedent`
+		<script>
+			/** @type {import("@prismicio/client").Content.${pascalName}Slice} */
+			export let slice;
+		</script>
+
+		${SLICE_MARKUP}
+	`;
+
+	if (typescript) {
+		return version <= 4 ? v4TS : v5TS;
+	}
+
+	return version <= 4 ? v4JS : v5JS;
+}