@valentinkolb/ssr 0.3.0 → 0.4.0

package/README.md

@@ -279,11 +279,21 @@ src/
 createConfig({
   dev?: boolean;                // Enable dev mode (default: false)
   verbose?: boolean;            // Enable verbose logging (default: !dev)
-  autoRefresh?: boolean;        // Enable auto-reload in dev (default: true)
   template?: (context) => string; // HTML template function (optional, has default)
 })
 ```
 
+## Dev Tools
+
+In dev mode, a small `[ssr]` badge appears in the corner of the page. Click it to open the dev tools panel where you can:
+
+- Toggle auto-reload on/off
+- Highlight island components (green border)
+- Highlight client components (blue border)
+- Move the panel to any corner
+
+Settings are persisted in localStorage.
+
 ## Contributing
 
 Contributions are welcome! The codebase is intentionally minimal. Keep changes focused and avoid adding unnecessary complexity.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valentinkolb/ssr",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Minimal SSR framework for SolidJS and Bun",
   "type": "module",
   "main": "src/index.ts",

package/src/adapter/bun.ts

@@ -27,17 +27,16 @@ type Routes = Record<string, RouteHandler>;
  * ```
  */
 export const routes = (config: SsrConfig): Routes => {
-  const { dev, autoRefresh } = config;
+  const { dev } = config;
   const ssrDir = getSsrDir(dev);
 
-  const devRoutes: Routes =
-    dev && autoRefresh
-      ? {
-          "/_ssr/_reload": () => createReloadResponse(),
-          "/_ssr/_ping": () => new Response("ok"),
-          "/_ssr/_client.js": () => createClientResponse(),
-        }
-      : {};
+  const devRoutes: Routes = dev
+    ? {
+        "/_ssr/_reload": () => createReloadResponse(),
+        "/_ssr/_ping": () => new Response("ok"),
+        "/_ssr/_client.js": () => createClientResponse(),
+      }
+    : {};
 
   return {
     ...devRoutes,

package/src/adapter/client.js

@@ -4,78 +4,250 @@
 if (!window.__ssr_reload) {
   window.__ssr_reload = true;
 
-  // Tooltip
-  const tooltip = document.body.appendChild(
-    Object.assign(document.createElement("div"), {
-      innerHTML: `
-        auto refresh enabled
-        <br/><br/>
-        to disable, add to config
-        <br/>
-        { autoRefresh: false }
-      `,
-    }),
-  );
-  Object.assign(tooltip.style, {
-    fontFamily: "monospace",
-    fontSize: "12px",
-    color: "#888",
-    background: "#000",
-    padding: "8px",
-    border: "1px solid #333",
-    position: "fixed",
-    bottom: "28px",
-    left: "8px",
-    zIndex: "9999",
-    display: "none",
-  });
-
-  // Badge
-  const badge = document.body.appendChild(
-    Object.assign(document.createElement("div"), {
-      innerText: "[ssr]",
-      onmouseenter: () => (tooltip.style.display = "block"),
-      onmouseleave: () => (tooltip.style.display = "none"),
-    }),
-  );
-  Object.assign(badge.style, {
-    fontFamily: "monospace",
-    fontSize: "12px",
-    color: "#555",
-    position: "fixed",
-    bottom: "8px",
-    left: "8px",
-    zIndex: "9999",
-    cursor: "default",
-  });
-
-  let es;
-  try {
-    es = new EventSource("/_ssr/_reload");
-  } catch {
-    return;
-  }
-
-  es.onerror = (e) => {
-    e.preventDefault();
-    es.close();
-    window.__ssr_reload = false;
-    badge.innerText = "[...]";
-
-    const check = setInterval(() => {
-      fetch("/_ssr/_ping")
-        .then(({ ok }) => {
-          if (!ok) return;
-          clearInterval(check);
-          location.reload();
-        })
-        .catch(() => {});
-    }, 300);
-  };
-
-  // Clean up on page unload (for bfcache)
-  window.addEventListener("pagehide", () => {
-    es.close();
-    window.__ssr_reload = false;
-  });
+  (function () {
+    // ========================================
+    // Settings (persisted in localStorage)
+    // ========================================
+    const STORAGE_KEY = "_ssr";
+    const defaults = {
+      autoReload: true,
+      highlightIslands: false,
+      highlightClients: false,
+      position: "bl",
+    };
+
+    const loadSettings = () => {
+      try {
+        return {
+          ...defaults,
+          ...JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}"),
+        };
+      } catch {
+        return defaults;
+      }
+    };
+
+    const saveSettings = (s) =>
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+
+    let settings = loadSettings();
+
+    // ========================================
+    // Component counts from DOM
+    // ========================================
+    const islandCount = document.querySelectorAll("solid-island").length;
+    const clientCount = document.querySelectorAll("solid-client").length;
+
+    // ========================================
+    // Highlight styles
+    // ========================================
+    const style = document.head.appendChild(document.createElement("style"));
+
+    const updateStyles = () => {
+      style.textContent = `
+        ${
+          settings.highlightIslands
+            ? `
+          solid-island {
+            display: block;
+            box-shadow: 0 0 0 1px #22c55e !important;
+            position: relative;
+          }
+          solid-island::before {
+            content: attr(data-file);
+            position: absolute;
+            top: -17px;
+            left: -1px;
+            font-size: 10px;
+            font-family: monospace;
+            color: black;
+            background: #22c55e;
+            padding: 1px 4px;
+            white-space: nowrap;
+          }
+        `
+            : ""
+        }
+        ${
+          settings.highlightClients
+            ? `
+          solid-client {
+            display: block;
+            box-shadow: 0 0 0 1px #3b82f6 !important;
+            position: relative;
+          }
+          solid-client::before {
+            content: attr(data-file);
+            position: absolute;
+            top: -17px;
+            left: -1px;
+            font-size: 10px;
+            font-family: monospace;
+            color: black;
+            background: #3b82f6;
+            padding: 1px 4px;
+            white-space: nowrap;
+          }
+        `
+            : ""
+        }
+      `;
+    };
+    updateStyles();
+
+    // ========================================
+    // Position logic
+    // ========================================
+    const positions = {
+      tl: {
+        badge: { top: "8px", left: "8px", bottom: "", right: "" },
+        panel: { top: "32px", left: "8px", bottom: "", right: "" },
+      },
+      tr: {
+        badge: { top: "8px", right: "8px", bottom: "", left: "" },
+        panel: { top: "32px", right: "8px", bottom: "", left: "" },
+      },
+      bl: {
+        badge: { bottom: "8px", left: "8px", top: "", right: "" },
+        panel: { bottom: "32px", left: "8px", top: "", right: "" },
+      },
+      br: {
+        badge: { bottom: "8px", right: "8px", top: "", left: "" },
+        panel: { bottom: "32px", right: "8px", top: "", left: "" },
+      },
+    };
+
+    const applyPosition = () => {
+      const pos = positions[settings.position] || positions.bl;
+      Object.assign(badge.style, pos.badge);
+      Object.assign(panel.style, pos.panel);
+    };
+
+    // ========================================
+    // UI Elements
+    // ========================================
+    const panel = document.body.appendChild(document.createElement("div"));
+    panel.innerHTML = `
+      <div style="margin-bottom:8px;font-weight:bold">SSR Dev Tools</div>
+      <label style="display:block;margin:4px 0;cursor:pointer">
+        <input type="checkbox" id="_ssr_reload" ${settings.autoReload ? "checked" : ""}>
+        Auto reload
+      </label>
+      <label style="display:block;margin:4px 0;cursor:pointer">
+        <input type="checkbox" id="_ssr_islands" ${settings.highlightIslands ? "checked" : ""}>
+        Highlight islands (${islandCount})
+      </label>
+      <label style="display:block;margin:4px 0;cursor:pointer">
+        <input type="checkbox" id="_ssr_clients" ${settings.highlightClients ? "checked" : ""}>
+        Highlight clients (${clientCount})
+      </label>
+      <div style="margin-top:8px;border-top:1px solid #333;padding-top:8px">
+        <label style="color:#888">Position:
+          <select id="_ssr_position" style="background:#222;color:#ccc;border:1px solid #444;padding:2px;margin-left:4px">
+            <option value="tl" ${settings.position === "tl" ? "selected" : ""}>Top Left</option>
+            <option value="tr" ${settings.position === "tr" ? "selected" : ""}>Top Right</option>
+            <option value="bl" ${settings.position === "bl" ? "selected" : ""}>Bottom Left</option>
+            <option value="br" ${settings.position === "br" ? "selected" : ""}>Bottom Right</option>
+          </select>
+        </label>
+      </div>
+    `;
+    Object.assign(panel.style, {
+      fontFamily: "monospace",
+      fontSize: "12px",
+      color: "#ccc",
+      background: "#111",
+      padding: "12px",
+      border: "1px solid #333",
+      borderRadius: "4px",
+      position: "fixed",
+      zIndex: "9999",
+      display: "none",
+    });
+
+    // Badge
+    const badge = document.body.appendChild(document.createElement("div"));
+    badge.innerText = "[ssr]";
+    badge.onclick = () => {
+      panel.style.display = panel.style.display === "none" ? "block" : "none";
+    };
+    Object.assign(badge.style, {
+      fontFamily: "monospace",
+      fontSize: "12px",
+      color: "#555",
+      position: "fixed",
+      zIndex: "9999",
+      cursor: "pointer",
+    });
+
+    applyPosition();
+
+    // ========================================
+    // Event handlers
+    // ========================================
+    panel.querySelector("#_ssr_islands").onchange = (e) => {
+      settings.highlightIslands = e.target.checked;
+      saveSettings(settings);
+      updateStyles();
+    };
+
+    panel.querySelector("#_ssr_clients").onchange = (e) => {
+      settings.highlightClients = e.target.checked;
+      saveSettings(settings);
+      updateStyles();
+    };
+
+    panel.querySelector("#_ssr_position").onchange = (e) => {
+      settings.position = e.target.value;
+      saveSettings(settings);
+      applyPosition();
+    };
+
+    // ========================================
+    // Live reload via SSE
+    // ========================================
+    let es, checkInterval;
+
+    const startReload = () => {
+      if (es) return;
+      try {
+        es = new EventSource("/_ssr/_reload");
+        badge.innerText = "[ssr]";
+      } catch {
+        return;
+      }
+      es.onerror = (e) => {
+        e.preventDefault();
+        stopReload();
+        badge.innerText = "[...]";
+        if (!settings.autoReload) return;
+        checkInterval = setInterval(() => {
+          fetch("/_ssr/_ping")
+            .then(({ ok }) => ok && location.reload())
+            .catch(() => {});
+        }, 300);
+      };
+    };
+
+    const stopReload = () => {
+      if (es) {
+        es.close();
+        es = null;
+      }
+      if (checkInterval) {
+        clearInterval(checkInterval);
+        checkInterval = null;
+      }
+    };
+
+    if (settings.autoReload) startReload();
+
+    panel.querySelector("#_ssr_reload").onchange = (e) => {
+      settings.autoReload = e.target.checked;
+      saveSettings(settings);
+      settings.autoReload ? startReload() : stopReload();
+    };
+
+    window.addEventListener("pagehide", stopReload);
+  })();
 }

package/src/adapter/elysia.ts

@@ -23,7 +23,7 @@ import {
  * ```
  */
 export const routes = (config: SsrConfig) => {
-  const { dev, autoRefresh } = config;
+  const { dev } = config;
   const ssrDir = getSsrDir(dev);
 
   return new Elysia({ name: "ssr" })
@@ -34,13 +34,7 @@ export const routes = (config: SsrConfig) => {
         headers: { "Cache-Control": getCacheHeaders(dev) },
       }),
     )
-    .get("/_ssr/_reload", () =>
-      dev && autoRefresh ? createReloadResponse() : notFound(),
-    )
-    .get("/_ssr/_ping", () =>
-      dev && autoRefresh ? new Response("ok") : notFound(),
-    )
-    .get("/_ssr/_client.js", () =>
-      dev && autoRefresh ? createClientResponse() : notFound(),
-    );
+    .get("/_ssr/_reload", () => (dev ? createReloadResponse() : notFound()))
+    .get("/_ssr/_ping", () => (dev ? new Response("ok") : notFound()))
+    .get("/_ssr/_client.js", () => (dev ? createClientResponse() : notFound()));
 };

package/src/adapter/hono.ts

@@ -21,13 +21,13 @@ import {
  * ```
  */
 export const routes = (config: SsrConfig) => {
-  const { dev, autoRefresh } = config;
+  const { dev } = config;
   const ssrDir = getSsrDir(dev);
 
   const app = new Hono();
 
   // Dev mode endpoints
-  if (dev && autoRefresh) {
+  if (dev) {
     app.get("/_client.js", () => createClientResponse());
     app.get("/_reload", () => createReloadResponse());
     app.get("/_ping", (c) => c.text("ok"));

package/src/index.ts

@@ -21,8 +21,6 @@ export type SsrOptions<T extends object = object> = {
   dev?: boolean;
   /** Enable verbose logging (default: true in prod, false in dev) */
   verbose?: boolean;
-  /** Enable auto page refresh in dev mode (default: true) */
-  autoRefresh?: boolean;
   /** HTML template function (optional, has default) */
   template?: (
     ctx: {
@@ -35,7 +33,6 @@ export type SsrOptions<T extends object = object> = {
 export type SsrConfig = {
   dev: boolean;
   verbose?: boolean;
-  autoRefresh: boolean;
 };
 
 type HtmlFn<T extends object> = (
@@ -85,7 +82,7 @@ export type SsrResult<T extends object> = {
 export const createConfig = <T extends object = object>(
   options: SsrOptions<T> = {},
 ): SsrResult<T> => {
-  const { dev = false, verbose, autoRefresh = true, template } = options;
+  const { dev = false, verbose, template } = options;
 
   // Default template if none provided
   const htmlTemplate =
@@ -108,7 +105,6 @@ export const createConfig = <T extends object = object>(
   const config: SsrConfig = {
     dev,
     verbose,
-    autoRefresh,
   };
 
   // HTML renderer
@@ -116,21 +112,24 @@ export const createConfig = <T extends object = object>(
     const body = renderToString(() => element);
 
     // Extract island and client component IDs from rendered HTML
-    const islandIds = [
-      ...new Set(
-        [...body.matchAll(/<solid-(island|client) data-id="([^"]+)"/g)].map(
-          (m) => m[2],
-        ),
-      ),
+    const matches = [
+      ...body.matchAll(/<solid-(island|client) data-id="([^"]+)"/g),
     ];
+    const islands = [
+      ...new Set(matches.filter((m) => m[1] === "island").map((m) => m[2])),
+    ];
+    const clients = [
+      ...new Set(matches.filter((m) => m[1] === "client").map((m) => m[2])),
+    ];
+    const islandIds = [...islands, ...clients];
 
     // Component scripts
     let scripts = islandIds
       .map((id) => `<script type="module" src="/_ssr/${id}.js"></script>`)
       .join("\n");
 
-    // Add dev reload script in dev mode (if autoRefresh enabled)
-    if (dev && autoRefresh) {
+    // Add dev tools script in dev mode
+    if (dev) {
       scripts += `\n<script type="module" src="/_ssr/_client.js"></script>`;
     }
 
@@ -186,7 +185,7 @@ export const createConfig = <T extends object = object>(
           // Issue: https://github.com/oven-sh/bun/issues/4689
           const contents = await import(`${path}?`, { with: { type: "text" } });
           return {
-            contents: await transform(contents.default, path, "ssr"),
+            contents: await transform(contents.default, path, "ssr", dev),
             loader: "js",
           };
         });

package/src/transform.ts

@@ -35,7 +35,7 @@ const attr = (name: string, value: any) =>
 
 type ComponentType = "island" | "client";
 
-const componentWrapperPlugin = (filename: string) => ({
+const componentWrapperPlugin = (filename: string, dev: boolean) => ({
   visitor: {
     Program(programPath: any) {
       const componentImports = new Map<
@@ -109,17 +109,23 @@ const componentWrapperPlugin = (filename: string) => ({
           // For islands: wrap the component, for client: empty wrapper (no SSR)
           const children = component.type === "island" ? [path.node] : [];
 
-          const wrapper = jsx(
-            wrapperTag,
-            [
-              attr("data-id", id),
-              attr(
-                "data-props",
-                t.callExpression(t.identifier("__seroval_serialize"), [props]),
-              ),
-            ],
-            children,
-          );
+          // Extract filename from path (e.g., "Counter.island.tsx")
+          const file = component.path.split("/").pop() || "";
+
+          const attrs = [
+            attr("data-id", id),
+            attr(
+              "data-props",
+              t.callExpression(t.identifier("__seroval_serialize"), [props]),
+            ),
+          ];
+
+          // Add file attribute in dev mode
+          if (dev) {
+            attrs.push(attr("data-file", file));
+          }
+
+          const wrapper = jsx(wrapperTag, attrs, children);
 
           path.replaceWith(wrapper);
           path.skip();
@@ -137,6 +143,7 @@ export const transform = async (
   source: string,
   filename: string,
   mode: "ssr" | "dom",
+  dev: boolean = false,
 ): Promise<string> => {
   let code = source;
 
@@ -144,7 +151,7 @@ export const transform = async (
     const result = await transformAsync(code, {
       filename,
       parserOpts: { plugins: ["jsx", "typescript"] },
-      plugins: [() => componentWrapperPlugin(filename)],
+      plugins: [() => componentWrapperPlugin(filename, dev)],
     });
     code = result?.code || code;
   }