@octanejs/email 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/email",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -42,14 +42,14 @@
     "tailwindcss": "4.3.3"
   },
   "peerDependencies": {
-    "octane": "^0.10.0"
+    "octane": "^0.11.0"
   },
   "devDependencies": {
     "@react-email/components": "1.0.12",
     "@react-email/render": "2.0.6",
-    "@tsrx/react": "^0.3.7",
+    "@tsrx/react": "^0.4.5",
     "esbuild": "^0.28.1",
-    "octane": "0.10.2",
+    "octane": "0.11.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "vitest": "^4.1.10"

package/src/components.tsrx

@@ -25,16 +25,14 @@ export function Body({ children, style = {}, ref, ...props }: BodyProps) @{
 		'paddingBottom',
 		'paddingLeft',
 	]) {
-		if ((style as Record<string, unknown>)[key] !== undefined) (reset as Record<
-			string,
-			unknown
-		>)[key] = 0;
+		if ((style as Record<string, unknown>)[key] !== undefined)
+			(reset as Record<string, unknown>)[key] = 0;
 	}
 	<body
 		{...props}
 		{...withRef(ref)}
-		dir={props.dir as string | undefined ?? 'ltr'}
-		lang={props.lang as string | undefined ?? 'en'}
+		dir={(props.dir as string | undefined) ?? 'ltr'}
+		lang={(props.lang as string | undefined) ?? 'en'}
 		style={reset}
 	>
 		<table
