@creact-labs/creact 0.1.7 → 0.2.0

package/dist/reactive/signal.js

@@ -0,0 +1,60 @@
+/**
+ * Signal - core reactive primitive (internal)
+ * Inspired by SolidJS createSignal
+ */
+import { getListener, scheduleComputation } from './tracking';
+/**
+ * Create a reactive signal (internal - not exported from package)
+ */
+export function createSignal(initial) {
+    const signal = {
+        value: initial,
+        observers: null,
+        observerSlots: null,
+    };
+    function read() {
+        const listener = getListener();
+        // If there's an active computation, register it
+        if (listener) {
+            const sSlot = signal.observers?.length ?? 0;
+            // Listener tracks this signal
+            if (!listener.sources) {
+                listener.sources = [signal];
+                listener.sourceSlots = [sSlot];
+            }
+            else {
+                listener.sources.push(signal);
+                listener.sourceSlots?.push(sSlot);
+            }
+            // Signal tracks this listener
+            if (!signal.observers) {
+                signal.observers = [listener];
+                signal.observerSlots = [listener.sources.length - 1];
+            }
+            else {
+                signal.observers.push(listener);
+                signal.observerSlots?.push(listener.sources.length - 1);
+            }
+        }
+        return signal.value;
+    }
+    function write(value) {
+        if (signal.value === value)
+            return; // No change
+        signal.value = value;
+        // Notify all observers
+        if (signal.observers?.length) {
+            for (const observer of signal.observers) {
+                observer.state = 1; // STALE
+                scheduleComputation(observer);
+            }
+        }
+    }
+    return [read, write];
+}
+/**
+ * Get raw signal value without tracking
+ */
+export function peekSignal(signal) {
+    return signal.value;
+}

package/dist/reactive/tracking.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Global tracking context for reactive system
+ * Inspired by SolidJS signal.ts
+ */
+import type { Computation } from './signal';
+export declare let Listener: Computation<any> | null;
+/**
+ * Set the current listener (computation being executed)
+ */
+export declare function setListener(comp: Computation<any> | null): Computation<any> | null;
+/**
+ * Get current listener
+ */
+export declare function getListener(): Computation<any> | null;
+/**
+ * Schedule a computation to run
+ */
+export declare function scheduleComputation(comp: Computation<any>): void;
+/**
+ * Run a computation with tracking
+ */
+export declare function runComputation(comp: Computation<any>): void;
+/**
+ * Clean up a computation's subscriptions (swap-and-pop for O(1))
+ */
+export declare function cleanComputation(comp: Computation<any>): void;
+/**
+ * Execute function without tracking dependencies
+ */
+export declare function untrack<T>(fn: () => T): T;
+/**
+ * Batch multiple updates into one flush
+ *
+ * Uses synchronous batching - all dependent re-renders happen
+ * immediately when the outermost batch completes.
+ */
+export declare function batch<T>(fn: () => T): T;
+/**
+ * Wait for all pending updates to complete
+ */
+export declare function flushSync(): Promise<void>;

package/dist/reactive/tracking.js

