Merge pull request #1473 from prismicio/repeatable-link

[DT-2405] Support repeatable links
prismicio · Dec 10, 2024 · b35f9f5 · b35f9f5
2 parents 2f67adb + 57e928f
commit b35f9f5
Show file tree

Hide file tree

Showing 41 changed files with 612 additions and 409 deletions.
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
   "resolutions": {
     "connected-next-router/react-redux": "8.0.7",
     "react-beautiful-dnd/react-redux": "8.0.7",
-    "@prismicio/types-internal": "2.8.0",
+    "@prismicio/types-internal": "3.2.0",
     "express": "4.20.0"
   },
   "workspaces": [

diff --git a/packages/adapter-next/package.json b/packages/adapter-next/package.json
@@ -67,7 +67,7 @@
 	},
 	"dependencies": {
 		"@prismicio/simulator": "^0.1.4",
-		"@prismicio/types-internal": "^2.8.0",
+		"@prismicio/types-internal": "3.2.0",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",
@@ -95,7 +95,7 @@
 		"next": "14.1.3",
 		"prettier": "3.0.3",
 		"prettier-plugin-jsdoc": "1.1.1",
-		"prismic-ts-codegen": "^0.1.22",
+		"prismic-ts-codegen": "0.1.23",
 		"react": "18.2.0",
 		"rollup-plugin-preserve-directives": "0.2.0",
 		"size-limit": "8.2.4",

diff --git a/packages/adapter-next/src/hooks/snippet-read.ts b/packages/adapter-next/src/hooks/snippet-read.ts
@@ -59,19 +59,44 @@ export const snippetRead: SnippetReadHook<PluginOptions> = async (
 		}
 
 		case "Link": {
+			const repeat = data.model.config?.repeat ?? false;
+			const allowText = data.model.config?.allowText ?? false;
+
+			let code;
+			if (!repeat && !allowText) {
+				code = await format(
+					stripIndent`
+					<PrismicNextLink field={${dotPath(fieldPath)}}>Link</PrismicNextLink>
+				`,
+					helpers,
+				);
+			} else if (!repeat && allowText) {
+				code = await format(
+					stripIndent`
+					<PrismicNextLink field={${dotPath(fieldPath)}} />
+				`,
+					helpers,
+				);
+			} else if (repeat && !allowText) {
+				code = stripIndent`
+					{${dotPath(fieldPath)}.map((link) => (
+						<PrismicNextLink key={link.key} field={link}>Link</PrismicNextLink>
+				))}
+				`;
+			} else if (repeat && allowText) {
+				code = stripIndent`
+					{${dotPath(fieldPath)}.map((link) => (
+					  <PrismicNextLink key={link.key} field={link} />
+					))}
+				`;
+			} else {
+				throw new Error("Invalid configuration.");
+			}
+
 			return {
 				label,
 				language: "tsx",
-				code: await format(
-					data.model.config?.allowText
-						? stripIndent`
-							<PrismicNextLink field={${dotPath(fieldPath)}} />
-						`
-						: stripIndent`
-							<PrismicNextLink field={${dotPath(fieldPath)}}>Link</PrismicNextLink>
-						`,
-					helpers,
-				),
+				code,
 			};
 		}
 

diff --git a/packages/adapter-next/src/sliceTemplates/CallToAction/index.ts b/packages/adapter-next/src/sliceTemplates/CallToAction/index.ts
@@ -39,6 +39,7 @@ export const mocks: SharedSliceContent[] = [
 			},
 			buttonLink: {
 				__TYPE__: "LinkContent",
+				key: "123e4567-e89b-12d3-a456-426614174000",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://twitter.com/prismicio",
@@ -126,6 +127,7 @@ export const mocks: SharedSliceContent[] = [
 			},
 			buttonLink: {
 				__TYPE__: "LinkContent",
+				key: "123e4567-e89b-12d3-a456-426614174001",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://prismic.io",

diff --git a/packages/adapter-next/src/sliceTemplates/CustomerLogos/index.ts b/packages/adapter-next/src/sliceTemplates/CustomerLogos/index.ts
@@ -12,6 +12,7 @@ export const mocks: SharedSliceContent[] = [
 		primary: {
 			callToActionLink: {
 				__TYPE__: "LinkContent",
+				key: "c7a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://prismic.io",
@@ -68,6 +69,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "d1a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "http://twitter.com",
@@ -109,6 +111,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "e2a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "https://prismic.io",
@@ -151,6 +154,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "f3a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "https://prismic.io",
@@ -193,6 +197,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "20354d7a-e4fe-47af-8ff6-187bca92f3f9",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "https://prismic.io",
@@ -235,6 +240,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "caa8b54a-eb5e-4134-8ae2-a3946a428ec7",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "https://prismic.io",

diff --git a/packages/adapter-next/src/sliceTemplates/Hero/index.ts b/packages/adapter-next/src/sliceTemplates/Hero/index.ts
@@ -67,6 +67,7 @@ export const mocks: SharedSliceContent[] = [
 			},
 			callToActionLink: {
 				__TYPE__: "LinkContent",
+				key: "c7a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://prismic.io",
@@ -145,6 +146,7 @@ export const mocks: SharedSliceContent[] = [
 			},
 			callToActionLink: {
 				__TYPE__: "LinkContent",
+				key: "d1a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://prismic.io",

diff --git a/packages/adapter-nuxt/package.json b/packages/adapter-nuxt/package.json
@@ -60,7 +60,7 @@
 	},
 	"dependencies": {
 		"@prismicio/simulator": "^0.1.4",
-		"@prismicio/types-internal": "^2.8.0",
+		"@prismicio/types-internal": "3.2.0",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",
@@ -86,7 +86,7 @@
 		"nuxt": "3.3.3",
 		"prettier": "3.0.3",
 		"prettier-plugin-jsdoc": "1.1.1",
-		"prismic-ts-codegen": "^0.1.22",
+		"prismic-ts-codegen": "0.1.23",
 		"size-limit": "8.2.4",
 		"ts-morph": "17.0.1",
 		"typescript": "4.9.5",

diff --git a/packages/adapter-nuxt/src/hooks/snippet-read.ts b/packages/adapter-nuxt/src/hooks/snippet-read.ts
@@ -58,19 +58,38 @@ export const snippetRead: SnippetReadHook<PluginOptions> = async (
 		}
 
 		case "Link": {
+			const repeat = data.model.config?.repeat ?? false;
+			const allowText = data.model.config?.allowText ?? false;
+
+			let codeText;
+			if (!repeat && !allowText) {
+				codeText = stripIndent`
+					<PrismicLink :field="${dotPath(fieldPath)}">Link</PrismicLink>
+				`;
+			} else if (!repeat && allowText) {
+				codeText = stripIndent`
+					<PrismicLink :field="${dotPath(fieldPath)}" />
+				`;
+			} else if (repeat && !allowText) {
+				codeText = stripIndent`
+					<template v-for="link in ${dotPath(fieldPath)}" :key="link.key">
+						<PrismicLink :field="link">Link</PrismicLink>
+					</template>
+				`;
+			} else if (repeat && allowText) {
+				codeText = stripIndent`
+					<template v-for="link in ${dotPath(fieldPath)}" :key="link.key">
+						<PrismicLink :field="link" />
+					</template>
+				`;
+			} else {
+				throw new Error("Invalid configuration.");
+			}
+
 			return {
 				label,
 				language: "vue",
-				code: await format(
-					data.model.config?.allowText
-						? stripIndent`
-							<PrismicLink :field="${dotPath(fieldPath)}" />
-						`
-						: stripIndent`
-							<PrismicLink :field="${dotPath(fieldPath)}">Link</PrismicLink>
-						`,
-					helpers,
-				),
+				code: await format(codeText, helpers),
 			};
 		}
 

diff --git a/packages/adapter-nuxt/src/sliceTemplates/CallToAction/index.ts b/packages/adapter-nuxt/src/sliceTemplates/CallToAction/index.ts
@@ -39,6 +39,7 @@ export const mocks: SharedSliceContent[] = [
 			},
 			buttonLink: {
 				__TYPE__: "LinkContent",
+				key: "9c2dbe6c-502e-490d-9289-2574939de9a0",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://twitter.com/prismicio",
@@ -126,6 +127,7 @@ export const mocks: SharedSliceContent[] = [
 			},
 			buttonLink: {
 				__TYPE__: "LinkContent",
+				key: "77763ccc-f5c5-418c-bc84-ab0bb810d4f7",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://prismic.io",

diff --git a/packages/adapter-nuxt/src/sliceTemplates/CustomerLogos/index.ts b/packages/adapter-nuxt/src/sliceTemplates/CustomerLogos/index.ts
@@ -12,6 +12,7 @@ export const mocks: SharedSliceContent[] = [
 		primary: {
 			callToActionLink: {
 				__TYPE__: "LinkContent",
+				key: "c7a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://prismic.io",
@@ -68,6 +69,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "8b42181c-2545-435f-b02f-04fd00a84e66",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "http://twitter.com",
@@ -109,6 +111,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "d1a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "https://prismic.io",
@@ -151,6 +154,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "e2a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "https://prismic.io",
@@ -193,6 +197,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "f3a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "https://prismic.io",
@@ -235,6 +240,7 @@ export const mocks: SharedSliceContent[] = [
 								"link",
 								{
 									__TYPE__: "LinkContent",
+									key: "bd2cbad1-6ccf-48e3-bb92-bc9961bc011e",
 									value: {
 										__TYPE__: "ExternalLink",
 										url: "https://prismic.io",

diff --git a/packages/adapter-nuxt/src/sliceTemplates/Hero/index.ts b/packages/adapter-nuxt/src/sliceTemplates/Hero/index.ts
@@ -67,6 +67,7 @@ export const mocks: SharedSliceContent[] = [
 			},
 			callToActionLink: {
 				__TYPE__: "LinkContent",
+				key: "c7a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://prismic.io",
@@ -145,6 +146,7 @@ export const mocks: SharedSliceContent[] = [
 			},
 			callToActionLink: {
 				__TYPE__: "LinkContent",
+				key: "d1a5c0b6-9f0c-4e9f-8e3d-5e4e3f8d3b8b",
 				value: {
 					__TYPE__: "ExternalLink",
 					url: "https://prismic.io",

diff --git a/packages/adapter-nuxt2/package.json b/packages/adapter-nuxt2/package.json
@@ -60,7 +60,7 @@
 	},
 	"dependencies": {
 		"@prismicio/simulator": "^0.1.4",
-		"@prismicio/types-internal": "^2.8.0",
+		"@prismicio/types-internal": "3.2.0",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",
@@ -85,7 +85,7 @@
 		"nuxt": "2.16.3",
 		"prettier": "3.0.3",
 		"prettier-plugin-jsdoc": "1.1.1",
-		"prismic-ts-codegen": "^0.1.22",
+		"prismic-ts-codegen": "0.1.23",
 		"size-limit": "8.2.4",
 		"ts-morph": "17.0.1",
 		"typescript": "4.9.5",

diff --git a/packages/adapter-nuxt2/src/hooks/snippet-read.ts b/packages/adapter-nuxt2/src/hooks/snippet-read.ts
@@ -58,19 +58,38 @@ export const snippetRead: SnippetReadHook<PluginOptions> = async (
 		}
 
 		case "Link": {
+			const repeat = data.model.config?.repeat ?? false;
+			const allowText = data.model.config?.allowText ?? false;
+
+			let codeText;
+			if (!repeat && !allowText) {
+				codeText = stripIndent`
+					<PrismicLink :field="${dotPath(fieldPath)}">Link</PrismicLink>
+				`;
+			} else if (!repeat && allowText) {
+				codeText = stripIndent`
+					<PrismicLink :field="${dotPath(fieldPath)}" />
+				`;
+			} else if (repeat && !allowText) {
+				codeText = stripIndent`
+					<template v-for="link in ${dotPath(fieldPath)}" :key="link.key">
+						<PrismicLink :field="link">Link</PrismicLink>
+					</template>
+				`;
+			} else if (repeat && allowText) {
+				codeText = stripIndent`
+					<template v-for="link in ${dotPath(fieldPath)}" :key="link.key">
+						<PrismicLink :field="link" />
+					</template>
+				`;
+			} else {
+				throw new Error("Invalid configuration.");
+			}
+
 			return {
 				label,
 				language: "vue",
-				code: await format(
-					data.model.config?.allowText
-						? stripIndent`
-							<PrismicLink :field="${dotPath(fieldPath)}" />
-						`
-						: stripIndent`
-							<PrismicLink :field="${dotPath(fieldPath)}">Link</PrismicLink>
-						`,
-					helpers,
-				),
+				code: await format(codeText, helpers),
 			};
 		}
 

diff --git a/packages/adapter-sveltekit/package.json b/packages/adapter-sveltekit/package.json
@@ -63,7 +63,7 @@
 	},
 	"dependencies": {
 		"@prismicio/simulator": "^0.1.4",
-		"@prismicio/types-internal": "^2.8.0",
+		"@prismicio/types-internal": "3.2.0",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",
@@ -93,7 +93,7 @@
 		"eslint-plugin-tsdoc": "0.2.17",
 		"prettier": "3.0.3",
 		"prettier-plugin-jsdoc": "1.1.1",
-		"prismic-ts-codegen": "^0.1.22",
+		"prismic-ts-codegen": "0.1.23",
 		"size-limit": "8.2.4",
 		"svelte": "4.2.0",
 		"typescript": "4.9.5",