Vue3 #20787
Vue3 #20787
Conversation
|
Very exciting stuff - thank you so much! Would you be okay if I wrote a wrapper Vue test mount that would allow us to use either of these patterns based on what version is available? I feel like we can start migrating all the tests without the upgrade that way. We an use the new paradigms now and it would simplify this branch a lot of getting using paradigms that will reduce conflicts in the future. Also I think the upgrade of prettier in the middle there seems like it is a causing a lot of unrelated changes. Is it possible we can pull that out and apply to our current codebase or that we can remove it and apply it after the Vue 3 migration is done? |
dannon
force-pushed
the
vue3-2025-07
branch
2 times, most recently
from
8e8bdf8 to
fe3fdcb
Compare
|
Post-release-rebase update: The branch builds and runs successfully with all TypeScript errors resolved. Selenium testing found a few reactivity issues - collection builders weren't emitting events properly (fixed by swapping @update to @input), the workflow editor has some step update problems, and there's an accessibility issue with the dataset library multiselect. On the Jest side, tests are blocked because Babel transforms our Vue Router 4 ESM imports to CommonJS, which breaks Vue Router's conditional exports. I'm experimenting with Vitest as an alternative since we want to migrate to it anyway for the better Vite integration - got Bootstrap Vue and vue-rx mocked successfully, but components with slots still fail because of how @vue/compat handles rendering. Just trying to figure out the right order of operations here - whether to push through on Vitest now, stick with Jest until we're fully on Vue 3, or some hybrid approach. |
|
Can you update the lock file so we can see the tests ? |
…onsCalculations.vue
Update render functions in provider and content components to use Vue 3 compatible slot syntax. This fixes the runtime error '(destructured parameter) is undefined' by properly checking and calling slot functions.
template tries to attach event modifiers (like .stop) to handler functions that are sometimes undefined
- Convert SimpleProviderMixin to useSimpleProvider composable - Migrate all store providers (DbKey, Datatypes, etc.) to setup() - Update SingleQueryProvider factory to return setup-based components - Convert DebouncedInput with proper RxJS subscription cleanup - Keep backward compatibility with SimpleProviderMixin temporarily - Add proper emits declarations and cleanup lifecycle hooks
- Remove unused 'computed' import from storeProviders.js - Remove unused 'update' function and 'exposed' variable from SingleQueryProvider.js
Use toRaw() to unwrap reactive proxy objects before sending to web worker
Add deepToRaw helper to totally unwrap proxies before sending to web worker. This should still be reactive, since it's sent on query.
- Remove Vue.set() calls, replace with direct assignment (toolStore.ts, userToolsServiceCredentialsStore.ts) - Remove trackster import from bundleEntries.js (file deleted upstream) - Replace Select2 with SelectBasic in RuleCollectionBuilder.vue - Accept upstream rewrite of ToolsListTable.vue - Fix incorrect .value access on computed properties in userMultiToolCredentials.ts
Forward dismiss event from DefaultBox, wait for modal hide to prevent element click interception in Vue 3.
Add name prop to all Multiselect components to fix invalid aria-label attribute. vue-multiselect generates aria-label as 'name-searchbox', so when name is empty it becomes '-searchbox' which is invalid.
Turns out vue-multiselect needs both name and id props - it uses name for aria-label and id for aria-controls. Without id it was generating aria-controls="listbox-null" which is invalid. Unfortunately there's still a bug in vue-multiselect 3.3.1 where the listbox element only exists when the dropdown is open, so aria-controls points to a non-existent element when closed. This is a known issue (shentao/vue-multiselect#1780) that would need a library fix or migration to something like vue-accessible-multiselect. But at least now the IDs are properly formatted instead of "null".
BFormInput in Bootstrap Vue 2 emits 'input' events, not 'update' events. The incorrect @update handler prevented the collection name input from responding to user input, causing all collection builder tests to fail.
Replace deprecated filter syntax with localize() function calls and clean up test files.
3 participants
The test migration is still a giant pain, there are warnings, but the app builds, runs, and much of it does work. Very obviously still a work in progress, but I'm making this into a PR for at least a little more visibility, hoping to reduce conflicts and recruit folks to help test manually, fix tests, etc.
I will try to keep this rebased frequently so the branch doesn't slip away into the darkness yet again. (and, I rebased yesterday and it's already got 6 conflicted files)
Also, I have separated this from the vite branch as that actually (somewhat unexpectedly) had evenmore blockers than this one did. We still want to swap over, but we can push this one first at this point. The previous perceived dependency on the vite migration was primarily typescript errors we have for the most part now addressed in the build.
Unit test status (~10% failing, which is still a lot.)
Notes:
How to test the changes?
(Select all options that apply)
License