@erickxavier/no-js 1.5.2 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erickxavier/no-js",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "The HTML-first reactive framework — build dynamic web apps with just HTML attributes, no JavaScript required",
   "main": "dist/cjs/no.js",
   "module": "dist/esm/no.js",

package/src/context.js

@@ -2,19 +2,25 @@
 //  REACTIVE CONTEXT
 // ═══════════════════════════════════════════════════════════════════════
 
-import { _stores, _refs, _routerInstance, _currentEl } from "./globals.js";
+import { _config, _stores, _refs, _routerInstance, _currentEl } from "./globals.js";
 import { _i18n } from "./i18n.js";
+import { _devtoolsEmit, _ctxRegistry } from "./devtools.js";
 
 let _batchDepth = 0;
 const _batchQueue = new Set();
+let _ctxId = 0;
+
+export function _resetCtxId() { _ctxId = 0; }
 
 export function _startBatch() {
   _batchDepth++;
+  _devtoolsEmit("batch:start", { depth: _batchDepth });
 }
 
 export function _endBatch() {
   _batchDepth--;
   if (_batchDepth === 0 && _batchQueue.size > 0) {
+    _devtoolsEmit("batch:end", { depth: 0, queueSize: _batchQueue.size });
     const fns = [..._batchQueue];
     _batchQueue.clear();
     fns.forEach((fn) => {
@@ -28,6 +34,7 @@ export function createContext(data = {}, parent = null) {
   const listeners = new Set();
   const raw = {};
   Object.assign(raw, data);
+  if (_config.devtools) raw.__devtoolsId = ++_ctxId;
   let notifying = false;
 
   function notify() {
@@ -94,7 +101,15 @@ export function createContext(data = {}, parent = null) {
     set(target, key, value) {
       const old = target[key];
       target[key] = value;
-      if (old !== value) notify();
+      if (old !== value) {
+        notify();
+        _devtoolsEmit("ctx:updated", {
+          id: target.__devtoolsId,
+          key,
+          oldValue: old,
+          newValue: value,
+        });
+      }
       return true;
     },
     has(target, key) {
@@ -105,6 +120,17 @@ export function createContext(data = {}, parent = null) {
   };
 
   const proxy = new Proxy(raw, handler);
+
+  if (_config.devtools && raw.__devtoolsId) {
+    _ctxRegistry.set(raw.__devtoolsId, proxy);
+    _devtoolsEmit("ctx:created", {
+      id: raw.__devtoolsId,
+      parentId: parent?.__raw?.__devtoolsId ?? null,
+      keys: Object.keys(data),
+      elementTag: _currentEl?.tagName?.toLowerCase() ?? null,
+    });
+  }
+
   return proxy;
 }
 

package/src/devtools.js

@@ -0,0 +1,264 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  DEVTOOLS PROTOCOL
+//  Zero-overhead runtime inspection, mutation, and monitoring.
+//  All hooks are guarded by _config.devtools — no cost when disabled.
+// ═══════════════════════════════════════════════════════════════════════
+
+import { _config, _stores, _refs, _routerInstance } from "./globals.js";
+import { _i18n } from "./i18n.js";
+
+// ─── Context registry (populated by createContext when devtools enabled) ────
+// Maps __devtoolsId → Proxy reference for inspect/mutate commands.
+export const _ctxRegistry = new Map();
+
+// ─── Emit a devtools event ──────────────────────────────────────────────────
+export function _devtoolsEmit(type, data) {
+  if (!_config.devtools || typeof window === "undefined") return;
+  window.dispatchEvent(
+    new CustomEvent("nojs:devtools", {
+      detail: { type, data, timestamp: Date.now() },
+    }),
+  );
+}
+
+// ─── Serialization helpers ──────────────────────────────────────────────────
+
+function _safeSnapshot(proxy) {
+  if (!proxy || !proxy.__isProxy) return null;
+  const raw = proxy.__raw;
+  const snapshot = {};
+  for (const key of Object.keys(raw)) {
+    if (key.startsWith("__")) continue;
+    const val = raw[key];
+    if (val && typeof val === "object" && val.__isProxy) {
+      snapshot[key] = _safeSnapshot(val);
+    } else {
+      try {
+        // Verify serializable — drop functions and circular refs
+        JSON.stringify(val);
+        snapshot[key] = val;
+      } catch {
+        snapshot[key] = String(val);
+      }
+    }
+  }
+  return snapshot;
+}
+
+function _elementTag(el) {
+  if (!el || !el.tagName) return null;
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  const cls = el.className && typeof el.className === "string"
+    ? "." + el.className.trim().split(/\s+/).join(".")
+    : "";
+  return tag + id + cls;
+}
+
+// ─── Inspect commands ───────────────────────────────────────────────────────
+
+function _inspectElement(selector) {
+  const el = document.querySelector(selector);
+  if (!el) return { error: "Element not found", selector };
+  const ctx = el.__ctx;
+  return {
+    selector,
+    tag: _elementTag(el),
+    hasContext: !!ctx,
+    contextId: ctx?.__raw?.__devtoolsId ?? null,
+    data: ctx ? _safeSnapshot(ctx) : null,
+    directives: [...el.attributes]
+      .filter((a) => !["class", "id", "style"].includes(a.name))
+      .map((a) => ({ name: a.name, value: a.value })),
+  };
+}
+
+function _inspectStore(name) {
+  const store = _stores[name];
+  if (!store) return { error: "Store not found", name };
+  return {
+    name,
+    contextId: store.__raw?.__devtoolsId ?? null,
+    data: _safeSnapshot(store),
+  };
+}
+
+function _inspectTree(selector) {
+  const root = selector ? document.querySelector(selector) : document.body;
+  if (!root) return { error: "Root not found", selector };
+
+  function walk(el) {
+    const ctx = el.__ctx;
+    const node = {
+      tag: _elementTag(el),
+      contextId: ctx?.__raw?.__devtoolsId ?? null,
+      children: [],
+    };
+    for (const child of el.children) {
+      if (child.tagName === "TEMPLATE" || child.tagName === "SCRIPT") continue;
+      if (child.__ctx || child.__declared) {
+        node.children.push(walk(child));
+      }
+    }
+    return node;
+  }
+
+  return walk(root);
+}
+
+function _mutateContext(id, key, value) {
+  const proxy = _ctxRegistry.get(id);
+  if (!proxy) return { error: "Context not found", id };
+  proxy[key] = value;
+  return { ok: true, id, key };
+}
+
+function _mutateStore(name, key, value) {
+  const store = _stores[name];
+  if (!store) return { error: "Store not found", name };
+  store[key] = value;
+  return { ok: true, name, key };
+}
+
+function _getStats() {
+  let listenerCount = 0;
+  for (const [, proxy] of _ctxRegistry) {
+    if (proxy.__listeners) listenerCount += proxy.__listeners.size;
+  }
+  return {
+    contexts: _ctxRegistry.size,
+    stores: Object.keys(_stores).length,
+    listeners: listenerCount,
+    refs: Object.keys(_refs).length,
+    hasRouter: !!_routerInstance,
+    locale: _i18n.locale,
+  };
+}
+
+// ─── Highlight overlay ──────────────────────────────────────────────────────
+
+let _highlightOverlay = null;
+
+function _highlightElement(selector) {
+  _unhighlight();
+  const el = document.querySelector(selector);
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  _highlightOverlay = document.createElement("div");
+  _highlightOverlay.id = "__nojs_devtools_highlight__";
+  Object.assign(_highlightOverlay.style, {
+    position: "fixed",
+    top: rect.top + "px",
+    left: rect.left + "px",
+    width: rect.width + "px",
+    height: rect.height + "px",
+    background: "rgba(66, 133, 244, 0.25)",
+    border: "2px solid rgba(66, 133, 244, 0.8)",
+    pointerEvents: "none",
+    zIndex: "2147483647",
+    borderRadius: "3px",
+  });
+  document.body.appendChild(_highlightOverlay);
+}
+
+function _unhighlight() {
+  if (_highlightOverlay) {
+    _highlightOverlay.remove();
+    _highlightOverlay = null;
+  }
+}
+
+// ─── Command handler ────────────────────────────────────────────────────────
+
+function _handleDevtoolsCommand(event) {
+  const { command, args = {} } = event.detail || {};
+  let result;
+
+  switch (command) {
+    case "inspect:element":
+      result = _inspectElement(args.selector);
+      break;
+    case "inspect:store":
+      result = _inspectStore(args.name);
+      break;
+    case "inspect:tree":
+      result = _inspectTree(args.selector);
+      break;
+    case "mutate:context":
+      result = _mutateContext(args.id, args.key, args.value);
+      break;
+    case "mutate:store":
+      result = _mutateStore(args.name, args.key, args.value);
+      break;
+    case "get:config":
+      result = { ..._config };
+      break;
+    case "get:routes":
+      result = _routerInstance ? _routerInstance.routes || [] : [];
+      break;
+    case "get:stats":
+      result = _getStats();
+      break;
+    case "highlight:element":
+      _highlightElement(args.selector);
+      result = { ok: true };
+      break;
+    case "unhighlight":
+      _unhighlight();
+      result = { ok: true };
+      break;
+    default:
+      result = { error: "Unknown command", command };
+  }
+
+  // Respond with result
+  window.dispatchEvent(
+    new CustomEvent("nojs:devtools:response", {
+      detail: { command, result, timestamp: Date.now() },
+    }),
+  );
+}
+
+// ─── Initialization ─────────────────────────────────────────────────────────
+
+export function initDevtools(nojs) {
+  if (!_config.devtools || typeof window === "undefined") return;
+
+  // Listen for commands
+  window.addEventListener("nojs:devtools:cmd", _handleDevtoolsCommand);
+
+  // Expose public API on window
+  window.__NOJS_DEVTOOLS__ = {
+    // Data access
+    stores: _stores,
+    config: _config,
+    refs: _refs,
+    router: _routerInstance,
+    version: nojs.version,
+
+    // Inspect API
+    inspect: (selector) => _inspectElement(selector),
+    inspectStore: (name) => _inspectStore(name),
+    inspectTree: (selector) => _inspectTree(selector),
+    stats: () => _getStats(),
+
+    // Mutation API
+    mutate: (id, key, value) => _mutateContext(id, key, value),
+    mutateStore: (name, key, value) => _mutateStore(name, key, value),
+
+    // Visual
+    highlight: (selector) => _highlightElement(selector),
+    unhighlight: () => _unhighlight(),
+
+    // Event subscription shorthand
+    on: (type, fn) => {
+      const handler = (e) => {
+        if (!type || e.detail.type === type) fn(e.detail);
+      };
+      window.addEventListener("nojs:devtools", handler);
+      return () => window.removeEventListener("nojs:devtools", handler);
+    },
+  };
+
+  console.log("[No.JS DevTools] enabled — access via window.__NOJS_DEVTOOLS__");
+}

package/src/directives/http.js

@@ -16,6 +16,7 @@ import { evaluate, _execStatement, _interpolate } from "../evaluate.js";
 import { _doFetch, _cacheGet, _cacheSet } from "../fetch.js";
 import { findContext, _clearDeclared, _cloneTemplate } from "../dom.js";
 import { registerDirective, processTree } from "../registry.js";
+import { _devtoolsEmit } from "../devtools.js";
 
 const HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
 
@@ -199,6 +200,7 @@ for (const method of HTTP_METHODS) {
             _routerInstance.push(redirectPath);
 
           _emitEvent("fetch:success", { url: resolvedUrl, data });
+          _devtoolsEmit("fetch:success", { method, url: resolvedUrl });
         } catch (err) {
           // SwitchMap: silently ignore aborted requests
           if (err.name === "AbortError") return;
@@ -209,6 +211,7 @@ for (const method of HTTP_METHODS) {
           );
           _emitEvent("fetch:error", { url: resolvedUrl, error: err });
           _emitEvent("error", { url: resolvedUrl, error: err });
+          _devtoolsEmit("fetch:error", { method, url: resolvedUrl, error: err.message });
 
           if (errorTpl) {
             const clone = _cloneTemplate(errorTpl);

package/src/directives/state.js

@@ -7,6 +7,7 @@ import { createContext } from "../context.js";
 import { evaluate, _execStatement } from "../evaluate.js";
 import { findContext } from "../dom.js";
 import { registerDirective } from "../registry.js";
+import { _devtoolsEmit } from "../devtools.js";
 
 registerDirective("state", {
   priority: 0,
@@ -63,6 +64,10 @@ registerDirective("store", {
         ? evaluate(valueAttr, createContext()) || {}
         : {};
       _stores[storeName] = createContext(data);
+      _devtoolsEmit("store:created", {
+        name: storeName,
+        keys: Object.keys(data),
+      });
     }
     _log("store", storeName);
   },

package/src/index.js

@@ -22,6 +22,7 @@ import { evaluate, resolve } from "./evaluate.js";
 import { findContext, _loadRemoteTemplates, _loadRemoteTemplatesPhase1, _loadRemoteTemplatesPhase2, _processTemplateIncludes } from "./dom.js";
 import { registerDirective, processTree } from "./registry.js";
 import { _createRouter } from "./router.js";
+import { initDevtools } from "./devtools.js";
 
 // Side-effect imports: register built-in filters
 import "./filters.js";
@@ -126,18 +127,7 @@ const NoJS = {
     _loadRemoteTemplatesPhase2();
 
     // DevTools integration
-    if (_config.devtools && typeof window !== "undefined") {
-      window.__NOJS_DEVTOOLS__ = {
-        stores: _stores,
-        config: _config,
-        refs: _refs,
-        router: _routerInstance,
-        filters: Object.keys(_filters),
-        validators: Object.keys(_validators),
-        version: NoJS.version,
-      };
-      _log("DevTools enabled — access via window.__NOJS_DEVTOOLS__");
-    }
+    initDevtools(NoJS);
   },
 
   // Register custom directive
@@ -218,7 +208,7 @@ const NoJS = {
   resolve,
 
   // Version
-  version: "1.5.2",
+  version: "1.6.0",
 };
 
 export default NoJS;

package/src/registry.js

@@ -4,6 +4,7 @@
 
 import { _currentEl, _setCurrentEl, _storeWatchers } from "./globals.js";
 import { _i18nListeners } from "./i18n.js";
+import { _devtoolsEmit, _ctxRegistry } from "./devtools.js";
 
 const _directives = new Map();
 
@@ -52,6 +53,13 @@ export function processElement(el) {
     m.init(el, m.name, m.value);
   }
   _setCurrentEl(prev);
+
+  if (matched.length > 0) {
+    _devtoolsEmit("directive:init", {
+      element: el.tagName?.toLowerCase(),
+      directives: matched.map((m) => ({ name: m.name, value: m.value })),
+    });
+  }
 }
 
 export function processTree(root) {
@@ -68,6 +76,8 @@ export function processTree(root) {
 // ─── Disposal: proactive cleanup of watchers/listeners/disposers ────────
 
 function _disposeElement(node) {
+  const ctxId = node.__ctx?.__raw?.__devtoolsId;
+
   if (node.__ctx && node.__ctx.__listeners) {
     for (const fn of node.__ctx.__listeners) {
       _storeWatchers.delete(fn);
@@ -80,6 +90,14 @@ function _disposeElement(node) {
     node.__disposers = null;
   }
   node.__declared = false;
+
+  if (ctxId != null) {
+    _ctxRegistry.delete(ctxId);
+    _devtoolsEmit("ctx:disposed", {
+      id: ctxId,
+      elementTag: node.tagName?.toLowerCase(),
+    });
+  }
 }
 
 export function _disposeTree(root) {

package/src/router.js

@@ -8,6 +8,7 @@ import { evaluate } from "./evaluate.js";
 import { findContext, _clearDeclared, _loadTemplateElement, _processTemplateIncludes } from "./dom.js";
 import { processTree, _disposeTree } from "./registry.js";
 import { _animateIn } from "./animations.js";
+import { _devtoolsEmit } from "./devtools.js";
 
 export function _createRouter() {
   const routes = [];
@@ -101,6 +102,13 @@ export function _createRouter() {
     await _renderRoute(matched);
     listeners.forEach((fn) => fn(current));
 
+    _devtoolsEmit("route:navigate", {
+      path: current.path,
+      params: current.params,
+      query: current.query,
+      hash: current.hash,
+    });
+
     // Scroll to anchor if hash is present (e.g. route="/docs#cheatsheet")
     if (current.hash) {
       const anchorId = current.hash.slice(1);