RUN-2221: Update webpack 4 to 5 #8968

smartinellibenedetti · 2024-02-29T18:14:42Z

Is this a bugfix, or an enhancement? Please describe.

List of enhancement/maintanance:

Update webpack 4 to 5;
Update packages related to vue-cli and jest;
Remove/fix/update imports that had issues - some were wrong, some aren't needed anymore;
Remove commands that were necessary only for webpack 4;
Small fixes (especially syntax) that would prevent builds or tests from running;

Describe the solution you've implemented

Followed the guide https://webpack.js.org/migrate/5/ and the following order for updating:

updated webpack > other npm packages > errors that would prevent the project from running/building locally > tests /imports/syntax errors

Checks performed:

ran final image with docker;
ran locally all commands used by the project;

How to test:

run this branch locally, firstly npm install then run project's core settings (can also do enterprise as well, but then please remember to run installUiTrellis first);
check for any missing files or errors in the UI;

Or test with a docker image;

Describe alternatives you've considered

In the past there have been efforts to move the FE to vite, but as it requires a bigger effort to move out from vue-cli+webpack to vite, updating webpack to the newest version was a compromise for improving build speed/security and also ensuring compatibility with new npm packages that require webpack 5.

Additional context

Added comments explaining what was done in this PR.

Also, it might be worth to consider to use other modes of devtools as it greatly improves build time (One run, which had other modes enabled had a performance gain of 40% https://app.circleci.com/pipelines/github/rundeck/rundeck/14735)

Final performance improvement on circle ci: 5%

rundeckapp/grails-spa/packages/ui-trellis/src/library/utilities/uivi18n.ts

…e hood

from prop mutation up to invalid v-model - the only hint that something was wrong was the message that vue was failing to compile the template

…ermissions

smartinellibenedetti · 2024-05-01T03:29:14Z

rundeckapp/grails-app/views/framework/_createProjectForm.gsp

@@ -82,7 +82,6 @@

    <asset:javascript src="framework/editProject.js"/>
    <asset:javascript src="static/pages/project-config.js" defer="defer" />
-    <asset:stylesheet href="static/css/pages/project-config.css" />


This file isn't being created, as the respective components do not have any css to be imported.

smartinellibenedetti · 2024-05-01T03:29:53Z

rundeckapp/grails-app/views/framework/adhoc.gsp

@@ -34,7 +34,7 @@
          kind: AuthConstants.TYPE_EVENT
  )}"/>

-    <asset:javascript src="static/css/pages/command.css"/>
+    <asset:stylesheet src="static/css/pages/command.css"/>


This was causing a 404 as the generated import had the wrong path and extension

smartinellibenedetti · 2024-05-01T03:30:11Z

rundeckapp/grails-app/views/framework/editProject.gsp

@@ -90,7 +90,6 @@
    <asset:javascript src="leavePageConfirm.js"/>
    <asset:javascript src="framework/editProject.js"/>
    <asset:javascript src="static/pages/project-config.js" defer="defer" />
-    <asset:stylesheet href="static/css/pages/project-config.css" />


This file isn't being created, as the respective components do not have any css to be imported.

smartinellibenedetti · 2024-05-01T03:30:45Z

rundeckapp/grails-app/views/menu/home.gsp

-	<!-- VUE CSS MODULES -->
-	<asset:stylesheet href="static/css/components/version-notification.css"/>
-	<!-- /VUE CSS MODULES -->


This file isn't being created. In fact the components in the folder version-notification do not seem to be used anywhere.

smartinellibenedetti · 2024-05-01T03:30:54Z

rundeckapp/grails-app/views/menu/home.gsp

 	<asset:javascript src="static/components/first-run.js"/>
-	<asset:javascript src="static/components/version-notification.js"/>


This file isn't being created. In fact the components in the folder version-notification do not seem to be used anywhere.

seems so, let's do a separate PR to remove that code since it isn't used

smartinellibenedetti · 2024-05-01T03:31:40Z

rundeckapp/grails-app/views/menu/home.gsp

@@ -462,9 +459,7 @@
 	</div>
 	<!-- VUE JS MODULES -->
 	<asset:stylesheet href="static/css/pages/home.css"/>
-	<asset:stylesheet href="static/css/components/first-run.css"/>


This file isn't being created, but the import isn't needed as the CSS required by its components is included in the chunk-common.css

