From 037c354700c3386d7dbc06ee305d240cf1aa3d0a Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Mon, 4 May 2026 02:46:45 -0700
Subject: [PATCH] feat: add React SSR renderer

---
 Application.cfc             |   8 +
 coldspa/renderers/React.cfm |  20 ++
 demos/react/App.css         |   8 +
 demos/react/App.jsx         |  27 ++
 demos/react/index.cfm       |  43 +++
 demos/vue/App.vue           |  45 +++
 demos/vue/index.cfm         |  43 +++
 index.cfm                   |  33 +-
 package-lock.json           | 634 ++++++++++++++++++++++++++++++++++++
 package.json                |   5 +
 vite.config.js              |  13 +-
 vite.config.react.js        |  15 +
 vite.config.vue.js          |  15 +
 13 files changed, 882 insertions(+), 27 deletions(-)
 create mode 100644 demos/react/App.css
 create mode 100644 demos/react/App.jsx
 create mode 100644 demos/react/index.cfm
 create mode 100644 demos/vue/App.vue
 create mode 100644 demos/vue/index.cfm
 create mode 100644 vite.config.react.js
 create mode 100644 vite.config.vue.js

diff --git a/Application.cfc b/Application.cfc
index ffa85db..7a54103 100644
--- a/Application.cfc
+++ b/Application.cfc
@@ -4,6 +4,14 @@
     <cfset this.applicationTimeout = createTimeSpan(0, 2, 0, 0)>
     <cfset this.sessionManagement = false>
 
+    <!---
+        Custom tag lookup path. Without this, <cf_Island> / <cf_Slot> would
+        only resolve when the calling template lives next to them. Pointing
+        at the webroot lets every demo (or any page at any depth) use the
+        coldspa custom tags.
+    --->
+    <cfset this.customTagPaths = expandPath("/")>
+
     <cffunction name="onApplicationStart" returntype="boolean" output="false">
         <cfset application.coldspaConfig = new coldspa.ColdspaConfig().get()>
         <!---
