Vue.js 3.0 and further plans

[kilobyte2007]

Hey contributors and maintainers,
Now that Vue.js 3 is released and stable, are there plans to upgrade Keen UI to support Vue.js 3?
I know that the plan was initially to move the documentation to Storybook but I see that stalled, what about the other plans for Keen 2.0, is there any development going on?

I think I would be open to contributing to help migrate to Vue.js 3 and to fixing bugs/improving things. I am not sure about the storybook migration as I didn't fully understand the benefit of migrating the docs there, could you please give some insight into how you see this?

I really love the library and would really love to see it grow and develop further. Please share your thoughts on this. Thanks!

[JosephusPaye]

Hello,

Thanks for your interest in Keen UI 2.0. I'd very much like to get the project going again, after the interruption this year.

Why Storybook

I've found Storybook to be a good way to develop and debug the components in isolation. It will not be replacing the docs, where the primary goal is to document the API and describe how to use the components. Though there's overlap, I think separating the two will be better for development in the long run. I will also also make it easier to use something like VuePress to write the documentation in Markdown. With Storybook we can also embed some of the stories in the documentation, to avoid duplicate work.

Upgrading to Vue 3

For the Vue 3 upgrade, I think the first place to start for the Vue 3 upgrade is choosing the overall strategy:

• Develop a backward-incompatible version for Vue 3 only: this could provide the opportunity to redesign the API of some of the components based on what we've learned using it for the past few years, and fix some of the long standing issues.
• Upgrade the current library to support Vue 3, keeping Vue 2 support: how feasible is this if we want to use some of the new features (like teleport and the composition API)? Will it require consumers of the library using Vue 2 to install additional compatibility libraries?

Doing some research to answer these questions and see what Vue recommends officially, and what other libraries are doing would be a good first step.

[kilobyte2007]

Hey, has any work started on this? I would really want to upgrade our products to Vue 3 and Keen-UI is the latest library that keeps us from that. I would be ready to start migrating a few Keen-UI components but I would need to understand the direction and your vision on this.

[JosephusPaye]

I think the quickest approach at this point to add Vue 3 support would be to port the current library to Vue 3 with the same API where possible (if a Vue 3 change forces an API change, then we change), and release that as v2.

So those upgrading to Vue 3 can focus on Vue's breaking changes without further breaking changes from Keen UI.

After this, any fixes and improvements to the API that require breaking changes can come as part of another major version of Keen UI, perhaps v3.

---

As for how to help with this effort, I'd recommend starting with the Storybook branch (https://github.com/JosephusPaye/Keen-UI/tree/storybook/stories). Any of the following contributions would be a big help:

• Create a PR targeting that branch that upgrades Storybook to latest and Vue to v3
• Go though each component (perhaps one PR per component) and port its current examples in the docs-src/ folder to Storybook stories, fixing any Vue 3 incompatibilities, and update the docs

At the end of that process we'd be in a position to update the docs site and release a Keen UI v2 with support for Vue 3.

[xon52]

@kilobyte2007 did you go anywhere with this?

[kilobyte2007]

@xon52 @JosephusPaye I have submitted a PR with a vue 3 migration which works quite well and has almost no breaking changes.

[JosephusPaye]

@kilobyte2007 Thanks a lot for the PR! I've left a review.

[aqib-git]

@JosephusPaye @kilobyte2007

Any update on this PR?

[kilobyte2007]

Waiting for @JosephusPaye to review the last bits and release the new version.

[kilobyte2007]

Most of the bits were merged to the next branch, I suppose @JosephusPaye still has some things he has to prepare before releasing.

Do you need help with anything else, @JosephusPaye?

Meanwhile maybe we can release the next branch as a beta version so it is available in npm?

[JosephusPaye]

Thanks to a lot of work by @kilobyte2007, the next branch now has a working Vue 3 version of the library.

What we need now for publishing:

• Updating the CHANGELOG.md, README.md and perhaps CUSTOMIZATION.md with changes and updated usage information
• Testing usage of the built library code in an application. See this draft PR: Add usage example, fix build for use with bundlers and browser #552.

Once #552 is done and merged we can publish a beta to npm for external testing, and then complete the documentation updates to publish a stable v2!

---

I've also added formatting and linting with prettier and eslint, as well as GitHub Actions CI.

[kilobyte2007]

I have made a PR into #552 which solves the issues and provides working examples. Hopefully we can move on now.

[JosephusPaye]

Thanks for #552 @kilobyte2007.

I've been doing some work on the next branch to automate the process of publishing a new release to NPM and publishing updated docs to GitHub Pages.

Overall here's what's left now for us to publish v2:

• Finish automation of publishing updated docs (first part done in Auto publish docs for the next branch when there are changes #554)
• Finish automation of publishing new releases
• Update CHANGELOG.md for all the changes from v1.4.0 (the current published version) and v2.0. I've started to do it here, but help wanted!

Feel free to help with any of the above!

[kilobyte2007]

Great! I will see where I can help with the changelog.