Add Vue 3 code generator with Typescript

[kgrandemange]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes/features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Add Vue 3 Code generator with Typescript.

• Bugfix
• Feature (please, look at the "Scope of the project" section in the README.md file)
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no API changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: 362

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

I don't know how you want to show the Vue 3 code with and without Typescript. I only added the Typescript version.
But, you use the Option API on Vue 2 and it still available on Vue 3. Your component are "simple presentation components" (ie: you don't use something like v-model, ...) so your Vue 2 code is still valid on Vue 3.

PS: In a new PR i think we can refactor react, stencil, vue and vue 3 generator. They contains a lot of shared code.

[manekinekko]

so your Vue 2 code is still valid on Vue 3.

Thanks @kgrandemange for the insights.

I don't know how you want to show the Vue 3 code with and without Typescript.

We will temporarily provide both files (JS and TS). In the near future, will be adding on a drop down list in the editor tabs to provide various options for a particular file.

However, I am wondering that if Vue v2 and v3 shares a lot in common, may be we should just use the existing Vue package and add TS code to it. What do you think?

Also, would it possible to also add the Stackblitz export support (check these examples)?

[kgrandemange]

However, I am wondering that if Vue v2 and v3 shares a lot in common, may be we should just use the existing Vue package and add TS code to it. What do you think?

They share the same code for Javascript example but for Typescript it's different.

IMO we can add Vue 2 with JS and TS and Vue 3 with JS and TS. Actually 4 tabs and in the near future 2.

I think we can use a new package for Vue 3 but merge the functions that need it (including react and stencil). I need your help to do this properly.

Also, would it possible to also add the Stackblitz export support (check these examples)?

Yes i missed it... 🧐

[manekinekko]

[...] merge the functions that need it (including react and stencil).

Could you elaborate?

I need your help to do this properly.

Sure 👍

[kgrandemange]

Could you elaborate?

When I wrote the Vue 3 Code i used the Vue 2 code. And i saw React and Stencil shared the same code.

For example :

https://github.com/xlayers/xlayers/blob/main/libs/react-codegen/src/lib/react-aggregator.service.ts#L88
https://github.com/xlayers/xlayers/blob/main/libs/vue-codegen/src/lib/vue-aggregator.service.ts#L98
https://github.com/xlayers/xlayers/blob/main/libs/stencil-codegen/src/lib/stencil-aggregator.service.ts#L97

[Jefiozie]

Hi @kgrandemange, could you merge the changes from main to your PR? I've made some changes to the CI pipeline as it was failing. This should be resolved with the latest changes.

Thanks

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 395cdbd. Click to see the status, the terminal output, and the build insights.

Status	Command	Start Time
	nx affected:e2e --base=origin/main --head=HEAD --parallel --with-deps	11/24/2020, 12:05:22 PM
	nx affected:lint --base=origin/main --head=HEAD --parallel	11/24/2020, 12:09:00 PM
	nx affected:test --base=origin/main --head=HEAD --parallel --with-deps	11/24/2020, 12:04:08 PM

---

Sent with 💌 from NxCloud.

[Jefiozie]

HI @kgrandemange, could you rebase your changes just once more? I've made some changes to our CI pipeline and I'm seeing errors now that I wouldn't expect.

[Jefiozie]

HI @kgrandemange, could you provide me an update on this PR? if you need help just let me know I can assist you if needed.

[kgrandemange]

Hi @Jefiozie

I added the Stackblitz files. I copied Vue 2 example and updated it to Vue 3. I don't know how to test because Stackblitz button is disable for Vue 2.

And I don't know if i must change this lines:

https://github.com/kgrandemange/xlayers/blob/add-vue-3/apps/xlayers/src/app/editor/code/exports/stackblitz/stackblitz.vue3.service.ts#L105

https://github.com/kgrandemange/xlayers/blob/add-vue-3/apps/xlayers/src/app/editor/code/exports/stackblitz/stackblitz.vue3.service.ts#L109

[Jefiozie]

Hi @kgrandemange, thank you for the update.

If you look at this file here we look at a specific Codegen and based on that get some extra configuration parameters, like the one you need to enable Stackblitz.

Is this something you are willing to implement in this PR? It isn't that much more I believe so I could wait for that before I review it?