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

package/package.json

@@ -0,0 +1,107 @@
+{
+	"name": "@slicemachine/adapter-nuxt",
+	"version": "0.0.2-dev-plugins-m3.0",
+	"description": "Slice Machine adapter for Nuxt 3.",
+	"keywords": [
+		"typescript",
+		"prismic"
+	],
+	"repository": {
+		"type": "git",
+		"url": "ssh://git@github.com/prismicio/slice-machine.git",
+		"directory": "packages/adapter-nuxt"
+	},
+	"license": "Apache-2.0",
+	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
+	"type": "module",
+	"exports": {
+		".": {
+			"require": "./dist/index.cjs",
+			"import": "./dist/index.js"
+		},
+		"./simulator": {
+			"require": "./dist/simulator.cjs",
+			"import": "./dist/simulator.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"main": "dist/index.cjs",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"typesVersions": {
+		"*": {
+			"*": [
+				"dist/index.d.ts"
+			],
+			"simulator": [
+				"dist/simulator/index.d.ts"
+			]
+		}
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"format": "prettier --write .",
+		"lint": "eslint --ext .js,.ts .",
+		"prepublishOnly": "npm run build",
+		"size": "size-limit",
+		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size",
+		"types": "tsc --noEmit",
+		"unit": "vitest run --coverage",
+		"unit:watch": "vitest watch",
+		"depcheck": "depcheck --config=.depcheckrc",
+		"audit": "better-npm-audit audit -l high -p"
+	},
+	"dependencies": {
+		"@prismicio/slice-simulator-core": "^0.2.7",
+		"@prismicio/types-internal": "2.0.0-alpha.9",
+		"@slicemachine/plugin-kit": "0.1.8-dev-plugins-m3.0",
+		"common-tags": "^1.8.2",
+		"fs-extra": "^11.1.0",
+		"magicast": "^0.2.1",
+		"node-fetch": "^3.3.1",
+		"pascal-case": "^3.1.2",
+		"prismic-ts-codegen": "^0.1.5"
+	},
+	"devDependencies": {
+		"@prismicio/mock": "^0.2.0",
+		"@size-limit/preset-small-lib": "^8.2.4",
+		"@types/common-tags": "^1.8.1",
+		"@types/fs-extra": "^11.0.1",
+		"@types/prettier": "^2.7.2",
+		"@types/semver": "^7.3.13",
+		"@typescript-eslint/eslint-plugin": "^5.55.0",
+		"@typescript-eslint/parser": "^5.55.0",
+		"@vitest/coverage-c8": "^0.27.3",
+		"better-npm-audit": "^3.7.3",
+		"depcheck": "^1.4.3",
+		"eslint": "^8.37.0",
+		"eslint-config-prettier": "^8.7.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-tsdoc": "^0.2.17",
+		"nuxt": "^3.3.3",
+		"prettier": "^2.8.4",
+		"prettier-plugin-jsdoc": "^0.4.2",
+		"size-limit": "^8.2.4",
+		"ts-morph": "^17.0.1",
+		"typescript": "^4.9.5",
+		"vite": "^4.1.4",
+		"vite-plugin-sdk": "^0.1.1",
+		"vitest": "^0.27.3",
+		"vue": "^3.2.47"
+	},
+	"peerDependencies": {
+		"nuxt": "^3.0.0"
+	},
+	"engines": {
+		"node": ">=14.15.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "9223acb43eebf3f0e1731090b48c44ebd96f4aae"
+}

package/src/constants.ts

@@ -0,0 +1,5 @@
+/**
+ * Banner text added to files that should not be edited by users.
+ */
+export const NON_EDITABLE_FILE_BANNER =
+	"// Code generated by Slice Machine. DO NOT EDIT.";

package/src/hooks/customType-asset-delete.ts

@@ -0,0 +1,18 @@
+import type { CustomTypeAssetDeleteHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+
+import { buildCustomTypeAssetPath } from "../lib/buildCustomTypeAssetPath";
+
+import type { PluginOptions } from "../types";
+
+export const customTypeAssetDelete: CustomTypeAssetDeleteHook<
+	PluginOptions
+> = async (data, context) => {
+	const filePath = buildCustomTypeAssetPath({
+		customTypeID: data.customTypeID,
+		assetID: data.assetID,
+		helpers: context.helpers,
+	});
+
+	await fs.rm(filePath);
+};

package/src/hooks/customType-asset-read.ts

@@ -0,0 +1,22 @@
+import type { CustomTypeAssetReadHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+
+import { buildCustomTypeAssetPath } from "../lib/buildCustomTypeAssetPath";
+
+import type { PluginOptions } from "../types";
+
+export const customTypeAssetRead: CustomTypeAssetReadHook<
+	PluginOptions
+> = async (data, context) => {
+	const filePath = buildCustomTypeAssetPath({
+		customTypeID: data.customTypeID,
+		assetID: data.assetID,
+		helpers: context.helpers,
+	});
+
+	const assetData = await fs.readFile(filePath);
+
+	return {
+		data: assetData,
+	};
+};

package/src/hooks/customType-asset-update.ts

@@ -0,0 +1,20 @@
+import type { CustomTypeAssetUpdateHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+import { buildCustomTypeAssetPath } from "../lib/buildCustomTypeAssetPath";
+
+import type { PluginOptions } from "../types";
+
+export const customTypeAssetUpdate: CustomTypeAssetUpdateHook<
+	PluginOptions
+> = async (data, context) => {
+	const filePath = buildCustomTypeAssetPath({
+		customTypeID: data.customTypeID,
+		assetID: data.asset.id,
+		helpers: context.helpers,
+	});
+
+	await fs.mkdir(path.dirname(filePath), { recursive: true });
+	await fs.writeFile(filePath, data.asset.data);
+};

package/src/hooks/customType-create.ts

@@ -0,0 +1,45 @@
+import type {
+	CustomTypeCreateHook,
+	CustomTypeCreateHookData,
+	SliceMachineContext,
+} from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+import { buildCustomTypeDirectoryPath } from "../lib/buildCustomTypeDirectoryPath";
+import { upsertGlobalContentTypes } from "../lib/upsertGlobalContentTypes";
+
+import type { PluginOptions } from "../types";
+
+type Args = {
+	dir: string;
+	data: CustomTypeCreateHookData;
+} & SliceMachineContext<PluginOptions>;
+
+const createModelFile = async ({ dir, data, helpers, options }: Args) => {
+	const filePath = path.join(dir, "index.json");
+
+	let contents = JSON.stringify(data.model);
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath);
+	}
+
+	await fs.writeFile(filePath, contents);
+};
+
+export const customTypeCreate: CustomTypeCreateHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	const dir = buildCustomTypeDirectoryPath({
+		customTypeID: data.model.id,
+		helpers: context.helpers,
+	});
+
+	await fs.mkdir(dir, { recursive: true });
+
+	await createModelFile({ dir, data, ...context });
+
+	await upsertGlobalContentTypes(context);
+};

package/src/hooks/customType-delete.ts

@@ -0,0 +1,21 @@
+import type { CustomTypeDeleteHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+
+import { buildCustomTypeDirectoryPath } from "../lib/buildCustomTypeDirectoryPath";
+import { upsertGlobalContentTypes } from "../lib/upsertGlobalContentTypes";
+
+import type { PluginOptions } from "../types";
+
+export const customTypeDelete: CustomTypeDeleteHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	const dir = buildCustomTypeDirectoryPath({
+		customTypeID: data.model.id,
+		helpers: context.helpers,
+	});
+
+	await fs.rm(dir, { recursive: true });
+
+	await upsertGlobalContentTypes(context);
+};

package/src/hooks/customType-read.ts

@@ -0,0 +1,24 @@
+import type { CustomTypeReadHook } from "@slicemachine/plugin-kit";
+import type { CustomType } from "@prismicio/types-internal/lib/customtypes";
+import * as path from "node:path";
+
+import { buildCustomTypeDirectoryPath } from "../lib/buildCustomTypeDirectoryPath";
+import { readJSONFile } from "../lib/readJSONFile";
+
+import type { PluginOptions } from "../types";
+
+export const customTypeRead: CustomTypeReadHook<PluginOptions> = async (
+	data,
+	{ helpers },
+) => {
+	const filePath = path.join(
+		buildCustomTypeDirectoryPath({ customTypeID: data.id, helpers }),
+		"index.json",
+	);
+
+	const model = await readJSONFile<CustomType>(filePath);
+
+	return {
+		model,
+	};
+};

package/src/hooks/customType-rename.ts

@@ -0,0 +1,3 @@
+import { customTypeCreate } from "./customType-create";
+
+export const customTypeRename = customTypeCreate;

package/src/hooks/customType-update.ts

@@ -0,0 +1,3 @@
+import { customTypeCreate } from "./customType-create";
+
+export const customTypeUpdate = customTypeCreate;

package/src/hooks/customTypeLibrary-read.ts

@@ -0,0 +1,53 @@
+import type { CustomTypeLibraryReadHook } from "@slicemachine/plugin-kit";
+import type { CustomType } from "@prismicio/types-internal/lib/customtypes";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+import { buildCustomTypeLibraryDirectoryPath } from "../lib/buildCustomTypeLibraryDirectoryPath";
+import { readJSONFile } from "../lib/readJSONFile";
+
+import type { PluginOptions } from "../types";
+
+const isCustomTypeModel = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	input: any,
+): input is CustomType => {
+	return typeof input === "object" && input !== null && "json" in input;
+};
+
+export const customTypeLibraryRead: CustomTypeLibraryReadHook<
+	PluginOptions
+> = async (_data, { helpers }) => {
+	const dirPath = buildCustomTypeLibraryDirectoryPath({ helpers });
+
+	// Ensure the directory exists.
+	await fs.mkdir(dirPath, { recursive: true });
+
+	const childDirs = await fs.readdir(dirPath);
+
+	const ids: string[] = [];
+	await Promise.all(
+		childDirs.map(async (childDir) => {
+			const childDirContents = await fs.readdir(path.join(dirPath, childDir), {
+				withFileTypes: true,
+			});
+			const isCustomTypeDir = childDirContents.some((entry) => {
+				return entry.isFile() && entry.name === "index.json";
+			});
+
+			if (isCustomTypeDir) {
+				const modelPath = path.join(dirPath, childDir, "index.json");
+
+				const modelContents = await readJSONFile(modelPath);
+
+				if (isCustomTypeModel(modelContents)) {
+					ids.push(modelContents.id);
+				}
+			}
+		}),
+	);
+
+	return {
+		ids: ids.sort(),
+	};
+};

package/src/hooks/project-init.ts

@@ -0,0 +1,163 @@
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+import type {
+	ProjectInitHook,
+	ProjectInitHookData,
+	SliceMachineContext,
+} from "@slicemachine/plugin-kit";
+import { stripIndent } from "common-tags";
+import { loadFile, writeFile, type ASTNode } from "magicast";
+
+import { checkPathExists } from "../lib/checkPathExists";
+import { rejectIfNecessary } from "../lib/rejectIfNecessary";
+import { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
+
+import type { PluginOptions } from "../types";
+
+const NUXT_PRISMIC = "@nuxtjs/prismic";
+
+type InstallDependenciesArgs = {
+	installDependencies: ProjectInitHookData["installDependencies"];
+};
+
+const installDependencies = async ({
+	installDependencies,
+}: InstallDependenciesArgs) => {
+	try {
+		await installDependencies({
+			dependencies: {
+				[NUXT_PRISMIC]: "^3.0.0",
+			},
+			dev: true,
+		});
+	} catch (error) {
+		// TODO: Remove when latest is published and documented
+		// Fallback to RC if latest is still not available
+		await installDependencies({
+			dependencies: {
+				[NUXT_PRISMIC]: "rc",
+			},
+			dev: true,
+		});
+	}
+};
+
+type ConfigurePrismicModuleArgs = SliceMachineContext<PluginOptions>;
+
+const configurePrismicModule = async ({
+	helpers,
+	project,
+}: ConfigurePrismicModuleArgs) => {
+	let nuxtConfigPath = helpers.joinPathFromRoot("nuxt.config.js");
+
+	if (!(await checkPathExists(nuxtConfigPath))) {
+		nuxtConfigPath = helpers.joinPathFromRoot("nuxt.config.ts");
+
+		// nuxt.config.* not found
+		if (!(await checkPathExists(nuxtConfigPath))) {
+			return;
+		}
+	}
+
+	const mod = await loadFile(nuxtConfigPath);
+	const config =
+		mod.exports.default.$type === "function-call"
+			? mod.exports.default.$args[0]
+			: mod.exports.default;
+
+	// Register Prismic module
+	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
+	const endpoint = project.config.repositoryName;
+	if (!hasInlinedConfiguration) {
+		config.prismic ||= {};
+		config.prismic.endpoint = endpoint;
+	}
+
+	await writeFile(mod as unknown as ASTNode, nuxtConfigPath);
+};
+
+type CreateSliceSimulatorPageArgs = SliceMachineContext<PluginOptions>;
+
+const createSliceSimulatorPage = async ({
+	helpers,
+	options,
+}: CreateSliceSimulatorPageArgs) => {
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+
+	const srcPagesDirectoryExists = await checkPathExists(
+		helpers.joinPathFromRoot("src/pages"),
+	);
+
+	const filePath = helpers.joinPathFromRoot(
+		srcPagesDirectoryExists ? "src/pages" : "pages",
+		"slice-simulator.vue",
+	);
+
+	if (await checkPathExists(filePath)) {
+		return;
+	}
+
+	await fs.mkdir(path.dirname(filePath), { recursive: true });
+
+	const scriptAttributes = ["setup"];
+	if (isTypeScriptProject) {
+		scriptAttributes.push('lang="ts"');
+	}
+
+	let contents = stripIndent`
+		<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>
+	`;
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath, {
+			prettier: { parser: "vue" },
+		});
+	}
+
+	await fs.writeFile(filePath, contents);
+};
+
+export const projectInit: ProjectInitHook<PluginOptions> = async (
+	{ installDependencies: _installDependencies },
+	context,
+) => {
+	rejectIfNecessary(
+		await Promise.allSettled([
+			await installDependencies({ installDependencies: _installDependencies }),
+			await configurePrismicModule(context),
+			await createSliceSimulatorPage(context),
+		]),
+	);
+};