smartinellibenedetti · 2024-05-01T03:31:51Z

rundeckapp/grails-app/views/menu/home.next.gsp

@@ -63,7 +63,6 @@
  <asset:javascript src="menu/home.js"/>

  <!-- VUE CSS MODULES -->
-  <asset:stylesheet href="static/css/components/version-notification.css"/>


This file isn't being created. In fact the components in the folder version-notification do not seem to be used anywhere.

smartinellibenedetti · 2024-05-01T03:32:40Z

rundeckapp/grails-app/views/menu/home.next.gsp

@@ -80,7 +79,7 @@
  <div id="layoutBody">
    <div class="vue-ui-socket">
      <g:set var="createProjectAllowed"
-             value="${auth.resourceAllowedTest(action: AuthConstants.ACTION_CREATE, type: AuthConstants.TYPE_PROJECT, context: AuthConstants.CTX_APPLICATION)}"/>
+             value="${auth.resourceAllowedTest(action: [AuthConstants.ACTION_CREATE], type: AuthConstants.TYPE_PROJECT, context: AuthConstants.CTX_APPLICATION, has:true)}"/>


home.next is behind a feature flag but noticed that this line wasn't 100% its equivalent in home.gsp

smartinellibenedetti · 2024-05-01T03:32:53Z

rundeckapp/grails-app/views/menu/home.next.gsp

@@ -104,7 +103,6 @@
  </div>
  <!-- VUE JS MODULES -->
  <asset:stylesheet href="static/css/pages/home.css"/>
-  <asset:javascript src="static/components/version-notification.js"/>


This file isn't being created. In fact the components in the folder version-notification do not seem to be used anywhere.

smartinellibenedetti · 2024-05-01T03:34:45Z

rundeckapp/grails-spa/packages/ui-trellis/.env.development

@@ -1,3 +1,3 @@
 VUE_APP_OUTPUT_DIR=../../../grails-app/assets/provided/static
-VUE_APP_DEVTOOL=eval-cheap-module-source-map
+VUE_APP_DEVTOOL=eval-cheap-source-map


eval-cheap-source-map has better performance than eval-cheap-module-source-map. Open to discussion if team would like to try faster modes:

https://webpack.js.org/configuration/devtool/#devtool

smartinellibenedetti · 2024-05-01T03:34:57Z

rundeckapp/grails-spa/packages/ui-trellis/jest.config.js

-  globals: {
-    "ts-jest": {
-      tsconfig: "tsconfig.app.json",
-    },
-  },


outdated format

smartinellibenedetti · 2024-05-01T03:35:57Z

rundeckapp/grails-spa/packages/ui-trellis/package.json

-    "dev": "export NODE_OPTIONS=--openssl-legacy-provider && VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.app.js ./node_modules/.bin/vue-cli-service build --mode development --watch && tsc -p ./tsconfig.app.json && VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.library.js ./node_modules/.bin/vue-cli-service build --mode development --watch",
+    "dev": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.app.js ./node_modules/.bin/vue-cli-service build --mode development --watch && tsc -p ./tsconfig.app.json && VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.library.js ./node_modules/.bin/vue-cli-service build --mode development --watch",


export NODE_OPTIONS=--openssl-legacy-provider with the update this flag isn't necessary anymore

smartinellibenedetti · 2024-05-01T03:36:58Z

rundeckapp/grails-spa/packages/ui-trellis/src/app/components/home/tests/HomeCardList.spec.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, VueWrapper } from "@vue/test-utils";


IIRC correctly, these changes (both in HomeCardList and HomeView) were merged to main with another PR, but somehow when I applied the rebase they ended up becoming a separate commit.

smartinellibenedetti · 2024-05-01T03:38:22Z

rundeckapp/grails-spa/packages/ui-trellis/src/library/components/plugins/pluginPropView.vue

-          value === 'true' ||
-          value === true ||
-          (prop.defaultValue === 'true' &&
-            (value === 'false' || value === false))
+          innerValue === 'true' ||
+          (prop.defaultValue === 'true' && innerValue === 'false')


Fixed vue issues. I didn't add tests to limit the scope of the PR.

smartinellibenedetti · 2024-05-01T04:08:21Z

rundeckapp/grails-spa/packages/ui-trellis/vue.config.library.js

    };
-    config.output.library = "rundeckUiTrellis";


