feat: Vue 3 support

[zernonia]

Update (Sept 22, 2023):

📢 Looks like there's a lot of interest in the Vue integration within the community, so we've released an alpha version 1.3.0-alpha.3 for everyone to test . Any feedback would be greatly appreciated!

https://www.npmjs.com/package/@unovis/vue

[zernonia]

@rokotyan here's the PR for #152 ! Let me know anything I should update ya!

Note:

• Essentially I've updated the autogen/component.ts to fit Vue, and containers component manually.
• running npm run build will compile using Vite. (reason: rollup-plugin-vue wasn't maintained, and using vite-plugin-vue works perfectly).
• running npm run check would run vue-tsc to check for ts error.

[rokotyan]

@zernonia Thanks for your contribution of the Vue support, that's a major milestone for Unovis!

We'll review the PR in detail next week. In the meantime, here's a few comments:

1. I was not able to build the library. Getting the following error:
   Do you have any ideas?

2. Let's make the vue package a part of the NPM workspace in the top-level package.json:

3. We need to update the README.md file of the package. We also need to update the documentation with Vue snippets and the website examples (I'm currently thinking what would be the easiest way to do this).

4. We're moving shared code to a separate package: Refactoring: New package for shared code #271. Once we merge it, will you be able to update the Vue package accordingly?

Thanks again for the great work!

[rokotyan]

@zernonia
The #271 pull request has been merged.

In the meantime, can you please submit the CLA. We won't be able to merge the PR without it https://github.com/f5/unovis/blob/main/CONTRIBUTING.md#contributor-license-agreement-cla

[zernonia]

@rokotyan do have a look ya! Updated with using the shared package.
I afraid I missed out something important

[productdevbook]

Nice work @zernonia, have you tested Nuxt 3 ? Let's even add the Nuxt 3 module to it after the pr merger.

[rokotyan]

Thanks for the update @zernonia

📢 Looks like there's a lot of interest in the Vue integration within the community, so I've released an alpha version 1.3.0-alpha.0 for everyone to test . Any feedback would be greatly appreciated!

UPDATE: use 1.3.0-alpha.2

@zernonia Can you please create a simple example on StackBlitz for @unovis/vue? I'm sure that will help others to get started.

cc @atinux @messenjer @Hebilicious @mkarras @sadeghbarati @nirgn975 @DamianGlowala @claytonfaria @anegelya @KABBOUCHI

[rokotyan]

@zernonia I've noticed one little but important detail in the Vue package build.

All of our packages are built in a way to allow individual component import (e.g. import { Area } from '@unovis/ts/components/area'). We achieve that with the help of the preserveModules configuration option of Rollup.

Unfortunately, the Vue build doesn't seem to have these individual module builds. When I tried to adopt Vite for Unovis about a year ago, that option was not supported there, so we kept using Rollup. But maybe things have changed since then.

Vue:

Other packages:

[Hebilicious]

Thanks for the update @zernonia

📢 Looks like there's a lot of interest in the Vue integration within the community, so I've released an alpha version 1.3.0-alpha.0 for everyone to test . Any feedback would be greatly appreciated!

@zernonia Can you please create a simple example on StackBlitz for @unovis/vue? I'm sure that will help others to get started.

cc @atinux @messenjer @Hebilicious @mkarras @sadeghbarati @nirgn975 @DamianGlowala @claytonfaria @anegelya @KABBOUCHI

I think a Vue and a Nuxt one would be a good idea 👍

[zernonia]

Hey @rokotyan ! I've updated to enabled preservedModules ya.. It's not as straightforward as using rollup 😅.

Below demonstrates the component directly imported from @unovis/vue, and @unovis/vue/dist/components/area.

[zernonia]

@rokotyan I cant run the package 1.3.0-alpha0 because the package.json for @unovis/vue was wrong. I've push a fix here too. 😁

[rokotyan]

@rokotyan I cant run the package 1.3.0-alpha0 because the package.json for @unovis/vue was wrong. I've push a fix here too. 😁

Thanks! Just published 1.3.0-alpha.1 with those changes

[zernonia]

Awesome @rokotyan !!! Here's the Stackblitz demo! 🚀
https://stackblitz.com/edit/vitejs-vite-zb3f5o?file=src%2FApp.vue

[Hebilicious]

Awesome @rokotyan !!! Here's the Stackblitz demo! 🚀 stackblitz.com/edit/vitejs-vite-zb3f5o?file=src%2FApp.vue

Just porting the example to Nuxt, I'm running into a few commonJS/ESM related errors : https://stackblitz.com/edit/github-spptxs?file=app.vue

require() of ES Module /home/projects/github-spptxs/node_modules/@unovis/ts/index.js 
from /home/projects/github-spptxs/node_modules/@unovis/vue/containers/xy-container/xy-container.cjs not supported. 

Instead change the require of index.js in /home/projects/github-spptxs/node_modules/@unovis/vue/containers/xy-container/xy-container.cjs 
to a dynamic import() which is available in all CommonJS modules.

While we could do some stuff on the Nuxt side to workaround these, is there any chance we could do something in unovis directly ?

[zernonia]

Awesome @rokotyan !!! Here's the Stackblitz demo! 🚀 stackblitz.com/edit/vitejs-vite-zb3f5o?file=src%2FApp.vue

Just porting the example to Nuxt, I'm running into a few commonJS/ESM related errors : https://stackblitz.com/edit/github-spptxs?file=app.vue

require() of ES Module /home/projects/github-spptxs/node_modules/@unovis/ts/index.js 
from /home/projects/github-spptxs/node_modules/@unovis/vue/containers/xy-container/xy-container.cjs not supported. 

Instead change the require of index.js in /home/projects/github-spptxs/node_modules/@unovis/vue/containers/xy-container/xy-container.cjs 
to a dynamic import() which is available in all CommonJS modules.

While we could do some stuff on the Nuxt side to workaround these, is there any chance we could do something in unovis directly ?

Ahh you are right. This is a problem with packages/vue's package.json. Pushing a fix!

[zernonia]

Pushed a fix to that esm import issue. Sorry for the trouble @rokotyan 🙈

[rokotyan]

@zernonia @Hebilicious
No problem, just published 1.3.0-alpha.2

[Hebilicious]

@zernonia great, I updated the Nuxt example : https://stackblitz.com/edit/github-spptxs?file=app.vue

[zernonia]

@zernonia great, I updated the Nuxt example : https://stackblitz.com/edit/github-spptxs?file=app.vue

Thanks for making the Nuxt example!! 😁

[zernonia]

@rokotyan Upon checking creating gallery example, I've found some minor issue. Pushed the fix as well as those gallery example.

I'll update those path (move to shared) again once you have merge the related PR ya 😁

[rokotyan]

@zernonia This is awesome, thanks for the phenomenal work you do!

We've just merged the shared examples PR, feel free to go ahead and update the paths. Can you please also add a simple demo app to packages/vue so we can test those examples?

[zernonia]

@rokotyan I've moved the examples into shared folder, and added a gallery to demo the app locally as well!!.

npm run dev // run gallery demo locally
npm run gallery // build gallery into `dist-demo`

[rokotyan]

@rokotyan I've moved the examples into shared folder, and added a gallery to demo the app locally as well!!.

npm run dev // run gallery demo locally
npm run gallery // build gallery into `dist-demo`

Thanks @zernonia, this is amazing!

When I'm trying to run the app, I get the following error. Should we add de-indent as a dependency?

[zernonia]

@rokotyan . It's weird that the deps is missing. How yeah adding de-indent and jju as devDep solve the build issue above. 😁 Pushed a fix

[rokotyan]

Thanks @zernonia, I think we're getting close to the release! There are two main things left:

1. I noticed that some of the examples don't work. Can you please check what's wrong?

2. We need to update the docs, especially the code snippets. If you feel adventurous, you can give it a try. Or we'll do it ourselves within 1-2 weeks.

[zernonia]

Hi Nikita, That's weird, did you run `npm run build` before building the gallery? I've updated most of the docs already. Could you help me check? [image: image.png] Regards, Zernonia

…

On Thu, Sep 21, 2023 at 6:08 AM Nikita Rokotyan ***@***.***> wrote: Thanks @zernonia <https://github.com/zernonia>, I think we're getting close to the release! There are two main things left: 1. I noticed that some of the examples don't work. Can you please check what's wrong? [image: image] <https://user-images.githubusercontent.com/755708/269430810-acebb628-3741-4720-bb09-e66fb5e5b458.png> [image: image] <https://user-images.githubusercontent.com/755708/269430904-881efe6d-cf3c-4049-b5b6-d711b454c502.png> [image: image] <https://user-images.githubusercontent.com/755708/269431053-57105185-0f2e-4d20-bd7f-43ce51d4e83a.png> [image: image] <https://user-images.githubusercontent.com/755708/269431098-a56b0d9e-150a-417a-8e08-c97012fd3be1.png> 1. We need to update the docs, especially the code snippets. If you feel adventurous, you can give it a try. Or we'll do it ourselves within 1-2 weeks. [image: image] <https://user-images.githubusercontent.com/755708/269431257-e196571d-904c-4db1-a53f-6991b7bde7ed.png> — Reply to this email directly, view it on GitHub <#272 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOE5QOZMXAKWN5GE4HFXLCLX3NSNNANCNFSM6AAAAAA4PZ66YM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[rokotyan]

@zernonia Thanks, I've realized that our postinstall script doesn't build the Vue package. And after manually building it, everything started to work!

That's awesome that you've updated the docs too. One little thing, can you please increase the indentation inside the script tag:

@reb-dev Can you please also take a look at the PR and share your feedback. I'll be out the first half of the next week, so we can aim for a release it in the first week of October. I think we might want to update the website with some new blocks related to this, since it's a major milestone. I can take care of that once I'm back.

[rokotyan]

Could you publish the latest build for @unovis/vue please? It fixes some major bugs in alpha-2.

@zernonia Sure, just published 1.3.0-alpha.3

[zernonia]

Tested on https://www.shadcn-vue.com/themes.html, and it works pretty well! Although it's currently missing the props/emits auto-inferred in IDE, but I believe Volar will soon support Generic-typed components 😁

[reb-dev]

Thanks for your incredible work on this @zernonia!

Code looks good and everything works well. @rokotyan Shall we merge it and include it in next week's release?

[rokotyan]

Thanks @reb-dev, I would like to solve the indentation problem before we merge the PR.

Also we need to add npm run build:vue to postinstall.sh. Everything else looks good to me too.

[messenjer]

Hi, just for information, in vue component the indentation is 0 in the script part, it's the default rules of eslint and prettier vue, there's just the identation missing in the template part.

[productdevbook]

Hi, just for information, in vue component the indentation is 0 in the script part, it's the default rules of eslint and prettier vue, there's just the identation missing in the template part.

I agree with that, it's more convenient for us at the vue. 💯

[rokotyan]

@messenjer @productdevbook Thanks for the feedback! I didn't realize that Vue has 0 indentation in the script part.

[rokotyan]

Applied the final fixes and rebased from main. Planning to take another look tomorrow and then merge.

[rokotyan]

@zernonia I was doing the final review today and found that data updates are kind of broken — they only happen once. Here's a few examples from the gallery, there're no errors in the console:

Screen.Recording.2023-10-03.at.3.14.14.PM.web.mp4

Screen.Recording.2023-10-03.at.3.15.06.PM.web.mp4

Screen.Recording.2023-10-03.at.3.13.51.PM.web.mp4

Can you please take a look what's going on?

[zernonia]

@rokotyan I've push a fix for the issue above yaa.. It should be all good now 😁

[rokotyan]

Thanks @zernonia , impressed with your work as usual!

Just found another little things: when data is provided to an individual component and it updates, the component doesn't react to that. So the following configuration doesn't seem to be working properly:

  <VisXYContainer ... >
    <VisLine :data="data" ... />
    ...

At the same time when data is provided to the container, it works:

  <VisXYContainer :data="data" ... >
    <VisLine ... />
    ...

Just pushed a test commit demonstrating the problem: 4f9111e

[zernonia]

Ahh yes @rokotyan .. my bad for that.. I've added a watcher (missed that out previously) and it fixed it 😁
Also, I've pushed some performance optimization 😁

[rokotyan]

@zernonia I was finally going to merge the PR but after the latest rebase getting this error:

Do you maybe have a clue of what might be wrong?

[zernonia]

@rokotyan I'm taking a look!

[zernonia]

@rokotyan the issue was related to newly changes Crosshair having WithOptional types, which is causing Vue to not resolve the runtime props correctly.

If the error happens again, you can add the relevant component into the array below until we resolves this issue from Vue.

unovis/packages/vue/autogen/component.ts

Lines 20 to 22 in c17e6ba

	// Vue 3.3.4 has issue resolving complex Typescript, in this case when the type has `WithOptional`.
	// If the build is failing, add the respective component here.
	const complexPropComponent = ['Timeline', 'Crosshair']

[rokotyan]

@zernonia I see, good to know. Thanks for the fix!

[rokotyan]

@zernonia I think I've just found another issue (hopefully final). This Sankey example responds only to the first click:

Screen.Recording.2023-10-11.at.2.07.27.PM.web.mp4

I remember you've fixed a similar issue before, maybe they're related?

[zernonia]

Hey @rokotyan ! Pushed a simple fix to the example. Not a component issue ya 😁