@travetto/email-inky 3.1.28 → 3.1.30

package/jsx-runtime.ts

@@ -38,7 +38,7 @@ declare global {
       id?: string;
       dir?: string;
       name?: string;
-      src?: string;
+      src?: string | Function;
       alt?: string;
       href?: string;
       title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travetto/email-inky",
-  "version": "3.1.28",
+  "version": "3.1.30",
   "description": "Email Inky templating module",
   "keywords": [
     "email",
@@ -27,17 +27,17 @@
     "directory": "module/email-inky"
   },
   "dependencies": {
-    "@travetto/base": "^3.1.3",
-    "@travetto/config": "^3.1.7",
-    "@travetto/di": "^3.1.4",
-    "@travetto/email": "^3.1.13",
+    "@travetto/base": "^3.1.4",
+    "@travetto/config": "^3.1.9",
+    "@travetto/di": "^3.1.5",
+    "@travetto/email": "^3.1.15",
     "foundation-emails": "^2.4.0"
   },
   "devDependencies": {
-    "@travetto/email-compiler": "^3.1.22"
+    "@travetto/email-compiler": "^3.1.24"
   },
   "peerDependencies": {
-    "@travetto/cli": "^3.1.8"
+    "@travetto/cli": "^3.1.10"
   },
   "peerDependenciesMeta": {
     "@travetto/cli": {

package/src/render/common.ts

@@ -0,0 +1,53 @@
+import { JSXElement, isJSXElement } from '@travetto/email-inky/jsx-runtime';
+
+export const getKids = (el: JSXElement): JSXElement[] => {
+  const kids = el?.props?.children;
+  let result: unknown[] = [];
+  if (kids) {
+    result = !Array.isArray(kids) ? [kids] : kids;
+  }
+  return result.filter(isJSXElement);
+};
+
+export const visit = (el: JSXElement, onVisit: (fn: JSXElement) => boolean | undefined | void, depth = 0): boolean | undefined => {
+  if (depth > 0) {
+    const res = onVisit(el);
+    if (res === true) {
+      return true;
+    }
+  }
+  for (const item of getKids(el)) {
+    const res = visit(item, onVisit, depth + 1);
+    if (res) {
+      return;
+    }
+  }
+};
+
+export const classStr = (existing: string | undefined, ...toAdd: string[]): string => {
+  const out = [];
+  const seen = new Set<string>();
+  for (const item of existing?.split(/\s+/) ?? []) {
+    if (item && !seen.has(item)) {
+      out.push(item);
+      seen.add(item);
+    }
+  }
+  for (const item of toAdd) {
+    if (item && !seen.has(item)) {
+      out.push(item);
+      seen.add(item);
+    }
+  }
+  return out.join(' ');
+};
+
+export const combinePropsToStr = (allowedProps: Set<string>, props: Record<string, unknown>, ...addClasses: string[]): string => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const out = { ...props, class: classStr(props.class as string, ...addClasses) };
+  return Object.entries(out)
+    .filter(([k, v]) => allowedProps.has(k) && v !== undefined && v !== null && v !== '')
+    .map(([k, v]) => `${k}="${v}"`).join(' ');
+};
+
+export const isOfType = (el: JSXElement, type: string): boolean => typeof el.type === 'function' && el.type.name === type;

package/src/render/context.ts

@@ -8,6 +8,13 @@ import { JSXElementByFn, c } from '../components';
 export class RenderContext {
 
   columnCount: number = 12;
+  file: string;
+  module: string;
+
+  constructor(srcFile: string, module: string) {
+    this.file = srcFile;
+    this.module = module;
+  }
 
   /**
    * Create a new element from a given JSX factory

package/src/render/html.ts

@@ -1,10 +1,9 @@
-import { JSXElement, isJSXElement } from '@travetto/email-inky/jsx-runtime';
+import { JSXElement } from '@travetto/email-inky/jsx-runtime';
 import { EmailResource } from '@travetto/email';
 
 import { RenderProvider, RenderState } from '../types';
 import { RenderContext } from './context';
-
-const isOfType = (el: JSXElement, type: string): boolean => typeof el.type === 'function' && el.type.name === type;
+import { classStr, combinePropsToStr, getKids, isOfType, visit } from './common';
 
 export const SUMMARY_STYLE = Object.entries({
   display: 'none',
@@ -17,38 +16,13 @@ export const SUMMARY_STYLE = Object.entries({
   overflow: 'hidden'
 }).map(([k, v]) => `${k}: ${v}`).join('; ');
 
-const classStr = (existing: string | undefined, ...toAdd: string[]): string => {
-  const out = [];
-  const seen = new Set<string>();
-  for (const item of existing?.split(/\s+/) ?? []) {
-    if (item && !seen.has(item)) {
-      out.push(item);
-      seen.add(item);
-    }
-  }
-  for (const item of toAdd) {
-    if (item && !seen.has(item)) {
-      out.push(item);
-      seen.add(item);
-    }
-  }
-  return out.join(' ');
-};
-
-
 const allowedProps = new Set([
   'class', 'id', 'dir', 'name', 'src',
   'alt', 'href', 'title', 'height', 'target',
   'width', 'style', 'align', 'valign'
 ]);
 
-const propsToStr = (props: Record<string, unknown>, ...addClasses: string[]): string => {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  const out = { ...props, class: classStr(props.class as string, ...addClasses) };
-  return Object.entries(out)
-    .filter(([k, v]) => allowedProps.has(k) && v !== undefined && v !== null && v !== '')
-    .map(([k, v]) => `${k}="${v}"`).join(' ');
-};
+const propsToStr = combinePropsToStr.bind(null, allowedProps);
 
 const stdInline = async ({ recurse, el }: RenderState<JSXElement, RenderContext>): Promise<string> =>
   `<${el.type} ${propsToStr(el.props)}>${await recurse()}</${el.type}>`;
@@ -56,34 +30,36 @@ const stdInline = async ({ recurse, el }: RenderState<JSXElement, RenderContext>
 const std = async (state: RenderState<JSXElement, RenderContext>): Promise<string> => `${await stdInline(state)}\n`;
 const stdFull = async (state: RenderState<JSXElement, RenderContext>): Promise<string> => `\n${await stdInline(state)}\n`;
 
-const getKids = (el: JSXElement): JSXElement[] => {
-  const kids = el?.props?.children;
-  let result: unknown[] = [];
-  if (kids) {
-    result = !Array.isArray(kids) ? [kids] : kids;
-  }
-  return result.filter(isJSXElement);
-};
-
-const visit = (el: JSXElement, onVisit: (fn: JSXElement) => boolean | undefined | void, depth = 0): boolean | undefined => {
-  if (depth > 0) {
-    const res = onVisit(el);
-    if (res === true) {
-      return true;
-    }
-  }
-  for (const item of getKids(el)) {
-    const res = visit(item, onVisit, depth + 1);
-    if (res) {
-      return;
+export const Html: RenderProvider<RenderContext> = {
+  finalize: async (html, context, isRoot = false) => {
+    html = html
+      .replace(/(<[/](?:a)>)([A-Za-z0-9$])/g, (_, tag, v) => `${tag} ${v}`)
+      .replace(/(<[uo]l>)(<li>)/g, (_, a, b) => `${a} ${b}`);
+
+    if (isRoot) {
+      const wrapper = await new EmailResource([`${context.module}#resources`, '@travetto/email-inky#resources'])
+        .read('/email/inky.wrapper.html');
+
+      // Get Subject
+      const headerTop: string[] = [];
+      const bodyTop: string[] = [];
+
+      // Force summary to top, and title to head
+      const final = wrapper
+        .replace('<!-- BODY -->', html)
+        .replace(/<title>.*?<\/title>/, a => { headerTop.push(a); return ''; })
+        .replace(/<span[^>]+id="summary"[^>]*>(.*?)<\/span>/sm, a => { bodyTop.push(a); return ''; })
+        .replace(/<head( [^>]*)?>/, t => `${t}\n${headerTop.join('\n')}`)
+        .replace(/<body[^>]*>/, t => `${t}\n${bodyTop.join('\n')}`);
+
+      // Allow tag suffixes/prefixes via comments
+      html = final
+        .replace(/\s*<!--\s*[$]:([^ -]+)\s*-->\s*(<\/[^>]+>)/g, (_, suf, tag) => `${tag}${suf}`)
+        .replace(/(<[^\/][^>]+>)\s*<!--\s*[#]:([^ ]+)\s*-->\s*/g, (_, tag, pre) => `${pre}${tag}`);
     }
-  }
-};
 
