fix(persona): fix selfhost app baseURL

Author: adenvt

packages/persona/package.json

@@ -35,7 +35,7 @@
   },
   "main": "./dist/module.cjs",
   "module": "./dist/module.mjs",
-  "types": "./dist/types.d.ts",
+  "types": "./dist/module.d.ts",
   "typesVersions": {
     "*": {
       "core": [
@@ -95,10 +95,12 @@
     "lodash-es": "4.17.21",
     "marked": "14.1.2",
     "nanodelay": "2.0.2",
+    "pathe": "^1.1.2",
     "pdfjs-dist": "4.6.82",
     "scroll-into-view": "1.16.2",
     "tabbable": "6.2.0",
     "tiptap-extension-font-size": "^1.2.0",
+    "ufo": "^1.5.4",
     "vue-collapsed": "1.3.4",
     "vue-demi": "0.14.10",
     "vuedraggable": "next",

packages/persona/playground/app.vue

@@ -10,7 +10,7 @@
   <div class="flex h-full min-h-screen">
     <p-sidebar-menu :menus="menus" />
 
-    <div>
+    <div class="flex-grow">
       <div class="bg-default">
         <NuxtLayout>
           <NuxtPage />

packages/persona/playground/nuxt.config.ts

@@ -1,16 +1,17 @@
-import PersonaModule from '../src/module'
 import { fileURLToPath } from 'node:url'
 import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
-  modules   : ['@nuxtjs/tailwindcss', PersonaModule],
-  alias     : { '@privyid/persona': fileURLToPath(new URL('../dist/', import.meta.url)) },
-  typescript: {
+  compatibilityDate: '2024-10-03',
+  modules          : ['@nuxtjs/tailwindcss', '../src/module'],
+  alias            : { '@privyid/persona': fileURLToPath(new URL('../dist/', import.meta.url)) },
+  typescript       : {
     tsConfig: {
       compilerOptions: {
         strict          : false,
         strictNullChecks: true,
       },
     },
   },
+  persona: { useLocalPdfWorker: true },
 })

packages/persona/playground/pages/index.vue

@@ -1,3 +1,10 @@
 <template>
   <h1>Dashboard</h1>
+  <div class="w-full">
+    <p-pdf-viewer :src="PDF_URL" />
+  </div>
 </template>
+
+<script setup lang="ts">
+import PDF_URL from '../../../../src/public/assets/pdf/Calibrator-v3.pdf?url'
+</script>

packages/persona/playground/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

packages/persona/src/module.ts

@@ -4,9 +4,11 @@ import {
   addPlugin,
   addComponentsDir,
   extendViteConfig,
-  addPluginTemplate,
 } from '@nuxt/kit'
-import path from 'pathe'
+import { join as joinPath } from 'pathe'
+import { defu } from 'defu'
+import { joinURL } from 'ufo'
+import { version as PDFJS_VERSION } from 'pdfjs-dist/legacy/build/pdf.mjs'
 
 export interface ModuleOptions {
   /**
@@ -26,19 +28,25 @@ export interface ModuleOptions {
   useLocalPdfWorker?: boolean,
 }
 
+export interface ModulePublicRuntimeConfig {
+  persona: {
+    cdnURL: string,
+  },
+}
+
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name         : '@privyid/persona',
     configKey    : 'persona',
-    compatibility: { nuxt: '>=3.0.0' },
+    compatibility: { nuxt: '>=3.4.0' },
   },
   defaults: {
     font             : true,
     prefix           : 'p',
     useLocalPdfWorker: false,
   },
   async setup (options, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
+    const { resolve, resolvePath } = createResolver(import.meta.url)
 
     // Add font CDN
     if (options.font) {
@@ -62,7 +70,7 @@ export default defineNuxtModule<ModuleOptions>({
     })
 
     // Add Plugin
-    addPlugin({ src: resolve('./runtime/plugin') })
+    addPlugin({ src: resolve('./runtime/plugins/persona') })
 
     // Extend vite config
     extendViteConfig((config) => {
@@ -82,45 +90,37 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Use local pdf worker
     if (options.useLocalPdfWorker) {
+      nuxt.options.runtimeConfig.public.persona = defu(
+        { cdnURL: './_persona' },
+        nuxt.options.runtimeConfig.public.persona,
+      )
+
       nuxt.hook('nitro:config', async (nitroConfig) => {
         // eslint-disable-next-line align-assignments/align-assignments
         nitroConfig.publicAssets ||= []
 
-        // eslint-disable-next-line unicorn/prefer-module
-        const pdfjsDir                 = path.dirname(require.resolve('pdfjs-dist'))
-        const { default: { version } } = await import('pdfjs-dist/package.json')
-        const pdfjsBaseUrl             = `_persona/pdjs-dist@${version}`
-
-        const assetsMaxAge = 60 * 60 * 24 * 30
+        const pdfjsDir     = joinPath(await resolvePath('pdfjs-dist'), '../../')
+        const pdfjsBaseURL = `_persona/pdfjs-dist@${PDFJS_VERSION}`
+        const assetsMaxAge = 60 * 60 * 24 * 30 // 1 month
 
         nitroConfig.publicAssets.push(
           {
-            baseURL: `${pdfjsBaseUrl}/build`,
-            dir    : pdfjsDir,
+            baseURL: joinURL(pdfjsDir, 'build'),
+            dir    : joinPath(pdfjsDir, 'build'),
             maxAge : assetsMaxAge,
           },
           {
-            baseURL: `${pdfjsBaseUrl}/cmaps`,
-            dir    : path.join(pdfjsDir, '../cmaps'),
+            baseURL: joinURL(pdfjsBaseURL, 'legacy'),
+            dir    : joinPath(pdfjsDir, 'legacy'),
+            maxAge : assetsMaxAge,
+          },
+          {
+            baseURL: joinURL(pdfjsBaseURL, 'cmaps'),
+            dir    : joinPath(pdfjsDir, 'cmaps'),
             maxAge : assetsMaxAge,
           },
         )
       })
-
-      addPluginTemplate({
-        filename   : 'persona-local-pdf-worker.mjs',
-        getContents: () => `
-          import { setCDN } from '@privyid/persona/core'
-
-          export default defineNuxtPlugin({
-            name: 'persona-local-pdf-worker',
-            dependsOn: ['persona-setup'],
-            setup () {
-              setCDN('/_persona/')
-            },
-          })
-        `,
-      })
     }
   },
 })

packages/persona/src/runtime/.gitkeep

@@ -1,15 +1,22 @@
-import { defineNuxtPlugin, useRouter } from '#imports'
+import {
+  defineNuxtPlugin,
+  useRouter,
+  useRuntimeConfig,
+} from '#imports'
 import type { State } from '@privyid/persona/core'
 import {
   initStore,
   installRouter,
+  setCDN,
 } from '@privyid/persona/core'
+import { joinURL, isRelative } from 'ufo'
 
 export default defineNuxtPlugin({
-  name : 'persona-setup',
+  name : 'persona-plugin',
   setup: (nuxtApp) => {
     const router = useRouter()
     const store  = initStore()
+    const config = useRuntimeConfig()
 
     installRouter({
       getURL () {
@@ -20,8 +27,16 @@ export default defineNuxtPlugin({
       },
     })
 
+    // Set CDN to self host
+    if (config.public.persona.cdnURL) {
+      if (isRelative(config.public.persona.cdnURL))
+        setCDN(joinURL(config.app.baseURL, '_persona'))
+      else
+        setCDN(config.public.persona.cdnURL)
+    }
+
     // SSR Store & Hydrate
-    if (process.server)
+    if (import.meta.server)
       nuxtApp.payload.persona = store.value
     else if (nuxtApp.payload?.persona)
       store.value = nuxtApp.payload.persona as State

packages/persona/src/runtime/plugin.ts renamed to packages/persona/src/runtime/plugins/persona.ts

@@ -1,15 +1,3 @@
 {
   "extends": "./playground/.nuxt/tsconfig.json",
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "script/*.ts",
-    "playground/**/*.ts",
-    "playground/**/*.d.ts",
-    "playground/**/*.tsx",
-    "playground/**/*.vue",
-    "./build.config.ts"
-  ]
 }

packages/persona/tsconfig.json

@@ -3979,6 +3979,7 @@ __metadata:
     marked: "npm:14.1.2"
     nanodelay: "npm:2.0.2"
     nuxt: "npm:3.13.2"
+    pathe: "npm:^1.1.2"
     pdfjs-dist: "npm:4.6.82"
     postcss-custom-properties: "npm:14.0.1"
     postcss-hexrgba: "npm:2.1.0"
@@ -3987,6 +3988,7 @@ __metadata:
     tabbable: "npm:6.2.0"
     tailwind: "npm:4.0.0"
     tiptap-extension-font-size: "npm:^1.2.0"
+    ufo: "npm:^1.5.4"
     vue-collapsed: "npm:1.3.4"
     vue-demi: "npm:0.14.10"
     vuedraggable: "npm:next"