diff --git a/coldspa/renderers/React.cfm b/coldspa/renderers/React.cfm
index f19614a..a3fa7fc 100644
--- a/coldspa/renderers/React.cfm
+++ b/coldspa/renderers/React.cfm
@@ -46,8 +46,28 @@ React = {
 
     "render": function(mountId, componentGlobKey, propsJson, resolvedClientEntry, optionsJson) {
         var jsId = arguments.mountId.replace('-', '_', 'all');
+
+        // @vitejs/plugin-react requires its Fast Refresh preamble to run
+        // before any React code. Vite normally injects it via index.html,
+        // but we render through CFML so we add it here in dev. Idempotent;
+        // safe to emit per-island.
+        var devPreamble = "";
+        if (application.coldspaConfig.isDev ?: false) {
+            var viteBase = (application.coldspaConfig.viteUrl ?: ("http://localhost:" & (application.coldspaConfig.vitePort ?: "5173")));
+            devPreamble = "
+                import RefreshRuntime from '#viteBase#/@react-refresh';
+                if (!window.__vite_plugin_react_preamble_installed__) {
+                    RefreshRuntime.injectIntoGlobalHook(window);
+                    window.$RefreshReg$ = () => {};
+                    window.$RefreshSig$ = () => (type) => type;
+                    window.__vite_plugin_react_preamble_installed__ = true;
+                }
+            ";
+        }
+
         return {
             "imports": "
+                #devPreamble#
                 import { mount as __coldspa_mount_#jsId# } from '#arguments.resolvedClientEntry#';
             ",
             "body": "
diff --git a/demos/react/App.css b/demos/react/App.css
new file mode 100644
index 0000000..235acb4
--- /dev/null
+++ b/demos/react/App.css
@@ -0,0 +1,8 @@
+.island {
+    border: 2px solid #61dafb;
+    border-radius: 8px;
+    padding: 1rem;
+    background: #f3fbff;
+}
+.island__header { margin-bottom: 0.5rem; }
+.island__footer { margin-top: 0.75rem; color: #555; }
diff --git a/demos/react/App.jsx b/demos/react/App.jsx
new file mode 100644
index 0000000..ae3ca94
--- /dev/null
+++ b/demos/react/App.jsx
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import './App.css';
+
+export default function App({ hello = '', serverTime = '', header, footer, children }) {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div className="island">
+            <header className="island__header">
+                {header ?? <h2>Hello, {hello}!</h2>}
+            </header>
+
+            <main className="island__main">
+                <p>Rendered server-side at: <code>{serverTime}</code></p>
+                <p>Hydrated client-side by React.</p>
+                <button type="button" onClick={() => setCount(c => c + 1)}>
+                    Clicked {count} times
+                </button>
+                {children}
+            </main>
+
+            <footer className="island__footer">
+                {footer ?? <small>(no footer slot supplied)</small>}
+            </footer>
+        </div>
+    );
+}
diff --git a/demos/react/index.cfm b/demos/react/index.cfm
new file mode 100644
index 0000000..7b65256
--- /dev/null
+++ b/demos/react/index.cfm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Coldspa Demo &mdash; React</title>
+</head>
+<body>
+    <h1>Coldspa Island Demo &mdash; React</h1>
+    <p>This page is rendered by ColdFusion. The widget below is a React island.</p>
+
+    <cfinclude template="/coldspa/renderers/React.cfm">
+
+    <cfscript>
+        props = {
+            "hello":      "React World",
+            "serverTime": dateTimeFormat(now(), "yyyy-mm-dd HH:nn:ss")
+        };
+    </cfscript>
+
+    <cf_Island
+        framework="#React#"
+        path="./demos/react/App.jsx"
+        props="#props#"
+        strategy="visible">
+
+        <p><em>This sentence comes from the default slot in CFML.</em></p>
+
+        <cf_Slot name="header">
+            <h2>Header from CFML</h2>
+        </cf_Slot>
+
+        <cf_Slot name="footer">
+            <small>Footer rendered by ColdFusion at <cfoutput>#timeFormat(now(), "HH:nn:ss")#</cfoutput></small>
+        </cf_Slot>
+    </cf_Island>
+
+    <hr>
+    <p><small>
+        Mode: <cfoutput>#(application.coldspaConfig.isDev ? "development" : "production")#</cfoutput>
+        | Vite port: <cfoutput>#application.coldspaConfig.vitePort#</cfoutput>
+    </small></p>
+</body>
+</html>
diff --git a/demos/vue/App.vue b/demos/vue/App.vue
new file mode 100644
index 0000000..b8cb080
--- /dev/null
+++ b/demos/vue/App.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+    hello:      { type: String, default: '' },
+    serverTime: { type: String, default: '' }
+});
+
+const count = ref(0);
+function add() { count.value++; }
+</script>
+
+<template>
+    <div class="island">
+        <header class="island__header">
+            <slot name="header">
+                <h2>Hello, {{ hello }}!</h2>
+            </slot>
+        </header>
+
+        <main class="island__main">
+            <p>Rendered server-side at: <code>{{ serverTime }}</code></p>
+            <p>Hydrated client-side by Vue.</p>
+            <button type="button" @click="add">Clicked {{ count }} times</button>
+            <slot />
+        </main>
+
+        <footer class="island__footer">
+            <slot name="footer">
+                <small>(no footer slot supplied)</small>
+            </slot>
+        </footer>
+    </div>
+</template>
+
+<style scoped>
+.island {
+    border: 2px solid #42b883;
+    border-radius: 8px;
+    padding: 1rem;
+    background: #f5fbf8;
+}
+.island__header { margin-bottom: 0.5rem; }
+.island__footer { margin-top: 0.75rem; color: #555; }
+</style>
diff --git a/demos/vue/index.cfm b/demos/vue/index.cfm
new file mode 100644
index 0000000..28fe468
--- /dev/null
+++ b/demos/vue/index.cfm
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Coldspa Demo &mdash; Vue</title>
+</head>
+<body>
+    <h1>Coldspa Island Demo &mdash; Vue</h1>
+    <p>This page is rendered by ColdFusion. The widget below is a Vue island.</p>
+
+    <cfinclude template="/coldspa/renderers/Vue.cfm">
+
+    <cfscript>
+        props = {
+            "hello":      "Vue World",
+            "serverTime": dateTimeFormat(now(), "yyyy-mm-dd HH:nn:ss")
+        };
+    </cfscript>
+
+    <cf_Island
+        framework="#Vue#"
+        path="./demos/vue/App.vue"
+        props="#props#"
+        strategy="visible">
+
+        <p><em>This sentence comes from the default slot in CFML.</em></p>
+
+        <cf_Slot name="header">
+            <h2>Header from CFML</h2>
+        </cf_Slot>
+
+        <cf_Slot name="footer">
+            <small>Footer rendered by ColdFusion at <cfoutput>#timeFormat(now(), "HH:nn:ss")#</cfoutput></small>
+        </cf_Slot>
+    </cf_Island>
+
+    <hr>
+    <p><small>
+        Mode: <cfoutput>#(application.coldspaConfig.isDev ? "development" : "production")#</cfoutput>
+        | Vite port: <cfoutput>#application.coldspaConfig.vitePort#</cfoutput>
+    </small></p>
+</body>
+</html>
diff --git a/index.cfm b/index.cfm
index f69e8b5..19c151b 100644
--- a/index.cfm
+++ b/index.cfm
@@ -2,32 +2,13 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Coldspa Demo</title>
+    <title>Coldspa Demos</title>
 </head>
 <body>
-    <h1>Coldspa Island Demo</h1>
-    <p>This page is rendered by ColdFusion. The widget below is a Vue island.</p>
-
-    <cfinclude template="/coldspa/renderers/Vue.cfm">
-
-    <cfscript>
-        props = {
-            "hello": "World",
-            "serverTime": dateTimeFormat(now(), "yyyy-mm-dd HH:nn:ss")
-        };
-    </cfscript>
-
-    <cf_Island
-        framework="#Vue#"
-        path="./src/App.vue"
-        props="#props#"
-        strategy="visible">
-    </cf_Island>
-
-    <hr>
-    <p><small>
-        Mode: <cfoutput>#(application.coldspaConfig.isDev ? "development" : "production")#</cfoutput>
-        | Vite port: <cfoutput>#application.coldspaConfig.vitePort#</cfoutput>
-    </small></p>
+    <h1>Coldspa Demos</h1>
+    <ul>
+        <li><a href="/demos/vue/index.cfm">Vue island demo</a></li>
+        <li><a href="/demos/react/index.cfm">React island demo</a></li>
+    </ul>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/package-lock.json b/package-lock.json
index 62f17bd..68a0cb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,160 @@
             "name": "coldspa-demo",
             "version": "0.0.1",
             "dependencies": {
+                "react": "^18.3.1",
+                "react-dom": "^18.3.1",
                 "vue": "^3.4.0"
             },
             "devDependencies": {
+                "@vitejs/plugin-react": "^4.3.4",
                 "@vitejs/plugin-vue": "^5.0.0",
                 "cross-env": "^7.0.3",
                 "vite": "^5.0.0"
             }
         },
+        "node_modules/@babel/code-frame": {
+            "version": "7.29.0",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+            "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-validator-identifier": "^7.28.5",
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.1.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/compat-data": {
+            "version": "7.29.3",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.3.tgz",
+            "integrity": "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/core": {
+            "version": "7.29.0",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+            "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@babel/code-frame": "^7.29.0",
+                "@babel/generator": "^7.29.0",
+                "@babel/helper-compilation-targets": "^7.28.6",
+                "@babel/helper-module-transforms": "^7.28.6",
+                "@babel/helpers": "^7.28.6",
+                "@babel/parser": "^7.29.0",
+                "@babel/template": "^7.28.6",
+                "@babel/traverse": "^7.29.0",
+                "@babel/types": "^7.29.0",
+                "@jridgewell/remapping": "^2.3.5",
+                "convert-source-map": "^2.0.0",
+                "debug": "^4.1.0",
+                "gensync": "^1.0.0-beta.2",
+                "json5": "^2.2.3",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/babel"
+            }
+        },
+        "node_modules/@babel/generator": {
+            "version": "7.29.1",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+            "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.29.0",
+                "@babel/types": "^7.29.0",
+                "@jridgewell/gen-mapping": "^0.3.12",
+                "@jridgewell/trace-mapping": "^0.3.28",
+                "jsesc": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-compilation-targets": {
+            "version": "7.28.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+            "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/compat-data": "^7.28.6",
+                "@babel/helper-validator-option": "^7.27.1",
+                "browserslist": "^4.24.0",
+                "lru-cache": "^5.1.1",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-globals": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+            "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-module-imports": {
+            "version": "7.28.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+            "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/traverse": "^7.28.6",
+                "@babel/types": "^7.28.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-module-transforms": {
+            "version": "7.28.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+            "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.28.6",
+                "@babel/helper-validator-identifier": "^7.28.5",
+                "@babel/traverse": "^7.28.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-plugin-utils": {
+            "version": "7.28.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+            "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/helper-string-parser": {
             "version": "7.27.1",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -34,6 +180,30 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@babel/helper-validator-option": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+            "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helpers": {
+            "version": "7.29.2",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+            "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/template": "^7.28.6",
+                "@babel/types": "^7.29.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/parser": {
             "version": "7.29.3",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
@@ -49,6 +219,72 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/@babel/plugin-transform-react-jsx-self": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+            "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-react-jsx-source": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+            "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/template": {
+            "version": "7.28.6",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+            "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.28.6",
+                "@babel/parser": "^7.28.6",
+                "@babel/types": "^7.28.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/traverse": {
+            "version": "7.29.0",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+            "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.29.0",
+                "@babel/generator": "^7.29.0",
+                "@babel/helper-globals": "^7.28.0",
+                "@babel/parser": "^7.29.0",
+                "@babel/template": "^7.28.6",
+                "@babel/types": "^7.29.0",
+                "debug": "^4.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/types": {
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
@@ -453,12 +689,62 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.13",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+            "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.5.0",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "node_modules/@jridgewell/remapping": {
+            "version": "2.3.5",
+            "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+            "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "node_modules/@jridgewell/resolve-uri": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.5.5",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
             "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
             "license": "MIT"
         },
+        "node_modules/@jridgewell/trace-mapping": {
+            "version": "0.3.31",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+            "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/resolve-uri": "^3.1.0",
+                "@jridgewell/sourcemap-codec": "^1.4.14"
+            }
+        },
+        "node_modules/@rolldown/pluginutils": {
+            "version": "1.0.0-beta.27",
+            "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+            "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.60.2",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz",
@@ -809,6 +1095,51 @@
                 "win32"
             ]
         },
+        "node_modules/@types/babel__core": {
+            "version": "7.20.5",
+            "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+            "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.20.7",
+                "@babel/types": "^7.20.7",
+                "@types/babel__generator": "*",
+                "@types/babel__template": "*",
+                "@types/babel__traverse": "*"
+            }
+        },
+        "node_modules/@types/babel__generator": {
+            "version": "7.27.0",
+            "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+            "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.0.0"
+            }
+        },
+        "node_modules/@types/babel__template": {
+            "version": "7.4.4",
+            "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+            "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.1.0",
+                "@babel/types": "^7.0.0"
+            }
+        },
+        "node_modules/@types/babel__traverse": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+            "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.28.2"
+            }
+        },
         "node_modules/@types/estree": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -816,6 +1147,27 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@vitejs/plugin-react": {
