@octanejs/email 0.0.1

package/src/markdown.ts

@@ -0,0 +1,194 @@
+import { marked, Renderer } from 'marked';
+import type { EmailStyle } from './types.ts';
+
+export type MarkdownStyles = Readonly<{
+	h1?: EmailStyle;
+	h2?: EmailStyle;
+	h3?: EmailStyle;
+	h4?: EmailStyle;
+	h5?: EmailStyle;
+	h6?: EmailStyle;
+	blockQuote?: EmailStyle;
+	bold?: EmailStyle;
+	italic?: EmailStyle;
+	link?: EmailStyle;
+	codeBlock?: EmailStyle;
+	codeInline?: EmailStyle;
+	p?: EmailStyle;
+	li?: EmailStyle;
+	ul?: EmailStyle;
+	ol?: EmailStyle;
+	image?: EmailStyle;
+	br?: EmailStyle;
+	hr?: EmailStyle;
+	table?: EmailStyle;
+	thead?: EmailStyle;
+	tbody?: EmailStyle;
+	tr?: EmailStyle;
+	th?: EmailStyle;
+	td?: EmailStyle;
+	strikethrough?: EmailStyle;
+}>;
+
+const heading = { fontWeight: '500', paddingTop: 20 };
+export const markdownStyles: MarkdownStyles = {
+	h1: { ...heading, fontSize: '2.5rem' },
+	h2: { ...heading, fontSize: '2rem' },
+	h3: { ...heading, fontSize: '1.75rem' },
+	h4: { ...heading, fontSize: '1.5rem' },
+	h5: { ...heading, fontSize: '1.25rem' },
+	h6: { ...heading, fontSize: '1rem' },
+	blockQuote: {
+		background: '#f9f9f9',
+		borderLeft: '10px solid #ccc',
+		margin: '1.5em 10px',
+		padding: '1em 10px',
+	},
+	bold: { fontWeight: 'bold' },
+	italic: { fontStyle: 'italic' },
+	link: { color: '#007bff', textDecoration: 'underline', backgroundColor: 'transparent' },
+	codeBlock: {
+		color: '#212529',
+		fontSize: '87.5%',
+		display: 'block',
+		background: ' #f8f8f8',
+		fontFamily: 'SFMono-Regular,Menlo,Monaco,Consolas,monospace',
+		paddingTop: 10,
+		paddingRight: 10,
+		paddingLeft: 10,
+		paddingBottom: 1,
+		marginBottom: 20,
+		wordWrap: 'break-word',
+	},
+	codeInline: {
+		color: '#212529',
+		fontSize: '87.5%',
+		display: 'inline',
+		background: ' #f8f8f8',
+		fontFamily: 'SFMono-Regular,Menlo,Monaco,Consolas,monospace',
+		wordWrap: 'break-word',
+	},
+};
+
+const pixelProperties = new Set([
+	'width',
+	'height',
+	'margin',
+	'marginTop',
+	'marginRight',
+	'marginBottom',
+	'marginLeft',
+	'padding',
+	'paddingTop',
+	'paddingRight',
+	'paddingBottom',
+	'paddingLeft',
+	'borderWidth',
+	'borderTopWidth',
+	'borderRightWidth',
+	'borderBottomWidth',
+	'borderLeftWidth',
+	'outlineWidth',
+	'top',
+	'right',
+	'bottom',
+	'left',
+	'fontSize',
+	'letterSpacing',
+	'wordSpacing',
+	'maxWidth',
+	'minWidth',
+	'maxHeight',
+	'minHeight',
+	'borderRadius',
+	'borderTopLeftRadius',
+	'borderTopRightRadius',
+	'borderBottomLeftRadius',
+	'borderBottomRightRadius',
+	'textIndent',
+	'gridColumnGap',
+	'gridRowGap',
+	'gridGap',
+	'translateX',
+	'translateY',
+]);
+
+function inlineStyle(style: EmailStyle | undefined): string {
+	if (!style) return '';
+	return Object.entries(style)
+		.map(([property, value]) => {
+			const name = property.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+			const serialized =
+				typeof value === 'number' && pixelProperties.has(property)
+					? `${value}px`
+					: String(value).replaceAll('"', '&quot;');
+			return `${name}:${serialized}`;
+		})
+		.join(';');
+}
+
+const styleAttribute = (style: EmailStyle | undefined) => {
+	const css = inlineStyle(style);
+	return css ? ` style="${css}"` : '';
+};
+const styled = (tag: string, style: EmailStyle | undefined) => `${tag}${styleAttribute(style)}`;
+const escapeAttribute = (value: string) => escapeHtml(value);
+
+function escapeHtml(value: string): string {
+	return value
+		.replaceAll('&', '&amp;')
+		.replaceAll('<', '&lt;')
+		.replaceAll('>', '&gt;')
+		.replaceAll('"', '&quot;')
+		.replaceAll("'", '&#39;');
+}
+
+export function renderMarkdown(source: string, customStyles?: MarkdownStyles): string {
+	const finalStyles = { ...markdownStyles, ...customStyles };
+	const renderer = new Renderer();
+	renderer.blockquote = ({ tokens }) =>
+		`<${styled('blockquote', finalStyles.blockQuote)}>\n${renderer.parser.parse(tokens)}</blockquote>\n`;
+	renderer.br = () => `<${styled('br', finalStyles.br)} />`;
+	renderer.code = ({ text }) =>
+		`<${styled('pre', finalStyles.codeBlock)}><code>${escapeHtml(text.replace(/\n$/, ''))}\n</code></pre>\n`;
+	renderer.codespan = ({ text }) =>
+		`<${styled('code', finalStyles.codeInline)}>${escapeHtml(text)}</code>`;
+	renderer.del = ({ tokens }) =>
+		`<${styled('del', finalStyles.strikethrough)}>${renderer.parser.parseInline(tokens)}</del>`;
+	renderer.em = ({ tokens }) =>
+		`<${styled('em', finalStyles.italic)}>${renderer.parser.parseInline(tokens)}</em>`;
+	renderer.heading = ({ tokens, depth }) =>
+		`<${styled(`h${depth}`, finalStyles[`h${depth}` as keyof MarkdownStyles])}>${renderer.parser.parseInline(tokens)}</h${depth}>`;
+	renderer.hr = () => `<${styled('hr', finalStyles.hr)} />\n`;
+	renderer.image = ({ href, text, title }) =>
+		`<img src="${escapeAttribute(href)}" alt="${escapeAttribute(text)}"${title ? ` title="${escapeAttribute(title)}"` : ''}${styleAttribute(finalStyles.image)}>`;
+	renderer.link = ({ href, title, tokens }) =>
+		`<a href="${escapeAttribute(href)}" target="_blank"${title ? ` title="${escapeAttribute(title)}"` : ''}${styleAttribute(finalStyles.link)}>${renderer.parser.parseInline(tokens)}</a>`;
+	renderer.listitem = ({ tokens, loose }) =>
+		`<${styled('li', finalStyles.li)}>${loose || tokens.some((token) => token.type === 'list') ? renderer.parser.parse(tokens) : renderer.parser.parseInline(tokens)}</li>\n`;
+	renderer.list = ({ items, ordered, start }) => {
+		const tag = ordered ? 'ol' : 'ul';
+		return `<${styled(tag + (ordered && start !== 1 ? ` start="${start}"` : ''), finalStyles[tag as 'ol' | 'ul'])}>\n${items.map((item) => renderer.listitem(item)).join('')}</${tag}>\n`;
+	};
+	renderer.paragraph = ({ tokens }) =>
+		`<${styled('p', finalStyles.p)}>${renderer.parser.parseInline(tokens)}</p>\n`;
+	renderer.strong = ({ tokens }) =>
+		`<${styled('strong', finalStyles.bold)}>${renderer.parser.parseInline(tokens)}</strong>`;
+	renderer.table = ({ header, rows }) => {
+		const headRow = renderer.tablerow({
+			text: header.map((cell) => renderer.tablecell(cell)).join(''),
+		});
+		const bodyRows = rows
+			.map((row) =>
+				renderer.tablerow({ text: row.map((cell) => renderer.tablecell(cell)).join('') }),
+			)
+			.join('');
+		return `<${styled('table role="presentation"', finalStyles.table)}>\n<${styled('thead', finalStyles.thead)}>\n${headRow}</thead>\n<${styled('tbody', finalStyles.tbody)}>${bodyRows}</tbody></table>\n`;
+	};
+	renderer.tablecell = ({ tokens, align, header }) => {
+		const tag = header ? 'th' : 'td';
+		return `<${styled(`${tag}${align ? ` align="${align}"` : ''}`, finalStyles[tag])}>${renderer.parser.parseInline(tokens)}</${tag}>\n`;
+	};
+	renderer.tablerow = ({ text }) => `<${styled('tr', finalStyles.tr)}>\n${text}</tr>\n`;
+	return marked.parse(source, { renderer, async: false });
+}

