Compile

Compile jsx-email templates into a bundle

Install

Install the package from your command line

pnpm

pnpm add jsx-email

bun

bun add jsx-email

npm

npm add jsx-email

yarn

yarn add jsx-email

Usage

import { readFile } from 'node:fs/promises;';
import { resolve } from 'node:path';

import { compile } from 'jsx-email/compile';

const templatePath = resolve(__dirname, './emails/Batman');
const outputDir = resolve(__dirname, '.compiled');

const compiledFiles = await compile({ files: [templatePath], hashFiles: false, outDir });

Tip

Once compiled into a bundle, the file can be imported and passed to render such like:

import { Template } from './.compiled/batman.js';

import { render } from 'jsx-email';

const html = render(<Template />);

Note that whether or not to use a file extension in the import depends on your project’s settings. When using TypeScript you may have to adjust types to avoid errors, using this method.

Options

The compile method accepts these options:

export interface Options {
  disableDefaultStyle?: boolean;
  inlineCss?: boolean;
  minify?: boolean;
  plainText?: boolean | PlainTextOptions;
  pretty?: boolean;
}

files

files: string[];

An array of absolute paths for JSX/TSX template files to compile

hashFiles (optional)

hashFiles?: boolean;

Default: true. If true, adds the build hash to compiled file names. Set this to false if hashing and unique output filenames aren’t needed.

outDir

outDir: string;

An absolute path to output the compiled file(s)

writeMeta (optional)

writeMeta?: boolean;

If true, writes the ESBuild metadata for the compiled file(s)