Vue 3 support (prev. 'Error in initialisation with Vue3 createApp')

[jessepcc]

Initialization with instructions of doc from Vue3 as follow

import { createApp } from "vue";
import App from "./App.vue";

import VueSocketIOExt from "vue-socket.io-extended";
import io from "socket.io-client";

const app = createApp(App);

const socket = io("http://socketserver.com:1923");

app.use(VueSocketIOExt, socket);

app.mount("#app");

Getting errors in runtime Uncaught TypeError: e is not a constructor

After some research, seems the problem is from the breaking change from Vue2 to Vue3, with the createApp api

https://nystudio107.com/blog/a-taste-of-vue-js-3-async-components-and-plugins/amp https://alvarosaburido.dev/blog/how-to-migrate-your-library-from-vue2-to-vue3

Is there any timeline to cope with Vue3 updates?

[probil]

Hi @jessepcc and thanks for your issue. I haven't used the library with Vue 3 yet. Neet to take a closer look at new API. Since Vue 3 has been released recently I believe it's time to work on Vue 3 compatible version of the library

[kmalski]

Hi, when can we expect support for Vue 3? I'm starting a new project and wanted to do it with the newest version of vue. Is there any option to release it at least in beta version?

[NoFr1ends]

Is this the issue to track the migration to Vue3?

[matrunchyk]

@probil do you think it's still achievable in 2020? I'm also starting a new project on Vue3 and thinking whether to go with the library or go with pure socket.io...

[probil]

@matrunchyk The migration is not hard, I'm just struggle to find enough time to deal with it. BTW in 2020 you don't have to use socket.io anymore since plain websockets are well supported in browsers. https://caniuse.com/websockets The only reasons to use it are convenient API and support for super old browser.

I'll try to migrate it to Vue 3 later this year but can't guarantee you anything.

[matrunchyk]

@probil I know about native websockets, but socket.io is still preferable for me as it has a good abstraction layer and fallback support of long polling.

Thanks for the answer anyways!

[ReazerDev]

I've made a pull request containing a (definitely not production ready) migration to vue 3. https://github.com/probil/vue-socket.io-extended/pull/499

[jnt0r]

I gave this a try too. #507 My version maybe still need some work but it's working for me at the moment.

[probil]

Thanks guys will try to tackle this during the holiday

[jnt0r]

I created a PR #507 for the migration to Vue 3 but am stuck at changing the documentation for usage with Nuxt.js and Quasar Framework. If anybody knows what needs to be changed there, please provide me the changes so we all can get vue3 support :)

[probil]

I've just published alpha version of the library with Vue 3 support in alpha channel.

@jnt0r could you check how it work for you? Unfortunately my project at work doesn't use socket.io at all

For some reason library has grown considerably after migration:

Now: 12kb
Before: 7kb

In original MR it was even larger, 25kb due to part of the vue compiled into the library. So I made it external but there is something more. I suspect vue-class-component 🤔

BTW Nuxt.js and Quasar are not supporting vue 3 just yet so we shouldn't worry about them

[jnt0r]

@probil Nice 👍🏽 I just tested it with my curreent project and it works for me. Did not test all features but basic features work.

I don't know why it's getting that big ... I haven't read into how you build the plugin. Maybe I catch something up than I will let you know.

[jnt0r]

@probil A quick investigation into rollup.build.sh showed smaller plugin size when adding vue-class-component to external and also to globals. Got size back down to 7 KB. Also tested it with my current project and got no errors so should basically work.

[probil]

Thanks for investigation @jnt0r Since vue-class-component is supposed to be used with some sort of transpiler I don't think it worth adding to globals. Will update alpha with vue-class-component excluded soon. I even thought about making it a separate thing. Something like vue-socket.io-extended/decorators, e.g.:

<!-- App.vue -->
<script>
import { Options, Vue } from 'vue-class-component';
import Socket from 'vue-socket.io-extended/decorator'

@Options({})
export default class App extends Vue {
  @Socket() // --> listens to the event by method name, e.g. `connect`
  connect () {
    console.log('connection established');
  }

  @Socket('tweet')  // --> listens to the event with given name, e.g. `tweet`
  onTweet (tweetInfo) {
    // do something with `tweetInfo`
  }
}
</script>

But it would require to change the build process a bit 🤔

[probil]

It turned out the build process doesn't have to.be changed that much.

Using of exports key in package.json can do the trick https://webpack.js.org/guides/package-exports/ https://github.com/jkrems/proposal-pkg-exports/

It would also allow to remove an indecent solution (with 2 entrypoints) introduced in the v4.

[probil]

Just published a new version with the decorator exported in a separate entry point. Library size went back to 6k (minified)

Installation is still with npm i vue-socket.io-extended@alpha

Need to hear some feedback to make sure it works for both common usage and decorator usage. Some set of tests would probably be better but it would take more time.

[Nitwel]

Just tried this using Vue3 + Ts + CompositionApi and everything seems to be working! ❤️ Thank you very much!

[ReazerDev]

I'll update my project either later today or this week aswell to test this👍

[DblK]

I do not have the Uncaught TypeError: e is not a constructor error with the alpha version of the package but can not make it work. @Nitwel any full example to share?

The issue I have now is Uncaught TypeError: Object(...) is not a function and it point out to connect() in this part of code:

@Socket() // --> listens to the event by method name, e.g. `connect`
connect(): void {
  console.log('connection established', this);
}

In the terminal I have the following error too export 'Socket' was not found in 'vue-socket.io-extended'.

[probil]

@DblK There are some breaking changes in alpha.

Try to import decorator from a different path please:

- import { Socket } from 'vue-socket.io-extended'
+ import Socket from 'vue-socket.io-extended/decorator'

Also, make sure you are using socket.io-client and socket.io v2 as v3 is not yet supported

[DblK]

With this import I have got the following error: Cannot find module 'vue-socket.io-extended/decorator' or its corresponding type declarations. Did I mess up somewhere ?

[probil]

@DblK No. I haven't tested importing this new path in TS. Will take a look. Thanks for reporting

[MrBrax]

Just started using this. Typescript seems to think that the sockets property in components exists on the root, so when you access this in a socket method/callback, it type hints to this: App<any> instead of the CreateComponentPublicInstance, making the entire project fail on compile.

[probil]

@MrBrax I'm not really good at TS so if you could provide the MR (to alpha branch) fixing the issue it would be really nice of you :)

[MrBrax]

MR? I actually don't know how to fix it myself, I've never written type/definition files :(

[probil]

Ah, ok. Maybe someone else can help here.

[MrBrax]

It probably stems from this: https://github.com/probil/vue-socket.io-extended/blob/alpha/types/vue.d.ts#L9

Seems to be changed from the stable version.

[MrBrax]

type DefaultSocketHandlers = {
  [key: string]: (...args: any[]) => any
};

This seems to have fixed it on the editor side, but i can't really test it out in my docker container. No idea if it breaks anything either.

edit:

yep that fixed it

[jnt0r]

@probil I just investigated #528 and came to this issue where you stated the breaking change for the import of the Socket Decorator. I tried it out and it didn't work as it said TS2307: Cannot find module 'vue-socket.io-extended/decorator' or its corresponding type declarations. I found that the typescript definition exports the Socket still in the index.d.ts. But the decorator is not exported in the index file. So there is a mismatch. I will fix this in a PR

[jnt0r]

@probil can you explain why the project is built into several files with .esm, .min and not into a single index.js file. And also why you extracted the decorator into a separate file. I try to figure out how to fix the typescript definitions for the decorator. Struggling a bit, that's why I ask these questions :)