From c323a99c5de95dd12dfd7470635271d738acc1bb Mon Sep 17 00:00:00 2001
From: Berkan Dirim <berkandirim@gmail.com>
Date: Fri, 18 Sep 2026 14:32:59 +0200
Subject: [PATCH] Fix: Serve preview scripts as virtual modules for Vite
 processing

The issue was that inline <script type="module"> tags with bare imports
like 'react' aren't processed by Vite - only actual .js/.ts files are.

Changed to serve preview scripts at /@htmplar-preview/{template} so Vite
can transform imports and apply optimizeDeps.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 CHANGELOG.md                            |  5 +++++
 packages/cli/package.json               |  2 +-
 packages/cli/src/commands/dev.ts        | 29 +++++++++++++++++--------
 packages/cli/src/commands/init.ts       |  6 ++---
 packages/core/package.json              |  2 +-
 packages/create-htmplar/package.json    |  2 +-
 packages/create-htmplar/src/scaffold.ts |  6 ++---
 packages/renderer/package.json          |  2 +-
 8 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 844bed6..86b19fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0-alpha.7] - 2026-09-18
+
+### Fixed
+- **htmplar-cli**: Serve preview scripts as virtual modules so Vite can process bare imports (fixes React resolution)
+
 ## [2.0.0-alpha.6] - 2026-09-18
 
 ### Fixed
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 8e5a878..06c4bc1 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@adidas/htmplar-cli",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "Command line interface for HTMplar",
   "license": "MIT",
   "repository": {
diff --git a/packages/cli/src/commands/dev.ts b/packages/cli/src/commands/dev.ts
index 706a57a..c4e96dc 100644
--- a/packages/cli/src/commands/dev.ts
+++ b/packages/cli/src/commands/dev.ts
@@ -92,7 +92,6 @@ function createRoutingPlugin(templates: string[]) {
         if (routeMatch) {
           const templateName = routeMatch[1];
           if (templates.includes(templateName)) {
-            const ext = await getTemplateExtension(templateName);
             const html = `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -106,14 +105,7 @@ function createRoutingPlugin(templates: string[]) {
   </head>
   <body>
     <div id="root"></div>
-    <script type="module">
-      import React from 'react';
-      import { createRoot } from 'react-dom/client';
-      import EmailComponent from '/src/${templateName}.${ext}';
-
-      const root = createRoot(document.getElementById('root'));
-      root.render(React.createElement(EmailComponent));
-    </script>
+    <script type="module" src="/@htmplar-preview/${templateName}"></script>
   </body>
 </html>`;
 
@@ -123,6 +115,25 @@ function createRoutingPlugin(templates: string[]) {
           }
         }
 
+        // Virtual module for template preview
+        const previewMatch = url.match(/^\/@htmplar-preview\/([^/?]+)/);
+        if (previewMatch) {
+          const templateName = previewMatch[1];
+          if (templates.includes(templateName)) {
+            const ext = await getTemplateExtension(templateName);
+            const js = `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import EmailComponent from '/src/${templateName}.${ext}';
+
+const root = createRoot(document.getElementById('root'));
+root.render(React.createElement(EmailComponent));`;
+
+            res.setHeader('Content-Type', 'application/javascript');
+            res.end(js);
+            return;
+          }
+        }
+
         next();
       });
     },
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 8b59a68..193297b 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -25,13 +25,13 @@ export async function initProject(name?: string) {
         preview: 'htmplar preview',
       },
       dependencies: {
-        '@adidas/htmplar-core': '^2.0.0-alpha.6',
-        '@adidas/htmplar-renderer': '^2.0.0-alpha.6',
+        '@adidas/htmplar-core': '^2.0.0-alpha.7',
+        '@adidas/htmplar-renderer': '^2.0.0-alpha.7',
         react: '^18.3.1',
         'react-dom': '^18.3.1',
       },
       devDependencies: {
-        '@adidas/htmplar-cli': '^2.0.0-alpha.6',
+        '@adidas/htmplar-cli': '^2.0.0-alpha.7',
         '@types/react': '^18.3.8',
         '@types/react-dom': '^18.3.0',
         typescript: '^5.6.2',
diff --git a/packages/core/package.json b/packages/core/package.json
index 15b07b3..dbaab44 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@adidas/htmplar-core",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "React component library for email development",
   "license": "MIT",
   "repository": {
diff --git a/packages/create-htmplar/package.json b/packages/create-htmplar/package.json
index 311f67e..c92f3fc 100644
--- a/packages/create-htmplar/package.json
+++ b/packages/create-htmplar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@adidas/create-htmplar",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "Scaffold new HTMplar projects",
   "license": "MIT",
   "repository": {
diff --git a/packages/create-htmplar/src/scaffold.ts b/packages/create-htmplar/src/scaffold.ts
index e4e193c..21ce407 100644
--- a/packages/create-htmplar/src/scaffold.ts
+++ b/packages/create-htmplar/src/scaffold.ts
@@ -172,13 +172,13 @@ async function createPackageJson(config: ProjectConfig) {
       preview: 'htmplar preview',
     },
     dependencies: {
-      '@adidas/htmplar-core': '^2.0.0-alpha.6',
-      '@adidas/htmplar-renderer': '^2.0.0-alpha.6',
+      '@adidas/htmplar-core': '^2.0.0-alpha.7',
+      '@adidas/htmplar-renderer': '^2.0.0-alpha.7',
       react: '^18.3.1',
       'react-dom': '^18.3.1',
     },
     devDependencies: {
-      '@adidas/htmplar-cli': '^2.0.0-alpha.6',
+      '@adidas/htmplar-cli': '^2.0.0-alpha.7',
       '@types/react': '^18.3.8',
       '@types/react-dom': '^18.3.0',
       ...(config.typescript ? { typescript: '^5.6.2' } : {}),
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 71a1e2c..ee9c23d 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@adidas/htmplar-renderer",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "description": "Email rendering engine for HTMplar",
   "license": "MIT",
   "repository": {