diff --git a/packages/react-email/src/utils/get-email-component.ts b/packages/react-email/src/utils/get-email-component.ts
index e3eeb5a4de..958e3ab6cd 100644
--- a/packages/react-email/src/utils/get-email-component.ts
+++ b/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
diff --git a/vs-code-extension/.eslintrc.json b/vs-code-extension/.eslintrc.json
new file mode 100644
index 0000000000..4d3dc7b474
--- /dev/null
+++ b/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"
+ ]
+}
diff --git a/vs-code-extension/.gitignore b/vs-code-extension/.gitignore
new file mode 100644
index 0000000000..fedea47b12
--- /dev/null
+++ b/vs-code-extension/.gitignore
@@ -0,0 +1,2 @@
+# the packaged version of the vs code extension for publishing
+react-email-preview-*.vsix
diff --git a/vs-code-extension/.vscode/extensions.json b/vs-code-extension/.vscode/extensions.json
new file mode 100644
index 0000000000..3ac9aeb61e
--- /dev/null
+++ b/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"
+ ]
+}
diff --git a/vs-code-extension/.vscode/launch.json b/vs-code-extension/.vscode/launch.json
new file mode 100644
index 0000000000..670d6e66ce
--- /dev/null
+++ b/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}"
+ }
+ ]
+}
diff --git a/vs-code-extension/.vscode/settings.json b/vs-code-extension/.vscode/settings.json
new file mode 100644
index 0000000000..30bf8c2d3f
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/vs-code-extension/.vscode/tasks.json b/vs-code-extension/.vscode/tasks.json
new file mode 100644
index 0000000000..3b17e53b62
--- /dev/null
+++ b/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
+ }
+ }
+ ]
+}
diff --git a/vs-code-extension/.vscodeignore b/vs-code-extension/.vscodeignore
new file mode 100644
index 0000000000..07c03f9ec2
--- /dev/null
+++ b/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
diff --git a/vs-code-extension/CHANGELOG.md b/vs-code-extension/CHANGELOG.md
new file mode 100644
index 0000000000..13bc4e62dc
--- /dev/null
+++ b/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
diff --git a/vs-code-extension/LICENSE.md b/vs-code-extension/LICENSE.md
new file mode 100644
index 0000000000..3d73625471
--- /dev/null
+++ b/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.
diff --git a/vs-code-extension/README.md b/vs-code-extension/README.md
new file mode 100644
index 0000000000..2a00e0eb1b
--- /dev/null
+++ b/vs-code-extension/README.md
@@ -0,0 +1,37 @@
+
+
+React Email Preview for VS Code
+The next generation of writing emails.
High-quality, unstyled components for creating emails.
+
+
+
+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/).
diff --git a/vs-code-extension/assets/email with error.html b/vs-code-extension/assets/email with error.html
new file mode 100644
index 0000000000..845f24a874
--- /dev/null
+++ b/vs-code-extension/assets/email with error.html
@@ -0,0 +1,1363 @@
+
+
+
+
+
+
+
+
+ {ERROR MESSAGE}
+
+
+
+
diff --git a/vs-code-extension/assets/no email open.html b/vs-code-extension/assets/no email open.html
new file mode 100644
index 0000000000..f9f73654fd
--- /dev/null
+++ b/vs-code-extension/assets/no email open.html
@@ -0,0 +1,1469 @@
+
+
+
+
+
+
+
+
+
+ Welcome to the React Email preview for VS Code!
+
+
+ To see your email's preview, try focusing the file that has the email
+ you want to see! We do our own little magic to load your static
+ files as well!
+
+
Check the docs
+