@travetto/email-inky 3.1.17

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ArcSine Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+<!-- This file was generated by @travetto/doc and should not be modified directly -->
+<!-- Please modify https://github.com/travetto/travetto/tree/main/module/email-inky/DOC.tsx and execute "npx trv doc" to rebuild -->
+# Email Inky Templates
+
+## Email Inky templating module
+
+**Install: @travetto/email-inky**
+```bash
+npm install @travetto/email-inky
+
+# or
+
+yarn add @travetto/email-inky
+```
+
+This module provides [inky](https://github.com/zurb/inky) support via [JSX](https://en.wikipedia.org/wiki/JSX_(JavaScript)) tags for integration with the [Email Templating](https://github.com/travetto/travetto/tree/main/module/email-template#readme "Email templating module") engine.
+
+**Code: Sample Inky Template**
+```typescript
+/** @jsxImportSource @travetto/email-inky */
+
+import { Title, Container, Summary, Row, Column, If, inkyTpl, Button, Value } from '@travetto/email-inky';
+
+export default inkyTpl(<>
+  <Title>Test Email</Title>
+  <Summary>Email Summary</Summary>
+  <Container>
+    <If key='person'>
+      <Row>
+        <Column small={5}>
+          <Button href='https://google.com/[[query]]'>Hello <Value key='name' /></Button>
+        </Column>
+      </Row>
+    </If>
+  </Container>
+</>);
+```
+
+Please see the [inky](https://github.com/zurb/inky) documentation for more information on the [component specifications](#https-get-foundation-emails-docs-inky-html)
+
+## Conditionals and Substitutions
+The underlying [Email](https://github.com/travetto/travetto/tree/main/module/email#readme "Email transmission module.") module is built on [mustache](https://github.com/janl/mustache.js/), which provides enough flexibility to enable sufficient power with minimal complexity and overhead.   
+
+This means this module, while showing [inky](https://github.com/zurb/inky) components, will ultimately produce HTML/markdown that is [mustache](https://github.com/janl/mustache.js/) compatible. The syntax used by [mustache](https://github.com/janl/mustache.js/) and the syntax used by [JSX](https://en.wikipedia.org/wiki/JSX_(JavaScript)) are in conflict due to both of the tools relying on the uniqueness of `{}` brackets.
+
+To that end, the module introduces additional components ([If Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L27), [Unless Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L29), and [For Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L30)) to assist with control flow logic.  When it comes to variable substitution, and a desire to intermingle seamlessly with component properties, `[]` are used to represent variable expressions.  A more formal version can be found in the [Value Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L28) component, but this cannot be integrated into properties (e.g. an href)
+
+## Template Extension Points
+The template extension points are defined at:
+   1. `email/main.scss` - The entry point for adding, and overriding any [sass](https://github.com/sass/dart-sass)
+   1. `email/inky.wrapper.html` - Provides direct access to override the entire base HTML document for all HTML emails.
+In addition to the overrides, you can find the list of available settings at [Github](https://github.com/foundation/foundation-emails/blob/develop/scss/settings/_settings.scss)

package/__index__.ts

@@ -0,0 +1,2 @@
+export * from './src/components';
+export * from './src/wrapper';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@travetto/email-inky",
+  "version": "3.1.17",
+  "description": "Email Inky templating module",
+  "keywords": [
+    "email",
+    "inky",
+    "templating",
+    "travetto",
+    "typescript"
+  ],
+  "homepage": "https://travetto.io",
+  "license": "MIT",
+  "author": {
+    "email": "travetto.framework@gmail.com",
+    "name": "Travetto Framework"
+  },
+  "files": [
+    "__index__.ts",
+    "resources/email/inky.wrapper.html",
+    "src"
+  ],
+  "main": "__index__.ts",
+  "repository": {
+    "url": "https://github.com/travetto/travetto.git",
+    "directory": "module/email-inky"
+  },
+  "dependencies": {
+    "@travetto/base": "^3.1.2",
+    "@travetto/config": "^3.1.6",
+    "@travetto/di": "^3.1.3",
+    "@travetto/email": "^3.1.12",
+    "foundation-emails": "^2.4.0"
+  },
+  "devDependencies": {
+    "@travetto/email-template": "^3.1.17"
+  },
+  "peerDependencies": {
+    "@travetto/cli": "^3.1.6"
+  },
+  "peerDependenciesMeta": {
+    "@travetto/cli": {
+      "optional": true
+    }
+  },
+  "travetto": {
+    "displayName": "Email Inky Templates"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/resources/email/inky.wrapper.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
+
+  <body>
+    <table class="body">
+      <tr>
+        <td class="float-center" align="center" valign="top">
+          <!-- BODY -->
+        </td>
+      </tr>
+    </table>
+  </body>
+
+</html>

package/src/components.ts

@@ -0,0 +1,55 @@
+import { JSXElement, JSXComponentFunction as CompFn } from '@travetto/email-inky/jsx-runtime';
+import { TypedObject } from '@travetto/base';
+
+const EMPTY: JSXElement = { type: '', key: '', props: {} };
+
+export const Column: CompFn<{
+  valign?: string;
+  align?: string;
+  small?: number; smallOffset?: number; hideSmall?: boolean;
+  large?: number; largeOffset?: number; hideLarge?: boolean;
+  noExpander?: boolean;
+}> = () => EMPTY;
+export const Title: CompFn<{}> = () => EMPTY;
+export const Summary: CompFn<{}> = () => EMPTY;
+export const HLine: CompFn<{}> = () => EMPTY;
+export const Row: CompFn<{}> = () => EMPTY;
+export const Button: CompFn<{ href: string, target?: string, expanded?: boolean }> = () => EMPTY;
+export const Container: CompFn<{}> = () => EMPTY;
+export const BlockGrid: CompFn<{ up?: number }> = () => EMPTY;
+export const Menu: CompFn<{}> = () => EMPTY;
+export const Item: CompFn<{ href: string, target?: string }> = () => EMPTY;
+export const Center: CompFn<{}> = () => EMPTY;
+export const Callout: CompFn<{}> = () => EMPTY;
+export const Spacer: CompFn<{ small?: number, large?: number, size?: number }> = () => EMPTY;
+export const Wrapper: CompFn<{}> = () => EMPTY;
+
+export const If: CompFn<{ attr: string }> = () => EMPTY;
+export const Value: CompFn<{ attr: string }> = () => EMPTY;
+export const Unless: CompFn<{ attr: string }> = () => EMPTY;
+export const For: CompFn<{ attr: string }> = () => EMPTY;
+
+export const c = {
+  Wrapper, Container,
+  Column, Title, Summary, HLine, Row, Button,
+  BlockGrid, Menu, Item, Center, Callout, Spacer,
+  If, Unless, For, Value
+} as const;
+
+type C = typeof c;
+
+// @ts-expect-error
+export type JSXElementByFn<K extends keyof C> = JSXElement<C[K], Parameters<C[K]>[0]>;
+export type JSXElements = { [K in keyof C]: JSXElementByFn<K>; };
+
+export const EMPTY_ELEMENT = EMPTY;
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+const invertedC = new Map<Function, string>(TypedObject.entries(c).map(p => [p[1], p[0]] as [CompFn, string]));
+
+export function getComponentName(fn: Function | string): string {
+  if (typeof fn === 'string') {
+    return fn;
+  }
+  return invertedC.get(fn) ?? fn.name;
+}

package/src/render/context.ts

@@ -0,0 +1,20 @@
+import { createElement } from '@travetto/doc/jsx-runtime';
+
+import { JSXElementByFn, c } from '../components';
+
+/**
+ * Render Context
+ */
+export class RenderContext {
+
+  columnCount: number = 12;
+
+  /**
+   * Create a new element from a given JSX factory
+   */
+  createElement<K extends keyof typeof c>(name: K, props: JSXElementByFn<K>['props']): JSXElementByFn<K> {
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return createElement(c[name], props) as JSXElementByFn<K>;
+  }
+}

package/src/render/html.ts

@@ -0,0 +1,389 @@
+import { JSXElement, isJSXElement } 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;
+
+export const SUMMARY_STYLE = Object.entries({
+  display: 'none',
+  'font-size': '1px',
+  color: '#333333',
+  'line-height': '1px',
+  'max-height': '0px',
+  'max-width': '0px',
+  opacity: '0',
+  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 => {
+  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 stdInline = async ({ recurse, el }: RenderState<JSXElement, RenderContext>): Promise<string> =>
+  `<${el.type} ${propsToStr(el.props)}>${await recurse()}</${el.type}>`;
+
+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: (html, context) => html
+    .replace(/(<[/](?:a)>)([A-Za-z0-9$])/g, (_, tag, v) => `${tag} ${v}`)
+    .replace(/(<[uo]l>)(<li>)/g, (_, a, b) => `${a} ${b}`)
+    .replace(/[\[]{2}([^\]]+)[\]]{2}/gm, (_, t) => `{{${t}}}`),
+
+  For: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  If: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  Unless: async ({ recurse, props }) => `{{^${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  Value: async ({ props }) => `{{${props.attr}}}`,
+
+  br: async () => '<br>\n',
+  hr: async (el) => `<table ${propsToStr(el.props)}><th></th></table>`,
+  strong: stdInline, em: stdInline,
+  h1: stdFull, h2: stdFull, h3: stdFull, h4: stdFull,
+  li: std, ol: stdFull, ul: stdFull,
+  table: stdFull, thead: std, tr: std, td: std, th: std, tbody: std, center: std, img: stdInline,
+  title: std,
+  div: std, span: stdInline,
+  a: async ({ recurse, props }) => `<a ${propsToStr(props)}>${await recurse()}</a>`,
+
+  Title: async ({ recurse, el }) => `<title>${await recurse()}</title>`,
+  Summary: async ({ recurse, el }) => `<span id="summary" style="${SUMMARY_STYLE}">${await recurse()}</span>`,
+
+  Column: async ({ props, recurse, stack, el, context }): Promise<string> => {
+
+    recurse();
+
+    let expander = '';
+
+    const kids = getKids(el);
+    const colCount = kids.length || 1;
+
+    const parent = stack[stack.length - 1];
+    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');
+      }
+
+    }
+
+    // Check for sizes. If no attribute is provided, default to small-12. Divide evenly for large columns
+    const smallSize = el.props.small ?? context.columnCount;
+    const largeSize = el.props.large ?? el.props.small ?? Math.trunc(context.columnCount / colCount);
+
+    // If the column contains a nested row, the .expander class should not be used
+    if (largeSize === context.columnCount && !props.noExpander) {
+      let hasRow = false;
+      visit(el, (node) => {
+        if (isOfType(node, 'Row')) {
+          return hasRow = true;
+        }
+      });
+      if (!hasRow) {
+        expander = '\n<th class="expander"></th>';
+      }
+    }
+
+    const classes: string[] = [`small-${smallSize}`, `large-${largeSize}`, 'columns'];
+    if (props.smallOffset) {
+      classes.push(`small-offset-${props.smallOffset}`);
+    }
+    if (props.hideSmall) {
+      classes.push('hide-for-small');
+    }
+    if (props.largeOffset) {
+      classes.push(`large-offset-${props.smallOffset}`);
+    }
+    if (props.hideLarge) {
+      classes.push('hide-for-large');
+    }
+
+    // Final HTML output
+    return `
+<th ${propsToStr(el.props, ...classes)}>
+  <table>
+    <tbody>
+      <tr>
+        <th>${await recurse()}</th>${expander}
+      </tr>
+    </tbody>
+  </table>
+</th>`;
+  },
+
+  HLine: async ({ props }) => `
+<table ${propsToStr(props, 'h-line')}>
+  <tbody>
+    <tr><th>&nbsp;</th></tr>
+  </tbody>
+</table>`,
+
+  Row: async ({ recurse, el }): Promise<string> => `
+<table ${propsToStr(el.props, 'row')}>
+  <tbody>
+    <tr>${await recurse()}</tr>
+  </tbody>
+<!-- $:&zwj; --></table>`,
+
+  Button: async ({ recurse, el, props, createState }): Promise<string> => {
+    const { href, target, ...rest } = props;
+    let inner = await recurse();
+    let expander = '';
+
+    // If we have the href attribute we can create an anchor for the inner of the button;
+    if (href) {
+      const linkProps = { href, target };
+      if (props.expanded) {
+        Object.assign(linkProps, { align: 'center', class: 'float-center' });
+      }
+      inner = `<a ${propsToStr(linkProps)}>${inner}</a>`;
+    }
+
+    // If the button is expanded, it needs a <center> tag around the content
+    if (props.expanded) {
+      inner = await Html.Center(createState('Center', { children: [inner] }));
+      rest.class = classStr(rest.class ?? '', 'expand');
+      expander = '\n<td class="expander"></td>';
+    }
+
+    // The .button class is always there, along with any others on the <button> element
+    return `
+<table ${propsToStr(rest, 'button')}>
+  <tbody>
+    <tr>
+      <td>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                ${inner}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>${expander}
+    </tr>
+  </tbody>
+</table>
+      ${await Html.Spacer(createState('Spacer', { size: 16 }))}`;
+  },
+
+  Container: async ({ recurse, props }): Promise<string> => `
+<table align="center" ${propsToStr(props, 'container')}>
+  <tbody>
+    <tr><td>${await recurse()}</td></tr>
+  </tbody>
+</table>`,
+
+  BlockGrid: async ({ recurse, props }): Promise<string> => `
+<table ${propsToStr(props, 'block-grid', props.up ? `up-${props.up}` : '')}>
+  <tbody>
+    <tr>${await recurse()}</tr>
+  </tbody>
+</table>`,
+
+  Menu: async ({ recurse, el, props }): Promise<string> => {
+    let hasItem = false;
+    visit(el, (child) => {
+      if (isOfType(child, 'Item')) {
+        return hasItem = true;
+      } else if ((child.type === 'td' || child.type === 'th') && child.props.class?.includes('menu-item')) {
+        return hasItem = true;
+      }
+    });
+
+    let inner = await recurse();
+
+    if (!hasItem && inner) {
+      inner = `<th class="menu-item">${inner}</th>`;
+    }
+
+    return `
+<table ${propsToStr(props, 'menu')}>
+  <tbody>
+    <tr>
+      <td>
+        <table>
+          <tbody>
+            <tr>
+              ${inner}
+            </tr>
+          </tbody>
+        </table>
+      </td>
+    </tr>
+  </tbody>
+</table>`;
+  },
+
+  Item: async ({ recurse, props }): Promise<string> => {
+    const { href, target, ...parentAttrs } = props;
+    return `
+       <th ${propsToStr(parentAttrs, 'menu-item')}>
+         <a ${propsToStr({ href, target })}>${await recurse()}</a>
+       </th>`;
+  },
+
+  Center: async ({ props, recurse, el }): Promise<string> => {
+    for (const kid of getKids(el)) {
+      Object.assign(kid.props, {
+        align: 'center',
+        class: classStr(kid.props.class, 'float-center')
+      });
+    }
+
+    visit(el, child => {
+      if (isOfType(child, 'Item')) {
+        child.props.class = classStr(child.props.class, 'float-center');
+      }
+      return;
+    });
+
+    return `
+<center ${propsToStr(props)}>
+  ${await recurse()}
+</center>
+    `;
+  },
+
+  Callout: async ({ recurse, el, props }): Promise<string> => {
+
+    const innerProps: JSXElement['props'] = { class: props.class };
+    delete props.class;
+
+    return `
+<table ${propsToStr(props, 'callout')}>
+  <tbody>
+    <tr>
+      <th ${propsToStr(innerProps, 'callout-inner')}>
+        ${await recurse()}
+      </th>
+      <th class="expander"></th>
+    </tr>
+  </tbody>
+</table>`;
+  },
+
+  Spacer: async ({ props }): Promise<string> => {
+    const html: string[] = [];
+    const buildSpacer = (size: number | string, extraClass: string = ''): string =>
+      `
+<table ${propsToStr(props, 'spacer', extraClass)}>
+  <tbody>
+    <tr>
+      <td height="${size}px" style="font-size:${size}px;line-height:${size}px;">&nbsp;</td>
+    </tr>
+  </tbody>
+</table>
+      `;
+
+    const sm = props.small ?? undefined;
+    const lg = props.large ?? undefined;
+
+    if (sm || lg) {
+      if (sm) {
+        html.push(buildSpacer(sm, 'hide-for-large'));
+      }
+      if (lg) {
+        html.push(buildSpacer(lg, 'show-for-large'));
+      }
+    } else {
+      html.push(buildSpacer(props.size || 16));
+    }
+
+    return html.join('\n');
+  },
+
+  Wrapper: async ({ recurse, el }) => `
+<table align="center" ${propsToStr(el.props, 'wrapper')}>
+  <tbody>
+    <tr>
+      <td class="wrapper-inner">
+        ${await recurse()}
+      </td>
+    </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

@@ -0,0 +1,58 @@
+import { JSXElement } from '@travetto/email-inky/jsx-runtime';
+import { RenderProvider, RenderState } from '../types';
+import { RenderContext } from './context';
+
+const visit = ({ recurse }: RenderState<JSXElement, RenderContext>): Promise<string> => recurse();
+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}`)
+    .replace(/[\[]{2}([^\]]+)[\]]{2}/gm, (_, t) => `{{${t}}}`),
+
+  For: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  If: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  Unless: async ({ recurse, props }) => `{{^${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  Value: async ({ props }) => `{{${props.attr}}}`,
+
+  strong: async ({ recurse }) => `**${await recurse()}**`,
+  hr: async () => '\n------------------\n',
+  HLine: async () => '\n------------------\n',
+  br: async () => '\n\n',
+  em: async ({ recurse }) => `*${await recurse()}*`,
+  ul: async ({ recurse }) => `\n${await recurse()}`,
+  ol: async ({ recurse }) => `\n${await recurse()}`,
+  li: async ({ recurse, stack }) => {
+    const parent = stack.reverse().find(x => x.type === 'ol' || x.type === 'ul');
+    const depth = stack.filter(x => x.type === 'ol' || x.type === 'ul').length;
+    return `${'   '.repeat(depth)}${(parent && parent.type === 'ol') ? '1.' : '* '} ${await recurse()}\n`;
+  },
+  th: async ({ recurse }) => `|${await recurse()}`,
+  td: async ({ recurse }) => `|${await recurse()}`,
+  tr: async ({ recurse }) => `${await recurse()}|\n`,
+  thead: async ({ recurse }) => {
+    const row = await recurse();
+    return `${row}${row.replace(/[^|\n]/g, '-')}`;
+  },
+  h1: async ({ recurse }) => `\n# ${await recurse()}\n\n`,
+  h2: async ({ recurse }) => `\n## ${await recurse()}\n\n`,
+  h3: async ({ recurse }) => `\n### ${await recurse()}\n\n`,
+  h4: async ({ recurse }) => `\n#### ${await recurse()}\n\n`,
+  a: async ({ recurse, props }) => `\n[${await recurse()}](${(props as { href: string }).href})\n`,
+  Button: async ({ recurse, props }) => `\n[${await recurse()}](${props.href})\n`,
+
+  Callout: visit, Center: visit, Container: visit,
+  Column: visit, Wrapper: visit, Row: visit, BlockGrid: visit,
+
+  Menu: async ({ recurse }) => `\n${await recurse()}`,
+  Item: async ({ recurse, stack, props }) => {
+    const depth = stack.filter(x => x.type === 'Menu').length;
+    return `${'   '.repeat(depth)}* [${await recurse()}](${props.href})\n`;
+  },
+  Spacer: async () => '\n\n',
+
+  Summary: ignore, Title: ignore,
+  img: ignore,
+  div: visit, title: visit, span: visit, center: visit, table: visit, tbody: visit,
+};

package/src/render/renderer.ts

@@ -0,0 +1,93 @@
+import { isJSXElement, JSXElement, createFragment, JSXFragmentType } from '@travetto/email-inky/jsx-runtime';
+
+import { EMPTY_ELEMENT, getComponentName, JSXElementByFn, c } from '../components';
+import { DocumentShape, RenderProvider, RenderState } from '../types';
+import { RenderContext } from './context';
+import { JSXChild } from '../../jsx-runtime';
+
+/**
+ * Inky Renderer
+ */
+export class InkyRenderer {
+
+  static async #render(
+    ctx: RenderContext,
+    renderer: RenderProvider<RenderContext>,
+    node: JSXChild[] | JSXChild | null | undefined,
+    stack: JSXElement[] = []
+  ): Promise<string> {
+    if (node === null || node === undefined) {
+      return '';
+    } else if (Array.isArray(node)) {
+      const out: string[] = [];
+      const nextStack = [...stack, { key: '', props: { children: node }, type: 'Fragment' }];
+      for (const el of node) {
+        out.push(await this.#render(ctx, renderer, el, nextStack));
+      }
+      return out.join('');
+    } else if (isJSXElement(node)) {
+      let final: JSXElement = node;
+      // Render simple element if needed
+      if (typeof node.type === 'function') {
+        // @ts-expect-error
+        const out = node.type(node.props);
+        final = out !== EMPTY_ELEMENT ? out : final;
+      }
+
+      if (final.type === createFragment || final.type === JSXFragmentType) {
+        return this.#render(ctx, renderer, final.props.children ?? [], stack);
+      }
+
+      if (Array.isArray(final)) {
+        return this.#render(ctx, renderer, final, stack);
+      }
+
+      const name = getComponentName(final.type);
+      if (name in renderer) {
+        const recurse = (): Promise<string> => this.#render(ctx, renderer, final.props.children ?? [], [...stack, final]);
+        // @ts-expect-error
+        const state: RenderState<JSXElement, RenderContext> = {
+          el: final, props: final.props, recurse, stack, context: ctx
+        };
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        state.createState = (key, props) => this.createState(ctx, renderer, state, key, props);
+        // @ts-expect-error
+        return renderer[name](state);
+      } else {
+        console.log(final);
+        throw new Error(`Unknown element: ${final.type}`);
+      }
+    } else {
+      return `${node}`;
+    }
+  }
+
+  static createState<K extends keyof typeof c>(
+    ctx: RenderContext,
+    renderer: RenderProvider<RenderContext>,
+    state: RenderState<JSXElement, RenderContext>,
+    key: K,
+    props: JSXElementByFn<K>['props'],
+    // @ts-expect-error
+  ): RenderState<JSXElementByFn<K>, RenderContext> {
+    const el = ctx.createElement(key, props);
+    const newStack = [...state.stack, el] as JSXElement[];
+    return { ...state, el, props: el.props, recurse: () => this.#render(ctx, renderer, el.props.children ?? [], newStack) };
+  }
+
+  /**
+   * Render a context given a specific renderer
+   * @param renderer
+   */
+  static async render(root: DocumentShape, provider: RenderProvider<RenderContext>): Promise<string> {
+    const ctx = new RenderContext();
+    const par = { props: { children: Array.isArray(root.text) ? 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);
+  }
+}

package/src/render/subject.ts

@@ -0,0 +1,30 @@
+import { JSXElement } from '@travetto/email-inky/jsx-runtime';
+import { RenderProvider, RenderState } from '../types';
+import { RenderContext } from './context';
+
+const empty = async (): Promise<string> => '';
+const visit = ({ recurse }: RenderState<JSXElement, RenderContext>): Promise<string> => recurse();
+
+export const Subject: RenderProvider<RenderContext> = {
+  finalize: text => text
+    .replace(/[\[]{2}([^\]]+)[\]]{2}/gm, (_, t) => `{{${t}}}`),
+
+  For: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  If: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  Unless: async ({ recurse, props }) => `{{^${props.attr}}}${await recurse()}{{/${props.attr}}}`,
+  Value: async ({ props }) => `{{${props.attr}}}`,
+  Title: visit,
+
+  title: visit, span: visit, strong: visit, center: visit, em: visit,
+
+  Summary: empty, Button: empty,
+  Callout: empty, Center: empty, HLine: empty,
+  Menu: empty, Item: empty,
+  Column: empty, Row: empty, BlockGrid: empty, Spacer: empty,
+  Wrapper: empty, Container: empty,
+
+  div: empty, hr: empty, br: empty, a: empty, img: empty,
+  ul: empty, ol: empty, li: empty,
+  table: empty, tbody: empty, td: empty, th: empty, tr: empty, thead: empty,
+  h1: empty, h2: empty, h3: empty, h4: empty,
+};

package/src/types.ts

@@ -0,0 +1,31 @@
+import { JSXChild, 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'];
+  recurse: () => Promise<string>;
+  stack: JSXElement[];
+  // @ts-expect-error
+  createState: <K extends keyof typeof c>(key: K, props: JSXElementByFn<K>['props']) => RenderState<JSXElementByFn<K>, C>;
+  context: C;
+};
+
+/**
+ * Renderer
+ */
+export type RenderProvider<C> =
+  { finalize: (text: string, ctx: C) => 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

@@ -0,0 +1,26 @@
+import { createRequire } from 'module';
+
+import { MessageCompilationSource } from '@travetto/email';
+import { JSXElement } from '@travetto/email-inky/jsx-runtime';
+import { RootIndex, path } from '@travetto/manifest';
+
+import { InkyRenderer } from './render/renderer';
+import { Html, HtmlWrap } from './render/html';
+import { Markdown } from './render/markdown';
+import { Subject } from './render/subject';
+
+const req = createRequire(`${RootIndex.manifest.workspacePath}/node_modules`);
+
+export const inkyTpl = (content: JSXElement | JSXElement[]): MessageCompilationSource => ({
+  file: '',
+  html: InkyRenderer.render.bind(InkyRenderer, { text: content, wrap: HtmlWrap }, Html),
+  text: InkyRenderer.render.bind(InkyRenderer, { text: content }, Markdown),
+  subject: InkyRenderer.render.bind(InkyRenderer, { text: content }, Subject),
+  styles: {
+    search: [path.dirname(req.resolve('foundation-emails/scss/_global.scss'))],
+    global: `
+@import 'settings/_settings.scss';    
+@import 'foundation-emails.scss';
+`
+  }
+});