chore: remove `vue/compat` and complete Vue 3 migration #7133

ozyx · 2023-10-10T21:57:55Z

Closes #7131

Describe your changes:

Removes vue/compat and related compatibility settings in our webpack config.
Upgrades to Vue 3 proper (3.3.4), completing the migration!
Removes usage of Vue in our unit tests
Replaces usage of $children in our unit tests with $refs

All Submissions:

Have you followed the guidelines in our Contributing document?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?
Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

Changes address original issue?
Tests included and/or updated with changes?
Command line build passes?
Has this been smoke tested?
Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

Changes appear to address issue?
Reviewer has tested changes by following the provided instructions?
Changes appear not to be breaking changes?
Appropriate automated tests included?
Code style and in-line documentation are appropriate?
Has associated issue been labelled unverified? (only applicable if this PR closes the issue)
Has associated issue been labelled bug? (only applicable if this PR is for a bug fix)

deploysentinel · 2023-10-10T22:02:32Z

Current Playwright Test Results Summary

✅ 14 Passing

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 10/19/2023 04:08:24pm UTC)

Run Details

Running Workflow e2e-couchdb on Github Actions

Commit: 9581706

Started: 10/19/2023 04:03:04pm UTC

View Detailed Build Results

Current Playwright Test Results Summary

✅ 144 Passing - ⚠️ 2 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 10/19/2023 04:08:24pm UTC)

Run Details

Running Job e2e-stable on CircleCI

Commit: 9581706

Started: 10/19/2023 04:02:02pm UTC

⚠️ Flakes

📄 functional/plugins/conditionSet/conditionSet.e2e.spec.js • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Basic Condition Set Use ConditionSet has correct outputs when telemetry is and is not available Retry 1 • Initial Attempt	0% (0) 0 / 64 runs failed over last 7 days	1.56% (1) 1 / 64 run flaked over last 7 days

📄 functional/plugins/notebook/restrictedNotebook.e2e.spec.js • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Restricted Notebook with a page locked and with an embed @addinit Disallows embeds to be deleted if page locked @addinit Retry 1 • Initial Attempt	2.50% (1) 1 / 40 run failed over last 7 days	40% (16) 16 / 40 runs flaked over last 7 days

View Detailed Build Results

codecov · 2023-10-10T22:03:34Z

Codecov Report

Merging #7133 (a6ec502) into master (1414f54) will decrease coverage by 12.38%.
The diff coverage is n/a.

❗ Current head a6ec502 differs from pull request most recent head 9581706. Consider uploading reports for the commit 9581706 to get more accurate results

@@             Coverage Diff             @@
##           master    #7133       +/-   ##
===========================================
- Coverage   54.33%   41.96%   -12.38%     
===========================================
  Files         651      414      -237     
  Lines       26187    12868    -13319     
  Branches     2535        0     -2535     
===========================================
- Hits        14230     5400     -8830     
+ Misses      11256     7468     -3788     
+ Partials      701        0      -701

Flag	Coverage Δ
e2e-full	`41.96% <ø> (+0.18%)`	⬆️
e2e-stable	`?`
unit	`?`

Files	Coverage Δ
src/api/menu/menu.js	`93.10% <ø> (-3.45%)`	⬇️
...rc/plugins/imagery/ImageryTimestripViewProvider.js	`47.05% <ø> (-41.18%)`	⬇️

... and 506 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

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

ozyx · 2023-10-13T23:24:37Z

.webpack/webpack.common.js

