@travetto/email-inky 3.4.5 → 4.0.0-rc.1

package/jsx-runtime.ts

@@ -1,4 +1,5 @@
 import { ConcreteClass } from '@travetto/base';
+import { EmailTemplateModule, EmailTemplateLocation } from '@travetto/email';
 
 export type JSXChild = JSXElement | number | bigint | boolean | object | string;
 type JSXProps = { children?: JSXChild | JSXChild[] | null, className?: string, id?: string, name?: string, dir?: string };
@@ -53,22 +54,28 @@ declare global {
   }
 }
 
+let createFrag: Function | undefined = undefined;
+
 export function createElement<T extends string | ConcreteClass | JSXComponentFunction<P>, P extends {}>(
   type: T, props: P & JSXProps
 ): JSXElement<T, P> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  type = (type === createFrag ? JSXFragmentType : type) as T;
   return { [JSXRuntimeTag]: { id: (id += 1) }, type, key: '', props };
 }
 
 export function createRootElement<T extends string | ConcreteClass | JSXComponentFunction<P>, P extends {}>(
   type: T, props: P & JSXProps
 ): JSXElement<T, P> {
-  const res: JSXElement<T, P> = { [JSXRuntimeTag]: { id: (id += 1) }, key: '', type, props };
-  // @ts-expect-error
-  res.wrap = async (): Promise<unknown> => {
-    const { wrap } = await import('@travetto/email-inky');
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return wrap(res as JSXElement);
-  };
+  const res = createElement(type, props);
+
+  Object.assign(res, {
+    prepare(loc: EmailTemplateLocation): Promise<EmailTemplateModule> {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      return import('@travetto/email-inky/src/wrapper.js').then(v => v.prepare(res as JSXElement, loc));
+    }
+  });
+
   return res;
 }
 
@@ -81,4 +88,6 @@ export const jsxs = createRootElement;
 export const Fragment = createFragment;
 export function isJSXElement(el: unknown): el is JSXElement {
   return el !== undefined && el !== null && typeof el === 'object' && JSXRuntimeTag in el;
-}
+}
+
+createFrag = Fragment;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travetto/email-inky",
-  "version": "3.4.5",
+  "version": "4.0.0-rc.1",
   "description": "Email Inky templating module",
   "keywords": [
     "email",
@@ -27,17 +27,14 @@
     "directory": "module/email-inky"
   },
   "dependencies": {
-    "@travetto/base": "^3.4.2",
-    "@travetto/config": "^3.4.4",
-    "@travetto/di": "^3.4.2",
-    "@travetto/email": "^3.4.4",
+    "@travetto/base": "^4.0.0-rc.1",
+    "@travetto/config": "^4.0.0-rc.1",
+    "@travetto/di": "^4.0.0-rc.1",
+    "@travetto/email": "^4.0.0-rc.1",
     "foundation-emails": "^2.4.0"
   },
   "devDependencies": {
-    "@travetto/email-compiler": "^3.4.5"
-  },
-  "peerDependencies": {
-    "@travetto/cli": "^3.4.7"
+    "@travetto/email-compiler": "^4.0.0-rc.1"
   },
   "peerDependenciesMeta": {
     "@travetto/cli": {

package/src/components.ts

@@ -28,14 +28,19 @@ export const If: CompFn<{ attr: string }> = () => 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,
+  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)) {
+  Object.defineProperty(c[key], 'toString', { value: () => `<${key} />` });
+}
+
 type C = typeof c;
 
 // @ts-expect-error

package/src/render/context.ts

@@ -1,19 +1,24 @@
 import { createElement } from '@travetto/email-inky/jsx-runtime';
+import { FileLoader } from '@travetto/base';
+import { EmailTemplateLocation, EmailResourceLoader } from '@travetto/email';
 
 import { JSXElementByFn, c } from '../components';
 
+export type RenderContextInit = EmailTemplateLocation & { loader?: FileLoader, columnCount?: number };
+
 /**
  * Render Context
  */