@@ -0,0 +1,161 @@
+/**
+ * Global tracking context for reactive system
+ * Inspired by SolidJS signal.ts
+ */
+// Currently executing computation (for dependency tracking)
+export let Listener = null;
+// Queue of computations to run
+const queue = [];
+let pending = false;
+// Batch depth counter for synchronous batching
+let batchDepth = 0;
+/**
+ * Set the current listener (computation being executed)
+ */
+export function setListener(comp) {
+    const prev = Listener;
+    Listener = comp;
+    return prev;
+}
+/**
+ * Get current listener
+ */
+export function getListener() {
+    return Listener;
+}
+/**
+ * Schedule a computation to run
+ */
+export function scheduleComputation(comp) {
+    queue.push(comp);
+    // Only trigger async flush if NOT in a batch
+    // When inside a batch, computations are flushed synchronously at batch end
+    if (batchDepth === 0 && !pending) {
+        pending = true;
+        queueMicrotask(flushQueue);
+    }
+}
+/**
+ * Flush all pending computations
+ */
+function flushQueue() {
+    pending = false;
+    const toRun = [...queue];
+    queue.length = 0;
+    for (const comp of toRun) {
+        if (comp.state === 1) {
+            // Still STALE
+            runComputation(comp);
+        }
+    }
+}
+/**
+ * Run a computation with tracking
+ */
+export function runComputation(comp) {
+    // 1. Clean up old subscriptions
+    cleanComputation(comp);
+    // 2. Set as current listener
+    const prevListener = Listener;
+    Listener = comp;
+    try {
+        // 3. Execute - any signal reads will register
+        comp.fn();
+        comp.state = 0; // CLEAN
+    }
+    finally {
+        Listener = prevListener;
+    }
+}
+/**
+ * Clean up a computation's subscriptions (swap-and-pop for O(1))
+ */
+export function cleanComputation(comp) {
+    // Remove from all sources' observer lists
+    if (comp.sources && comp.sourceSlots) {
+        while (comp.sources.length) {
+            // biome-ignore lint/style/noNonNullAssertion: length check guarantees pop() returns value
+            const source = comp.sources.pop();
+            // biome-ignore lint/style/noNonNullAssertion: length check guarantees pop() returns value
+            const index = comp.sourceSlots.pop();
+            // Swap-and-pop removal from source.observers
+            if (source.observers?.length && source.observerSlots) {
+                // biome-ignore lint/style/noNonNullAssertion: length check guarantees pop() returns value
+                const last = source.observers.pop();
+                // biome-ignore lint/style/noNonNullAssertion: length check guarantees pop() returns value
+                const lastSlot = source.observerSlots.pop();
+                if (index < source.observers.length) {
+                    // Move last item to fill the hole
+                    source.observers[index] = last;
+                    // biome-ignore lint/style/noNonNullAssertion: observerSlots exists when observers exists
+                    source.observerSlots[index] = lastSlot;
+                    // Update the moved item's reference
+                    // biome-ignore lint/style/noNonNullAssertion: sourceSlots exists for active computations
+                    last.sourceSlots[lastSlot] = index;
+                }
+            }
+        }
+    }
+    // Run cleanup functions
+    if (comp.cleanups) {
+        for (const cleanup of comp.cleanups)
+            cleanup();
+        comp.cleanups = null;
+    }
+}
+/**
+ * Execute function without tracking dependencies
+ */
+export function untrack(fn) {
+    const prevListener = Listener;
+    Listener = null;
+    try {
+        return fn();
+    }
+    finally {
+        Listener = prevListener;
+    }
+}
+/**
+ * Batch multiple updates into one flush
+ *
+ * Uses synchronous batching - all dependent re-renders happen
+ * immediately when the outermost batch completes.
+ */
+export function batch(fn) {
+    batchDepth++;
+    try {
+        return fn();
+    }
+    finally {
+        batchDepth--;
+        if (batchDepth === 0) {
+            // Flush synchronously - all updates happen NOW
+            while (queue.length) {
+                // biome-ignore lint/style/noNonNullAssertion: length check guarantees shift() returns value
+                const comp = queue.shift();
+                if (comp.state === 1) {
+                    // Still STALE
+                    runComputation(comp);
+                }
+            }
+            // Clear pending flag since we just flushed
+            pending = false;
+        }
+    }
+}
+/**
+ * Wait for all pending updates to complete
+ */
+export function flushSync() {
+    return new Promise((resolve) => {
+        if (!pending && queue.length === 0) {
+            resolve();
+        }
+        else {
+            queueMicrotask(() => {
+                flushSync().then(resolve);
+            });
+        }
+    });
+}

package/dist/runtime/fiber.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Fiber - intermediate representation of component tree
+ */
+import type { InstanceNode } from '../primitives/instance';
+import type { Computation } from '../reactive/signal';
+export interface Fiber {
+    type: any;
+    props: Record<string, any>;
+    children: Fiber[];
+    path: string[];
+    key?: string | number;
+    instanceNodes: InstanceNode[];
+    store?: any;
+    computation?: Computation<void>;
+    incomingResourcePath?: string[];
+    hasPlaceholderInstance?: boolean;
+}
+/**
+ * Create a new fiber
+ */
+export declare function createFiber(type: any, props: Record<string, any>, path: string[], key?: string | number): Fiber;