package/src/render.ts

@@ -0,0 +1,49 @@
+import { renderToStaticMarkup } from 'octane/server';
+import { renderWithTailwind } from './tailwind/index.ts';
+
+export interface RenderOptions {
+	pretty?: boolean;
+}
+
+export type EmailComponent<Props> = (props: Props) => unknown;
+
+const DOCTYPE =
+	'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
+
+const HEAD_BOUNDARY = /<body[^>]*data-octane-email-head=["']head["'][^>]*>([\s\S]*?)<\/body>/gi;
+
+/** Render an Octane email component to non-hydratable email HTML. */
+export async function render<Props>(
+	component: EmailComponent<Props>,
+	props?: Props,
+	options?: RenderOptions,
+): Promise<string> {
+	const document = await renderWithTailwind(() => {
+		const { html, css } = renderToStaticMarkup(component, props);
+		const cleanHtml = html.replace(/<!DOCTYPE.*?>/i, '');
+		let authoredHead = '';
+		const bodyHtml = cleanHtml.replace(HEAD_BOUNDARY, (_boundary, content: string) => {
+			authoredHead += content;
+			return '';
+		});
+		const htmlStart = bodyHtml.indexOf('<html');
+		let documentHtml = bodyHtml;
+		if (htmlStart >= 0) {
+			const hoistedHead = bodyHtml.slice(0, htmlStart);
+			const root = bodyHtml.slice(htmlStart);
+			const head = `${hoistedHead}${authoredHead}${css}`;
+			if (head.length > 0) {
+				const openingEnd = root.indexOf('>') + 1;
+				documentHtml = `${root.slice(0, openingEnd)}<head>${head}</head>${root.slice(openingEnd)}`;
+			}
+		} else if (authoredHead.length > 0 || css.length > 0) {
+			documentHtml = bodyHtml.replace('<head>', `<head>${authoredHead}${css}`);
+		}
+		return `${DOCTYPE}${documentHtml}`;
+	});
+	return options?.pretty ? formatEmailHtml(document) : document;
+}
+
+export function formatEmailHtml(html: string): string {
+	return html.replace(/></g, '>\n<');
+}

package/src/rich-content.tsrx

@@ -0,0 +1,208 @@
+import { isChildrenBlock, type OctaneNode } from 'octane';
+import Prism from 'prismjs';
+import loadLanguages from 'prismjs/components/index.js';
+import { renderMarkdown, type MarkdownStyles } from './markdown.ts';
+import type { EmailElementProps, EmailStyle } from './types.ts';
+
+loadLanguages();
+
+function resolveTextChild(child: unknown): string {
+	let value = child;
+	if (typeof value === 'function' && !isChildrenBlock(value)) {
+		value = (value as () => unknown)();
+	}
+	if (typeof value === 'string') return value;
+	if (isChildrenBlock(child)) {
+		throw new Error('Markdown children must be a string prop: use <Markdown children={"…"} />. ' +
+			'JSX children compile to a children block, which is not a string.');
+	}
+	throw new Error('Markdown children must resolve to a string');
+}
+
+export type MarkdownProps =
+	Readonly<Omit<EmailElementProps<HTMLDivElement>, 'children' | 'style'>> & Readonly<{
+		children: string;
+		markdownCustomStyles?: MarkdownStyles;
+		markdownContainerStyles?: EmailStyle;
+	}>;
+
+export function Markdown(props: MarkdownProps) @{
+	const {
+		children: _children,
+		markdownContainerStyles,
+		markdownCustomStyles,
+		ref,
+		...rest
+	} = props;
+	<div
+		{...rest}
+		{...(ref === undefined ? {} : { ref })}
+		data-id="react-email-markdown"
+		style={markdownContainerStyles}
+		dangerouslySetInnerHTML={{
+			__html: renderMarkdown(resolveTextChild(props.children), markdownCustomStyles),
+		}}
+	/>
+}
+
+export type PrismLanguage = keyof typeof Prism.languages;
+export type Theme = Record<string, EmailStyle | undefined> & { base?: EmailStyle };
+
+export interface CodeBlockProps extends EmailElementProps<HTMLPreElement> {
+	lineNumbers?: boolean;
+	fontFamily?: string;
+	theme: Theme;
+	language: PrismLanguage;
+	code: string;
+}
+
+type Token = string | Prism.Token;
+
+function tokenStyle(token: Prism.Token, theme: Theme): EmailStyle {
+	let style = { ...theme[token.type] };
+	const aliases = Array.isArray(token.alias) ? token.alias : [token.alias];
+	for (const alias of aliases) if (alias) style = { ...style, ...theme[alias] };
+	return style;
+}
+
+function CodeToken({
+	token,
+	theme,
+	inheritedStyle,
+}: {
+	token: Token;
+	theme: Theme;
+	inheritedStyle?: EmailStyle;
+}): OctaneNode {
+	if (typeof token === 'string') return <span style={inheritedStyle}>{token.replaceAll(
+		' ',
+		' ‍​',
+	)}</span>;
+	const style = { ...inheritedStyle, ...tokenStyle(token, theme) };
+	if (Array.isArray(token.content)) return <>
+		@for (const child of token.content; index childIndex; key childIndex) {
+			<CodeToken token={child} theme={theme} inheritedStyle={style} />
+		}
+	</>;
+	return <span style={style}>
+		{typeof token.content === 'string'
+			? token.content
+			: <CodeToken token={token.content} theme={theme} inheritedStyle={style} />}
+	</span>;
+}
+
+function CodeLine({
+	tokens,
+	lineNumber,
+	lineNumbers,
+	fontFamily,
+	theme,
+}: {
+	tokens: Token[];
+	lineNumber: number;
+	lineNumbers: boolean;
+	fontFamily?: string;
+	theme: Theme;
+}) @{
+	<>
+		@if (lineNumbers) {
+			<span
+				style={{ width: '2em', height: '1em', display: 'inline-block', fontFamily }}
+			>{lineNumber}</span>
+		}
+		@for (const [tokenIndex, token] of tokens.entries(); key tokenIndex) {
+			<CodeToken token={token} theme={theme} inheritedStyle={{ fontFamily }} />
+		}
+		<br />
+	</>
+}
+
+export function CodeBlock({
+	code,
+	fontFamily,
+	lineNumbers = false,
+	theme,
+	language,
+	style,
+	ref,
+	...props
+}: CodeBlockProps) @{
+	const grammar = Prism.languages[language];
+	if (
+		grammar === undefined
+	) throw new Error(`CodeBlock: There is no language defined on Prism called ${String(language)}`);
+	const lines = code.split(/\r\n|\r|\n/gm).map((line) => Prism.tokenize(line, grammar));
+	<pre
+		{...props}
+		{...(ref === undefined ? {} : { ref })}
+		style={{ ...theme.base, width: '100%', ...style }}
+	>
+		<code>
+			@for (const [lineIndex, tokens] of lines.entries(); key lineIndex) {
+				<CodeLine
+					tokens={tokens}
+					lineNumber={lineIndex + 1}
+					lineNumbers={lineNumbers}
+					fontFamily={fontFamily}
+					theme={theme}
+				/>
+			}
+		</code>
+	</pre>
+}
+
+export const vscDarkPlus: Theme = {
+	base: {
+		color: '#d4d4d4',
+		fontSize: '13px',
+		textShadow: 'none',
+		fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+		direction: 'ltr',
+		textAlign: 'left',
+		whiteSpace: 'pre',
+		wordSpacing: 'normal',
+		wordBreak: 'normal',
+		lineHeight: '1.5',
+		tabSize: '4',
+		hyphens: 'none',
+		padding: '1em',
+		margin: '.5em 0',
+		overflow: 'auto',
+		background: '#1e1e1e',
+	},
+	comment: { color: '#6a9955' },
+	keyword: { color: '#569cd6' },
+	boolean: { color: '#569cd6' },
+	number: { color: '#b5cea8' },
+	string: { color: '#ce9178' },
+	operator: { color: '#d4d4d4' },
+	punctuation: { color: '#d4d4d4' },
+	function: { color: '#dcdcaa' },
+	'class-name': { color: '#4ec9b0' },
+};
+
+export const xonokai: Theme = {
+	base: {
+		tabSize: '2',
+		hyphens: 'none',
+		whiteSpace: 'pre-wrap',
+		wordWrap: 'normal',
+		fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+		fontSize: '14px',
+		color: '#76d9e6',
+		textShadow: 'none',
+		background: '#2a2a2a',
+		padding: '15px',
+		borderRadius: '4px',
+		border: '1px solid #e1e1e8',
+		overflow: 'auto',
+		position: 'relative',
+	},
+	comment: { color: '#6f705e' },
+	operator: { color: '#a77afe' },
+	boolean: { color: '#a77afe' },
+	number: { color: '#a77afe' },
+	string: { color: '#e6d06c' },
+	keyword: { color: '#ef3b7d' },
+	punctuation: { color: '#bebec5' },
+};

package/src/tailwind/context.ts

@@ -0,0 +1,33 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+import type { TailwindConfig } from './preset.ts';
+
+export interface TailwindBoundaryOptions {
+	config?: TailwindConfig;
+	theme?: string;
+	utility?: string;
+}
+
+interface TailwindCollection {
+	nextId: number;
+	boundaries: Map<string, TailwindBoundaryOptions>;
+}
+
+const collections = new AsyncLocalStorage<TailwindCollection>();
+
+export function registerTailwindBoundary(options: TailwindBoundaryOptions): string {
+	const collection = collections.getStore();
+	if (!collection) {
+		throw new Error('Tailwind must be rendered through the react-email render() pipeline.');
+	}
+	const id = `tw-${collection.nextId++}`;
+	collection.boundaries.set(id, options);
+	return id;
+}
+
+export async function collectTailwindBoundaries<T>(
+	render: () => T | Promise<T>,
+): Promise<{ value: T; boundaries: Map<string, TailwindBoundaryOptions> }> {
+	const collection: TailwindCollection = { nextId: 0, boundaries: new Map() };
+	const value = await collections.run(collection, render);
+	return { value, boundaries: collection.boundaries };
+}

package/src/tailwind/index.ts

@@ -0,0 +1,3 @@
+export { Tailwind, type TailwindProps } from './tailwind.tsrx';
+export { pixelBasedPreset, type TailwindConfig } from './preset.ts';
+export { renderWithTailwind, transformTailwindHtml } from './transform.ts';

package/src/tailwind/preset.ts

@@ -0,0 +1,62 @@
+import type { Config } from 'tailwindcss';
+
+export type TailwindConfig = Omit<Config, 'content'>;
+
+export const pixelBasedPreset: TailwindConfig = {
+	theme: {
+		extend: {
+			fontSize: {
+				xs: ['12px', { lineHeight: '16px' }],
+				sm: ['14px', { lineHeight: '20px' }],
+				base: ['16px', { lineHeight: '24px' }],
+				lg: ['18px', { lineHeight: '28px' }],
+				xl: ['20px', { lineHeight: '28px' }],
+				'2xl': ['24px', { lineHeight: '32px' }],
+				'3xl': ['30px', { lineHeight: '36px' }],
+				'4xl': ['36px', { lineHeight: '36px' }],
+				'5xl': ['48px', { lineHeight: '1' }],
+				'6xl': ['60px', { lineHeight: '1' }],
+				'7xl': ['72px', { lineHeight: '1' }],
+				'8xl': ['96px', { lineHeight: '1' }],
+				'9xl': ['144px', { lineHeight: '1' }],
+			},
+			spacing: {
+				px: '1px',
+				0: '0',
+				0.5: '2px',
+				1: '4px',
+				1.5: '6px',
+				2: '8px',
+				2.5: '10px',
+				3: '12px',
+				3.5: '14px',
+				4: '16px',
+				5: '20px',
+				6: '24px',
+				7: '28px',
+				8: '32px',
+				9: '36px',
+				10: '40px',
+				11: '44px',
+				12: '48px',
+				14: '56px',
+				16: '64px',
+				20: '80px',
+				24: '96px',
+				28: '112px',
+				32: '128px',
+				36: '144px',
+				40: '160px',
+				44: '176px',
+				48: '192px',
+				52: '208px',
+				56: '224px',
+				60: '240px',
+				64: '256px',
+				72: '288px',
+				80: '320px',
+				96: '384px',
+			},
+		},
+	},
+};

package/src/tailwind/tailwind.tsrx

@@ -0,0 +1,15 @@
+import type { OctaneNode } from 'octane';
+import { registerTailwindBoundary, type TailwindBoundaryOptions } from './context.ts';
+
+export interface TailwindProps extends TailwindBoundaryOptions {
+	children: OctaneNode;
+}
+
+export function Tailwind({ children, config, theme, utility }: TailwindProps) @{
+	const id = registerTailwindBoundary({ config, theme, utility });
+	<>
+		<template data-octane-email-tailwind-start={id} />
+		{children}
+		<template data-octane-email-tailwind-end={id} />
+	</>
+}