@travetto/email-inky 3.1.25 → 3.1.26

package/README.md

@@ -13,15 +13,15 @@ npm install @travetto/email-inky
 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.
+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 Compilation Support](https://github.com/travetto/travetto/tree/main/module/email-compiler#readme "Email compiling 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';
+import { Title, Container, Summary, Row, Column, If, Button, Value, InkyTemplate } from '@travetto/email-inky';
 
-export default inkyTpl(<>
+export default <InkyTemplate>
   <Title>Test Email</Title>
   <Summary>Email Summary</Summary>
   <Container>
@@ -33,7 +33,7 @@ export default inkyTpl(<>
       </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)

package/jsx-runtime.ts

@@ -59,12 +59,25 @@ export function createElement<T extends string | ConcreteClass | JSXComponentFun
   return { [JSXRuntimeTag]: { id: (id += 1) }, key: '', type, 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);
+  };
+  return res;
+}
+
 export function createFragment<P extends {}>(props: P & JSXProps): JSXElement<typeof JSXFragmentType, P> {
   return createElement(JSXFragmentType, props);
 }
 
 export const jsx = createElement;
-export const jsxs = createElement;
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travetto/email-inky",
-  "version": "3.1.25",
+  "version": "3.1.26",
   "description": "Email Inky templating module",
   "keywords": [
     "email",
@@ -34,10 +34,10 @@
     "foundation-emails": "^2.4.0"
   },
   "devDependencies": {
-    "@travetto/email-template": "^3.1.18"
+    "@travetto/email-compiler": "^3.1.20"
   },
   "peerDependencies": {
-    "@travetto/cli": "^3.1.6"
+    "@travetto/cli": "^3.1.7"
   },
   "peerDependenciesMeta": {
     "@travetto/cli": {

package/src/render/html.ts

@@ -43,6 +43,7 @@ const allowedProps = new Set([
 ]);
 
 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 !== '')
@@ -112,6 +113,7 @@ export const Html: RenderProvider<RenderContext> = {
     const colCount = kids.length || 1;
 
     const parent = stack[stack.length - 1];
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const pProps = parent.props as { columnVisited: boolean };
     if (!pProps.columnVisited) {
       pProps.columnVisited = true;

package/src/render/renderer.ts

@@ -71,6 +71,7 @@ export class InkyRenderer {
     // @ts-expect-error
   ): RenderState<JSXElementByFn<K>, RenderContext> {
     const el = ctx.createElement(key, props);
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const newStack = [...state.stack, el] as JSXElement[];
     return { ...state, el, props: el.props, recurse: () => this.#render(ctx, renderer, el.props.children ?? [], newStack) };
   }
@@ -82,6 +83,8 @@ export class InkyRenderer {
   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 {

package/src/wrapper.ts

@@ -1,7 +1,7 @@
 import { createRequire } from 'module';
 
 import { MessageCompilationSource } from '@travetto/email';
-import { JSXElement } from '@travetto/email-inky/jsx-runtime';
+import { JSXComponentFunction, JSXElement } from '@travetto/email-inky/jsx-runtime';
 import { RootIndex, path } from '@travetto/manifest';
 
 import { InkyRenderer } from './render/renderer';
@@ -9,19 +9,23 @@ 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 wrap = (content: JSXElement): MessageCompilationSource => {
+  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: `
+  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';
 `
-  }
-});
+    }
+  };
+};
+
+export const InkyTemplate: JSXComponentFunction<{}> = (): JSXElement => ({ type: '', key: '', props: {} });