feat (vs-code-ext): keybindings for the opening of the preview

Author: gabrielmfern

packages/vs-code-extension/CHANGELOG.md

@@ -6,4 +6,4 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ## [Unreleased]
 
-- Initial release
+- Initial release

packages/vs-code-extension/README.md

@@ -1,4 +1,3 @@
 # react-email preview
 
 A easy way to have a preview of an email written with react-email from your editor.
-

packages/vs-code-extension/package.json

@@ -19,8 +19,15 @@
   "contributes": {
     "commands": [
       {
-        "command": "react-email-preview.preview",
-        "title": "Live preview of email open"
+        "command": "react-email-preview.open",
+        "title": "Start live preview of email open"
+      }
+    ],
+    "keybindings": [
+      {
+        "command": "react-email-preview.open",
+        "key": "shift+ctrl+e",
+        "mac": "shift+cmd+e"
       }
     ]
   },

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

@@ -1,15 +1,15 @@
-import * as vscode from 'vscode';
+import * as vscode from "vscode";
 
 /**
- * @description Replaces all occurrences of src="/static/..." with a 
+ * @description Replaces all occurrences of src="/static/..." with a
  * uri vscode will allow using because of their restrictness about accessing
  * local files.
- * 
+ *
  * @param originalHTML The HTML generated for the webview that will be used to find the src="/static/..."
  * occurrences.
  * @param emailsDirVSCodeURI The path to the emails folder that the email is contained in
  * @param previewPanel The panel that the extensions is running the preview on
- * 
+ *
  * @returns A new version of the HTML with the proper static paths so the user can see them
  */
 export function convertAllEmailAssetSourcesIntoWebviewURIs(
@@ -27,4 +27,4 @@ export function convertAllEmailAssetSourcesIntoWebviewURIs(
       return `src="${newSource}"`;
     },
   );
-}
+}

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

@@ -37,19 +37,24 @@ export function activate(context: vscode.ExtensionContext) {
                 ), // the emails folder
                 previewPanel,
               );
-          } 
+          }
           // keeps the current content if the email is invalid and did not error
-          // this invalidness can happen if the focused content is a image, 
+          // this invalidness can happen if the focused content is a image,
           // does not a export a default and for some other similar situations
         } catch (exception) {
-          previewPanel.title = `react-email preview - error on the email ${basename(vscode.window.activeTextEditor.document.fileName)}`;
+          previewPanel.title = `react-email preview - error on the email ${basename(
+            vscode.window.activeTextEditor.document.fileName,
+          )}`;
           let errorMessage: string;
           if (exception instanceof Error) {
             errorMessage = exception.stack ?? exception.message;
           } else {
             errorMessage = exception as string;
           }
-          previewPanel.webview.html = emailWithErrorHTML.replace('{ERROR MESSAGE}', errorMessage);
+          previewPanel.webview.html = emailWithErrorHTML.replace(
+            "{ERROR MESSAGE}",
+            errorMessage,
+          );
         }
       } else if (previewPanel.webview.html.trim().length === 0) {
         previewPanel.title = `react-email preview - try opening an email!`;
@@ -59,7 +64,7 @@ export function activate(context: vscode.ExtensionContext) {
   };
 
   let disposable = vscode.commands.registerCommand(
-    "react-email-preview.preview",
+    "react-email-preview.open",
     () => {
       previewPanel = vscode.window.createWebviewPanel(
         "react-email preview",
@@ -71,7 +76,10 @@ export function activate(context: vscode.ExtensionContext) {
       updatePreviewPanelContent();
 
       vscode.workspace.onDidChangeTextDocument((ev) => {
-        if (ev.document.fileName === vscode.window.activeTextEditor?.document.fileName) {
+        if (
+          ev.document.fileName ===
+          vscode.window.activeTextEditor?.document.fileName
+        ) {
           updatePreviewPanelContent();
         }
       });

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

@@ -29,7 +29,6 @@ export async function renderOpenEmailFile(
       return { valid: false };
     }
 
-
     const currentlyOpenTabFilePath = activeEditor.document.fileName; // actually a path not the name of the file
     const currentlyOpenTabFilename = basename(currentlyOpenTabFilePath, ".tsx");
 
@@ -38,11 +37,20 @@ export async function renderOpenEmailFile(
 
     // 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}.vscpreview.tsx`);
+    const currentlyOpenTabFilesPathWithCurrentContents = join(
+      emailsDirectory,
+      `${currentlyOpenTabFilename}.vscpreview.tsx`,
+    );
     const currentContents = activeEditor.document.getText();
-    await writeFile(currentlyOpenTabFilesPathWithCurrentContents, currentContents);
+    await writeFile(
+      currentlyOpenTabFilesPathWithCurrentContents,
+      currentContents,
+    );
 
-    const builtFileWithCurrentContents = join(previewDirectory, `${currentlyOpenTabFilename}.js`);
+    const builtFileWithCurrentContents = join(
+      previewDirectory,
+      `${currentlyOpenTabFilename}.js`,
+    );
 
     try {
       await esbuild.build({
@@ -59,7 +67,8 @@ export async function renderOpenEmailFile(
       // we need to use require since it has a way to programatically invalidate its cache
       const email = require(builtFileWithCurrentContents);
 
-      if (typeof email.default === "undefined") { // this means there is no "export default ..." in the file
+      if (typeof email.default === "undefined") {
+        // this means there is no "export default ..." in the file
         return { valid: false };
       }