react-email 4.0.0-alpha.5 → 4.0.0-alpha.7

package/src/utils/caniemail/tailwind/setup-tailwind-context.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'tailwindcss/lib/lib/setupContextUtils';
+import resolveConfig from 'tailwindcss/resolveConfig';
+import type { TailwindConfig } from './get-tailwind-config';
+
+export const setupTailwindContext = (config: TailwindConfig) => {
+  return createContext(
+    resolveConfig({
+      ...config,
+      content: [],
+      corePlugins: {
+        preflight: false,
+      },
+    }),
+  );
+};

package/src/utils/get-email-component.ts

@@ -1,16 +1,22 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import path from 'node:path';
-import vm from 'node:vm';
 import type { render } from '@react-email/render';
 import { type BuildFailure, type OutputFile, build } from 'esbuild';
 import type React from 'react';
 import type { RawSourceMap } from 'source-map-js';
+import { z } from 'zod';
 import { renderingUtilitiesExporter } from './esbuild/renderring-utilities-exporter';
 import { improveErrorWithSourceMap } from './improve-error-with-sourcemap';
-import { staticNodeModulesForVM } from './static-node-modules-for-vm';
+import { isErr } from './result';
+import { runBundledCode } from './run-bundled-code';
 import type { EmailTemplate as EmailComponent } from './types/email-template';
 import type { ErrorObject } from './types/error-object';
 
+const EmailComponentModule = z.object({
+  default: z.any(),
+  render: z.function(),
+  reactEmailCreateReactElement: z.function(),
+});
+
 export const getEmailComponent = async (
   emailPath: string,
 ): Promise<
