atmx-web 0.44.0 → 0.47.0

package/src/dom/lifecycle.ts

@@ -1,379 +0,0 @@
-// FILE: src/dom/lifecycle.ts
-import { wasmEngine, allocString, allocBytes } from "../core/wasm";
-import { pendingRequests } from "../core/callback";
-import { resolveRoute, buildRequestPath } from "../core/router";
-import {
-  getContext,
-  updateContext,
-  getClosestData,
-  AtmxContextData,
-} from "../core/context";
-import { EventType } from "../core/types";
-import { executeAction, evaluateExpression } from "../resolver/evaluator";
-import { queryRegistry, ActiveQuery } from "../core/query";
-import { atmx } from "../index";
-
-let globalReqCounter = 0;
-
-function triggerEscapeHatch(element: HTMLElement, eventName: string) {
-  const attrName = `ax-on:${eventName}`;
-  if (element.hasAttribute(attrName)) {
-    const expr = element.getAttribute(attrName)!;
-    const ctx = getContext(element);
-    executeAction(expr, ctx);
-  }
-}
-
-function logTransaction(direction: "OUT" | "IN", reqId: number, details: any) {
-  if (!atmx.debug) return;
-  const color = direction === "OUT" ? "#7c3aed" : "#059669";
-  const label = direction === "OUT" ? "➔ WASM CALL" : "← WASM RESP";
-  console.groupCollapsed(
-    `%c${label} [#${reqId}]`,
-    `color: ${color}; font-weight: bold;`,
-  );
-  console.log("Details:", details);
-  console.groupEnd();
-}
-
-export function parseRpcCall(
-  element: HTMLElement,
-  attrValue: string,
-): { target: string; args: Record<string, any> } | null {
-  const match = attrValue.trim().match(/^([\w\.]+)(?:\((.*)\))?$/);
-  if (!match) return null;
-
-  const target = match[1];
-  let args = {};
-
-  if (match[2] && match[2].trim() !== "") {
-    try {
-      const ctx = getContext(element);
-      const availableData = ctx.data || getClosestData(element);
-      const fn = new Function("$data", "$state", `return (${match[2]});`);
-      args = fn(availableData, ctx) || {};
-    } catch (e) {
-      console.error(`ATMX Scope Error in "${attrValue}":`, e);
-    }
-  }
-  return { target, args };
-}
-
-export function connectQuery(element: HTMLElement) {
-  const attrVal = element.getAttribute("ax-query");
-  if (!attrVal) return;
-
-  const parsed = parseRpcCall(element, attrVal);
-  if (!parsed) return;
-
-  const route = resolveRoute(parsed.target);
-  if (!route) {
-    updateContext(element, {
-      state: "error",
-      error: { message: `Route not found: ${parsed.target}` },
-    });
-    return;
-  }
-
-  const queryKey = `${route.namespace}:${route.id}:${JSON.stringify(parsed.args)}`;
-
-  let activeQuery = queryRegistry.get(queryKey);
-  if (!activeQuery) {
-    activeQuery = new ActiveQuery(queryKey, route, parsed.args);
-    queryRegistry.set(queryKey, activeQuery);
-  }
-
-  if (!(element as any)._axListener) {
-    (element as any)._axListener = (newState: Partial<AtmxContextData>) => {
-      updateContext(element, newState);
-      if (newState.state === "data" || newState.state === "error") {
-        triggerEscapeHatch(element, newState.state);
-        element.dispatchEvent(
-          new CustomEvent(`atmx:${newState.state}`, {
-            bubbles: true,
-            detail: newState.data || newState.error,
-          }),
-        );
-      }
-    };
-    activeQuery.subscribe((element as any)._axListener);
-  }
-
-  activeQuery.fetch();
-}
-
-export function executeMutation(element: HTMLElement) {
-  const attrVal = element.getAttribute("ax-mutate");
-  if (!attrVal) return;
-
-  const parsed = parseRpcCall(element, attrVal);
-  if (!parsed) return;
-
-  const route = resolveRoute(parsed.target);
-  if (!route) {
-    updateContext(element, {
-      state: "error",
-      error: { message: `Route not found: ${parsed.target}` },
-    });
-    triggerEscapeHatch(element, "error");
-    return;
-  }
-
-  updateContext(element, { state: "mutating", error: null, data: null });
-  triggerEscapeHatch(element, "mutating");
-
-  const formDataObj: Record<string, any> = {};
-  if (element instanceof HTMLFormElement) {
-    const formData = new FormData(element);
-    formData.forEach((value, key) => {
-      const input = element.elements.namedItem(key);
-      let isNumber = false;
-
-      if (input instanceof HTMLInputElement) {
-        isNumber = input.type === "number";
-      } else if (input instanceof RadioNodeList && input.length > 0) {
-        isNumber = (input[0] as HTMLInputElement).type === "number";
-      }
-
-      const finalVal = isNumber && value !== "" ? Number(value) : value;
-
-      // ✨ NEW: Un-flatten dot notation! (e.g. "user.email" -> { user: { email: ... } })
-      if (key.includes(".")) {
-        const parts = key.split(".");
-        let current = formDataObj;
-        for (let i = 0; i < parts.length - 1; i++) {
-          if (!current[parts[i]]) current[parts[i]] = {};
-          current = current[parts[i]];
-        }
-        current[parts[parts.length - 1]] = finalVal;
-      } else {
-        formDataObj[key] = finalVal;
-      }
-    });
-  }
-
-  const mergedArgs = { ...formDataObj, ...parsed.args };
-  const { path, remainingArgs } = buildRequestPath(route, mergedArgs);
-
-  // ✨ NEW: Smart Body Extraction for FastAPI!
-  let payloadObj = remainingArgs;
-  if (route.bodyParam && remainingArgs[route.bodyParam] !== undefined) {
-    // If the developer passed the data inside the wrapper (e.g., args.user), extract it so it's flat!
-    payloadObj = remainingArgs[route.bodyParam];
-  }
-
-  let customHeaders: Record<string, string> = {};
-  const headersAttr = element.getAttribute("ax-headers");
-  if (headersAttr) {
-    try {
-      const fn = new Function("return (" + headersAttr + ");");
-      customHeaders = fn() || {};
-    } catch (e) {
-      console.error("ATMX: Invalid ax-headers syntax", e);
-    }
-  }
-
-  const isFormUrlEncoded = Object.entries(customHeaders).some(
-    ([k, v]) =>
-      k.toLowerCase() === "content-type" &&
-      v.includes("application/x-www-form-urlencoded"),
-  );
-
-  let payloadBytes = new Uint8Array(0);
-  if (Object.keys(payloadObj).length > 0) {
-    if (isFormUrlEncoded) {
-      const params = new URLSearchParams();
-      for (const [k, v] of Object.entries(payloadObj)) {
-        params.append(k, String(v));
-      }
-      payloadBytes = new TextEncoder().encode(params.toString());
-    } else {
-      payloadBytes = new TextEncoder().encode(JSON.stringify(payloadObj));
-    }
-  }
-
-  executeWasmCall(
-    element,
-    route.namespace,
-    route.id,
-    route.method,
-    path,
-    payloadBytes,
-    route.isStream,
-    true,
-    customHeaders,
-    isFormUrlEncoded,
-  );
-}
-
-function executeWasmCall(
-  element: HTMLElement,
-  namespace: string,
-  endpointId: number,
-  method: string,
-  path: string,
-  payloadBytes: Uint8Array,
-  isStream: boolean,
-  isMutation: boolean,
-  customHeaders: Record<string, string> = {},
-  isFormUrlEncoded: boolean = false,
-) {
-  const reqId = ++globalReqCounter;
-
-  logTransaction("OUT", reqId, {
-    namespace,
-    endpointId,
-    method,
-    path,
-    headers: customHeaders,
-    payload:
-      payloadBytes.length > 0
-        ? isFormUrlEncoded
-          ? new TextDecoder().decode(payloadBytes)
-          : JSON.parse(new TextDecoder().decode(payloadBytes))
-        : null,
-  });
-
-  pendingRequests.set(reqId, {
-    isStream: isStream,
-    onResponse: (res) => handleResponse(element, res, isMutation, reqId),
-    onComplete: () => {
-      if (atmx.debug)
-        console.log(`%c✔ Stream Complete [#${reqId}]`, "color: #94a3b8;");
-    },
-  });
-
-  const nsStr = allocString(namespace);
-  const mStr = allocString(method);
-  const pStr = allocString(path);
-  const tpStr = allocString("");
-  const hStr = allocString(
-    Object.keys(customHeaders).length > 0 ? JSON.stringify(customHeaders) : "",
-  );
-  const payloadPtr = allocBytes(payloadBytes);
-
-  wasmEngine.axiom_wasm_call(
-    reqId,
-    nsStr.ptr,
-    nsStr.len,
-    endpointId,
-    mStr.ptr,
-    mStr.len,
-    pStr.ptr,
-    pStr.len,
-    tpStr.ptr,
-    tpStr.len,
-    hStr.ptr,
-    hStr.len,
-    payloadPtr,
-    payloadBytes.length,
-  );
-
-  wasmEngine.axiom_free_memory(nsStr.ptr, nsStr.len);
-  wasmEngine.axiom_free_memory(mStr.ptr, mStr.len);
-  wasmEngine.axiom_free_memory(pStr.ptr, pStr.len);
-  wasmEngine.axiom_free_memory(tpStr.ptr, tpStr.len);
-  wasmEngine.axiom_free_memory(hStr.ptr, hStr.len);
-  if (payloadPtr) wasmEngine.axiom_free_memory(payloadPtr, payloadBytes.length);
-}
-
-function handleResponse(
-  element: HTMLElement,
-  res: any,
-  isMutation: boolean,
-  reqId: number,
-) {
-  logTransaction("IN", reqId, {
-    eventType: EventType[res.eventType],
-    data: res.data,
-    error: res.error,
-  });
-
-  if (res.eventType === EventType.Error) {
-    updateContext(element, {
-      state: "error",
-      error: res.error,
-      isFetching: false,
-      isMutating: false,
-    });
-    triggerEscapeHatch(element, "error");
-    element.dispatchEvent(
-      new CustomEvent("atmx:error", { bubbles: true, detail: res.error }),
-    );
-    return;
-  }
-
-  if (res.data) {
-    let source: "cache" | "network" = "network";
-    let isFetching = false;
-
-    if (res.eventType === EventType.CacheHit) {
-      source = "cache";
-    } else if (res.eventType === EventType.CacheHitAndFetching) {
-      source = "cache";
-      isFetching = true;
-    } else if (res.eventType === EventType.NetworkSuccess) {
-      source = "network";
-    }
-
-    const nextState = isMutation ? "success" : "data";
-
-    updateContext(element, {
-      state: nextState,
-      data: res.data,
-      source,
-      isFetching,
-      isMutating: false,
-    });
-
-    // ✨ PHASE 1: Declarative Auth
-    if (isMutation) {
-      const storeTokenAttr = element.getAttribute("ax-store-token");
-      if (storeTokenAttr) {
-        const tokenVal = evaluateExpression(
-          storeTokenAttr,
-          getContext(element),
-        );
-        if (tokenVal) {
-          const rpcAttr = element.getAttribute("ax-mutate");
-          const route = resolveRoute(parseRpcCall(element, rpcAttr!)!.target);
-          const headerName =
-            element.getAttribute("ax-token-header") || "Authorization";
-          atmx.setAuthToken(
-            route?.namespace || "default",
-            headerName,
-            tokenVal,
-          );
-        }
-      }
-
-      if (element.hasAttribute("ax-clear-token")) {
-        const rpcAttr = element.getAttribute("ax-mutate");
-        const route = resolveRoute(parseRpcCall(element, rpcAttr!)!.target);
-        const headerName =
-          element.getAttribute("ax-token-header") || "Authorization";
-        atmx.clearAuthToken(route?.namespace || "default", headerName);
-      }
-
-      // ✨ PHASE 1: Declarative Refresh
-      const refreshAttr = element.getAttribute("ax-refresh");
-      if (refreshAttr) {
-        const targets = refreshAttr.split(",").map((s) => s.trim());
-        for (const [_, activeQuery] of queryRegistry.entries()) {
-          const routeName = `${activeQuery.route.namespace}.${activeQuery.route.name}`;
-          if (targets.includes(routeName)) {
-            activeQuery.fetch(true); // Force refresh
-          }
-        }
-      }
-    }
-
-    triggerEscapeHatch(element, nextState);
-    element.dispatchEvent(
-      new CustomEvent(isMutation ? "atmx:success" : "atmx:data", {
-        bubbles: true,
-        detail: res.data,
-      }),
-    );
-  }
-}

