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

package/src/utils/caniemail/get-element-attributes.ts

@@ -0,0 +1,7 @@
+export function getElementAttributes(title: string) {
+  if (title.endsWith(' attribute')) {
+    return [title.replace(' attribute', '')];
+  }
+
+  return [];
+}

package/src/utils/caniemail/get-element-names.ts

@@ -0,0 +1,20 @@
+export const getElementNames = (title: string, keywords: string | null) => {
+  const match = /<(?<elementName>[^>]*)> element/.exec(title);
+  if (match) {
+    const [_full, elementName] = match;
+
+    if (elementName) {
+      return [elementName];
+    }
+  }
+
+  if (keywords !== null && keywords.length > 0) {
+    return keywords.split(/\s*,\s*/).map((piece) => piece.trim());
+  }
+
+  if (title.split(',').length > 1) {
+    return title.split(/\s*,\s*/).map((piece) => piece.trim());
+  }
+
+  return [];
+};

package/src/utils/caniemail/tailwind/generate-tailwind-rules.ts

@@ -0,0 +1,30 @@
+import type { Root, Rule } from 'postcss';
+import postcss from 'postcss';
+import evaluateTailwindFunctions from 'tailwindcss/lib/lib/evaluateTailwindFunctions';
+import { generateRules as rawGenerateRules } from 'tailwindcss/lib/lib/generateRules';
+import type { JitContext } from 'tailwindcss/lib/lib/setupContextUtils';
+
+export const generateTailwindCssRules = (
+  classNames: string[],
+  tailwindContext: JitContext,
+): { root: Root; rules: Rule[] } => {
+  const bigIntRuleTuples: [bigint, Rule][] = rawGenerateRules(
+    new Set(classNames),
+    tailwindContext,
+  );
+
+  const root = postcss.root({
+    nodes: bigIntRuleTuples.map(([, rule]) => rule),
+  });
+  evaluateTailwindFunctions(tailwindContext)(root);
+
+  const actualRules: Rule[] = [];
+  root.walkRules((rule) => {
+    actualRules.push(rule);
+  });
+
+  return {
+    root,
+    rules: actualRules,
+  };
+};

package/src/utils/caniemail/tailwind/get-tailwind-config.ts

