@esportsplus/reactivity 0.22.1 → 0.23.0

package/test/arrays.ts

@@ -0,0 +1,146 @@
+// Test: Reactive Arrays
+import { effect, reactive } from '@esportsplus/reactivity';
+
+
+// =============================================================================
+// Basic Array Operations
+// =============================================================================
+
+console.log('=== Basic Array Operations ===');
+
+let numbers = reactive([1, 2, 3]);
+
+console.log('Initial:', [...numbers]);
+console.log('Length:', numbers.length);
+
+// Push
+numbers.push(4, 5);
+console.log('After push(4, 5):', [...numbers]);
+
+// Pop
+let popped = numbers.pop();
+console.log('Popped:', popped);
+console.log('After pop:', [...numbers]);
+
+// Shift
+let shifted = numbers.shift();
+console.log('Shifted:', shifted);
+console.log('After shift:', [...numbers]);
+
+// Unshift
+numbers.unshift(0);
+console.log('After unshift(0):', [...numbers]);
+
+// Index assignment
+numbers[0] = 100;
+console.log('After [0] = 100:', [...numbers]);
+
+
+// =============================================================================
+// Splice
+// =============================================================================
+
+console.log('\n=== Splice ===');
+
+let items = reactive(['a', 'b', 'c', 'd', 'e']);
+console.log('Initial:', [...items]);
+
+// Remove 2 items starting at index 1
+let removed = items.splice(1, 2);
+console.log('Removed:', removed);
+console.log('After splice(1, 2):', [...items]);
+
+// Insert items
+items.splice(1, 0, 'x', 'y');
+console.log('After splice(1, 0, x, y):', [...items]);
+
+
+// =============================================================================
+// Sort and Reverse
+// =============================================================================
+
+console.log('\n=== Sort and Reverse ===');
+
+let sortable = reactive([3, 1, 4, 1, 5, 9, 2, 6]);
+console.log('Initial:', [...sortable]);
+
+sortable.sort((a, b) => a - b);
+console.log('After sort (asc):', [...sortable]);
+
+sortable.reverse();
+console.log('After reverse:', [...sortable]);
+
+
+// =============================================================================
+// Concat
+// =============================================================================
+
+console.log('\n=== Concat ===');
+
+let base = reactive([1, 2]);
+console.log('Initial:', [...base]);
+
+base.concat([3, 4]);
+console.log('After concat([3, 4]):', [...base]);
+
+base.concat(5, [6, 7]);
+console.log('After concat(5, [6, 7]):', [...base]);
+
+
+// =============================================================================
+// Reactive Length in Effects
+// =============================================================================
+
+console.log('\n=== Reactive Length in Effects ===');
+
+let tracked = reactive([1, 2, 3]);
+let lengthReads = 0;
+
+effect(() => {
+    lengthReads++;
+    console.log(`Effect #${lengthReads}: length = ${tracked.length}`);
+});
+
+tracked.push(4);
+tracked.pop();
+tracked.splice(0, 1);
+
+console.log('Total length reads:', lengthReads);
+
+
+// =============================================================================
+// Array Events
+// =============================================================================
+
+console.log('\n=== Array Events ===');
+
+let observed = reactive([1, 2, 3]);
+
+observed.on('push', (data) => {
+    console.log('Push event:', data);
+});
+
+observed.on('pop', (data) => {
+    console.log('Pop event:', data);
+});
+
+observed.on('set', (data) => {
+    console.log('Set event:', data);
+});
+
+observed.push(4, 5);
+observed.pop();
+observed[0] = 100;
+
+
+// =============================================================================
+// Clear and Dispose
+// =============================================================================
+
+console.log('\n=== Clear and Dispose ===');
+
+let clearable = reactive([1, 2, 3, 4, 5]);
+console.log('Before clear:', [...clearable], 'length:', clearable.length);
+
+clearable.clear();
+console.log('After clear:', [...clearable], 'length:', clearable.length);

package/test/effects.ts

