feat: support providing runtime HTML Serializer

nuxt-modules · Apr 13, 2022 · e6e6d13 · e6e6d13
1 parent 9e0549a
commit e6e6d13
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/docs/content/en/index.md b/docs/content/en/index.md
@@ -167,6 +167,16 @@ export default (doc) => {
 }
 ```
 
+### Providing an HTML Serializer
+
+You can provide the module an [HTML Serializer](https://prismic.io/docs/core-concepts/html-serializer) by exporting one from the file configured in the `htmlSerializer` option (default: `~/app/prismic/htmlSerializer`):
+
+```javascript[~/app/prismic/htmlSerializer.[jt]s]
+export default {
+	paragraph: ({ children }) => `<p class="fooBar">${children}</p>`,
+}
+```
+
 ### Custom preview page
 
 You can override the default preview page by creating a page at the route configured in the `preview` option (default: `/preview`):
@@ -243,6 +253,19 @@ prismic: {
 }
 ```
 
+#### `htmlSerializer`
+
+- Type: `string`
+- Default: `~/app/prismic/htmlSerializer`
+
+Path to an optional file exporting an [HTML Serializer](https://prismic.io/docs/core-concepts/html-serializer) for the module to use.
+
+```javascript[nuxt.config.[jt]s]
+prismic: {
+  htmlSerializer: '~/prismicHTMLSerializer.js' // attempt to import client from `~/prismicHTMLSerializer.js`
+}
+```
+
 #### `preview`
 
 - Type: `string | false`
@@ -260,7 +283,10 @@ prismic: {
 
 ```typescript
 type PrismicModuleOptions = PrismicPluginOptions & {
-	preview?: string | false
+	client?: string;
+	linkResolver?: string;
+	htmlSerializer?: string;
+	preview?: string | false;
 }
 ```
 
@@ -270,6 +296,7 @@ type PrismicModuleOptions = PrismicPluginOptions & {
 {
 	client: '~/app/prismic/client',
 	linkResolver: '~/app/prismic/linkResolver',
+	htmlSerializer: '~/app/prismic/htmlSerializer',
 	injectComponents: true,
 	preview: '/preview'
 }

diff --git a/src/module.ts b/src/module.ts
@@ -36,7 +36,7 @@ export default defineNuxtModule<PrismicModuleOptions>({
 		clientConfig: {},
 		client: cleanDoubleSlashes(`~/${nuxt.options.dir.app}/prismic/client`),
 		linkResolver: cleanDoubleSlashes(`~/${nuxt.options.dir.app}/prismic/linkResolver`),
-		htmlSerializer: undefined,
+		htmlSerializer: cleanDoubleSlashes(`~/${nuxt.options.dir.app}/prismic/htmlSerializer`),
 		injectComponents: true,
 		components: {},
 		preview: '/preview'
@@ -76,10 +76,11 @@ export default defineNuxtModule<PrismicModuleOptions>({
 		}
 		addUserFileWithUndefinedFallback('client', mergedOptions.client)
 		addUserFileWithUndefinedFallback('linkResolver', mergedOptions.linkResolver)
+		addUserFileWithUndefinedFallback('htmlSerializer', mergedOptions.htmlSerializer)
 
 		// Expose options through public runtime config
-		nuxt.options.publicRuntimeConfig ||= {} as typeof nuxt.options.publicRuntimeConfig
-		nuxt.options.publicRuntimeConfig[pkgName] = mergedOptions
+		nuxt.options.runtimeConfig.public ||= {} as typeof nuxt.options.runtimeConfig.public
+		nuxt.options.runtimeConfig.public[pkgName] = mergedOptions
 
 		// Add plugin
 		addPlugin(resolver.resolve('runtime/plugin'))

diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
@@ -6,16 +6,21 @@ import { createPrismic } from '@prismicio/vue'
 import { name as pkgName } from '../../package.json'
 import { PrismicModuleOptions } from '../types'
 
-import linkResolver from '#build/prismic/linkResolver'
 import client from '#build/prismic/client'
+import linkResolver from '#build/prismic/linkResolver'
+import htmlSerializer from '#build/prismic/htmlSerializer'
 
 export default defineNuxtPlugin((nuxtApp) => {
-	const mergedOptions: PrismicModuleOptions = nuxtApp.payload.config[pkgName]
+	const mergedOptions: PrismicModuleOptions =
+		nuxtApp.payload.config[pkgName] ??
+		nuxtApp.payload.config.public[pkgName] ??
+		{}
 
 	nuxtApp.vueApp.use(createPrismic({
 		...mergedOptions,
 		client,
 		linkResolver,
+		htmlSerializer,
 		injectComponents: false, // Handled at module level
 		components: {
 			linkInternalComponent: NuxtLink,

diff --git a/src/types.ts b/src/types.ts
@@ -1,8 +1,9 @@
 import { PrismicPluginOptions } from '@prismicio/vue'
 
-export type PrismicModuleOptions = Omit<PrismicPluginOptions, 'endpoint' | 'client' | 'linkResolver'> & {
-	endpoint: string,
-	client?: string,
-	linkResolver?: string,
-	preview?: string | false,
+export type PrismicModuleOptions = Omit<PrismicPluginOptions, 'endpoint' | 'client' | 'linkResolver' | 'htmlSerializer'> & {
+	endpoint: string;
+	client?: string;
+	linkResolver?: string;
+	htmlSerializer?: string;
+	preview?: string | false;
 };