feat(types): added better typescript support using vue-tsc d.ts generation

[D4RKAR117]

Fixes #263

Proposed Changes

• Added d.ts automatic generation using vue-tsc for vue component, mixins and directives using npm run build:types
• Added better vue type checking using new script npm run lint:typings
• Added initial oruga-next complex type definitions

Side notes

The commands build:types and lint:typings will end with exit code 1 at the moment due, context injections wrong resolves and other behaviors that escapes the tsc proxies (that vue tsc are using) scopes. Some of the errors that are reported by the proxy get solved removing shims-vue.d.ts from the context, but not all of them are solved. So this errors are more informative than actually indicators for test proposes or problems by themselves.

Also removing shims-vue.d.ts gives to non prepared workspaces to not found .vue files. so its recommended that for future development proposes, oruga-next adopts volar takeover mode as is explained here.

Recommendations

For CI/CD proposes due the limitations of the vue-tsc explained above. its recommended that the type generation and type checking related tasks get executed in a allowed to fail stage or a manual approach before each actual build stage.

[codecov[bot]]

Codecov Report

Merging #270 (19a4d1d) into develop (1b443cd) will not change coverage. The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop     #270   +/-   ##
========================================
  Coverage    63.37%   63.37%           
========================================
  Files           60       60           
  Lines         3298     3298           
  Branches      1024     1024           
========================================
  Hits          2090     2090           
  Misses        1082     1082           
  Partials       126      126           

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 1b443cd...19a4d1d. Read the comment docs.

[jtommy]

@D4RKAR117 Awesome!! I'm going to test all as soon as possible in order to include it in the next release.

About CI/CD @astagi is more experienced than me, surely he'll find a good solution!

[D4RKAR117]

That's good to hear, I'll try to improve typescript support in general for Vue 3, starting with trying to remove "any" definitions from project types. But I think it will be after the next release.

[jtommy]

@D4RKAR117 did you test it in a real project?

Anyway, there are some problems with programmatic components (probably the most important types of the library), for example modal. Also useProgrammatic type is not well defined, for example const { oruga } = useProgrammatic();.

Please test it a project to know the real needs using the library

[D4RKAR117]

Yeah i tested it in a local project of mine, but not too much in deep. i will check programmatic issues and i will try to solve them then. thanks for the feedback, so i think that this need to be marked as a draft WIP.

[jtommy]

@D4RKAR117 any news?

[D4RKAR117]

Unfortunately, I still haven't been able to dedicate time to improve the typing due to my work. As soon as I have any progress I will share it.

[D4RKAR117]

@jtommy hey, i'm slowly advancing in typing's for oruga-next, i turned off the any rule of typescript to improve as much as posible the types and trying to solve many of any references posible, but i have some doubts:

• As i describe here in discord, i have some troubles typing one of the directives, clickOutside. so some guidance over that directive is appreciated
• I found that many of the components such as Table, are written with options api, so this limits in some ways, like provide / inject type assertions or props acknowledge between components, so, can i rewrite them in composition api and script setup ways ? this can help in many ways, also adopting the new vue "preferred" way to do things for readability can help in some sort for future contributions i think. So let me know about what do you think about that.
• Also i want to know how is the recommended way to test all of the component use cases, at the moment I'm using a local project to review changes in DX and IDE assertion, but this is slow and inefficient, so if you had any advice of how to improve the oruga work flow is also appreciated

[jtommy]

@jtommy hey, i'm slowly advancing in typing's for oruga-next, i turned off the any rule of typescript to improve as much as posible the types and trying to solve many of any references posible, but i have some doubts:

• As i describe here in discord, i have some troubles typing one of the directives, clickOutside. so some guidance over that directive is appreciated
• I found that many of the components such as Table, are written with options api, so this limits in some ways, like provide / inject type assertions or props acknowledge between components, so, can i rewrite them in composition api and script setup ways ? this can help in many ways, also adopting the new vue "preferred" way to do things for readability can help in some sort for future contributions i think. So let me know about what do you think about that.
• Also i want to know how is the recommended way to test all of the component use cases, at the moment I'm using a local project to review changes in DX and IDE assertion, but this is slow and inefficient, so if you had any advice of how to improve the oruga work flow is also appreciated

1. I should take a look to understand better
2. We are going to use it and refactor components but we need to reuse unit test from Vue 2 code. It's too dangerous operation at the moment
3. I don't know to be honest, at the moment the high priority is about programmatic components.