@flexsurfer/reflex 0.1.10 → 0.1.12

package/README.md

@@ -4,9 +4,7 @@
 
 **re-frame for the JavaScript world**
 
-A reactive, functional state management library that brings the elegance and power of ClojureScript's re-frame to JavaScript and React/RN applications.
-
-> ⚠️ **Development Status**: This library is in active development and not yet ready for production use. Perfect for pet projects, experiments, and learning! The community is warmly invited to contribute to the development and improvement of the library, including optimizations for data comparison at different lifecycle stages.
+A reactive, functional state management library that brings the elegance and power of ClojureScript's re-frame to JavaScript and React/ReactNative applications.
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![NPM Version](https://img.shields.io/npm/v/%40flexsurfer%2Freflex)](https://www.npmjs.com/package/@flexsurfer/reflex)
@@ -16,11 +14,14 @@ A reactive, functional state management library that brings the elegance and pow
 
 ## ✨ Why Reflex?
 
-After many years of building applications with re-frame in the ClojureScript world, I wanted to bring the same architectural elegance to the JavaScript/TypeScript ecosystem. Reflex is not just another state management library—it's a battle-tested pattern that promotes:
+After many years of building applications with re-frame in the ClojureScript world, I wanted to bring the same architectural elegance to the JavaScript/TypeScript ecosystem. Reflex is not just another state management library—it's a **battle-tested** pattern that promotes:
 
 🎯 **Predictable State Management** - Unidirectional data flow with pure functions  
 🧩 **Composable Architecture** - Build complex apps from simple, reusable pieces  
 🔄 **Reactive Subscriptions** - UI automatically updates when state changes  
+🌐 **Multi-Platform Support** - With effects separation, it's super easy to support multiple platforms with the same codebase, including web, mobile, and desktop  
+🤖 **AI Friendly** - Reviewing AI-generated changes is easier because all logic is expressed through pure, isolated functions, making each change understandable, verifiable, and deterministic.
+🛠️ **Integrated DevTools** - Reflex-devtools provides deep visibility into your app’s state, events, and subscriptions in real time, forming a powerful combo with Reflex for effective development and debugging.
 ⚡ **Interceptor Pattern** - Powerful middleware system for cross-cutting concerns  
 🛡️ **Type Safety** - Full TypeScript support with excellent IDE experience  
 🧪 **Testability** - Pure functions make testing straightforward and reliable  
@@ -29,6 +30,9 @@ After many years of building applications with re-frame in the ClojureScript wor
 
 ```bash
 npm install @flexsurfer/reflex
+npm install --save-dev @flexsurfer/reflex-devtools
+
+npx reflex-devtools
 ```
 
 ### Basic Example
@@ -39,8 +43,13 @@ import {
   regEvent, 
   regSub, 
   dispatch, 
-  useSubscription 
+  useSubscription,
+  enableTracing
 } from '@flexsurfer/reflex';
+import { enableDevtools } from '@flexsurfer/reflex-devtools'
+
+enableTracing()
+enableDevtools();
 
 // Initialize your app database
 initAppDb({ counter: 0 });

package/dist/index.cjs

@@ -627,9 +627,7 @@ function resetTracing() {
 }
 function registerTraceCb(key, cb) {
   if (!traceEnabled) {
-    console.warn(
-      "Tracing is not enabled; call enableTracing() before registering callbacks"
-    );
+    consoleLog("warn", "[reflex] [trace] Tracing is not enabled; call enableTracing() before registering callbacks");
     return;
   }
   traceCbs.set(key, cb);
@@ -645,7 +643,7 @@ function scheduleFlush() {
       try {
         cb(batch);
       } catch (e) {
-        console.error("Error in trace callback", e);
+        consoleLog("warn", "Error in trace callback", e);
       }
     }
   }, DEBOUNCE_TIME);
