New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

off

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

off - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

2

package.json
{
"name": "off",
"version": "0.0.2",
"version": "0.0.3",
"description": "",

@@ -5,0 +5,0 @@ "main": "off.js",

@@ -13,19 +13,21 @@ off.js

Usage
About
-----
You can wrap any function to make it observable.
off.js creates observable functions by wrapping exsiting functions. An observable function can have handlers attached before or after invocation. You can use it to do AOP, create event/signals based data-flow, observe changes in your objects, etc.
Simple usage
------------
To create you first observable function, run the code below:
```js
var observable = off(function(){
console.log('observable called');
console.log('observable called');
});
```
To observe a function, use add:
```js
var handler = function(){
console.log('handler called');
console.log('handler called');
}
observable.add(handler);

@@ -51,5 +53,3 @@ ```

});
```
```
> observable(1,2);

@@ -62,26 +62,24 @@ > sum: 3

Signals are just simple observable functions that pass call argument to handlers. You can use them to control your data-flow.
Signals are simple observable functions that pass call argument to handlers. You can use them to control your data-flow.
```js
function Component() {
this.changed = off.signal();
this.changed = off.signal();
}
Component.prototype.setLabel = function(value) {
this.label = value;
this.changed();
this.label = value;
this.changed();
}
Component.prototype.setSize = function(width, height) {
this.width = width;
this.height = height;
this.changed();
this.width = width;
this.height = height;
this.changed();
}
```
```
> var component = new Component();
> component.changed.add(function(){console.log('component changed')});
> component.changed.add(function(){console.log('LOG: component changed')});
> component.setLabel("text");
> component changed
> LOG: component changed
> component.setSize(10,10);
> component changed
> LOG: component changed
```

@@ -92,5 +90,5 @@

A property is an observable function that saves the passed value. To set the value pass it as an argument. To get the value run the property without any arguments.
A property is an observable function that works as a getter/setter. It saves the value passed to the function or returns the last value if no arguments are passed.
A property handler is called only if value of the property changes.
A property handler is called only if the value of the property changes. (If you need to re-invoke all the handlers with the same value you can run property.reset());

@@ -109,5 +107,5 @@ ```

Handlers added by .add are run after the observable functions. It's also possible to run a handler before the main body of the observable function is executed. If any of before-handlers returns "true", the observable function is blocked.
Handlers added by .add() are run after observable functions. It's also possible to run a handler before the main body of the observable function is executed. Additionally, if any of before-handlers returns true, the observable function is blocked and not invoked.
```
```js
var moreThan10 = off(function(value) {

@@ -120,5 +118,3 @@ console.log(value);

})
```
```
> moreThan10(1);

@@ -129,7 +125,30 @@ > moreThan10(9);

> 11
```
Locking
-------
Another way of interrupting the flow is locking handlers, e.g.:
```js
var foo = off(function(value){
if (value <= 10) {
foo.lock = true;
}
else {
return value;
}
});
foo.add(function(value){console.log("Value =",value)});
> foo(1);
> foo(11);
> Value = 11
```
Async
-----
Observable function may be asynchronous:
Observable function may be asynchronous. The last param passed to the observable function is done callback. Running this callback finished async call and run all assigned handlers. Value passed to the done() callback is the result of async call and it's passed to all handlers;

@@ -139,30 +158,60 @@ ```js

setTimeout(function(){
done(text+"!");
}, 1000)
done("Text =", text);
}, 1000);
})
```
```
> async.add(function(text){console.log(text)});
> async("test");
> console.log("invoked before async is finishes")
> invoked before async is finishes
> test!
> console.log("LOG: invoked before async is finishes")
> LOG: invoked before async is finishes
> Text = test
```
Cancelling
----------
Deferred
--------
off provides a simple helper for running deferred functions. If a function is ivoked multiple times, handlers will be run only once per each deferred cycle.
```js
var property = off.property();
var render = off.deferred(function(value){console.log("rendering",value)}, window.requestAnimationFrame);
property.add(render);
> property(1); property(2); property(3);
> rendering 3
```
Force-add
---------
By default all you can't add the same handler twice. To enforce adding the same handles multiple times pass options object to the add handler function:
```js
observable.add(handler, {force_add: true});
```
Custom setters
--------------
Default property behaviour is to update the value and run handlers only if the value changes. Even so, you can override the setter:
```js
/**
* The guard object behaves as a property but doesn't run automatically any handlers when invoked
*/
var custom_setter = function (value, guard) {
guard(guard() + value);
}
var increment = off.property(0, custom_setter);
> increment(2);
> expect(increment()).toEqual(2);
> increment(3);
> expect(increment()).toEqual(5);
```
Removing handlers
-----------------
A handler can be removed using .remove
A handler can be removed using .remove()
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc