Comments (12)
you can
from observer-util.
Source:
const { observable, observe } = require("@nx-js/observer-util")
const o = observable({
foo: {
bar: {
baz: 1
}
}
})
const ob = observe(() => {
console.log(o)
})
o.foo.bar.baz = 2
o.foo.bar.baz = 3
Complete output:
{ foo: { bar: { baz: 1 } } }
from observer-util.
Proxies are created on demand, so the above code would never work, since no proxies are created for foo, bar and baz. To do so, the library should have to walk the entirely tree and create a proxy for every object on it on registering the observable.
If you need that functionality, you can implement that yourself by doing exactly that: recursively walk the tree and observing every property.
from observer-util.
Ok, just for background this was in the context of react-easy-state, using a third party widget that takes a tree of data, i needed the widget to update whenever any element of the tree updates. I ended up using a different means for this case. It does seem like observing an entire tree is out of scope for react-easy-state.
Thanks.
from observer-util.
Hey, this should work, I will check it in a sec.
from observer-util.
Sooo, this lib (and easy state) intercepts everything that 'can be intercepted'. Built-in functions in JS are sometimes implemented in none JS code (C++ for example). The above console.log
statement is one of these cases, it recursively fetches the object keys in none JS code, which Proxies can not intercept. Consequently, the lib does not register the set of observable keys.
You can try this code for example and it will work.
const { observable, observe } = require("@nx-js/observer-util")
const o = observable({
foo: {
bar: {
baz: 1
}
}
})
const ob = observe(() => {
console.log(JSON.stringify(o))
})
o.foo.bar.baz = 2
o.foo.bar.baz = 3
JSON.stringify
is accessing the keys in JS, so the lib can intercept the observable get operations. Sadly I can not give any guarantees about the behavior of built-in functions, their behavior with Proxies is not yet specified by the spec. Last time I checked observe(console.log)
was working in Node.
Anyway, people rarely want to observe built-in functions, they usually observe 'normal JS code', which works all the time.
I hope this helps. (Could you include a small repro of your easy-state issue?)
from observer-util.
Your problem with easy-state was probably something very different.
I see you were passing a tree of data to a third party component and expected it to re-render when the data tree was mutated. In this case the issue was that the third part component was not a view
(observer
). It did not know that it should re-render when the data changes.
Your component was not using the data (it was not accessing parts of it), it just passed it on to the third party component. That component used the data, but it was not a view
.
This seems the be a pretty common use case, I will try to think about a good alternative for it by tomorrow.
from observer-util.
Wait, nested objects aren't made observable? Why not?
from observer-util.
From react-easy-state docs: Use nested properties, computed properties with getters/setters, dynamic properties, arrays, ES6 collections and prototypal inheritance
from observer-util.
Wait, nested objects aren't made observable? Why not?
How did you come to this conclusion? Nested objects are made observable on demand.
from observer-util.
Is there an example how to observe every property in nested object?
It seems that you have to explicitly use proxy observable inside observe function (value cannot be passed to it).
from observer-util.
BTW, some examples in this repo's README is wrong.
observe(() => console.log(person), { scheduler: ... });
That log only observes person
itself, not nested properties. Should be:
observe(() => console.log(JSON.stringify(person)), { scheduler: ... });
Or some kind of explicit access of person.name
and person.age
.
from observer-util.
Related Issues (20)
- Mutating observables in reactions is forbidden HOT 2
- 4.2.0 broke something HOT 3
- Trap "toJSON" to allow serialization of proxies HOT 2
- Documentation suggestion HOT 2
- Is it possible to receive the type of change when observing a value? HOT 9
- Observables arrays don't appear to observe correctly HOT 3
- Question about scheduler batching and observe optimizations. HOT 2
- Problem when changing whole objects HOT 1
- Understanding reactions HOT 1
- Angular 7 Integration HOT 1
- Not sure I'm understanding this at all HOT 4
- Object.defineProperty should trigger reactions HOT 3
- computed properties no cache? HOT 3
- Observing through a Proxy HOT 2
- `construct` trap fails for observed constructors HOT 1
- Bug or user error? Copying observable to other position in array converts it to the raw item
- should observe explicit array length changes
- Shallow observing HOT 1
- rawToProxy WeakMap.set is never called
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from observer-util.