package/dist/runtime/fiber.js

@@ -0,0 +1,16 @@
+/**
+ * Fiber - intermediate representation of component tree
+ */
+/**
+ * Create a new fiber
+ */
+export function createFiber(type, props, path, key) {
+    return {
+        type,
+        props,
+        children: [],
+        path,
+        key,
+        instanceNodes: [],
+    };
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,4 @@
+export { createFiber, type Fiber } from './fiber';
+export { type ChangeSet, deepEqual, hasNewNodes, reconcile } from './reconcile';
+export { cleanupFiber, collectInstanceNodes, getCurrentFiber, getCurrentPath, renderFiber, } from './render';
+export { CReact, type CReactOptions, resetRuntime, run } from './run';

package/dist/runtime/index.js

@@ -0,0 +1,4 @@
+export { createFiber } from './fiber';
+export { deepEqual, hasNewNodes, reconcile } from './reconcile';
+export { cleanupFiber, collectInstanceNodes, getCurrentFiber, getCurrentPath, renderFiber, } from './render';
+export { CReact, resetRuntime, run } from './run';

package/dist/runtime/reconcile.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Reconciler - diff two sets of instance nodes with dependency ordering
+ *
+ * Key features:
+ * - Path-based id for matching (unique per position in tree)
+ * - Dependency graph from parent-child relationships
+ * - Topological sort for correct deployment order
+ * - Parallel batches for concurrent deployment
+ */
+import type { InstanceNode } from '../primitives/instance';
+/**
+ * Dependency graph
+ */
+export interface DependencyGraph {
+    /** node → nodes it depends on (must be deployed first) */
+    dependencies: Map<string, string[]>;
+    /** node → nodes that depend on it (must wait for this) */
+    dependents: Map<string, string[]>;
+}
+/**
+ * Change set with deployment ordering
+ */
+export interface ChangeSet {
+    creates: InstanceNode[];
+    updates: InstanceNode[];
+    deletes: InstanceNode[];
+    /** Topologically sorted node IDs for deployment */
+    deploymentOrder: string[];
+    /** Groups of nodes that can be deployed in parallel */
+    parallelBatches: string[][];
+}
+/**
+ * Build dependency graph from nodes
+ *
+ * Dependencies are derived from the path hierarchy:
+ * - Parent must be deployed before children
+ * - Node with path ['App', 'DB', 'Cache'] depends on ['App', 'DB']
+ */
+export declare function buildDependencyGraph(nodes: InstanceNode[]): DependencyGraph;
+/**
+ * Topological sort using Kahn's algorithm
+ *
+ * Returns node IDs in deployment order (dependencies first)
+ */
+export declare function topologicalSort(nodeIds: string[], graph: DependencyGraph): string[];
+/**
+ * Compute parallel batches from deployment order
+ *
+ * Nodes that don't depend on each other can be deployed in parallel.
+ * Each batch contains nodes that can be deployed concurrently.
+ */
+export declare function computeParallelBatches(deploymentOrder: string[], graph: DependencyGraph): string[][];
+/**
+ * Reconcile previous and current instance nodes
+ * Uses path-based id for matching - each node has unique position in tree
+ */
+export declare function reconcile(previous: InstanceNode[], current: InstanceNode[]): ChangeSet;
+/**
+ * Deep equality check
+ */
+export declare function deepEqual(a: unknown, b: unknown): boolean;
+/**
+ * Check if there are new nodes that weren't in previous
+ * Uses id for matching consistency with reconcile()
+ */
+export declare function hasNewNodes(previous: InstanceNode[], current: InstanceNode[]): boolean;

package/dist/runtime/reconcile.js

@@ -0,0 +1,210 @@
+/**
+ * Reconciler - diff two sets of instance nodes with dependency ordering
+ *
+ * Key features:
+ * - Path-based id for matching (unique per position in tree)
+ * - Dependency graph from parent-child relationships
+ * - Topological sort for correct deployment order
+ * - Parallel batches for concurrent deployment
+ */
+/**
+ * Build dependency graph from nodes
+ *
+ * Dependencies are derived from the path hierarchy:
+ * - Parent must be deployed before children
+ * - Node with path ['App', 'DB', 'Cache'] depends on ['App', 'DB']
+ */
+export function buildDependencyGraph(nodes) {
+    const dependencies = new Map();
+    const dependents = new Map();
+    const nodeIds = new Set(nodes.map((n) => n.id));
+    for (const node of nodes) {
+        dependencies.set(node.id, []);
+        dependents.set(node.id, []);
+    }
+    for (const node of nodes) {
+        // Find parent in the path
+        if (node.path.length > 1) {
+            // Try to find a parent node in the graph
+            // Walk up the path to find the nearest ancestor that's a node
+            for (let i = node.path.length - 2; i >= 0; i--) {
+                const parentPath = node.path.slice(0, i + 1);
+                const parentId = parentPath.join('.');
+                if (nodeIds.has(parentId)) {
+                    // Add dependency: node depends on parent
+                    dependencies.get(node.id)?.push(parentId);
+                    // Add dependent: parent has node as dependent
+                    dependents.get(parentId)?.push(node.id);
+                    break; // Only direct parent dependency
+                }
+            }
+        }
+    }
+    return { dependencies, dependents };
+}
+/**
+ * Topological sort using Kahn's algorithm
+ *
+ * Returns node IDs in deployment order (dependencies first)
+ */
+export function topologicalSort(nodeIds, graph) {
+    const result = [];
+    const inDegree = new Map();
+    const queue = [];
+    // Initialize in-degree counts
+    for (const id of nodeIds) {
+        const deps = graph.dependencies.get(id) ?? [];
+        // Only count dependencies that are in our nodeIds set
+        const relevantDeps = deps.filter((d) => nodeIds.includes(d));
+        inDegree.set(id, relevantDeps.length);
+        if (relevantDeps.length === 0) {
+            queue.push(id);
+        }
+    }
+    // Process nodes with no remaining dependencies
+    while (queue.length > 0) {
+        const current = queue.shift();
+        result.push(current);
+        // Reduce in-degree for dependents
+        const deps = graph.dependents.get(current) ?? [];
+        for (const dep of deps) {
+            if (!inDegree.has(dep))
+                continue; // Not in our set
+            const newDegree = inDegree.get(dep) - 1;
+            inDegree.set(dep, newDegree);
+            if (newDegree === 0) {
+                queue.push(dep);
+            }
+        }
+    }
+    // Check for cycles (but not for duplicate IDs, which are handled normally)
+    if (result.length !== nodeIds.length) {
+        const remaining = nodeIds.filter((id) => !result.includes(id));
+        // Only warn if there are actual stuck nodes (not just duplicates)
+        if (remaining.length > 0) {
+            console.warn('Circular dependency detected. Remaining nodes:', remaining);
+            // Still include remaining nodes at the end
+            result.push(...remaining);
+        }
+    }
+    return result;
+}
+/**
+ * Compute parallel batches from deployment order
+ *
+ * Nodes that don't depend on each other can be deployed in parallel.
+ * Each batch contains nodes that can be deployed concurrently.
+ */
+export function computeParallelBatches(deploymentOrder, graph) {
+    const batches = [];
+    const deployed = new Set();
+    for (const nodeId of deploymentOrder) {
+        // Find which batch this node can go in
+        const deps = graph.dependencies.get(nodeId) ?? [];
+        const relevantDeps = deps.filter((d) => deploymentOrder.includes(d));
+        // Find the latest batch that contains a dependency
+        let batchIndex = 0;
+        for (let i = 0; i < batches.length; i++) {
+            const batch = batches[i];
+            if (batch?.some((id) => relevantDeps.includes(id))) {
+                batchIndex = i + 1;
+            }
+        }
+        // Create new batch if needed
+        while (batches.length <= batchIndex) {
+            batches.push([]);
+        }
+        batches[batchIndex]?.push(nodeId);
+        deployed.add(nodeId);
+    }
+    return batches;
+}
+/**
+ * Reconcile previous and current instance nodes
+ * Uses path-based id for matching - each node has unique position in tree
+ */
+export function reconcile(previous, current) {
+    // Use path-based id for matching (unique per position in tree)
+    const prevMap = new Map(previous.map((n) => [n.id, n]));
+    const currMap = new Map(current.map((n) => [n.id, n]));
+    const creates = [];
+    const updates = [];
+    const deletes = [];
+    // Find creates and updates
+    for (const node of current) {
+        const prev = prevMap.get(node.id);
+        if (!prev) {
+            creates.push(node);
+        }
+        else if (!deepEqual(prev.props, node.props)) {
+            updates.push(node);
+        }
+    }
+    // Find deletes
+    for (const node of previous) {
+        if (!currMap.has(node.id)) {
+            deletes.push(node);
+        }
+    }
+    // Build dependency graph for current nodes
+    const graph = buildDependencyGraph(current);
+    // Get IDs of nodes that need deployment (creates + updates)
+    const toDeployIds = [...creates, ...updates].map((n) => n.id);
+    // Compute deployment order and parallel batches
+    const deploymentOrder = topologicalSort(toDeployIds, graph);
+    const parallelBatches = computeParallelBatches(deploymentOrder, graph);
+    return {
+        creates,
+        updates,
+        deletes,
+        deploymentOrder,
+        parallelBatches,
+    };
+}
+/**
+ * Deep equality check
+ */
+export function deepEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (typeof a !== typeof b)
+        return false;
+    if (typeof a === 'object') {
+        // Type guard: both are objects at this point
+        const objA = a;
+        const objB = b;
+        if (Array.isArray(objA) !== Array.isArray(objB))
+            return false;
+        if (Array.isArray(objA) && Array.isArray(objB)) {
+            if (objA.length !== objB.length)
+                return false;
+            for (let i = 0; i < objA.length; i++) {
+                if (!deepEqual(objA[i], objB[i]))
+                    return false;
+            }
+            return true;
+        }
+        const keysA = Object.keys(objA);
+        const keysB = Object.keys(objB);
+        if (keysA.length !== keysB.length)
+            return false;
+        for (const key of keysA) {
+            if (!Object.hasOwn(objB, key))
+                return false;
+            if (!deepEqual(objA[key], objB[key]))
+                return false;
+        }
+        return true;
+    }
+    return false;
+}
+/**
+ * Check if there are new nodes that weren't in previous
+ * Uses id for matching consistency with reconcile()
+ */
+export function hasNewNodes(previous, current) {
+    const prevIds = new Set(previous.map((n) => n.id));
+    return current.some((n) => !prevIds.has(n.id));
+}

