@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/devtools.js

@@ -0,0 +1,593 @@
+const devToolsState = {
+  enabled: !1,
+  components: new Map,
+  stores: new Map,
+  events: [],
+  performance: [],
+  selectedComponent: null,
+  selectedStore: null,
+  maxEvents: 1000,
+  maxPerformance: 500
+};
+export function enableDevTools(options = {}) {
+  if (typeof window > "u")
+    return;
+  devToolsState.enabled = !0;
+  devToolsState.maxEvents = options.maxEvents || 1000;
+  devToolsState.maxPerformance = options.maxPerformance || 500;
+  window.__STX_DEVTOOLS__ = {
+    getState: () => devToolsState,
+    getComponents: () => Array.from(devToolsState.components.values()),
+    getComponent: (id) => devToolsState.components.get(id),
+    getStores: () => Array.from(devToolsState.stores.values()),
+    getStore: (id) => devToolsState.stores.get(id),
+    getEvents: () => devToolsState.events,
+    getPerformance: () => devToolsState.performance,
+    selectComponent: (id) => selectComponent(id),
+    selectStore: (id) => selectStore(id),
+    inspectElement: (element) => inspectElement(element),
+    highlightComponent: (id) => highlightComponent(id),
+    clearHighlight: () => clearHighlight(),
+    logComponentTree: () => logComponentTree(),
+    logStoreState: (id) => logStoreState(id),
+    timeTravel: (index, storeId) => timeTravel(index, storeId)
+  };
+  injectDevToolsPanel();
+  setupComponentObserver();
+  console.log("%c[STX DevTools] Enabled", "color: #10b981; font-weight: bold;");
+}
+export function disableDevTools() {
+  devToolsState.enabled = !1;
+  delete window.__STX_DEVTOOLS__;
+  const panel = document.getElementById("stx-devtools-panel");
+  if (panel)
+    panel.remove();
+  console.log("%c[STX DevTools] Disabled", "color: #ef4444;");
+}
+let componentIdCounter = 0;
+export function registerComponent(name, element, props = {}, state = {}, file) {
+  if (!devToolsState.enabled)
+    return "";
+  const id = `stx-${++componentIdCounter}`;
+  element.setAttribute("data-stx-component-id", id);
+  let parentId, parent = element.parentElement;
+  while (parent) {
+    const parentComponentId = parent.getAttribute("data-stx-component-id");
+    if (parentComponentId) {
+      parentId = parentComponentId;
+      const parentInfo = devToolsState.components.get(parentId);
+      if (parentInfo)
+        parentInfo.children.push(id);
+      break;
+    }
+    parent = parent.parentElement;
+  }
+  const info = {
+    id,
+    name,
+    file,
+    parentId,
+    children: [],
+    props,
+    state,
+    exposed: [],
+    element,
+    renderCount: 1,
+    lastRenderTime: 0,
+    createdAt: Date.now()
+  };
+  devToolsState.components.set(id, info);
+  recordEvent({
+    timestamp: Date.now(),
+    type: "component:mounted",
+    componentId: id,
+    payload: { name, props }
+  });
+  return id;
+}
+export function updateComponentState(id, state) {
+  if (!devToolsState.enabled)
+    return;
+  const info = devToolsState.components.get(id);
+  if (info) {
+    info.state = { ...info.state, ...state };
+    info.renderCount++;
+    recordEvent({
+      timestamp: Date.now(),
+      type: "component:updated",
+      componentId: id,
+      payload: { state }
+    });
+  }
+}
+export function updateComponentProps(id, props) {
+  if (!devToolsState.enabled)
+    return;
+  const info = devToolsState.components.get(id);
+  if (info) {
+    const oldProps = { ...info.props };
+    info.props = { ...info.props, ...props };
+    recordEvent({
+      timestamp: Date.now(),
+      type: "component:props-changed",
+      componentId: id,
+      payload: { oldProps, newProps: props }
+    });
+  }
+}
+export function unregisterComponent(id) {
+  if (!devToolsState.enabled)
+    return;
+  const info = devToolsState.components.get(id);
+  if (info) {
+    if (info.parentId) {
+      const parent = devToolsState.components.get(info.parentId);
+      if (parent)
+        parent.children = parent.children.filter((c) => c !== id);
+    }
+    devToolsState.components.delete(id);
+    recordEvent({
+      timestamp: Date.now(),
+      type: "component:unmounted",
+      componentId: id,
+      payload: { name: info.name }
+    });
+  }
+}
+export function registerStore(id, initialState, getters = {}, actions = []) {
+  if (!devToolsState.enabled)
+    return;
+  const info = {
+    id,
+    state: initialState,
+    getters,
+    actions,
+    history: [{
+      timestamp: Date.now(),
+      type: "state",
+      name: "__init__",
+      newValue: initialState
+    }]
+  };
+  devToolsState.stores.set(id, info);
+  recordEvent({
+    timestamp: Date.now(),
+    type: "store:registered",
+    payload: { id, state: initialState }
+  });
+}
+export function recordStoreMutation(storeId, name, oldValue, newValue, type = "state") {
+  if (!devToolsState.enabled)
+    return;
+  const store = devToolsState.stores.get(storeId);
+  if (store) {
+    const record = {
+      timestamp: Date.now(),
+      type,
+      name,
+      oldValue,
+      newValue,
+      stack: Error().stack
+    };
+    store.history.push(record);
+    if (store.history.length > 100)
+      store.history = store.history.slice(-100);
+    if (type === "state")
+      store.state = { ...store.state, [name]: newValue };
+    recordEvent({
+      timestamp: Date.now(),
+      type: `store:${type}`,
+      payload: { storeId, name, oldValue, newValue }
+    });
+  }
+}
+export function updateStoreGetters(storeId, getters) {
+  if (!devToolsState.enabled)
+    return;
+  const store = devToolsState.stores.get(storeId);
+  if (store)
+    store.getters = getters;
+}
+export function recordEvent(event) {
+  if (!devToolsState.enabled)
+    return;
+  devToolsState.events.push(event);
+  if (devToolsState.events.length > devToolsState.maxEvents)
+    devToolsState.events = devToolsState.events.slice(-devToolsState.maxEvents);
+  if (typeof window < "u")
+    window.dispatchEvent(new CustomEvent("stx:devtools:event", { detail: event }));
+}
+export function recordPerformance(metric) {
+  if (!devToolsState.enabled)
+    return;
+  devToolsState.performance.push(metric);
+  if (devToolsState.performance.length > devToolsState.maxPerformance)
+    devToolsState.performance = devToolsState.performance.slice(-devToolsState.maxPerformance);
+}
+export function measurePerformance(name, fn, componentId) {
+  if (!devToolsState.enabled)
+    return fn();
+  const start = performance.now(), result = fn(), duration = performance.now() - start;
+  recordPerformance({
+    name,
+    duration,
+    timestamp: Date.now(),
+    componentId
+  });
+  return result;
+}
+export async function measurePerformanceAsync(name, fn, componentId) {
+  if (!devToolsState.enabled)
+    return fn();
+  const start = performance.now(), result = await fn(), duration = performance.now() - start;
+  recordPerformance({
+    name,
+    duration,
+    timestamp: Date.now(),
+    componentId
+  });
+  return result;
+}
+function selectComponent(id) {
+  devToolsState.selectedComponent = id;
+  const info = devToolsState.components.get(id);
+  if (info) {
+    highlightComponent(id);
+    console.log("%c[STX DevTools] Selected component:", "color: #3b82f6;", info);
+  }
+  return info;
+}
+function selectStore(id) {
+  devToolsState.selectedStore = id;
+  const info = devToolsState.stores.get(id);
+  if (info)
+    console.log("%c[STX DevTools] Selected store:", "color: #8b5cf6;", info);
+  return info;
+}
+function inspectElement(element) {
+  let current = element;
+  while (current) {
+    const id = current.getAttribute("data-stx-component-id");
+    if (id)
+      return selectComponent(id);
+    current = current.parentElement;
+  }
+  console.log("%c[STX DevTools] No component found for element", "color: #f59e0b;");
+  return;
+}
+function highlightComponent(id) {
+  clearHighlight();
+  const info = devToolsState.components.get(id);
+  if (info?.element) {
+    const overlay = document.createElement("div");
+    overlay.id = "stx-devtools-highlight";
+    overlay.style.cssText = `
+      position: absolute;
+      background: rgba(59, 130, 246, 0.2);
+      border: 2px solid #3b82f6;
+      pointer-events: none;
+      z-index: 999999;
+      transition: all 0.15s ease;
+    `;
+    const rect = info.element.getBoundingClientRect();
+    overlay.style.top = `${rect.top + window.scrollY}px`;
+    overlay.style.left = `${rect.left + window.scrollX}px`;
+    overlay.style.width = `${rect.width}px`;
+    overlay.style.height = `${rect.height}px`;
+    const label = document.createElement("div");
+    label.style.cssText = `
+      position: absolute;
+      top: -24px;
+      left: 0;
+      background: #3b82f6;
+      color: white;
+      padding: 2px 8px;
+      font-size: 12px;
+      font-family: monospace;
+      border-radius: 4px;
+      white-space: nowrap;
+    `;
+    label.textContent = `<${info.name}>`;
+    overlay.appendChild(label);
+    document.body.appendChild(overlay);
+  }
+}
+function clearHighlight() {
+  const existing = document.getElementById("stx-devtools-highlight");
+  if (existing)
+    existing.remove();
+}
+function logComponentTree() {
+  console.group("%c[STX DevTools] Component Tree", "color: #10b981; font-weight: bold;");
+  const roots = Array.from(devToolsState.components.values()).filter((c) => !c.parentId);
+  function logComponent(info, indent) {
+    const prefix = "  ".repeat(indent);
+    console.log(`${prefix}%c<${info.name}>%c id=${info.id} renders=${info.renderCount}`, "color: #3b82f6;", "color: #6b7280;");
+    if (Object.keys(info.props).length > 0)
+      console.log(`${prefix}  props:`, info.props);
+    if (Object.keys(info.state).length > 0)
+      console.log(`${prefix}  state:`, info.state);
+    for (const childId of info.children) {
+      const child = devToolsState.components.get(childId);
+      if (child)
+        logComponent(child, indent + 1);
+    }
+  }
+  for (const root of roots)
+    logComponent(root, 0);
+  console.groupEnd();
+}
+function logStoreState(storeId) {
+  console.group("%c[STX DevTools] Store State", "color: #8b5cf6; font-weight: bold;");
+  const stores = storeId ? [devToolsState.stores.get(storeId)].filter(Boolean) : Array.from(devToolsState.stores.values());
+  for (const store of stores)
+    if (store) {
+      console.group(`Store: ${store.id}`);
+      console.log("State:", store.state);
+      console.log("Getters:", store.getters);
+      console.log("Actions:", store.actions);
+      console.log("History:", store.history);
+      console.groupEnd();
+    }
+  console.groupEnd();
+}
+function timeTravel(historyIndex, storeId) {
+  const store = devToolsState.stores.get(storeId);
+  if (!store)
+    return;
+  if (historyIndex < 0 || historyIndex >= store.history.length) {
+    console.warn("[STX DevTools] Invalid history index");
+    return;
+  }
+  const reconstructed = {};
+  for (let i = 0;i <= historyIndex; i++) {
+    const record = store.history[i];
+    if (record.type === "state" && record.name !== "__init__")
+      reconstructed[record.name] = record.newValue;
+    else if (record.name === "__init__")
+      Object.assign(reconstructed, record.newValue);
+  }
+  console.log(`%c[STX DevTools] Time traveled to index ${historyIndex}`, "color: #f59e0b;", reconstructed);
+  if (typeof window < "u" && window.__STX_STORES__) {
+    const actualStore = window.__STX_STORES__[storeId];
+    if (actualStore && typeof actualStore.$patch === "function")
+      actualStore.$patch(reconstructed);
+  }
+}
+function setupComponentObserver() {
+  if (typeof MutationObserver > "u")
+    return;
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations)
+      mutation.removedNodes.forEach((node) => {
+        if (node instanceof HTMLElement) {
+          const id = node.getAttribute("data-stx-component-id");
+          if (id)
+            unregisterComponent(id);
+          node.querySelectorAll("[data-stx-component-id]").forEach((child) => {
+            const childId = child.getAttribute("data-stx-component-id");
+            if (childId)
+              unregisterComponent(childId);
+          });
+        }
+      });
+  }).observe(document.body, {
+    childList: !0,
+    subtree: !0
+  });
+}
+function injectDevToolsPanel() {
+  if (typeof document > "u")
+    return;
+  if (document.getElementById("stx-devtools-panel"))
+    return;
+  const panel = document.createElement("div");
+  panel.id = "stx-devtools-panel";
+  panel.innerHTML = `
+    <style>
+      #stx-devtools-panel {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        width: 400px;
+        height: 300px;
+        background: #1f2937;
+        color: #e5e7eb;
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+        border-top-left-radius: 8px;
+        box-shadow: -4px -4px 20px rgba(0,0,0,0.3);
+        z-index: 999998;
+        display: flex;
+        flex-direction: column;
+        transform: translateY(calc(100% - 32px));
+        transition: transform 0.2s ease;
+      }
+      #stx-devtools-panel.open {
+        transform: translateY(0);
+      }
+      #stx-devtools-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background: #374151;
+        border-top-left-radius: 8px;
+        cursor: pointer;
+        user-select: none;
+      }
+      #stx-devtools-header:hover {
+        background: #4b5563;
+      }
+      #stx-devtools-title {
+        font-weight: bold;
+        color: #10b981;
+      }
+      #stx-devtools-tabs {
+        display: flex;
+        border-bottom: 1px solid #374151;
+      }
+      .stx-devtools-tab {
+        padding: 6px 12px;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+      }
+      .stx-devtools-tab:hover {
+        background: #374151;
+      }
+      .stx-devtools-tab.active {
+        border-bottom-color: #3b82f6;
+        color: #3b82f6;
+      }
+      #stx-devtools-content {
+        flex: 1;
+        overflow: auto;
+        padding: 8px;
+      }
+      .stx-devtools-component {
+        padding: 4px 8px;
+        cursor: pointer;
+        border-radius: 4px;
+      }
+      .stx-devtools-component:hover {
+        background: #374151;
+      }
+      .stx-devtools-component.selected {
+        background: #3b82f6;
+      }
+      .stx-devtools-component-name {
+        color: #60a5fa;
+      }
+      .stx-devtools-component-id {
+        color: #6b7280;
+        font-size: 10px;
+        margin-left: 8px;
+      }
+      .stx-devtools-section {
+        margin-bottom: 8px;
+      }
+      .stx-devtools-section-title {
+        color: #9ca3af;
+        font-size: 10px;
+        text-transform: uppercase;
+        margin-bottom: 4px;
+      }
+      .stx-devtools-json {
+        background: #111827;
+        padding: 4px 8px;
+        border-radius: 4px;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    </style>
+    <div id="stx-devtools-header">
+      <span id="stx-devtools-title">STX DevTools</span>
+      <span id="stx-devtools-toggle">\u25B2</span>
+    </div>
+    <div id="stx-devtools-tabs">
+      <div class="stx-devtools-tab active" data-tab="components">Components</div>
+      <div class="stx-devtools-tab" data-tab="stores">Stores</div>
+      <div class="stx-devtools-tab" data-tab="events">Events</div>
+    </div>
+    <div id="stx-devtools-content">
+      <div id="stx-devtools-components-tab"></div>
+    </div>
+  `;
+  document.body.appendChild(panel);
+  const header = panel.querySelector("#stx-devtools-header"), toggle = panel.querySelector("#stx-devtools-toggle");
+  header?.addEventListener("click", () => {
+    panel.classList.toggle("open");
+    if (toggle)
+      toggle.textContent = panel.classList.contains("open") ? "\u25BC" : "\u25B2";
+  });
+  const tabs = panel.querySelectorAll(".stx-devtools-tab");
+  tabs.forEach((tab) => {
+    tab.addEventListener("click", () => {
+      tabs.forEach((t) => t.classList.remove("active"));
+      tab.classList.add("active");
+      updateDevToolsContent(tab.getAttribute("data-tab") || "components");
+    });
+  });
+  setInterval(() => {
+    const activeTab = panel.querySelector(".stx-devtools-tab.active");
+    if (activeTab && panel.classList.contains("open"))
+      updateDevToolsContent(activeTab.getAttribute("data-tab") || "components");
+  }, 1000);
+}
+function updateDevToolsContent(tab) {
+  const content = document.getElementById("stx-devtools-content");
+  if (!content)
+    return;
+  switch (tab) {
+    case "components":
+      content.innerHTML = renderComponentsTab();
+      break;
+    case "stores":
+      content.innerHTML = renderStoresTab();
+      break;
+    case "events":
+      content.innerHTML = renderEventsTab();
+      break;
+  }
+  content.querySelectorAll(".stx-devtools-component").forEach((el) => {
+    el.addEventListener("click", () => {
+      const id = el.getAttribute("data-id");
+      if (id)
+        selectComponent(id);
+    });
+  });
+}
+function renderComponentsTab() {
+  const roots = Array.from(devToolsState.components.values()).filter((c) => !c.parentId);
+  function renderTree(info, indent) {
+    const children = info.children.map((id) => devToolsState.components.get(id)).filter(Boolean).map((c) => renderTree(c, indent + 1)).join("");
+    return `
+      <div class="stx-devtools-component ${devToolsState.selectedComponent === info.id ? "selected" : ""}"
+           data-id="${info.id}"
+           style="padding-left: ${indent * 16 + 8}px">
+        <span class="stx-devtools-component-name">&lt;${info.name}&gt;</span>
+        <span class="stx-devtools-component-id">${info.id}</span>
+      </div>
+      ${children}
+    `;
+  }
+  if (roots.length === 0)
+    return '<div style="color: #6b7280; padding: 8px;">No components registered</div>';
+  return roots.map((r) => renderTree(r, 0)).join("");
+}
+function renderStoresTab() {
+  const stores = Array.from(devToolsState.stores.values());
+  if (stores.length === 0)
+    return '<div style="color: #6b7280; padding: 8px;">No stores registered</div>';
+  return stores.map((store) => `
+    <div class="stx-devtools-section">
+      <div class="stx-devtools-section-title">${store.id}</div>
+      <div class="stx-devtools-json">${JSON.stringify(store.state, null, 2)}</div>
+    </div>
+  `).join("");
+}
+function renderEventsTab() {
+  const events = devToolsState.events.slice(-20).reverse();
+  if (events.length === 0)
+    return '<div style="color: #6b7280; padding: 8px;">No events recorded</div>';
+  return events.map((event) => `
+    <div style="padding: 4px 0; border-bottom: 1px solid #374151;">
+      <span style="color: #60a5fa;">${event.type}</span>
+      <span style="color: #6b7280; font-size: 10px; margin-left: 8px;">
+        ${new Date(event.timestamp).toLocaleTimeString()}
+      </span>
+    </div>
+  `).join("");
+}
+
+export {
+  devToolsState,
+  selectComponent,
+  selectStore,
+  inspectElement,
+  highlightComponent,
+  clearHighlight,
+  logComponentTree,
+  logStoreState,
+  timeTravel
+};