feat: enable access to vue email config inside code

Flowko · Flowko · commit 43d4e2c25776 · 2024-02-01T11:30:13.000+01:00
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -25,7 +25,7 @@ const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
   <Suspense>
     <ECodeBlock style="padding: 20px;" :code="code" lang="typescript" theme="dracula" show-line-numbers :highlighted-lines="[4, 5]" />
   </Suspense>
-  <ECodeInline>@vue-email/nuxt</ECodeInline>
+  <!-- <ECodeInline>@vue-email/nuxt</ECodeInline> -->
   <iframe :srcdoc="email" />
 </template>
 
diff --git a/playground/src/components/Test.vue b/playground/src/components/Test.vue
@@ -54,6 +54,9 @@ const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
           <EText class="text-black text-[14px] leading-[24px]">
             Hello {{ username }},
           </EText>
+          <EText class="text-black text-[14px] leading-[24px]">
+            {{ $vueEmail }}
+          </EText>
           <EText class="text-black text-[14px] leading-[24px]">
             <strong>bukinoshita</strong> (
             <ELink :href="`mailto:${invitedByEmail}`" class="text-blue-600 no-underline">
diff --git a/src/composables/render.ts b/src/composables/render.ts
@@ -4,6 +4,7 @@ import { renderToString } from 'vue/server-renderer'
 import pretty from 'pretty'
 import { cleanup, htmlToText } from '../utils'
 import type { I18n } from '../types'
+import { config } from '../config'
 
 export interface Options {
   pretty?: boolean
@@ -70,6 +71,8 @@ export async function useRender(
   const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
   const app = createApp({ render: () => h(component) }, params?.props)
 
+  app.config.globalProperties.$vueEmail = config
+
   await useI18n(app, params)
 
   const markup = await renderToString(app)
diff --git a/src/plugin/index.ts b/src/plugin/index.ts
@@ -7,8 +7,10 @@ import { config } from '../config'
 
 export const VueEmailPlugin: Plugin = {
   install(app, options: VueEmailPluginOptions = {}) {
-    if (options)
+    if (options) {
       deepmerge<VueEmailPluginOptions>(config, options)
+      app.config.globalProperties.$vueEmail = options
+    }
 
     Object.entries(components).forEach(([name, component]) => {
       app.component(name, component)
diff --git a/src/types/compiler.ts b/src/types/compiler.ts
@@ -24,3 +24,9 @@ export interface I18n {
 }
 
 export type DeepRequired<T> = Required<{ [P in keyof T]: DeepRequired<T[P]> }>
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $vueEmail: VueEmailPluginOptions
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -24,3 +24,9 @@ export interface I18n {`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`export type DeepRequired<T> = Required<{ [P in keyof T]: DeepRequired<T[P]> }>`
	`27`	`+`
	`28`	`+declare module 'vue' {`
	`29`	`+ interface ComponentCustomProperties {`
	`30`	`+ $vueEmail: VueEmailPluginOptions`
	`31`	`+ }`
	`32`	`+}`