Pre Release New Changes

examples/component-showcase/public/playground.js

@@ -1,4 +1,4 @@
-/* global AbortController, DOMParser, HTMLFormElement, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, Node, URL, URLSearchParams, clearTimeout, document, fetch, navigator, setTimeout, window */
+/* global AbortController, DOMParser, HTMLFormElement, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, MutationObserver, Node, URL, URLSearchParams, clearTimeout, document, fetch, navigator, setTimeout, window */
 
 (() => {
   const SELECTOR = "[data-playground]";
@@ -58,21 +58,10 @@
 
   let design = storedDesign();
   applyDesign(design, false);
-
-  function updateActiveNavigation() {
-    for (const link of document.querySelectorAll(".docs-directory a[href]")) {
-      const target = new URL(link.href, window.location.origin);
-      if (target.pathname === window.location.pathname) {
-        link.setAttribute("aria-current", "page");
-      } else {
-        link.removeAttribute("aria-current");
-      }
-    }
+  for (const link of document.querySelectorAll(".docs-directory a[href]")) {
+    const target = new URL(link.href, window.location.origin);
+    if (target.pathname === window.location.pathname) link.setAttribute("aria-current", "page");
   }
-
-  updateActiveNavigation();
-  window.addEventListener("wrnexus:navigated", updateActiveNavigation);
-
   window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
     if (design.mode === "system") applyDesign(design);
   });
@@ -108,7 +97,7 @@
 
       const name = field.name.slice(3);
       if (field instanceof HTMLInputElement && field.type === "checkbox") {
-        if (field.checked) attributes.push(name);
+        attributes.push(`${name}="${field.checked}"`);
       } else if (field.value !== "") {
         const value = field.hasAttribute("data-playground-json")
           ? `'${field.value.replaceAll("'", "\\'")}'`
@@ -202,6 +191,8 @@
       );
       window.__wrnexusHydrateScopes?.(preview);
       window.__wrnexusHydrateCsrFetches?.(preview);
+      window.wireTheme?.bind?.(document);
+      bindPlaygroundEvents(document);
       status.textContent = "Preview updated";
     } catch (error) {
       if (error?.name !== "AbortError") {
@@ -212,6 +203,51 @@
     }
   }
 
+  const observedPlaygroundEvents = new Set();
+
+  function formatEventDetail(detail) {
+    if (detail === undefined) return "No event detail";
+    if (typeof detail === "string") return detail;
+    try {
+      return JSON.stringify(detail, null, 2);
+    } catch {
+      return String(detail);
+    }
+  }
+
+  function bindPlaygroundEvents(root = document) {
+    for (const playground of root.querySelectorAll?.(SELECTOR) ?? []) {
+      const eventNames = (playground.getAttribute("data-playground-events") || "")
+        .split(",")
+        .map((name) => name.trim())
+        .filter(Boolean);
+      for (const eventName of eventNames) {
+        if (observedPlaygroundEvents.has(eventName)) continue;
+        observedPlaygroundEvents.add(eventName);
+        document.addEventListener(eventName, (event) => {
+          const owner = event.target?.closest?.(SELECTOR);
+          if (!owner) return;
+          const declaredEvents = (owner.getAttribute("data-playground-events") || "").split(",");
+          if (!declaredEvents.includes(eventName)) return;
+          const log = owner.querySelector("[data-playground-event-log]");
+          if (!log) return;
+          log.replaceChildren();
+          const heading = document.createElement("strong");
+          heading.textContent = `@${eventName}`;
+          const output = document.createElement("pre");
+          output.textContent = formatEventDetail(event.detail);
+          log.append(heading, output);
+        });
+      }
+    }
+  }
+
+  bindPlaygroundEvents();
+  new MutationObserver(() => bindPlaygroundEvents(document)).observe(
+    document.getElementById("app") || document.body,
+    { childList: true, subtree: true },
+  );
+
   function schedule(playground) {
     updateCode(playground);
     clearTimeout(timer);
@@ -304,8 +340,7 @@
     const links = [...document.querySelectorAll("[data-docs-component-link]")];
     let visible = 0;
     for (const link of links) {
-      const label = link.querySelector("[data-docs-component-name]")?.textContent || "";
-      const matches = !query || label.toLowerCase().includes(query);
+      const matches = !query || link.textContent.toLowerCase().includes(query);
       link.hidden = !matches;
       if (matches) visible++;
     }