react-email 2.0.0-canary.3 → 2.0.0-canary.4

package/dist/source/utils/watcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watcher.d.ts","sourceRoot":"","sources":["../../../source/utils/watcher.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAU1C,eAAO,MAAM,qBAAqB,aAAc,MAAM,cAerD,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,SAAS,YAAY,MAAM,SAkCnE,CAAC"}

package/dist/source/utils/watcher.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watcher = exports.createWatcherInstance = void 0;
+var node_fs_1 = __importDefault(require("node:fs"));
+var node_path_1 = __importDefault(require("node:path"));
+var chokidar_1 = require("chokidar");
+var shelljs_1 = require("shelljs");
+var constants_1 = require("./constants");
+var generate_email_preview_1 = require("./generate-email-preview");
+var createWatcherInstance = function (watchDir) {
+    var watcher = (0, chokidar_1.watch)(watchDir, {
+        ignoreInitial: true,
+        cwd: watchDir.split(node_path_1.default.sep).slice(0, -1).join(node_path_1.default.sep),
+        ignored: /(^|[/\\])\../,
+    });
+    // Catches ctrl+c event
+    var exit = function () {
+        void watcher.close();
+    };
+    process.on('SIGINT', exit);
+    process.on('uncaughtException', exit);
+    return watcher;
+};
+exports.createWatcherInstance = createWatcherInstance;
+var watcher = function (watcherInstance, watchDir) {
+    watcherInstance.on('all', function (event, filename) {
+        var file = filename.split(node_path_1.default.sep);
+        if (file[1] === undefined) {
+            return;
+        }
+        if (event === constants_1.EVENT_FILE_DELETED) {
+            if (file[1] === 'static' && file[2]) {
+                node_fs_1.default.rmSync(node_path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public', 'static', file[2]));
+                return;
+            }
+            node_fs_1.default.rmSync(node_path_1.default.join(constants_1.REACT_EMAIL_ROOT, filename));
+            return;
+        }
+        if (file[1] === 'static' && file[2]) {
+            var srcPath = node_path_1.default.join(watchDir, 'static', file[2]);
+            var result = (0, shelljs_1.cp)('-r', srcPath, node_path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public', 'static'));
+            if (result.code > 0) {
+                throw new Error("Something went wrong while copying the file to ".concat(constants_1.PACKAGE_EMAILS_PATH, ", ").concat(result.cat()));
+            }
+            return;
+        }
+        void (0, generate_email_preview_1.generateEmailsPreview)(watchDir, 'templates');
+    });
+};
+exports.watcher = watcher;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "2.0.0-canary.3",
+  "version": "2.0.0-canary.4",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./cli/index.js"

package/src/app/preview/[slug]/rendering-error.tsx

@@ -5,13 +5,29 @@ export const RenderingError = (props: { error: ErrorObject }) => {
   return (
     <>
       <div className="absolute inset-0 z-50 bg-black/80" />
-      <div className="md:max-w-[568px] lg:max-w-[968px] absolute left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-red-600 bg-red-500 text-white p-6 shadow-lg duration-200 sm:rounded-lg">
+      <div className="md:max-w-[568px] lg:max-w-[968px] absolute left-[50%] top-[50%] min-h-[50vh] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-t-4 border-red-500 bg-white text-black p-6 shadow-lg duration-200 sm:rounded-lg rounded-t-sm">
         <div className="flex flex-col max-w-full min-w-0 space-y-1.5">
-          <h2 className="text-lg font-semibold pb-2 leading-none tracking-tight">
+          <h2 className="text-lg flex items-center flex-shrink gap-2 font-semibold pb-2 leading-none tracking-tight">
+            <svg
+              className="h-6 w-6 text-red-600 font-extrabold"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+              <path d="M12 9v4" />
+              <path d="M12 17h.01" />
+            </svg>
             {props.error.name}: {props.error.message}
           </h2>
           {props.error.stack ? (
-            <div className="text-sm p-2 scroll-px-4 overflow-x-auto bg-red-900 rounded-lg text-gray-100">
+            <div className="text-sm p-2 flex-grow scroll-px-4 overflow-x-auto bg-red-800 rounded-lg text-gray-100">
               <pre className="font-mono w-full min-w-0 leading-7">
                 {props.error.stack}
               </pre>

package/src/components/sidebar/sidebar-directory-children.tsx

@@ -85,7 +85,11 @@ export const SidebarDirectoryChildren = (props: {
                               <div className="bg-cyan-11 w-px absolute top-1 left-2.5 h-6" />
                             </motion.span>
                           ) : null}
-                          <IconFile className="absolute left-4 w-[24px] h-[24px]" height="24" width="24" />
+                          <IconFile
+                            className="absolute left-4 w-[24px] h-[24px]"
+                            height="24"
+                            width="24"
+                          />
                           <span className="truncate pl-8">{emailFilename}</span>
                         </motion.span>
                       </Link>

package/src/components/sidebar/sidebar.tsx

@@ -17,7 +17,11 @@ export const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(
     const { emailsDirectoryMetadata } = useEmails();
 
     return (
-      <aside className={cn('border-r border-slate-6', className)} ref={forwardedRef} {...props}>
+      <aside
+        className={cn('border-r border-slate-6', className)}
+        ref={forwardedRef}
+        {...props}
+      >
         <nav className="p-6 w-screen h-full md:w-full md:min-w-[275px] md:max-w-[275px] flex flex-col gap-4">
           <SidebarDirectory
             className="min-w-full w-full"