Refactor for Vue3 compliance #917

jordojordo · 2024-10-09T13:01:42Z

Fix #916
Fix #939
Fix rancher/dashboard#12183

Dependent on

Changes

Updated Node engine to version 20
Updated and added necessary dependencies:
- @rancher/components: ^0.3.0-alpha.1
- @rancher/shell: ^3.0.0
- cache-loader: ^4.1.0
- color: 4.2.3
- ip: 2.0.1
- node-polyfill-webpack-plugin: ^3.0.0
- @types/node: ~20.10.0
- @types/semver: 7.5.4
- file-loader: ^6.2.0
- url-loader: ^4.1.1
Added dependency resolutions:
- @types/node: ~20.10.0
- @types/lodash: 4.17.5
- @achrinza/node-ipc: 9.2.9
- @vue/cli-service/html-webpack-plugin: ^5.0.0
- d3-color: 3.1.0
- ejs: 3.1.9
- follow-redirects: 1.15.2
- glob: 7.2.3
- glob-parent: 6.0.2
- json5: 2.2.3
- merge: 2.1.1
- node-forge: 1.3.1
- nth-check: 2.1.1
- qs: 6.11.1
- roarr: 7.0.4
- semver: 7.5.4
Removed @shell/plugins/clean-tooltip-directive and @shell/plugins/clean-html-directive imports
Replaced v-model implementation with v-model:value notation
Replaced @input implementation with @update:value notation
Replaced Vue.set or $set implementation with direct modification of the object property
Dynamic components defined with :is now resolved with defineAsyncComponent
The Labels component ( shell/components/form/Labels.vue ) needs to have the model passed as value, a reactive clone of value will not be updated.
Removed empty <template> tags
structuredClone can not clone reactive Proxy objects directly. Implemented Vue's provided toRaw method to get the raw object before cloning
Replaced any prop that has a default callback returning something from the store
Replaced ::v-deep css selectors with :deep(<selector>)
Added key to any template element with a v-for loop
Replaced n-link elements with router-link
Replaced v-popover elements with VDropdown
Added shims for @rancher/shell modules that are missing typescript definitions
Removed references to @shell/utils/array file
Migrated release workflow to use reusable workflow

…hell shims

kravciak · 2024-10-10T06:18:44Z

My local build failed:

Failed to compile with 1 error

~ yarn install
yarn install v1.22.22
[1/5] Validating package.json...
[2/5] Resolving packages...
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@~6.5.2"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@^5.1.2"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.7.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^5.7.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@~6.10.3"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.7.0"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.1"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@~5.1.2"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@~7.0.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.0.0"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@^6.12.3"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@^5.1.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.13.0"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "glob@7.2.3" is incompatible with requested version "glob@^10.3.3"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^5.5.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@2 || 3 || 4 || 5"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.13.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "ejs@3.1.9" is incompatible with requested version "ejs@^3.1.10"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^7.6.3"
success Already up-to-date.
Done in 0.78s.

~ VERSION=0.0.1 yarn build-pkg kubewarden
yarn run v1.22.22
$ ./node_modules/@rancher/shell/scripts/build-pkg.sh kubewarden
Building UI Package kubewarden
  Package name:    kubewarden-0.0.1
  Package version: 0.0.1
  Output formats:  umd-min
  Output directory: /home/kravciak/git/kw/ui/dist-pkg/kubewarden-0.0.1
~/git/kw/ui/pkg/kubewarden ~/git/kw/ui
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠏  Building for production as library (umd-min)...

 ERROR  Failed to compile with 1 error                                                                                                                             8:13:19 AM

 error  in ./index.ts

