@depup/react-email 5.2.10-depup.1 → 6.9.0-depup.1

package/src/components/text/utils/compute-margins.ts

@@ -0,0 +1,102 @@
+type MarginType = string | number | undefined;
+
+interface MarginProperties {
+  margin?: MarginType;
+  marginTop?: MarginType;
+  marginRight?: MarginType;
+  marginBottom?: MarginType;
+  marginLeft?: MarginType;
+}
+
+interface MarginResult {
+  marginTop: MarginType;
+  marginRight: MarginType;
+  marginBottom: MarginType;
+  marginLeft: MarginType;
+}
+
+function parseMarginValue(value: MarginType): MarginResult {
+  if (typeof value === 'number')
+    return {
+      marginTop: value,
+      marginBottom: value,
+      marginLeft: value,
+      marginRight: value,
+    };
+
+  if (typeof value === 'string') {
+    const values = value.toString().trim().split(/\s+/);
+
+    if (values.length === 1) {
+      return {
+        marginTop: values[0],
+        marginBottom: values[0],
+        marginLeft: values[0],
+        marginRight: values[0],
+      };
+    }
+
+    if (values.length === 2) {
+      return {
+        marginTop: values[0],
+        marginRight: values[1],
+        marginBottom: values[0],
+        marginLeft: values[1],
+      };
+    }
+
+    if (values.length === 3) {
+      return {
+        marginTop: values[0],
+        marginRight: values[1],
+        marginBottom: values[2],
+        marginLeft: values[1],
+      };
+    }
+
+    if (values.length === 4) {
+      return {
+        marginTop: values[0],
+        marginRight: values[1],
+        marginBottom: values[2],
+        marginLeft: values[3],
+      };
+    }
+  }
+
+  return {
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+  };
+}
+
+/**
+ * Parses all the values out of a margin string to get the value for all margin props in the four margin properties
+ * @example e.g. "10px" =\> mt: "10px", mr: "10px", mb: "10px", ml: "10px"
+ */
+export function computeMargins(properties: MarginProperties): MarginResult {
+  let result: MarginResult = {
+    marginTop: undefined,
+    marginRight: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+  };
+
+  for (const [key, value] of Object.entries(properties)) {
+    if (key === 'margin') {
+      result = parseMarginValue(value);
+    } else if (key === 'marginTop') {
+      result.marginTop = value;
+    } else if (key === 'marginRight') {
+      result.marginRight = value;
+    } else if (key === 'marginBottom') {
+      result.marginBottom = value;
+    } else if (key === 'marginLeft') {
+      result.marginLeft = value;
+    }
+  }
+
+  return result;
+}

package/src/index.ts

@@ -1,110 +1,2 @@
-#!/usr/bin/env node
-import { spawn } from 'node:child_process';
-import { program } from 'commander';
-import { build } from './commands/build.js';
-import { dev } from './commands/dev.js';
-import { exportTemplates } from './commands/export.js';
-import { resendReset } from './commands/resend/reset.js';
-import { resendSetup } from './commands/resend/setup.js';
-import { start } from './commands/start.js';
-import { packageJson } from './utils/packageJson.js';
-
-const requiredFlags = [
-  '--experimental-vm-modules',
-  '--disable-warning=ExperimentalWarning',
-];
-
-const hasRequiredFlags = requiredFlags.every((flag) =>
-  process.execArgv.includes(flag),
-);
-
-if (!hasRequiredFlags) {
-  const child = spawn(
-    process.execPath,
-    [
-      ...requiredFlags,
-      ...process.execArgv,
-      process.argv[1] ?? '',
-      ...process.argv.slice(2),
-    ],
-    { stdio: 'inherit' },
-  );
-
-  child.on('exit', (code) => {
-    process.exit(code ?? 0);
-  });
-} else {
-  const PACKAGE_NAME = 'react-email';
-
-  program
-    .name(PACKAGE_NAME)
-    .description('A live preview of your emails right in your browser')
-    .version(packageJson.version);
-
-  program
-    .command('dev')
-    .description('Starts the preview email development app')
-    .option(
-      '-d, --dir <path>',
-      'Directory with your email templates',
-      './emails',
-    )
-    .option('-p --port <port>', 'Port to run dev server on', '3000')
-    .action(dev);
-
-  program
-    .command('build')
-    .description('Copies the preview app for onto .react-email and builds it')
-    .option(
-      '-d, --dir <path>',
-      'Directory with your email templates',
-      './emails',
-    )
-    .option(
-      '-p --packageManager <name>',
-      'Package name to use on installation on `.react-email`',
-      'npm',
-    )
-    .action(build);
-
-  program
-    .command('start')
-    .description('Runs the built preview app that is inside of ".react-email"')
-    .action(start);
-
-  program
-    .command('export')
-    .description('Build the templates to the `out` directory')
-    .option('--outDir <path>', 'Output directory', 'out')
-    .option('-p, --pretty', 'Pretty print the output', false)
-    .option('-t, --plainText', 'Set output format as plain text', false)
-    .option(
-      '-d, --dir <path>',
-      'Directory with your email templates',
-      './emails',
-    )
-    .option(
-      '-s, --silent',
-      'To, or not to show a spinner with process information',
-      false,
-    )
-    .action(({ outDir, pretty, plainText, silent, dir: srcDir }) =>
-      exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
-    );
-
-  const resend = program.command('resend');
-
-  resend
-    .command('setup')
-    .description(
-      'Sets up the integration between the React Email CLI, and your Resend account through an API Key',
-    )
-    .action(resendSetup);
-
-  resend
-    .command('reset')
-    .description('Deletes your API Key from the React Email configuration')
-    .action(resendReset);
-
-  program.parse();
-}
+export * from '@react-email/render';
+export * from './components/index.js';

