feat (packages): VS Code extension for previewing emails just like markdown

packages/react-email/src/utils/get-email-component.ts

@@ -95,7 +95,7 @@ export const getEmailComponent = async (
 
       if (m in staticNodeModulesForVM) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return staticNodeModulesForVM[m];
+        return staticNodeModulesForVM[m as keyof typeof staticNodeModulesForVM];
       }
 
       // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-useless-template-literals

vs-code-extension/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/semi": "warn",
+    "curly": "warn",
+    "eqeqeq": "warn",
+    "no-throw-literal": "warn",
+    "semi": "off"
+  },
+  "ignorePatterns": [
+    "out",
+    "dist",
+    "**/*.d.ts"
+  ]
+}

vs-code-extension/.gitignore

@@ -0,0 +1,2 @@
+# the packaged version of the vs code extension for publishing
+react-email-preview-*.vsix

vs-code-extension/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"dbaeumer.vscode-eslint"
+	]
+}

vs-code-extension/.vscode/launch.json

@@ -0,0 +1,34 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		},
+		{
+			"name": "Extension Tests",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/test/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

vs-code-extension/.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

vs-code-extension/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

vs-code-extension/.vscodeignore

@@ -0,0 +1,12 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+vsc-extension-quickstart.md
+node_modules/
+!node_modules/esbuild
+!node_modules/@esbuild
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts

vs-code-extension/CHANGELOG.md

@@ -0,0 +1,37 @@
+# Change Log
+
+All notable changes to the "react-email-preview" extension will be documented in this file.
+
+## 0.0.4 - 2024-27-01
+
+### Features
+
+- Update building mechanism to not create temporary javascript files
+- Upgrade esbuild to not need a `tsconfig`, meaning aliases and other things should now work properly
+
+## 0.0.2 - 2023-11-04
+
+### Features
+
+- Update the display name to "React Email"
+
+### Fixes
+
+- OS issues with esbuild
+
+## 0.0.1 - 2023-11-04
+
+### Fixes
+
+- Fixed build files not being deleted for files that are not email templates
+
+## 0.0.0 - 2023-11-04
+
+Released first version for testing.
+
+### Features
+
+- Command (`CTRL + SHIFT + E` or `CMD + SHIFT + E`) for opening split for preview
+- Preview updates on file save
+- When changing files the preview updates
+- Multiple previews can't be open

vs-code-extension/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2022 Bu Kinoshita and Zeno Rocha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

vs-code-extension/README.md

@@ -0,0 +1,37 @@
+![React email cover](https://react.email/static/covers/react-email.png)
+
+<div align="center"><strong>React Email Preview for VS Code</strong></div>
+<div align="center">The next generation of writing emails.<br />High-quality, unstyled components for creating emails.</div>
+<br />
+<div align="center">
+<a href="https://react.email">Website</a> 
+<span> · </span>
+<a href="https://github.com/resendlabs/react-email">GitHub</a> 
+<span> · </span>
+<a href="https://react.email/discord">Discord</a>
+</div>
+
+A easy way to have a preview of an email written with [react-email](https://github.com/resendlabs/react-email) from your editor.
+
+## How to use?
+
+To use it, you will need to run the command from the command pallete, or you will need
+to use the keybinding that is by default `CTRL + SHIFT + E` (or `CMD + SHIFT + E` for Mac).
+
+Once you run the command, a split will appear with a welcome message, once you focus a email
+written with react-email, it will auto-detect and render it automatically for you showing a preview of
+how it looks.
+
+Something important is that the `vsce` doesn't play well with workspaces so the `package` script might break
+when trying to run with the extension included in the monorepo.
+
+## Found a bug?
+
+If you have found a bug, even if small, please open a issue [here](https://github.com/resendlabs/react-email/issues).
+We want for `react-email` to bring the best developer experience possible and your feedback is very welcome.
+
+## What is react-email?
+
+React Email is a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you.
+
+Find out more [here](https://react.email/).