@lupinum/nuxt-email 0.1.0

package/dist/runtime/components/EPreview.d.ts

@@ -0,0 +1,8 @@
+import type { DefineComponent, HTMLAttributes, VNodeChild } from 'vue';
+import type { SafeEmailAttributes } from './attributes.js';
+export declare const PREVIEW_MAX_LENGTH = 200;
+export declare const PREVIEW_WHITESPACE = "\u00A0\u200C\u200B\u200D\u200E\u200F\uFEFF";
+export type EPreviewProps = SafeEmailAttributes<HTMLAttributes>;
+export declare function previewText(children: VNodeChild): string;
+export declare function previewWhitespace(text: string): string | undefined;
+export declare const EPreview: DefineComponent<EPreviewProps>;

package/dist/runtime/components/EPreview.js

@@ -0,0 +1,85 @@
+import { Comment, defineComponent, Fragment, h, isVNode, Text } from "vue";
+import { assertSafeEmailAttributes } from "./attributes.js";
+import { normalizeEmailStyle } from "./style.js";
+export const PREVIEW_MAX_LENGTH = 200;
+export const PREVIEW_WHITESPACE = "\xA0\u200C\u200B\u200D\u200E\u200F\uFEFF";
+const DEFAULT_PREVIEW_STYLE = {
+  display: "none",
+  overflow: "hidden",
+  lineHeight: "1px",
+  opacity: 0,
+  maxHeight: 0,
+  maxWidth: 0
+};
+const PREVIEW_READ_LIMIT = PREVIEW_MAX_LENGTH + 1;
+function appendPreviewText(child, text) {
+  if (text.value.length >= PREVIEW_READ_LIMIT) {
+    return;
+  }
+  if (child === null || child === void 0 || typeof child === "boolean") {
+    return;
+  }
+  if (typeof child === "string" || typeof child === "number") {
+    const remainingLength = PREVIEW_READ_LIMIT - text.value.length;
+    text.value += String(child).substring(0, remainingLength);
+    return;
+  }
+  if (Array.isArray(child)) {
+    for (const nestedChild of child) {
+      appendPreviewText(nestedChild, text);
+      if (text.value.length >= PREVIEW_READ_LIMIT) {
+        break;
+      }
+    }
+    return;
+  }
+  if (!isVNode(child)) {
+    throw new TypeError("EPreview default slot must contain text only");
+  }
+  if (child.type === Comment) {
+    return;
+  }
+  if (child.type === Text) {
+    appendPreviewText(child.children, text);
+    return;
+  }
+  if (child.type === Fragment && Array.isArray(child.children)) {
+    appendPreviewText(child.children, text);
+    return;
+  }
+  throw new TypeError("EPreview default slot must contain text only");
+}
+export function previewText(children) {
+  const text = { value: "" };
+  appendPreviewText(children, text);
+  const truncated = text.value.substring(0, PREVIEW_MAX_LENGTH);
+  const finalCodeUnit = truncated.charCodeAt(truncated.length - 1);
+  return finalCodeUnit >= 55296 && finalCodeUnit <= 56319 ? truncated.slice(0, -1) : truncated;
+}
+export function previewWhitespace(text) {
+  if (text.length >= PREVIEW_MAX_LENGTH) {
+    return void 0;
+  }
+  return PREVIEW_WHITESPACE.repeat(PREVIEW_MAX_LENGTH - text.length);
+}
+export const EPreview = defineComponent({
+  name: "EPreview",
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    return () => {
+      assertSafeEmailAttributes("EPreview", attrs);
+      const text = previewText(slots.default?.() ?? []);
+      const filler = previewWhitespace(text);
+      const { style, ...attributes } = attrs;
+      delete attributes["data-skip-in-text"];
+      return h("div", {
+        "style": { ...normalizeEmailStyle(style), ...DEFAULT_PREVIEW_STYLE },
+        "data-skip-in-text": "true",
+        ...attributes
+      }, [
+        text,
+        ...filler === void 0 ? [] : [h("div", filler)]
+      ]);
+    };
+  }
+});

package/dist/runtime/components/ERow.d.ts

@@ -0,0 +1,4 @@
+import type { DefineComponent, TableHTMLAttributes } from 'vue';
+import type { SafeEmailAttributes } from './attributes.js';
+export type ERowProps = Omit<SafeEmailAttributes<TableHTMLAttributes>, 'border' | 'cellpadding' | 'cellspacing' | 'role'>;
+export declare const ERow: DefineComponent<ERowProps>;

package/dist/runtime/components/ERow.js