@@ -0,0 +1,168 @@
+// Test: Effects and Cleanup
+import { effect, onCleanup, reactive, root } from '@esportsplus/reactivity';
+
+
+// =============================================================================
+// Basic Effect with Object
+// =============================================================================
+
+console.log('=== Basic Effect ===');
+
+let state = reactive({
+    count: 0
+});
+let effectRuns = 0;
+
+let dispose = effect(() => {
+    effectRuns++;
+    console.log(`Effect run #${effectRuns}: count = ${state.count}`);
+});
+
+state.count = 1;
+state.count = 2;
+state.count = 3;
+
+console.log('Total runs before dispose:', effectRuns);
+
+dispose();
+
+state.count = 4;
+state.count = 5;
+
+console.log('Total runs after dispose:', effectRuns);
+
+
+// =============================================================================
+// Effect with Cleanup
+// =============================================================================
+
+console.log('\n=== Effect with Cleanup ===');
+
+let data = reactive({
+    value: 0
+});
+let cleanupCalls = 0;
+
+let cleanup = effect((onCleanup) => {
+    let current = data.value;
+    console.log('Effect running with value:', current);
+
+    onCleanup(() => {
+        cleanupCalls++;
+        console.log(`Cleanup called (${cleanupCalls}x) for value:`, current);
+    });
+});
+
+data.value = 1;
+data.value = 2;
+
+cleanup();
+
+console.log('Total cleanup calls:', cleanupCalls);
+
+
+// =============================================================================
+// Effect with Computed
+// =============================================================================
+
+console.log('\n=== Effect with Computed ===');
+
+let counter = reactive({
+    count: 10,
+    doubled: () => counter.count * 2
+});
+
+let computedReads = 0;
+
+effect(() => {
+    computedReads++;
+    console.log(`Effect #${computedReads}: doubled = ${counter.doubled}`);
+});
+
+counter.count = 20;
+counter.count = 30;
+
+console.log('Total computed reads:', computedReads);
+
+
+// =============================================================================
+// Root Scope
+// =============================================================================
+
+console.log('\n=== Root Scope ===');
+
+let rootDisposed = false;
+
+let result = root((dispose) => {
+    let obj = reactive({
+        a: 1,
+        b: () => obj.a * 2
+    });
+
+    effect(() => {
+        console.log('Root effect: a =', obj.a, 'b =', obj.b);
+    });
+
+    obj.a = 5;
+
+    onCleanup(() => {
+        rootDisposed = true;
+        console.log('Root cleanup called');
+    });
+
+    dispose();
+
+    return 'root result';
+});
+
+console.log('Root returned:', result);
+console.log('Root disposed:', rootDisposed);
+
+
+// =============================================================================
+// Multiple Object Dependencies
+// =============================================================================
+
+console.log('\n=== Multiple Dependencies ===');
+
+let obj1 = reactive({ x: 1 });
+let obj2 = reactive({ y: 2 });
+let obj3 = reactive({ z: 3 });
+let multiRuns = 0;
+
+effect(() => {
+    multiRuns++;
+    let sum = obj1.x + obj2.y + obj3.z;
+    console.log(`Multi-dep effect #${multiRuns}: x=${obj1.x}, y=${obj2.y}, z=${obj3.z}, sum=${sum}`);
+});
+
+obj1.x = 10;
+obj2.y = 20;
+obj3.z = 30;
+
+console.log('Total multi-dep runs:', multiRuns);
+
+
+// =============================================================================
+// Effect with Array
+// =============================================================================
+
+console.log('\n=== Effect with Array ===');
+
+let list = reactive({
+    items: [1, 2, 3],
+    total: () => list.items.reduce((a, b) => a + b, 0)
+});
+
+let arrayRuns = 0;
+
+effect(() => {
+    arrayRuns++;
+    console.log(`Array effect #${arrayRuns}: length=${list.items.length}, total=${list.total}`);
+});
+
+list.items.push(4);
+list.items.pop();
+list.items[0] = 10;
+
+console.log('Total array runs:', arrayRuns);

package/test/index.ts

@@ -0,0 +1,8 @@
+// Test Index - Import all test modules
+// Run individual files for isolated testing
+
+export * from './primitives';
+export * from './objects';
+export * from './arrays';
+export * from './effects';
+export * from './nested';

package/test/nested.ts