@@ -0,0 +1,205 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { Node } from '@babel/traverse';
+import traverse from '@babel/traverse';
+import * as esbuild from 'esbuild';
+import type { Config as TailwindOriginalConfig } from 'tailwindcss';
+import type { AST } from '../../../actions/email-validation/check-compatibility';
+import { isErr } from '../../result';
+import { runBundledCode } from '../../run-bundled-code';
+
+export type TailwindConfig = Pick<
+  TailwindOriginalConfig,
+  | 'important'
+  | 'prefix'
+  | 'separator'
+  | 'safelist'
+  | 'blocklist'
+  | 'presets'
+  | 'future'
+  | 'experimental'
+  | 'darkMode'
+  | 'theme'
+  | 'corePlugins'
+  | 'plugins'
+>;
+
+const getFirstExistingFilepath = (filePaths: string[]) => {
+  for (const filePath of filePaths) {
+    if (fs.existsSync(filePath)) {
+      return filePath;
+    }
+  }
+};
+
+type ImportDeclaration = Node & { type: 'ImportDeclaration' };
+
+export const getTailwindConfig = async (
+  sourceCode: string,
+  ast: AST,
+  sourcePath: string,
+): Promise<TailwindConfig> => {
+  const configAttribute = getTailwindConfigNode(ast);
+
+  if (configAttribute) {
+    const configIdentifierName =
+      configAttribute.value?.type === 'JSXExpressionContainer' &&
+      configAttribute.value.expression.type === 'Identifier'
+        ? configAttribute.value.expression.name
+        : undefined;
+    if (configIdentifierName) {
+      const tailwindConfigImport = getImportWithGivenDefaultSpecifier(
+        ast,
+        configIdentifierName,
+      );
+      if (tailwindConfigImport) {
+        return getConfigFromImport(tailwindConfigImport, sourcePath);
+      }
+    }
+
+    const configObjectExpression =
+      configAttribute.value?.type === 'JSXExpressionContainer' &&
+      configAttribute.value.expression.type === 'ObjectExpression'
+        ? configAttribute.value.expression
+        : undefined;
+    if (configObjectExpression?.start && configObjectExpression.end) {
+      const configObjectSourceCode = sourceCode.slice(
+        configObjectExpression.start,
+        configObjectExpression.end,
+      );
+
+      try {
+        const getConfig = new Function(`return ${configObjectSourceCode}`);
+        return getConfig() as TailwindConfig;
+      } catch (exception) {
+        console.warn(exception);
+        console.warn(
+          `Tried reading the config defined directly in the Tailwind component but was unable to, probably because it isn't a valid javascript object by itself.`,
+        );
+      }
+    }
+  }
+
+  return {};
+};
+
+const getConfigFromImport = async (
+  tailwindConfigImport: ImportDeclaration,
+  sourcePath: string,
+): Promise<TailwindConfig> => {
+  const configRelativePath = tailwindConfigImport.source.value;
+  const configImportPath = path.resolve(
+    path.dirname(sourcePath),
+    configRelativePath,
+  );
+  const configFilepath = getFirstExistingFilepath([
+    configImportPath,
+    `${configImportPath}.ts`,
+    `${configImportPath}.js`,
+    `${configImportPath}.mjs`,
+    `${configImportPath}.cjs`,
+  ]);
+
+  if (configFilepath === undefined) {
+    throw new Error(
+      `Could not find Tailwind config by inferring it's extension type (tried .ts, .js, .mjs and .cjs).`,
+      {
+        cause: {
+          configPath: configImportPath,
+          sourcePath,
+        },
+      },
+    );
+  }
+
+  const configBuildResult = await esbuild.build({
+    bundle: false,
+    entryPoints: [configFilepath],
+    platform: 'node',
+    write: false,
+    format: 'cjs',
+    logLevel: 'silent',
+  });
+  const configFile = configBuildResult.outputFiles[0];
+  if (configFile === undefined) {
+    throw new Error(
+      'Could not build config file as it was found as undefined, this is a bug please open an issue.',
+    );
+  }
+  const configModule = runBundledCode(configFile.text, configFilepath);
+  if (isErr(configModule)) {
+    throw new Error('Error when trying to run the config file', {
+      cause: configModule.error,
+    });
+  }
+
+  console.log(configModule);
+
+  if (
+    typeof configModule.value === 'object' &&
+    configModule.value !== null &&
+    'default' in configModule.value
+  ) {
+    return configModule.value.default as TailwindConfig;
+  }
+
+  throw new Error(
+    `Could not read Tailwind config at ${configFilepath} because it doesn't have a default export in it.`,
+    {
+      cause: {
+        configModule,
+        configFilepath,
+      },
+    },
+  );
+};
+
+const getImportWithGivenDefaultSpecifier = (
+  ast: AST,
+  specifierName: string,
+) => {
+  let importNode: ImportDeclaration | undefined;
+  traverse(ast, {
+    ImportDeclaration(nodePath) {
+      if (
+        nodePath.node.specifiers.some(
+          (specifier) =>
+            specifier.type === 'ImportDefaultSpecifier' &&
+            specifier.local.name === specifierName,
+        )
+      ) {
+        importNode = nodePath.node;
+      }
+    },
+  });
+  return importNode;
+};
+
+type JSXAttribute = Node & { type: 'JSXAttribute' };
+
+const getTailwindConfigNode = (ast: AST) => {
+  let tailwindConfigNode: JSXAttribute | undefined;
+  traverse(ast, {
+    JSXOpeningElement(nodePath) {
+      if (
+        nodePath.node.name.type === 'JSXIdentifier' &&
+        nodePath.node.name.name === 'Tailwind'
+      ) {
+        const configAttribute = nodePath.node.attributes.find(
+          (
+            attribute,
+          ): attribute is Node & {
+            type: 'JSXAttribute';
+          } =>
+            attribute.type === 'JSXAttribute' &&
+            attribute.name.type === 'JSXIdentifier' &&
+            attribute.name.name === 'config',
+        );
+        if (configAttribute) {
+          tailwindConfigNode = configAttribute;
+        }
+      }
+    },
+  });
+  return tailwindConfigNode;
+};

