feat: restructure preview config

packages/gatsby-plugin-prismic-previews/README.md

@@ -201,9 +201,12 @@ const PreviewPage = () => {
   )
 }
 
-export default withPrismicPreviewResolver(PreviewPage, {
-  [process.env.GATSBY_PRISMIC_REPOSITORY_NAME]: { linkResolver },
-})
+export default withPrismicPreviewResolver(PreviewPage, [
+  {
+    repositoryName: process.env.GATSBY_PRISMIC_REPOSITORY_NAME,
+    linkResolver,
+  },
+])
 ```
 
 You can see that the Link Resolver provided to `withPrismicPreviewResolver()` is
@@ -216,14 +219,16 @@ from two repositories, each with their own Link Resolver, your
 import { mainLinkResolver } from '../mainLinkResolver'
 import { secondaryLinkResolver } from '../secondaryLinkResolver'
 
-export default withPrismicPreviewResolver(PreviewPage, {
-  [process.env.GATSBY_PRISMIC_MAIN_REPOSITORY_NAME]: {
+export default withPrismicPreviewResolver(PreviewPage, [
+  {
+    repositoryName: process.env.GATSBY_PRISMIC_MAIN_REPOSITORY_NAME,
     linkResolver: mainLinkResolver,
   },
-  [process.env.GATSBY_PRISMIC_SECONDARY_REPOSITORY_NAME]: {
+  {
+    repositoryName: process.env.GATSBY_PRISMIC_SECONDARY_REPOSITORY_NAME,
     linkResolver: secondaryLinkResolver,
   },
-})
+])
 ```
 
 For more details on setting up a preview resolver page and the available
@@ -265,9 +270,12 @@ const PageTemplate = ({ data }) => {
   )
 }
 
-export default withPrismicPreview(PageTemplate, {
-  [process.env.GATSBY_PRISMIC_REPOSITORY_NAME]: { linkResolver },
-})
+export default withPrismicPreview(PageTemplate, [
+  {
+    repositoryName: process.env.GATSBY_PRISMIC_REPOSITORY_NAME,
+    linkResolver,
+  },
+])
 
 export const query = graphql`
   query PageTemplate($id: ID!) {
@@ -303,14 +311,16 @@ from two repositories, each with their own Link Resolver, your
 import { mainLinkResolver } from '../mainLinkResolver'
 import { secondaryLinkResolver } from '../secondaryLinkResolver'
 
-export default withPrismicPreview(PageTemplate, {
-  [process.env.GATSBY_PRISMIC_MAIN_REPOSITORY_NAME]: {
+export default withPrismicPreview(PageTemplate, [
+  {
+    repositoryName: process.env.GATSBY_PRISMIC_MAIN_REPOSITORY_NAME,
     linkResolver: mainLinkResolver,
   },
-  [process.env.GATSBY_PRISMIC_SECONDARY_REPOSITORY_NAME]: {
+  {
+    repositoryName: process.env.GATSBY_PRISMIC_SECONDARY_REPOSITORY_NAME,
     linkResolver: secondaryLinkResolver,
   },
-})
+])
 ```
 
 For more details on connecting your pages and templates to preview data and the
@@ -337,9 +347,10 @@ import {
   componentResolverFromMap,
 } from 'gatsby-plugin-prismic-previews'
 
-import { PageTemplate } from './PageTemplate'
 import { linkResolver } from '../linkResolver'
 
+import PageTemplate from './PageTemplate'
+
 const NotFoundPage = ({ data }) => {
   const page = data.prismicPage
 
@@ -350,15 +361,15 @@ const NotFoundPage = ({ data }) => {
   )
 }
 
