@teamvelix/velix 5.1.4 → 5.1.6

package/dist/runtime/start-prod.js

@@ -98,6 +98,7 @@ import http from "http";
 import fs7 from "fs";
 import path7 from "path";
 import { fileURLToPath as fileURLToPath2, pathToFileURL as pathToFileURL3 } from "url";
+import { createRequire } from "module";
 import React2 from "react";
 import { renderToString } from "react-dom/server";
 
@@ -1281,14 +1282,16 @@ var ICON_GEAR = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" str
 var ICON_MON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>`;
 var ICON_TS = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>`;
 var ICON_CLOCK = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`;
-var ICON_TRI = `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 19h20L12 2z"/></svg>`;
 var ICON_TERM = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`;
+var ICON_LOGO = `<img src="/__velix/logo.webp" alt="Velix Logo" width="14" height="14" style="border-radius:2px; object-fit:cover;" onerror="this.style.display='none'" />`;
 function generateDevToolsHtml(isDev, ctx = {}) {
   if (!isDev) return "";
   const version = ctx.version ?? "5.1.0";
   const port = ctx.port ?? 3e3;
   const host = ctx.host ?? "localhost";
   const nodeVersion = ctx.nodeVersion ?? process.version.replace("v", "");
+  const reactVersion = ctx.reactVersion ?? "\u2014";
+  const tsVersion = ctx.tsVersion ?? "\u2014";
   return `
 <style>
 /* \u2500\u2500 Velix DevTools v5.1 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -1357,7 +1360,7 @@ function generateDevToolsHtml(isDev, ctx = {}) {
 
 <!-- \u2500\u2500 Floating button \u2500\u2500 -->
 <button id="__vdt-btn" class="vdt-idle" onclick="__vdtOpen()" title="Velix DevTools (${version})">
-  ${ICON_TRI}
+  ${ICON_LOGO}
   <div id="__vdt-dot" class="idle"></div>
 </button>
 
@@ -1366,7 +1369,7 @@ function generateDevToolsHtml(isDev, ctx = {}) {
   <!-- Header -->
   <div class="__vdt-header">
     <div class="__vdt-brand">
-      ${ICON_TRI}
+      ${ICON_LOGO}
       Velix
       <span class="__vdt-badge">${version}</span>
     </div>
@@ -1432,12 +1435,12 @@ function generateDevToolsHtml(isDev, ctx = {}) {
   <!-- Tab: Info -->
   <div class="__vdt-body" id="__vtab-info" style="display:none;">
     <div class="__vdt-info-row">
-      <div class="__vdt-info-left">${ICON_TRI} <span>Velix</span></div>
+      <div class="__vdt-info-left">${ICON_LOGO} <span>Velix</span></div>
       <span class="__vdt-info-val">${version}</span>
     </div>
     <div class="__vdt-info-row">
       <div class="__vdt-info-left">${ICON_GEAR} <span>React</span></div>
-      <span class="__vdt-info-val" id="__vdt-react-ver">\u2014</span>
+      <span class="__vdt-info-val" id="__vdt-react-ver">${reactVersion}</span>
     </div>
     <div class="__vdt-info-row">
       <div class="__vdt-info-left">${ICON_MON} <span>Node.js</span></div>
@@ -1445,7 +1448,7 @@ function generateDevToolsHtml(isDev, ctx = {}) {
     </div>
     <div class="__vdt-info-row">
       <div class="__vdt-info-left">${ICON_TS} <span>TypeScript</span></div>
-      <span class="__vdt-info-val" id="__vdt-ts-ver">\u2014</span>
+      <span class="__vdt-info-val" id="__vdt-ts-ver">${tsVersion}</span>
     </div>
     <div class="__vdt-dev-badge">
       ${ICON_TERM} Development mode active
@@ -1543,13 +1546,13 @@ function generateDevToolsHtml(isDev, ctx = {}) {
   var btel = document.getElementById('__vdt-build-time');
   if(btel) btel.textContent = bt ? bt + 'ms' : '\u2014';
 
-  /* React version from window.React */
+  /* React version from window.React or server injection */
   var rv = document.getElementById('__vdt-react-ver');
-  if(rv && window.React) rv.textContent = window.React.version;
+  if(rv && rv.textContent === '\u2014' && window.React) rv.textContent = window.React.version;
 
   /* TypeScript version (injected by server if available) */
   var tsv = document.getElementById('__vdt-ts-ver');
-  if(tsv) tsv.textContent = window.__VELIX_TS_VERSION__ || '\u2014';
+  if(tsv && tsv.textContent === '\u2014') tsv.textContent = window.__VELIX_TS_VERSION__ || '\u2014';
 
   /* \u2500\u2500 HMR + Status \u2500\u2500 */
   var btn = document.getElementById('__vdt-btn');
@@ -2113,6 +2116,19 @@ function generate500Page(options) {
 }
 
 // server/index.ts
+function getProjectVersion(dep, projectRoot) {
+  try {
+    const projectRequire = createRequire(pathToFileURL3(path7.join(projectRoot, "package.json")).href);
+    return projectRequire(`${dep}/package.json`).version;
+  } catch (e) {
+    try {
+      const selfRequire = createRequire(import.meta.url);
+      return selfRequire(`${dep}/package.json`).version;
+    } catch (e2) {
+      return "\u2014";
+    }
+  }
+}
 var MIME_TYPES = {
   ".html": "text/html; charset=utf-8",
   ".css": "text/css; charset=utf-8",
@@ -2423,11 +2439,15 @@ async function handlePageRoute(route, routes, req, res, url, config, isDev, proj
     }, baseUrl);
     const islands = getRegisteredIslands();
     const hydrationScript = generateAdvancedHydrationScript(islands);
+    const reactVersion = getProjectVersion("react", projectRoot);
+    const tsVersion = getProjectVersion("typescript", projectRoot);
     const devToolsHtml = generateDevToolsHtml(isDev, {
       version: VERSION,
       port: config.server.port,
       host: config.server.host,
-      nodeVersion: process.version.replace("v", "")
+      nodeVersion: process.version.replace("v", ""),
+      reactVersion,
+      tsVersion
     });
     const headInjections = `
     <meta charset="utf-8">