nuxt-generation-emails 0.1.0

package/dist/module.mjs

@@ -0,0 +1,402 @@
+import { defineNuxtModule, createResolver, addImports, addServerImports, extendPages, addServerHandler } from '@nuxt/kit';
+import fs from 'node:fs';
+import vue from '@vitejs/plugin-vue';
+import { join, relative } from 'pathe';
+import { consola } from 'consola';
+import { parse, compileScript } from 'vue/compiler-sfc';
+
+function generateWrapperComponent(emailsLayoutPath, emailComponentPath, extractedProps) {
+  const hasProps = extractedProps.props.length > 0;
+  const defaultsLiteral = JSON.stringify(extractedProps.defaults, null, 2);
+  const propDefsLiteral = JSON.stringify(
+    extractedProps.props.map((p) => ({ name: p.name, type: p.type })),
+    null,
+    2
+  );
+  const scriptClose = "<\/script>";
+  const templateOpen = "<template>";
+  const templateClose = "</template>";
+  return `<script setup lang="ts">
+import { reactive, definePageMeta, onMounted } from '#imports'
+import EmailsLayout from '${emailsLayoutPath}'
+import EmailComponent from '${emailComponentPath}'
+
+definePageMeta({ layout: false })
+${hasProps ? `
+const propDefaults = ${defaultsLiteral}
+const propDefinitions = ${propDefsLiteral}
+
+// Reactive state derived from the template's withDefaults \u2014 drives both
+// the live preview and the sidebar controls.
+const emailProps = reactive<Record<string, unknown>>({ ...propDefaults })
+
+// Hydrate from URL params on mount so shared links restore state.
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    const params = new URLSearchParams(window.location.search)
+    params.forEach((value, key) => {
+      if (key in emailProps) {
+        const current = emailProps[key]
+        if (typeof current === 'number') {
+          const n = Number(value)
+          if (!Number.isNaN(n)) emailProps[key] = n
+        } else if (typeof current === 'boolean') {
+          emailProps[key] = value === 'true'
+        } else {
+          emailProps[key] = value
+        }
+      }
+    })
+  }
+})
+` : ""}
+${scriptClose}
+
+${templateOpen}
+  <EmailsLayout${hasProps ? ' :email-props="emailProps" :prop-definitions="propDefinitions"' : ""}>
+    <EmailComponent${hasProps ? ' v-bind="emailProps"' : ""} />
+  </EmailsLayout>
+${templateClose}
+`;
+}
+
+function extractPropsFromSFC(filePath) {
+  const source = fs.readFileSync(filePath, "utf-8");
+  const { descriptor } = parse(source, { filename: filePath });
+  if (!descriptor.scriptSetup) {
+    return { props: [], defaults: {} };
+  }
+  try {
+    const compiled = compileScript(descriptor, {
+      id: filePath,
+      isProd: false
+    });
+    const props = [];
+    const defaults = {};
+    const propNames = [];
+    if (compiled.bindings) {
+      for (const [name, binding] of Object.entries(compiled.bindings)) {
+        if (binding === "props") {
+          propNames.push(name);
+        }
+      }
+    }
+    const propTypes = extractPropTypesFromSource(descriptor.scriptSetup.content);
+    for (const name of propNames) {
+      const type = propTypes[name] ?? "unknown";
+      props.push({ name, type });
+    }
+    const defaultValues = extractDefaultsFromSource(descriptor.scriptSetup.content);
+    for (const [name, value] of Object.entries(defaultValues)) {
+      defaults[name] = value;
+      const existing = props.find((p) => p.name === name);
+      if (existing) {
+        existing.default = value;
+      }
+    }
+    return { props, defaults };
+  } catch {
+    return { props: [], defaults: {} };
+  }
+}
+function extractPropTypesFromSource(scriptContent) {
+  const result = {};
+  const match = scriptContent.match(/defineProps\s*<\s*\{([\s\S]*?)\}\s*>\s*\(/);
+  if (!match) return result;
+  const typeBody = match[1];
+  const propPattern = /(\w+)\s*(?:\?\s*)?:\s*(\w+)/g;
+  let propMatch;
+  while ((propMatch = propPattern.exec(typeBody)) !== null) {
+    const name = propMatch[1];
+    const tsType = propMatch[2];
+    switch (tsType.toLowerCase()) {
+      case "string":
+        result[name] = "string";
+        break;
+      case "number":
+        result[name] = "number";
+        break;
+      case "boolean":
+        result[name] = "boolean";
+        break;
+      default:
+        result[name] = "object";
+        break;
+    }
+  }
+  return result;
+}
+function extractDefaultsFromSource(scriptContent) {
+  const withDefaultsMatch = scriptContent.match(
+    /withDefaults\s*\(\s*defineProps\s*<[^>]*>\s*\(\s*\)\s*,\s*(\{[\s\S]*?\})\s*\)/
+  );
+  if (!withDefaultsMatch) return {};
+  const defaultsText = withDefaultsMatch[1];
+  if (!defaultsText) return {};
+  try {
+    const jsonish = defaultsText.replace(/'/g, '"').replace(/(\w+)\s*:/g, '"$1":').replace(/,\s*([\]}])/g, "$1");
+    return JSON.parse(jsonish);
+  } catch {
+    return extractPrimitivesFromObjectLiteral(defaultsText);
+  }
+}
+function extractPrimitivesFromObjectLiteral(text) {
+  const result = {};
+  const linePattern = /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|(\d+(?:\.\d+)?)|(true|false))\s*[,}]?/g;
+  let match;
+  while ((match = linePattern.exec(text)) !== null) {
+    const key = match[1];
+    if (match[2] != null) result[key] = match[2];
+    else if (match[3] != null) result[key] = match[3];
+    else if (match[4] != null) result[key] = Number(match[4]);
+    else if (match[5] != null) result[key] = match[5] === "true";
+  }
+  return result;
+}
+
+function addEmailPages(dirPath, pages, options, routePrefix = "") {
+  const entries = fs.readdirSync(dirPath);
+  for (const entry of entries) {
+    const fullPath = join(dirPath, entry);
+    const stat = fs.statSync(fullPath);
+    if (stat.isDirectory()) {
+      addEmailPages(fullPath, pages, options, `${routePrefix}/${entry}`);
+    } else if (entry.endsWith(".vue")) {
+      const name = entry.replace(".vue", "");
+      const routePath = `/__emails${routePrefix}/${name}`;
+      const wrapperPath = join(options.buildDir, "email-wrappers", `${routePrefix}/${name}.vue`.replace(/^\//, ""));
+      const wrapperDir = join(options.buildDir, "email-wrappers", routePrefix.replace(/^\//, ""));
+      if (!fs.existsSync(wrapperDir)) {
+        fs.mkdirSync(wrapperDir, { recursive: true });
+      }
+      const extractedProps = extractPropsFromSFC(fullPath);
+      const wrapperContent = generateWrapperComponent(
+        options.emailTemplateComponentPath,
+        fullPath,
+        extractedProps
+      );
+      fs.writeFileSync(wrapperPath, wrapperContent, "utf-8");
+      const pageName = `email${routePrefix.replace(/\//g, "-")}-${name}`.replace(/^-+/, "");
+      pages.push({
+        name: pageName,
+        path: routePath,
+        file: wrapperPath
+      });
+    }
+  }
+}
+
+function generateApiRoute(emailName, emailPath, examplePayload = "{}") {
+  return `/* eslint-disable */
+// This file is generated by nuxt-generation-emails. Do not modify it manually.
+
+import { defineEventHandler, readBody, createError } from 'h3'
+import { useNitroApp, getSendGenEmailsHandler } from '#imports'
+import { render } from '@vue-email/render'
+import EmailTemplate from '~/emails/${emailPath}.vue'
+
+defineRouteMeta({
+  openAPI: {
+    tags: ['nuxt-generation-emails'],
+    summary: 'Send ${emailName} email',
+    description: 'Render and send the ${emailPath} email template.',
+    requestBody: {
+      required: true,
+      content: {
+        'application/json': {
+          schema: {
+            type: 'object',
+            example: ${examplePayload},
+            additionalProperties: true,
+            description: '${emailName} props payload',
+          },
+        },
+      },
+    },
+    responses: {
+      200: {
+        description: 'Email rendered successfully',
+        content: {
+          'application/json': {
+            schema: {
+              type: 'object',
+              properties: {
+                success: { type: 'boolean' },
+                message: { type: 'string' },
+                html: { type: 'string' },
+              },
+              required: ['success', 'message', 'html'],
+            },
+          },
+        },
+      },
+      500: {
+        description: 'Failed to render or send email',
+        content: {
+          'application/json': {
+            schema: {
+              type: 'object',
+              properties: {
+                statusCode: { type: 'number', example: 500 },
+                statusMessage: { type: 'string' },
+              },
+              required: ['statusCode', 'statusMessage'],
+            },
+          },
+        },
+      },
+    },
+  },
+})
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody<Record<string, unknown>>(event)
+
+  try {
+    const html = await render(EmailTemplate, body, { pretty: true })
+
+    const nitro = useNitroApp()
+    const sendGenEmailsHandler = getSendGenEmailsHandler()
+
+    if (sendGenEmailsHandler) {
+      await sendGenEmailsHandler(html, body)
+    }
+    else {
+      // @ts-ignore - custom hook
+      await nitro.hooks.callHook('nuxt-gen-emails:send', { html, data: body })
+    }
+
+    return { success: true, message: 'Email rendered successfully', html }
+  }
+  catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Failed to render or send email'
+    throw createError({ statusCode: 500, statusMessage: message })
+  }
+})
+`;
+}
+
+function generateServerRoutes(emailsDir, buildDir) {
+  if (!fs.existsSync(emailsDir)) return [];
+  const handlersDir = join(buildDir, "email-handlers");
+  const handlers = [];
+  if (!fs.existsSync(handlersDir)) {
+    fs.mkdirSync(handlersDir, { recursive: true });
+  }
+  function processEmailDirectory(dirPath, routePrefix = "") {
+    const entries = fs.readdirSync(dirPath);
+    for (const entry of entries) {
+      const fullPath = join(dirPath, entry);
+      const stat = fs.statSync(fullPath);
+      if (stat.isDirectory()) {
+        processEmailDirectory(fullPath, `${routePrefix}/${entry}`);
+      } else if (entry.endsWith(".vue")) {
+        const emailName = entry.replace(".vue", "");
+        const emailPath = `${routePrefix}/${emailName}`.replace(/^\//, "");
+        const handlerDir = routePrefix ? join(handlersDir, routePrefix.replace(/^\//, "")) : handlersDir;
+        if (!fs.existsSync(handlerDir)) {
+          fs.mkdirSync(handlerDir, { recursive: true });
+        }
+        const { defaults } = extractPropsFromSFC(fullPath);
+        const examplePayload = Object.keys(defaults).length > 0 ? JSON.stringify(defaults, null, 2) : "{}";
+        const handlerFileName = `${emailName}.ts`;
+        const handlerFilePath = join(handlerDir, handlerFileName);
+        const handlerContent = generateApiRoute(emailName, emailPath, examplePayload);
+        fs.writeFileSync(handlerFilePath, handlerContent, "utf-8");
+        console.log(`[nuxt-gen-emails] Generated API handler: ${handlerFilePath}`);
+        handlers.push({
+          route: `/api/emails/${emailPath}`,
+          method: "post",
+          handlerPath: handlerFilePath
+        });
+      }
+    }
+  }
+  processEmailDirectory(emailsDir);
+  return handlers;
+}
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-generation-emails",
+    configKey: "nuxtGenerationEmails",
+    compatibility: {
+      // Semver version of supported nuxt versions
+      nuxt: ">=4.0.0"
+    }
+  },
+  defaults: {
+    emailDir: "emails"
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const configuredEmailDir = options.emailDir ?? "emails";
+    const emailsDir = join(nuxt.options.srcDir, configuredEmailDir);
+    nuxt.options.runtimeConfig.nuxtGenEmails = {
+      emailsDir,
+      sendGenEmails: options.sendGenEmails
+    };
+    addImports([
+      {
+        name: "encodeStoreToUrlParams",
+        from: resolver.resolve("./runtime/utils/url-params")
+      },
+      {
+        name: "generateShareableUrl",
+        from: resolver.resolve("./runtime/utils/url-params")
+      }
+    ]);
+    addServerImports([
+      {
+        name: "encodeStoreToUrlParams",
+        from: resolver.resolve("./runtime/utils/url-params")
+      },
+      {
+        name: "getSendGenEmailsHandler",
+        from: resolver.resolve("./runtime/server/utils/send-gen-emails")
+      }
+    ]);
+    extendPages((pages) => {
+      if (!fs.existsSync(emailsDir)) {
+        return;
+      }
+      addEmailPages(emailsDir, pages, {
+        buildDir: nuxt.options.buildDir,
+        emailTemplateComponentPath: resolver.resolve("./runtime/pages/__emails.vue")
+      });
+    });
+    const handlers = generateServerRoutes(emailsDir, nuxt.options.buildDir);
+    for (const handler of handlers) {
+      addServerHandler({
+        route: handler.route,
+        method: handler.method,
+        handler: handler.handlerPath
+      });
+    }
+    const rollupConfig = nuxt.options.nitro?.rollupConfig ?? {};
+    const existingPlugins = rollupConfig.plugins ?? [];
+    const plugins = Array.isArray(existingPlugins) ? existingPlugins : [existingPlugins];
+    rollupConfig.plugins = [...plugins, vue()];
+    nuxt.options.nitro = { ...nuxt.options.nitro, rollupConfig };
+    if (nuxt.options.dev && fs.existsSync(emailsDir)) {
+      const relDir = relative(nuxt.options.rootDir, emailsDir);
+      consola.info(`[nuxt-gen-emails] Watching for new templates in ${relDir}/`);
+      nuxt.options.watch.push(emailsDir + "/**/*.vue");
+      nuxt.hook("builder:watch", (event, relativePath) => {
+        const absolutePath = join(nuxt.options.rootDir, relativePath);
+        const rel = relative(emailsDir, absolutePath);
+        if (event === "add") {
+          consola.success(`[nuxt-gen-emails] New template detected: ${rel}`);
+          consola.info("[nuxt-gen-emails] Restarting to register new routes...");
+          nuxt.callHook("restart");
+        } else if (event === "unlink") {
+          consola.warn(`[nuxt-gen-emails] Template removed: ${rel}`);
+          consola.info("[nuxt-gen-emails] Restarting to update routes...");
+          nuxt.callHook("restart");
+        }
+      });
+    }
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/ApiTester.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    dataObject: Record<string, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ApiTester.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useRoute } from "#imports";
+const props = defineProps({
+  dataObject: { type: Object, required: true }
+});
+const route = useRoute();
+const isLoading = ref(false);
+const response = ref("");
+const responseData = ref(null);
+const error = ref("");
+const copySuccess = ref(false);
+const copyHtmlSuccess = ref(false);
+const apiEndpoint = computed(() => {
+  const templatePath = route.path.replace("/__emails/", "");
+  return `/api/emails/${templatePath}`;
+});
+const htmlResponse = computed(() => {
+  if (!responseData.value || typeof responseData.value !== "object") return "";
+  if (!("html" in responseData.value)) return "";
+  const html = responseData.value.html;
+  return typeof html === "string" ? html : "";
+});
+async function testApi() {
+  isLoading.value = true;
+  error.value = "";
+  response.value = "";
+  try {
+    const result = await $fetch(apiEndpoint.value, {
+      method: "POST",
+      body: props.dataObject
+    });
+    responseData.value = result;
+    response.value = JSON.stringify(result, null, 2);
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : "Failed to test API";
+    responseData.value = err;
+    response.value = JSON.stringify(err, null, 2);
+  } finally {
+    isLoading.value = false;
+  }
+}
+async function copyResponse() {
+  if (!response.value) return;
+  try {
+    await navigator.clipboard.writeText(response.value);
+    copySuccess.value = true;
+    setTimeout(() => {
+      copySuccess.value = false;
+    }, 2e3);
+  } catch (error2) {
+    console.error("Failed to copy response:", error2);
+  }
+}
+async function copyHtml() {
+  if (!htmlResponse.value) return;
+  try {
+    await navigator.clipboard.writeText(htmlResponse.value);
+    copyHtmlSuccess.value = true;
+    setTimeout(() => {
+      copyHtmlSuccess.value = false;
+    }, 2e3);
+  } catch (error2) {
+    console.error("Failed to copy HTML:", error2);
+  }
+}
+</script>
+
+<template>
+  <div class="nge-api-tester">
+    <div class="nge-api-tester__header">
+      <h4>API Tester</h4>
+      <button
+        class="nge-api-tester__button"
+        :disabled="isLoading"
+        @click="testApi"
+      >
+        {{ isLoading ? "Testing..." : "Test POST Request" }}
+      </button>
+    </div>
+    <div class="nge-api-tester__endpoint">
+      <code>POST {{ apiEndpoint }}</code>
+    </div>
+    <div
+      v-if="error"
+      class="nge-api-tester__error"
+    >
+      {{ error }}
+    </div>
+    <div
+      v-if="response"
+      class="nge-api-tester__response"
+    >
+      <div class="nge-api-tester__response-header">
+        <span class="nge-api-tester__response-label">Response</span>
+        <div class="nge-api-tester__response-actions">
+          <button
+            v-if="htmlResponse"
+            class="nge-api-tester__copy-button"
+            @click="copyHtml"
+          >
+            {{ copyHtmlSuccess ? "\u2713 Copied HTML" : "Copy HTML" }}
+          </button>
+          <button
+            class="nge-api-tester__copy-button"
+            @click="copyResponse"
+          >
+            {{ copySuccess ? "\u2713 Copied" : "Copy" }}
+          </button>
+        </div>
+      </div>
+      <textarea
+        class="nge-api-tester__output"
+        :value="response"
+        readonly
+        placeholder="Response will appear here..."
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.nge-api-tester{border-top:1px solid #e5e7eb;margin-top:24px;padding-top:24px}.nge-api-tester__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.nge-api-tester__header h4{color:#111827;font-size:14px;font-weight:600;margin:0}.nge-api-tester__button,.nge-api-tester__header h4{font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;letter-spacing:-.01em}.nge-api-tester__button{background:#047857;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:500;padding:8px 14px;transition:all .2s cubic-bezier(.4,0,.2,1)}.nge-api-tester__button:hover:not(:disabled){background:#065f46;box-shadow:0 2px 8px rgba(4,120,87,.3);transform:translateY(-1px)}.nge-api-tester__button:active:not(:disabled){transform:translateY(0)}.nge-api-tester__button:disabled{cursor:not-allowed;opacity:.6}.nge-api-tester__endpoint{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;margin-bottom:12px;padding:8px 12px}.nge-api-tester__endpoint code{color:#374151;font-family:Monaco,Menlo,Consolas,monospace;font-size:11px;word-break:break-all}.nge-api-tester__error{background:#fef2f2;border:1px solid #fecaca;border-radius:6px;color:#dc2626;font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;margin-bottom:12px;padding:10px 12px}.nge-api-tester__response{margin-top:12px}.nge-api-tester__response-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.nge-api-tester__response-actions{display:flex;gap:8px}.nge-api-tester__response-label{color:#6b7280;font-size:12px}.nge-api-tester__copy-button,.nge-api-tester__response-label{font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:500;letter-spacing:-.01em}.nge-api-tester__copy-button{background:#047857;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:11px;padding:6px 12px;transition:all .2s cubic-bezier(.4,0,.2,1)}.nge-api-tester__copy-button:hover{background:#065f46}.nge-api-tester__output{background:#f9fafb;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;color:#111827;font-family:Monaco,Menlo,Consolas,monospace;font-size:11px;line-height:1.5;max-height:400px;min-height:200px;padding:12px;resize:vertical;width:100%}.nge-api-tester__output:focus{border-color:#047857;box-shadow:0 0 0 3px rgba(4,120,87,.1);outline:none}
+</style>

package/dist/runtime/components/ApiTester.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    dataObject: Record<string, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/EmailTemplateSelector.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    templates: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;