+            "version": "4.7.0",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+            "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/core": "^7.28.0",
+                "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+                "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+                "@rolldown/pluginutils": "1.0.0-beta.27",
+                "@types/babel__core": "^7.20.5",
+                "react-refresh": "^0.17.0"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "peerDependencies": {
+                "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+            }
+        },
         "node_modules/@vitejs/plugin-vue": {
             "version": "5.2.4",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -930,6 +1282,82 @@
             "integrity": "sha512-5vR2QIlmaLG77Ygd4pMP6+SGQ5yox9VhtnbDWTy9DzMzdmeLxZ1QqxrywEZ9sa1AVubfIJyaCG3ytyWU81ufcQ==",
             "license": "MIT"
         },
+        "node_modules/baseline-browser-mapping": {
+            "version": "2.10.27",
+            "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.27.tgz",
+            "integrity": "sha512-zEs/ufmZoUd7WftKpKyXaT6RFxpQ5Qm9xytKRHvJfxFV9DFJkZph9RvJ1LcOUi0Z1ZVijMte65JbILeV+8QQEA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "baseline-browser-mapping": "dist/cli.cjs"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/browserslist": {
+            "version": "4.28.2",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+            "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "baseline-browser-mapping": "^2.10.12",
+                "caniuse-lite": "^1.0.30001782",
+                "electron-to-chromium": "^1.5.328",
+                "node-releases": "^2.0.36",
+                "update-browserslist-db": "^1.2.3"
+            },
+            "bin": {
+                "browserslist": "cli.js"
+            },
+            "engines": {
+                "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+            }
+        },
+        "node_modules/caniuse-lite": {
+            "version": "1.0.30001791",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz",
+            "integrity": "sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "CC-BY-4.0"
+        },
+        "node_modules/convert-source-map": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+            "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/cross-env": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -970,6 +1398,31 @@
             "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
             "license": "MIT"
         },
