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

package/src/hooks/snippet-read.ts

@@ -0,0 +1,163 @@
+import type {
+	SliceMachineHelpers,
+	SnippetReadHook,
+} from "@slicemachine/plugin-kit";
+import { stripIndent } from "common-tags";
+
+import type { PluginOptions } from "../types";
+
+const dotPath = (...segments: (string | string[])[]): string => {
+	return segments.flat().join(".");
+};
+
+const format = async (input: string, helpers: SliceMachineHelpers) => {
+	const formattedInput = await helpers.format(input, undefined, {
+		includeNewlineAtEnd: false,
+		prettier: {
+			plugins: ["prettier-plugin-svelte"],
+			parser: "svelte",
+		},
+	});
+
+	return formattedInput;
+};
+
+export const snippetRead: SnippetReadHook<PluginOptions> = async (
+	data,
+	{ helpers },
+) => {
+	const { fieldPath } = data;
+
+	const label = "Svelte";
+
+	switch (data.model.type) {
+		case "StructuredText": {
+			return [
+				{
+					label: `${label} (components)`,
+					language: "svelte",
+					code: await format(
+						stripIndent`
+							<PrismicRichText field={${dotPath(fieldPath)}} />
+						`,
+						helpers,
+					),
+				},
+				{
+					label: `${label} (plain text)`,
+					language: "svelte",
+					code: await format(
+						stripIndent`
+							<PrismicText field={${dotPath(fieldPath)}} />
+						`,
+						helpers,
+					),
+				},
+			];
+		}
+
+		case "Link": {
+			return {
+				label,
+				language: "svelte",
+				code: await format(
+					stripIndent`
+						<PrismicLink field={${dotPath(fieldPath)}}>Link</PrismicLink>
+					`,
+					helpers,
+				),
+			};
+		}
+
+		case "Image": {
+			return {
+				label,
+				language: "svelte",
+				code: await format(
+					stripIndent`
+							<PrismicImage field={${dotPath(fieldPath)}} />
+						`,
+					helpers,
+				),
+			};
+		}
+
+		case "Group": {
+			const code = await format(
+				stripIndent`
+					{#each ${dotPath(fieldPath)} as item}
+						<!-- Render content for item -->
+					{/each}
+				`,
+				helpers,
+			);
+
+			return {
+				label,
+				language: "svelte",
+				code,
+			};
+		}
+
+		case "Slices": {
+			const code = await format(
+				stripIndent`
+					<SliceZone
+					  slices={${dotPath(fieldPath)}}
+					  {components}
+					/>
+				`,
+				helpers,
+			);
+
+			return {
+				label,
+				language: "svelte",
+				code,
+			};
+		}
+
+		case "GeoPoint": {
+			const code = await format(
+				stripIndent`
+					{${dotPath(fieldPath, "latitude")}}, {${dotPath(fieldPath, "longitude")}}
+				`,
+				helpers,
+			);
+
+			return {
+				label,
+				language: "svelte",
+				code,
+			};
+		}
+
+		case "Embed": {
+			const code = await format(
+				stripIndent`
+					{@html ${dotPath(fieldPath, "html")}}
+				`,
+				helpers,
+			);
+
+			return {
+				label,
+				language: "svelte",
+				code,
+			};
+		}
+
+		default: {
+			return {
+				label,
+				language: "svelte",
+				code: await format(
+					stripIndent`
+						{${dotPath(fieldPath)}}
+					`,
+					helpers,
+				),
+			};
+		}
+	}
+};

package/src/index.ts

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

package/src/lib/checkIsTypeScriptProject.ts

@@ -0,0 +1,18 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+import { checkIsTypeScriptProject as baseCheckIsTypeScriptProject } from "@slicemachine/plugin-kit/fs";
+
+import { PluginOptions } from "../types";
+
+type CheckIsTypeScriptProjectArgs = {
+	helpers: SliceMachineContext<PluginOptions>["helpers"];
+	options: SliceMachineContext<PluginOptions>["options"];
+};
+
+export const checkIsTypeScriptProject = async (
+	args: CheckIsTypeScriptProjectArgs,
+): Promise<boolean> => {
+	return (
+		args.options.typescript ??
+		baseCheckIsTypeScriptProject({ helpers: args.helpers })
+	);
+};

package/src/lib/getJSFileExtension.ts