Syntax Error: Thread Loader (Worker 0)
[BABEL] /home/kravciak/git/kw/ui/pkg/kubewarden/index.ts: Cannot find module '@babel/helper-environment-visitor'
Require stack:
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/node_modules/@babel/helper-module-transforms/lib/rewrite-this.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/node_modules/@babel/helper-module-transforms/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/lib/available-plugins.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/lib/filter-items.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/@vue/babel-preset-app/index.js
- /home/kravciak/git/kw/ui/node_modules/@vue/cli-plugin-babel/preset.js
- /home/kravciak/git/kw/ui/node_modules/@babel/core/lib/config/files/module-types.js
- /home/kravciak/git/kw/ui/node_modules/@babel/core/lib/config/files/configuration.js
- /home/kravciak/git/kw/ui/node_modules/@babel/core/lib/config/files/index.js
- /home/kravciak/git/kw/ui/node_modules/@babel/core/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/babel-loader/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/loader-runner/lib/loadLoader.js
- /home/kravciak/git/kw/ui/node_modules/loader-runner/lib/LoaderRunner.js
- /home/kravciak/git/kw/ui/node_modules/thread-loader/dist/worker.js (While processing: "/home/kravciak/git/kw/ui/node_modules/@vue/cli-plugin-babel/preset.js")


