Dynamically Manage Reactive Functions

[curran]

It should be possible to dynamically replace the definition of reactive functions.

[caracal7]

it will good not only replace but also delete functions

[curran]

Yes, I agree. Perhaps it can be a single operation, where replacing with null or undefined deletes.

[caracal7]

Topologica is a brilliant idea and I think it is a best of reactive libraries that I've seen.💪😺

I want to rewrite library with using ES6 proxy and function arguments detection. This makes library much bigger but makes it with more sugar syntax.

Sorry for my English 😑

[curran]

Thanks!

I'm totally open to suggestions and new ideas to make the API cleaner. I have created two new issues for these ideas, where we can discuss them further:

• Investigate use of ES6 Proxy #50
• Investigate function arguments detection #51

Let's keep this issue focused on adding, replacing and deleting reactive functions.

Any ideas for what this API might look like?

[caracal7]

I done rewrite https://github.com/caracal7/reactor.js But without deleting parameters

[curran]

@caracal7 Very nice work! Would you be open to making it as a Pull Request against this repo? Thank you.

One thing your implementation restricts is setting values as functions. If you want to set the value of a property to a function, rather than setting the reactive function that sets the value, your setter prevents it.

I like the overall idea!

[caracal7]

I do it for the specific project and I don't need parameters as functions. And in my near plans mix this reactive engine with simple finite state machine. something like this:

engine
.addState('state1')({
    a : a => b + 1,
    b : c => c + a,
    c : 5
}).addState('state2')({
    a : a => b + 3,
    b : c => c * a,
    c : 6
})
/// Change behavior
engine.setState('state1')

I used before my own very similar implementation with DFS but your code is much cleaner and I decide to move to topologica and modify it for my needs.

I'm not very familiar with Git and did't know how properly make Pull request((

P.S. Thanks for great library!

[caracal7]

About setting values as functions... ES6 Proxy can help to perform with objects everything that you want. For example is possible to add syntax like this

// regular reactive function declaration in my implementation
dataflow.b = a => a + 1;
dataflow.c = b => b + 1;
// declaration values as functions...Not reactive
dataflow().d = x => x + 100;

We also has short syntax))

[caracal7]

And if you look at my sources I reserve the place for any additional commands like

dataflow.b = a => a + 1;
dataflow('debug'); // console.log('that you need')
// for example
const a = dataflow('serialize'); 

We can use Proxy inside Proxy

// get processed value
const b = dataflow('getProcessed').a; 

Another syntax

dataflow().debug; 
dataflow().getProcessed.a; 

One more idea

const x = dataflow('a').processed; 

And more...))

// regular reactive function declaration in my implementation
dataflow.b = a => a + 1;

// declaration of "values as functions"...Not reactive
dataflow.d.asValue = x => x + 100;

[caracal7]

I think the best syntax is

// regular declaration
dataflow.b = a => a + 1;

// making something special with property setter
dataflow.d.asValue = x => x + 100;

// making something special with property getter
let x = dataflow.d.strToLower;

// make something with entire graph

// setter
dataflow().log = true;
// action
dataflow().clear();
// getter
let g = dataflow().serialized;

I think I will move this way

[curran]

Great ideas! Thanks for sharing these thoughts.