@react-email/preview-server 5.2.0 → 5.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/preview-server",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "A live preview of your emails right in your browser.",
   "main": "./index.mjs",
   "dependencies": {
@@ -59,18 +59,18 @@
     "typescript": "5.8.3",
     "use-debounce": "10.0.4",
     "zod": "4.1.12",
+    "@react-email/code-block": "0.2.1",
     "@react-email/body": "0.2.1",
     "@react-email/button": "0.2.1",
-    "@react-email/code-block": "0.2.1",
     "@react-email/code-inline": "0.0.6",
     "@react-email/components": "1.0.4",
     "@react-email/container": "0.0.16",
-    "@react-email/heading": "0.0.16",
     "@react-email/hr": "0.0.12",
-    "@react-email/img": "0.0.12",
     "@react-email/link": "0.0.13",
     "@react-email/preview": "0.0.14",
-    "@react-email/text": "0.1.6"
+    "@react-email/heading": "0.0.16",
+    "@react-email/text": "0.1.6",
+    "@react-email/img": "0.0.12"
   },
   "license": "MIT",
   "repository": {

package/src/app/globals.css

@@ -77,11 +77,11 @@
 
   @keyframes spin {
     0% {
-      transform: rotate(0deg);
+      transform: rotate(360deg);
     }
 
     100% {
-      transform: rotate(360deg);
+      transform: rotate(0deg);
     }
   }
 }

package/src/utils/contains-email-template.spec.ts