package/src/utils/caniemail/tailwind/get-tailwind-metadata.spec.ts

@@ -0,0 +1,25 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { parse } from '@babel/parser';
+import { getTailwindMetadata } from './get-tailwind-metadata';
+
+describe('getTailwindMetadata()', () => {
+  test('with the netlify-welcome demo email', async () => {
+    const emailPath = path.resolve(
+      __dirname,
+      '../../../../../../apps/demo/emails/welcome/netlify-welcome.tsx',
+    );
+    const reactCode = await fs.readFile(emailPath, 'utf8');
+    const ast = parse(reactCode, {
+      strictMode: false,
+      errorRecovery: true,
+      sourceType: 'unambiguous',
+      plugins: ['jsx', 'typescript', 'decorators'],
+    });
+
+    const tailwindMetadata = getTailwindMetadata(ast, reactCode, emailPath);
+
+    expect(tailwindMetadata).toBeDefined();
+    // console.log(tailwindMetadata);
+  });
+});

package/src/utils/caniemail/tailwind/get-tailwind-metadata.ts

@@ -0,0 +1,45 @@
+import traverse from '@babel/traverse';
+import type { JitContext } from 'tailwindcss/lib/lib/setupContextUtils';
+import type { AST } from '../../../actions/email-validation/check-compatibility';
+import { type TailwindConfig, getTailwindConfig } from './get-tailwind-config';
+import { setupTailwindContext } from './setup-tailwind-context';
+
+export const getTailwindMetadata = async (
+  ast: AST,
+  sourceCode: string,
+  sourcePath: string,
+): Promise<
+  | {
+      hasTailwind: false;
+    }
+  | {
+      hasTailwind: true;
+      config: TailwindConfig;
+      context: JitContext;
+    }
+> => {
+  let hasTailwind = false as boolean;
+  traverse(ast, {
+    JSXOpeningElement(path) {
+      if (
+        path.node.name.type === 'JSXIdentifier' &&
+        path.node.name.name === 'Tailwind'
+      ) {
+        hasTailwind = true;
+      }
+    },
+  });
+
+  if (!hasTailwind) {
+    return { hasTailwind: false };
+  }
+
+  const config = await getTailwindConfig(sourceCode, ast, sourcePath);
+  const context = setupTailwindContext(config);
+
+  return {
+    hasTailwind: true,
+    config,
+    context,
+  };
+};

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.function(),
+  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/linting.ts

@@ -0,0 +1,85 @@
+import { checkCompatibility } from '../actions/email-validation/check-compatibility';
+import { checkImages } from '../actions/email-validation/check-images';
+import { checkLinks } from '../actions/email-validation/check-links';
+import type { LintingRow } from '../components/toolbar/linter';
+
+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,
+  reactMarkup: string,
+  emailPath: 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',
+          };
+        }
+      },
+    }),
+    createSource({
+      getStream() {
+        return checkCompatibility(reactMarkup, emailPath);
+      },
+      mapValue(value) {
+        if (value && value.status !== 'success') {
+          return {
+            result: value,
+            source: 'compatibility',
+          };
+        }
+      },
+    }),
+  ];
+}
+
+export async function* loadLintingRowsFrom(sources: LintingSource<unknown>[]) {
+  for await (const source of sources) {
+    const stream = await source.getStream();
+    const reader = stream.getReader();
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) {
+          break;
+        }
+
+        const row = source.mapValue(value);
+        if (row) {
+          yield row;
+        }
+      }
+    } 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);
+};