@semantic-ui/reactivity - npm Package Compare versions

Comparing version 0.2.1 to 0.4.0

package.json

@@ -9,3 +9,3 @@ {
   "dependencies": {
-    "@semantic-ui/utils": "^0.2.1"
+    "@semantic-ui/utils": "^0.4.0"
   },
@@ -15,3 +15,3 @@ "devDependencies": {
   },
-  "version": "0.2.1"
+  "version": "0.4.0"
 }

src/reaction.js

@@ -1,2 +0,2 @@
-import { isEqual } from '@semantic-ui/utils';
+import { isEqual, clone } from '@semantic-ui/utils';
 import { Dependency } from './dependency.js';
@@ -93,5 +93,7 @@
   /*
-    Makes sure function doesnt rerun when values dont change
+    Guard prevents a value from triggering reactions if the value is identical
   */
-  static guard(f) {
+  static guard(f, equalCheck = isEqual) {
+
+    // guard is not necessary if this is not a reactive context
     if (!Reaction.current) {
@@ -102,12 +104,12 @@ return f();
     let value, newValue;
+    dep.depend(); // Create dependency on guard function
     const comp = new Reaction(() => {
       newValue = f();
-      if (!comp.firstRun && !isEqual(newValue, value)) {
+      if (!comp.firstRun && !equalCheck(newValue, value)) {
         dep.changed();
       }
-      value = newValue;
+      value = clone(newValue);
     });
     comp.run(); // Initial run to capture dependencies
-    dep.depend(); // Create dependency on guard function
-    return value;
+    return newValue;
   }
@@ -114,0 +116,0 @@

test/unit/reaction.test.js

@@ -104,7 +104,7 @@ import { beforeEach, describe, it, expect, vi } from 'vitest';
       Reaction.create(() => {
-        Reaction.guard(() => {
-          let user = { name: userName.get(), age: userAge.get() };
-          callback(`User Info: ${user.name}, ${user.age}`);
-          return user;
-        });
+        const user = Reaction.guard(() => ({
+          name: userName.get(),
+          age: userAge.get()
+        }));
+        callback(`User Info: ${user.name}, ${user.age}`);
       });
@@ -128,2 +128,27 @@
 
+    it('guard should control reactivity - example 2', () => {
+
+      const counter = new ReactiveVar(0);
+      const callback = vi.fn();
+
+      const isEven = () => Reaction.guard(() => {
+        return (counter.get() % 2 === 0);
+      });
+
+      Reaction.create((comp) => {
+        if(isEven()) {
+          callback(`${counter.peek()} is even`);
+        }
+      });
+
+      counter.set(1); // No output guard is same
+      Reaction.flush();
+      counter.set(2); // Output
+      Reaction.flush();
+      counter.set(3); // No output guard is same
+
+      // only odd numbers should trigger
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
     it('guard should not re-run for identical objects', () => {
@@ -130,0 +155,0 @@ const user = { name: 'John Doe', age: 30 };

No alert changes

Improved metrics

Total package byte prevSize

43666

increased by1.76%

Lines of code

924

increased by2.21%

Dependency changes

• + Added@semantic-ui/utils@0.4.0(transitive)

• - Removed@semantic-ui/utils@0.2.1(transitive)

• Updated@semantic-ui/utils@^0.4.0