atmx-react 0.43.0 → 0.47.0

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "atmx-react",
-  "version": "0.43.0",
+  "files": [
+    "dist"
+  ],
+  "version": "0.47.0",
   "description": "React bindings for ATMX and Axiom Core WASM runtime",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -12,18 +15,18 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "atmx-web": "^0.47.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
-  },
-  "dependencies": {
-    "atmx-web": "^0.42.0"
   }
 }

package/src/components/AxGet.tsx

@@ -1,19 +0,0 @@
-// src/components/AxGet.tsx
-import { AxiomQueryDef, AxiomError } from '../utils/core-bridge';
-import { useAxiomQuery } from '../hooks/useAxiomQuery';
-
-interface AxGetProps<T> {
-    query: AxiomQueryDef<T>;
-    children: (props: {
-        data: T | null;
-        isLoading: boolean;
-        error: AxiomError | null;
-        refetch: () => void;
-    }) => React.ReactNode;
-    enabled?: boolean;
-}
-
-export function AxGet<T>({ query, children, enabled }: AxGetProps<T>) {
-    const result = useAxiomQuery<T>(query, { enabled });
-    return <>{children(result)}</>;
-}

package/src/components/AxMutation.tsx

@@ -1,48 +0,0 @@
-// src/components/AxMutation.tsx
-import { ReactNode } from 'react';
-import { useAxiomMutation } from '../hooks/useAxiomMutation';
-import { AxiomError, AxiomQueryDef } from '../utils/core-bridge';
-
-interface AxMutationRenderProps<T, A> {
-    /** The function to trigger the request, with fully typed arguments */
-    execute: (args: A) => void;
-    /** The decoded data returned from the mutation */
-    data: T | null;
-    isLoading: boolean;
-    error: AxiomError | null;
-}
-
-interface AxMutationProps<T, A> {
-    /** The SDK method to use, e.g., mutation={sdk.createUser} */
-    mutation: (args: A) => AxiomQueryDef<T>;
-    /** Render prop function */
-    children: (props: AxMutationRenderProps<T, A>) => ReactNode;
-}
-
-export function AxMutation<T = any, A = any>({
-    mutation,
-    children
-}: AxMutationProps<T, A>) {
-    // Now correctly passing the SDK function to the refactored hook
-    const result = useAxiomMutation<T, A>(mutation);
-
-    return (
-        <>
-            {children({
-                execute: result.execute,
-                data: result.data,
-                isLoading: result.isLoading,
-                error: result.error
-            })}
-        </>
-    );
-}
-
-/** 
- * A semantic alias for mutations. 
- * Since the SDK already knows the HTTP method (POST/PUT), 
- * this is just for better code readability.
- */
-export function AxPost<T = any, A = any>(props: AxMutationProps<T, A>) {
-    return <AxMutation {...props} />;
-}

package/src/components/AxQuery.tsx

@@ -1,41 +0,0 @@
-// FILE: src/components/AxQuery.tsx
-import { ReactNode } from "react";
-import { AxiomQueryDef, AxiomState } from "../utils/core-bridge";
-import { useAxiomQuery } from "../hooks/useAxiomQuery";
-import { AxiomDataContext } from "../context/AxiomDataContext";
-
-export interface AxQueryProps<T> {
-  call: AxiomQueryDef<T>;
-  children:
-    | ReactNode
-    | ((props: {
-        data: T | null;
-        state: AxiomState<T>;
-        refetch: () => void;
-      }) => ReactNode);
-  enabled?: boolean;
-}
-
-export function AxQuery<T>({
-  call,
-  children,
-  enabled = true,
-}: AxQueryProps<T>) {
-  const result = useAxiomQuery<T>(call, { enabled });
-
-  const content =
-    typeof children === "function"
-      ? children({
-          data: result.data,
-          state: result.state,
-          refetch: result.refetch,
-        })
-      : children;
-
-  // Provide the state downwards so nested components (or AxWhen) can inherit it!
-  return (
-    <AxiomDataContext.Provider value={result.state}>
-      {content}
-    </AxiomDataContext.Provider>
-  );
-}

package/src/components/AxTrigger.tsx

@@ -1,36 +0,0 @@
-// src/components/AxTrigger.tsx
-import { useEffect, useRef, ReactNode } from 'react';
-
-interface AxTriggerProps {
-    onTrigger: () => void;
-    once?: boolean;
-    children?: ReactNode;
-}
-
-export const AxTrigger: React.FC<AxTriggerProps> = ({ onTrigger, once = true, children }) => {
-    const elementRef = useRef<HTMLDivElement>(null);
-    const hasTriggered = useRef(false);
-
-    useEffect(() => {
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    if (once && hasTriggered.current) return;
-
-                    onTrigger();
-                    hasTriggered.current = true;
-
-                    if (once) observer.unobserve(entry.target);
-                }
-            });
-        }, { threshold: 0.1 });
-
-        if (elementRef.current) {
-            observer.observe(elementRef.current);
-        }
-
-        return () => observer.disconnect();
-    }, [onTrigger, once]);
-
-    return <div ref={elementRef}>{children}</div>;
-};

