chore: vite cjs deprecation (#944)

Author: AnatoleAM

package.json

@@ -7,19 +7,19 @@
 	"dev_version": "1.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
-		"build:section:app": "vite build --config vite.config.ts",
-		"build:section:background": "vite build --config vite.config.background.ts",
-		"build:section:content": "vite build --config vite.config.content.ts",
-		"build:section:worker": "vite build -c vite.config.worker.ts",
-		"build-hosted:section:worker": "vite build --config vite.config.worker.ts",
-		"build-hosted:section:site": "vite build --config vite.config.hosted.ts",
+		"build:section:app": "vite build --config vite.config.mts",
+		"build:section:background": "vite build --config vite.config.background.mts",
+		"build:section:content": "vite build --config vite.config.content.mts",
+		"build:section:worker": "vite build -c vite.config.worker.mts",
+		"build-hosted:section:worker": "vite build --config vite.config.worker.mts",
+		"build-hosted:section:site": "vite build --config vite.config.hosted.mts",
 		"build:dev": "NODE_ENV=dev run-s build:section:*",
 		"build:prod": "NODE_ENV=production vue-tsc --noEmit && run-s build:section:*",
 		"build-hosted:dev": "NODE_ENV=dev run-s build-hosted:section:*",
 		"build-hosted:prod": "NODE_ENV=production vue-tsc --noEmit && run-s build-hosted:section:*",
-		"watch:section:background": "vite build --config vite.config.background.ts --watch",
-		"watch:section:content": "vite build --config vite.config.content.ts --watch",
-		"watch:section:worker": "vite build --config vite.config.worker.ts --watch",
+		"watch:section:background": "vite build --config vite.config.background.mts --watch",
+		"watch:section:content": "vite build --config vite.config.content.mts --watch",
+		"watch:section:worker": "vite build --config vite.config.worker.mts --watch",
 		"watch": "NODE_ENV=dev run-p watch:section:*",
 		"format": "prettier -w .",
 		"lint:style": "stylelint **/*.{vue,scss,css} --ignore-path .gitignore",

src/app/options/Options.vue

@@ -86,8 +86,8 @@ body[data-seventv-app] {
 
 .seventv-options {
 	height: 100%;
+	width: 100%;
 	background: var(--seventv-background-shade-1);
-	width: max-content;
 
 	&.no-header {
 		background: none;

src/app/options/router/router.ts

@@ -1,5 +1,4 @@
 import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
-import Onboarding from "../views/Onboarding/Onboarding.vue";
 
 const routes = [
 	{
@@ -9,7 +8,7 @@ const routes = [
 			{
 				path: "onboarding/:step?",
 				name: "Onboarding",
-				component: Onboarding,
+				component: () => import("../views/Onboarding/Onboarding.vue"),
 			},
 		],
 	},

tsconfig.node.json

@@ -8,10 +8,10 @@
 	},
 	"include": [
 		"vite.utils.ts",
-		"vite.config.ts",
-		"vite.config.worker.ts",
-		"vite.config.background.ts",
-		"vite.config.content.ts",
+		"vite.config.mts",
+		"vite.config.worker.mts",
+		"vite.config.background.mts",
+		"vite.config.content.mts",
 		"manifest.config.ts",
 		"package.json"
 	]