feat: upgrade to vite@4

package.json

@@ -47,7 +47,7 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "clean-css": "^5.3.2",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
@@ -64,7 +64,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "typescript": "^5.0.2",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^3.2.5",
+    "vite": "^4.2.1",
     "vite-plugin-monkey": "^3.1.0",
     "vue-tsc": "^1.2.0",
     "yorkie": "^2.0.0"

src/utils/file.tsx

@@ -1,3 +1,5 @@
+import jsx from '@/utils/jsx';
+
 const readFile = (file: File): Promise<ArrayBuffer> =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();

src/utils/ignoreController.tsx

@@ -1,3 +1,5 @@
+import jsx from '@/utils/jsx';
+
 export class IgnoreController {
   public ignoreBtn: HTMLElement;
   private readonly icon: HTMLElement;

src/utils/initPage/detail.tsx

@@ -14,6 +14,7 @@ import { getGalleryInfo } from '../nhentai';
 import { ProgressDisplayController } from '../progressController';
 import { settings } from '../settings';
 import { IgnoreController } from '../ignoreController';
+import jsx from '@/utils/jsx';
 
 export const initDetailPage = async (): Promise<void> => {
   const progressDisplayController = new ProgressDisplayController(true, document.title);

src/utils/initPage/onlineView.tsx

@@ -1,6 +1,7 @@
 import { GM_getValue, GM_setValue } from '$';
 import $ from 'jquery';
 import { StyleInjector } from '../styleInjector';
+import jsx from '@/utils/jsx';
 import { IS_NHENTAI } from '@/const';
 
 export const initOnlineViewPage = (): void => {

src/utils/jsx.ts

@@ -2,7 +2,7 @@
 // MIT License - Copyright (c) Kartik Nair
 import { camelCase, kebabCase } from 'lodash-es';
 
-export const createElement = (
+const createElement = (
   tag: string | Function,
   props?: Record<string, any>,
   ...children: Array<CastArray<HTMLElement | string>>
@@ -36,9 +36,11 @@ const appendChild = (parent: HTMLElement, child: HTMLElement | string): void =>
   parent.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
 };
 
-export const Fragment = (
+const Fragment = (
   props: any,
   ...children: Array<HTMLElement | string>
 ): Array<HTMLElement | string> => {
   return children;
 };
+
+export default { createElement, Fragment };

src/utils/langFilter.tsx

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import jsx from '@/utils/jsx';
 import { IS_NHENTAI_TO } from '@/const';
 
 export const createLangFilter = (): HTMLSelectElement => {

src/utils/progressController.tsx

@@ -1,4 +1,5 @@
 import { getDownloadExt } from './common';
+import jsx from '@/utils/jsx';
 import type { MangaDownloadInfo } from '@/typings';
 
 export class ProgressDisplayController {

src/utils/styleInjector.tsx

@@ -1,3 +1,5 @@
+import jsx from '@/utils/jsx';
+
 export class StyleInjector {
   private readonly styleNode: HTMLElement;
 

tsconfig.json

@@ -6,7 +6,7 @@
     "moduleResolution": "Node",
     "useDefineForClassFields": true,
     "strict": true,
-    "jsx": "preserve",
+    "jsx": "react",
     "jsxFactory": "jsx.createElement",
     "jsxFragmentFactory": "jsx.Fragment",
     "sourceMap": true,

vite.config.ts

@@ -6,7 +6,6 @@ import copy from 'rollup-plugin-copy';
 import components from 'unplugin-vue-components/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 import workerDevLoader from './plugins/workerDevLoader';
-import tsx from './plugins/tsx';
 
 // https://vitejs.dev/config/
 export default defineConfig(async ({ mode }) => ({
@@ -17,7 +16,6 @@ export default defineConfig(async ({ mode }) => ({
   },
   plugins: [
     workerDevLoader(),
-    tsx(),
     vue(),
     components({
       dts: false,