package/src/hooks/slice-asset-delete.ts

@@ -0,0 +1,21 @@
+import type { SliceAssetDeleteHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+
+import { buildSliceAssetPath } from "../lib/buildSliceAssetPath";
+
+import type { PluginOptions } from "../types";
+
+export const sliceAssetDelete: SliceAssetDeleteHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	const filePath = await buildSliceAssetPath({
+		libraryID: data.libraryID,
+		sliceID: data.sliceID,
+		assetID: data.assetID,
+		helpers: context.helpers,
+		actions: context.actions,
+	});
+
+	await fs.rm(filePath);
+};

package/src/hooks/slice-asset-read.ts

@@ -0,0 +1,25 @@
+import type { SliceAssetReadHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+
+import { buildSliceAssetPath } from "../lib/buildSliceAssetPath";
+
+import type { PluginOptions } from "../types";
+
+export const sliceAssetRead: SliceAssetReadHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	const filePath = await buildSliceAssetPath({
+		libraryID: data.libraryID,
+		sliceID: data.sliceID,
+		assetID: data.assetID,
+		helpers: context.helpers,
+		actions: context.actions,
+	});
+
+	const assetData = await fs.readFile(filePath);
+
+	return {
+		data: assetData,
+	};
+};

package/src/hooks/slice-asset-update.ts