-export class RenderContext {
+export class RenderContext implements RenderContextInit {
 
   columnCount: number = 12;
   file: string;
   module: string;
+  loader: FileLoader;
 
-  constructor(srcFile: string, module: string) {
-    this.file = srcFile;
-    this.module = module;
+  constructor(ctx: RenderContextInit) {
+    Object.assign(this, ctx);
+    this.loader ??= new EmailResourceLoader(ctx.module);
   }
 
   /**

package/src/render/html.ts

@@ -1,5 +1,4 @@
 import { JSXElement } from '@travetto/email-inky/jsx-runtime';
-import { EmailResource } from '@travetto/email';
 
 import { RenderProvider, RenderState } from '../types';
 import { RenderContext } from './context';
@@ -37,8 +36,7 @@ export const Html: RenderProvider<RenderContext> = {
       .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');
+      const wrapper = await context.loader.read('/email/inky.wrapper.html');
 
       // Get Subject
       const headerTop: string[] = [];
@@ -76,6 +74,7 @@ export const Html: RenderProvider<RenderContext> = {
   div: std, span: stdInline, small: stdInline,
   a: async ({ recurse, props }) => `<a ${propsToStr(props)}>${await recurse()}</a>`,
 
+  InkyTemplate: c => c.recurse(),
   Title: async ({ recurse, el }) => `<title>${await recurse()}</title>`,
   Summary: async ({ recurse, el }) => `<span id="summary" style="${SUMMARY_STYLE}">${await recurse()}</span>`,
 
@@ -89,14 +88,18 @@ export const Html: RenderProvider<RenderContext> = {
     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;
-      if (sibs.length) {
-        sibs[0].props.className = classStr(sibs[0].props.className ?? '', 'first');
-        sibs[sibs.length - 1].props.className = classStr(sibs[sibs.length - 1].props.className ?? '', 'last');
+    if (parent) {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const pProps = parent?.props as { columnVisited: boolean };
+      if (!pProps.columnVisited) {
+        pProps.columnVisited = true;
+        if (sibs.length) {
+          sibs[0].props.className = classStr(sibs[0].props.className ?? '', 'first');
+          sibs[sibs.length - 1].props.className = classStr(sibs[sibs.length - 1].props.className ?? '', 'last');
+        }
       }
+    } else {
+      props.className = classStr(props.className ?? '', 'first', 'last');
     }
 
     // Check for sizes. If no attribute is provided, default to small-12. Divide evenly for large columns

package/src/render/markdown.ts

@@ -46,6 +46,7 @@ export const Markdown: RenderProvider<RenderContext> = {
   a: async ({ recurse, props }) => `\n[${await recurse()}](${(props as { href: string }).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,
 

package/src/render/renderer.ts

@@ -1,9 +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 { RenderProvider, RenderState } from '../types';
-import { RenderContext } from './context';
+import { RenderContext, RenderContextInit } from './context';
 
 /**
  * Inky Renderer
@@ -34,7 +33,7 @@ export class InkyRenderer {
         final = out !== EMPTY_ELEMENT ? out : final;
       }
 
-      if (final.type === createFragment || final.type === JSXFragmentType) {
+      if (final.type === JSXFragmentType) {
         return this.#render(ctx, renderer, final.props.children ?? [], stack);
       }
 
@@ -83,11 +82,11 @@ export class InkyRenderer {
   static async render(
     root: JSXElement,
     provider: RenderProvider<RenderContext>,
-    sourceLoc: EmailTemplateLocation,
+    context: RenderContextInit,
     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 ctx = new RenderContext(context);
+    const par: JSXElement = root.type === JSXFragmentType ? root : createFragment({ children: [root] });
     const text = await this.#render(ctx, provider, par, []);
     return provider.finalize(text, ctx, isRoot);
   }

package/src/render/subject.ts

@@ -13,6 +13,7 @@ export const Subject: RenderProvider<RenderContext> = {
   Unless: async ({ recurse, props }) => `{{^${props.attr}}}${await recurse()}{{/${props.attr}}}`,
   Value: async ({ props }) => `{{${props.attr}}}`,
   Title: visit,
+  InkyTemplate: visit,
 
   title: visit, span: visit, strong: visit, center: visit, em: visit, p: visit, small: visit,
 

package/src/wrapper.ts

@@ -1,35 +1,26 @@
-import { createRequire } from 'module';
-
-import { EmailCompileSource } from '@travetto/email';
-import { JSXComponentFunction, JSXElement, JSXFragmentType } from '@travetto/email-inky/jsx-runtime';
-import { RootIndex, path } from '@travetto/manifest';
+import { EmailTemplateModule, EmailTemplateLocation, EmailResourceLoader } from '@travetto/email';
+import { PackageUtil, path } from '@travetto/manifest';
+import { JSXElement } from '@travetto/email-inky/jsx-runtime';
 
 import { InkyRenderer } from './render/renderer';
 import { Html } from './render/html';
 import { Markdown } from './render/markdown';
 import { Subject } from './render/subject';
 
-export const wrap = (content: JSXElement): EmailCompileSource => {
-  const req = createRequire(`${RootIndex.manifest.workspacePath}/node_modules`);
-  const finalContent = { ...content, key: '', type: JSXFragmentType };
-
+export async function prepare(node: JSXElement, loc: EmailTemplateLocation): Promise<EmailTemplateModule> {
+  const ctx = {
+    ...loc,
+    loader: new EmailResourceLoader(loc.module, [path.dirname(PackageUtil.resolveImport('foundation-emails/scss/_global.scss'))])
+  };
   return {
-    styles: {
-      search: [path.dirname(req.resolve('foundation-emails/scss/_global.scss'))],
-      global: `
+    loader: ctx.loader,
+    globalStyles: `
   @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),
+  `,
+    html: () => InkyRenderer.render(node, Html, ctx),
+    text: () => InkyRenderer.render(node, Markdown, ctx),
+    subject: () => InkyRenderer.render(node, Subject, ctx),
   };
-};
-
-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);
+}