Upgrade vue-cli to version 5 (#594)

* Upgrade to Vue CLI 5 (fails to compile)

* Upgrade versions with last few weeks of changes

* Updated to fork-ts-checker-webpack-plugin 7.2.3

* Remove package.json overrides in lieu of the fixed fork-ts-checker-webpack-plugin@6.5.1

* Fix svg importing

* Comments

* For debugging only: added infrastructureLogging to vue.config.js

* Now works on Windows, waiting on fork-ts-checker-webpack-plugin backport if possible

* Switch to the fixed fork-ts-checker-webpack-plugin@6.5.2

* Fix license checker build compilation

Co-authored-by: 0hypercube <0hypercube@gmail.com>

frontend/.eslintrc.js

@@ -68,11 +68,10 @@ module.exports = {
 		"no-restricted-imports": ["error", { patterns: [".*", "!@/*"] }],
 
 		// TypeScript plugin config
-		"@typescript-eslint/indent": ["error", "tab", { SwitchCase: 1 }],
+		"@typescript-eslint/indent": "off",
 		"@typescript-eslint/camelcase": "off",
 		"@typescript-eslint/no-use-before-define": "off",
 		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
-		"@typescript-eslint/no-loss-of-precision": "off", // TODO: Remove this line after upgrading to eslint 7.1 or greater
 		"@typescript-eslint/explicit-function-return-type": ["error"],
 
 		// Import plugin config (used to intelligently validate module import statements)
@@ -134,6 +133,10 @@ module.exports = {
 
 		// Vue plugin config (used to validate Vue single-file components)
 		"vue/multi-word-component-names": "off",
+
+		"vuejs-accessibility/form-control-has-label": "off",
+		"vuejs-accessibility/label-has-for": "off",
+		"vuejs-accessibility/click-events-have-key-events": "off",
 	},
 	overrides: [
 		{

frontend/package.json

@@ -3,11 +3,11 @@
 	"description": "Graphite's web app frontend. Planned to be replaced by a native GUI written in Rust in the future.",
 	"private": true,
 	"scripts": {
-		"start": "vue-cli-service serve || (npm install && vue-cli-service serve)",
-		"serve": "vue-cli-service serve || (npm install && vue-cli-service serve)",
-		"build": "vue-cli-service build || (npm install && vue-cli-service build)",
-		"lint": "vue-cli-service lint || echo There were lint errors. If the linter execution fails, try running `npm install` first.",
-		"lint-no-fix": "vue-cli-service lint --no-fix || echo There were lint errors. Please run `npm run lint` to fix auto-them. If the linter execution fails, try running `npm install` first."
+		"start": "vue-cli-service serve",
+		"serve": "vue-cli-service serve || echo 'Graphite project failed to build. Did you remember to `npm install` the dependencies?'",
+		"build": "vue-cli-service build || echo 'Graphite project failed to build. Did you remember to `npm install` the dependencies?'",
+		"lint": "vue-cli-service lint || echo 'Graphite project had lint errors or otherwise failed. In the latter case, did you remember to `npm install` the dependencies?'",
+		"lint-no-fix": "vue-cli-service lint --no-fix || echo 'Graphite project had lint errors or otherwise failed. In the latter case, did you remember to `npm install` the dependencies?'"
 	},
 	"repository": {
 		"type": "git",
@@ -22,30 +22,30 @@
 		"vue": "^3.2.26"
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^5.7.0",
-		"@typescript-eslint/parser": "^5.7.0",
-		"@vue/cli-plugin-eslint": "^4.5.15",
-		"@vue/cli-plugin-typescript": "^4.5.15",
-		"@vue/cli-service": "^4.5.15",
-		"@vue/compiler-sfc": "^3.2.26",
-		"@vue/eslint-config-airbnb": "^5.3.0",
-		"@vue/eslint-config-typescript": "^9.1.0",
+		"@typescript-eslint/eslint-plugin": "^5.20.0",
+		"@typescript-eslint/parser": "^5.20.0",
+		"@vue/cli-plugin-eslint": "^5.0.4",
+		"@vue/cli-plugin-typescript": "^5.0.4",
+		"@vue/cli-service": "^5.0.4",
+		"@vue/compiler-sfc": "^3.2.31",
+		"@vue/eslint-config-airbnb": "^6.0.0",
+		"@vue/eslint-config-typescript": "^10.0.0",
 		"@wasm-tool/wasm-pack-plugin": "^1.6.0",
-		"eslint": "^6.8.0",
-		"eslint-config-prettier": "^6.15.0",
-		"eslint-plugin-import": "^2.25.2",
+		"eslint": "^8.14.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-import": "^2.25.4",
 		"eslint-plugin-prettier-vue": "^3.1.0",
-		"eslint-plugin-vue": "^8.2.0",
+		"eslint-plugin-vue": "^8.7.1",
 		"license-checker-webpack-plugin": "^0.2.1",
-		"prettier": "^2.5.1",
-		"sass": "^1.45.0",
-		"sass-loader": "^10.2.0",
-		"typescript": "^4.5.4",
-		"vue-loader": "^16.8.3",
+		"prettier": "^2.6.1",
+		"sass": "^1.50.1",
+		"sass-loader": "^12.6.0",
+		"typescript": "^4.6.3",
+		"vue-loader": "^17.0.0",
 		"vue-template-compiler": "^2.6.14"
 	},
 	"optionalDependencies": {
 		"wasm-pack": "0.10.1"
 	},
-	"//": "@vue/cli-plugin-eslint 4.5.x does not support eslint 7.x or higher. sass-loader 10.x is the last version to support webpack 4. wasm-pack 0.10.2 is broken on Windows so it should remain pinned to 0.10.1 until a fix is released."
+	"//": "wasm-pack 0.10.2 is broken on Windows so it should remain pinned to 0.10.1 until a fix is released (https://github.com/rustwasm/wasm-pack/issues/1097)."
 }

frontend/src/components/widgets/WidgetLayout.vue

@@ -35,12 +35,10 @@ export default defineComponent({
 			throw new Error("Layout row type does not exist");
 		},
 	},
-	data: () => {
-		return {
+	data: () => ({
 		isWidgetRow,
 		isWidgetSection,
-		};
-	},
+	}),
 	components: {
 		WidgetRow,
 		WidgetSection,

frontend/src/components/widgets/WidgetSection.vue

@@ -84,13 +84,11 @@ const WidgetSection = defineComponent({
 		widgetData: { type: Object as PropType<WidgetSectionFromJsMessages>, required: true },
 		layoutTarget: { required: true },
 	},
-	data: () => {
-		return {
+	data: () => ({
 		isWidgetRow,
 		isWidgetSection,
 		expanded: true,
-		};
-	},
+	}),
 	methods: {
 		updateLayout(widgetId: BigInt, value: unknown) {
 			this.editor.instance.update_layout(this.layoutTarget, widgetId, value);

frontend/src/dispatcher/js-dispatcher.ts

@@ -34,9 +34,7 @@ export function createJsDispatcher() {
 		// Messages with empty data are provided by wasm-bindgen as a string with the message name, like: "NameOfThisMessage"
 		const unwrappedMessageData = messageData[messageType] || {};
 
-		const isJsMessageConstructor = (fn: typeof messageConstructor): fn is typeof JsMessage => {
-			return "jsMessageMarker" in fn;
-		};
+		const isJsMessageConstructor = (fn: typeof messageConstructor): fn is typeof JsMessage => "jsMessageMarker" in fn;
 		let message: JsMessage;
 		if (isJsMessageConstructor(messageConstructor)) {
 			message = plainToInstance(messageConstructor, unwrappedMessageData);

frontend/src/state/dialog.ts

@@ -36,9 +36,7 @@ export function createDialogState(editor: EditorState) {
 		}
 	};
 
-	const dialogIsVisible = (): boolean => {
-		return state.visible;
-	};
+	const dialogIsVisible = (): boolean => state.visible;
 
 	const comingSoon = (issueNumber?: number): void => {
 		const bugMessage = `— but you can help add it!\nSee issue #${issueNumber} on GitHub.`;

frontend/vue.config.js

@@ -75,6 +75,8 @@ module.exports = {
 						emitError: true,
 						outputFilename: "third-party-licenses.txt",
 						outputWriter: formatThirdPartyLicenses,
+						// Workaround for failure caused in WebPack 5: https://github.com/microsoft/license-checker-webpack-plugin/issues/25#issuecomment-833325799
+						filter: /(^.*[/\\]node_modules[/\\]((?:@[^/\\]+[/\\])?(?:[^@/\\][^/\\]*)))/,
 					})
 			);
 
@@ -85,6 +87,9 @@ module.exports = {
 			.rule("svg")
 			.uses.clear()
 			.end()
+			// Required (since upgrading vue-cli to v5) to stop the default import behavior, as documented in:
+			// https://webpack.js.org/configuration/module/#ruletype
+			.type("javascript/auto")
 			// Add vue-loader as a loader for Vue single-file components
 			// https://www.npmjs.com/package/vue-loader
 			.use("vue-loader")
@@ -96,6 +101,11 @@ module.exports = {
 			.loader("./vue-svg-loader")
 			.end();
 	},
+	configureWebpack: {
+		experiments: {
+			asyncWebAssembly: true,
+		},
+	},
 };
 
 function formatThirdPartyLicenses(jsLicenses) {