@@ -77,16 +77,17 @@ const config = {
      MCT: path.join(projectRootDir, 'src/MCT'),
      testUtils: path.join(projectRootDir, 'src/utils/testUtils.js'),
      objectUtils: path.join(projectRootDir, 'src/api/objects/object-utils.js'),
-      utils: path.join(projectRootDir, 'src/utils'),
-      vue: path.join(projectRootDir, 'node_modules/@vue/compat/dist/vue.esm-bundler.js'),


Remove vue/compat alias

ozyx · 2023-10-13T23:25:31Z

.webpack/webpack.common.js

    }
  },
  plugins: [
    new webpack.DefinePlugin({
      __OPENMCT_VERSION__: `'${packageDefinition.version}'`,
      __OPENMCT_BUILD_DATE__: `'${new Date()}'`,
      __OPENMCT_REVISION__: `'${gitRevision}'`,
-      __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`
+      __OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`,
+      __VUE_OPTIONS_API__: true, // enable/disable Options API support, default: true


Need to explicitly define these Vue compile time options, even if they're as defaults. Otherwise Vue generates a warning

ozyx · 2023-10-13T23:26:40Z

src/api/menu/MenuAPISpec.js

@@ -20,7 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

-import Vue from 'vue';
+import { nextTick } from 'vue';


Vue was only available to us because of vue/compat. So now, only import the function itself

ozyx · 2023-10-13T23:27:04Z

src/plugins/LADTable/components/LadTableSet.vue

-          reorderEvent.newIndex,
-          oldComposition[reorderEvent.oldIndex]
-        );
+        this.ladTableObjects[reorderEvent.newIndex] = oldComposition[reorderEvent.oldIndex];


No need to use $set anymore-- and it's been removed in Vue 3

ozyx · 2023-10-13T23:28:22Z

src/plugins/condition/components/inspector/StyleEditor.vue

@@ -78,6 +78,7 @@
    <!-- Save Styles -->
    <toolbar-button
      v-if="canSaveStyle"
+      ref="saveStyleButton"


Added these refs so we can access them in the unit tests instead of using $children (which has been removed)

ozyx · 2023-10-13T23:29:59Z

src/plugins/notebook/components/NotebookEntry.vue

@@ -410,7 +410,7 @@ export default {
      this.manageEmbedLayout();
      this.timestampAndUpdate();
    },
-    convertMarkDownToHtml(text) {
+    convertMarkDownToHtml(text = '') {


Added a default of empty string here as this was sometimes undefined and causing issues. Still not sure why

ozyx · 2023-10-13T23:32:18Z

src/ui/components/SearchComponent.vue

      class="c-search__input"
      aria-label="Search Input"
      tabindex="10000"
      type="search"
      :value="value"
-      @input="handleInput"
-      @click="handleClick"
+      v-bind="$attrs"


need to bind $attrs here as well since $listeners was merged into it

scottbell

Nice work @ozyx! Did some cursory testing and looks great - really nice to not have any warnings!

Screen.Recording.2023-10-16.at.6.18.02.PM.mov

So many test updates!

ozyx · 2023-10-17T22:49:38Z

I'd like to test this branch against VIPER before we merge this

ozyx added 3 commits October 10, 2023 14:36

chore: remove custom compatConfig settings

1b4a9ab

chore: remove vue-compat and adjust webpack config

554237f

chore: explicitly define Vue feature flags

968c93f

ozyx added this to the Target:3.2.0 milestone Oct 10, 2023

ozyx changed the title ~~chore: remove Vue 2 compatibility layer~~ chore: remove vue/compat and complete Vue 3 migration Oct 10, 2023

ozyx added dependencies Pull requests that update a dependency file type:maintenance tests, chores, or project maintenance and removed dependencies Pull requests that update a dependency file labels Oct 10, 2023

ozyx and others added 15 commits October 11, 2023 10:25

fix: _data property moved to _.data

b55816f

fix(e2e): revert to original test procedures

1e24583

refactor: replace final instances of $set

2b75df2

refactor: remove Vue imports from tests

6991f71

refactor: Vue.ref() -> ref()

fbd951f

refactor: actually push the changes...

ef29968

Merge branch 'master' into mct7131

154cd14

test: replace unit test with e2e test

2d10120

test: remove test as it's already covered by e2e

e279c5f

fix(test): use $refs instead of $children

9558736

test(fix): more $refs

1969701

fix(test): more $refs

60a29ad

fix(test): use $refs in InspectorStyles tests

185b4df

fix(SearchComponent): use $attrs correctly

45bfd9e

Merge branch 'master' into mct7131

4ad5bbb

ozyx added the pr:e2e:couchdb npm run test:e2e:couchdb label Oct 13, 2023

ozyx commented Oct 13, 2023

View reviewed changes

github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Oct 13, 2023

ozyx commented Oct 13, 2023

View reviewed changes

ozyx requested review from davetsay, akhenry and scottbell October 13, 2023 23:33

scottbell approved these changes Oct 16, 2023

View reviewed changes

Merge branch 'master' into mct7131

07c02a0

scottbell added the pr:e2e:couchdb npm run test:e2e:couchdb label Oct 17, 2023

github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Oct 17, 2023

Merge branch 'master' into mct7131

9581706

ozyx added the pr:e2e:couchdb npm run test:e2e:couchdb label Oct 19, 2023

ozyx enabled auto-merge (squash) October 19, 2023 15:59

github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Oct 19, 2023

ozyx merged commit 43338f3 into master Oct 19, 2023

ozyx deleted the mct7131 branch October 19, 2023 16:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: remove `vue/compat` and complete Vue 3 migration #7133

chore: remove `vue/compat` and complete Vue 3 migration #7133

ozyx commented Oct 10, 2023 •

edited

Loading

deploysentinel bot commented Oct 10, 2023 •

edited

Loading

Test Case Results

Test Case Results

codecov bot commented Oct 10, 2023 •

edited

Loading

ozyx Oct 13, 2023

ozyx Oct 13, 2023

ozyx Oct 13, 2023

ozyx Oct 13, 2023

ozyx Oct 13, 2023

ozyx Oct 13, 2023

ozyx Oct 13, 2023 •

edited

Loading

scottbell left a comment

ozyx commented Oct 17, 2023

chore: remove vue/compat and complete Vue 3 migration #7133

chore: remove vue/compat and complete Vue 3 migration #7133

Conversation

ozyx commented Oct 10, 2023 • edited Loading

Describe your changes:

All Submissions:

Author Checklist

Reviewer Checklist

deploysentinel bot commented Oct 10, 2023 • edited Loading

Current Playwright Test Results Summary

Current Playwright Test Results Summary

⚠️ Flakes

Test Case Results

Test Case Results

codecov bot commented Oct 10, 2023 • edited Loading

Codecov Report

ozyx Oct 13, 2023

Choose a reason for hiding this comment

ozyx Oct 13, 2023

Choose a reason for hiding this comment

ozyx Oct 13, 2023

Choose a reason for hiding this comment

ozyx Oct 13, 2023

Choose a reason for hiding this comment

ozyx Oct 13, 2023

Choose a reason for hiding this comment

ozyx Oct 13, 2023

Choose a reason for hiding this comment

ozyx Oct 13, 2023 • edited Loading

Choose a reason for hiding this comment

scottbell left a comment

Choose a reason for hiding this comment

ozyx commented Oct 17, 2023

chore: remove `vue/compat` and complete Vue 3 migration #7133

chore: remove `vue/compat` and complete Vue 3 migration #7133

ozyx commented Oct 10, 2023 •

edited

Loading

deploysentinel bot commented Oct 10, 2023 •

edited

Loading

codecov bot commented Oct 10, 2023 •

edited

Loading

ozyx Oct 13, 2023 •

edited

Loading