Removed as libraryTarget with value of commonjs2 doesn't work with library property

gschueler

LGTM, did a spot check on a variety of the pages that might have been affected, but they all look good

smartinellibenedetti commented Feb 29, 2024

View reviewed changes

rundeckapp/grails-spa/packages/ui-trellis/src/library/utilities/uivi18n.ts Outdated Show resolved Hide resolved

smartinellibenedetti mentioned this pull request Apr 2, 2024

[HACKWEEK] Update storybook and style components to match continuum #9040

Draft

7 tasks

smartinellibenedetti force-pushed the enh-webpack branch from 20dbb2d to ee370c9 Compare April 18, 2024 19:48

smartinellibenedetti added 6 commits April 26, 2024 14:11

initial stab

3421c27

create legacy file and fix logic on index.gsp

e2b1b4a

remove duplicated vueloaderplugin as vue-cli-service adds it under th…

9383d3d

…e hood

test

4c437f7

apply tests file

af0de23

update package-lock after rebase

6bba243

smartinellibenedetti force-pushed the enh-webpack branch from 3af4d6b to 6bba243 Compare April 26, 2024 21:07

smartinellibenedetti added 8 commits April 26, 2024 15:09

undo addition

9eedee8

remove duplicate

014a172

new package lock

99912f5

add webpack to overrides (temporary)

64e03eb

I do not understand how compiler never complained about this file

b6e084b

from prop mutation up to invalid v-model - the only hint that something was wrong was the message that vue was failing to compile the template

update vue, jest, typescript and fix jest config

cc68de2

remove unnecessary css entries and delete uivi18n file

04a6823

remove openssl legacy provider

96ec8ec

smartinellibenedetti changed the title ~~Spike to update webpack 4 to 5~~ RUN-2211: Update webpack 4 to 5 Apr 29, 2024

smartinellibenedetti added 6 commits April 29, 2024 10:39

clean up and fix file import

777589d

small fix

7e43721

remove compiler-sfc as it is now included as dependency from vue

6fb3536

to not lose

7b06c08

update package-manager to webpack 5 as well, and add a small fix on p…

cc6a1ca

…ermissions

go back to what devtool originally was

9d19566

smartinellibenedetti commented May 1, 2024

View reviewed changes

smartinellibenedetti added this to the 5.3.0 milestone May 1, 2024

smartinellibenedetti marked this pull request as ready for review May 1, 2024 03:46

smartinellibenedetti changed the title ~~RUN-2211: Update webpack 4 to 5~~ RUN-2221: Update webpack 4 to 5 May 1, 2024

smartinellibenedetti commented May 1, 2024

View reviewed changes

gschueler approved these changes May 3, 2024

View reviewed changes

smartinellibenedetti modified the milestones: 5.3.0, 5.4.0 May 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RUN-2221: Update webpack 4 to 5 #8968

RUN-2221: Update webpack 4 to 5 #8968

smartinellibenedetti commented Feb 29, 2024 •

edited

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

gschueler May 3, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

smartinellibenedetti May 1, 2024

gschueler left a comment

		<asset:javascript src="static/components/first-run.js"/>
		<asset:javascript src="static/components/version-notification.js"/>

		"dev": "export NODE_OPTIONS=--openssl-legacy-provider && VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.app.js ./node_modules/.bin/vue-cli-service build --mode development --watch && tsc -p ./tsconfig.app.json && VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.library.js ./node_modules/.bin/vue-cli-service build --mode development --watch",
		"dev": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.app.js ./node_modules/.bin/vue-cli-service build --mode development --watch && tsc -p ./tsconfig.app.json && VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.library.js ./node_modules/.bin/vue-cli-service build --mode development --watch",

		@@ -1,4 +1,4 @@
		import { shallowMount } from "@vue/test-utils";
		import { shallowMount, VueWrapper } from "@vue/test-utils";

RUN-2221: Update webpack 4 to 5 #8968

Are you sure you want to change the base?

RUN-2221: Update webpack 4 to 5 #8968

Conversation

smartinellibenedetti commented Feb 29, 2024 • edited

Is this a bugfix, or an enhancement? Please describe.

Describe the solution you've implemented

How to test:

Describe alternatives you've considered

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

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

gschueler left a comment

Choose a reason for hiding this comment

smartinellibenedetti commented Feb 29, 2024 •

edited