package/tsconfig.json

@@ -8,7 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "inlineSources": false,
     "isolatedModules": true,
-    "moduleResolution": "nodenext",
+    "moduleResolution": "bundler",
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "preserveWatchOutput": true,
@@ -28,12 +28,17 @@
     "noEmit": true,
     "strict": false,
     "target": "ESNext",
-    "module": "NodeNext",
+    "module": "ESNext",
     "noUncheckedIndexedAccess": true,
     "resolveJsonModule": true,
     "types": ["vitest/globals"],
     "outDir": "dist"
   },
-  "include": ["src/**/*.ts"],
-  "exclude": ["dist", "node_modules"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/cli/utils/preview/hot-reloading/test",
+    "src/components/tailwind/e2e"
+  ]
 }

package/tsdown.config.ts

@@ -1,8 +1,53 @@
 import { defineConfig } from 'tsdown';
 
-export default defineConfig({
-  dts: false,
-  entry: ['./src/index.ts'],
-  format: ['esm'],
-  outDir: 'dist',
-});
+// css-tree's ESM files load .json data through createRequire(), which breaks
+// once a consumer's bundler inlines them. Its dist bundle is self-contained,
+// so the emitted ESM points there; the CJS output keeps plain 'css-tree',
+// whose CJS build only uses static require() calls that bundlers handle.
+// Only .mjs chunks are rewritten: declaration files must keep the bare
+// specifier, the only module @types/css-tree declares.
+const selfContainedCssTreeEsm = {
+  name: 'self-contained-css-tree-esm',
+  renderChunk(code: string, chunk: { fileName: string }) {
+    if (!chunk.fileName.endsWith('.mjs') || !code.includes('"css-tree"')) {
+      return null;
+    }
+    return {
+      code: code.replaceAll(
+        ' from "css-tree"',
+        ' from "css-tree/dist/csstree.esm"',
+      ),
+      map: null,
+    };
+  },
+};
+
+export default defineConfig([
+  {
+    dts: false,
+    entry: ['./src/cli/index.ts'],
+    format: ['esm'],
+    outDir: 'dist/cli',
+  },
+  {
+    dts: true,
+    entry: ['./src/index.ts'],
+    format: ['esm'],
+    outDir: 'dist',
+    unbundle: true,
+    deps: {
+      neverBundle: [/^react($|\/)/, /^react-dom($|\/)/],
+    },
+    plugins: [selfContainedCssTreeEsm],
+  },
+  {
+    dts: true,
+    entry: ['./src/index.ts'],
+    format: ['cjs'],
+    outDir: 'dist',
+    unbundle: true,
+    deps: {
+      neverBundle: [/^react($|\/)/, /^react-dom($|\/)/],
+    },
+  },
+]);

