Vue upgrade: figure out Script Setup for Filings UI

[severinbeauvais]

• talk to Travis about this
• see https://vuejs.org/api/sfc-script-setup.html
• figure out what can be done in Filings UI (assuming Vue v2.7)
• figure out what should be done in Filings UI now vs later (or ever)

[seeker25]

I'd start small with this Alex, maybe a micro project with it working with unit tests / vuetify etc

vuejs/vue-jest#483
vuejs/vue-jest#489

Recently changed -^ not sure if this will work (really recent changes)

[severinbeauvais]

Would it be possible to change a component or three in Filings UI (using Vue 2.7)?

[seeker25]

You might be able to do it with just regular composition API (not script setup) with the standard jest library

[lambert-alex]

Sorry for taking awhile on this.

So to transition from the Options api to the Composition api I think we will have to do it all in one go.
The main points that stick out to me

• It is possible to use Options api and Composition api at the same time with the use of the setup hook instead of the script setup, ie. <script> setup () { } </script> instead of <script setup> </script> 2. Integrating with Composition-API-based code in an Options API component.
• I think this is a gradual transition slowly changing the app one component at a time. Once the components have been all changed over to the composition api then filings-ui could all be fairly easily converted to the <script setup> method with minimal changes.
• However Note that the setup() hook of Composition API is called before any Options API hooks, even beforeCreate(). so it seems that no data, computed properties or methods are accessible by the composition api to the option api. I think that only a few components this would actually be possible. So it seems like the best way forward would be to convert the whole app to the composition api in one go.

I am curious what other people think is the best option?

[severinbeauvais]

@davemck513 FYI ^^

[lambert-alex]

Options api -> Composition api
TL; DR
Lots of work, should convert each UI in one go. Composition API code is significantly easier to read and write.

Upon looking into this further I do not think the effort to slowly convert the app is worth it. The extensive use of mixins and the difference between when the composition api is setup and the options api is setup would make using all the different components together very difficult for little short term benefit.

Challenges:
Vuetify might be an issue, it still works for the most part I have switched a few components in the filings-ui and have not run into any issues yet.
Almost every file will have changes so there will need to be lots of testing.

To do:
a. Upgrade dependencies to versions that support the composition api.
b. Upgrade the common components to composition api first.
c. Convert all of the mixins to composables.
d. Convert all <script> to <script setup> .
e. Update router, components, views and app, verify state, actions, mutations, getters still work.
f. Update unit tests, unit tests testing rendering of components are unaffected, tests that are testing state, vue instance, props and emits are affected and will require changes.

Nice to do:
After a ui has been converted to the composition api a refactor and restructure of the app should be done to take full advantage of being able to write reactive code anywhere.

Final thoughts:
Due to the expanded usability of reactive code in the composition api I think there will be significant advantage long term to having all ui’s using the composition api.

[severinbeauvais]

^^ See PR 403 for sample code changes and discussions. The following reviewers were added to this PR to show what changes are needed and to solicit comments:

@severinbeauvais
@seeker25
@kialj876
@thorwolpert
@cameron-freshworks
@pwei1018

I believe @lambert-alex is creating some follow-up ticket to better prepare for and capture what will be needed to get us Vue3-compliant and take advantage of new architectures.