package/src/dom/scanner.ts

@@ -1,125 +0,0 @@
-// FILE: src/dom/scanner.ts
-import { connectQuery, executeMutation, parseRpcCall } from "./lifecycle";
-import { updateContext, getContext } from "../core/context";
-import { queryRegistry } from "../core/query";
-import { resolveRoute } from "../core/router";
-import { evaluateExpression } from "../resolver/evaluator";
-
-const intersectionObserver = new IntersectionObserver((entries) => {
-  entries.forEach((entry) => {
-    if (entry.isIntersecting) {
-      const el = entry.target as HTMLElement;
-      if (el.hasAttribute("ax-query")) connectQuery(el);
-      intersectionObserver.unobserve(el);
-    }
-  });
-});
-
-/**
- * ✨ NEW: Evaluates dynamic prefixed attributes like :ax-query="sdk.pyExample.login()"
- */
-function evaluateDynamicAttributes(root: HTMLElement | Document) {
-  const dynamicElements = root.querySelectorAll<HTMLElement>(
-    "[\\:ax-query], [\\:ax-mutate]",
-  );
-  dynamicElements.forEach((el) => {
-    if (el.hasAttribute(":ax-query")) {
-      const expr = el.getAttribute(":ax-query")!;
-      const val = evaluateExpression(expr, getContext(el));
-      if (val) el.setAttribute("ax-query", String(val));
-      el.removeAttribute(":ax-query");
-    }
-    if (el.hasAttribute(":ax-mutate")) {
-      const expr = el.getAttribute(":ax-mutate")!;
-      const val = evaluateExpression(expr, getContext(el));
-      if (val) el.setAttribute("ax-mutate", String(val));
-      el.removeAttribute(":ax-mutate");
-    }
-  });
-}
-
-export function scanAndInitialize(root: HTMLElement | Document = document) {
-  // 0. Unwrap Dynamic Typescript Clients first
-  evaluateDynamicAttributes(root);
-
-  // 1. Initialize ax-query blocks
-  const queries = root.querySelectorAll("[ax-query]");
-  queries.forEach((el) => {
-    const htmlEl = el as HTMLElement;
-    updateContext(htmlEl, {});
-
-    const triggerMode = htmlEl.getAttribute("ax-trigger") || "load";
-    if (triggerMode === "load") {
-      connectQuery(htmlEl);
-    } else if (triggerMode === "intersect") {
-      intersectionObserver.observe(htmlEl);
-    } else {
-      htmlEl.addEventListener(triggerMode, (e) => {
-        e.preventDefault();
-        connectQuery(htmlEl);
-      });
-    }
-  });
-
-  // 2. Initialize ax-mutate blocks
-  const mutates = root.querySelectorAll("[ax-mutate]");
-  mutates.forEach((el) => {
-    const htmlEl = el as HTMLElement;
-    updateContext(htmlEl, {});
-
-    const trigger = htmlEl.tagName === "FORM" ? "submit" : "click";
-
-    htmlEl.addEventListener(trigger, (e) => {
-      if (
-        htmlEl.tagName === "A" ||
-        htmlEl.tagName === "BUTTON" ||
-        htmlEl.tagName === "FORM"
-      ) {
-        e.preventDefault();
-      }
-      executeMutation(htmlEl);
-    });
-  });
-
-  // 3. Action Modifiers (e.g., ax-trigger="refresh")
-  const refreshers = root.querySelectorAll('[ax-trigger="refresh"]');
-  refreshers.forEach((el) => {
-    const htmlEl = el as HTMLElement;
-    htmlEl.addEventListener("click", (e) => {
-      e.preventDefault();
-
-      const parentQuery = htmlEl.closest("[ax-query]") as HTMLElement;
-      if (parentQuery) {
-        const attrVal = parentQuery.getAttribute("ax-query")!;
-        const parsed = parseRpcCall(parentQuery, attrVal);
-
-        if (parsed) {
-          const route = resolveRoute(parsed.target);
-          if (route) {
-            const queryKey = `${route.namespace}:${route.id}:${JSON.stringify(parsed.args)}`;
-            const activeQuery = queryRegistry.get(queryKey);
-            if (activeQuery) {
-              activeQuery.fetch(true);
-            } else {
-              connectQuery(parentQuery);
-            }
-          }
-        }
-      }
-    });
-  });
-}
-
-export function initMutationObserver() {
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      mutation.addedNodes.forEach((node) => {
-        if (node instanceof HTMLElement) {
-          scanAndInitialize(node);
-        }
-      });
-    });
-  });
-
-  observer.observe(document.body, { childList: true, subtree: true });
-}