Error parsing bundle asset "/home/kravciak/git/kw/ui/dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.js": no such file

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to /home/kravciak/git/kw/ui/dist-pkg/kubewarden-0.0.1/report.html
 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at /home/kravciak/git/kw/ui/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/webpack.js:168:8
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:655:5
    at /home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2830:7
    at done (/home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2865:11)
    at /home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2818:7
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/HookWebpackError.js:67:2
    at Hook.eval [as callAsync] (eval at create (/home/kravciak/git/kw/ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/kravciak/git/kw/ui/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.shutdown (/home/kravciak/git/kw/ui/node_modules/webpack/lib/Cache.js:154:23)
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/Compiler.js:1377:15
    at Hook.eval [as callAsync] (eval at create (/home/kravciak/git/kw/ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/kravciak/git/kw/ui/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.close (/home/kravciak/git/kw/ui/node_modules/webpack/lib/Compiler.js:1370:23)
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:652:14
    at arrayEach (/home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2405:9)
    at Object.each (/home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2846:9)
    at MultiCompiler.close (/home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:649:12)
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/webpack.js:167:16
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:629:14
    at processQueueWorker (/home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:566:6)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
Updating package file
~/git/kw/ui
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

~ node --version
v20.15.1

kravciak · 2024-10-10T06:18:49Z

My local build failed:

Failed to compile with 1 error

~ yarn install
yarn install v1.22.22
[1/5] Validating package.json...
[2/5] Resolving packages...
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@~6.5.2"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@^5.1.2"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.7.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^5.7.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@~6.10.3"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.7.0"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.1"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@~5.1.2"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@~7.0.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.0.0"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@^6.12.3"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@^5.1.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.13.0"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "glob@7.2.3" is incompatible with requested version "glob@^10.3.3"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^5.5.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@2 || 3 || 4 || 5"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.13.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "ejs@3.1.9" is incompatible with requested version "ejs@^3.1.10"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^7.6.3"
success Already up-to-date.
Done in 0.78s.

~ VERSION=0.0.1 yarn build-pkg kubewarden
yarn run v1.22.22
$ ./node_modules/@rancher/shell/scripts/build-pkg.sh kubewarden
Building UI Package kubewarden
  Package name:    kubewarden-0.0.1
  Package version: 0.0.1
  Output formats:  umd-min
  Output directory: /home/kravciak/git/kw/ui/dist-pkg/kubewarden-0.0.1
~/git/kw/ui/pkg/kubewarden ~/git/kw/ui
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠏  Building for production as library (umd-min)...

 ERROR  Failed to compile with 1 error                                                                                                                             8:13:19 AM

 error  in ./index.ts

Syntax Error: Thread Loader (Worker 0)
[BABEL] /home/kravciak/git/kw/ui/pkg/kubewarden/index.ts: Cannot find module '@babel/helper-environment-visitor'
Require stack:
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/node_modules/@babel/helper-module-transforms/lib/rewrite-this.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/node_modules/@babel/helper-module-transforms/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/lib/available-plugins.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/lib/filter-items.js
- /home/kravciak/git/kw/ui/node_modules/@babel/preset-env/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/@vue/babel-preset-app/index.js
- /home/kravciak/git/kw/ui/node_modules/@vue/cli-plugin-babel/preset.js
- /home/kravciak/git/kw/ui/node_modules/@babel/core/lib/config/files/module-types.js
- /home/kravciak/git/kw/ui/node_modules/@babel/core/lib/config/files/configuration.js
- /home/kravciak/git/kw/ui/node_modules/@babel/core/lib/config/files/index.js
- /home/kravciak/git/kw/ui/node_modules/@babel/core/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/babel-loader/lib/index.js
- /home/kravciak/git/kw/ui/node_modules/loader-runner/lib/loadLoader.js
- /home/kravciak/git/kw/ui/node_modules/loader-runner/lib/LoaderRunner.js
- /home/kravciak/git/kw/ui/node_modules/thread-loader/dist/worker.js (While processing: "/home/kravciak/git/kw/ui/node_modules/@vue/cli-plugin-babel/preset.js")


Error parsing bundle asset "/home/kravciak/git/kw/ui/dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.js": no such file

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to /home/kravciak/git/kw/ui/dist-pkg/kubewarden-0.0.1/report.html
 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at /home/kravciak/git/kw/ui/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/webpack.js:168:8
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:655:5
    at /home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2830:7
    at done (/home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2865:11)
    at /home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2818:7
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/HookWebpackError.js:67:2
    at Hook.eval [as callAsync] (eval at create (/home/kravciak/git/kw/ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/kravciak/git/kw/ui/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.shutdown (/home/kravciak/git/kw/ui/node_modules/webpack/lib/Cache.js:154:23)
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/Compiler.js:1377:15
    at Hook.eval [as callAsync] (eval at create (/home/kravciak/git/kw/ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/kravciak/git/kw/ui/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.close (/home/kravciak/git/kw/ui/node_modules/webpack/lib/Compiler.js:1370:23)
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:652:14
    at arrayEach (/home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2405:9)
    at Object.each (/home/kravciak/git/kw/ui/node_modules/neo-async/async.js:2846:9)
    at MultiCompiler.close (/home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:649:12)
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/webpack.js:167:16
    at /home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:629:14
    at processQueueWorker (/home/kravciak/git/kw/ui/node_modules/webpack/lib/MultiCompiler.js:566:6)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
Updating package file
~/git/kw/ui
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

~ node --version
v20.15.1

jordojordo · 2024-10-10T13:02:58Z

There shouldn't be any reference to the @babel/helper-environment-visitor library, you may have to clear your yarn cache and remove the node_modules before installing.

$ yarn install
yarn install v1.22.22
[1/5] Validating package.json...
[2/5] Resolving packages...
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@~6.5.2"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@^5.1.2"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.7.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^5.7.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@~6.10.3"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.7.0"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.1"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@~5.1.2"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@~7.0.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.0.0"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@^6.12.3"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@^5.1.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.13.0"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "glob@7.2.3" is incompatible with requested version "glob@^10.3.3"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^5.5.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@2 || 3 || 4 || 5"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.13.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "ejs@3.1.9" is incompatible with requested version "ejs@^3.1.10"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^7.6.3"
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > @rancher/components@0.3.0-alpha.1" has incorrect peer dependency "core-js@3.25.3".
warning " > @rancher/components@0.3.0-alpha.1" has unmet peer dependency "vue@~3.2.13".
warning "@rancher/shell > @babel/plugin-proposal-optional-chaining@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@rancher/shell > @babel/plugin-proposal-private-methods@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@rancher/shell > @babel/plugin-proposal-private-property-in-object@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@rancher/shell > @babel/preset-typescript@7.16.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@rancher/shell > @vue/vue3-jest@27.0.0" has unmet peer dependency "@babel/core@7.x".
warning "@rancher/shell > @vue/vue3-jest@27.0.0" has incorrect peer dependency "babel-jest@27.x".
warning "@rancher/shell > codemirror-editor-vue3@2.7.1" has unmet peer dependency "diff-match-patch@^1.0.5".
warning "@rancher/shell > css-loader@6.7.3" has unmet peer dependency "webpack@^5.0.0".
warning "@rancher/shell > eslint-config-standard@16.0.3" has unmet peer dependency "eslint-plugin-node@^11.1.0".
warning "@rancher/shell > eslint-config-standard@16.0.3" has unmet peer dependency "eslint-plugin-promise@^4.2.1 || ^5.0.0".
warning "@rancher/shell > sass-loader@12.0.0" has unmet peer dependency "webpack@^5.0.0".
warning "@rancher/shell > style-loader@1.2.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "@rancher/shell > worker-loader@3.0.8" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "@rancher/shell > @babel/plugin-proposal-optional-chaining > @babel/plugin-syntax-optional-chaining@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@rancher/shell > @babel/plugin-proposal-private-methods > @babel/helper-create-class-features-plugin@7.25.4" has unmet peer dependency "@babel/core@^7.0.0".
warning "@rancher/shell > @babel/plugin-proposal-private-property-in-object > @babel/plugin-syntax-private-property-in-object@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-typescript > @babel/plugin-transform-typescript@7.25.2" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-typescript > @babel/plugin-transform-modules-commonjs@7.24.8" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@rancher/shell > @aws-sdk/client-eks > @aws-sdk/middleware-retry > react-native-get-random-values@1.11.0" has unmet peer dependency "react-native@>=0.56".
warning "@rancher/shell > @babel/plugin-proposal-private-methods > @babel/helper-create-class-features-plugin > @babel/helper-replace-supers@7.25.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "@rancher/shell > @babel/preset-typescript > @babel/plugin-transform-typescript > @babel/plugin-syntax-typescript@7.25.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-typescript > @babel/plugin-syntax-jsx@7.24.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @babel/preset-env@7.25.4" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax@1.1.0" has unmet peer dependency "@babel/core@^7.0.0".
warning " > cache-loader@4.1.0" has unmet peer dependency "webpack@^4.0.0".
warning " > css-loader@4.3.0" has unmet peer dependency "webpack@^4.27.0 || ^5.0.0".
warning " > node-polyfill-webpack-plugin@3.0.0" has unmet peer dependency "webpack@>=5".
warning "v-tooltip > vue-resize@1.0.1" has unmet peer dependency "vue@^2.6.0".
warning " > @babel/preset-typescript@7.24.7" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @vue/cli-plugin-unit-jest@5.0.8" has unmet peer dependency "@vue/cli-service@^3.0.0 || ^4.0.0 || ^5.0.0-0".
warning " > @vue/cli-plugin-unit-jest@5.0.8" has incorrect peer dependency "jest@^27.1.0".
warning " > @vue/vue2-jest@29.2.6" has unmet peer dependency "@babel/core@7.x".
warning " > @vue/vue2-jest@29.2.6" has unmet peer dependency "vue@^2.x".
warning " > @vue/vue2-jest@29.2.6" has unmet peer dependency "vue-template-compiler@^2.x".
warning " > babel-jest@29.7.0" has unmet peer dependency "@babel/core@^7.8.0".
warning "babel-jest > babel-preset-jest@29.6.3" has unmet peer dependency "@babel/core@^7.0.0".
warning " > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > sass-loader@10.1.1" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning " > url-loader@4.1.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[5/5] Building fresh packages...
Done in 14.16s.
[jordon@suse-endeavour ui]$ VERSION=0.0.1 yarn build-pkg kubewarden
yarn run v1.22.22
$ ./node_modules/@rancher/shell/scripts/build-pkg.sh kubewarden
Building UI Package kubewarden
  Package name:    kubewarden-0.0.1
  Package version: 0.0.1
  Output formats:  umd-min
  Output directory: /home/jordon/Documents/kubewarden/ui/dist-pkg/kubewarden-0.0.1
~/Documents/kubewarden/ui/pkg/kubewarden ~/Documents/kubewarden/ui
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠋  Building for production as library (umd-min)...

 WARNING  Compiled with 3 warnings                                                                                                       8:59:12 AM

 warning  in ./plugins/policy-class.js

export 'stateBackground' (imported as 'stateBackground') was not found in '@shell/plugins/dashboard-store/resource-class' (possible exports: DNS_LIKE_TYPES, STATES, STATES_ENUM, colorForState, default, getStateLabel, getStatesByType, isConditionReadyAndWaiting, mapStateToEnum, primaryDisplayStatusFromCount, stateDisplay, stateSort)

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  kubewarden-0.0.1.umd.min.js (1.36 MiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  kubewarden-0.0.1.umd.min (1.36 MiB)
      kubewarden-0.0.1.umd.min.js


Webpack Bundle Analyzer saved report to /home/jordon/Documents/kubewarden/ui/dist-pkg/kubewarden-0.0.1/report.html
  File                                                                       Size                              Gzipped

  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.js                1392.55 KiB                       385.70 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.detail.js         44.75 KiB                         10.67 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.863.js            43.91 KiB                         13.61 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.edit.js           43.28 KiB                         11.02 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.4.js              41.31 KiB                         10.10 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.markdown.js       36.14 KiB                         11.37 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.37.js             24.57 KiB                         7.73 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.policyDashboar    21.25 KiB                         2.84 KiB
  d1.js
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.formatters.js     17.17 KiB                         4.73 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.23.js             10.20 KiB                         3.48 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.list.js           7.90 KiB                          2.46 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.policyDashboar    7.66 KiB                          1.65 KiB
  d0.js
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.336.js            6.80 KiB                          2.32 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.dialog.js         2.88 KiB                          1.29 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.60.js             2.65 KiB                          1.28 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.237.js            1.10 KiB                          0.63 KiB
  ../../dist-pkg/kubewarden-0.0.1/kubewarden-0.0.1.umd.min.airgap-docs.js    0.29 KiB                          0.21 KiB

  Images and other types of assets omitted.
  Build at: 2024-10-10T12:59:14.026Z - Hash: 3c8d48b19d9ce507 - Time: NaNms

Updating package file
~/Documents/kubewarden/ui
Done in 19.27s.
[jordon@suse-endeavour ui]$ yarn why @babel/helper-environment-visitor
yarn why v1.22.22
[1/4] Why do we have the module "@babel/helper-environment-visitor"...?
[2/4] Initialising dependency graph...
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@~6.5.2"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@^5.1.2"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.7.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^5.7.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@~6.10.3"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.7.0"
warning Resolution field "json5@2.2.3" is incompatible with requested version "json5@^1.0.1"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@~5.1.2"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@~7.0.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.0.0"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@^6.12.3"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "glob-parent@6.0.2" is incompatible with requested version "glob-parent@^5.1.2"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.13.0"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "d3-color@3.1.0" is incompatible with requested version "d3-color@1"
warning Resolution field "glob@7.2.3" is incompatible with requested version "glob@^10.3.3"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^5.5.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@2 || 3 || 4 || 5"
warning Resolution field "qs@6.11.1" is incompatible with requested version "qs@6.13.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.0"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^6.3.1"
warning Resolution field "ejs@3.1.9" is incompatible with requested version "ejs@^3.1.10"
warning Resolution field "semver@7.5.4" is incompatible with requested version "semver@^7.6.3"
[3/4] Finding dependency...
error We couldn't find a match!
Done in 0.73s.

jordojordo · 2024-10-11T17:32:49Z

Removing unit tests until this migration is completed. Will follow up from this branch.

kravciak · 2024-10-16T12:33:42Z

I tried to developer-load extensions today on rancher v2.10-alpha3.
I get this error and rancher stopped working (unable to load rancher home page).
Before I loaded extension rancher worked fine.

Uncaught TypeError: (0 , r.pushScopeId) is not a function
    at o (Banner.vue:3:28)
    at 19151 (Banner.vue:11:34)
    at i (bootstrap:19:32)
    at 9980 (kubewarden-0.0.1.umd.min.js:7:37743)
    at i (bootstrap:19:32)
    at kubewarden-0.0.1.umd.min.js:60:227808
    at kubewarden-0.0.1.umd.min.js:60:471166
    at kubewarden-0.0.1.umd.min.js:60:471171
    at universalModuleDefinition:9:30
    at universalModuleDefinition:1:1

jordojordo · 2024-10-17T14:04:26Z

I suspect v2.10.0-alpha3 does not have the latest dashboard code, seeing the error for window[e].default is not a function has been some time ago:

plugins.js:112 Uncaught TypeError: window[e].default is not a function
    at l.then.s.onload (plugins.js:112:26)

jordojordo · 2024-10-17T14:11:26Z

@kravciak Update to the previous comment, v2.10.0-alpha3 is indeed using an older version of the UI, v2.9.0 to be exact.

pkg/kubewarden/types/kubewarden.ts

This reverts commit 4aeaec3.

kravciak

I tried on rancher v2.10.0-alpha7 with k3s 1.30 & 1.31, it works fine.

aalves08 · 2024-11-05T16:41:22Z

pkg/kubewarden/chart/kubewarden/policy-server/index.vue

      hash.push(this.$fetchType(SERVICE_ACCOUNT));
    }

    await allHash(hash);
  },

  data() {
-    if (!this.value.spec?.securityContexts) {
-      this.value.spec.securityContexts = {};
+    const chartValues = reactive({ ...this.value });


Always interesting to see reactive in use. There were a few reactivity losses when we migrated to Vue3... Sometimes it's difficult to adapt the current implemented logic to match the new "reactivity" pattern without refactoring. Fortunately it wasn't that bad here

Yeah we got lucky with Kubewarden, this was the only area I noticed that was affected, hopefully that's truly the case.

aalves08 · 2024-11-05T16:44:04Z

pkg/kubewarden/components/Policies/Values.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineAsyncComponent, toRaw } from 'vue';


Didn't know about the toRaw... Just learned something new 💪

aalves08 · 2024-11-05T16:46:57Z

pkg/kubewarden/components/PolicyServer/SysctlsArrayList.vue

@@ -82,44 +78,43 @@ export default {
      :add-allowed="true"
      :add-label="addLabel"
      :disabled="disabled"
-      :default-add-value="0"
+      :default-add-value="{ name: '', value: '' }"


did arrayList change?

I don't think it was correct to begin with actually 😅

aalves08 · 2024-11-05T16:52:48Z

pkg/kubewarden/detail/policies.kubewarden.io.policyserver.vue

@@ -7,13 +7,15 @@ import { allHash } from '@shell/utils/promise';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { mapPref, GROUP_RESOURCES } from '@shell/store/prefs';

+import { BadgeState } from '@components/BadgeState';


curiously, I don't see BadgeState being added to the html part of this PR change... but it's there looking at the whole file. Was it forgotten? 😛

Oh yeah, that might be a leftover

aalves08 · 2024-11-05T16:54:26Z

pkg/kubewarden/index.ts

-import '@shell/plugins/clean-tooltip-directive';
-import '@shell/plugins/clean-html-directive';
+// import '@shell/plugins/clean-tooltip-directive';
+// import '@shell/plugins/clean-html-directive';


To be cleared, but it can be in another PR

aalves08

codewise, overall LGTM! @kravciak has taken care of the manual testing, so 🚢 it! 👍

Refactor for vue3

c8f69bf

jordojordo added kind/tech-debt area/vue3 labels Oct 9, 2024

jordojordo added this to the 3.0.0 milestone Oct 9, 2024

jordojordo requested review from kravciak and aalves08 October 9, 2024 13:01

jordojordo self-assigned this Oct 9, 2024

Remove array util refs - Migrate to reusable release workflow - Add s…

cec4f6c

…hell shims

jordojordo added 3 commits October 11, 2024 08:30

Bump shell 3.0.0-rc.6 - remove shims

473d17e

Fix rancher annotations

f7bb722

Skip unit tests until vue3 migration is completed

41e21b4

jordojordo mentioned this pull request Oct 23, 2024

Update Elemental and Kubewarden to use the most modern publishing practices rancher/dashboard#12029

Open

2 tasks

jordojordo added 2 commits October 29, 2024 13:22

Fix ui-extensions-version annotation

fdc7d73

Update dependencies

ac533c4

kravciak mentioned this pull request Oct 31, 2024

Fix tests for Vue3 compliance #941

Merged

Replace references to catalog app spec.values with configmaps

4aeaec3

kravciak requested changes Nov 4, 2024

View reviewed changes

pkg/kubewarden/types/kubewarden.ts Outdated Show resolved Hide resolved

flavio mentioned this pull request Nov 4, 2024

k8's 1.31 support for Kubewarden rancher/rancher#46852

Open

jordojordo added 2 commits November 4, 2024 13:57

Revert "Replace references to catalog app spec.values with configmaps"

9dbcb60

This reverts commit 4aeaec3.

Bump @rancher/shell - fix tracing and metrics controller app check

dae0ff1

jordojordo requested a review from kravciak November 4, 2024 19:04

jordojordo marked this pull request as ready for review November 4, 2024 19:05

jordojordo mentioned this pull request Nov 4, 2024

Bump @rancher/shell from 2.0.1 to 3.0.0 #943

Closed

kravciak mentioned this pull request Nov 5, 2024

[vue3] Enabled tracing &metrics are not detected #939

Closed

kravciak approved these changes Nov 5, 2024

View reviewed changes

aalves08 reviewed Nov 5, 2024

View reviewed changes

aalves08 approved these changes Nov 5, 2024

View reviewed changes

jordojordo merged commit 577004a into rancher:main Nov 5, 2024
1 check failed

jordojordo deleted the vue3 branch November 5, 2024 16:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor for Vue3 compliance #917

Refactor for Vue3 compliance #917

jordojordo commented Oct 9, 2024 •

edited

Loading

kravciak commented Oct 10, 2024

kravciak commented Oct 10, 2024

jordojordo commented Oct 10, 2024 •

edited

Loading

jordojordo commented Oct 11, 2024

kravciak commented Oct 16, 2024

jordojordo commented Oct 17, 2024

jordojordo commented Oct 17, 2024

kravciak left a comment

aalves08 Nov 5, 2024

jordojordo Nov 5, 2024

aalves08 Nov 5, 2024

aalves08 Nov 5, 2024

jordojordo Nov 5, 2024

aalves08 Nov 5, 2024

jordojordo Nov 5, 2024

aalves08 Nov 5, 2024

aalves08 left a comment

		@@ -1,4 +1,5 @@
		<script>
		import { defineAsyncComponent, toRaw } from 'vue';

Refactor for Vue3 compliance #917

Refactor for Vue3 compliance #917

Conversation

jordojordo commented Oct 9, 2024 • edited Loading

kravciak commented Oct 10, 2024

kravciak commented Oct 10, 2024

jordojordo commented Oct 10, 2024 • edited Loading

jordojordo commented Oct 11, 2024

kravciak commented Oct 16, 2024

jordojordo commented Oct 17, 2024

jordojordo commented Oct 17, 2024

kravciak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aalves08 left a comment

Choose a reason for hiding this comment

jordojordo commented Oct 9, 2024 •

edited

Loading

jordojordo commented Oct 10, 2024 •

edited

Loading