reactivefy - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

package.json

 {
   "name": "reactivefy",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Small collection of buzzling librsries like events publisher & subscribe pattern, and observable & reactive objects library.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/brugarolas)
 
-[UNDER CONSTRCTION]
-
 # Reactivefy
@@ -47,17 +45,3 @@ Reactivefy is a library for <a href="https://wikipedia.org/wiki/Reactive_programming">reactive programming</a> in JavaScript, inspired by [Hyperactiv](https://github.com/elbywan/hyperactiv) and [Patella](https://github.com/luavixen/Patella).
 
-Finally, we can also import and use our event-emitter:
-```js
-    import Subscription from 'reactivefy/events/subscription.js';
-
-    const singleton = new Subscription();
-
-    const subscriptionId = singleton.on('change', (data) => { console.log('Something changed', data) });
-
-    singleton.emit('change', { a: 1 });
-
-    singleton.off('change', subscriptionId)
-```
-
 ## Some real world examples
-[MODIFY HSFiddle]
 Reactivefy provides functions for observing object mutations and acting on those mutations automatically.
@@ -79,3 +63,3 @@ Possibly the best way to learn is by example, so let's take a page out of [Vue.js's guide](https://vuejs.org/guide/essentials/event-handling.html) and make a button that counts how many times it has been clicked using Reactivefy's `observe(object)` and `computed(func)`:
 ![](./examples/counter-vid.gif)<br>
-View the [full source](./examples/counter.html) or [try it on JSFiddle](https://jsfiddle.net/luawtf/hL6g4emk/latest).
+View the [full source](./examples/counter.html).
 
@@ -139,3 +123,3 @@ Notice how in the above example, the `<button>` doesn't do any extra magic to change its text when clicked; it just increments the model's click counter, which is "connected" to the button's text in the computed function.
 ![](./examples/concatenator-vid.gif)<br>
-View the [full source](./examples/concatenator.html) or [try it on JSFiddle](https://jsfiddle.net/luawtf/zvnm4jp7/latest).
+View the [full source](./examples/concatenator.html).
 
@@ -170,3 +154,3 @@ ### Debounced search
 ![](./examples/debounce-vid.gif)<br>
-View the [full source](./examples/debounce.html) or [try it on JSFiddle](https://jsfiddle.net/luawtf/abd3qxft/latest).
+View the [full source](./examples/debounce.html).
 
@@ -234,3 +218,3 @@ ### Pony browser
 ![](./examples/pony-vid.gif)<br>
-View the [full source](./examples/pony.html) or [try it on JSFiddle](https://jsfiddle.net/luawtf/84wmaz0g/latest).
+View the [full source](./examples/pony.html).
 
@@ -364,4 +348,31 @@ ## Multiple objects snippet
 
-[ADD EXAMPLE SUBSCRIBING TO CHANGES]
+Subscribe & unsubscribe to changes:
 
+```js
+    let sum = 0
+
+    const obj = observe({
+      a: 1,
+      b: 2,
+      c: 3
+    })
+
+    const subscriptionId = obj.subscribeToChanges(() => {
+      sum++;
+    })
+
+    expect(sum).to.equal(0)
+    obj.a = 2
+    obj.b = 3
+    await delay(100) // Subscriber functions are executed in a non-blocking, asynchronous way
+    expect(sum).to.equal(2)
+
+    obj.unsubscribeToChanges(subscriptionId);
+
+    obj.c = 4
+    await delay(100)
+    expect(sum).to.equal(2)
+```
+
+
 With `dispose` you can remove the computed function from the reactive Maps, allowing garbage collection
@@ -517,3 +528,3 @@
 
-Instead of using Global function, you can use Observable class to create a reactive object. It's nearly identical.
+Instead of using Global function, you can use Observable class to create a reactive object. It's nearly identical. t is only supported on `full` version.
 
@@ -627,10 +638,28 @@ ```js
 
+We can also import and use our event-emitter:
 
+```js
+    import Subscription from 'reactivefy/events/subscription.js';
 
+    const singleton = new Subscription();
 
+    const subscriptionId = singleton.on('change', (data) => { console.log('Something changed', data) });
+
+    singleton.emit('change', { a: 1 });
+
+    singleton.off('change', subscriptionId)
+```
+
+
 ## `light` version pitfalls
+
 `light` version uses JavaScript's [getters](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/get) [and](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) [setters](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/set) to make all the reactivity magic possible, which comes with some tradeoffs that the verssion `full` (which uses [Proxy](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)) don't have to deal with.
 This section details some of the stuff to look out for when using `light` version in your applications.
 
+### Subscriptions does not work on `light` mode
+
+That's it. You can not subscribe & unsubscribe to changes in `light` version.
+
 ### Computed functions can cause infinite loops
+
 ```javascript
@@ -663,2 +692,3 @@ const object = Global.observe({ x: 10, y: 20 });
 ### Array mutations do not trigger dependencies
+
 ```javascript
@@ -684,2 +714,3 @@ const object = Global.observe({
 ### Properties added after observation are not reactive
+
 ```javascript
@@ -702,2 +733,3 @@ const object = Global.observe({ x: 10 });
 ### Prototypes will not be made reactive unless explicitly observed
+
 ```javascript
@@ -724,2 +756,3 @@ const object = { a: 20 };
 ### Non-enumerable and non-configurable properties will not be made reactive
+
 ```javascript
@@ -751,2 +784,3 @@ const object = { x: 1 };
 ### Enumerable and configurable but non-writable properties will be made writable
+
 ```javascript
@@ -771,2 +805,3 @@ const object = {};
 ### Getter/setter properties will be accessed then lose their getter/setters
+
 ```javascript
@@ -788,2 +823,3 @@ const object = {
 ### Properties named `__proto__` are ignored
+
 ```javascript
@@ -814,3 +850,3 @@ const object = {};
     Subobjects (but not subfunctions!) will also be observed.
-    Note that <code>observe</code> does not create a new object, it mutates the object passed into it: <code>observe(object) === object</code>.
+    Note that <code>observe</code> in <code>light</code> version does not create a new object, it mutates the object passed into it: <code>observe(object) === object</code>.
   </li>
@@ -825,2 +861,3 @@ </ul>
   <li>Input <code>object</code>, now reactive</li>
+  <li>There are two methods in returned object to subscribe and unsuscribe to changes.: <code>subscribeToChanges(fn)</code> is to subscribe to changes and returns a <code>subscriptionId</code>, which you can use to unsubscribe to changes if necessary: <code>unsubscribeToChanges(subscriptionId)</code>. Functions passed to <code>subscribeToChanges(fn)</code> will be executed in a non-blocking, asynchronous way</li>
 </ul>
@@ -827,0 +864,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73632

increased by1.05%

Number of lines in readme file

913

increased by4.22%

No dependency changes