+        "node_modules/debug": {
+            "version": "4.4.3",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+            "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.3"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/electron-to-chromium": {
+            "version": "1.5.349",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.349.tgz",
+            "integrity": "sha512-QsWVGyRuY07Aqb234QytTfwd5d9AJlfNIQ5wIOl1L+PZDzI9d9+Fn0FRale/QYlFxt/bUnB0/nLd1jFPGxGK1A==",
+            "dev": true,
+            "license": "ISC"
+        },
         "node_modules/entities": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -1021,6 +1474,16 @@
                 "@esbuild/win32-x64": "0.21.5"
             }
         },
+        "node_modules/escalade": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+            "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/estree-walker": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1042,6 +1505,16 @@
                 "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
             }
         },
+        "node_modules/gensync": {
+            "version": "1.0.0-beta.2",
+            "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+            "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/isexe": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -1049,6 +1522,60 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+            "license": "MIT"
+        },
+        "node_modules/jsesc": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+            "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "jsesc": "bin/jsesc"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "json5": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "license": "MIT",
+            "dependencies": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            },
+            "bin": {
+                "loose-envify": "cli.js"
+            }
+        },
+        "node_modules/lru-cache": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+            "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "yallist": "^3.0.2"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.30.21",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1058,6 +1585,13 @@
                 "@jridgewell/sourcemap-codec": "^1.5.5"
             }
         },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/nanoid": {
             "version": "3.3.12",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
