@slicemachine/adapter-sveltekit 0.3.78-beta.8 → 0.3.78

package/src/hooks/documentation-read.templates.ts

@@ -0,0 +1,170 @@
+import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+import { source as svelte, source as ts, source as js } from "common-tags";
+
+export function dataFileTemplate(args: {
+	model: CustomType;
+	typescript: boolean;
+}): string {
+	const { model, typescript } = args;
+
+	const repeatableTS = ts`
+		import { createClient } from "$lib/prismicio";
+		import type { PageServerLoad, EntryGenerator } from './$types';
+
+		export const load: PageServerLoad = async ({ params, fetch, cookies }) => {
+			const client = createClient({ fetch, cookies });
+
+			const page = await client.getByUID("${model.id}", params.uid);
+
+			return {
+				page,
+			};
+		}
+
+		export const entries: EntryGenerator = async () => {
+			const client = createClient();
+
+			const pages = await client.getAllByType("${model.id}");
+
+			return pages.map((page) => {
+				return { uid: page.uid };
+			});
+		}
+	`;
+
+	const nonrepeatableTS = ts`
+		import { createClient } from "$lib/prismicio";
+		import type { PageServerLoad, EntryGenerator } from './$types';
+
+		export const load: PageServerLoad = async ({ params, fetch, cookies }) => {
+			const client = createClient({ fetch, cookies });
+
+			const page = await client.getSingle("${model.id}");
+
+			return {
+				page,
+			};
+		}
+
+		export const entries: EntryGenerator = async () => {
+			return [{}]
+		}
+	`;
+
+	const repeatableJS = js`
+		import { createClient } from "$lib/prismicio";
+
+		/* @type {import("./$types").PageServerLoad} */
+		export async function load({ params, fetch, cookies }) {
+			const client = createClient({ fetch, cookies });
+
+			const page = await client.getByUID("${model.id}", params.uid);
+
+			return {
+				page,
+			};
+		}
+
+		/* @type {import("./$types").EntryGenerator} */
+		export async function entries() {
+			const client = createClient();
+
+			const pages = await client.getAllByType("${model.id}");
+
+			return pages.map((page) => {
+				return { uid: page.uid };
+			});
+		}
+	`;
+
+	const nonrepeatableJS = js`
+		import { createClient } from "$lib/prismicio";
+
+		/* @type {import("./$types").PageServerLoad} */
+		export async function load({ params, fetch, cookies }) {
+			const client = createClient({ fetch, cookies });
+
+			const page = await client.getSingle("${model.id}");
+
+			return {
+				page,
+			};
+		}
+
+		/* @type {import("./$types").EntryGenerator} */
+		export async function entries() {
+			return [{}]
+		}
+	`;
+
+	if (typescript) {
+		return model.repeatable ? repeatableTS : nonrepeatableTS;
+	}
+
+	return model.repeatable ? repeatableJS : nonrepeatableJS;
+}
+
+export function componentFileTemplate(args: {
+	typescript: boolean;
+	version: number;
+}): string {
+	const { typescript, version } = args;
+
+	const v5TS = svelte`
+		<script lang="ts">
+			import { SliceZone } from "@prismicio/svelte";
+
+			import { components } from "$lib/slices";
+			import type { PageProps } from "./$types";
+
+			const { data }: PageProps = $props();
+		</script>
+
+		<SliceZone slices={data.page.data.slices} {components} />
+	`;
+
+	const v5JS = svelte`
+		<script>
+			import { SliceZone } from "@prismicio/svelte";
+
+			import { components } from "$lib/slices";
+
+			/* @type {import("./$types").PageProps} */
+			const { data } = $props();
+		</script>
+
+		<SliceZone slices={data.page.data.slices} {components} />
+	`;
+
+	const v4TS = svelte`
+		<script lang="ts">
+			import { SliceZone } from "@prismicio/svelte";
+
+			import { components } from "$lib/slices";
+			import type { PageData } from "./$types";
+
+			export let data: PageData;
+		</script>
+
+		<SliceZone slices={data.page.data.slices} {components} />
+	`;
+
+	const v4JS = svelte`
+		<script>
+			import { SliceZone } from "@prismicio/svelte";
+
+			import { components } from "$lib/slices";
+
+			/* @type {import("./$types").PageData} */
+			export let data;
+		</script>
+
+		<SliceZone slices={data.page.data.slices} {components} />
+	`;
+
+	if (typescript) {
+		return version <= 4 ? v4TS : v5TS;
+	}
+
+	return version <= 4 ? v4JS : v5JS;
+}

package/src/hooks/documentation-read.ts

@@ -3,8 +3,14 @@ import { source } from "common-tags";
 import type { DocumentationReadHook } from "@slicemachine/plugin-kit";
 
 import { getJSFileExtension } from "../lib/getJSFileExtension";
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
 
 import type { PluginOptions } from "../types";
