feat: Vue 3 support #272

zernonia · 2023-09-08T04:36:51Z

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 · 2023-09-08T05:21:49Z

@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 · 2023-09-08T20:50:43Z

@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:

I was not able to build the library. Getting the following error:
Do you have any ideas?
Let's make the vue package a part of the NPM workspace in the top-level package.json:

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).
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 · 2023-09-11T23:18:16Z

@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 · 2023-09-13T01:50:42Z

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

productdevbook · 2023-09-13T15:09:03Z

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

rokotyan · 2023-09-13T21:41:11Z

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 · 2023-09-13T21:54:20Z

@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 · 2023-09-14T03:55:28Z

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 · 2023-09-14T17:47:29Z

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 · 2023-09-14T18:17:59Z

@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 · 2023-09-14T18:53:54Z

@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 · 2023-09-15T00:52:53Z

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

Hebilicious · 2023-09-15T09:19:13Z

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 · 2023-09-15T09:54:50Z

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 · 2023-09-15T11:39:23Z

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

rokotyan · 2023-09-15T17:14:56Z

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

Hebilicious · 2023-09-15T17:41:45Z

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

zernonia · 2023-09-16T02:27:05Z

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

Thanks for making the Nuxt example!! 😁

zernonia · 2023-09-16T15:14:26Z

@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 · 2023-09-18T19:20:49Z

@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 · 2023-09-19T11:51:09Z

@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 · 2023-09-19T15:55:32Z

@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 · 2023-09-20T04:45:11Z

@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 · 2023-09-20T22:08:09Z

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

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

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 · 2023-09-21T15:15:32Z

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 · 2023-09-21T21:15:47Z

@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 · 2023-09-22T14:59:20Z

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 · 2023-09-25T12:36:09Z

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 · 2023-09-29T22:10:44Z

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 · 2023-09-30T06:18:55Z

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 · 2023-09-30T06:37:22Z

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 · 2023-10-02T17:32:59Z

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

rokotyan · 2023-10-02T21:59:14Z

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

rokotyan · 2023-10-03T22:21:05Z

@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 · 2023-10-04T17:20:08Z

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

rokotyan · 2023-10-04T23:08:10Z

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 · 2023-10-05T02:34:10Z

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 · 2023-10-10T23:58:14Z

@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 · 2023-10-11T02:19:00Z

@rokotyan I'm taking a look!

zernonia · 2023-10-11T04:25:07Z

@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 · 2023-10-11T16:56:54Z

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

rokotyan · 2023-10-11T21:11:06Z

@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 · 2023-10-16T01:51:53Z

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

Co-Authored-By: zernonia <59365435+zernonia@users.noreply.github.com>

zernonia marked this pull request as draft September 8, 2023 04:39

zernonia marked this pull request as ready for review September 8, 2023 05:18

zernonia mentioned this pull request Sep 8, 2023

[Chore]: Update charts using @unovis/vue radix-vue/shadcn-vue#33

Closed

2 tasks

TasoOneAsia added the cla-signed Authors have signed the F5 contributor license agreement label Sep 20, 2023

reb-dev previously approved these changes Sep 29, 2023

View reviewed changes

rokotyan dismissed reb-dev’s stale review via f5d901f October 2, 2023 21:40

rokotyan force-pushed the main branch from f5d901f to ddbf596 Compare October 2, 2023 21:58

rokotyan force-pushed the main branch from ddbf596 to dc83f76 Compare October 4, 2023 16:49

rokotyan force-pushed the main branch from 40f0430 to e29be42 Compare October 5, 2023 16:46

rokotyan previously approved these changes Oct 5, 2023

View reviewed changes

rokotyan dismissed their stale review via fa6118a October 10, 2023 23:23

rokotyan force-pushed the main branch from e29be42 to fa6118a Compare October 10, 2023 23:23

rokotyan force-pushed the main branch from 4f5761b to 94513fb Compare October 16, 2023 22:01

Vue: Introducing Vue 3 integration 🎉

839e328

Co-Authored-By: zernonia <59365435+zernonia@users.noreply.github.com>

rokotyan force-pushed the main branch from 94513fb to 839e328 Compare October 16, 2023 23:23

reb-dev approved these changes Oct 16, 2023

View reviewed changes

reb-dev merged commit eb52eba into f5:main Oct 16, 2023
3 checks passed

feat: Vue 3 support #272

feat: Vue 3 support #272

Conversation

zernonia commented Sep 8, 2023 • edited by rokotyan

Update (Sept 22, 2023):

zernonia commented Sep 8, 2023

rokotyan commented Sep 8, 2023

rokotyan commented Sep 11, 2023

zernonia commented Sep 13, 2023

productdevbook commented Sep 13, 2023

rokotyan commented Sep 13, 2023 • edited

rokotyan commented Sep 13, 2023 • edited

Hebilicious commented Sep 14, 2023

zernonia commented Sep 14, 2023

zernonia commented Sep 14, 2023

rokotyan commented Sep 14, 2023

zernonia commented Sep 15, 2023

Hebilicious commented Sep 15, 2023 • edited

zernonia commented Sep 15, 2023 • edited

zernonia commented Sep 15, 2023

rokotyan commented Sep 15, 2023

Hebilicious commented Sep 15, 2023

zernonia commented Sep 16, 2023

zernonia commented Sep 16, 2023

rokotyan commented Sep 18, 2023

zernonia commented Sep 19, 2023

rokotyan commented Sep 19, 2023

zernonia commented Sep 20, 2023

rokotyan commented Sep 20, 2023

zernonia commented Sep 21, 2023 via email

rokotyan commented Sep 21, 2023

rokotyan commented Sep 22, 2023 • edited

zernonia commented Sep 25, 2023

reb-dev left a comment

Choose a reason for hiding this comment

rokotyan commented Sep 29, 2023

messenjer commented Sep 30, 2023

productdevbook commented Sep 30, 2023

rokotyan commented Oct 2, 2023

rokotyan commented Oct 2, 2023

rokotyan commented Oct 3, 2023

zernonia commented Oct 4, 2023

rokotyan commented Oct 4, 2023

zernonia commented Oct 5, 2023

rokotyan commented Oct 10, 2023

zernonia commented Oct 11, 2023

zernonia commented Oct 11, 2023

rokotyan commented Oct 11, 2023

rokotyan commented Oct 11, 2023

zernonia commented Oct 16, 2023

zernonia commented Sep 8, 2023 •

edited by rokotyan

rokotyan commented Sep 13, 2023 •

edited

rokotyan commented Sep 13, 2023 •

edited

Hebilicious commented Sep 15, 2023 •

edited

zernonia commented Sep 15, 2023 •

edited

rokotyan commented Sep 22, 2023 •

edited