@@ -1076,6 +1610,13 @@
                 "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
             }
         },
+        "node_modules/node-releases": {
+            "version": "2.0.38",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.38.tgz",
+            "integrity": "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/path-key": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -1120,6 +1661,42 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/react": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-dom": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0",
+                "scheduler": "^0.23.2"
+            },
+            "peerDependencies": {
+                "react": "^18.3.1"
+            }
+        },
+        "node_modules/react-refresh": {
+            "version": "0.17.0",
+            "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+            "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/rollup": {
             "version": "4.60.2",
             "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.2.tgz",
@@ -1165,6 +1742,25 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/scheduler": {
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            }
+        },
+        "node_modules/semver": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            }
+        },
         "node_modules/shebang-command": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -1197,6 +1793,37 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/update-browserslist-db": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+            "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "escalade": "^3.2.0",
+                "picocolors": "^1.1.1"
+            },
+            "bin": {
+                "update-browserslist-db": "cli.js"
+            },
+            "peerDependencies": {
+                "browserslist": ">= 4.21.0"
+            }
+        },
         "node_modules/vite": {
             "version": "5.4.21",
             "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -1295,6 +1922,13 @@
             "engines": {
                 "node": ">= 8"
             }
+        },
+        "node_modules/yallist": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+            "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+            "dev": true,
+            "license": "ISC"
         }
     }
 }