+import {
+	componentFileTemplate,
+	dataFileTemplate,
+} from "./documentation-read.templates";
+import { getSvelteMajor } from "../lib/getSvelteMajor";
 
 const nestRouteFilePath = (filePath: string, nesting: string): string => {
 	return [
@@ -22,68 +28,17 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
 		const { model } = data.data;
 
 		const pageDataExtension = await getJSFileExtension({ helpers, options });
+		const pageDataLanguage =
+			pageDataExtension === "ts" ? "typescript" : "javascript";
+		const typescript = await checkIsTypeScriptProject({ options, helpers });
 
-		const routePath = `src/routes/${model.repeatable ? "[uid]" : model.id}`;
+		const routePath = `src/routes/[[preview=preview]]/${
+			model.repeatable ? "[uid]" : model.id
+		}`;
 		const dataFilePath = `${routePath}/+page.server.${pageDataExtension}`;
 		const componentFilePath = `${routePath}/+page.svelte`;
 
-		let dataFileContent: string;
-		if (model.repeatable) {
-			dataFileContent = source`
-				import { createClient } from "$lib/prismicio";
-
-				export async function load({ params, fetch, cookies }) {
-					const client = createClient({ fetch, cookies });
-
-					const page = await client.getByUID("${model.id}", params.uid);
-
-					return {
-						page,
-					};
-				}
-
-				export async function entries() {
-					const client = createClient();
-
-					const pages = await client.getAllByType("${model.id}");
-
-					return pages.map((page) => {
-						return { uid: page.uid };
-					});
-				}
-			`;
-		} else {
-			dataFileContent = source`
-				import { createClient } from "$lib/prismicio";
-
-				export async function load({ params, fetch, cookies }) {
-					const client = createClient({ fetch, cookies });
-
-					const page = await client.getSingle("${model.id}");
-
-					return {
-						page,
-					};
-				}
-
-				export async function entries() {
-					return [{}]
-				}
-			`;
-		}
-
-		let componentFileContent = source`
-			<script>
-				import { SliceZone } from "@prismicio/svelte";
-
-				import { components } from "$lib/slices";
-
-				export let data;
-			</script>
-
-			<SliceZone slices={data.page.data.slices} {components} />
-		`;
-
+		let dataFileContent = dataFileTemplate({ model, typescript });
 		if (options.format) {
 			dataFileContent = await helpers.format(
 				dataFileContent,
@@ -92,6 +47,13 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
 					includeNewlineAtEnd: false,
 				},
 			);
+		}
+
+		let componentFileContent = componentFileTemplate({
+			typescript,
+			version: await getSvelteMajor(),
+		});
+		if (options.format) {
 			componentFileContent = await helpers.format(
 				componentFileContent,
 				helpers.joinPathFromRoot(componentFilePath),
@@ -121,7 +83,7 @@ export const documentationRead: DocumentationReadHook<PluginOptions> = async (
 
 					Paste in this code:
 
-					${`~~~${pageDataExtension} [${dataFilePath}]\n${dataFileContent}\n~~~`}
+					${`~~~${pageDataLanguage} [${dataFilePath}]\n${dataFileContent}\n~~~`}
 
 					## Create your ${model.label}'s page component
 

package/src/hooks/project-init.templates.ts

@@ -0,0 +1,208 @@
+import { source as svelte, source as ts, source as js } from "common-tags";
+
+import { PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME } from "../constants";
+
+export function prismicIOFileTemplate(args: { typescript: boolean }): string {
+	const { typescript } = args;
+
+	const TS = ts`
+		import { createClient as baseCreateClient, type Route } from "@prismicio/client";
+		import { type CreateClientConfig, enableAutoPreviews } from '@prismicio/svelte/kit';
+		import sm from "../../slicemachine.config.json";
+
+		/**
+		 * The project's Prismic repository name.
+		 */
+		export const repositoryName =
+			import${"."}meta${"."}env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || sm.repositoryName;
+
+		/**
+		 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
+		 *
+		 * {@link https://prismic.io/docs/route-resolver}
+		 */
+		// 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;
+		};
+	`;
+
+	const JS = js`
+		import { createClient as baseCreateClient } from "@prismicio/client";
+		import { enableAutoPreviews } from '@prismicio/svelte/kit';
+		import sm from "../../slicemachine.config.json";
+
+		/**
+		 * The project's Prismic repository name.
+		 */
+		export const repositoryName =
+			import${"."}meta${"."}env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || sm.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 {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 = prismic.createClient(repositoryName, {
+				routes,
+				...config,
+			});
+
+			enableAutoPreviews({ client, cookies });
+
+			return client;
+		};
+	`;
+
+	return typescript ? TS : JS;
+}
+
+export function sliceSimulatorPageTemplate(args: { version: number }): string {
+	const { version } = args;
+
+	const v5 = svelte`
+		<script>
+			import { SliceSimulator } from '@slicemachine/adapter-sveltekit/simulator';
+			import { 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 = svelte`
+		<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>
+	`;
+
+	return version <= 4 ? v4 : v5;
+}
+
+export function previewAPIRouteTemplate(args: { typescript: boolean }): string {
+	const { typescript } = args;
+
+	const TS = ts`
+		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 });
+		}
+	`;
+
+	const JS = js`
+		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 });
+		}
+	`;
+
+	return typescript ? TS : JS;
+}
+
+export function rootLayoutTemplate(args: { version: number }): string {
+	const { version } = args;
+
+	const v5 = svelte`
+		<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 = svelte`
+		<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;
+}