-export const Html: RenderProvider<RenderContext> = {
-  finalize: (html, context) => html
-    .replace(/(<[/](?:a)>)([A-Za-z0-9$])/g, (_, tag, v) => `${tag} ${v}`)
-    .replace(/(<[uo]l>)(<li>)/g, (_, a, b) => `${a} ${b}`),
+    return html;
+  },
 
   For: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
   If: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
@@ -109,16 +85,14 @@ export const Html: RenderProvider<RenderContext> = {
 
     let expander = '';
 
-    const kids = getKids(el);
-    const colCount = kids.length || 1;
-
     const parent = stack[stack.length - 1];
+    const sibs = getKids(parent).filter(x => isOfType(x, 'Column'));
+    const colCount = sibs.length || 1;
+
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const pProps = parent.props as { columnVisited: boolean };
     if (!pProps.columnVisited) {
       pProps.columnVisited = true;
-
-      const sibs = getKids(parent).filter(x => isOfType(x, 'Column'));
       if (sibs.length) {
         sibs[0].props.class = classStr(sibs[0].props.class ?? '', 'first');
         sibs[sibs.length - 1].props.class = classStr(sibs[sibs.length - 1].props.class ?? '', 'last');
@@ -362,29 +336,4 @@ export const Html: RenderProvider<RenderContext> = {
     </tr>
   </tbody>
 </table>`
-
-};
-
-export const HtmlWrap = async (content: string): Promise<string> => {
-  const wrapper = await new EmailResource(['@', '@travetto/email-inky#resources'])
-    .read('/email/inky.wrapper.html');
-
-  // Get Subject
-  const headerTop: string[] = [];
-  const bodyTop: string[] = [];
-
-  // Force summary to top, and title to head
-  let final = wrapper
-    .replace('<!-- BODY -->', content)
-    .replace(/<title>.*?<\/title>/, a => { headerTop.push(a); return ''; })
-    .replace(/<span[^>]+id="summary"[^>]*>(.*?)<\/span>/sm, a => { bodyTop.push(a); return ''; })
-    .replace(/<head( [^>]*)?>/, t => `${t}\n${headerTop.join('\n')}`)
-    .replace(/<body[^>]*>/, t => `${t}\n${bodyTop.join('\n')}`);
-
-  // Allow tag suffixes/prefixes via comments
-  final = final
-    .replace(/\s*<!--\s*[$]:([^ -]+)\s*-->\s*(<\/[^>]+>)/g, (_, suf, tag) => `${tag}${suf}`)
-    .replace(/(<[^\/][^>]+>)\s*<!--\s*[#]:([^ ]+)\s*-->\s*/g, (_, tag, pre) => `${pre}${tag}`);
-
-  return final;
 };

package/src/render/markdown.ts

@@ -6,9 +6,12 @@ const visit = ({ recurse }: RenderState<JSXElement, RenderContext>): Promise<str
 const ignore = async ({ recurse: _ }: RenderState<JSXElement, RenderContext>): Promise<string> => '';
 
 export const Markdown: RenderProvider<RenderContext> = {
-  finalize: (text, context) => text
-    .replace(/(\[[^\]]+\]\([^)]+\))([A-Za-z0-9$]+)/g, (_, link, v) => v === 's' ? _ : `${link} ${v}`)
-    .replace(/(\S)\n(#)/g, (_, l, r) => `${l}\n\n${r}`),
+  finalize: (text) => {
+    text = text
+      .replace(/(\[[^\]]+\]\([^)]+\))([A-Za-z0-9$]+)/g, (_, link, v) => v === 's' ? _ : `${link} ${v}`)
+      .replace(/(\S)\n(#)/g, (_, l, r) => `${l}\n\n${r}`);
+    return text;
+  },
 
   For: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
   If: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
@@ -39,6 +42,7 @@ export const Markdown: RenderProvider<RenderContext> = {
   h2: async ({ recurse }) => `\n## ${await recurse()}\n\n`,
   h3: async ({ recurse }) => `\n### ${await recurse()}\n\n`,
   h4: async ({ recurse }) => `\n#### ${await recurse()}\n\n`,
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   a: async ({ recurse, props }) => `\n[${await recurse()}](${(props as { href: string }).href})\n`,
   Button: async ({ recurse, props }) => `\n[${await recurse()}](${props.href})\n`,
 

package/src/render/renderer.ts

@@ -1,7 +1,8 @@
 import { isJSXElement, JSXElement, createFragment, JSXFragmentType, JSXChild } from '@travetto/email-inky/jsx-runtime';
+import { EmailTemplateLocation } from '@travetto/email';
 
 import { EMPTY_ELEMENT, getComponentName, JSXElementByFn, c } from '../components';
-import { DocumentShape, RenderProvider, RenderState } from '../types';
+import { RenderProvider, RenderState } from '../types';
 import { RenderContext } from './context';
 
 /**
@@ -19,7 +20,7 @@ export class InkyRenderer {
       return '';
     } else if (Array.isArray(node)) {
       const out: string[] = [];
-      const nextStack = [...stack, { key: '', props: { children: node }, type: 'Fragment' }];
+      const nextStack = [...stack, { key: '', props: { children: node }, type: JSXFragmentType }];
       for (const el of node) {
         out.push(await this.#render(ctx, renderer, el, nextStack));
       }
@@ -27,7 +28,7 @@ export class InkyRenderer {
     } else if (isJSXElement(node)) {
       let final: JSXElement = node;
       // Render simple element if needed
-      if (typeof node.type === 'function') {
+      if (typeof node.type === 'function' && node.type !== JSXFragmentType) {
         // @ts-expect-error
         const out = node.type(node.props);
         final = out !== EMPTY_ELEMENT ? out : final;
@@ -79,22 +80,15 @@ export class InkyRenderer {
    * Render a context given a specific renderer
    * @param renderer
    */
-  static async render(root: DocumentShape, provider: RenderProvider<RenderContext>): Promise<string> {
-    const ctx = new RenderContext();
-    let par: JSXElement;
-
-    // We are at the root element
-    if (isJSXElement(root.text)) {
-      par = root.text;
-    } else {
-      par = { props: { children: Array.isArray(root.text) ? root.text : [] }, type: '', key: '' };
-    }
-    const text = await this.#render(ctx, provider, root.text, [par]);
-
-    let cleaned = `${text.replace(/\n{3,100}/msg, '\n\n').trim()}\n`;
-    if (root.wrap) {
-      cleaned = await root.wrap?.(cleaned);
-    }
-    return provider.finalize(cleaned, ctx);
+  static async render(
+    root: JSXElement,
+    provider: RenderProvider<RenderContext>,
+    sourceLoc: EmailTemplateLocation,
+    isRoot = true
+  ): Promise<string> {
+    const ctx = new RenderContext(sourceLoc.file, sourceLoc.module);
+    const par: JSXElement = root.type === JSXFragmentType ? root : { props: { children: [root] }, type: JSXFragmentType, key: '' };
+    const text = await this.#render(ctx, provider, par, []);
+    return provider.finalize(text, ctx, isRoot);
   }
 }

package/src/render/subject.ts

@@ -6,7 +6,7 @@ const empty = async (): Promise<string> => '';
 const visit = ({ recurse }: RenderState<JSXElement, RenderContext>): Promise<string> => recurse();
 
 export const Subject: RenderProvider<RenderContext> = {
-  finalize: text => text,
+  finalize: (text, context, root) => text,
 
   For: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
   If: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,

package/src/types.ts

@@ -1,16 +1,8 @@
-import { JSXChild, JSXElement, ValidHtmlTags } from '../jsx-runtime';
+import { JSXElement, ValidHtmlTags } from '../jsx-runtime';
 import { JSXElementByFn, c } from './components';
 
 export type Wrapper = Record<string, (cnt: string) => string>;
 
-/**
- * Document file shape
- */
-export interface DocumentShape {
-  text: JSXChild | JSXChild[] | undefined | null;
-  wrap?: (content: string) => string | Promise<string>;
-}
-
 export type RenderState<T extends JSXElement, C> = {
   el: T;
   props: T['props'];
@@ -25,7 +17,7 @@ export type RenderState<T extends JSXElement, C> = {
  * Renderer
  */
 export type RenderProvider<C> =
-  { finalize: (text: string, ctx: C) => string } &
+  { finalize: (text: string, ctx: C, isRoot?: boolean) => (string | Promise<string>) } &
   { [K in ValidHtmlTags]: (state: RenderState<JSXElement<K>, C>) => Promise<string>; } &
   // @ts-expect-error
   { [K in keyof typeof c]: (state: RenderState<JSXElementByFn<K>, C>) => Promise<string>; };

package/src/wrapper.ts

@@ -1,31 +1,35 @@
 import { createRequire } from 'module';
 
-import { MessageCompilationSource } from '@travetto/email';
-import { JSXComponentFunction, JSXElement } from '@travetto/email-inky/jsx-runtime';
+import { EmailCompileSource } from '@travetto/email';
+import { JSXComponentFunction, JSXElement, JSXFragmentType } from '@travetto/email-inky/jsx-runtime';
 import { RootIndex, path } from '@travetto/manifest';
 
 import { InkyRenderer } from './render/renderer';
-import { Html, HtmlWrap } from './render/html';
+import { Html } from './render/html';
 import { Markdown } from './render/markdown';
 import { Subject } from './render/subject';
 
-export const wrap = (content: JSXElement): MessageCompilationSource => {
+export const wrap = (content: JSXElement): EmailCompileSource => {
   const req = createRequire(`${RootIndex.manifest.workspacePath}/node_modules`);
+  const finalContent = { ...content, key: '', type: JSXFragmentType };
 
   return {
-    file: '',
-    html: InkyRenderer.render.bind(InkyRenderer, { text: content.props.children, wrap: HtmlWrap }, Html),
-    text: InkyRenderer.render.bind(InkyRenderer, { text: content.props.children }, Markdown),
-    subject: InkyRenderer.render.bind(InkyRenderer, { text: content.props.children }, Subject),
     styles: {
       search: [path.dirname(req.resolve('foundation-emails/scss/_global.scss'))],
       global: `
-@import 'email/inky.variables';
-@import '_global';
-@import 'foundation-emails';
-`
-    }
+  @import 'email/inky.variables';
+  @import '_global';
+  @import 'foundation-emails';
+  `
+    },
+    html: InkyRenderer.render.bind(InkyRenderer, finalContent, Html),
+    text: InkyRenderer.render.bind(InkyRenderer, finalContent, Markdown),
+    subject: InkyRenderer.render.bind(InkyRenderer, finalContent, Subject),
   };
 };
 
-export const InkyTemplate: JSXComponentFunction<{}> = (): JSXElement => ({ type: '', key: '', props: {} });
+export const InkyTemplate: JSXComponentFunction<{}> = (): JSXElement => ({ type: '', key: '', props: {} });
+
+export const unwrap = (element: JSXElement): Promise<EmailCompileSource | undefined> =>
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  (element as unknown as { wrap: (el: JSXElement) => Promise<EmailCompileSource> }).wrap(element);