@@ -48,10 +46,12 @@ export function Body({ children, style = {}, ref, ...props }: BodyProps) @{
 			<tbody>
 				<tr>
 					<td
-						dir={props.dir as string | undefined ?? 'ltr'}
-						lang={props.lang as string | undefined ?? 'en'}
+						dir={(props.dir as string | undefined) ?? 'ltr'}
+						lang={(props.lang as string | undefined) ?? 'en'}
 						style={style}
-					>{children}</td>
+					>
+						{children}
+					</td>
 				</tr>
 			</tbody>
 		</table>
@@ -60,7 +60,9 @@ export function Body({ children, style = {}, ref, ...props }: BodyProps) @{
 
 export type HtmlProps = EmailElementProps<HTMLHtmlElement> & { lang?: string; dir?: string };
 export function Html({ children, lang = 'en', dir = 'ltr', ref, ...props }: HtmlProps) @{
-	<html {...props} {...withRef(ref)} dir={dir} lang={lang}>{children}</html>
+	<html {...props} {...withRef(ref)} dir={dir} lang={lang}>
+		{children}
+	</html>
 }
 
 export type HeadProps = EmailElementProps<HTMLHeadElement>;
@@ -138,7 +140,9 @@ export function Row({ children, style, ref, ...props }: RowProps) @{
 
 export type ColumnProps = EmailElementProps<HTMLTableCellElement>;
 export function Column({ children, style, ref, ...props }: ColumnProps) @{
-	<td {...props} {...withRef(ref)} data-id="__react-email-column" style={style}>{children}</td>
+	<td {...props} {...withRef(ref)} data-id="__react-email-column" style={style}>
+		{children}
+	</td>
 }
 
 export type TextProps = EmailElementProps<HTMLParagraphElement>;
@@ -161,16 +165,17 @@ export function Link({ children, target = '_blank', style, ref, ...props }: Link
 		{...withRef(ref)}
 		style={{ color: '#067df7', textDecorationLine: 'none', ...style }}
 		target={target}
-	>{children}</a>
+	>
+		{children}
+	</a>
 }
 
-export type ImgProps =
-	EmailElementProps<HTMLImageElement> & {
-		alt?: string;
-		src?: string;
-		width?: string | number;
-		height?: string | number;
-	};
+export type ImgProps = EmailElementProps<HTMLImageElement> & {
+	alt?: string;
+	src?: string;
+	width?: string | number;
+	height?: string | number;
+};
 export function Img({ alt = '', src, width, height, style, ref, ...props }: ImgProps) @{
 	<img
 		{...props}
@@ -198,17 +203,16 @@ export function Hr({ style, ref, ...props }: HrProps) @{
 	/>
 }
 
-export type HeadingProps =
-	EmailElementProps<HTMLHeadingElement> & {
-		as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-		m?: string | number;
-		mx?: string | number;
-		my?: string | number;
-		mt?: string | number;
-		mr?: string | number;
-		mb?: string | number;
-		ml?: string | number;
-	};
+export type HeadingProps = EmailElementProps<HTMLHeadingElement> & {
+	as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+	m?: string | number;
+	mx?: string | number;
+	my?: string | number;
+	mt?: string | number;
+	mr?: string | number;
+	mb?: string | number;
+	ml?: string | number;
+};
 export function Heading({
 	as: Tag = 'h1',
 	children,
@@ -227,7 +231,9 @@ export function Heading({
 		{...props}
 		{...withRef(ref)}
 		style={{ ...withMargins({ m, mx, my, mt, mr, mb, ml }), ...style }}
-	>{children}</Tag>
+	>
+		{children}
+	</Tag>
 }
 
 export interface FontProps {
@@ -259,8 +265,8 @@ export function Font({
 
 const PREVIEW_MAX_LENGTH = 200;
 const WHITE_SPACE = ' ‌​‍‎‏';
-export type PreviewProps =
-	Readonly<Omit<EmailElementProps<HTMLDivElement>, 'children'>> & Readonly<{
+export type PreviewProps = Readonly<Omit<EmailElementProps<HTMLDivElement>, 'children'>> &
+	Readonly<{
 		text?: string;
 		children?: string | string[];
 		useTitleTag?: boolean;
@@ -272,12 +278,11 @@ export function Preview({
 	ref,
 	...props
 }: PreviewProps) @{
-	const childText =
-		Array.isArray(children)
-			? children.join('')
-			: typeof children === 'string'
-				? children
-				: '';
+	const childText = Array.isArray(children)
+		? children.join('')
+		: typeof children === 'string'
+			? children
+			: '';
 	const text = (explicitText ?? childText).substring(0, PREVIEW_MAX_LENGTH);
 	<>
 		@if (useTitleTag) {
@@ -316,7 +321,9 @@ export function CodeInline({ children, style, ref, ...props }: CodeInlineProps)
 			borderRadius: '4px',
 			...style,
 		}}
-	>{children}</code>
+	>
+		{children}
+	</code>
 }
 
 export type ButtonProps = EmailElementProps<HTMLAnchorElement> & { href?: string; target?: string };

package/src/rich-content.tsrx

@@ -13,14 +13,18 @@ function resolveTextChild(child: unknown): string {
 	}
 	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 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<{
+export type MarkdownProps = Readonly<
+	Omit<EmailElementProps<HTMLDivElement>, 'children' | 'style'>
+> &
+	Readonly<{
 		children: string;
 		markdownCustomStyles?: MarkdownStyles;
 		markdownContainerStyles?: EmailStyle;
@@ -74,21 +78,26 @@ function CodeToken({
 	theme: Theme;
 	inheritedStyle?: EmailStyle;
 }): OctaneNode {
-	if (typeof token === 'string') return <span style={inheritedStyle}>{token.replaceAll(
-		' ',
-		' ‍​',
-	)}</span>;
+	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>;
+	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({
@@ -106,9 +115,9 @@ function CodeLine({
 }) @{
 	<>
 		@if (lineNumbers) {
-			<span
-				style={{ width: '2em', height: '1em', display: 'inline-block', fontFamily }}
-			>{lineNumber}</span>
+			<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 }} />
@@ -128,9 +137,8 @@ export function CodeBlock({
 	...props
 }: CodeBlockProps) @{
 	const grammar = Prism.languages[language];
-	if (
-		grammar === undefined
-	) throw new Error(`CodeBlock: There is no language defined on Prism called ${String(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}