diff --git a/packages/visual-studio-code-extension/package.json b/packages/visual-studio-code-extension/package.json index 262f1dff01..54cf936c50 100644 --- a/packages/visual-studio-code-extension/package.json +++ b/packages/visual-studio-code-extension/package.json @@ -42,6 +42,7 @@ "publish": "vsce publish", "package": "node ./prebuild.mjs && vsce package", "vscode:prepublish": "pnpm build --minify", + "dev": "pnpm build --watch", "build": "esbuild ./src/extension.ts --bundle --outfile=out/extension.js --tsconfig=./tsconfig.json --external:vscode --external:esbuild --format=cjs --platform=node", "pretest": "pnpm build && pnpm lint", "lint": "eslint ." @@ -72,7 +73,7 @@ "esbuild": "^0.19.12" }, "devDependencies": { - "@react-email/render": "workspace:*", + "preview-utils": "workspace:*", "@types/mocha": "^10.0.2", "@types/node": "18.x", "@types/vscode": "^1.83.0", diff --git a/packages/visual-studio-code-extension/src/extension.ts b/packages/visual-studio-code-extension/src/extension.ts index 6c742dfebb..ff0c885497 100644 --- a/packages/visual-studio-code-extension/src/extension.ts +++ b/packages/visual-studio-code-extension/src/extension.ts @@ -29,8 +29,8 @@ export function activate(context: vscode.ExtensionContext) { } previewPanel = vscode.window.createWebviewPanel( - "react-email preview - try opening an email", - "react-email preview - try opening an email", + "React Email — try opening an email", + "React Email — try opening an email", vscode.ViewColumn.Two, { enableScripts: true }, ); diff --git a/packages/visual-studio-code-extension/src/render-open-email-file.ts b/packages/visual-studio-code-extension/src/render-open-email-file.ts index eaa794b6d8..05bee1f36e 100644 --- a/packages/visual-studio-code-extension/src/render-open-email-file.ts +++ b/packages/visual-studio-code-extension/src/render-open-email-file.ts @@ -1,18 +1,16 @@ import * as vscode from "vscode"; import * as path from "path"; -import * as vm from "vm"; -import * as esbuild from "esbuild"; -import { render } from "@react-email/render"; +import { isFileAnEmail, renderEmailByPath } from "preview-utils"; export type BuiltEmail = | { - filename: string; - html: string; - text: string; - valid: true; - } + filename: string; + html: string; + text: string; + valid: true; + } | { valid: false }; export async function renderOpenEmailFile( @@ -28,75 +26,31 @@ export async function renderOpenEmailFile( } const currentlyOpenTabFilePath = activeEditor.document.fileName; // actually a path not the name of the file + if (!isFileAnEmail(currentlyOpenTabFilePath)) { + return { valid: false }; + } + const currentlyOpenTabFilename = path.basename( currentlyOpenTabFilePath, ".tsx", ); - try { - const buildResult = await esbuild.build({ - bundle: true, - entryPoints: [currentlyOpenTabFilePath], - platform: "node", - write: false, - jsx: "automatic", - loader: { - // eslint-disable-next-line @typescript-eslint/naming-convention - ".js": "jsx", - }, - format: "cjs", - }); - - console.log(global); - - const fakeContext = { - ...global, - process: { - env: {}, - }, - module: { exports: { default: undefined as unknown } }, - __filanem: currentlyOpenTabFilePath, - __dirname: path.dirname(currentlyOpenTabFilePath), - }; + const result = await renderEmailByPath(currentlyOpenTabFilePath); - try { - vm.runInNewContext(buildResult.outputFiles[0].text, fakeContext, { - filename: currentlyOpenTabFilePath, - }); - } catch (exception) { - throw exception; - } - - if (typeof fakeContext.module.exports.default !== "function") { - return { - valid: false, - }; - } - - const email = fakeContext.module.exports.default; - - const comp = email("PreviewProps" in email ? email.PreviewProps : {}); // this may come without a defualt which might cause problems - const emailAsText = render(comp, { - plainText: true, - pretty: false, - }); - - const emailAsHTML = render(comp, { pretty: false }); - - return { - filename: currentlyOpenTabFilename, - html: emailAsHTML, - text: emailAsText, - valid: true, - }; - } catch (exception) { - console.warn( - "Exception happenned on rendering or building of an email, but maybe its because it just was invalid anyways", - exception, - ); - - throw exception; + if ("error" in result) { + const err = new Error(result.error.message); + err.stack = result.error.stack; + err.name = result.error.name; + err.cause = result.error.cause; + throw err; } + + return { + valid: true, + filename: currentlyOpenTabFilename, + html: result.markup, + text: result.plainText, + }; } return undefined; diff --git a/packages/visual-studio-code-extension/src/update-preview-panel.ts b/packages/visual-studio-code-extension/src/update-preview-panel.ts index 9310db5667..8e741b23fa 100644 --- a/packages/visual-studio-code-extension/src/update-preview-panel.ts +++ b/packages/visual-studio-code-extension/src/update-preview-panel.ts @@ -22,7 +22,10 @@ export async function updatePreiewPanel( builtEmail.html && builtEmail.html.trim().length > 0 ) { - previewPanel.title = `react-email preview - ${builtEmail.filename}`; + previewPanel.title = `React Email — ${builtEmail.filename}`; + console.log( + builtEmail.html + ); previewPanel.webview.html = convertAllEmailAssetSourcesIntoWebviewURIs( builtEmail.html, @@ -37,7 +40,7 @@ export async function updatePreiewPanel( // 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( + previewPanel.title = `React Email — error on the email ${basename( vscode.window.activeTextEditor.document.fileName, )}`; let errorMessage: string; @@ -52,7 +55,7 @@ export async function updatePreiewPanel( ); } } else if (previewPanel.webview.html.trim().length === 0) { - previewPanel.title = `react-email preview - try opening an email!`; + previewPanel.title = `React Email — try opening an email!`; previewPanel.webview.html = noEmailOpenHTML; } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5036049489..8e8d20d928 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1396,9 +1396,6 @@ importers: specifier: ^0.19.12 version: 0.19.12 devDependencies: - '@react-email/render': - specifier: workspace:* - version: link:../render '@types/mocha': specifier: ^10.0.2 version: 10.0.10 @@ -1429,6 +1426,9 @@ importers: mocha: specifier: ^10.2.0 version: 10.8.2 + preview-utils: + specifier: workspace:* + version: link:../preview-utils typescript: specifier: ^5.2.2 version: 5.4.2 @@ -2077,7 +2077,6 @@ packages: '@esbuild/android-arm64@0.19.12': resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==} engines: {node: '>=12'} - cpu: [arm64] os: [android] '@esbuild/android-arm64@0.20.2': @@ -2119,7 +2118,6 @@ packages: '@esbuild/android-arm@0.19.12': resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==} engines: {node: '>=12'} - cpu: [arm] os: [android] '@esbuild/android-arm@0.20.2': @@ -2155,7 +2153,6 @@ packages: '@esbuild/android-x64@0.19.12': resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==} engines: {node: '>=12'} - cpu: [x64] os: [android] '@esbuild/android-x64@0.20.2': @@ -2191,7 +2188,6 @@ packages: '@esbuild/darwin-arm64@0.19.12': resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==} engines: {node: '>=12'} - cpu: [arm64] os: [darwin] '@esbuild/darwin-arm64@0.20.2': @@ -2227,7 +2223,6 @@ packages: '@esbuild/darwin-x64@0.19.12': resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==} engines: {node: '>=12'} - cpu: [x64] os: [darwin] '@esbuild/darwin-x64@0.20.2': @@ -2263,7 +2258,6 @@ packages: '@esbuild/freebsd-arm64@0.19.12': resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==} engines: {node: '>=12'} - cpu: [arm64] os: [freebsd] '@esbuild/freebsd-arm64@0.20.2': @@ -2299,7 +2293,6 @@ packages: '@esbuild/freebsd-x64@0.19.12': resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==} engines: {node: '>=12'} - cpu: [x64] os: [freebsd] '@esbuild/freebsd-x64@0.20.2': @@ -2335,7 +2328,6 @@ packages: '@esbuild/linux-arm64@0.19.12': resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==} engines: {node: '>=12'} - cpu: [arm64] os: [linux] '@esbuild/linux-arm64@0.20.2': @@ -2371,7 +2363,6 @@ packages: '@esbuild/linux-arm@0.19.12': resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==} engines: {node: '>=12'} - cpu: [arm] os: [linux] '@esbuild/linux-arm@0.20.2': @@ -2407,7 +2398,6 @@ packages: '@esbuild/linux-ia32@0.19.12': resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==} engines: {node: '>=12'} - cpu: [ia32] os: [linux] '@esbuild/linux-ia32@0.20.2': @@ -2449,7 +2439,6 @@ packages: '@esbuild/linux-loong64@0.19.12': resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==} engines: {node: '>=12'} - cpu: [loong64] os: [linux] '@esbuild/linux-loong64@0.20.2': @@ -2485,7 +2474,6 @@ packages: '@esbuild/linux-mips64el@0.19.12': resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==} engines: {node: '>=12'} - cpu: [mips64el] os: [linux] '@esbuild/linux-mips64el@0.20.2': @@ -2521,7 +2509,6 @@ packages: '@esbuild/linux-ppc64@0.19.12': resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==} engines: {node: '>=12'} - cpu: [ppc64] os: [linux] '@esbuild/linux-ppc64@0.20.2': @@ -2557,7 +2544,6 @@ packages: '@esbuild/linux-riscv64@0.19.12': resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==} engines: {node: '>=12'} - cpu: [riscv64] os: [linux] '@esbuild/linux-riscv64@0.20.2': @@ -2593,7 +2579,6 @@ packages: '@esbuild/linux-s390x@0.19.12': resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==} engines: {node: '>=12'} - cpu: [s390x] os: [linux] '@esbuild/linux-s390x@0.20.2': @@ -2629,7 +2614,6 @@ packages: '@esbuild/linux-x64@0.19.12': resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==} engines: {node: '>=12'} - cpu: [x64] os: [linux] '@esbuild/linux-x64@0.20.2': @@ -2665,7 +2649,6 @@ packages: '@esbuild/netbsd-x64@0.19.12': resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==} engines: {node: '>=12'} - cpu: [x64] os: [netbsd] '@esbuild/netbsd-x64@0.20.2': @@ -2707,7 +2690,6 @@ packages: '@esbuild/openbsd-x64@0.19.12': resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==} engines: {node: '>=12'} - cpu: [x64] os: [openbsd] '@esbuild/openbsd-x64@0.20.2': @@ -2743,7 +2725,6 @@ packages: '@esbuild/sunos-x64@0.19.12': resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==} engines: {node: '>=12'} - cpu: [x64] os: [sunos] '@esbuild/sunos-x64@0.20.2': @@ -2779,7 +2760,6 @@ packages: '@esbuild/win32-arm64@0.19.12': resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==} engines: {node: '>=12'} - cpu: [arm64] os: [win32] '@esbuild/win32-arm64@0.20.2': @@ -2815,7 +2795,6 @@ packages: '@esbuild/win32-ia32@0.19.12': resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==} engines: {node: '>=12'} - cpu: [ia32] os: [win32] '@esbuild/win32-ia32@0.20.2': @@ -2851,7 +2830,6 @@ packages: '@esbuild/win32-x64@0.19.12': resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==} engines: {node: '>=12'} - cpu: [x64] os: [win32] '@esbuild/win32-x64@0.20.2':