react-email 1.5.0 → 1.5.2

package/dist/commands/export.d.ts

@@ -0,0 +1 @@
+export declare const exportTemplates: (outDir: string, pretty: boolean) => Promise<void>;

package/dist/commands/export.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportTemplates = void 0;
+const glob_1 = require("glob");
+const esbuild_1 = __importDefault(require("esbuild"));
+const tree_node_cli_1 = __importDefault(require("tree-node-cli"));
+const ora_1 = __importDefault(require("ora"));
+const log_symbols_1 = __importDefault(require("log-symbols"));
+const render_1 = require("@react-email/render");
+const fs_1 = require("fs");
+const cpy_1 = __importDefault(require("cpy"));
+const normalize_path_1 = __importDefault(require("normalize-path"));
+const utils_1 = require("../utils");
+/*
+  This first builds all the templates using esbuild and then puts the output in the `.js`
+  files. Then these `.js` files are imported dynamically and rendered to `.html` files
+  using the `render` function.
+ */
+const exportTemplates = async (outDir, pretty) => {
+    const spinner = (0, ora_1.default)('Preparing files...\n').start();
+    const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
+    esbuild_1.default.buildSync({
+        bundle: true,
+        entryPoints: allTemplates,
+        platform: 'node',
+        write: true,
+        outdir: outDir,
+    });
+    const allBuiltTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${outDir}/*.js`), {
+        absolute: true,
+    });
+    for (const template of allBuiltTemplates) {
+        const component = await Promise.resolve().then(() => __importStar(require(template)));
+        const rendered = (0, render_1.render)(component.default(), { pretty });
+        const htmlPath = template.replace('.js', '.html');
+        (0, fs_1.writeFileSync)(htmlPath, rendered);
+        (0, fs_1.unlinkSync)(template);
+    }
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
+    if (hasStaticDirectory) {
+        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${outDir}/static`);
+    }
+    const fileTree = (0, tree_node_cli_1.default)(outDir, {
+        allFiles: true,
+        maxDepth: 4,
+    });
+    console.log(fileTree);
+    spinner.stopAndPersist({
+        symbol: log_symbols_1.default.success,
+        text: 'Successfully exported emails',
+    });
+};
+exports.exportTemplates = exportTemplates;

package/dist/commands/exportTemplates.js

@@ -35,6 +35,7 @@ const log_symbols_1 = __importDefault(require("log-symbols"));
 const render_1 = require("@react-email/render");
 const fs_1 = require("fs");
 const cpy_1 = __importDefault(require("cpy"));
+const normalize_path_1 = __importDefault(require("normalize-path"));
 const utils_1 = require("../utils");
 /*
   This first builds all the templates using esbuild and then puts the output in the `.js`
@@ -43,7 +44,7 @@ const utils_1 = require("../utils");
  */
 const exportTemplates = async (outDir, pretty) => {
     const spinner = (0, ora_1.default)('Preparing files...\n').start();
-    const allTemplates = glob_1.glob.sync(`${utils_1.CLIENT_EMAILS_PATH}/*.{tsx,jsx}`);
+    const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
     esbuild_1.default.buildSync({
         bundle: true,
         entryPoints: allTemplates,
@@ -51,7 +52,7 @@ const exportTemplates = async (outDir, pretty) => {
         write: true,
         outdir: outDir,
     });
-    const allBuiltTemplates = glob_1.glob.sync(`${outDir}/*.js`, {
+    const allBuiltTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${outDir}/*.js`), {
         absolute: true,
     });
     for (const template of allBuiltTemplates) {

package/dist/utils/watcher.js

@@ -16,7 +16,7 @@ exports.watcherInstance = chokidar_1.default.watch(constants_1.CLIENT_EMAILS_PAT
 });
 const watcher = () => exports.watcherInstance.on('all', async (event, filename) => {
     if (event === constants_1.EVENT_FILE_DELETED) {
-        const file = filename.split('/');
+        const file = filename.split(path_1.default.sep);
         if (file[1] === 'static') {
             if (file[2]) {
                 await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public', 'static', file[2]));
@@ -26,7 +26,7 @@ const watcher = () => exports.watcherInstance.on('all', async (event, filename)
         await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, filename));
     }
     else {
-        const file = filename.split('/');
+        const file = filename.split(path_1.default.sep);
         if (file[1] === 'static') {
             await (0, cpy_1.default)(`${constants_1.CLIENT_EMAILS_PATH}/static/${file[2]}`, `${constants_1.REACT_EMAIL_ROOT}/public/static`);
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -30,22 +30,24 @@
   },
   "dependencies": {
     "@commander-js/extra-typings": "9.4.1",
-    "@react-email/render": "*",
+    "@react-email/render": "0.0.3",
     "chokidar": "3.5.3",
     "commander": "9.4.1",
     "cpy": "8.1.2",
     "esbuild": "0.16.4",
     "glob": "8.0.3",
     "log-symbols": "4.1.0",
+    "normalize-path": "3.0.0",
     "ora": "5.4.1",
     "read-pkg": "5.2.0",
     "shelljs": "0.8.5",
-    "tree-node-cli": "^1.6.0"
+    "tree-node-cli": "1.6.0"
   },
   "devDependencies": {
     "@types/node": "18.11.9",
+    "@types/normalize-path": "3.0.0",
     "@types/shelljs": "0.8.11",
     "prettier": "2.7.1",
     "ts-node": "10.9.1"
   }
-}
+}

package/preview/package.json

@@ -18,10 +18,10 @@
     "@next/font": "13.0.4",
     "@radix-ui/colors": "0.1.8",
     "@radix-ui/react-collapsible": "1.0.1",
-    "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-popover": "1.0.2",
     "@radix-ui/react-slot": "1.0.1",
     "@radix-ui/react-toggle-group": "1.0.1",
-    "@radix-ui/react-tooltip": "^1.0.2",
+    "@radix-ui/react-tooltip": "1.0.2",
     "@react-email/render": "0.0.2",
     "classnames": "2.3.2",
     "next": "13.0.4",

package/source/commands/exportTemplates.ts

@@ -6,6 +6,7 @@ import logSymbols from 'log-symbols';
 import { render } from '@react-email/render';
 import { unlinkSync, writeFileSync } from 'fs';
 import copy from 'cpy';
+import normalize from 'normalize-path';
 import { checkDirectoryExist, CLIENT_EMAILS_PATH } from '../utils';
 
 /*
@@ -15,7 +16,7 @@ import { checkDirectoryExist, CLIENT_EMAILS_PATH } from '../utils';
  */
 export const exportTemplates = async (outDir: string, pretty: boolean) => {
   const spinner = ora('Preparing files...\n').start();
-  const allTemplates = glob.sync(`${CLIENT_EMAILS_PATH}/*.{tsx,jsx}`);
+  const allTemplates = glob.sync(normalize(`${CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
 
   esbuild.buildSync({
     bundle: true,
@@ -25,7 +26,7 @@ export const exportTemplates = async (outDir: string, pretty: boolean) => {
     outdir: outDir,
   });
 
-  const allBuiltTemplates = glob.sync(`${outDir}/*.js`, {
+  const allBuiltTemplates = glob.sync(normalize(`${outDir}/*.js`), {
     absolute: true,
   });
 

package/source/utils/watcher.ts

@@ -19,7 +19,7 @@ export const watcherInstance = chokidar.watch(CLIENT_EMAILS_PATH, {
 export const watcher = () =>
   watcherInstance.on('all', async (event, filename) => {
     if (event === EVENT_FILE_DELETED) {
-      const file = filename.split('/');
+      const file = filename.split(path.sep);
 
       if (file[1] === 'static') {
         if (file[2]) {
@@ -32,7 +32,7 @@ export const watcher = () =>
 
       await fs.promises.rm(path.join(REACT_EMAIL_ROOT, filename));
     } else {
-      const file = filename.split('/');
+      const file = filename.split(path.sep);
 
       if (file[1] === 'static') {
         await copy(

package/preview/src/components/kbd.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-export interface KbdProps { }
-
-type KbdElement = React.ElementRef<'kbd'>;
-type RootProps = React.ComponentPropsWithoutRef<'kbd'>;
-
-export interface KbdProps extends RootProps { }
-
-export const Kbd = React.forwardRef<KbdElement, Readonly<KbdProps>>(
-  ({ children }, forwardedRef) => (
-    <kbd
-      ref={forwardedRef}
-      className="uppercase bg-slate-7 text-slate-11 rounded-md py-[2px] px-[6px] ml-1 text-xs"
-    >
-      {children}
-    </kbd>
-  ),
-);
-
-Kbd.displayName = 'Kbd';