-export default withPrismicUnpublishedPreview(
-  PageTemplate,
-  { 'my-repository-name': { linkResolver } },
+export default withPrismicUnpublishedPreview(PageTemplate, [
   {
+    repositoryName: 'my-repository-name',
+    linkResolver,
     componentResolver: componentResolverFromMap({
       page: PageTemplate,
     }),
   },
-)
+])
 
 export const query = graphql`
   query NotFoundPage {

packages/gatsby-plugin-prismic-previews/docs/api-withPrismicPreview.md

@@ -17,13 +17,12 @@ must mark documents in your query as "previewable." This involves adding a
 ```typescript
 function withPrismicPreview(
   WrappedComponent: React.ComponentType,
-  repositoryConfigs: Record<
-    string,
-    {
-      linkResolver: LinkResolver
-      htmlSerializer?: HTMLSerializer
-    }
-  >,
+  repositoryConfigs: {
+    repositoryName: string
+    linkResolver: LinkResolver
+    htmlSerializer?: HTMLSerializer
+    transformFieldName?: FieldNameTransformer
+  }[],
   config: {
     mergePreviewData?: boolean
   },
@@ -50,10 +49,11 @@ in your app:
   for the configured Prismic repository. This should be the same HTML Serializer
   provided to [`gatsby-source-prismic`][gsp] in your app's `gatsby-config.js`.
 
-- **`transformFieldName`**<br/>The optional field transformer for the configured
-  Prismic repository. This should be the same `transformFieldName` function
-  provided to [`gatsby-source-prismic`][gsp] in your app's `gatsby-config.js` if
-  used. Most projects will not need to provide a value for this option.
+- **`transformFieldName`**<br/>The optional field name transformer for the
+  configured Prismic repository. This should be the same `transformFieldName`
+  function provided to [`gatsby-source-prismic`][gsp] in your app's
+  `gatsby-config.js` if used. Most projects will not need to provide a value for
+  this option.
 
 Configuration values:
 
@@ -96,9 +96,12 @@ const PageTemplate = ({ data }) => {
   )
 }
 
-export default withPrismicPreview(PageTemplate, {
-  'my-repository-name': { linkResolver },
-})
+export default withPrismicPreview(PageTemplate, [
+  {
+    repositoryName: 'my-repository-name',
+    linkResolver,
+  },
+])
 
 export const query = graphql`
   query PageTemplate($id: ID!) {

packages/gatsby-plugin-prismic-previews/docs/api-withPrismicPreviewResolver.md

@@ -22,12 +22,10 @@ updates.
 ```typescript
 function withPrismicPreviewResolver(
   WrappedComponent: React.ComponentType,
-  repositoryConfigs: Record<
-    string,
-    {
-      linkResolver: LinkResolver
-    }
-  >,
+  repositoryConfigs: {
+    repositoryName: string
+    linkResolver: LinkResolver
+  }[],
   config: {
     autoRedirect?: boolean
   },
@@ -85,9 +83,12 @@ const PreviewPage = () => {
   )
 }
 
