@travetto/email-inky 3.4.4 → 4.0.0-rc.0

package/jsx-runtime.ts

@@ -53,22 +53,22 @@ 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: JSXElement<T, P> & { wrap?: Function } = createElement(type, props);
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  res.wrap = (): Promise<unknown> => import('@travetto/email-inky/src/wrapper.js').then(v => v.wrap(res as JSXElement));
   return res;
 }
 
@@ -81,4 +81,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.4",
+  "version": "4.0.0-rc.0",
   "description": "Email Inky templating module",
   "keywords": [
     "email",
@@ -27,17 +27,14 @@
     "directory": "module/email-inky"
   },
   "dependencies": {
-    "@travetto/base": "^3.4.1",
-    "@travetto/config": "^3.4.3",
-    "@travetto/di": "^3.4.1",
-    "@travetto/email": "^3.4.3",
+    "@travetto/base": "^4.0.0-rc.0",
+    "@travetto/config": "^4.0.0-rc.0",
+    "@travetto/di": "^4.0.0-rc.0",
+    "@travetto/email": "^4.0.0-rc.0",
     "foundation-emails": "^2.4.0"
   },
   "devDependencies": {
-    "@travetto/email-compiler": "^3.4.4"
-  },
-  "peerDependencies": {
-    "@travetto/cli": "^3.4.6"
+    "@travetto/email-compiler": "^4.0.0-rc.0"
   },
   "peerDependenciesMeta": {
     "@travetto/cli": {

package/src/components.ts

@@ -28,9 +28,10 @@ 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

package/src/render/html.ts

@@ -1,5 +1,5 @@
 import { JSXElement } from '@travetto/email-inky/jsx-runtime';
-import { EmailResource } from '@travetto/email';
+import { ResourceLoader } from '@travetto/base';
 
 import { RenderProvider, RenderState } from '../types';
 import { RenderContext } from './context';
@@ -37,7 +37,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'])
+      const wrapper = await new ResourceLoader([`${context.module}#resources`, '@travetto/email-inky#resources'])
         .read('/email/inky.wrapper.html');
 
       // Get Subject
@@ -76,6 +76,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 +90,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

@@ -34,7 +34,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);
       }
 
@@ -87,7 +87,7 @@ export class InkyRenderer {
     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 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/wrapper.ts

@@ -1,35 +1,22 @@
-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 { JSXElement } from '@travetto/email-inky/jsx-runtime';
+import { PackageUtil, path } from '@travetto/manifest';
 
 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 };
-
-  return {
-    styles: {
-      search: [path.dirname(req.resolve('foundation-emails/scss/_global.scss'))],
-      global: `
+export const wrap = (content: JSXElement): EmailCompileSource => ({
+  styles: {
+    search: [path.dirname(PackageUtil.resolveImport('foundation-emails/scss/_global.scss'))],
+    global: `
   @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 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);
+  },
+  html: InkyRenderer.render.bind(InkyRenderer, content, Html),
+  text: InkyRenderer.render.bind(InkyRenderer, content, Markdown),
+  subject: InkyRenderer.render.bind(InkyRenderer, content, Subject),
+});