package/dist/runtime/render.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Render - transform JSX to Fiber tree
+ */
+import type { Fiber } from './fiber';
+/**
+ * Get current fiber (for hooks)
+ */
+export declare function getCurrentFiber(): Fiber | null;
+/**
+ * Get current path (for hooks)
+ */
+export declare function getCurrentPath(): string[];
+/**
+ * Get current resource path (for useInstance)
+ * Only components with useInstance contribute to this path
+ */
+export declare function getCurrentResourcePath(): string[];
+/**
+ * Push a segment to resource path (called by useInstance)
+ */
+export declare function pushResourcePath(segment: string): void;
+/**
+ * Pop a segment from resource path (called after component with instance renders)
+ */
+export declare function popResourcePath(): void;
+/**
+ * Reset resource path (called at start of render)
+ */
+export declare function resetResourcePath(): void;
+/**
+ * Render a JSX element to a Fiber
+ */
+export declare function renderFiber(element: any, path: string[]): Fiber;
+/**
+ * Collect all instance nodes from fiber tree
+ * Returns cloned nodes to ensure returned arrays are independent snapshots
+ */
+export declare function collectInstanceNodes(fiber: Fiber): any[];
+/**
+ * Clean up a fiber tree
+ */
+export declare function cleanupFiber(fiber: Fiber): void;