package/src/components/AxWhen.tsx

@@ -1,54 +0,0 @@
-// FILE: src/components/AxWhen.tsx
-import { ReactNode, useContext } from "react";
-import { AxiomDataContext } from "../context/AxiomDataContext";
-
-interface AxWhenProps {
-  /** Explicit state object from a hook (e.g. sdk.users.useGetUser) */
-  value?: {
-    status: string;
-    data?: any;
-    isFetching?: boolean;
-    isMutating?: boolean;
-  };
-  /** Comma-separated states: "idle, loading, mutating, data, success, error" */
-  is: string;
-  children: ReactNode;
-}
-
-export function AxWhen({ value, is, children }: AxWhenProps) {
-  // Use useContext directly instead of the throwing hook useAxiomContext
-  const context = useContext(AxiomDataContext);
-  const stateObj = value || context;
-
-  // If no value is provided and we aren't inside a scope, render nothing
-  if (!stateObj) return null;
-
-  const expectedStates = is.split(",").map((s) => s.trim().toLowerCase());
-
-  let currentState = "idle";
-
-  if (stateObj.isMutating) {
-    currentState = "mutating";
-  } else if (stateObj.status === "loading") {
-    currentState = "loading";
-  } else if (stateObj.status === "error") {
-    currentState = "error";
-  } else if (stateObj.status === "success" || stateObj.data) {
-    currentState = "data";
-  }
-
-  // Handle 'success' as a distinct semantic state for Mutations
-  if (
-    expectedStates.includes("success") &&
-    stateObj.status === "success" &&
-    !stateObj.isMutating
-  ) {
-    currentState = "success";
-  }
-
-  if (expectedStates.includes(currentState)) {
-    return <>{children}</>;
-  }
-
-  return null;
-}

package/src/context/AxiomDataContext.tsx

@@ -1,27 +0,0 @@
-// FILE: src/context/AxiomDataContext.tsx
-import { createContext, useContext } from "react";
-import { AxiomState } from "../utils/core-bridge";
-
-export const AxiomDataContext = createContext<AxiomState<any> | null>(null);
-
-/**
- * Throwing version: Use this when you absolutely expect to be inside a scope.
- */
-export function useAxiomContext<T>(): AxiomState<T> {
-  const context = useContext(AxiomDataContext);
-  if (!context) {
-    throw new Error(
-      "useAxiomContext must be used within an <AxQuery> or <AxMutate> scope.",
-    );
-  }
-  return context as AxiomState<T>;
-}
-
-/**
- * Safe version: Returns T or an empty object.
- * Used for Context Inheritance ($data access).
- */
-export function useAxiomData<T>(): T {
-  const context = useContext(AxiomDataContext);
-  return (context?.data || {}) as T;
-}

package/src/context/AxiomProvider.tsx

@@ -1,97 +0,0 @@
-// FILE: src/context/AxiomProvider.tsx
-import React, {
-  createContext,
-  useEffect,
-  useState,
-  useRef,
-  ReactNode,
-} from "react";
-import { initWasm, AtmxConfig } from "../utils/core-bridge";
-
-export interface AxiomContextState {
-  isReady: boolean;
-  error: Error | null;
-  config: AtmxConfig | null;
-}
-
-export const AxiomContext = createContext<AxiomContextState | undefined>(
-  undefined,
-);
-
-export interface AxiomProviderProps {
-  configUrl?: string;
-  config?: AtmxConfig;
-  children: ReactNode;
-  fallback?: ReactNode;
-}
-
-export const AxiomProvider: React.FC<AxiomProviderProps> = ({
-  configUrl,
-  config,
-  children,
-  fallback,
-}) => {
-  const [state, setState] = useState<AxiomContextState>({
-    isReady: false,
-    error: null,
-    config: null,
-  });
-
-  const initStarted = useRef(false);
-
-  useEffect(() => {
-    if (initStarted.current) return;
-    initStarted.current = true;
-
-    const bootSequence = async () => {
-      try {
-        let finalConfig: AtmxConfig;
-        if (configUrl) {
-          const res = await fetch(configUrl);
-          if (!res.ok)
-            throw new Error(`Failed to load config from ${configUrl}`);
-          finalConfig = await res.json();
-        } else if (config) {
-          finalConfig = config;
-        } else {
-          throw new Error(
-            "AxiomProvider requires either 'configUrl' or 'config' prop.",
-          );
-        }
-
-        if (
-          !finalConfig.contracts ||
-          Object.keys(finalConfig.contracts).length === 0
-        ) {
-          throw new Error("No contracts defined in ATMX config.");
-        }
-
-        // 1. Initialize Wasm Engine (Handles ALL contracts natively!)
-        await initWasm(finalConfig);
-
-        console.log(`⚛️ ATMX-React: Provider ready.`);
-        setState({ isReady: true, error: null, config: finalConfig });
-      } catch (err: any) {
-        console.error("ATMX Provider Boot Error:", err);
-        setState({ isReady: false, error: err, config: null });
-      }
-    };
-
-    bootSequence();
-  }, [configUrl, config]);
-
-  if (state.error)
-    return (
-      <div style={{ color: "red", padding: "20px", fontFamily: "monospace" }}>
-        <strong>ATMX Initialization Failed:</strong>
-        <br />
-        {state.error.message}
-      </div>
-    );
-
-  if (!state.isReady) return <>{fallback || null}</>;
-
-  return (
-    <AxiomContext.Provider value={state}>{children}</AxiomContext.Provider>
-  );
-};

