DEV Community

Cover image for Update of Vue Rx to Vue Next Rx
NOPR9D ☄️
NOPR9D ☄️

Posted on

Update of Vue Rx to Vue Next Rx

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.

Nice !

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 };
  },
});
Enter fullscreen mode Exit fullscreen mode
<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>
Enter fullscreen mode Exit fullscreen mode

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 };
  },
});
Enter fullscreen mode Exit fullscreen mode
<!-- bind to it normally in templates -->
<!-- on change DOM is update too -->
<div>{{ msg }}</div>
Enter fullscreen mode Exit fullscreen mode

Of course updated the test on vue next (it wasn't easy haha)

Tests


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)

Collapse
 
noprod profile image
NOPR9D ☄️ • Edited

Thanks ! If i change for "last update" it's better? ^^