@@ -61,79 +67,38 @@ export const getEmailComponent = async (
   const bundledEmailFile = outputFiles[1]!;
   const builtEmailCode = bundledEmailFile.text;
 
-  const fakeContext = {
-    ...global,
-    console,
-    Buffer,
-    AbortSignal,
-    Event,
-    EventTarget,
-    TextDecoder,
-    Request,
-    Response,
-    TextDecoderStream,
-    TextEncoder,
-    TextEncoderStream,
-    ReadableStream,
-    URL,
-    URLSearchParams,
-    Headers,
-    module: {
-      exports: {
-        default: undefined as unknown,
-        render: undefined as unknown,
-        reactEmailCreateReactElement: undefined as unknown,
-      },
-    },
-    __filename: emailPath,
-    __dirname: path.dirname(emailPath),
-    require: (specifiedModule: string) => {
-      let m = specifiedModule;
-      if (specifiedModule.startsWith('node:')) {
-        m = m.split(':')[1]!;
-      }
-
-      if (m in staticNodeModulesForVM) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return staticNodeModulesForVM[m];
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-useless-template-literals
-      return require(`${specifiedModule}`) as unknown;
-      // this stupid string templating was necessary to not have
-      // webpack warnings like:
-      //
-      // Import trace for requested module:
-      // ./src/utils/get-email-component.tsx
-      // ./src/app/page.tsx
-      //  ⚠ ./src/utils/get-email-component.tsx
-      // Critical dependency: the request of a dependency is an expression
-    },
-    process,
-  };
   const sourceMapToEmail = JSON.parse(sourceMapFile.text) as RawSourceMap;
   // because it will have a path like <tsconfigLocation>/stdout/email.js.map
   sourceMapToEmail.sourceRoot = path.resolve(sourceMapFile.path, '../..');
   sourceMapToEmail.sources = sourceMapToEmail.sources.map((source) =>
     path.resolve(sourceMapFile.path, '..', source),
   );
-  try {
-    vm.runInNewContext(builtEmailCode, fakeContext, { filename: emailPath });
-  } catch (exception) {
-    const error = exception as Error;
 
-    error.stack &&= error.stack.split('at Script.runInContext (node:vm')[0];
+  const runningResult = runBundledCode(builtEmailCode, emailPath);
 
-    return {
-      error: improveErrorWithSourceMap(error, emailPath, sourceMapToEmail),
-    };
+  if (isErr(runningResult)) {
+    const { error } = runningResult;
+    if (error instanceof Error) {
+      error.stack &&= error.stack.split('at Script.runInContext (node:vm')[0];
+
+      return {
+        error: improveErrorWithSourceMap(error, emailPath, sourceMapToEmail),
+      };
+    }
+
+    throw error;
   }
 
-  if (fakeContext.module.exports.default === undefined) {
+  const parseResult = EmailComponentModule.safeParse(runningResult.value);
+
+  if (parseResult.error) {
     return {
       error: improveErrorWithSourceMap(
         new Error(
-          `The email component at ${emailPath} does not contain a default export`,
+          `The email component at ${emailPath} does not contain the expected exports`,
+          {
+            cause: parseResult.error,
+          },
         ),
         emailPath,
         sourceMapToEmail,
@@ -141,11 +106,13 @@ export const getEmailComponent = async (
     };
   }
 
+  const { data: componentModule } = parseResult;
+
   return {
-    emailComponent: fakeContext.module.exports.default as EmailComponent,
-    render: fakeContext.module.exports.render as typeof render,
-    createElement: fakeContext.module.exports
-      .reactEmailCreateReactElement as typeof React.createElement,
+    emailComponent: componentModule.default as EmailComponent,
+    render: componentModule.render as typeof render,
+    createElement:
+      componentModule.reactEmailCreateReactElement as typeof React.createElement,
 
     sourceMapToOriginalFile: sourceMapToEmail,
   };

package/src/utils/get-line-and-column-from-offset.spec.ts

@@ -0,0 +1,11 @@
+import { getLineAndColumnFromOffset } from './get-line-and-column-from-offset';
+
+test('getLineAndColumnFromOffset()', () => {
+  const content = `export default function MyEmail() {
+  return <div className="testing classes to make sure this is not removed" id="my-div" aria-label="my beautiful div">
+    inside the div, should also stay unchanged
+  </div>;
+}`;
+  const offset = content.indexOf('className');
+  expect(getLineAndColumnFromOffset(offset, content)).toEqual([2, 15]);
+});

package/src/utils/get-line-and-column-from-offset.ts

@@ -0,0 +1,11 @@
+export const getLineAndColumnFromOffset = (
+  offset: number,
+  content: string,
+): [line: number, column: number] => {
+  const lineBreaks = [...content.slice(0, offset).matchAll(/\n|\r|\r\n/g)];
+
+  const line = lineBreaks.length + 1;
+  const column = offset - (lineBreaks[lineBreaks.length - 1]?.index ?? 0);
+
+  return [line, column];
+};

package/src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './cn';
 export * from './copy-text-to-clipboard';
 export * from './language-map';
 export * from './unreachable';
+export * from './sanitize';

package/src/utils/linting.ts

@@ -0,0 +1,60 @@
+import { checkImages } from '../actions/email-validation/check-images';
+import { checkLinks } from '../actions/email-validation/check-links';
+import type { LintingRow } from '../components/toolbar/linter';
+import { loadStream } from './load-stream';
+
+export interface LintingSource<T> {
+  getStream(): Promise<ReadableStream<T>>;
+  mapValue(value: NoInfer<T>): LintingRow | undefined;
+}
+
+function createSource<T>(source: LintingSource<T>): LintingSource<T> {
+  return source;
+}
+
+export function getLintingSources(
+  markup: string,
+
+  urlBase: string,
+): LintingSource<unknown>[] {
+  return [
+    createSource({
+      getStream() {
+        return checkImages(markup, urlBase);
+      },
+      mapValue(result) {
+        if (result && result.status !== 'success') {
+          return {
+            result: result,
+            source: 'image',
+          };
+        }
+      },
+    }),
+    createSource({
+      getStream() {
+        return checkLinks(markup);
+      },
+      mapValue(result) {
+        if (result && result.status !== 'success') {
+          return {
+            result: result,
+            source: 'link',
+          };
+        }
+      },
+    }),
+  ];
+}
+
+export async function* loadLintingRowsFrom(sources: LintingSource<unknown>[]) {
+  for await (const source of sources) {
+    const stream = await source.getStream();
+    for await (const value of loadStream(stream)) {
+      const row = source.mapValue(value);
+      if (row) {
+        yield row;
+      }
+    }
+  }
+}

package/src/utils/load-stream.ts

@@ -0,0 +1,15 @@
+export async function* loadStream<T>(stream: ReadableStream<T>) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) {
+        break;
+      }
+
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}

package/src/utils/result.ts

@@ -0,0 +1,49 @@
+type Ok<T, _E> = {
+  value: T;
+};
+type Error<_T, E> = {
+  error: E;
+};
+
+/**
+ * Do not destructure this object, it is meant to have all fields together
+ * in the same object
+ */
+export type Result<T, E> = Ok<T, E> | Error<T, E>;
+
+export function isErr<T, E>(result: Result<T, E>): result is Error<T, E> {
+  return 'error' in result;
+}
+
+export function isOk<T, E>(result: Result<T, E>): result is Ok<T, E> {
+  return 'value' in result && !('error' in result);
+}
+
+export function mapResult<T, E, B>(
+  result: Result<T, E>,
+  callback: (value: T) => B,
+): Result<B, E> {
+  if (isOk(result)) {
+    return ok(callback(result.value));
+  }
+
+  return result;
+}
+
+export function ok<T, E>(value: NoInfer<T>): Ok<T, E>;
+// biome-ignore lint/suspicious/noConfusingVoidType: This is required for void return types on functions that can still error
+export function ok<T extends void = void, E = never>(value: void): Ok<void, E>;
+export function ok<T, E>(value: NoInfer<T>): Ok<T, E> {
+  return {
+    value,
+  };
+}
+
+export function err<T, E>(error: NoInfer<E>): Error<T, E>;
+// biome-ignore lint/suspicious/noConfusingVoidType: This is required for void return types on functions that can still error
+export function err<T, E extends void = void>(error: void): Error<T, void>;
+export function err<T, E>(error: NoInfer<E>): Error<T, E> {
+  return {
+    error,
+  };
+}

package/src/utils/run-bundled-code.ts

@@ -0,0 +1,64 @@
+import path from 'node:path';
+import vm from 'node:vm';
+import { type Result, err, ok } from './result';
+import { staticNodeModulesForVM } from './static-node-modules-for-vm';
+
+export const runBundledCode = (
+  code: string,
+  filename: string,
+): Result<unknown, unknown> => {
+  const fakeContext = {
+    ...global,
+    console,
+    Buffer,
+    AbortSignal,
+    Event,
+    EventTarget,
+    TextDecoder,
+    Request,
+    Response,
+    TextDecoderStream,
+    TextEncoder,
+    TextEncoderStream,
+    ReadableStream,
+    URL,
+    URLSearchParams,
+    Headers,
+    module: {
+      exports: {},
+    },
+    __filename: filename,
+    __dirname: path.dirname(filename),
+    require: (specifiedModule: string) => {
+      let m = specifiedModule;
+      if (specifiedModule.startsWith('node:')) {
+        m = m.split(':')[1]!;
+      }
+
+      if (m in staticNodeModulesForVM) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return staticNodeModulesForVM[m];
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-useless-template-literals
+      return require(`${specifiedModule}`) as unknown;
+      // this stupid string templating was necessary to not have
+      // webpack warnings like:
+      //
+      // Import trace for requested module:
+      // ./src/utils/get-email-component.tsx
+      // ./src/app/page.tsx
+      //  ⚠ ./src/utils/get-email-component.tsx
+      // Critical dependency: the request of a dependency is an expression
+    },
+    process,
+  };
+
+  try {
+    vm.runInNewContext(code, fakeContext, { filename });
+  } catch (exception) {
+    return err(exception);
+  }
+
+  return ok(fakeContext.module.exports as unknown);
+};

package/src/utils/sanitize.ts

@@ -0,0 +1,6 @@
+/**
+ * Sanitizes text by replacing underscores and hyphens with spaces
+ */
+export const sanitize = (text: string): string => {
+  return text.replace(/[_-]/g, ' ');
+};

package/tailwind-internals.d.ts

@@ -0,0 +1,133 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+declare module "tailwindcss/lib/lib/evaluateTailwindFunctions" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function evaluateTailwindFunctions(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/resolveDefaultsAtRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function expandApplyAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/partitionApplyAtRules" {
+  import type { Root } from "postcss";
+
+  export default function partitionApplyAtRules(): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/substituteScreenAtRules" {
+  import type { Root } from "postcss";
+
+  export default function substituteScreenAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/resolveDefaultsAtRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function expandApplyAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/expandApplyAtRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function expandApplyAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/expandTailwindAtRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default async function expandTailwindAtRules(
+    context: JITContext,
+  ): (root: Root) => Promise<void>;
+}
+
+declare module "tailwindcss/lib/lib/collapseAdjacentRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default async function collapseAdjacentRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/collapseDuplicateDeclarations" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default async function collapseDuplicateDeclarations(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/generateRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Rule } from "postcss";
+
+  export function generateRules(
+    classNames: Set<string>,
+    context: JITContext,
+  ): [bigint, Rule][];
+}
+
+// taken from https://github.com/vinicoder/tw-to-css/blob/main/types.d.ts
+// thanks vinicoder!
+declare module "tailwindcss/lib/lib/setupContextUtils" {
+  import type { Container, Node } from "postcss";
+  import type { Config } from "tailwindcss";
+  import type resolveConfig from "tailwindcss/resolveConfig";
+
+  interface ChangedContent {
+    content: string;
+    extension?: string;
+  }
+
+  interface Api {
+    container: Container;
+    separator: string;
+    format: (def: string) => void;
+    wrap: (rule: Container) => void;
+  }
+
+  type VariantPreview = string;
+
+  type VariantFn = [number, (api: Api) => VariantPreview | undefined];
+
+  type VariantName = string;
+
+  export interface JitContext {
+    changedContent: ChangedContent[];
+    ruleCache: Set<unknown>;
+    candidateRuleCache: Map<unknown, unknown>;
+    classCache: Map<unknown, unknown>;
+    applyClassCache: Map<unknown, unknown>;
+    notClassCache: Set<unknown>;
+    postCssNodeCache: Map<unknown, unknown>;
+
+    getClassList: () => string[];
+    tailwindConfig: TailwindConfig;
+    variantMap: Map<VariantName, VariantFn[]>;
+  }
+
+  export function createContext(
+    config: ReturnType<typeof resolveConfig>,
+    changedContent?: ChangedContent[],
+  ): JitContext;
+}

package/tsconfig.json

@@ -24,16 +24,22 @@
     "declarationMap": false,
     "incremental": false,
     "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "esnext", "ESNext.AsyncIterable"],
     "noEmit": true,
     "strict": false,
-    "target": "es5",
+    "target": "ESNext",
     "module": "CommonJS",
     "noUncheckedIndexedAccess": true,
     "resolveJsonModule": true,
     "types": ["vitest/globals"],
     "outDir": "dist"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "tailwind-internals.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": [".next", "dist", "node_modules"]
 }

package/build-preview-server.mjs

@@ -1,25 +0,0 @@
-import { spawn } from 'node:child_process';
-import fs from 'node:fs';
-
-const nextBuildProcess = spawn('pnpm', ['next', 'build'], {
-  detached: true,
-  shell: true,
-  stdio: 'inherit',
-});
-
-process.on('SIGINT', () => {
-  nextBuildProcess.kill('SIGINT');
-});
-
-nextBuildProcess.on('exit', (code) => {
-  if (code !== 0) {
-    console.error(`next build failed with exit code ${code}`);
-    process.exit(code);
-  }
-
-  if (fs.existsSync('dist/preview')) {
-    fs.rmSync('dist/preview', { recursive: true });
-  }
-  fs.mkdirSync('dist/preview', { recursive: true });
-  fs.renameSync('.next', 'dist/preview/.next');
-});