package/vitest.config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'happy-dom',
+    exclude: ['**/e2e/**', '**/node_modules/**'],
   },
   esbuild: {
     tsconfigRaw: {

package/vitest.e2e.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    include: ['**/e2e/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    exclude: ['**/node_modules/**'],
+  },
+  esbuild: {
+    tsconfigRaw: {
+      compilerOptions: {
+        jsx: 'react-jsx',
+      },
+    },
+  },
+});

package/src/commands/build.ts

@@ -1,269 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { getPackages } from '@manypkg/get-packages';
-import logSymbols from 'log-symbols';
-import { installDependencies, type PackageManagerName, runScript } from 'nypm';
-import ora from 'ora';
-import {
-  type EmailsDirectory,
-  getEmailsDirectoryMetadata,
-} from '../utils/get-emails-directory-metadata.js';
-import { getPreviewServerLocation } from '../utils/get-preview-server-location.js';
-import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping.js';
-
-interface Args {
-  dir: string;
-  packageManager: PackageManagerName;
-}
-
-const dirname = path.dirname(fileURLToPath(import.meta.url));
-const isInReactEmailMonorepo = !dirname.includes('node_modules');
-
-const setNextEnvironmentVariablesForBuild = async (
-  emailsDirRelativePath: string,
-  builtPreviewAppPath: string,
-  usersProjectLocation: string,
-) => {
-  let rootDir = 'previewServerLocation';
-  if (isInReactEmailMonorepo) {
-    rootDir = `'${await getPackages(usersProjectLocation).then((p) => p.rootDir.replaceAll('\\', '/'))}'`;
-  }
-  const nextConfigContents = `
-import path from 'path';
-const emailsDirRelativePath = path.normalize('${emailsDirRelativePath}');
-const userProjectLocation = '${process.cwd().replaceAll('\\', '/')}';
-const previewServerLocation = '${builtPreviewAppPath.replaceAll('\\', '/')}';
-const rootDir = ${rootDir};
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  env: {
-    NEXT_PUBLIC_IS_BUILDING: 'true',
-    REACT_EMAIL_INTERNAL_EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,
-    REACT_EMAIL_INTERNAL_EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),
-    REACT_EMAIL_INTERNAL_PREVIEW_SERVER_LOCATION: previewServerLocation,
-    REACT_EMAIL_INTERNAL_USER_PROJECT_LOCATION: userProjectLocation
-  },
-  turbopack: {
-    root: rootDir,
-  },
-  outputFileTracingRoot: rootDir,
-  serverExternalPackages: ['esbuild'],
-  typescript: {
-    ignoreBuildErrors: true
-  },
-  staticPageGenerationTimeout: 600,
-}
-
-export default nextConfig`;
-
-  await fs.promises.writeFile(
-    path.resolve(builtPreviewAppPath, './next.config.mjs'),
-    nextConfigContents,
-    'utf8',
-  );
-};
-
-const getEmailSlugsFromEmailDirectory = (
-  emailDirectory: EmailsDirectory,
-  emailsDirectoryAbsolutePath: string,
-) => {
-  const directoryPathRelativeToEmailsDirectory = emailDirectory.absolutePath
-    .replace(emailsDirectoryAbsolutePath, '')
-    .trim();
-
-  const slugs = [] as Array<string>[];
-  for (const filename of emailDirectory.emailFilenames) {
-    slugs.push(
-      path
-        .join(directoryPathRelativeToEmailsDirectory, filename)
-        .split(path.sep)
-        // sometimes it gets empty segments due to trailing slashes
-        .filter((segment) => segment.length > 0),
-    );
-  }
-  for (const directory of emailDirectory.subDirectories) {
-    slugs.push(
-      ...getEmailSlugsFromEmailDirectory(
-        directory,
-        emailsDirectoryAbsolutePath,
-      ),
-    );
-  }
-
-  return slugs;
-};
-
-// we do this because otherwise it won't be able to find the emails
-// after build
-const forceSSGForEmailPreviews = async (
-  emailsDirPath: string,
-  builtPreviewAppPath: string,
-) => {
-  const emailDirectoryMetadata = (await getEmailsDirectoryMetadata(
-    emailsDirPath,
-  ))!;
-
-  const parameters = getEmailSlugsFromEmailDirectory(
-    emailDirectoryMetadata,
-    emailsDirPath,
-  ).map((slug) => ({ slug }));
-
-  const removeForceDynamic = async (filePath: string) => {
-    const contents = await fs.promises.readFile(filePath, 'utf8');
-
-    await fs.promises.writeFile(
-      filePath,
-      contents.replace("export const dynamic = 'force-dynamic';", ''),
-      'utf8',
-    );
-  };
-  await removeForceDynamic(
-    path.resolve(builtPreviewAppPath, './src/app/layout.tsx'),
-  );
-  await removeForceDynamic(
-    path.resolve(builtPreviewAppPath, './src/app/preview/[...slug]/page.tsx'),
-  );
-
-  await fs.promises.appendFile(
-    path.resolve(builtPreviewAppPath, './src/app/preview/[...slug]/page.tsx'),
-    `
-
-export function generateStaticParams() { 
-  return Promise.resolve(
-    ${JSON.stringify(parameters)}
-  );
-}`,
-    'utf8',
-  );
-};
-
-const updatePackageJson = async (builtPreviewAppPath: string) => {
-  const packageJsonPath = path.resolve(builtPreviewAppPath, './package.json');
-  const packageJson = JSON.parse(
-    await fs.promises.readFile(packageJsonPath, 'utf8'),
-  ) as {
-    name: string;
-    scripts: Record<string, string>;
-    dependencies: Record<string, string>;
-    devDependencies: Record<string, string>;
-  };
-  // Turbopack has some errors with the imports in @react-email/tailwind
-  packageJson.scripts.build =
-    'cross-env NODE_OPTIONS="--experimental-vm-modules --disable-warning=ExperimentalWarning" next build';
-  packageJson.scripts.start =
-    'cross-env NODE_OPTIONS="--experimental-vm-modules --disable-warning=ExperimentalWarning" next start';
-  delete packageJson.scripts.postbuild;
-
-  packageJson.name = 'preview-server';
-
-  for (const [dependency, version] of Object.entries(
-    packageJson.devDependencies,
-  )) {
-    packageJson.devDependencies[dependency] = version.replace('workspace:', '');
-  }
-
-  delete packageJson.devDependencies['@react-email/components'];
-  delete packageJson.scripts.prepare;
-
-  await fs.promises.writeFile(
-    packageJsonPath,
-    JSON.stringify(packageJson),
-    'utf8',
-  );
-};
-
-export const build = async ({
-  dir: emailsDirRelativePath,
-  packageManager,
-}: Args) => {
-  try {
-    const usersProjectLocation = process.cwd();
-    const previewServerLocation = await getPreviewServerLocation();
-
-    const spinner = ora({
-      text: 'Starting build process...',
-      prefixText: '  ',
-    }).start();
-    registerSpinnerAutostopping(spinner);
-
-    spinner.text = `Checking if ${emailsDirRelativePath} folder exists`;
-    if (!fs.existsSync(emailsDirRelativePath)) {
-      process.exit(1);
-    }
-
-    const emailsDirPath = path.join(
-      usersProjectLocation,
-      emailsDirRelativePath,
-    );
-    const staticPath = path.join(emailsDirPath, 'static');
-
-    const builtPreviewAppPath = path.join(usersProjectLocation, '.react-email');
-
-    if (fs.existsSync(builtPreviewAppPath)) {
-      spinner.text = 'Deleting pre-existing `.react-email` folder';
-      await fs.promises.rm(builtPreviewAppPath, { recursive: true });
-    }
-
-    spinner.text = 'Copying preview app from CLI to `.react-email`';
-    await fs.promises.cp(previewServerLocation, builtPreviewAppPath, {
-      recursive: true,
-      filter: (source: string) => {
-        const relativeSource = path.relative(previewServerLocation, source);
-        return (
-          !/\.next/.test(relativeSource) &&
-          !/\.turbo/.test(relativeSource) &&
-          (isInReactEmailMonorepo || !/node_modules/.test(relativeSource))
-        );
-      },
-    });
-
-    if (fs.existsSync(staticPath)) {
-      spinner.text =
-        'Copying `static` folder into `.react-email/public/static`';
-      const builtStaticDirectory = path.resolve(
-        builtPreviewAppPath,
-        './public/static',
-      );
-      await fs.promises.cp(staticPath, builtStaticDirectory, {
-        recursive: true,
-      });
-    }
-
-    spinner.text =
-      'Setting Next environment variables for preview app to work properly';
-    await setNextEnvironmentVariablesForBuild(
-      emailsDirRelativePath,
-      builtPreviewAppPath,
-      usersProjectLocation,
-    );
-
-    spinner.text = 'Setting server side generation for the email preview pages';
-    await forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath);
-
-    spinner.text = "Updating package.json's build and start scripts";
-    await updatePackageJson(builtPreviewAppPath);
-
-    if (!isInReactEmailMonorepo) {
-      spinner.text = 'Installing dependencies on `.react-email`';
-      await installDependencies({
-        cwd: builtPreviewAppPath,
-        silent: true,
-        packageManager,
-      });
-    }
-
-    spinner.stopAndPersist({
-      text: 'Successfully prepared `.react-email` for `next build`',
-      symbol: logSymbols.success,
-    });
-
-    await runScript('build', {
-      packageManager,
-      cwd: builtPreviewAppPath,
-    });
-  } catch (error) {
-    console.log(error);
-    process.exit(1);
-  }
-};

package/src/commands/dev.ts

@@ -1,27 +0,0 @@
-import fs from 'node:fs';
-import { setupHotreloading, startDevServer } from '../utils/index.js';
-
-interface Args {
-  dir: string;
-  port: string;
-}
-
-export const dev = async ({ dir: emailsDirRelativePath, port }: Args) => {
-  try {
-    if (!fs.existsSync(emailsDirRelativePath)) {
-      console.error(`Missing ${emailsDirRelativePath} folder`);
-      process.exit(1);
-    }
-
-    const devServer = await startDevServer(
-      emailsDirRelativePath,
-      emailsDirRelativePath, // defaults to ./emails/static for the static files that are served to the preview
-      Number.parseInt(port, 10),
-    );
-
-    await setupHotreloading(devServer, emailsDirRelativePath);
-  } catch (error) {
-    console.log(error);
-    process.exit(1);
-  }
-};