@@ -0,0 +1,22 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+
+import { PluginOptions } from "../types";
+
+import { checkIsTypeScriptProject } from "./checkIsTypeScriptProject";
+
+type GetJSFileExtensionArgs = Pick<
+	SliceMachineContext<PluginOptions>,
+	"helpers" | "options"
+>;
+
+export const getJSFileExtension = async ({
+	helpers,
+	options,
+}: GetJSFileExtensionArgs): Promise<string> => {
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+
+	return isTypeScriptProject ? "ts" : "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/rejectIfNecessary.ts

@@ -0,0 +1,16 @@
+export const rejectIfNecessary = <
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TPromiseSettledResults extends readonly PromiseSettledResult<any>[],
+>(
+	promiseSettledResults: TPromiseSettledResults,
+): void => {
+	const rejectedReasons = promiseSettledResults
+		.filter(
+			(result): result is PromiseRejectedResult => result.status === "rejected",
+		)
+		.map((result) => result.reason);
+
+	if (rejectedReasons.length > 0) {
+		throw rejectedReasons[0];
+	}
+};

package/src/lib/upsertSliceLibraryIndexFile.ts

@@ -0,0 +1,77 @@
+import { SliceMachineContext } from "@slicemachine/plugin-kit";
+import {
+	buildSliceDirectoryPath,
+	buildSliceLibraryDirectoryPath,
+	writeProjectFile,
+} from "@slicemachine/plugin-kit/fs";
+import { stripIndent } from "common-tags";
+import * as path from "node:path";
+
+import { NON_EDITABLE_FILE_BANNER } from "../constants";
+import { PluginOptions } from "../types";
+
+import { pascalCase } from "./pascalCase";
+import { getJSFileExtension } from "./getJSFileExtension";
+
+type UpsertSliceLibraryIndexFileArgs = {
+	libraryID: string;
+} & SliceMachineContext<PluginOptions>;
+
+export const upsertSliceLibraryIndexFile = async (
+	args: UpsertSliceLibraryIndexFileArgs,
+): Promise<void> => {
+	const slices = await args.actions.readAllSliceModelsForLibrary({
+		libraryID: args.libraryID,
+	});
+
+	const contents = stripIndent`
+		${NON_EDITABLE_FILE_BANNER}
+
+		${(
+			await Promise.all(
+				slices.map(async (slice) => {
+					const dirName = path.basename(
+						await buildSliceDirectoryPath({
+							model: slice.model,
+							helpers: args.helpers,
+							libraryID: args.libraryID,
+						}),
+					);
+					const componentName = pascalCase(slice.model.name);
+
+					return `import ${componentName} from "./${dirName}/index.svelte";`;
+				}),
+			)
+		).join("\n")}
+
+		export const components = {
+			${slices
+				.map((slice) => {
+					const id = slice.model.id;
+					const componentName = pascalCase(slice.model.name);
+
+					return `${id}: ${componentName},`;
+				})
+				.join("\n")}
+		}
+	`;
+
+	const extension = await getJSFileExtension({
+		helpers: args.helpers,
+		options: args.options,
+	});
+	const filePath = path.join(
+		buildSliceLibraryDirectoryPath({
+			libraryID: args.libraryID,
+			helpers: args.helpers,
+		}),
+		`index.${extension}`,
+	);
+
+	await writeProjectFile({
+		filename: filePath,
+		contents,
+		format: args.options.format,
+		helpers: args.helpers,
+	});
+};

package/src/plugin.ts

@@ -0,0 +1,275 @@
+import { defineSliceMachinePlugin } from "@slicemachine/plugin-kit";
+import {
+	deleteCustomTypeDirectory,
+	deleteCustomTypeFile,
+	deleteSliceDirectory,
+	deleteSliceFile,
+	readCustomTypeFile,
+	readCustomTypeLibrary,
+	readCustomTypeModel,
+	readSliceFile,
+	readSliceLibrary,
+	readSliceModel,
+	renameSlice,
+	upsertGlobalTypeScriptTypes,
+	writeCustomTypeFile,
+	writeCustomTypeModel,
+	writeSliceFile,
+	writeSliceModel,
+} from "@slicemachine/plugin-kit/fs";
+
+import { rejectIfNecessary } from "./lib/rejectIfNecessary";
+import { upsertSliceLibraryIndexFile } from "./lib/upsertSliceLibraryIndexFile";
+
+import { name as pkgName } from "../package.json";
+import { PluginOptions } from "./types";
+
+import { projectInit } from "./hooks/project-init";
+import { sliceCreate } from "./hooks/slice-create";
+import { sliceSimulatorSetupRead } from "./hooks/sliceSimulator-setup-read";
+import { snippetRead } from "./hooks/snippet-read";
+
+export const plugin = defineSliceMachinePlugin<PluginOptions>({
+	meta: {
+		name: pkgName,
+	},
+	defaultOptions: {
+		format: true,
+		generatedTypesFilePath: "./src/prismicio-types.d.ts",
+	},
+	setup({ hook }) {
+		////////////////////////////////////////////////////////////////
+		// project:*
+		////////////////////////////////////////////////////////////////
+
+		hook("project:init", projectInit);
+
+		////////////////////////////////////////////////////////////////
+		// slice:*
+		////////////////////////////////////////////////////////////////
+
+		hook("slice:create", sliceCreate);
+		hook("slice:update", async (data, context) => {
+			await writeSliceModel({
+				libraryID: data.libraryID,
+				model: data.model,
+				...context,
+			});
+
+			await upsertGlobalTypeScriptTypes({
+				filename: context.options.generatedTypesFilePath,
+				format: context.options.format,
+				...context,
+			});
+		});
+		hook("slice:rename", async (data, context) => {
+			await renameSlice({
+				libraryID: data.libraryID,
+				model: data.model,
+				format: context.options.format,
+				...context,
+			});
+
+			rejectIfNecessary(
+				await Promise.allSettled([
+					upsertSliceLibraryIndexFile({
+						libraryID: data.libraryID,
+						...context,
+					}),
+					upsertGlobalTypeScriptTypes({
+						filename: context.options.generatedTypesFilePath,
+						format: context.options.format,
+						...context,
+					}),
+				]),
+			);
+		});
+		hook("slice:delete", async (data, context) => {
+			await deleteSliceDirectory({
+				libraryID: data.libraryID,
+				model: data.model,
+				...context,
+			});
+
+			rejectIfNecessary(
+				await Promise.allSettled([
+					upsertSliceLibraryIndexFile({
+						libraryID: data.libraryID,
+						...context,
+					}),
+					upsertGlobalTypeScriptTypes({
+						filename: context.options.generatedTypesFilePath,
+						format: context.options.format,
+						...context,
+					}),
+				]),
+			);
+		});
+		hook("slice:read", async (data, context) => {
+			return await readSliceModel({
+				libraryID: data.libraryID,
+				sliceID: data.sliceID,
+				...context,
+			});
+		});
+		hook("slice:asset:update", async (data, context) => {
+			await writeSliceFile({
+				libraryID: data.libraryID,
+				sliceID: data.sliceID,
+				filename: data.asset.id,
+				contents: data.asset.data,
+				...context,
+			});
+		});
+		hook("slice:asset:delete", async (data, context) => {
+			await deleteSliceFile({
+				libraryID: data.libraryID,
+				sliceID: data.sliceID,
+				filename: data.assetID,
+				...context,
+			});
+		});
+		hook("slice:asset:read", async (data, context) => {
+			const file = await readSliceFile({
+				libraryID: data.libraryID,
+				sliceID: data.sliceID,
+				filename: data.assetID,
+				...context,
+			});
+
+			return {
+				data: file,
+			};
+		});
+
+		////////////////////////////////////////////////////////////////
+		// slice-library:*
+		////////////////////////////////////////////////////////////////
+
+		hook("slice-library:read", async (data, context) => {
+			return await readSliceLibrary({
+				libraryID: data.libraryID,
+				...context,
+			});
+		});
+
+		////////////////////////////////////////////////////////////////
+		// custom-type:*
+		////////////////////////////////////////////////////////////////
+
+		hook("custom-type:create", async (data, context) => {
+			await writeCustomTypeModel({
+				model: data.model,
+				format: context.options.format,
+				...context,
+			});
+
+			await upsertGlobalTypeScriptTypes({
+				filename: context.options.generatedTypesFilePath,
+				format: context.options.format,
+				...context,
+			});
+		});
+		hook("custom-type:update", async (data, context) => {
+			await writeCustomTypeModel({
+				model: data.model,
+				format: context.options.format,
+				...context,
+			});
+
+			await upsertGlobalTypeScriptTypes({
+				filename: context.options.generatedTypesFilePath,
+				format: context.options.format,
+				...context,
+			});
+		});
+		hook("custom-type:rename", async (data, context) => {
+			await writeCustomTypeModel({
+				model: data.model,
+				format: context.options.format,
+				...context,
+			});
+
+			await upsertGlobalTypeScriptTypes({
+				filename: context.options.generatedTypesFilePath,
+				format: context.options.format,
+				...context,
+			});
+		});
+		hook("custom-type:delete", async (data, context) => {
+			await deleteCustomTypeDirectory({
+				customTypeID: data.model.id,
+				...context,
+			});
+
+			await upsertGlobalTypeScriptTypes({
+				filename: context.options.generatedTypesFilePath,
+				format: context.options.format,
+				...context,
+			});
+		});
+		hook("custom-type:read", async (data, context) => {
+			return await readCustomTypeModel({
+				customTypeID: data.id,
+				...context,
+			});
+		});
+		hook("custom-type:asset:update", async (data, context) => {
+			await writeCustomTypeFile({
+				customTypeID: data.customTypeID,
+				filename: data.asset.id,
+				contents: data.asset.data,
+				...context,
+			});
+		});
+		hook("custom-type:asset:delete", async (data, context) => {
+			await deleteCustomTypeFile({
+				customTypeID: data.customTypeID,
+				filename: data.assetID,
+				...context,
+			});
+		});
+		hook("custom-type:asset:read", async (data, context) => {
+			const file = await readCustomTypeFile({
+				customTypeID: data.customTypeID,
+				filename: data.assetID,
+				...context,
+			});
+
+			return {
+				data: file,
+			};
+		});
+
+		////////////////////////////////////////////////////////////////
+		// custom-type-library:*
+		////////////////////////////////////////////////////////////////
+
+		hook("custom-type-library:read", async (_data, context) => {
+			return await readCustomTypeLibrary({
+				helpers: context.helpers,
+			});
+		});
+
+		////////////////////////////////////////////////////////////////
+		// snippet:*
+		////////////////////////////////////////////////////////////////
+
+		hook("snippet:read", snippetRead);
+
+		////////////////////////////////////////////////////////////////
+		// documentation:*
+		////////////////////////////////////////////////////////////////
+
+		hook("documentation:read", async (_data, _context) => {
+			// TODO
+			return [];
+		});
+
+		////////////////////////////////////////////////////////////////
+		// slice-simulator:*
+		////////////////////////////////////////////////////////////////
+
+		hook("slice-simulator:setup:read", sliceSimulatorSetupRead);
+	},
+});

package/src/simulator/SliceSimulator.svelte

@@ -0,0 +1,65 @@
+<script>
+	import {
+		SimulatorManager,
+		StateEventType,
+		disableEventHandler,
+		getDefaultMessage,
+		getDefaultProps,
+		getDefaultSlices,
+		onClickHandler,
+		simulatorClass,
+		simulatorRootClass,
+	} from "@prismicio/simulator/kit";
+
+	const defaultProps = getDefaultProps();
+
+	export let zIndex = defaultProps.zIndex;
+	export let background = defaultProps.background;
+
+	let slices = getDefaultSlices();
+	let message = getDefaultMessage();
+
+	if (typeof window !== "undefined") {
+		const simulatorManager = new SimulatorManager();
+
+		simulatorManager.state.on(
+			StateEventType.Slices,
+			(newSlices) => {
+				slices = newSlices;
+			},
+			"simulator-slices",
+		);
+		simulatorManager.state.on(
+			StateEventType.Message,
+			(newMessage) => {
+				message = newMessage;
+			},
+			"simulator-message",
+		);
+
+		simulatorManager.init();
+	}
+</script>
+
+<div
+	class="{simulatorClass} {$$props.class}"
+	style="z-index: {zIndex}; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: auto; background: {background}"
+>
+	{#if message}
+		<article>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html message}
+		</article>
+	{:else if slices.length}
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			id="root"
+			class={simulatorRootClass}
+			on:click={onClickHandler}
+			on:submit={disableEventHandler}
+			on:keypress={disableEventHandler}
+		>
+			<slot {slices} />
+		</div>
+	{/if}
+</div>

package/src/simulator/index.ts

@@ -0,0 +1 @@
+export { default as SliceSimulator } from "./SliceSimulator.svelte";

package/src/types.ts

@@ -0,0 +1,23 @@
+export type PluginOptions = {
+	/**
+	 * Determines if generated files should be formatted using Prettier.
+	 *
+	 * @defaultValue `true`
+	 */
+	format?: boolean;
+
+	/**
+	 * The filepath at which generated TypeScript types will be saved.
+	 *
+	 * @defaultValue `prismicio-types.d.ts`
+	 */
+	generatedTypesFilePath?: string;
+
+	/**
+	 * Determines if generated files should be written in TypeScript or
+	 * JavaScript.
+	 *
+	 * @defaultValue `true` if the project contains a `tsconfig.json`, `false` otherwise.
+	 */
+	typescript?: boolean;
+};