release: WRNexusJS 0.6.0

examples/component-showcase/public/playground.js

@@ -203,40 +203,65 @@
     }
   }
 
-  const observedPlaygroundEvents = new Set();
+  const outputBindings = new WeakMap();
+  const legacyObservedOutputs = new Set();
 
-  function formatEventDetail(detail) {
-    if (detail === undefined) return "No event detail";
-    if (typeof detail === "string") return detail;
+  function formatOutputPayload(payload) {
+    if (payload === undefined) return "No output payload";
+    if (typeof payload === "string") return payload;
     try {
-      return JSON.stringify(detail, null, 2);
+      return JSON.stringify(payload, null, 2);
     } catch {
-      return String(detail);
+      return String(payload);
     }
   }
 
+  function renderOutput(owner, outputName, payload) {
+    const log = owner.querySelector("[data-playground-event-log]");
+    if (!log) return;
+    log.replaceChildren();
+    const heading = document.createElement("strong");
+    heading.textContent = `@${outputName}`;
+    const output = document.createElement("pre");
+    output.textContent = formatOutputPayload(payload);
+    log.append(heading, output);
+  }
+
+  function bindDirectOutput(host, owner, outputName) {
+    let byName = outputBindings.get(host);
+    if (!byName) {
+      byName = new Map();
+      outputBindings.set(host, byName);
+    }
+    if (byName.has(outputName)) return;
+    const registry = (host.__wrnexusOutputHandlers ??= new Map());
+    const handlers = registry.get(outputName) ?? new Set();
+    const handler = (payload) => renderOutput(owner, outputName, payload);
+    handlers.add(handler);
+    registry.set(outputName, handlers);
+    byName.set(outputName, handler);
+  }
+
   function bindPlaygroundEvents(root = document) {
     for (const playground of root.querySelectorAll?.(SELECTOR) ?? []) {
-      const eventNames = (playground.getAttribute("data-playground-events") || "")
+      const outputNames = (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);
+      const host = playground.querySelector(
+        "[data-playground-preview] [data-wrn-scope], [data-playground-preview] [data-ui-component], [data-playground-preview] [data-component]",
+      );
+      for (const outputName of outputNames) {
+        if (host) bindDirectOutput(host, playground, outputName);
+        // Legacy CustomEvent observation is retained only for compatibility-mode components.
+        if (legacyObservedOutputs.has(outputName)) continue;
+        legacyObservedOutputs.add(outputName);
+        document.addEventListener(outputName, (legacyEvent) => {
+          const owner = legacyEvent.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);
+          const declaredOutputs = (owner.getAttribute("data-playground-events") || "").split(",");
+          if (!declaredOutputs.includes(outputName)) return;
+          renderOutput(owner, outputName, legacyEvent.detail);
         });
       }
     }