@flexsurfer/reflex 0.1.9 → 0.1.11

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,12 @@ 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  
 ⚡ **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  

package/dist/index.cjs

@@ -834,7 +834,6 @@ var Reaction = class _Reaction {
   version = 0;
   depsVersions = [];
   subVector;
-  componentName;
   constructor(computeFn, deps) {
     this.computeFn = computeFn;
     this.deps = deps;
@@ -851,10 +850,10 @@ var Reaction = class _Reaction {
     this.recomputeIfNeeded(notifyWatchers);
     return [this.value, this.version];
   }
-  watch(callback) {
-    const idx = this.watchers.indexOf(callback);
+  watch(callback, componentName = "react component") {
+    const idx = this.watchers.findIndex((w) => w.callback === callback);
     if (idx === -1) {
-      this.watchers.push(callback);
+      this.watchers.push({ callback, componentName });
       if (this.deps) {
         for (const d of this.deps)
           d.ensureAliveWith(this);
@@ -862,7 +861,7 @@ var Reaction = class _Reaction {
     }
   }
   unwatch(fn) {
-    const idx = this.watchers.indexOf(fn);
+    const idx = this.watchers.findIndex((w) => w.callback === fn);
     if (idx !== -1) {
       this.watchers.splice(idx, 1);
       if (this.watchers.length === 0) {
@@ -926,11 +925,10 @@ var Reaction = class _Reaction {
             withTrace(
               {
                 opType: "render",
-                operation: this.componentName ?? "component",
-                tags: this.componentName ? { componentName: this.componentName } : {}
+                operation: w.componentName
               },
               () => {
-                w(this.value);
+                w.callback(this.value);
               }
             );
           } catch (error) {
@@ -1014,9 +1012,6 @@ var Reaction = class _Reaction {
   get isRoot() {
     return this.deps === void 0 || this.deps.length === 0;
   }
-  setComponentName(componentName) {
-    this.componentName = componentName;
-  }
 };
 
 // src/subs.ts
@@ -1044,8 +1039,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);
@@ -1053,7 +1046,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);
@@ -1070,7 +1064,6 @@ function getOrCreateReaction(subVector) {
     },
     depsReactions
   );
-  mergeTrace({ reaction: reaction.getId() });
   reaction.setId(subVectorKey);
   reaction.setSubVector(subVector);
   setReaction(subVectorKey, reaction);
@@ -1121,8 +1114,7 @@ function useSubscription(subVector, componentName = "react component") {
     const reaction = getOrCreateReaction(subVector);
     if (!reaction)
       return;
-    reaction.setComponentName(componentName);
-    reaction.watch(setVal);
+    reaction.watch(setVal, componentName);
     return () => {
       reaction.unwatch(setVal);
     };

package/dist/index.mjs

@@ -766,7 +766,6 @@ var Reaction = class _Reaction {
   version = 0;
   depsVersions = [];
   subVector;
-  componentName;
   constructor(computeFn, deps) {
     this.computeFn = computeFn;
     this.deps = deps;
@@ -783,10 +782,10 @@ var Reaction = class _Reaction {
     this.recomputeIfNeeded(notifyWatchers);
     return [this.value, this.version];
   }
-  watch(callback) {
-    const idx = this.watchers.indexOf(callback);
+  watch(callback, componentName = "react component") {
+    const idx = this.watchers.findIndex((w) => w.callback === callback);
     if (idx === -1) {
-      this.watchers.push(callback);
+      this.watchers.push({ callback, componentName });
       if (this.deps) {
         for (const d of this.deps)
           d.ensureAliveWith(this);
@@ -794,7 +793,7 @@ var Reaction = class _Reaction {
     }
   }
   unwatch(fn) {
-    const idx = this.watchers.indexOf(fn);
+    const idx = this.watchers.findIndex((w) => w.callback === fn);
     if (idx !== -1) {
       this.watchers.splice(idx, 1);
       if (this.watchers.length === 0) {
@@ -858,11 +857,10 @@ var Reaction = class _Reaction {
             withTrace(
               {
                 opType: "render",
-                operation: this.componentName ?? "component",
-                tags: this.componentName ? { componentName: this.componentName } : {}
+                operation: w.componentName
               },
               () => {
-                w(this.value);
+                w.callback(this.value);
               }
             );
           } catch (error) {
@@ -946,9 +944,6 @@ var Reaction = class _Reaction {
   get isRoot() {
     return this.deps === void 0 || this.deps.length === 0;
   }
-  setComponentName(componentName) {
-    this.componentName = componentName;
-  }
 };
 
 // src/subs.ts
@@ -976,8 +971,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);
@@ -985,7 +978,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);
@@ -1002,7 +996,6 @@ function getOrCreateReaction(subVector) {
     },
     depsReactions
   );
-  mergeTrace({ reaction: reaction.getId() });
   reaction.setId(subVectorKey);
   reaction.setSubVector(subVector);
   setReaction(subVectorKey, reaction);
@@ -1053,8 +1046,7 @@ function useSubscription(subVector, componentName = "react component") {
     const reaction = getOrCreateReaction(subVector);
     if (!reaction)
       return;
-    reaction.setComponentName(componentName);
-    reaction.watch(setVal);
+    reaction.watch(setVal, componentName);
     return () => {
       reaction.unwatch(setVal);
     };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@flexsurfer/reflex",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/flexsurfer/reflex.git"
+    "url": "git+https://github.com/flexsurfer/reflex.git"
   },
   "type": "module",
   "main": "dist/index.cjs",
@@ -68,4 +68,4 @@
     "pubsub",
     "handler"
   ]
-}
+}