fix: emails not showing on playground when using layout (#29)

Author: Flowko

src/module.ts

@@ -47,6 +47,7 @@ export interface ModuleOptions {
   autoImport?: boolean
   useNuxtTailwind?: boolean
   tailwind?: VueEmailPluginOptions['tailwind']
+  emailsDir?: string
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -67,6 +68,7 @@ export default defineNuxtModule<ModuleOptions>({
       autoImport: false,
       useNuxtTailwind: true,
       tailwind: undefined,
+      emailsDir: '/emails',
     }
   },
   async setup(options, nuxt) {
@@ -78,7 +80,7 @@ export default defineNuxtModule<ModuleOptions>({
       options,
     )
 
-    let tempaltesDir = '/emails'
+    let tempaltesDir = resolve(options.emailsDir) || resolve('/emails')
 
     for (const layer of nuxt.options._layers) {
       const templatePath = join(layer.cwd, '/emails')
@@ -90,6 +92,8 @@ export default defineNuxtModule<ModuleOptions>({
       break
     }
 
+    nuxt.options.runtimeConfig.public.vueEmail.emailsDir = tempaltesDir
+
     if (hasNuxtModule('@nuxtjs/tailwindcss') && options.useNuxtTailwind) {
       // @ts-expect-error runtime type
       nuxt.hook('tailwindcss:resolvedConfig', (resolvedConfig) => {

src/runtime/server/api/emails.get.ts

@@ -4,22 +4,7 @@ import { createComponentMetaCheckerByJsonConfig } from 'vue-component-meta'
 import { destr } from 'destr'
 import JSON5 from 'json5'
 import type { Email } from '../../types/email'
-import { createError, defineEventHandler, useStorage } from '#imports'
-
-const rootDir = process.cwd()
-const checker = createComponentMetaCheckerByJsonConfig(
-  rootDir,
-  {
-    extends: `${rootDir}/tsconfig.json`,
-    skipLibCheck: true,
-    include: ['emails/**/*'],
-    exclude: [],
-  },
-  {
-    forceUseTs: true,
-    printer: { newLine: 1 },
-  },
-)
+import { createError, defineEventHandler, useRuntimeConfig, useStorage } from '#imports'
 
 function stripeTypeScriptInternalTypesSchema(type: any): any {
   if (!type)
@@ -55,6 +40,21 @@ function stripeTypeScriptInternalTypesSchema(type: any): any {
 export default defineEventHandler(async () => {
   try {
     const nitroEmails = await useStorage('assets:emails').getKeys()
+    const rootDir = useRuntimeConfig().public.vueEmail.emailsDir || process.cwd()
+
+    const checker = createComponentMetaCheckerByJsonConfig(
+      rootDir,
+      {
+        extends: path.join(rootDir, '..', 'tsconfig.json'),
+        skipLibCheck: true,
+        include: ['./emails/**/*.vue'],
+        exclude: [],
+      },
+      {
+        forceUseTs: true,
+        printer: { newLine: 1 },
+      },
+    )
 
     const emails: Email[] = await Promise.all(
       nitroEmails.map(async (email) => {
@@ -64,85 +64,93 @@ export default defineEventHandler(async () => {
         const emailData = JSON.parse(data)
         const emailPath = path.join(
           rootDir,
-          'emails',
           email.replaceAll(':', '/'),
         )
-        const { props } = checker.getComponentMeta(emailPath)
-        let emailProps = (props).filter(prop => !prop.global).sort((a, b) => {
-          if (!a.required && b.required)
-            return 1
 
-          if (a.required && !b.required)
-            return -1
+        let destructuredProps = []
 
-          if (a.type === 'boolean' && b.type !== 'boolean')
-            return 1
+        try {
+          const { props } = checker.getComponentMeta(emailPath)
+          let emailProps = (props).filter(prop => !prop.global).sort((a, b) => {
+            if (!a.required && b.required)
+              return 1
 
-          if (a.type !== 'boolean' && b.type === 'boolean')
-            return -1
+            if (a.required && !b.required)
+              return -1
 
-          return 0
-        })
-        emailProps = emailProps.map(stripeTypeScriptInternalTypesSchema)
-        const destructuredProps = emailProps.map((prop) => {
-          const destructuredType = prop.type.split('|').map((type) => {
-            type = type.trim()
-            const value = prop.default
+            if (a.type === 'boolean' && b.type !== 'boolean')
+              return 1
 
-            if (type === 'string') {
-              return {
-                type: 'string',
-                value: destr(value) ?? '',
+            if (a.type !== 'boolean' && b.type === 'boolean')
+              return -1
+
+            return 0
+          })
+
+          emailProps = emailProps.map(stripeTypeScriptInternalTypesSchema)
+          destructuredProps = emailProps.map((prop) => {
+            const destructuredType = prop.type.split('|').map((type) => {
+              type = type.trim()
+              const value = prop.default
+
+              if (type === 'string') {
+                return {
+                  type: 'string',
+                  value: destr(value) ?? '',
+                }
               }
-            }
 
-            if (type === 'number') {
-              return {
-                type: 'number',
-                value: destr(value) || 0,
+              if (type === 'number') {
+                return {
+                  type: 'number',
+                  value: destr(value) || 0,
+                }
               }
-            }
 
-            if (type === 'boolean') {
-              return {
-                type: 'boolean',
-                value: destr(value) || false,
+              if (type === 'boolean') {
+                return {
+                  type: 'boolean',
+                  value: destr(value) || false,
+                }
               }
-            }
 
-            if (type === 'object' || type.includes('Record') || type.includes('Record<')) {
-              return {
-                type: 'object',
-                value: value ? JSON5.parse(value) : {},
+              if (type === 'object' || type.includes('Record') || type.includes('Record<')) {
+                return {
+                  type: 'object',
+                  value: value ? JSON5.parse(value) : {},
+                }
               }
-            }
 
-            if (type === 'array' || type.includes('[]') || type.includes('Array') || type.includes('Array<')) {
-              return {
-                type: 'array',
-                value: value ? JSON5.parse(value) : [],
+              if (type === 'array' || type.includes('[]') || type.includes('Array') || type.includes('Array<')) {
+                return {
+                  type: 'array',
+                  value: value ? JSON5.parse(value) : [],
+                }
+              }
+
+              if (type === 'Date') {
+                return {
+                  type: 'date',
+                  value: value ? eval(value) : new Date().toISOString(),
+                }
               }
-            }
 
-            if (type === 'Date') {
               return {
-                type: 'date',
-                value: value ? eval(value) : new Date().toISOString(),
+                type: 'string',
+                value: value ?? '',
               }
-            }
+            })
 
             return {
-              type: 'string',
-              value: value ?? '',
+              label: prop.name,
+              type: destructuredType[0].type,
+              value: destructuredType[0].value,
             }
           })
-
-          return {
-            label: prop.name,
-            type: destructuredType[0].type,
-            value: destructuredType[0].value,
-          }
-        })
+        }
+        catch (error) {
+          console.warn('Error destructuring props', error)
+        }
 
         const content = (await useStorage('assets:emails').getItem(
           email,