@@ -0,0 +1,201 @@
+// Test: Nested Reactive Structures
+import { effect, reactive } from '@esportsplus/reactivity';
+
+
+// =============================================================================
+// Object with Computed accessing other objects
+// =============================================================================
+
+console.log('=== Nested Object Access ===');
+
+let config = reactive({
+    debug: true,
+    theme: 'dark'
+});
+
+let settings = reactive({
+    notifications: true,
+    volume: 80
+});
+
+let user = reactive({
+    name: 'Alice',
+    getTheme: () => config.theme,
+    getVolume: () => settings.volume
+});
+
+console.log('Initial config:', { debug: config.debug, theme: config.theme });
+console.log('Initial user:', user.name, 'theme:', user.getTheme, 'volume:', user.getVolume);
+
+config.theme = 'light';
+settings.volume = 50;
+
+console.log('After updates:');
+console.log('  user theme:', user.getTheme);
+console.log('  user volume:', user.getVolume);
+
+
+// =============================================================================
+// Object with Array of Objects
+// =============================================================================
+
+console.log('\n=== Object with Array of Reactive Objects ===');
+
+let todo1 = reactive({ done: false, text: 'Learn reactivity' });
+let todo2 = reactive({ done: true, text: 'Build app' });
+let todo3 = reactive({ done: false, text: 'Test everything' });
+
+let store = reactive({
+    todos: [todo1, todo2, todo3],
+    completedCount: () => store.todos.filter(t => t.done).length
+});
+
+console.log('Initial todos:');
+for (let i = 0; i < store.todos.length; i++) {
+    let todo = store.todos[i];
+    console.log(`  [${todo.done ? 'x' : ' '}] ${todo.text}`);
+}
+console.log('Completed:', store.completedCount);
+
+todo1.done = true;
+console.log('After marking todo1 done:');
+console.log('Completed:', store.completedCount);
+
+let todo4 = reactive({ done: false, text: 'Deploy' });
+store.todos.push(todo4);
+
+console.log('After adding todo4:');
+for (let i = 0; i < store.todos.length; i++) {
+    let todo = store.todos[i];
+    console.log(`  [${todo.done ? 'x' : ' '}] ${todo.text}`);
+}
+
+
+// =============================================================================
+// Array of Arrays (using reactive arrays)
+// =============================================================================
+
+console.log('\n=== Array of Arrays ===');
+
+let row1 = reactive([1, 2, 3]);
+let row2 = reactive([4, 5, 6]);
+let row3 = reactive([7, 8, 9]);
+
+let matrix = reactive([row1, row2, row3]);
+
+console.log('Initial matrix:');
+for (let row of matrix) {
+    console.log(' ', [...row]);
+}
+
+row1[0] = 100;
+row2.push(60);
+
+let row4 = reactive([10, 11, 12]);
+matrix.push(row4);
+
+console.log('After updates:');
+for (let row of matrix) {
+    console.log(' ', [...row]);
+}
+
+
+// =============================================================================
+// Cross-Object Computed Dependencies
+// =============================================================================
+
+console.log('\n=== Cross-Object Computed Dependencies ===');
+
+let data = reactive({
+    items: [10, 20, 30],
+    multiplier: 2
+});
+
+let calcObj = reactive({
+    sum: () => data.items.reduce((a: number, b: number) => a + b, 0),
+    total: () => calcObj.sum * data.multiplier
+});
+
+console.log('Initial sum:', calcObj.sum);
+console.log('Initial total:', calcObj.total);
+
+data.items.push(40);
+console.log('After push(40) - sum:', calcObj.sum, 'total:', calcObj.total);
+
+data.multiplier = 3;
+console.log('After multiplier = 3 - sum:', calcObj.sum, 'total:', calcObj.total);
+
+
+// =============================================================================
+// Effects Tracking Multiple Objects
+// =============================================================================
+
+console.log('\n=== Effects Tracking Multiple Objects ===');
+
+let effectRuns = 0;
+
+let obj1 = reactive({ value: 1 });
+let obj2 = reactive({ value: 2 });
+let obj3 = reactive({ combined: () => obj1.value + obj2.value });
+
+effect(() => {
+    effectRuns++;
+    console.log(`Effect #${effectRuns}: obj1=${obj1.value}, obj2=${obj2.value}, combined=${obj3.combined}`);
+});
+
+obj1.value = 10;
+obj2.value = 20;
+
+console.log('Total effect runs:', effectRuns);
+
+
+// =============================================================================
+// Primitives Referencing Objects
+// =============================================================================
+
+console.log('\n=== Primitives Referencing Objects ===');
+
+let source = reactive({
+    base: 10,
+    items: [1, 2, 3]
+});
+
+let derived = reactive(() => source.base * 2);
+let itemSum = reactive(() => source.items.reduce((a: number, b: number) => a + b, 0));
+
+console.log('Initial derived:', derived);
+console.log('Initial itemSum:', itemSum);
+
+source.base = 20;
+source.items.push(4);
+
+console.log('After updates:');
+console.log('  derived:', derived);
+console.log('  itemSum:', itemSum);
+
+
+// =============================================================================
+// Dispose Individual Objects
+// =============================================================================
+
+console.log('\n=== Dispose Individual Objects ===');
+
+let parent = reactive({
+    value: 42,
+    doubled: () => parent.value * 2
+});
+
+let child = reactive({
+    parentValue: () => parent.value,
+    ownValue: 10
+});
+
+console.log('Before dispose - parent.value:', parent.value, 'child.parentValue:', child.parentValue);
+
+parent.dispose();
+console.log('Parent disposed');
+
+// Child still works with its own value
+console.log('Child ownValue:', child.ownValue);
+child.dispose();
+console.log('Child disposed');