diff --git a/package.json b/package.json
index 752caac..ee8460c 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
+        "vite:vue": "vite --config vite.config.vue.js",
+        "vite:react": "vite --config vite.config.react.js",
         "ssr": "node coldspa/vite/ssr-server.js",
         "ssr:prod": "cross-env NODE_ENV=production node coldspa/vite/ssr-server.js",
         "build": "vite build && cross-env COLDSPA_SSR=1 vite build",
@@ -12,9 +14,12 @@
         "build:ssr": "cross-env COLDSPA_SSR=1 vite build"
     },
     "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "vue": "^3.4.0"
     },
     "devDependencies": {
+        "@vitejs/plugin-react": "^4.3.4",
         "@vitejs/plugin-vue": "^5.0.0",
         "cross-env": "^7.0.3",
         "vite": "^5.0.0"
diff --git a/vite.config.js b/vite.config.js
index 02db26f..1864acd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,20 @@
+// Default Vite config -- includes both Vue and React, scanning demos/.
+// Used by `npm run dev`, `npm run build`, and the SSR sidecar (`npm run ssr`).
+//
+// For a single-framework dev server, use vite.config.vue.js or
+// vite.config.react.js via `npm run vite:vue` / `npm run vite:react`.
 import { defineConfig } from 'vite';
 import coldspa from './coldspa/vite/plugin.js';
 
 export default defineConfig({
     plugins: [
-        coldspa({ frameworks: ['vue'] })
+        coldspa({
+            frameworks: ['vue', 'react'],
+            globs: {
+                vue:   '/demos/**/*.vue',
+                react: '/demos/**/*.{jsx,tsx}'
+            }
+        })
     ]
 });
 
diff --git a/vite.config.react.js b/vite.config.react.js
new file mode 100644
index 0000000..b962539
--- /dev/null
+++ b/vite.config.react.js
@@ -0,0 +1,15 @@
+// React-only Vite config for the demos/react island demo.
+// Run with: npm run vite:react
+import { defineConfig } from 'vite';
+import coldspa from './coldspa/vite/plugin.js';
+
+export default defineConfig({
+    plugins: [
+        coldspa({
+            frameworks: ['react'],
+            globs: {
+                react: '/demos/react/**/*.{jsx,tsx}'
+            }
+        })
+    ]
+});
diff --git a/vite.config.vue.js b/vite.config.vue.js
new file mode 100644
index 0000000..53aa246
--- /dev/null
+++ b/vite.config.vue.js
@@ -0,0 +1,15 @@
+// Vue-only Vite config for the demos/vue island demo.
+// Run with: npm run vite:vue
+import { defineConfig } from 'vite';
+import coldspa from './coldspa/vite/plugin.js';
+
+export default defineConfig({
+    plugins: [
+        coldspa({
+            frameworks: ['vue'],
+            globs: {
+                vue: '/demos/vue/**/*.vue'
+            }
+        })
+    ]
+});
-- 
2.51.2