@@ -971,7 +969,7 @@ var Reaction = class _Reaction {
         operation: this.subVector?.[0] ?? "",
         opType: "sub/dispose",
         tags: {
-          subVector: this.subVector,
+          queryV: this.subVector,
           reaction: this.id
         }
       },
@@ -1039,8 +1037,6 @@ function getOrCreateReaction(subVector) {
     consoleLog("error", `[reflex] no sub handler registered for: ${subId}`);
     return null;
   }
-  withTrace({ operation: subVector[0], opType: KIND4, tags: { queryV: subVector } }, () => {
-  });
   const computeFn = getHandler(KIND4, subId);
   const subVectorKey = JSON.stringify(subVector);
   const existingReaction = getReaction(subVectorKey);
@@ -1048,7 +1044,8 @@ function getOrCreateReaction(subVector) {
     mergeTrace({ tags: { "cached?": true, reaction: existingReaction.getId() } });
     return existingReaction;
   }
-  mergeTrace({ tags: { "cached?": false } });
+  withTrace({ operation: subVector[0], opType: "sub/create", tags: { queryV: subVector } }, () => {
+  });
   const params = subVector.length > 1 ? subVector.slice(1) : [];
   const depsFn = getHandler(KIND_DEPS, subId);
   const depsVectors = depsFn(...params);
@@ -1065,7 +1062,6 @@ function getOrCreateReaction(subVector) {
     },
     depsReactions
   );
-  mergeTrace({ reaction: reaction.getId() });
   reaction.setId(subVectorKey);
   reaction.setSubVector(subVector);
   setReaction(subVectorKey, reaction);

package/dist/index.mjs

@@ -559,9 +559,7 @@ function resetTracing() {
 }
 function registerTraceCb(key, cb) {
   if (!traceEnabled) {
-    console.warn(
-      "Tracing is not enabled; call enableTracing() before registering callbacks"
-    );
+    consoleLog("warn", "[reflex] [trace] Tracing is not enabled; call enableTracing() before registering callbacks");
     return;
   }
   traceCbs.set(key, cb);
@@ -577,7 +575,7 @@ function scheduleFlush() {
       try {
         cb(batch);
       } catch (e) {
-        console.error("Error in trace callback", e);
+        consoleLog("warn", "Error in trace callback", e);
       }
     }
   }, DEBOUNCE_TIME);
@@ -903,7 +901,7 @@ var Reaction = class _Reaction {
         operation: this.subVector?.[0] ?? "",
         opType: "sub/dispose",
         tags: {
-          subVector: this.subVector,
+          queryV: this.subVector,
           reaction: this.id
         }
       },
@@ -971,8 +969,6 @@ function getOrCreateReaction(subVector) {
     consoleLog("error", `[reflex] no sub handler registered for: ${subId}`);
     return null;
   }
-  withTrace({ operation: subVector[0], opType: KIND4, tags: { queryV: subVector } }, () => {
-  });
   const computeFn = getHandler(KIND4, subId);
   const subVectorKey = JSON.stringify(subVector);
   const existingReaction = getReaction(subVectorKey);
@@ -980,7 +976,8 @@ function getOrCreateReaction(subVector) {
     mergeTrace({ tags: { "cached?": true, reaction: existingReaction.getId() } });
     return existingReaction;
   }
-  mergeTrace({ tags: { "cached?": false } });
+  withTrace({ operation: subVector[0], opType: "sub/create", tags: { queryV: subVector } }, () => {
+  });
   const params = subVector.length > 1 ? subVector.slice(1) : [];
   const depsFn = getHandler(KIND_DEPS, subId);
   const depsVectors = depsFn(...params);
@@ -997,7 +994,6 @@ function getOrCreateReaction(subVector) {
     },
     depsReactions
   );
-  mergeTrace({ reaction: reaction.getId() });
   reaction.setId(subVectorKey);
   reaction.setSubVector(subVector);
   setReaction(subVectorKey, reaction);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexsurfer/reflex",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "license": "MIT",
   "repository": {
     "type": "git",