package/src/index.ts

@@ -1,78 +0,0 @@
-// FILE: src/index.ts
-import { initWasm, setAuthToken, clearAuthToken } from "./core/wasm";
-import { scanAndInitialize, initMutationObserver } from "./dom/scanner";
-import { connectQuery } from "./dom/lifecycle";
-import { AtmxConfig, InitResult } from "./core/types";
-import "./dom/components/engine-status";
-
-export const ATMX_VERSION = "0.44.0";
-
-class ATMX {
-  public version = ATMX_VERSION;
-  public initialized = false;
-  public debug = false;
-
-  public async init(config: AtmxConfig): Promise<InitResult> {
-    if (this.initialized) {
-      return { ok: true, contracts: {}, initDurationMs: 0 };
-    }
-
-    const result = await initWasm(config);
-
-    if (result.ok) {
-      this.debug = config.debug || false;
-
-      initMutationObserver();
-      scanAndInitialize(document.body);
-
-      this.initialized = true;
-      if (this.debug)
-        console.log(
-          "%c🚀 ATMX Debug Mode: Enabled",
-          "color: #2563eb; font-weight: bold;",
-        );
-      console.log(
-        `✅ ATMX v${this.version} Online (${result.initDurationMs}ms). Reactive Engine Started.`,
-      );
-
-      document.dispatchEvent(new CustomEvent("atmx:ready", { detail: result }));
-    } else {
-      console.error("❌ ATMX Initialization Failed:", result.error);
-      // Broadcast fatal error so UI components can catch it
-      document.dispatchEvent(
-        new CustomEvent("atmx:error", { detail: result.error }),
-      );
-    }
-
-    return result;
-  }
-
-  public triggerQuery(elementOrSelector: string | HTMLElement) {
-    const el =
-      typeof elementOrSelector === "string"
-        ? (document.querySelector(elementOrSelector) as HTMLElement)
-        : elementOrSelector;
-
-    if (el && el instanceof HTMLElement && el.hasAttribute("ax-query")) {
-      connectQuery(el);
-    }
-  }
-
-  public on(
-    eventName: "ready" | "data" | "error" | "success" | "contract-loaded",
-    callback: (e: any) => void,
-  ) {
-    document.addEventListener(`atmx:${eventName}`, callback);
-  }
-
-  public setAuthToken(namespace: string, methodName: string, token: string) {
-    setAuthToken(namespace, methodName, token);
-  }
-
-  public clearAuthToken(namespace: string, methodName: string) {
-    clearAuthToken(namespace, methodName);
-  }
-}
-
-export const atmx = new ATMX();
-if (typeof window !== "undefined") (window as any).atmx = atmx;