@@ -0,0 +1,23 @@
+import type { SliceAssetUpdateHook } from "@slicemachine/plugin-kit";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+import { buildSliceAssetPath } from "../lib/buildSliceAssetPath";
+
+import type { PluginOptions } from "../types";
+
+export const sliceAssetUpdate: SliceAssetUpdateHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	const filePath = await buildSliceAssetPath({
+		libraryID: data.libraryID,
+		sliceID: data.sliceID,
+		assetID: data.asset.id,
+		helpers: context.helpers,
+		actions: context.actions,
+	});
+
+	await fs.mkdir(path.dirname(filePath), { recursive: true });
+	await fs.writeFile(filePath, data.asset.data);
+};

package/src/hooks/slice-create.ts

@@ -0,0 +1,115 @@
+import type {
+	SliceCreateHook,
+	SliceCreateHookData,
+	SliceMachineContext,
+} from "@slicemachine/plugin-kit";
+import { stripIndent } from "common-tags";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+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 { checkIsTypeScriptProject } from "../lib/checkIsTypeScriptProject";
+import { pascalCase } from "../lib/pascalCase";
+
+import type { PluginOptions } from "../types";
+
+type Args = {
+	dir: string;
+	data: SliceCreateHookData;
+} & SliceMachineContext<PluginOptions>;
+
+const createComponentFile = async ({ dir, data, helpers, options }: Args) => {
+	const filePath = path.join(dir, "index.vue");
+	const model = data.model;
+	const pascalName = pascalCase(model.name);
+
+	let contents: string;
+
+	const isTypeScriptProject = await checkIsTypeScriptProject({
+		helpers,
+		options,
+	});
+
+	if (isTypeScriptProject) {
+		contents = stripIndent`
+			<template>
+				<section
+					:data-slice-type="slice.slice_type"
+					:data-slice-variation="slice.variation"
+				>
+					Placeholder component for ${model.id} (variation: {{ slice.variation }}) Slices
+				</section>
+			</template>
+
+			<script setup lang="ts">
+			import { Content } from "@prismicio/client";
+
+			// The array passed to \`getSliceComponentProps\` is purely optional.
+			// Consider it as a visual hint for you when templating your slice.
+			defineProps(getSliceComponentProps<Content.${pascalName}Slice>(
+				["slice", "index", "slices", "context"]
+			));
+			</script>
+		`;
+	} else {
+		contents = stripIndent`
+			<template>
+				<section
+					:data-slice-type="slice.slice_type"
+					:data-slice-variation="slice.variation"
+				>
+					Placeholder component for {{ model.id }} (variation: {{ slice.variation }}) Slices
+				</section>
+			</template>
+
+			<script setup>
+			// The array passed to \`getSliceComponentProps\` is purely optional.
+			// Consider it as a visual hint for you when templating your slice.
+			defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
+			</script>
+		`;
+	}
+
+	if (options.format) {
+		contents = await helpers.format(contents, filePath, {
+			prettier: { parser: "vue" },
+		});
+	}
+
+	await fs.writeFile(filePath, contents);
+};
+
+export const sliceCreate: SliceCreateHook<PluginOptions> = async (
+	data,
+	context,
+) => {
+	const dir = buildSliceDirectoryPath({
+		libraryID: data.libraryID,
+		model: data.model,
+		helpers: context.helpers,
+	});
+
+	await fs.mkdir(dir, { recursive: true });
+
+	rejectIfNecessary(
+		await Promise.allSettled([
+			updateSliceModelFile({
+				libraryID: data.libraryID,
+				model: data.model,
+				...context,
+			}),
+			createComponentFile({ dir, data, ...context }),
+		]),
+	);
+
+	rejectIfNecessary(
+		await Promise.allSettled([
+			upsertGlobalContentTypes(context),
+			upsertSliceLibraryIndexFile({ libraryID: data.libraryID, ...context }),
+		]),
+	);
+};