@travetto/email-inky 8.0.0-alpha.21 → 8.0.0-alpha.23

package/README.md

@@ -19,21 +19,25 @@ This module provides [inky](https://github.com/zurb/inky) support via [JSX](http
 ```typescript
 /** @jsxImportSource @travetto/email-inky/support */
 
-import { Title, Container, Summary, Row, Column, If, Button, Value, InkyTemplate } from '@travetto/email-inky';
-
-export default <InkyTemplate>
-  <Title>Test Email</Title>
-  <Summary>Email Summary</Summary>
-  <Container>
-    <If attr='person'>
-      <Row>
-        <Column small={5}>
-          <Button href='https://google.com/{{query}}'>Hello <Value attr='name' /></Button>
-        </Column>
-      </Row>
-    </If>
-  </Container>
-</InkyTemplate>;
+import { Button, Column, Container, If, InkyTemplate, Row, Summary, Title, Value } from '@travetto/email-inky';
+
+export default (
+  <InkyTemplate>
+    <Title>Test Email</Title>
+    <Summary>Email Summary</Summary>
+    <Container>
+      <If attr="person">
+        <Row>
+          <Column small={5}>
+            <Button href="https://google.com/{{query}}">
+              Hello <Value attr="name" />
+            </Button>
+          </Column>
+        </Row>
+      </If>
+    </Container>
+  </InkyTemplate>
+);
 ```
 
 Please see the [inky](https://github.com/zurb/inky) documentation for more information on the [component specifications](#https-get-foundation-emails-docs-inky-html)
@@ -43,7 +47,7 @@ The underlying [Email](https://github.com/travetto/travetto/tree/main/module/ema
 
 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#L28), [Unless Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L30), and [For Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L31)) to assist with control flow logic.  When it comes to variable substitution, and a desire to intermingle seamlessly with component properties, `{{value}}` can be used within a string value. To leverage substitutions outside of string contexts, a more formal version can be found in the [Value Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L29) component, but this cannot be integrated into properties (e.g. an href).
+To that end, the module introduces additional components ([If Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L32), [Unless Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L34), and [For Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L35)) to assist with control flow logic. When it comes to variable substitution, and a desire to intermingle seamlessly with component properties, `{{value}}` can be used within a string value. To leverage substitutions outside of string contexts, a more formal version can be found in the [Value Component](https://github.com/travetto/travetto/tree/main/module/email-inky/src/components.ts#L33) component, but this cannot be integrated into properties (e.g. an href).
 
 ## Template Extension Points
 The template extension points are defined at:

package/__index__.ts

@@ -1,8 +1,8 @@
 export * from './src/components.ts';
-export * from './src/wrapper.ts';
-export * from './src/render/renderer.ts';
+export * from './src/render/common.ts';
+export * from './src/render/context.ts';
 export * from './src/render/html.ts';
 export * from './src/render/markdown.ts';
+export * from './src/render/renderer.ts';
 export * from './src/render/subject.ts';
-export * from './src/render/context.ts';
-export * from './src/render/common.ts';
+export * from './src/wrapper.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travetto/email-inky",
-  "version": "8.0.0-alpha.21",
+  "version": "8.0.0-alpha.23",
   "type": "module",
   "description": "Email Inky templating module",
   "keywords": [
@@ -28,14 +28,14 @@
     "directory": "module/email-inky"
   },
   "dependencies": {
-    "@travetto/config": "^8.0.0-alpha.20",
-    "@travetto/di": "^8.0.0-alpha.19",
-    "@travetto/email": "^8.0.0-alpha.20",
-    "@travetto/runtime": "^8.0.0-alpha.19",
+    "@travetto/config": "^8.0.0-alpha.22",
+    "@travetto/di": "^8.0.0-alpha.20",
+    "@travetto/email": "^8.0.0-alpha.22",
+    "@travetto/runtime": "^8.0.0-alpha.20",
     "foundation-emails": "^2.5.1"
   },
   "devDependencies": {
-    "@travetto/email-compiler": "^8.0.0-alpha.21"
+    "@travetto/email-compiler": "^8.0.0-alpha.23"
   },
   "peerDependenciesMeta": {
     "@travetto/cli": {

package/src/components.ts

@@ -1,41 +1,60 @@
 import { TypedObject } from '@travetto/runtime';
 
-import type { JSXElement, JSXComponentFunction as CompFn } from '../support/jsx-runtime.ts';
+import type { JSXComponentFunction as CompFn, JSXElement } from '../support/jsx-runtime.ts';
 
 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;
+  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 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 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 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, raw?: boolean }> = () => EMPTY;
+export const Value: CompFn<{ attr: string; raw?: boolean }> = () => EMPTY;
 export const Unless: CompFn<{ attr: string }> = () => EMPTY;
 export const For: CompFn<{ attr: string }> = () => EMPTY;
 export const InkyTemplate: CompFn<{}> = () => EMPTY;
 
 export const c = {
-  Wrapper, Container, InkyTemplate,
-  Column, Title, Summary, HLine, Row, Button,
-  BlockGrid, Menu, Item, Center, Callout, Spacer,
-  If, Unless, For, Value
+  Wrapper,
+  Container,
+  InkyTemplate,
+  Column,
+  Title,
+  Summary,
+  HLine,
+  Row,
+  Button,
+  BlockGrid,
+  Menu,
+  Item,
+  Center,
+  Callout,
+  Spacer,
+  If,
+  Unless,
+  For,
+  Value
 } as const;
 
 for (const key of TypedObject.keys(c)) {
@@ -46,7 +65,7 @@ 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 type JSXElements = { [K in keyof C]: JSXElementByFn<K> };
 
 export const EMPTY_ELEMENT = EMPTY;
 

package/src/render/common.ts

@@ -1,4 +1,4 @@
-import { type JSXElement, isJSXElement } from '../../support/jsx-runtime.ts';
+import { isJSXElement, type JSXElement } from '../../support/jsx-runtime.ts';
 
 export const getChildren = (node: JSXElement): JSXElement[] => {
   const kids = node?.props?.children;
@@ -42,12 +42,17 @@ export const classString = (existing: string | undefined, ...toAdd: string[]): s
   return out.join(' ');
 };
 
-export const combinePropsToString = (allowedProps: Set<string>, props: { className?: string } & Record<string, unknown>, addClasses: string[] = []): string => {
+export const combinePropsToString = (
+  allowedProps: Set<string>,
+  props: { className?: string } & Record<string, unknown>,
+  addClasses: string[] = []
+): string => {
   const out = { ...props, className: classString(props.className, ...addClasses) };
   return Object.entries(out)
     .filter(([key, value]) => allowedProps.has(key) && value !== undefined && value !== null && value !== '')
     .map(([key, value]) => [key === 'className' ? 'class' : key, value])
-    .map(([key, value]) => `${key}="${value}"`).join(' ');
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ');
 };
 
-export const isOfType = (node: JSXElement, type: string): boolean => typeof node.type === 'function' && node.type.name === type;
+export const isOfType = (node: JSXElement, type: string): boolean => typeof node.type === 'function' && node.type.name === type;

package/src/render/context.ts

@@ -1,16 +1,15 @@
+import { EmailResourceLoader, type EmailTemplateLocation } from '@travetto/email';
 import { castTo, type FileLoader } from '@travetto/runtime';
-import { type EmailTemplateLocation, EmailResourceLoader } from '@travetto/email';
 
-import { type JSXElementByFn, c } from '../components.ts';
 import { createElement } from '../../support/jsx-runtime.ts';
+import { c, type JSXElementByFn } from '../components.ts';
 
-export type RenderContextInit = EmailTemplateLocation & { loader?: FileLoader, columnCount?: number };
+export type RenderContextInit = EmailTemplateLocation & { loader?: FileLoader; columnCount?: number };
 
 /**
  * Render Context
  */
 export class RenderContext implements RenderContextInit {
-
   columnCount: number = 12;
   file: string;
   module: string;
@@ -27,4 +26,4 @@ export class RenderContext implements RenderContextInit {
   createElement<K extends keyof typeof c>(name: K, props: JSXElementByFn<K>['props']): JSXElementByFn<K> {
     return castTo(createElement(castTo<Record<string, string>>(c)[name], props));
   }
-}
+}

package/src/render/html.ts

@@ -1,7 +1,7 @@
 import type { JSXElement } from '../../support/jsx-runtime.ts';
 import type { RenderProvider, RenderState } from '../types.ts';
-import type { RenderContext } from './context.ts';
 import { classString, combinePropsToString, getChildren, isOfType, visit } from './common.ts';
+import type { RenderContext } from './context.ts';
 
 export const SUMMARY_STYLE = Object.entries({
   display: 'none',
@@ -12,12 +12,25 @@ export const SUMMARY_STYLE = Object.entries({
   'max-width': '0px',
   opacity: '0',
   overflow: 'hidden'
-}).map(([key, value]) => `${key}: ${value}`).join('; ');
+})
+  .map(([key, value]) => `${key}: ${value}`)
+  .join('; ');
 
 const allowedProps = new Set([
-  'className', 'id', 'dir', 'name', 'src',
-  'alt', 'href', 'title', 'height', 'target',
-  'width', 'style', 'align', 'valign'
+  'className',
+  'id',
+  'dir',
+  'name',
+  'src',
+  'alt',
+  'href',
+  'title',
+  'height',
+  'target',
+  'width',
+  'style',
+  'align',
+  'valign'
 ]);
 
 const propsToString = combinePropsToString.bind(null, allowedProps);
@@ -44,15 +57,21 @@ export const Html: RenderProvider<RenderContext> = {
       // 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(/<title>.*?<\/title>/, a => {
+          headerTop.push(a);
+          return '';
+        })
+        .replace(/<span[^>]+id="summary"[^>]*>(.*?)<\/span>/ms, a => {
+          bodyTop.push(a);
+          return '';
+        })
         .replace(/<head( [^>]*)?>/, tag => `${tag}\n${headerTop.join('\n')}`)
         .replace(/<body[^>]*>/, tag => `${tag}\n${bodyTop.join('\n')}`);
 
       // Allow tag suffixes/prefixes via comments
       html = final
         .replace(/\s*<!--\s*[$]:([^ -]+)\s*-->\s*(<\/[^>]+>)/g, (_, suffix, tag) => `${tag}${suffix}`)
-        .replace(/(<[^\/][^>]+>)\s*<!--\s*[#]:([^ ]+)\s*-->\s*/g, (_, tag, prefix) => `${prefix}${tag}`);
+        .replace(/(<[^/][^>]+>)\s*<!--\s*[#]:([^ ]+)\s*-->\s*/g, (_, tag, prefix) => `${prefix}${tag}`);
     }
 
     return html;
@@ -61,16 +80,32 @@ export const Html: RenderProvider<RenderContext> = {
   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.raw ? `{{{${props.attr}}}}` : `{{${props.attr}}}`,
+  Value: async ({ props }) => (props.raw ? `{{{${props.attr}}}}` : `{{${props.attr}}}`),
 
   br: async () => '<br>\n',
-  hr: async (node) => `<table ${propsToString(node.props)}><th></th></table>`,
-  strong: standardInline, em: standardInline, p: standardFull,
-  h1: standardFull, h2: standardFull, h3: standardFull, h4: standardFull,
-  li: standard, ol: standardFull, ul: standardFull,
-  table: standardFull, thead: standard, tr: standard, td: standard, th: standard, tbody: standard, center: standard, img: standardInline,
+  hr: async node => `<table ${propsToString(node.props)}><th></th></table>`,
+  strong: standardInline,
+  em: standardInline,
+  p: standardFull,
+  h1: standardFull,
+  h2: standardFull,
+  h3: standardFull,
+  h4: standardFull,
+  li: standard,
+  ol: standardFull,
+  ul: standardFull,
+  table: standardFull,
+  thead: standard,
+  tr: standard,
+  td: standard,
+  th: standard,
+  tbody: standard,
+  center: standard,
+  img: standardInline,
   title: standard,
-  div: standard, span: standardInline, small: standardInline,
+  div: standard,
+  span: standardInline,
+  small: standardInline,
   a: async ({ recurse, props }) => `<a ${propsToString(props)}>${await recurse()}</a>`,
 
   InkyTemplate: ctx => ctx.recurse(),
@@ -78,7 +113,6 @@ export const Html: RenderProvider<RenderContext> = {
   Summary: async ({ recurse }) => `<span id="summary" style="${SUMMARY_STYLE}">${await recurse()}</span>`,
 
   Column: async ({ props, recurse, stack, node, context }): Promise<string> => {
-
     recurse();
 
     let expander = '';
@@ -88,7 +122,7 @@ export const Html: RenderProvider<RenderContext> = {
     const colCount = siblings.length || 1;
 
     if (parent) {
-      const parentNode: (typeof parent) & { columnVisited?: boolean } = parent;
+      const parentNode: typeof parent & { columnVisited?: boolean } = parent;
       if (!parentNode.columnVisited) {
         parentNode.columnVisited = true;
         if (siblings.length) {
@@ -107,9 +141,9 @@ export const Html: RenderProvider<RenderContext> = {
     // If the column contains a nested row, the .expander class should not be used
     if (largeSize === context.columnCount && !props.noExpander) {
       let hasRow = false;
-      visit(node, (child) => {
+      visit(node, child => {
         if (isOfType(child, 'Row')) {
-          return hasRow = true;
+          return (hasRow = true);
         }
       });
       if (!hasRow) {
@@ -217,11 +251,11 @@ export const Html: RenderProvider<RenderContext> = {
 
   Menu: async ({ recurse, node, props }): Promise<string> => {
     let hasItem = false;
-    visit(node, (child) => {
+    visit(node, child => {
       if (isOfType(child, 'Item')) {
-        return hasItem = true;
+        return (hasItem = true);
       } else if ((child.type === 'td' || child.type === 'th') && child.props.className?.includes('menu-item')) {
-        return hasItem = true;
+        return (hasItem = true);
       }
     });
 
@@ -280,7 +314,6 @@ export const Html: RenderProvider<RenderContext> = {
   },
 
   Callout: async ({ recurse, props }): Promise<string> => {
-
     const innerProps: JSXElement['props'] = { className: props.className };
     delete props.className;
 
@@ -337,4 +370,4 @@ export const Html: RenderProvider<RenderContext> = {
     </tr>
   </tbody>
 </table>`
-};
+};

package/src/render/markdown.ts

@@ -1,16 +1,16 @@
 import { castTo } from '@travetto/runtime';
 
+import type { JSXElement } from '../../support/jsx-runtime.ts';
 import type { RenderProvider, RenderState } from '../types.ts';
 import type { RenderContext } from './context.ts';
-import type { JSXElement } from '../../support/jsx-runtime.ts';
 
 const visit = ({ recurse }: RenderState<JSXElement, RenderContext>): Promise<string> => recurse();
 const ignore = async (_: RenderState<JSXElement, RenderContext>): Promise<string> => '';
 
 export const Markdown: RenderProvider<RenderContext> = {
-  finalize: (text) => {
+  finalize: text => {
     text = text
-      .replace(/(\[[^\]]{1,100}\]\([^)]{1,1000}\))([A-Za-z0-9$]{1,100})/g, (all, link, value) => value === 's' ? all : `${link} ${value}`)
+      .replace(/(\[[^\]]{1,100}\]\([^)]{1,1000}\))([A-Za-z0-9$]{1,100})/g, (all, link, value) => (value === 's' ? all : `${link} ${value}`))
       .replace(/(\S)\n(#)/g, (_, left, right) => `${left}\n\n${right}`);
     return text;
   },
@@ -18,7 +18,7 @@ export const Markdown: RenderProvider<RenderContext> = {
   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.raw ? `{{{${props.attr}}}}` : `{{${props.attr}}}`,
+  Value: async ({ props }) => (props.raw ? `{{{${props.attr}}}}` : `{{${props.attr}}}`),
 
   strong: async ({ recurse }) => `**${await recurse()}**`,
   hr: async () => '\n------------------\n',
@@ -31,7 +31,7 @@ export const Markdown: RenderProvider<RenderContext> = {
   li: async ({ recurse, stack }) => {
     const parent = stack.toReversed().find(node => node.type === 'ol' || node.type === 'ul');
     const depth = stack.filter(node => node.type === 'ol' || node.type === 'ul').length;
-    return `${'   '.repeat(depth)}${(parent && parent.type === 'ol') ? '1.' : '* '} ${await recurse()}\n`;
+    return `${'   '.repeat(depth)}${parent && parent.type === 'ol' ? '1.' : '* '} ${await recurse()}\n`;
   },
   th: async ({ recurse }) => `|${await recurse()}`,
   td: async ({ recurse }) => `|${await recurse()}`,
@@ -44,12 +44,17 @@ 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`,
-  a: async ({ recurse, props }) => `\n[${await recurse()}](${(castTo<{ href: string }>(props)).href})\n`,
+  a: async ({ recurse, props }) => `\n[${await recurse()}](${castTo<{ href: string }>(props).href})\n`,
   Button: async ({ recurse, props }) => `\n[${await recurse()}](${props.href})\n`,
 
   InkyTemplate: visit,
-  Callout: visit, Center: visit, Container: visit,
-  Column: visit, Wrapper: visit, Row: visit, BlockGrid: visit,
+  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 }) => {
@@ -58,7 +63,14 @@ export const Markdown: RenderProvider<RenderContext> = {
   },
   Spacer: async () => '\n\n',
 
-  Summary: ignore, Title: ignore,
+  Summary: ignore,
+  Title: ignore,
   img: ignore,
-  div: visit, title: visit, span: visit, center: visit, table: visit, tbody: visit, small: visit
+  div: visit,
+  title: visit,
+  span: visit,
+  center: visit,
+  table: visit,
+  tbody: visit,
+  small: visit
 };

package/src/render/renderer.ts

@@ -1,15 +1,14 @@
 import { castTo } from '@travetto/runtime';
 
-import { EMPTY_ELEMENT, getComponentName, type JSXElementByFn, type c } from '../components.ts';
+import { createFragment, isJSXElement, type JSXChild, type JSXElement, JSXFragmentType } from '../../support/jsx-runtime.ts';
+import { type c, EMPTY_ELEMENT, getComponentName, type JSXElementByFn } from '../components.ts';
 import type { RenderProvider, RenderState } from '../types.ts';
 import { RenderContext, type RenderContextInit } from './context.ts';
-import { isJSXElement, type JSXElement, createFragment, JSXFragmentType, type JSXChild } from '../../support/jsx-runtime.ts';
 
 /**
  * Inky Renderer
  */
 export class InkyRenderer {
-
   static async #render(
     ctx: RenderContext,
     renderer: RenderProvider<RenderContext>,
@@ -46,9 +45,12 @@ export class InkyRenderer {
         const recurse = (): Promise<string> => this.#render(ctx, renderer, final.props.children ?? [], [...stack, final]);
         // @ts-expect-error
         const state: RenderState<JSXElement, RenderContext> = {
-          node: final, props: final.props, recurse, stack, context: ctx
+          node: 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);
@@ -66,7 +68,7 @@ export class InkyRenderer {
     renderer: RenderProvider<RenderContext>,
     state: RenderState<JSXElement, RenderContext>,
     key: K,
-    props: JSXElementByFn<K>['props'],
+    props: JSXElementByFn<K>['props']
     // @ts-expect-error
   ): RenderState<JSXElementByFn<K>, RenderContext> {
     const node = ctx.createElement(key, props);
@@ -89,4 +91,4 @@ export class InkyRenderer {
     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 => text,
 
   For: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
   If: async ({ recurse, props }) => `{{#${props.attr}}}${await recurse()}{{/${props.attr}}}`,
@@ -15,16 +15,44 @@ export const Subject: RenderProvider<RenderContext> = {
   Title: visit,
   InkyTemplate: visit,
 
-  title: visit, span: visit, strong: visit, center: visit, em: visit, p: visit, small: visit,
+  title: visit,
+  span: visit,
+  strong: visit,
+  center: visit,
+  em: visit,
+  p: visit,
+  small: 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,
+  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,
+  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

@@ -1,5 +1,5 @@
 import type { JSXElement, ValidHtmlTags } from '../support/jsx-runtime.ts';
-import type { JSXElementByFn, c } from './components.ts';
+import type { c, JSXElementByFn } from './components.ts';
 
 export type Wrapper = Record<string, (count: string) => string>;
 
@@ -16,8 +16,7 @@ export type RenderState<T extends JSXElement, C> = {
 /**
  * Renderer
  */
-export type RenderProvider<C> =
-  { finalize: (text: string, ctx: C, isRoot?: boolean) => (string | Promise<string>) } &
-  { [K in ValidHtmlTags]: (state: RenderState<JSXElement<K>, C>) => Promise<string>; } &
+export type RenderProvider<C> = { finalize: (text: string, ctx: C, isRoot?: boolean) => string | Promise<string> } & {
+  [K in ValidHtmlTags]: (state: RenderState<JSXElement<K>, C>) => Promise<string>;
   // @ts-expect-error - This is a bit of a hack to allow for custom components,
-  { [K in keyof typeof c]: (state: RenderState<JSXElementByFn<K>, C>) => Promise<string>; };
+} & { [K in keyof typeof c]: (state: RenderState<JSXElementByFn<K>, C>) => Promise<string> };

package/src/wrapper.ts

@@ -1,13 +1,13 @@
 import path from 'node:path';
 
-import { type EmailTemplateModule, type EmailTemplateLocation, EmailResourceLoader } from '@travetto/email';
+import { EmailResourceLoader, type EmailTemplateLocation, type EmailTemplateModule } from '@travetto/email';
 import { PackageUtil } from '@travetto/manifest';
 
-import { InkyRenderer } from './render/renderer.ts';
+import type { JSXElement } from '../support/jsx-runtime.ts';
 import { Html } from './render/html.ts';
 import { Markdown } from './render/markdown.ts';
+import { InkyRenderer } from './render/renderer.ts';
 import { Subject } from './render/subject.ts';
-import type { JSXElement } from '../support/jsx-runtime.ts';
 
 export async function prepare(node: JSXElement, location: EmailTemplateLocation): Promise<EmailTemplateModule> {
   const ctx = {
@@ -23,6 +23,6 @@ export async function prepare(node: JSXElement, location: EmailTemplateLocation)
   `,
     html: () => InkyRenderer.render(node, Html, ctx),
     text: () => InkyRenderer.render(node, Markdown, ctx),
-    subject: () => InkyRenderer.render(node, Subject, ctx),
+    subject: () => InkyRenderer.render(node, Subject, ctx)
   };
 }