package/src/resolver/evaluator.ts

@@ -1,46 +0,0 @@
-// FILE: src/resolver/evaluator.ts
-import { AtmxContextData } from "../core/context";
-
-/**
- * Safely evaluates a JS expression from an HTML attribute against the local ATMX Context.
- */
-export function evaluateExpression(
-  expr: string,
-  context: AtmxContextData,
-  locals: Record<string, any> = {},
-): any {
-  if (!expr) return undefined;
-  try {
-    const keys = Object.keys(locals);
-    const values = Object.values(locals);
-
-    // Dynamically build a function that accepts $data, $error, $state, AND our locals ($item, etc.)
-    const fn = new Function(
-      "$data",
-      "$error",
-      "$state",
-      ...keys,
-      `return (${expr});`,
-    );
-    return fn(context.data || {}, context.error || {}, context, ...values);
-  } catch (e) {
-    console.error(`ATMX Eval Error: ${expr}`, e);
-    return undefined;
-  }
-}
-
-export function executeAction(
-  expr: string,
-  context: AtmxContextData,
-  locals: Record<string, any> = {},
-): void {
-  if (!expr) return;
-  try {
-    const keys = Object.keys(locals);
-    const values = Object.values(locals);
-    const fn = new Function("$data", "$error", "$state", ...keys, expr);
-    fn(context.data || {}, context.error || {}, context, ...values);
-  } catch (e) {
-    console.error(`ATMX Action Error: ${expr}`, e);
-  }
-}