package/test/objects.ts

@@ -0,0 +1,106 @@
+// Test: Reactive Objects
+import { effect, reactive } from '@esportsplus/reactivity';
+
+
+// =============================================================================
+// Basic Object
+// =============================================================================
+
+console.log('=== Basic Reactive Object ===');
+
+let user = reactive({
+    age: 25,
+    email: 'test@example.com',
+    name: 'John'
+});
+
+console.log('Initial user:', { age: user.age, email: user.email, name: user.name });
+
+user.age = 26;
+user.name = 'Jane';
+
+console.log('After updates:', { age: user.age, email: user.email, name: user.name });
+
+
+// =============================================================================
+// Object with Computed Properties
+// =============================================================================
+
+console.log('\n=== Object with Computed Properties ===');
+
+let counter = reactive({
+    count: 0,
+    doubled: () => counter.count * 2,
+    message: () => `Count is ${counter.count}`
+});
+
+console.log('Initial:', { count: counter.count, doubled: counter.doubled, message: counter.message });
+
+counter.count = 5;
+console.log('After count = 5:', { count: counter.count, doubled: counter.doubled, message: counter.message });
+
+counter.count = 10;
+console.log('After count = 10:', { count: counter.count, doubled: counter.doubled, message: counter.message });
+
+
+// =============================================================================
+// Object with Arrays
+// =============================================================================
+
+console.log('\n=== Object with Arrays ===');
+
+let state = reactive({
+    items: [1, 2, 3],
+    total: () => state.items.reduce((a, b) => a + b, 0)
+});
+
+console.log('Initial items:', [...state.items]);
+console.log('Initial total:', state.total);
+
+state.items.push(4, 5);
+console.log('After push(4, 5):', [...state.items]);
+console.log('Updated total:', state.total);
+
+state.items[0] = 10;
+console.log('After items[0] = 10:', [...state.items]);
+
+
+// =============================================================================
+// Effects with Objects
+// =============================================================================
+
+console.log('\n=== Effects with Objects ===');
+
+let effectRuns = 0;
+let data = reactive({
+    a: 1,
+    b: 2,
+    sum: () => data.a + data.b
+});
+
+effect(() => {
+    effectRuns++;
+    console.log(`Effect #${effectRuns}: a=${data.a}, b=${data.b}, sum=${data.sum}`);
+});
+
+data.a = 10;
+data.b = 20;
+
+console.log('Total effect runs:', effectRuns);
+
+
+// =============================================================================
+// Dispose
+// =============================================================================
+
+console.log('\n=== Dispose ===');
+
+let disposable = reactive({
+    value: 42,
+    computed: () => disposable.value * 2
+});
+
+console.log('Before dispose:', disposable.value, disposable.computed);
+
+disposable.dispose();
+console.log('Disposed successfully');