@nuxtjs/prismic 3.0.0-alpha.7 → 3.0.0-rc.0

package/README.md

@@ -26,7 +26,7 @@ Easily connect your Nuxt.js application to your content hosted on [Prismic][pris
 ## Install
 
 ```bash
-npm install --save-dev @nuxtjs/prismic@alpha # or yarn add --dev @nuxtjs/prismic@alpha
+npm install --save-dev @nuxtjs/prismic@rc # or yarn add --dev @nuxtjs/prismic@rc
 ```
 
 Then, add `@nuxtjs/prismic` to the `modules` section of your Nuxt config and configure your Prismic API endpoint:

package/dist/module.d.ts

@@ -7,6 +7,7 @@ declare type PrismicModuleOptions = Omit<PrismicPluginOptions, 'endpoint' | 'cli
     linkResolver?: string;
     htmlSerializer?: string;
     preview?: string | false;
+    toolbar?: boolean;
 };
 
 declare const _default: _nuxt_schema.NuxtModule<PrismicModuleOptions>;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/prismic",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-rc.0",
   "configKey": "prismic",
   "compatibility": {
     "nuxt": "^3.0.0"

package/dist/module.mjs

@@ -1,13 +1,15 @@
-import { join } from 'path';
+import { join } from 'node:path';
 import { defineNuxtModule, createResolver, addPlugin, addComponent, addAutoImport, extendPages, addTemplate } from '@nuxt/kit';
 import { cleanDoubleSlashes } from 'ufo';
 import { isRepositoryEndpoint, getRepositoryName } from '@prismicio/client';
 import * as prismicVue from '@prismicio/vue';
-import { existsSync } from 'fs';
 import consola from 'consola';
+import { existsSync } from 'node:fs';
 
 const name = "@nuxtjs/prismic";
-const version = "3.0.0-alpha.7";
+const version = "3.0.0-rc.0";
+
+const logger = consola.withScope("nuxt:prismic");
 
 const fileExists = (path, extensions = ["js", "ts"]) => {
   if (!path) {
@@ -19,8 +21,6 @@ const fileExists = (path, extensions = ["js", "ts"]) => {
   return extension ? `${path}.${extension}` : null;
 };
 
-const logger = consola.withScope("nuxt:prismic");
-
 const module = defineNuxtModule({
   meta: {
     name: name,
@@ -36,7 +36,8 @@ const module = defineNuxtModule({
     htmlSerializer: cleanDoubleSlashes(`~/${nuxt.options.dir.app}/prismic/htmlSerializer`),
     injectComponents: true,
     components: {},
-    preview: "/preview"
+    preview: "/preview",
+    toolbar: true
   }),
   hooks: {},
   setup(mergedOptions, nuxt) {
@@ -49,7 +50,7 @@ const module = defineNuxtModule({
     nuxt.options.build.transpile.push(resolver.resolve("runtime"), "@nuxtjs/prismic", "@prismicio/vue");
     const proxyUserFileWithUndefinedFallback = (filename, path, extensions = ["js", "mjs", "ts"]) => {
       const resolvedFilename = `prismic/proxy/${filename}.ts`;
-      const resolvedPath = path ? path.replace(/^(~~|@@)/, nuxt.options.rootDir).replace(/^(~|@)/, nuxt.options.srcDir) : void 0;
+      const resolvedPath = path.replace(/^(~~|@@)/, nuxt.options.rootDir).replace(/^(~|@)/, nuxt.options.srcDir);
       const maybeUserFile = fileExists(resolvedPath, extensions);
       if (maybeUserFile) {
         logger.info(`Using user-defined \`${filename}\` at \`${maybeUserFile.replace(nuxt.options.srcDir, "~").replace(nuxt.options.rootDir, "~~").replace(/\\/g, "/")}\``);
@@ -70,6 +71,7 @@ const module = defineNuxtModule({
     (_a = nuxt.options.runtimeConfig).public || (_a.public = {});
     nuxt.options.runtimeConfig.public[name] = mergedOptions;
     addPlugin(resolver.resolve("runtime/plugin"));
+    addPlugin(resolver.resolve("runtime/plugin.client"));
     if (mergedOptions.injectComponents) {
       [
         "PrismicEmbed",
@@ -113,11 +115,19 @@ const module = defineNuxtModule({
           });
         });
       }
+      if (!mergedOptions.toolbar) {
+        logger.warn("`toolbar` option is disabled but `preview` is enabled. Previews won't work unless you manually load the toolbar.");
+      }
+    }
+    if (mergedOptions.toolbar) {
       const repositoryName = isRepositoryEndpoint(mergedOptions.endpoint) ? getRepositoryName(mergedOptions.endpoint) : mergedOptions.endpoint;
       (_b = nuxt.options.app).head || (_b.head = {});
       (_c = nuxt.options.app.head).script || (_c.script = []);
       nuxt.options.app.head.script.push({
-        src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`
+        hid: "prismic-preview",
+        src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`,
+        async: true,
+        defer: true
       });
     }
   }

package/dist/runtime/plugin.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.client.mjs

@@ -0,0 +1,11 @@
+import { defineNuxtPlugin, refreshNuxtData } from "#app";
+const pkgName = "@nuxtjs/prismic";
+export default defineNuxtPlugin((nuxtApp) => {
+  const mergedOptions = nuxtApp.payload.config[pkgName] ?? nuxtApp.payload.config.public[pkgName] ?? {};
+  if (mergedOptions.preview) {
+    window.addEventListener("prismicPreviewUpdate", (event) => {
+      event.preventDefault();
+      refreshNuxtData();
+    });
+  }
+});

package/dist/runtime/plugin.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from "#app";
+import { defineNuxtPlugin, useCookie, useRequestEvent, refreshNuxtData } from "#app";
 import NuxtLink from "#app/components/nuxt-link";
 import { createPrismic } from "@prismicio/vue";
 import client from "#build/prismic/proxy/client";
@@ -7,7 +7,7 @@ import htmlSerializer from "#build/prismic/proxy/htmlSerializer";
 const pkgName = "@nuxtjs/prismic";
 export default defineNuxtPlugin((nuxtApp) => {
   const mergedOptions = nuxtApp.payload.config[pkgName] ?? nuxtApp.payload.config.public[pkgName] ?? {};
-  nuxtApp.vueApp.use(createPrismic({
+  const prismicPlugin = createPrismic({
     ...mergedOptions,
     client,
     linkResolver,
@@ -18,5 +18,22 @@ export default defineNuxtPlugin((nuxtApp) => {
       linkExternalComponent: NuxtLink,
       ...mergedOptions.components
     }
-  }));
+  });
+  nuxtApp.vueApp.use(prismicPlugin);
+  if (mergedOptions.preview) {
+    const previewCookie = useCookie("io.prismic.preview").value;
+    if (process.server) {
+      prismicPlugin.client.enableAutoPreviewsFromReq(useRequestEvent()?.req);
+    }
+    if (previewCookie) {
+      try {
+        const session = typeof previewCookie === "string" ? JSON.parse(decodeURIComponent(previewCookie)) : previewCookie;
+        if (Object.keys(session).some((key) => key in session && typeof session[key] === "object" && session[key] !== null && "preview" in session[key] && session[key].preview)) {
+          refreshNuxtData();
+        }
+      } catch (error) {
+        console.warn("Failed to parse Prismic preview cookie", error);
+      }
+    }
+  }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nuxtjs/prismic",
-	"version": "3.0.0-alpha.7",
+	"version": "3.0.0-rc.0",
 	"description": "Easily connect your Nuxt 3 application to your content hosted on Prismic",
 	"keywords": [
 		"nuxt",
@@ -38,27 +38,32 @@
 		"dev:build": "nuxi build playground",
 		"lint": "eslint --ext .js,.ts .",
 		"prepare": "nuxi prepare playground && npm run build",
-		"release": "npm run build && npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
-		"release:alpha": "npm run build && npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
-		"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
+		"release": "npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
+		"release:rc": "npm run test && standard-version --release-as major --prerelease rc && git push --follow-tags && npm run build && npm publish --tag rc",
+		"release:rc:dry": "standard-version --release-as major --prerelease rc --dry-run",
 		"release:dry": "standard-version --dry-run",
-		"test": "npm run lint && npm run unit",
-		"unit": "echo \"TODO: vitest & nuxt-test-utils\""
+		"test": "npm run lint && npm run unit && npm run build",
+		"unit": "vitest run --coverage",
+		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
 		"@nuxt/kit": "^3.0.0-rc",
 		"@prismicio/client": "^6.6.1",
-		"@prismicio/vue": "^3.0.0-beta",
+		"@prismicio/vue": "^3.0.0",
 		"consola": "^2.15.3",
-		"ufo": "^0.8.4"
+		"ufo": "^0.8.5"
 	},
 	"devDependencies": {
 		"@nuxt/module-builder": "latest",
+		"@nuxt/test-utils": "npm:@nuxt/test-utils-edge@latest",
 		"@nuxtjs/eslint-config-typescript": "latest",
-		"eslint": "^8.18.0",
+		"c8": "^7.11.3",
+		"eslint": "^8.20.0",
+		"mock-fs": "^5.1.2",
 		"nuxt": "^3.0.0-rc",
 		"standard-version": "^9.5.0",
-		"typescript": "^4.7.4"
+		"typescript": "^4.7.4",
+		"vitest": "^0.18.1"
 	},
 	"engines": {
 		"node": ">=14.15.0"

package/src/{utils.ts → lib/fileExists.ts}

@@ -1,4 +1,4 @@
-import { existsSync } from 'fs'
+import { existsSync } from 'node:fs'
 
 export const fileExists = (path?: string, extensions = ['js', 'ts']): string | null => {
 	if (!path) {

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export { logger } from './logger'
+export { fileExists } from './fileExists'

package/src/module.ts

@@ -1,4 +1,4 @@
-import { join } from 'path'
+import { join } from 'node:path'
 
 import {
 	defineNuxtModule,
@@ -15,9 +15,8 @@ import { isRepositoryEndpoint, getRepositoryName } from '@prismicio/client'
 import * as prismicVue from '@prismicio/vue'
 
 import { name as pkgName, version as pkgVersion } from '../package.json'
+import { logger, fileExists } from './lib'
 import type { PrismicModuleOptions } from './types'
-import { fileExists } from './utils'
-import { logger } from './logger'
 
 // Options export
 export type { PrismicModuleOptions } from './types'
@@ -39,7 +38,8 @@ export default defineNuxtModule<PrismicModuleOptions>({
 		htmlSerializer: cleanDoubleSlashes(`~/${nuxt.options.dir.app}/prismic/htmlSerializer`),
 		injectComponents: true,
 		components: {},
-		preview: '/preview'
+		preview: '/preview',
+		toolbar: true
 	}),
 	hooks: {},
 	setup (mergedOptions, nuxt) {
@@ -53,11 +53,9 @@ export default defineNuxtModule<PrismicModuleOptions>({
 		nuxt.options.build.transpile.push(resolver.resolve('runtime'), '@nuxtjs/prismic', '@prismicio/vue')
 
 		// Add runtime user code
-		const proxyUserFileWithUndefinedFallback = (filename: string, path?: string, extensions = ['js', 'mjs', 'ts']) => {
+		const proxyUserFileWithUndefinedFallback = (filename: string, path: string, extensions = ['js', 'mjs', 'ts']) => {
 			const resolvedFilename = `prismic/proxy/${filename}.ts`
-			const resolvedPath = path
-				? path.replace(/^(~~|@@)/, nuxt.options.rootDir).replace(/^(~|@)/, nuxt.options.srcDir)
-				: undefined
+			const resolvedPath = path.replace(/^(~~|@@)/, nuxt.options.rootDir).replace(/^(~|@)/, nuxt.options.srcDir)
 			const maybeUserFile = fileExists(resolvedPath, extensions)
 
 			if (maybeUserFile) {
@@ -76,9 +74,9 @@ export default defineNuxtModule<PrismicModuleOptions>({
 				})
 			}
 		}
-		proxyUserFileWithUndefinedFallback('client', mergedOptions.client)
-		proxyUserFileWithUndefinedFallback('linkResolver', mergedOptions.linkResolver)
-		proxyUserFileWithUndefinedFallback('htmlSerializer', mergedOptions.htmlSerializer)
+		proxyUserFileWithUndefinedFallback('client', mergedOptions.client!)
+		proxyUserFileWithUndefinedFallback('linkResolver', mergedOptions.linkResolver!)
+		proxyUserFileWithUndefinedFallback('htmlSerializer', mergedOptions.htmlSerializer!)
 
 		// Expose options through public runtime config
 		nuxt.options.runtimeConfig.public ||= {} as typeof nuxt.options.runtimeConfig.public
@@ -86,6 +84,7 @@ export default defineNuxtModule<PrismicModuleOptions>({
 
 		// Add plugin
 		addPlugin(resolver.resolve('runtime/plugin'))
+		addPlugin(resolver.resolve('runtime/plugin.client'))
 
 		// Add components auto import
 		if (mergedOptions.injectComponents) {
@@ -142,6 +141,12 @@ export default defineNuxtModule<PrismicModuleOptions>({
 				})
 			}
 
+			if (!mergedOptions.toolbar) {
+				logger.warn('`toolbar` option is disabled but `preview` is enabled. Previews won\'t work unless you manually load the toolbar.')
+			}
+		}
+
+		if (mergedOptions.toolbar) {
 			// Add toolbar
 			const repositoryName = isRepositoryEndpoint(mergedOptions.endpoint)
 				? getRepositoryName(mergedOptions.endpoint)
@@ -149,7 +154,10 @@ export default defineNuxtModule<PrismicModuleOptions>({
 			nuxt.options.app.head ||= {}
 			nuxt.options.app.head.script ||= []
 			nuxt.options.app.head.script.push({
-				src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`
+				hid: 'prismic-preview',
+				src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`,
+				async: true,
+				defer: true
 			})
 		}
 	}

package/src/runtime/plugin.client.ts

@@ -0,0 +1,22 @@
+import { defineNuxtPlugin, refreshNuxtData } from '#app'
+
+// import { name as pkgName } from '../../package.json'
+import { PrismicModuleOptions } from '../types'
+
+// TODO: Revert when fixed
+const pkgName = '@nuxtjs/prismic'
+
+export default defineNuxtPlugin((nuxtApp) => {
+	const mergedOptions: PrismicModuleOptions =
+		nuxtApp.payload.config[pkgName] ??
+		nuxtApp.payload.config.public[pkgName] ??
+		{}
+
+	// Hot reload preview updates
+	if (mergedOptions.preview) {
+		window.addEventListener('prismicPreviewUpdate', (event) => {
+			event.preventDefault()
+			refreshNuxtData()
+		})
+	}
+})

package/src/runtime/plugin.ts

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin, useCookie, useRequestEvent, refreshNuxtData } from '#app'
 import NuxtLink from '#app/components/nuxt-link'
 
 import { createPrismic } from '@prismicio/vue'
@@ -22,7 +22,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 		nuxtApp.payload.config.public[pkgName] ??
 		{}
 
-	nuxtApp.vueApp.use(createPrismic({
+	const prismicPlugin = createPrismic({
 		...mergedOptions,
 		client,
 		linkResolver,
@@ -33,5 +33,35 @@ export default defineNuxtPlugin((nuxtApp) => {
 			linkExternalComponent: NuxtLink,
 			...mergedOptions.components
 		}
-	}))
+	})
+
+	nuxtApp.vueApp.use(prismicPlugin)
+
+	if (mergedOptions.preview) {
+		const previewCookie = useCookie('io.prismic.preview').value
+
+		// Update client with req when running server side
+		if (process.server) {
+			prismicPlugin.client.enableAutoPreviewsFromReq(useRequestEvent()?.req)
+		}
+
+		if (previewCookie) {
+			try {
+				const session = typeof previewCookie === 'string' ? JSON.parse(decodeURIComponent(previewCookie)) : previewCookie
+
+				if (Object.keys(session).some(key =>
+					key in session &&
+					typeof session[key] === 'object' &&
+					session[key] !== null &&
+					'preview' in session[key] &&
+					session[key].preview)
+				) {
+					refreshNuxtData()
+				}
+			} catch (error) {
+				// eslint-disable-next-line no-console
+				console.warn('Failed to parse Prismic preview cookie', error)
+			}
+		}
+	}
 })

package/src/types.ts

@@ -6,4 +6,5 @@ export type PrismicModuleOptions = Omit<PrismicPluginOptions, 'endpoint' | 'clie
 	linkResolver?: string;
 	htmlSerializer?: string;
 	preview?: string | false;
+	toolbar?: boolean;
 };