fix: don't use alias to inject config to preserve runtime reactivity, resolves #192

Author: lihbr

playground/nuxt.config.ts

@@ -1,28 +1,30 @@
-import prismicModule from '../src/module'
-
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
 	typescript: {
 		strict: true
 	},
-	modules: [prismicModule],
+	modules: ['../src/module'],
 	runtimeConfig: {
 		public: {
 			prismic: {
-				endpoint: '200629-sms-hoy',
-				clientConfig: {
-					routes: [
-						{
-							type: 'kitchen_sink_2',
-							path: '/'
-						},
-						{
-							type: 'page',
-							path: '/'
-						}
-					]
-				}
+				endpoint: '200629-sms-hoy'
 			}
 		}
+	},
+	prismic: {
+		// endpoint: '200629-sms-hoy',
+		clientConfig: {
+			routes: [
+				{
+					type: 'kitchen_sink_2',
+					path: '/'
+				},
+				{
+					type: 'page',
+					path: '/'
+				}
+			]
+
+		}
 	}
 })

src/module.ts

@@ -50,12 +50,6 @@ export default defineNuxtModule<PrismicModuleOptions>({
 		const moduleOptions: PrismicModuleOptions = defu(nuxt.options.runtimeConfig.public.prismic, options)
 		nuxt.options.runtimeConfig.public.prismic = moduleOptions
 
-		nuxt.options.alias['#prismicOptions'] = addTemplate({
-			filename: 'prismicOptions.mjs',
-			write: true,
-			getContents: () => `export default ${JSON.stringify(moduleOptions, undefined, 2)}`
-		}).dst || ''
-
 		if (!moduleOptions.endpoint) {
 			logger.warn('Options `endpoint` is required, disabling module...')
 			return

src/runtime/plugin.client.ts

@@ -1,10 +1,8 @@
 import { PrismicModuleOptions } from '../types'
 import { defineNuxtPlugin, refreshNuxtData, useRuntimeConfig } from '#imports'
 
-import moduleOptions from '#prismicOptions'
-
 export default defineNuxtPlugin((nuxtApp) => {
-	const options = moduleOptions as PrismicModuleOptions
+	const options: PrismicModuleOptions = useRuntimeConfig().public.prismic
 
 	// Hot reload preview updates
 	if (options.preview) {

src/runtime/plugin.ts

@@ -13,10 +13,8 @@ import linkResolver from '#build/prismic/proxy/linkResolver'
 // @ts-expect-error vfs cannot be resolved here
 import htmlSerializer from '#build/prismic/proxy/htmlSerializer'
 
-import moduleOptions from '#prismicOptions'
-
 export default defineNuxtPlugin((nuxtApp) => {
-	const options = moduleOptions as PrismicModuleOptions
+	const options: PrismicModuleOptions = useRuntimeConfig().public.prismic
 
 	const prismicPlugin = createPrismic({
 		...options,

test/module-userFileProxy.test.ts

@@ -25,8 +25,8 @@ afterEach(() => {
 it('proxies nothing if user files are not available', () => {
 	mockedPrismicModule({ endpoint: 'qwerty' })
 
-	expect(addTemplate).toHaveBeenCalledTimes(4)
-	expect(vi.mocked(addTemplate).mock.calls.flat().filter((options: any) => !options.filename.startsWith('prismicOptions')).map((options: any) => [options.filename, options.getContents()])).toMatchInlineSnapshot(`
+	expect(addTemplate).toHaveBeenCalledTimes(3)
+	expect(vi.mocked(addTemplate).mock.calls.flat().map((options: any) => [options.filename, options.getContents()])).toMatchInlineSnapshot(`
 		[
 		  [
 		    "prismic/proxy/client.ts",
@@ -53,8 +53,8 @@ it('proxies user files from default location', () => {
 
 	mockedPrismicModule({ endpoint: 'qwerty' })
 
-	expect(addTemplate).toHaveBeenCalledTimes(4)
-	expect(vi.mocked(addTemplate).mock.calls.flat().filter((options: any) => !options.filename.startsWith('prismicOptions')).map((options: any) => [options.filename, options.getContents()])).toMatchInlineSnapshot(`
+	expect(addTemplate).toHaveBeenCalledTimes(3)
+	expect(vi.mocked(addTemplate).mock.calls.flat().map((options: any) => [options.filename, options.getContents()])).toMatchInlineSnapshot(`
 		[
 		  [
 		    "prismic/proxy/client.ts",
@@ -88,8 +88,8 @@ it('proxies user files from provided location', () => {
 		htmlSerializer: '~/custom/htmlSerializer'
 	})
 
-	expect(addTemplate).toHaveBeenCalledTimes(4)
-	expect(vi.mocked(addTemplate).mock.calls.flat().filter((options: any) => !options.filename.startsWith('prismicOptions')).map((options: any) => [options.filename, options.getContents()])).toMatchInlineSnapshot(`
+	expect(addTemplate).toHaveBeenCalledTimes(3)
+	expect(vi.mocked(addTemplate).mock.calls.flat().map((options: any) => [options.filename, options.getContents()])).toMatchInlineSnapshot(`
 		[
 		  [
 		    "prismic/proxy/client.ts",