@@ -23,114 +23,245 @@ describe('removeFilenameExtension()', () => {
 });
 
 describe('containsEmailTemplate()', () => {
-  const directory: EmailsDirectory = {
-    absolutePath: '/fake/path/emails',
-    directoryName: 'emails',
-    relativePath: '',
-    emailFilenames: [],
-    subDirectories: [
-      {
-        absolutePath: '/fake/path/emails/magic-links',
-        directoryName: 'magic-links',
-        relativePath: 'magic-links',
-        emailFilenames: [
-          'aws-verify-email',
-          'linear-login-code',
-          'notion-magic-link',
-          'plaid-verify-identity',
-          'raycast-magic-link',
-          'slack-confirm',
-        ],
-        subDirectories: [
-          {
-            absolutePath: '/fake/path/emails/magic-links/resend',
-            directoryName: 'resend',
-            emailFilenames: ['verify-email'],
-            relativePath: 'magic-links/resend',
-            subDirectories: [],
-          },
-        ],
-      },
-      {
-        absolutePath: '/fake/path/emails/first/second',
-        directoryName: 'first/second',
-        relativePath: 'first/second',
-        emailFilenames: ['email'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/newsletters',
-        directoryName: 'newsletters',
-        relativePath: 'newsletters',
-        emailFilenames: [
-          'codepen-challengers',
-          'google-play-policy-update',
-          'stack-overflow-tips',
-        ],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/notifications',
-        directoryName: 'notifications',
-        relativePath: 'notifications',
-        emailFilenames: [
-          'github-access-token',
-          'papermark-year-in-review',
-          'vercel-invite-user',
-          'yelp-recent-login',
-        ],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/receipts',
-        directoryName: 'receipts',
-        relativePath: 'receipts',
-        emailFilenames: ['apple-receipt', 'nike-receipt'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/reset-password',
-        directoryName: 'reset-password',
-        relativePath: 'reset-password',
-        emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/reviews',
-        directoryName: 'reviews',
-        relativePath: 'reviews',
-        emailFilenames: ['airbnb-review', 'amazon-review'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/welcome',
-        directoryName: 'welcome',
-        relativePath: 'welcome',
-        emailFilenames: ['koala-welcome', 'netlify-welcome', 'stripe-welcome'],
-        subDirectories: [],
-      },
-    ],
-  };
+  describe('with Windows path separator', () => {
+    const directory: EmailsDirectory = {
+      absolutePath: 'C:\\fake\\path\\emails',
+      directoryName: 'emails',
+      relativePath: '',
+      emailFilenames: [],
+      subDirectories: [
+        {
+          absolutePath: 'C:\\fake\\path\\emails\\magic-links',
+          directoryName: 'magic-links',
+          relativePath: 'magic-links',
+          emailFilenames: [
+            'aws-verify-email',
+            'linear-login-code',
+            'notion-magic-link',
+            'plaid-verify-identity',
+            'raycast-magic-link',
+            'slack-confirm',
+          ],
+          subDirectories: [
+            {
+              absolutePath: 'C:\\fake\\path\\emails\\magic-links\\resend',
+              directoryName: 'resend',
+              emailFilenames: ['verify-email'],
+              relativePath: 'magic-links\\resend',
+              subDirectories: [],
+            },
+          ],
+        },
+        {
+          absolutePath: 'C:\\fake\\path\\emails\\first\\second',
+          directoryName: 'first\\second',
+          relativePath: 'first\\second',
+          emailFilenames: ['email'],
+          subDirectories: [],
+        },
+        {
+          absolutePath: 'C:\\fake\\path\\emails\\newsletters',
+          directoryName: 'newsletters',
+          relativePath: 'newsletters',
+          emailFilenames: [
+            'codepen-challengers',
+            'google-play-policy-update',
+            'stack-overflow-tips',
+          ],
+          subDirectories: [],
+        },
+        {
+          absolutePath: 'C:\\fake\\path\\emails\\notifications',
+          directoryName: 'notifications',
+          relativePath: 'notifications',
+          emailFilenames: [
+            'github-access-token',
+            'papermark-year-in-review',
+            'vercel-invite-user',
+            'yelp-recent-login',
+          ],
+          subDirectories: [],
+        },
+        {
+          absolutePath: 'C:\\fake\\path\\emails\\receipts',
+          directoryName: 'receipts',
+          relativePath: 'receipts',
+          emailFilenames: ['apple-receipt', 'nike-receipt'],
+          subDirectories: [],
+        },
+        {
+          absolutePath: 'C:\\fake\\path\\emails\\reset-password',
+          directoryName: 'reset-password',
+          relativePath: 'reset-password',
+          emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
+          subDirectories: [],
+        },
+        {
+          absolutePath: 'C:\\fake\\path\\emails\\reviews',
+          directoryName: 'reviews',
+          relativePath: 'reviews',
+          emailFilenames: ['airbnb-review', 'amazon-review'],
+          subDirectories: [],
+        },
+        {
+          absolutePath: 'C:\\fake\\path\\emails\\welcome',
+          directoryName: 'welcome',
+          relativePath: 'welcome',
+          emailFilenames: [
+            'koala-welcome',
+            'netlify-welcome',
+            'stripe-welcome',
+          ],
+          subDirectories: [],
+        },
+      ],
+    };
 
-  it('works with collapsed email directory', () => {
-    expect(containsEmailTemplate('first/second/email', directory)).toBe(true);
-  });
+    it('works with collapsed email directory', () => {
+      expect(containsEmailTemplate('first\\second\\email.tsx', directory)).toBe(
+        true,
+      );
+    });
 
-  it('works with email inside a single sub directory', () => {
-    expect(containsEmailTemplate('welcome/koala-welcome', directory)).toBe(
-      true,
-    );
-    expect(containsEmailTemplate('welcome/missing-template', directory)).toBe(
-      false,
-    );
+    it('works with email inside a single sub directory', () => {
+      expect(
+        containsEmailTemplate('welcome\\koala-welcome.tsx', directory),
+      ).toBe(true);
+      expect(
+        containsEmailTemplate('welcome\\missing-template.tsx', directory),
+      ).toBe(false);
+    });
+
+    it('works with email inside a second sub directory', () => {
+      expect(
+        containsEmailTemplate(
+          'magic-links\\resend\\verify-email.tsx',
+          directory,
+        ),
+      ).toBe(true);
+      expect(
+        containsEmailTemplate(
+          'magic-links\\resend\\missing-template',
+          directory,
+        ),
+      ).toBe(false);
+    });
   });
 
-  it('works with email inside a second sub directory', () => {
-    expect(
-      containsEmailTemplate('magic-links/resend/verify-email', directory),
-    ).toBe(true);
-    expect(
-      containsEmailTemplate('magic-links/resend/missing-template', directory),
-    ).toBe(false);
+  describe('with unix path separator', () => {
+    const directory: EmailsDirectory = {
+      absolutePath: '/fake/path/emails',
+      directoryName: 'emails',
+      relativePath: '',
+      emailFilenames: [],
+      subDirectories: [
+        {
+          absolutePath: '/fake/path/emails/magic-links',
+          directoryName: 'magic-links',
+          relativePath: 'magic-links',
+          emailFilenames: [
+            'aws-verify-email',
+            'linear-login-code',
+            'notion-magic-link',
+            'plaid-verify-identity',
+            'raycast-magic-link',
+            'slack-confirm',
+          ],
+          subDirectories: [
+            {
+              absolutePath: '/fake/path/emails/magic-links/resend',
+              directoryName: 'resend',
+              emailFilenames: ['verify-email'],
+              relativePath: 'magic-links/resend',
+              subDirectories: [],
+            },
+          ],
+        },
+        {
+          absolutePath: '/fake/path/emails/first/second',
+          directoryName: 'first/second',
+          relativePath: 'first/second',
+          emailFilenames: ['email'],
+          subDirectories: [],
+        },
+        {
+          absolutePath: '/fake/path/emails/newsletters',
+          directoryName: 'newsletters',
+          relativePath: 'newsletters',
+          emailFilenames: [
+            'codepen-challengers',
+            'google-play-policy-update',
+            'stack-overflow-tips',
+          ],
+          subDirectories: [],
+        },
+        {
+          absolutePath: '/fake/path/emails/notifications',
+          directoryName: 'notifications',
+          relativePath: 'notifications',
+          emailFilenames: [
+            'github-access-token',
+            'papermark-year-in-review',
+            'vercel-invite-user',
+            'yelp-recent-login',
+          ],
+          subDirectories: [],
+        },
+        {
+          absolutePath: '/fake/path/emails/receipts',
+          directoryName: 'receipts',
+          relativePath: 'receipts',
+          emailFilenames: ['apple-receipt', 'nike-receipt'],
+          subDirectories: [],
+        },
+        {
+          absolutePath: '/fake/path/emails/reset-password',
+          directoryName: 'reset-password',
+          relativePath: 'reset-password',
+          emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
+          subDirectories: [],
+        },
+        {
+          absolutePath: '/fake/path/emails/reviews',
+          directoryName: 'reviews',
+          relativePath: 'reviews',
+          emailFilenames: ['airbnb-review', 'amazon-review'],
+          subDirectories: [],
+        },
+        {
+          absolutePath: '/fake/path/emails/welcome',
+          directoryName: 'welcome',
+          relativePath: 'welcome',
+          emailFilenames: [
+            'koala-welcome',
+            'netlify-welcome',
+            'stripe-welcome',
+          ],
+          subDirectories: [],
+        },
+      ],
+    };
+
+    it('works with collapsed email directory', () => {
+      expect(containsEmailTemplate('first/second/email', directory)).toBe(true);
+    });
+
+    it('works with email inside a single sub directory', () => {
+      expect(containsEmailTemplate('welcome/koala-welcome', directory)).toBe(
+        true,
+      );
+      expect(containsEmailTemplate('welcome/missing-template', directory)).toBe(
+        false,
+      );
+    });
+
+    it('works with email inside a second sub directory', () => {
+      expect(
+        containsEmailTemplate('magic-links/resend/verify-email', directory),
+      ).toBe(true);
+      expect(
+        containsEmailTemplate('magic-links/resend/missing-template', directory),
+      ).toBe(false);
+    });
   });
 });

package/src/utils/contains-email-template.ts

@@ -14,34 +14,37 @@ export const containsEmailTemplate = (
   relativeEmailPath: string,
   directory: EmailsDirectory,
 ) => {
+  const pathSeparator = relativeEmailPath.includes('\\') ? '\\' : '/';
   const emailPathSegments = relativeEmailPath
     .replace(directory.relativePath, '')
-    .split('/')
+    .split(pathSeparator)
     .filter(Boolean);
 
-  return containsEmailPathSegments(emailPathSegments, directory);
+  return containsEmailPathSegments(emailPathSegments, directory, pathSeparator);
 };
 
 const containsEmailPathSegments = (
   relativeEmailSegments: string[],
   directory: EmailsDirectory,
+  pathSeparator: string,
 ) => {
   if (relativeEmailSegments.length === 1) {
     const emailFilename = removeFilenameExtension(relativeEmailSegments[0]!);
     return directory.emailFilenames.includes(emailFilename);
   }
 
-  const remainingPath = relativeEmailSegments.join('/');
+  const remainingPath = relativeEmailSegments.join(pathSeparator);
 
   for (const subDirectory of directory.subDirectories) {
     if (remainingPath.startsWith(subDirectory.directoryName)) {
       const matchedSegments = subDirectory.directoryName
-        .split('/')
+        .split(pathSeparator)
         .filter(Boolean).length;
 
       return containsEmailPathSegments(
         relativeEmailSegments.slice(matchedSegments),
         subDirectory,
+        pathSeparator,
       );
     }
   }

package/src/utils/get-emails-directory-metadata.spec.ts

@@ -13,7 +13,7 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
     emailFilenames: [],
     subDirectories: [
       {
-        absolutePath: `${emailsDirectoryPath}/magic-links`,
+        absolutePath: path.join(emailsDirectoryPath, 'magic-links'),
         directoryName: 'magic-links',
         relativePath: 'magic-links',
         emailFilenames: [
@@ -27,7 +27,7 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/newsletters`,
+        absolutePath: path.join(emailsDirectoryPath, 'newsletters'),
         directoryName: 'newsletters',
         relativePath: 'newsletters',
         emailFilenames: [
@@ -38,7 +38,7 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/notifications`,
+        absolutePath: path.join(emailsDirectoryPath, 'notifications'),
         directoryName: 'notifications',
         relativePath: 'notifications',
         emailFilenames: [
@@ -50,28 +50,28 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/receipts`,
+        absolutePath: path.join(emailsDirectoryPath, 'receipts'),
         directoryName: 'receipts',
         relativePath: 'receipts',
         emailFilenames: ['apple-receipt', 'nike-receipt'],
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/reset-password`,
+        absolutePath: path.join(emailsDirectoryPath, 'reset-password'),
         directoryName: 'reset-password',
         relativePath: 'reset-password',
         emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/reviews`,
+        absolutePath: path.join(emailsDirectoryPath, 'reviews'),
         directoryName: 'reviews',
         relativePath: 'reviews',
         emailFilenames: ['airbnb-review', 'amazon-review'],
         subDirectories: [],
       },
       {
-        absolutePath: `${emailsDirectoryPath}/welcome`,
+        absolutePath: path.join(emailsDirectoryPath, 'welcome'),
         directoryName: 'welcome',
         relativePath: 'welcome',
         emailFilenames: ['koala-welcome', 'netlify-welcome', 'stripe-welcome'],