package/src/core/ActiveQuery.ts

@@ -1,217 +0,0 @@
-// FILE: src/core/ActiveQuery.ts
-import {
-  AxiomState,
-  AxiomQueryDef,
-  wasmEngine,
-  allocString,
-  allocBytes,
-  pendingRequests,
-  getNextReqId,
-  buildRequestPath,
-  Route,
-} from "../utils/core-bridge";
-
-type Listener<T> = (state: AxiomState<T>) => void;
-
-export class ActiveQuery<T> {
-  public queryKey: string;
-  public def: AxiomQueryDef<T>;
-  private state: AxiomState<T>;
-  private listeners: Set<Listener<T>> = new Set();
-  private currentReqId: number | null = null;
-
-  constructor(queryKey: string, def: AxiomQueryDef<T>) {
-    this.queryKey = queryKey;
-    this.def = def;
-    this.state = {
-      status: "idle",
-      data: null,
-      error: null,
-      isFetching: false,
-      isMutating: false,
-      source: null,
-    };
-  }
-
-  public getState(): AxiomState<T> {
-    return this.state;
-  }
-
-  public subscribe(listener: Listener<T>): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-
-  private updateState(partial: Partial<AxiomState<T>>) {
-    this.state = { ...this.state, ...partial };
-    this.listeners.forEach((l) => l(this.state));
-  }
-
-  public fetch(force: boolean = false, debug: boolean = false) {
-    if (this.state.isFetching && !force) return;
-
-    this.updateState({
-      isFetching: true,
-      status: this.state.data ? "success" : "loading",
-    });
-
-    const reqId = getNextReqId();
-    this.currentReqId = reqId;
-
-    // FIX: Bypass the dictionary lookup. We already have the metadata from the generated SDK!
-    const syntheticRoute: Route = {
-      id: this.def.endpointId,
-      namespace: this.def.namespace,
-      name: this.def.name || "unknown",
-      method: this.def.method,
-      pathTemplate: this.def.path,
-      isStream: !!this.def.isStream,
-    };
-
-    // Auto-interpolate {path_params} and ?query_params
-    const { path } = buildRequestPath(syntheticRoute, this.def.args);
-
-    if (debug) {
-      console.groupCollapsed(
-        `%c➔ WASM QUERY [#${reqId}]`,
-        `color: #7c3aed; font-weight: bold;`,
-      );
-      console.log("Namespace:", this.def.namespace);
-      console.log("Endpoint ID:", this.def.endpointId);
-      console.log("Path:", path);
-      console.groupEnd();
-    }
-
-    pendingRequests.set(reqId, {
-      isStream: !!this.def.isStream,
-      onResponse: (response) => {
-        if (this.currentReqId !== reqId) return;
-
-        if (debug) {
-          const evtName =
-            response.eventType === 1
-              ? "NetworkSuccess"
-              : response.eventType === 2
-                ? "CacheHit"
-                : response.eventType === 3
-                  ? "CacheHitAndFetching"
-                  : response.eventType === 4
-                    ? "Error"
-                    : "Complete";
-          console.groupCollapsed(
-            `%c← WASM RESP [#${reqId}]`,
-            `color: #059669; font-weight: bold;`,
-          );
-          console.log("Event Type:", evtName);
-          if (response.data) console.log("Data:", response.data);
-          if (response.error) console.log("Error:", response.error);
-          console.groupEnd();
-        }
-
-        if (response.eventType === 4) {
-          this.updateState({
-            status: "error",
-            error: response.error || null,
-            isFetching: false,
-          });
-          return;
-        }
-
-        if (response.data) {
-          try {
-            const decodedData = this.def.decoder(response.data);
-            let source: "cache" | "network" = "network";
-            let isFetching = false;
-
-            if (response.eventType === 2) {
-              source = "cache";
-              isFetching = false;
-            } else if (response.eventType === 3) {
-              source = "cache";
-              isFetching = true;
-            } else if (response.eventType === 1) {
-              source = "network";
-              isFetching = false;
-            }
-
-            this.updateState({
-              status: "success",
-              data: decodedData,
-              error: null,
-              isFetching,
-              source,
-            });
-          } catch (e) {
-            this.updateState({
-              status: "error",
-              error: { message: "Decoding failed", details: String(e) } as any,
-              isFetching: false,
-            });
-          }
-        }
-      },
-      onComplete: () => {
-        if (this.currentReqId !== reqId) return;
-        this.updateState({ isFetching: false });
-      },
-    });
-
-    const isFormUrlEncoded = Object.entries(this.def.headers || {}).some(
-      ([k, v]) =>
-        k.toLowerCase() === "content-type" &&
-        v.includes("application/x-www-form-urlencoded"),
-    );
-
-    let payloadPtr = 0,
-      payloadLen = 0;
-    if (this.def.payload !== undefined && this.def.payload !== null) {
-      const safePayload = this.def.serializer
-        ? this.def.serializer(this.def.payload)
-        : this.def.payload;
-      let payloadBytes: Uint8Array;
-
-      if (isFormUrlEncoded && typeof safePayload === "object") {
-        const params = new URLSearchParams();
-        for (const [k, v] of Object.entries(safePayload))
-          params.append(k, String(v));
-        payloadBytes = new TextEncoder().encode(params.toString());
-      } else {
-        payloadBytes = new TextEncoder().encode(JSON.stringify(safePayload));
-      }
-
-      payloadPtr = allocBytes(payloadBytes);
-      payloadLen = payloadBytes.length;
-    }
-
-    const nsStr = allocString(this.def.namespace);
-    const mStr = allocString(this.def.method);
-    const pStr = allocString(path);
-    const tpStr = allocString("");
-    const hStr = allocString(
-      this.def.headers ? JSON.stringify(this.def.headers) : "",
-    );
-
-    wasmEngine.axiom_wasm_call(
-      reqId,
-      nsStr.ptr,
-      nsStr.len,
-      this.def.endpointId,
-      mStr.ptr,
-      mStr.len,
-      pStr.ptr,
-      pStr.len,
-      tpStr.ptr,
-      tpStr.len,
-      hStr.ptr,
-      hStr.len,
-      payloadPtr,
-      payloadLen,
-    );
-
-    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);
-  }
-}

