@travetto/email-compiler 3.1.20

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ArcSine Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+<!-- This file was generated by @travetto/doc and should not be modified directly -->
+<!-- Please modify https://github.com/travetto/travetto/tree/main/module/email-compiler/DOC.tsx and execute "npx trv doc" to rebuild -->
+# Email Compilation Support
+
+## Email compiling module
+
+**Install: @travetto/email-compiler**
+```bash
+npm install @travetto/email-compiler
+
+# or
+
+yarn add @travetto/email-compiler
+```
+
+This is primarily a set of command line tools for compiling and developing templates.  The inputs are compiled files, generally under the `support/` folder, that represents the necessary input for the email compilation.  [Email Inky Templates](https://github.com/travetto/travetto/tree/main/module/email-inky#readme "Email Inky templating module") shows this pattern by leveraging [JSX](https://en.wikipedia.org/wiki/JSX_(JavaScript)) bindings for the [inky](https://github.com/zurb/inky) framework, allowing for compile-time checked templates.
+
+## Asset Management
+The templating process involves loading various assets (html, css, images), and so there is provision for asset management and loading.  The templating config allows for specifying asset paths, with the following paths (in order of precedence):
+   1. `%ROOT%/resources/email`
+   1. `@travetto/email-{engine}/resources/email`
+When looking up a resources, every asset folder is consulted, in order, and the first to resolve an asset wins.  This allows for overriding of default templating resources, as needed.  The compilation process will convert `.email.html` files into `.compiled.html`, `.compiled.text` and `.compiled.subject` suffixes to generate the outputs respectively.
+
+## Template Extension
+The template extension points are defined at:
+   1. `email/main.scss` - The entry point for adding, and overriding any [sass](https://github.com/sass/dart-sass)
+   1. `email/{engine}.wrapper.html` - The html wrapper for the specific templating engine implementation.
+
+## Template Compilation
+The general process is as follows:
+   1. Load in the email template.
+   1. Resolve any associated stylings for said template.
+   1. Optimize styles against provided html, removing all unused stylings
+   1. Render template into html, text, and subject outputs.
+   1. Inline and optimize all images for html email transmission.
+
+## Images
+When referencing an image from the `resources` folder in a template, e.g.
+
+**Code: Sample Image Reference**
+```html
+<img src="/email/logo.png">
+```
+
+The image will be extracted out and embedded in the email as a multi part message.  This allows for compression and optimization of images as well as externalizing resources that may not be immediately public.  The currently supported set of image types are:
+   *  jpeg
+   *  png
+
+## Template Development
+The module provides [Command Line Interface](https://github.com/travetto/travetto/tree/main/module/cli#readme "CLI infrastructure for Travetto framework") and [VSCode plugin](https://marketplace.visualstudio.com/items?itemName=arcsine.travetto-plugin) support for email template development.
+
+## CLI Compilation
+The module provides [Command Line Interface](https://github.com/travetto/travetto/tree/main/module/cli#readme "CLI infrastructure for Travetto framework") support for email template compilation also. Running
+
+**Terminal: Running template compilation**
+```bash
+$ trv email:compile -h
+
+Usage: email:compile [options]
+
+Options:
+  -w, --watch            Compile in watch mode
+  -m, --module <string>  Module to run for
+  -h, --help             display help for command
+```
+
+Will convert all `.email.html` files into the appropriate `.compiled.html`, `.compiled.text` and `.compiled.subject` files.  These will be used during the running of the application.  By default these files are added to the `.gitignore` as they are generally not intended to be saved but to be generated during the build process.
+
+## VSCode Plugin
+In addition to command line tools, the [VSCode plugin](https://marketplace.visualstudio.com/items?itemName=arcsine.travetto-plugin) also supports:
+   *  automatic compilation on change
+   *  real-time rendering of changes visually
+   *  ability to send test emails during development
+   *  ability to define custom context for template rendering

package/__index__.ts

@@ -0,0 +1,2 @@
+export * from './src/resource';
+export * from './src/compiler';

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@travetto/email-compiler",
+  "version": "3.1.20",
+  "description": "Email compiling module",
+  "keywords": [
+    "email",
+    "email compiler",
+    "travetto",
+    "typescript"
+  ],
+  "homepage": "https://travetto.io",
+  "license": "MIT",
+  "author": {
+    "email": "travetto.framework@gmail.com",
+    "name": "Travetto Framework"
+  },
+  "files": [
+    "__index__.ts",
+    "src",
+    "!resources",
+    "support"
+  ],
+  "main": "__index__.ts",
+  "repository": {
+    "url": "https://github.com/travetto/travetto.git",
+    "directory": "module/email-compiler"
+  },
+  "dependencies": {
+    "@travetto/base": "^3.1.2",
+    "@travetto/config": "^3.1.6",
+    "@travetto/di": "^3.1.3",
+    "@travetto/email": "^3.1.12",
+    "@travetto/image": "^3.1.3",
+    "@types/inline-css": "^3.0.1",
+    "html-entities": "^2.3.3",
+    "inline-css": "^4.0.2",
+    "sass": "^1.62.1",
+    "purgecss": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@travetto/cli": "^3.1.7"
+  },
+  "peerDependenciesMeta": {
+    "@travetto/cli": {
+      "optional": true
+    }
+  },
+  "travetto": {
+    "displayName": "Email Compilation Support"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/compiler.ts

@@ -0,0 +1,187 @@
+import fs from 'fs/promises';
+import util from 'util';
+import { decode as decodeEntities } from 'html-entities';
+
+import { ImageConverter } from '@travetto/image';
+import { RootIndex, path } from '@travetto/manifest';
+import { StreamUtil } from '@travetto/base';
+import { MessageCompilationSource, MessageCompiled } from '@travetto/email';
+
+import { EmailCompilerResource } from './resource';
+
+/**
+ * Utilities for templating
+ */
+export class EmailCompiler {
+
+  static HTML_CSS_IMAGE_URLS = [
+    /(?<pre><img[^>]src=\s*["'])(?<src>[^"]+)/g,
+    /(?<pre>background(?:-image)?:\s*url[(]['"]?)(?<src>[^"')]+)/g
+  ];
+
+  static async readText(text: Promise<string> | string): Promise<string> {
+    return decodeEntities((await text).replace(/&#xA0;/g, ' '));
+  }
+
+  /**
+   * Compile SCSS content with roots as search paths for additional assets
+   */
+  static async compileSass(src: { data: string } | { file: string }, roots: string[]): Promise<string> {
+    const sass = await import('sass');
+    const result = await util.promisify(sass.render)({
+      ...src,
+      sourceMap: false,
+      includePaths: roots
+    });
+    return result!.css.toString();
+  }
+
+  resources: EmailCompilerResource;
+
+  constructor(resources: EmailCompilerResource) {
+    this.resources = resources;
+  }
+
+  /**
+   * Inline image sources
+   */
+  async inlineImageSource(html: string): Promise<string> {
+    const { tokens, finalize } = await this.resources.tokenizeResources(html, EmailCompiler.HTML_CSS_IMAGE_URLS);
+    const pendingImages: Promise<[token: string, content: string]>[] = [];
+
+    for (const [token, src] of tokens) {
+      const ext = path.extname(src).replace(/^[.]/, '');
+      const stream = await this.resources.readStream(src);
+
+      switch (ext) {
+        case 'jpg':
+        case 'jpeg':
+        case 'png': {
+          pendingImages.push(
+            ImageConverter.optimize(ext === 'png' ? 'png' : 'jpeg', stream)
+              .then(img => StreamUtil.streamToBuffer(img))
+              .then(data => [token, `data:image/${ext};base64,${data.toString('base64')}`])
+          );
+          break;
+        }
+        default: {
+          pendingImages.push(
+            StreamUtil.streamToBuffer(stream)
+              .then(data => [token, `data:image/${ext};base64,${data.toString('base64')}`])
+          );
+        }
+      }
+    }
+
+    const imageMap = new Map(await Promise.all(pendingImages));
+
+    return finalize(token => imageMap.get(token)!);
+  }
+
+  async pruneCss(html: string, css: string): Promise<string> {
+    const { PurgeCSS } = await import('purgecss');
+    const purge = new PurgeCSS();
+    const result = await purge.purge({
+      content: [{ raw: html, extension: 'html' }],
+      css: [{ raw: css }],
+    });
+    return result[0].css;
+  }
+
+  async inlineCss(html: string, css: string): Promise<string> {
+    // Inline css
+    const { default: inlineCss } = await import('inline-css');
+    html = html.replace('</head>', `<style>${css}</style></head>`);
+    // Style needs to be in head to preserve media queries
+    html = (await inlineCss(html, {
+      url: 'https://app.dev',
+      preserveMediaQueries: true,
+      removeStyleTags: true,
+      removeLinkTags: true,
+      applyStyleTags: true,
+    }));
+    return html;
+  }
+
+  /**
+   * Compile all
+   */
+  async compileAll(persist = false): Promise<MessageCompiled[]> {
+    const keys = await this.resources.findAllTemplates();
+    return Promise.all(keys.map(src => this.compile(src, persist)));
+  }
+
+  /**
+   * Compile template
+   */
+  async compile(src: string | MessageCompilationSource, persist = false): Promise<MessageCompiled> {
+    if (typeof src === 'string') {
+      src = await this.resources.loadTemplate(src);
+    }
+
+    const subject = await EmailCompiler.readText(src.subject());
+    const text = await EmailCompiler.readText(src.text());
+
+    let html = (await src.html())
+      .replace(/<(meta|img|link|hr|br)[^>]*>/g, a => a.replace('>', '/>')) // Fix self closing
+      .replace(/&apos;/g, '&#39;'); // Fix apostrophes, as outlook hates them
+
+    if (src.inlineStyles !== false) {
+      const styles: string[] = [];
+
+      if (src.styles?.global) {
+        styles.push(src.styles.global);
+      }
+
+      const main = await this.resources.read('/email/main.scss').then(d => d, () => '');
+      if (main) {
+        styles.push(main);
+      }
+
+      if (styles.length) {
+        const compiled = await EmailCompiler.compileSass(
+          { data: styles.join('\n') },
+          [...src.styles?.search ?? [], ...this.resources.getAllPaths()]);
+
+        // Remove all unused styles
+        const finalStyles = await this.pruneCss(html, compiled);
+
+        // Apply styles
+        html = await this.inlineCss(html, finalStyles);
+      }
+    }
+
+    // Fix up style behaviors
+    html = html
+      .replace(/(background(?:-color)?:\s*)([#0-9a-f]{6,8})([^>.#,]+)>/ig,
+        (all, p, col, rest) => `${p}${col}${rest} bgcolor="${col}">`) // Inline bg-color
+      .replace(/<([^>]+vertical-align:\s*(top|bottom|middle)[^>]+)>/g,
+        (a, tag, valign) => tag.indexOf('valign') ? `<${tag}>` : `<${tag} valign="${valign}">`) // Vertically align if it has the style
+      .replace(/<(table[^>]+expand[^>]+width:\s*)(100%\s+!important)([^>]+)>/g,
+        (a, left, size, right) => `<${left}100%${right}>`); // Drop important as a fix for outlook
+
+    if (src.inlineImages !== false) {
+      // Inline Images
+      html = await this.inlineImageSource(html);
+    }
+
+    // Write to disk, if desired
+    if (persist) {
+      const outs = this.resources.getOutputs(src.file!, path.join(RootIndex.mainModule.sourcePath, 'resources'));
+      await Promise.all([
+        [outs.text, text],
+        [outs.html, html],
+        [outs.subject, subject]
+      ].map(async ([file, content]) => {
+        if (content) {
+          await fs.mkdir(path.dirname(file), { recursive: true });
+          await fs.writeFile(file, content, { encoding: 'utf8' });
+        } else {
+          await fs.unlink(file).catch(() => { }); // Remove file if data not provided
+        }
+      }));
+    }
+
+    return { html, text, subject };
+  }
+}

package/src/resource.ts

@@ -0,0 +1,111 @@
+import { FileQueryProvider } from '@travetto/base';
+import { MessageCompilationSource, MessageCompiled } from '@travetto/email';
+import { RootIndex, path } from '@travetto/manifest';
+
+/**
+ * Resource management for email templating
+ */
+export class EmailCompilerResource extends FileQueryProvider {
+  static PATH_PREFIX = /.*\/resources\//;
+  static EXT = /[.]email[.][jt]sx$/;
+
+  get ext(): RegExp {
+    return EmailCompilerResource.EXT;
+  }
+
+  constructor(paths: string[] = ['@travetto/email-compiler#support/resources']) {
+    super({ paths, includeCommon: true });
+  }
+
+  buildOutputPath(file: string, suffix: string, prefix?: string): string {
+    let res = file.replace(/.*(support|src)\//, '').replace(this.ext, suffix);
+    if (prefix) {
+      res = path.join(prefix, res);
+    }
+    return res;
+  }
+
+  /**
+   * Get the different parts from the file name
+   * @returns
+   */
+  getOutputs(file: string, prefix?: string): MessageCompiled {
+    return {
+      html: this.buildOutputPath(file, '.compiled.html', prefix),
+      subject: this.buildOutputPath(file, '.compiled.subject', prefix),
+      text: this.buildOutputPath(file, '.compiled.text', prefix),
+    };
+  }
+
+  /**
+   * Is this a valid template file?
+   */
+  isTemplateFile(file: string): boolean {
+    return this.ext.test(file);
+  }
+
+  /**
+   * Get the sending email key from a template file
+   * @param file
+   */
+  async templateFileToKey(file: string): Promise<string> {
+    return this.buildOutputPath(file, '');
+  }
+
+  async loadTemplate(imp: string): Promise<MessageCompilationSource> {
+    const entry = RootIndex.getEntry(imp) ?? RootIndex.getFromImport(imp);
+    if (!entry) {
+      throw new Error();
+    }
+    const root = (await import(entry.outputFile)).default;
+    return { ...await root.wrap(), file: entry.sourceFile };
+  }
+
+  /**
+   * Grab list of all available templates
+   */
+  async findAllTemplates(): Promise<MessageCompilationSource[]> {
+    const items = RootIndex.findSupport({
+      filter: (f) => this.ext.test(f)
+    });
+    const out: Promise<MessageCompilationSource>[] = [];
+    for (const item of items) {
+      out.push(this.loadTemplate(item.import));
+    }
+    return Promise.all(out);
+  }
+
+
+  /**
+   * Run through text and match/resolve resource urls, producing tokens
+   *
+   * @param text
+   * @param patterns
+   * @returns
+   */
+  async tokenizeResources(
+    text: string,
+    patterns: RegExp[]
+  ): Promise<{
+    text: string;
+    tokens: Map<string, string>;
+    finalize: (onToken: (token: string) => string) => string;
+  }> {
+    let id = 0;
+    const tokens = new Map();
+    for (const pattern of patterns) {
+      for (const { [0]: all, groups: { pre, src } = { pre: '', src: '' } } of text.matchAll(pattern)) {
+        if (src.includes('://')) { // No urls
+          continue;
+        }
+        await this.describe(src);
+        const token = `@@${id += 1}@@`;
+        tokens.set(token, src);
+        text = text.replace(all, `${pre}${token}`);
+      }
+    }
+    const finalize = (onToken: (token: string) => string): string => text.replace(/@@[^@]+@@/g, t => onToken(t));
+
+    return { text, tokens, finalize };
+  }
+}

package/support/bin/config.ts

@@ -0,0 +1,79 @@
+import fs from 'fs/promises';
+
+import { path } from '@travetto/manifest';
+import { YamlUtil } from '@travetto/yaml';
+
+interface ConfigType {
+  to: string;
+  from: string;
+  context?: Record<string, unknown>;
+  sender?: {
+    port?: number;
+    host?: string;
+    auth?: {
+      user?: string;
+      pass?: string;
+    };
+  };
+}
+
+/**
+ * Configuration utils
+ */
+export class $EditorConfig {
+
+  #configFile = path.resolve('resources/email/dev.yml');
+  #defaultConfig = {
+    to: 'my-email@gmail.com',
+    from: 'from-email@gmail.com',
+    context: {
+      key: 'value'
+    },
+    sender: {
+      port: 587,
+      host: 'smtp.ethereal.email',
+      auth: {
+        user: 'email@blah.com',
+        pass: 'password'
+      },
+    },
+  };
+
+  /**
+   *
+   */
+  async get(): Promise<ConfigType> {
+    try {
+      const content = await fs.readFile(this.#configFile, 'utf8');
+      return YamlUtil.parse<ConfigType>(content);
+    } catch {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      return {} as ConfigType;
+    }
+  }
+
+  async getContext(): Promise<Exclude<ConfigType['context'], undefined>> {
+    const conf = await this.get();
+    return conf.context ?? {};
+  }
+
+  async getSenderConfig(): Promise<Exclude<ConfigType['sender'], undefined>> {
+    const conf = await this.get();
+    return conf.sender ?? {};
+  }
+
+  getDefaultConfig(): string {
+    return YamlUtil.serialize(this.#defaultConfig);
+  }
+
+  async ensureConfig(): Promise<string> {
+    const file = this.#configFile;
+    if (!(await fs.stat(file).catch(() => { }))) {
+      await fs.mkdir(path.dirname(file), { recursive: true });
+      await fs.writeFile(file, this.getDefaultConfig(), { encoding: 'utf8' });
+    }
+    return file;
+  }
+}
+
+export const EditorConfig = new $EditorConfig();

package/support/bin/editor.ts

@@ -0,0 +1,108 @@
+import { EmailCompilationManager } from './manager';
+import { EditorSendService } from './send';
+import { EditorConfig } from './config';
+
+type InboundMessage =
+  { type: 'configure' } |
+  { type: 'redraw', file: string } |
+  { type: 'send', file: string, from?: string, to?: string };
+
+type OutboundMessage =
+  { type: 'configured', file: string } |
+  { type: 'sent', to: string, file: string, url?: string | false } |
+  { type: 'changed', file: string, content: Record<'html' | 'subject' | 'text', string> } |
+  { type: 'sent-failed', message: string, stack: Error['stack'], to: string, file: string } |
+  { type: 'changed-failed', message: string, stack: Error['stack'], file: string };
+
+/**
+ * Utils for interacting with editors
+ */
+export class EditorState {
+
+  #lastFile = '';
+  #sender: EditorSendService;
+  #template: EmailCompilationManager;
+
+  constructor(template: EmailCompilationManager) {
+    this.#template = template;
+    this.#sender = new EditorSendService();
+  }
+
+  async renderFile(file: string): Promise<void> {
+    file = this.#template.resources.isTemplateFile(file) ? file : this.#lastFile;
+    if (file) {
+      try {
+        const content = await this.#template.resolveCompiledTemplate(
+          file, await EditorConfig.getContext()
+        );
+        this.response({
+          type: 'changed',
+          file,
+          content
+        });
+      } catch (err) {
+        if (err && err instanceof Error) {
+          this.response({ type: 'changed-failed', message: err.message, stack: err.stack, file });
+        } else {
+          console.error(err);
+        }
+      }
+    }
+  }
+
+  response(response: OutboundMessage): void {
+    if (process.send) {
+      process.send(response);
+    }
+  }
+
+  async onConfigure(msg: InboundMessage & { type: 'configure' }): Promise<void> {
+    this.response({ type: 'configured', file: await EditorConfig.ensureConfig() });
+  }
+
+  async #onRedraw(msg: InboundMessage & { type: 'redraw' }): Promise<void> {
+    try {
+      await this.#template.compiler.compile(msg.file, true);
+      await this.renderFile(msg.file);
+    } catch (err) {
+      if (err && err instanceof Error) {
+        this.response({ type: 'changed-failed', message: err.message, stack: err.stack, file: msg.file });
+      } else {
+        console.error(err);
+      }
+    }
+  }
+
+  async onSend(msg: InboundMessage & { type: 'send' }): Promise<void> {
+    const cfg = await EditorConfig.get();
+    const to = msg.to || cfg.to;
+    const from = msg.from || cfg.from;
+    const key = this.#template.resources.buildOutputPath(msg.file, '');
+    try {
+      const url = await this.#sender.sendEmail(key, from, to, await EditorConfig.getContext());
+      this.response({ type: 'sent', to, file: msg.file, ...url });
+    } catch (err) {
+      if (err && err instanceof Error) {
+        this.response({ type: 'sent-failed', message: err.message, stack: err.stack, to, file: msg.file });
+      } else {
+        console.error(err);
+      }
+    }
+  }
+
+  /**
+   * Initialize context, and listeners
+   */
+  async init(): Promise<void> {
+    process.on('message', (msg: InboundMessage) => {
+      switch (msg.type) {
+        case 'configure': this.onConfigure(msg); break;
+        case 'redraw': this.#onRedraw(msg); break;
+        case 'send': this.onSend(msg); break;
+      }
+    });
+    for await (const f of this.#template.watchCompile()) {
+      await this.renderFile(f);
+    }
+  }
+}

package/support/bin/manager.ts

@@ -0,0 +1,111 @@
+import type { MailTemplateEngine, MessageCompiled } from '@travetto/email';
+import { TypedObject } from '@travetto/base';
+import { DependencyRegistry } from '@travetto/di';
+import { RootIndex, WatchEvent, WatchStream } from '@travetto/manifest';
+
+import { MailTemplateEngineTarget } from '@travetto/email/src/internal/types';
+import { DynamicFileLoader } from '@travetto/base/src/internal/file-loader';
+
+import type { EmailCompiler } from '../../src/compiler';
+import type { EmailCompilerResource } from '../../src/resource';
+
+const VALID_FILE = (file: string): boolean => /[.](scss|css|png|jpe?g|gif|ya?ml)$/.test(file) && !/[.]compiled[.]/.test(file);
+
+/**
+ *
+ */
+export class EmailCompilationManager {
+
+  static async createInstance(): Promise<EmailCompilationManager> {
+    const { EmailCompiler: Compiler } = await import('../../src/compiler.js');
+    const { EmailCompilerResource: Res } = await import('../../src/resource.js');
+
+    return new EmailCompilationManager(
+      await DependencyRegistry.getInstance<MailTemplateEngine>(MailTemplateEngineTarget),
+      new Compiler(new Res())
+    );
+  }
+
+  compiler: EmailCompiler;
+  engine: MailTemplateEngine;
+
+  constructor(engine: MailTemplateEngine, compiler: EmailCompiler) {
+    this.engine = engine;
+    this.compiler = compiler;
+  }
+
+  get resources(): EmailCompilerResource {
+    return this.compiler.resources;
+  }
+
+  /**
+   * Resolve template
+   */
+  async resolveTemplateParts(file: string): Promise<MessageCompiled> {
+    const files = this.resources.getOutputs(file);
+    const missing = await Promise.all(Object.values(files).map(x => this.resources.describe(x).catch(() => { })));
+
+    if (missing.some(x => x === undefined)) {
+      await this.compiler.compile(file, true);
+    }
+
+    const parts = await Promise.all(
+      TypedObject.entries(files).map(
+        ([key, subRel]) => this.resources.read(subRel)
+          .then(content => [key, content] as const)
+      )
+    );
+    return TypedObject.fromEntries<keyof MessageCompiled, string>(parts);
+  }
+
+  /**
+   * Render
+   * @param rel
+   */
+  async resolveCompiledTemplate(rel: string, context: Record<string, unknown>): Promise<MessageCompiled> {
+    const { html, text, subject } = await this.resolveTemplateParts(rel);
+
+    return {
+      html: await this.engine.template(html, context),
+      text: await this.engine.template(text, context),
+      subject: await this.engine.template(subject, context),
+    };
+  }
+
+  /**
+   * Watch compilation
+   */
+  async * watchCompile(): AsyncIterable<string> {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const stream = this.resources.watchFiles() as (
+      WatchStream & {
+        add(item: WatchEvent | WatchEvent[]): void;
+      }
+    );
+    DynamicFileLoader.onLoadEvent((ev) => {
+      const src = RootIndex.getEntry(ev.file);
+      if (src && this.resources.isTemplateFile(src.sourceFile)) {
+        stream.add({ ...ev, file: src.sourceFile });
+      }
+    });
+    for await (const { file, action } of stream) {
+      if (action === 'delete') {
+        continue;
+      }
+
+      try {
+        if (this.resources.isTemplateFile(file)) {
+          await this.compiler.compile(file, true);
+          yield file;
+        } else if (VALID_FILE(file)) {
+          await this.compiler.compileAll(true);
+          for (const el of await this.resources.findAllTemplates()) {
+            yield el.file!;
+          }
+        }
+      } catch (err) {
+        console.error(`Error in compiling ${file}`, err && err instanceof Error ? err.message : `${err}`);
+      }
+    }
+  }
+}

package/support/bin/send.ts

@@ -0,0 +1,73 @@
+import { MailService, SentMessage } from '@travetto/email';
+import { MailTransportTarget } from '@travetto/email/src/internal/types';
+import { DependencyRegistry } from '@travetto/di';
+
+import { EditorConfig } from './config';
+
+/**
+ * Util for sending emails
+ */
+export class EditorSendService {
+
+  #svc: MailService;
+
+  /**
+   * Get mail service
+   */
+  async getMailService(): Promise<MailService> {
+    if (!this.#svc) {
+      const senderConfig = await EditorConfig.getSenderConfig();
+
+      if (senderConfig?.host?.includes('ethereal.email')) {
+        const cls = class { };
+        const { NodemailerTransport } = await import('@travetto/email-nodemailer');
+        DependencyRegistry.registerFactory({
+          fn: () => new NodemailerTransport(senderConfig),
+          target: MailTransportTarget,
+          src: cls,
+          id: 'nodemailer',
+        });
+
+        DependencyRegistry.install(cls, { curr: cls, type: 'added' });
+      } else if (!DependencyRegistry.getCandidateTypes(MailTransportTarget).length) {
+        const errorMessage = `
+Please configure your email setup and/or credentials for testing. In the file \`email/dev.yml\`, you can specify \`sender\` configuration.
+Email sending will not work until the above is fixed. A sample configuration would look like:     
+
+${EditorConfig.getDefaultConfig()}`.trim();
+        console.error(errorMessage);
+        throw new Error(errorMessage);
+      }
+
+      this.#svc = await DependencyRegistry.getInstance(MailService);
+    }
+    return this.#svc;
+  }
+
+  /**
+   * Resolve template
+   */
+  async sendEmail(key: string, from: string, to: string, context: Record<string, unknown>): Promise<{
+    url?: string | false;
+  }> {
+    try {
+      console.log('Sending email', { to });
+      // Let the engine template
+      const svc = await this.getMailService();
+      if (!svc) {
+        throw new Error('Node mailer support is missing');
+      }
+
+      const info = await svc.send<{ host?: string } & SentMessage>({ to, from }, key, context);
+      console.log('Sent email', { to });
+
+      const senderConfig = await EditorConfig.getSenderConfig();
+      return senderConfig.host?.includes('ethereal.email') ? {
+        url: (await import('nodemailer')).getTestMessageUrl(info as any)
+      } : {};
+    } catch (err) {
+      console.warn('Failed to send email', { to, error: err });
+      throw err;
+    }
+  }
+}

package/support/cli.email_compile.ts

@@ -0,0 +1,38 @@
+import { RootRegistry } from '@travetto/registry';
+import { CliCommandShape, CliCommand, cliTpl } from '@travetto/cli';
+
+import { EmailCompilationManager } from './bin/manager';
+import { GlobalEnvConfig } from '@travetto/base';
+
+/**
+ * CLI Entry point for running the email server
+ */
+@CliCommand({ fields: ['module'] })
+export class EmailCompileCommand implements CliCommandShape {
+
+  /** Compile in watch mode */
+  watch?: boolean;
+
+  envInit(): GlobalEnvConfig {
+    return {
+      debug: false,
+      dynamic: this.watch
+    };
+  }
+
+  async main(): Promise<void> {
+    await RootRegistry.init();
+
+    const template = await EmailCompilationManager.createInstance();
+
+    // Let the engine template
+    const all = await template.compiler.compileAll(true);
+    console!.log(cliTpl`Successfully compiled ${{ param: `${all.length}` }} templates`);
+
+    if (this.watch) {
+      for await (const _ of template.watchCompile()) {
+        // Iterate until done
+      }
+    }
+  }
+}

package/support/cli.email_editor.ts

@@ -0,0 +1,29 @@
+import { GlobalEnvConfig, ShutdownManager } from '@travetto/base';
+import { CliCommand } from '@travetto/cli';
+import { RootIndex } from '@travetto/manifest';
+import { RootRegistry } from '@travetto/registry';
+
+import { EditorState } from './bin/editor';
+import { EmailCompilationManager } from './bin/manager';
+
+/** The email editor compilation service and output serving */
+@CliCommand()
+export class EmailEditorCommand {
+
+  envInit(): GlobalEnvConfig {
+    return {
+      envName: 'dev',
+      resourcePaths: [`${RootIndex.getModule('@travetto/email-compiler')!.sourcePath}/resources`]
+    };
+  }
+
+  async main(): Promise<void> {
+    await RootRegistry.init();
+    const editor = new EditorState(await EmailCompilationManager.createInstance());
+    await editor.init();
+    if (process.send) {
+      process.on('disconnect', () => ShutdownManager.execute());
+      process.send('ready');
+    }
+  }
+}

package/support/cli.email_test.ts

@@ -0,0 +1,28 @@
+import { path } from '@travetto/manifest';
+import { RootRegistry } from '@travetto/registry';
+import { CliCommandShape, CliCommand } from '@travetto/cli';
+import { GlobalEnvConfig } from '@travetto/base';
+
+import { EmailCompilationManager } from './bin/manager';
+import { EditorState } from './bin/editor';
+
+/**
+ * CLI Entry point for running the email server
+ */
+@CliCommand()
+export class EmailTestCommand implements CliCommandShape {
+
+  envInit(): GlobalEnvConfig {
+    return { envName: 'dev' };
+  }
+
+  async main(file: string, to: string): Promise<void> {
+    file = path.resolve(file);
+    await RootRegistry.init();
+    const template = await EmailCompilationManager.createInstance();
+    await template.compiler.compile(file, true);
+    const editor = new EditorState(await EmailCompilationManager.createInstance());
+    await editor.onConfigure({ type: 'configure' });
+    await editor.onSend({ type: 'send', file, to });
+  }
+}