-export default withPrismicPreviewResolver(PreviewPage, {
-  'my-repository-name': { linkResolver },
-})
+export default withPrismicPreviewResolver(PreviewPage, [
+  {
+    repositoryName: 'my-repository-name',
+    linkResolver,
+  },
+])
 ```
 
 [hoc]: https://reactjs.org/docs/higher-order-components.html

packages/gatsby-plugin-prismic-previews/docs/api-withPrismicUnpublishedPreview.md

@@ -21,22 +21,19 @@ appears toward the top of the page. This will hide Gatsby's default development
 ```typescript
 function withPrismicUnpublishedPreview(
   WrappedComponent: React.ComponentType,
-  repositoryConfigs: Record<
-    string,
-    {
-      linkResolver: LinkResolver
-      htmlSerializer?: HTMLSerializer
-    }
-  >,
-  config: {
+  repositoryConfigs: {
+    repositoryName: string
+    linkResolver: LinkResolver
+    htmlSerializer?: HTMLSerializer
+    transformFieldName?: FieldNameTransformer
     componentResolver: (
       nodes: PrismicNode[],
     ) => React.ComponentType | undefined | null
     dataResolver?: (
       nodes: PrismicNode[],
       data: Record<string, unknown>,
     ) => Record<string, unknown>
-  },
+  }[],
 ): React.ComponentType
 ```
 
@@ -46,9 +43,6 @@ function withPrismicUnpublishedPreview(
 - **`repositoryConfigs`**<br/>A set of configuration values for each Prismic
   repository used in your app.
 
-- **`config`**<br/>A set of configuration values that determine how the
-  unpublished preview data is prepared and provided.
-
 The following configuration should be provided for each Prismic repository used
 in your app:
 
@@ -60,7 +54,11 @@ in your app:
   for the configured Prismic repository. This should be the same HTML Serializer
   provided to [`gatsby-source-prismic`][gsp] in your app's `gatsby-config.js`.
 
-Configuration values:
+- **`transformFieldName`**<br/>The optional field name transformer for the
+  configured Prismic repository. This should be the same `transformFieldName`
+  function provided to [`gatsby-source-prismic`][gsp] in your app's
+  `gatsby-config.js` if used. Most projects will not need to provide a value for
+  this option.
 
 - **`componentResolver`**<br/>A function that determines the component to render
   during an unpublished preview. This function will be provided a list of nodes
@@ -122,9 +120,10 @@ import {
   componentResolverFromMap,
 } from 'gatsby-plugin-prismic-previews'
 
-import { PageTemplate } from './PageTemplate'
 import { linkResolver } from '../linkResolver'
 
+import PageTemplate from './PageTemplate'
+
 const NotFoundPage = ({ data }) => {
   const page = data.prismicPage
 
@@ -135,15 +134,15 @@ const NotFoundPage = ({ data }) => {
   )
 }
 
-export default withPrismicUnpublishedPreview(
-  PageTemplate,
-  { 'my-repository-name': { linkResolver } },
+export default withPrismicUnpublishedPreview(PageTemplate, [
   {
+    repositoryName: 'my-repository-name',
+    linkResolver,
     componentResolver: componentResolverFromMap({
       page: PageTemplate,
     }),
   },
-)
+])
 
 export const query = graphql`
   query NotFoundPage {

packages/gatsby-plugin-prismic-previews/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-prismic-previews",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.5",
   "description": "Gatsby plugin for integrating client-side Prismic previews support",
   "license": "MIT",
   "main": "./dist/index.js",

packages/gatsby-plugin-prismic-previews/src/fieldProxies/groupFieldProxy.ts

@@ -8,6 +8,7 @@ import {
   proxyDocumentSubtree,
   ProxyDocumentSubtreeEnv,
 } from '../lib/proxyDocumentSubtree'
+import { mapRecordIndices } from '../lib/mapRecordIndices'
 
 export const valueRefinement = (value: unknown): value is UnknownRecord[] =>
   Array.isArray(value) &&
@@ -18,15 +19,21 @@ export const proxyValue = (
   fieldValue: UnknownRecord[],
 ): RE.ReaderEither<ProxyDocumentSubtreeEnv, Error, unknown> =>
   pipe(
-    fieldValue,
-    A.map((fieldValueElement) =>
+    RE.ask<ProxyDocumentSubtreeEnv>(),
+    RE.chain((env) =>
       pipe(
-        fieldValueElement,
-        R.mapWithIndex((fieldName, value) =>
-          proxyDocumentSubtree([...path, fieldName], value),
+        fieldValue,
+        A.map((fieldValueElement) =>
+          pipe(
+            fieldValueElement,
+            mapRecordIndices(env.transformFieldName),
+            R.mapWithIndex((fieldName, value) =>
+              proxyDocumentSubtree([...path, fieldName], value),
+            ),
+            R.sequence(RE.Applicative),
+          ),
         ),
-        R.sequence(RE.Applicative),
+        RE.sequenceArray,
       ),
     ),
-    RE.sequenceArray,
   )

packages/gatsby-plugin-prismic-previews/src/fieldProxies/sliceFieldProxy.ts

@@ -8,6 +8,7 @@ import {
   proxyDocumentSubtree,
   ProxyDocumentSubtreeEnv,
 } from '../lib/proxyDocumentSubtree'
+import { mapRecordIndices } from '../lib/mapRecordIndices'
 
 export const valueRefinement = (
   value: unknown,
@@ -20,21 +21,23 @@ export const proxyValue = (
 ): RE.ReaderEither<ProxyDocumentSubtreeEnv, Error, unknown> =>
   pipe(
     RE.ask<ProxyDocumentSubtreeEnv>(),
-    RE.bind('primary', () =>
+    RE.bind('primary', (env) =>
       pipe(
         fieldValue.primary ?? {},
+        mapRecordIndices(env.transformFieldName),
         R.mapWithIndex((fieldName, value) =>
           proxyDocumentSubtree([...path, 'primary', fieldName], value),
         ),
         R.sequence(RE.Applicative),
       ),
     ),
-    RE.bind('items', () =>
+    RE.bind('items', (env) =>
       pipe(
         fieldValue.items ?? [],
         A.map((item) =>
           pipe(
             item,
+            mapRecordIndices(env.transformFieldName),
             R.mapWithIndex((fieldName, value) =>
               proxyDocumentSubtree([...path, 'items', fieldName], value),
             ),

packages/gatsby-plugin-prismic-previews/src/lib/proxyDocumentSubtree.ts

@@ -5,6 +5,7 @@ import { pipe } from 'fp-ts/function'
 import { NodeHelpers } from 'gatsby-node-helpers'
 
 import {
+  FieldNameTransformer,
   HTMLSerializer,
   LinkResolver,
   PluginOptions,
@@ -33,7 +34,7 @@ export interface ProxyDocumentSubtreeEnv {
   imagePlaceholderImgixParams: PluginOptions['imagePlaceholderImgixParams']
   nodeHelpers: NodeHelpers
   createContentDigest(input: string | UnknownRecord): string
-  transformFieldName(fieldName: string): string
+  transformFieldName: FieldNameTransformer
 }
 
 export const proxyDocumentSubtree = (