search

mavicellc / aem-vue-editable-components

Apache License 2.0
11 stars 4 forks source link

[feature] Compatibility with Vue 3 #3

Closed keith0305 closed 2 years ago

keith0305 commented 2 years ago

Hi I've been following your Vue with AEM SPA Editor tutorial blogpost over at mavice.com. Thank you!!! I've learnt so much.

I am trying to set up a new project with Vue 3 and preferably Vite instead of Vue CLI.

I've discovered that the frontend-maven-plugin by eirslett supports pnpm, so I guess build process shouldn't be an issue.

So then on to this library, I have seen the code utilizing the MapTo and withComponentMappingContext function. Having looked briefly at the source code, it seems like it is written for Vue 2 and I was wondering would this be a problem if imported into a Vue 3 project with Vite?

keith0305 commented 2 years ago

An update. Managed to make it work by:

  1. Integrating pnpm instead of npm I guess this step is optional but since frontend-maven-plugin supports pnpm, why not?

  2. Integrating Vite This step is theoretically optional as well, but Vite is much faster and is the modern standard, so why not? The main issue was the dev server, specifically the proxy, which I am not too familiar exactly how it works, but it did not work in Vite. I ended up writting my own middleware logic to proxy the AEM pages, but instead of loading css and js from clientlibs, in the proxy it will serve these script files instead:

    <script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/src/main.js"></script>

  3. Preparing integration with Vue 3 Vite does not support the decorator syntax out-of-the-box and vue-class-component is kinda deprecated, so I had to refactor the codes from this library to remove all decorators, replacing them with plain object instead of class.

Here was where patience was needed, because I had to do away with inheritance, I removed most mixins, merging the component's properties on my own, carefully not to break anything. I am sure someone will do a better job than me here.

Note that at this point, I was still using vite-plugin-vue2 and constantly making sure everything works before I proceed to Vue 3.

  1. Migrating to Vue 3 The biggest breaking change was the second parameter of createElement on Vue 3, which had a flatter structure than Vue 2's. A lot of trial and error here, but managed to make it work. The codebase was still messy, so once I verified everything works, I proceeded to try to improve the codebase.

First thing I wanted to get rid of was the unnecessary layers of component nesting, which made it very hard to debug in the Vue Devtool. So I created 2 composable functions: withModelProvider and withEditableProvider - which provide essential wrapperHtmlAttributes, wrapperHtmlClasses, childProperties, etc. to name a few.

Then these composables are called inside the setup() of a new component: AEMWrapperComponent, which does exactly what it says, wrap any Vue component and it would have model and essential data-cq-data-path on its wrapper <div> tag.

In the ResponsiveGrid component, of course we have to call the composables too.

So there we go. Now we can preview, test and debug components just like how when it all started, but with pnpm, Vite and Vue 3 instead.