@@ -0,0 +1,53 @@
+import { defineComponent, h, inject } from "vue";
+import { resolveNestedTailwindStyle, TAILWIND_NESTED_KEY } from "../tailwind/nested.js";
+import { assertSafeEmailAttributes } from "./attributes.js";
+import { assertFixedPresentationTable } from "./presentation-table.js";
+import { splitTablePadding } from "./table-padding.js";
+export const ERow = defineComponent({
+  name: "ERow",
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    const holder = inject(TAILWIND_NESTED_KEY, null);
+    return () => {
+      assertSafeEmailAttributes("ERow", attrs);
+      assertFixedPresentationTable("ERow", attrs);
+      const { style, ...attributes } = attrs;
+      const effectiveStyle = resolveNestedTailwindStyle(holder, attributes, style).style;
+      const { tableStyle, cellStyle } = splitTablePadding(effectiveStyle);
+      const tableAttributes = {
+        align: "center",
+        width: "100%",
+        border: 0,
+        cellpadding: "0",
+        cellspacing: "0",
+        role: "presentation",
+        ...attributes,
+        ...Object.keys(tableStyle).length > 0 ? { style: tableStyle } : {}
+      };
+      const rowContent = [
+        h("tbody", { style: { width: "100%" } }, [
+          h("tr", { style: { width: "100%" } }, slots.default?.())
+        ])
+      ];
+      if (Object.keys(cellStyle).length === 0) {
+        return h("table", tableAttributes, rowContent);
+      }
+      return h("table", tableAttributes, [
+        h("tbody", [
+          h("tr", [
+            h("td", { style: cellStyle }, [
+              h("table", {
+                align: "center",
+                width: "100%",
+                border: 0,
+                cellpadding: "0",
+                cellspacing: "0",
+                role: "presentation"
+              }, rowContent)
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});

package/dist/runtime/components/ESection.d.ts

@@ -0,0 +1,4 @@
+import type { DefineComponent, TableHTMLAttributes } from 'vue';
+import type { SafeEmailAttributes } from './attributes.js';
+export type ESectionProps = Omit<SafeEmailAttributes<TableHTMLAttributes>, 'border' | 'cellpadding' | 'cellspacing' | 'role'>;
+export declare const ESection: DefineComponent<ESectionProps>;

package/dist/runtime/components/ESection.js

@@ -0,0 +1,35 @@
+import { defineComponent, h, inject } from "vue";
+import { resolveNestedTailwindStyle, TAILWIND_NESTED_KEY } from "../tailwind/nested.js";
+import { assertSafeEmailAttributes } from "./attributes.js";
+import { assertFixedPresentationTable } from "./presentation-table.js";
+import { splitTablePadding } from "./table-padding.js";
+export const ESection = defineComponent({
+  name: "ESection",
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    const holder = inject(TAILWIND_NESTED_KEY, null);
+    return () => {
+      assertSafeEmailAttributes("ESection", attrs);
+      assertFixedPresentationTable("ESection", attrs);
+      const { style, ...attributes } = attrs;
+      const effectiveStyle = resolveNestedTailwindStyle(holder, attributes, style).style;
+      const { tableStyle, cellStyle } = splitTablePadding(effectiveStyle);
+      return h("table", {
+        align: "center",
+        width: "100%",
+        border: 0,
+        cellpadding: "0",
+        cellspacing: "0",
+        role: "presentation",
+        ...attributes,
+        ...Object.keys(tableStyle).length > 0 ? { style: tableStyle } : {}
+      }, [
+        h("tbody", [
+          h("tr", [
+            h("td", Object.keys(cellStyle).length > 0 ? { style: cellStyle } : {}, slots.default?.())
+          ])
+        ])
+      ]);
+    };
+  }
+});

package/dist/runtime/components/ETailwind.d.ts

@@ -0,0 +1,24 @@
+import type { TailwindConfig } from '../tailwind/engine/index.js';
+import type { DefineComponent } from 'vue';
+export interface ETailwindProps {
+    /** Tailwind config (everything except `content`), same shape as React Email. */
+    config?: TailwindConfig;
+    /** Raw CSS appended to the theme layer (`@theme`), same as React Email's `theme`. */
+    theme?: string;
+    /** Raw CSS appended to the utilities layer, same as React Email's `utility`. */
+    utility?: string;
+}
+/**
+ * Server-only Tailwind boundary. Faithful behavioural port of React Email's
+ * `<Tailwind>`: it compiles the Tailwind stylesheet for its config, then inlines
+ * the utilities used by its subtree into each element's style, moves media-query
+ * and pseudo-class rules into a `<style>` in the `<head>`, and rewrites residual
+ * class names.
+ *
+ * E* primitives self-inline through the context provided here
+ * ({@link TAILWIND_NESTED_KEY}). Once Vue has rendered the subtree exactly once,
+ * the marker-scoped post-render pass ({@link ../tailwind/post-render}) handles
+ * structural and native elements and inserts non-inlinable CSS into `<head>`.
+ * Nothing outside an `<ETailwind>` boundary is affected.
+ */
+export declare const ETailwind: DefineComponent<ETailwindProps>;

package/dist/runtime/components/ETailwind.js

@@ -0,0 +1,49 @@
+import { createCommentVNode, defineComponent, inject, provide } from "vue";
+import { getEmailRenderContext } from "../render/define-email.js";
+import { createTailwindEngine } from "../tailwind/engine/index.js";
+import { createTailwindRegion, TAILWIND_NESTED_KEY } from "../tailwind/nested.js";
+export const ETailwind = defineComponent({
+  name: "ETailwind",
+  inheritAttrs: false,
+  props: {
+    config: {
+      type: Object,
+      default: void 0
+    },
+    theme: {
+      type: String,
+      default: void 0
+    },
+    utility: {
+      type: String,
+      default: void 0
+    }
+  },
+  async setup(props, { slots }) {
+    if (inject(TAILWIND_NESTED_KEY, null)) {
+      throw new TypeError("ETailwind boundaries cannot be nested; wrap the email document in one ETailwind boundary.");
+    }
+    const holder = { engine: null, region: null };
+    provide(TAILWIND_NESTED_KEY, holder);
+    const engine = await createTailwindEngine({
+      config: props.config,
+      theme: props.theme,
+      utility: props.utility
+    });
+    holder.engine = engine;
+    return () => {
+      const children = slots.default?.() ?? [];
+      const region = createTailwindRegion(engine, []);
+      holder.region = region;
+      const context = getEmailRenderContext();
+      if (context) {
+        (context.tailwindRegions ??= []).push(region);
+      }
+      return [
+        createCommentVNode(region.startMarker),
+        ...children,
+        createCommentVNode(region.endMarker)
+      ];
+    };
+  }
+});

package/dist/runtime/components/EText.d.ts

@@ -0,0 +1,4 @@
+import type { DefineComponent, HTMLAttributes } from 'vue';
+import type { SafeEmailAttributes } from './attributes.js';
+export type ETextProps = SafeEmailAttributes<HTMLAttributes>;
+export declare const EText: DefineComponent<ETextProps>;

package/dist/runtime/components/EText.js

@@ -0,0 +1,20 @@
+import { defineComponent, h, inject } from "vue";
+import { resolveNestedTailwindStyle, TAILWIND_NESTED_KEY } from "../tailwind/nested.js";
+import { assertSafeEmailAttributes } from "./attributes.js";
+import { textStyle } from "./EText.margins.js";
+export const EText = defineComponent({
+  name: "EText",
+  inheritAttrs: false,
+  setup(_props, { attrs, slots }) {
+    const holder = inject(TAILWIND_NESTED_KEY, null);
+    return () => {
+      assertSafeEmailAttributes("EText", attrs);
+      const { style, ...attributes } = attrs;
+      const effectiveStyle = resolveNestedTailwindStyle(holder, attributes, style).style;
+      return h("p", {
+        ...attributes,
+        style: textStyle(effectiveStyle)
+      }, slots.default?.());
+    };
+  }
+});

package/dist/runtime/components/EText.margins.d.ts

@@ -0,0 +1,18 @@
+import type { EmailStyle } from './style.js';
+type MarginValue = string | number | undefined;
+export interface MarginProperties {
+    margin?: MarginValue;
+    marginTop?: MarginValue;
+    marginRight?: MarginValue;
+    marginBottom?: MarginValue;
+    marginLeft?: MarginValue;
+}
+export interface ComputedMargins {
+    marginTop: MarginValue;
+    marginRight: MarginValue;
+    marginBottom: MarginValue;
+    marginLeft: MarginValue;
+}
+export declare function computeTextMargins(properties: MarginProperties): ComputedMargins;
+export declare function textStyle(style: unknown): EmailStyle;
+export {};

package/dist/runtime/components/EText.margins.js

@@ -0,0 +1,81 @@
+import { normalizeEmailStyle } from "./style.js";
+function parseMargin(value) {
+  const empty = {
+    marginTop: void 0,
+    marginRight: void 0,
+    marginBottom: void 0,
+    marginLeft: void 0
+  };
+  if (typeof value === "number") {
+    return {
+      marginTop: value,
+      marginBottom: value,
+      marginLeft: value,
+      marginRight: value
+    };
+  }
+  if (typeof value !== "string") {
+    return empty;
+  }
+  const values = value.trim().split(/\s+/);
+  if (values.length === 1) {
+    return {
+      marginTop: values[0],
+      marginBottom: values[0],
+      marginLeft: values[0],
+      marginRight: values[0]
+    };
+  }
+  if (values.length === 2) {
+    return {
+      marginTop: values[0],
+      marginBottom: values[0],
+      marginLeft: values[1],
+      marginRight: values[1]
+    };
+  }
+  if (values.length === 3) {
+    return {
+      marginTop: values[0],
+      marginBottom: values[2],
+      marginLeft: values[1],
+      marginRight: values[1]
+    };
+  }
+  if (values.length === 4) {
+    return {
+      marginTop: values[0],
+      marginBottom: values[2],
+      marginLeft: values[3],
+      marginRight: values[1]
+    };
+  }
+  return empty;
+}
+export function computeTextMargins(properties) {
+  let result = parseMargin(void 0);
+  for (const [property, value] of Object.entries(properties)) {
+    if (property === "margin") {
+      result = parseMargin(value);
+    } else if (property === "marginTop" || property === "marginRight" || property === "marginBottom" || property === "marginLeft") {
+      result[property] = value;
+    }
+  }
+  return result;
+}
+export function textStyle(style) {
+  const emailStyle = normalizeEmailStyle(style) ?? {};
+  const defaults = {};
+  if (emailStyle.marginTop === void 0) {
+    defaults.marginTop = "16px";
+  }
+  if (emailStyle.marginBottom === void 0) {
+    defaults.marginBottom = "16px";
+  }
+  return {
+    fontSize: "14px",
+    lineHeight: "24px",
+    ...emailStyle,
+    ...computeTextMargins({ ...defaults, ...emailStyle })
+  };
+}

package/dist/runtime/components/attributes.d.ts

@@ -0,0 +1,4 @@
+export type SafeEmailAttributes<Attributes> = {
+    [Key in keyof Attributes as Key extends 'innerHTML' | 'textContent' ? never : Key extends `on${string}` ? never : Key]: Attributes[Key];
+};
+export declare function assertSafeEmailAttributes(componentName: string, attributes: Readonly<Record<string, unknown>>): void;

package/dist/runtime/components/attributes.js

@@ -0,0 +1,11 @@
+const CONTENT_ATTRIBUTES = /* @__PURE__ */ new Set(["innerHTML", "textContent"]);
+export function assertSafeEmailAttributes(componentName, attributes) {
+  const unsafeAttributes = Object.keys(attributes).filter((name) => {
+    return CONTENT_ATTRIBUTES.has(name) || name.length > 2 && name.slice(0, 2).toLowerCase() === "on";
+  });
+  if (unsafeAttributes.length > 0) {
+    throw new TypeError(
+      `${componentName} does not support unsafe HTML attribute${unsafeAttributes.length === 1 ? "" : "s"}: ${unsafeAttributes.join(", ")}`
+    );
+  }
+}

package/dist/runtime/components/email-component-names.d.ts

@@ -0,0 +1,2 @@
+export declare const EMAIL_COMPONENT_NAMES: readonly ["EBody", "EButton", "ECodeInline", "EColumn", "EContainer", "EFont", "EHead", "EHeading", "EHr", "EHtml", "EImg", "ELink", "EMarkdown", "EPreview", "ERow", "ESection", "ETailwind", "EText"];
+export type EmailComponentName = typeof EMAIL_COMPONENT_NAMES[number];

package/dist/runtime/components/email-component-names.js

@@ -0,0 +1,20 @@
+export const EMAIL_COMPONENT_NAMES = [
+  "EBody",
+  "EButton",
+  "ECodeInline",
+  "EColumn",
+  "EContainer",
+  "EFont",
+  "EHead",
+  "EHeading",
+  "EHr",
+  "EHtml",
+  "EImg",
+  "ELink",
+  "EMarkdown",
+  "EPreview",
+  "ERow",
+  "ESection",
+  "ETailwind",
+  "EText"
+];

package/dist/runtime/components/email-component-registry.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'vue';
+import type { EmailComponentName } from './email-component-names.js';
+import * as emailComponents from './index.js';
+type MissingComponent = Exclude<EmailComponentName, keyof typeof emailComponents>;
+type UnexpectedComponent = Exclude<keyof typeof emailComponents, EmailComponentName>;
+type ExactComponentRegistry = [MissingComponent, UnexpectedComponent] extends [never, never] ? Readonly<Record<EmailComponentName, Component>> : never;
+export declare const emailComponentRegistry: ExactComponentRegistry;
+export {};

package/dist/runtime/components/email-component-registry.js

@@ -0,0 +1,2 @@
+import * as emailComponents from "./index.js";
+export const emailComponentRegistry = Object.freeze({ ...emailComponents });

package/dist/runtime/components/index.d.ts

@@ -0,0 +1,23 @@
+export { EBody } from './EBody.js';
+export { EButton } from './EButton.js';
+export { ECodeInline } from './ECodeInline.js';
+export { EColumn } from './EColumn.js';
+export { EContainer } from './EContainer.js';
+export { EFont } from './EFont.js';
+export { EHead } from './EHead.js';
+export { EHeading } from './EHeading.js';
+export { EHr } from './EHr.js';
+export { EHtml } from './EHtml.js';
+export { EImg } from './EImg.js';
+export { ELink } from './ELink.js';
+export { EMarkdown } from './EMarkdown.js';
+export { EPreview } from './EPreview.js';
+export { ERow } from './ERow.js';
+export { ESection } from './ESection.js';
+export { ETailwind } from './ETailwind.js';
+export { EText } from './EText.js';
+export type { ECodeInlineProps } from './ECodeInline.js';
+export type { EFontProps, FontFallback, FontFallbackList, FontFormat, FontStyle, FontWebFont, FontWeight, } from './EFont.js';
+export type { EMarkdownProps } from './EMarkdown.js';
+export type { ETailwindProps } from './ETailwind.js';
+export type { TailwindConfig } from '../tailwind/engine/index.js';

package/dist/runtime/components/index.js

@@ -0,0 +1,18 @@
+export { EBody } from "./EBody.js";
+export { EButton } from "./EButton.js";
+export { ECodeInline } from "./ECodeInline.js";
+export { EColumn } from "./EColumn.js";
+export { EContainer } from "./EContainer.js";
+export { EFont } from "./EFont.js";
+export { EHead } from "./EHead.js";
+export { EHeading } from "./EHeading.js";
+export { EHr } from "./EHr.js";
+export { EHtml } from "./EHtml.js";
+export { EImg } from "./EImg.js";
+export { ELink } from "./ELink.js";
+export { EMarkdown } from "./EMarkdown.js";
+export { EPreview } from "./EPreview.js";
+export { ERow } from "./ERow.js";
+export { ESection } from "./ESection.js";
+export { ETailwind } from "./ETailwind.js";
+export { EText } from "./EText.js";

package/dist/runtime/components/markdown/parse-css-in-js-to-inline-css.d.ts

@@ -0,0 +1,2 @@
+export type MarkdownStyle = Record<string, string | number | undefined>;
+export declare function parseCssInJsToInlineCss(cssProperties: MarkdownStyle | undefined): string;

package/dist/runtime/components/markdown/parse-css-in-js-to-inline-css.js

@@ -0,0 +1,60 @@
+function camelToKebabCase(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function escapeQuotes(value) {
+  if (typeof value === "string" && value.includes('"')) {
+    return value.replace(/"/g, """);
+  }
+  return String(value);
+}
+const NUMERICAL_CSS_PROPERTIES = /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "borderWidth",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "outlineWidth",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "fontSize",
+  "letterSpacing",
+  "wordSpacing",
+  "maxWidth",
+  "minWidth",
+  "maxHeight",
+  "minHeight",
+  "borderRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "textIndent",
+  "gridColumnGap",
+  "gridRowGap",
+  "gridGap",
+  "translateX",
+  "translateY"
+]);
+export function parseCssInJsToInlineCss(cssProperties) {
+  if (!cssProperties) return "";
+  return Object.entries(cssProperties).map(([property, value]) => {
+    if (typeof value === "number" && NUMERICAL_CSS_PROPERTIES.has(property)) {
+      return `${camelToKebabCase(property)}:${value}px`;
+    }
+    return `${camelToKebabCase(property)}:${escapeQuotes(value)}`;
+  }).join(";");
+}

package/dist/runtime/components/markdown/render-markdown.d.ts

@@ -0,0 +1,2 @@
+import type { StylesType } from './styles.js';
+export declare function renderMarkdown(source: string, markdownCustomStyles?: StylesType): string;