@travetto/email-inky 3.1.24 → 3.1.26

package/README.md

@@ -13,27 +13,27 @@ 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>
-    <If key='person'>
+    <If attr='person'>
       <Row>
         <Column small={5}>
-          <Button href='https://google.com/[[query]]'>Hello <Value key='name' /></Button>
+          <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)

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.24",
+  "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,15 +113,16 @@ 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;
+
       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
@@ -148,7 +150,7 @@ export const Html: RenderProvider<RenderContext> = {
       classes.push('hide-for-small');
     }
     if (props.largeOffset) {
-      classes.push(`large-offset-${props.smallOffset}`);
+      classes.push(`large-offset-${props.largeOffset}`);
     }
     if (props.hideLarge) {
       classes.push('hide-for-large');

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) };
   }
@@ -81,7 +82,14 @@ export class InkyRenderer {
    */
   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: '' };
+    let par: JSXElement;
+
+    // We are at the root element
+    if (isJSXElement(root.text)) {
+      par = root.text;
+    } else {
+      par = { props: { children: Array.isArray(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`;

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: {} });