package/src/core/QueryManager.ts

@@ -1,40 +0,0 @@
-// FILE: src/core/QueryManager.ts
-import { ActiveQuery } from "./ActiveQuery";
-import { AxiomQueryDef } from "../utils/core-bridge";
-
-class QueryManager {
-  private queries = new Map<string, ActiveQuery<any>>();
-
-  private buildKey(
-    namespace: string,
-    endpointId: number,
-    args: Record<string, any>,
-  ): string {
-    // EXACT ATMX Core Cache Key Match!
-    return `${namespace}:${endpointId}:${JSON.stringify(args)}`;
-  }
-
-  public getQuery<T>(def: AxiomQueryDef<T>): ActiveQuery<T> {
-    const key = this.buildKey(def.namespace, def.endpointId, def.args);
-
-    if (this.queries.has(key)) {
-      return this.queries.get(key) as ActiveQuery<T>;
-    }
-
-    const newQuery = new ActiveQuery<T>(key, def);
-    this.queries.set(key, newQuery);
-    return newQuery;
-  }
-
-  public invalidate(
-    namespace: string,
-    endpointId: number,
-    args: Record<string, any>,
-  ) {
-    const key = this.buildKey(namespace, endpointId, args);
-    const query = this.queries.get(key);
-    if (query) query.fetch(true);
-  }
-}
-
-export const axiomQueryManager = new QueryManager();

package/src/hooks/useAxiom.ts

@@ -1,13 +0,0 @@
-// src/hooks/useAxiom.ts
-import { useContext } from 'react';
-import { AxiomContext } from '../context/AxiomProvider';
-
-export const useAxiom = () => {
-    const context = useContext(AxiomContext);
-
-    if (context === undefined) {
-        throw new Error("useAxiom must be used within an <AxiomProvider>. Did you forget to wrap your app?");
-    }
-
-    return context;
-};