fix (vs-code-ext): update the preview on save

this is because it just became to coomplicated when trying to update on text change
but there are still a few commits before this that are trying to make this work, couldn't make it work
well though

Author: gabrielmfern

packages/vs-code-extension/src/extension.ts

@@ -38,9 +38,9 @@ export function activate(context: vscode.ExtensionContext) {
 
       previewPanel.onDidDispose(() => (previewPanel = undefined));
 
-      vscode.workspace.onDidChangeTextDocument((ev) => {
+      vscode.workspace.onDidSaveTextDocument((ev) => {
         if (
-          ev.document.fileName ===
+          ev.fileName ===
           vscode.window.activeTextEditor?.document.fileName
         ) {
           updatePreiewPanel(previewPanel);

packages/vs-code-extension/src/renderOpenEmailFile.ts

@@ -2,10 +2,10 @@ import * as vscode from "vscode";
 
 import * as crypto from "crypto";
 import { basename, join } from "path";
-import { unlinkSync, writeFileSync } from "fs";
 import * as esbuild from "esbuild";
 
 import { render } from "@react-email/render";
+import { unlink } from "fs/promises";
 
 const extensionPreviewFolder = ".vscpreview" as const;
 
@@ -18,9 +18,9 @@ export type BuiltEmail =
     }
   | { valid: false };
 
-export function renderOpenEmailFile(
+export async function renderOpenEmailFile(
   activeEditor: vscode.TextEditor | undefined,
-): BuiltEmail | undefined {
+): Promise<BuiltEmail | undefined> {
   if (typeof activeEditor !== "undefined") {
     if (
       typeof activeEditor.document.fileName === "undefined" ||
@@ -36,39 +36,26 @@ export function renderOpenEmailFile(
     const emailsDirectory = join(currentlyOpenTabFilePath, "..");
     const previewDirectory = join(emailsDirectory, extensionPreviewFolder);
 
-    // this hash is needed so the temporary files don't get mixed up
-    // when changing the email very fast
+    // this hash is needed so the the import doesn't get from its cache
     const renderingHash = crypto.randomBytes(20).toString('hex');
-    
-    // this is necessary so that we can still build things in a stable way
-    // and have a up-to date version of the email preview on the extension
-    const currentlyOpenTabFilesPathWithCurrentContents = join(
-      emailsDirectory,
-      `${currentlyOpenTabFilename}-${renderingHash}.vscpreview.tsx`,
-    );
-    const currentContents = activeEditor.document.getText();
-    writeFileSync(
-      currentlyOpenTabFilesPathWithCurrentContents,
-      currentContents,
-    );
 
     const builtFileWithCurrentContents = join(
       previewDirectory,
       `${currentlyOpenTabFilename}-${renderingHash}.js`,
     );
 
     try {
-      esbuild.buildSync({
+      await esbuild.build({
         bundle: true,
-        entryPoints: [currentlyOpenTabFilesPathWithCurrentContents],
+        entryPoints: [currentlyOpenTabFilePath],
         platform: "node",
         write: true,
         outfile: builtFileWithCurrentContents,
       });
 
-      delete require.cache[builtFileWithCurrentContents];
-      // we need to use require since it has a way to programatically invalidate its cache
-      const email = require(builtFileWithCurrentContents);
+      // for future people debugging this: if this doesnt update the preview, might be because import keeps a cache
+      // and the hash is not being unique (unlikely though)
+      const email = await import(builtFileWithCurrentContents);
 
       if (typeof email.default === "undefined") {
         // this means there is no "export default ..." in the file
@@ -83,8 +70,7 @@ export function renderOpenEmailFile(
 
       const emailAsHTML = render(comp, { pretty: false });
 
-      unlinkSync(builtFileWithCurrentContents);
-      unlinkSync(currentlyOpenTabFilesPathWithCurrentContents);
+      await unlink(builtFileWithCurrentContents);
 
       return {
         filename: currentlyOpenTabFilename,