link on npm: @nopr3d/vue-next-rx
Hello there !
The latest update of Vue is here, we are several to test it but we are still waiting for the update of certain dependencies.
So, instead of waiting I said to myself : "why don't you do it yourself?"
I chose the dependency with which I had the most affinity (vue-rx) and after a few days (and a lot of coffee) the dependency was up to date with Vue Next and its unit tests too.
Now let's talk about this dependency, Vue Next offers a lot of changes (new lifecycle hooks, composition API, performance improvements, multiple root node, ...)
So I took all the existing functionality of vue-rx and I took the opportunity to also extend new features (Ref and Watch)
For example is how you can use Ref and Watch with the reactive way :
Ref
import { ref } from "@nopr3d/rx-vue-next";
// use ref like an Rx Subject
export default defineComponent({
name: "Home",
components: {},
setup() {
const msg = ref("Message exemple");
setTimeout(() => {
msg.value = "New message !";
}, 2000);
msg.subscribe((value) => {
console.log(value); // After 2s will print : New message !
});
return { msg };
},
});
<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>
Watch
import { ref, watch } from "@nopr3d/rx-vue-next";
export default defineComponent({
name: "Home",
components: {},
setup() {
const msg = ref("Message exemple");
watch(msg).subscribe((val) => {
console.log(val); // After 2s will print : New message !
});
setTimeout(() => {
msg.value = "New message !";
}, 2000);
return { msg };
},
});
<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>
Of course updated the test on vue next (it wasn't easy haha)
The example folder is also updated
If you wanna test it you can install it with :
npm install vue @nopr3d/vue-next-rx rxjs --save
This is my first publish on npm, feel free to open an issue !
Thanks and have a good day !
link on npm: @nopr3d/vue-next-rx
repo: vue-next-rx
Top comments (1)
Thanks ! If i change for "last update" it's better? ^^