Merge pull request #1477 from prismicio/dani/snippets

feat: repeatable links code snippets
prismicio · Nov 13, 2024 · 69439db · 69439db
2 parents 5a49744 + 87ce5c7
commit 69439db
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 40 deletions.
diff --git a/packages/adapter-next/src/hooks/snippet-read.ts b/packages/adapter-next/src/hooks/snippet-read.ts
@@ -59,19 +59,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`
+					<PrismicNextLink field={${dotPath(fieldPath)}}>Link</PrismicNextLink>
+				`;
+			} else if (!repeat && allowText) {
+				codeText = stripIndent`
+					<PrismicNextLink field={${dotPath(fieldPath)}} />
+				`;
+			} else if (repeat && !allowText) {
+				codeText = stripIndent`
+					{${dotPath(fieldPath)}.map((link, index) => (
+						<PrismicNextLink key={index} field={link}>Link</PrismicNextLink>
+				))}
+				`;
+			} else if (repeat && allowText) {
+				codeText = stripIndent`
+					{${dotPath(fieldPath)}.map((link, index) => (
+					  <PrismicNextLink key={index} 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: await format(codeText, helpers),
 			};
 		}
 

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, index) in ${dotPath(fieldPath)}" :key="index">
+						<PrismicLink :field="link">Link</PrismicLink>
+					</template>
+				`;
+			} else if (repeat && allowText) {
+				codeText = stripIndent`
+					<template v-for="(link, index) in ${dotPath(fieldPath)}" :key="index">
+						<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-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, index) in ${dotPath(fieldPath)}" :key="index">
+						<PrismicLink :field="link">Link</PrismicLink>
+					</template>
+				`;
+			} else if (repeat && allowText) {
+				codeText = stripIndent`
+					<template v-for="(link, index) in ${dotPath(fieldPath)}" :key="index">
+						<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/src/hooks/snippet-read.ts b/packages/adapter-sveltekit/src/hooks/snippet-read.ts
@@ -57,19 +57,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`
+					{#each ${dotPath(fieldPath)} as link, index (index)}
+						<PrismicLink field={link}>Link</PrismicLink>
+					{/each}
+				`;
+			} else if (repeat && allowText) {
+				codeText = stripIndent`
+					{#each ${dotPath(fieldPath)} as link, index (index)}
+						<PrismicLink field={link} />
+					{/each}
+				`;
+			} else {
+				throw new Error("Invalid configuration.");
+			}
+
 			return {
 				label,
 				language: "svelte",
-				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/slice-machine/src/legacy/lib/builders/common/Zone/Card/components/Hints/index.tsx b/packages/slice-machine/src/legacy/lib/builders/common/Zone/Card/components/Hints/index.tsx
@@ -24,6 +24,7 @@ const Hint: React.FC<HintProps> = ({
   if (item.value.type === "Link") {
     if (item.value.config?.allowText ?? false)
       snippetCacheKey.push("allowText");
+    if (item.value.config?.repeat ?? false) snippetCacheKey.push("repeat");
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment