Convert to ESM

.eslintignore

@@ -1,2 +1,2 @@
-.eslintrc.js
+.eslintrc.cjs
 src/lib/graphql/generated

package.json

@@ -2,6 +2,7 @@
   "name": "project",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "ci": "yarn install --frozen-lockfile",
     "dev": "vite",
@@ -11,15 +12,15 @@
     "build-md5": "find build -type f | sort | xargs md5sum | awk '{ print $1 }' | tr -d '\n' | md5sum| awk '{ print $1 }' > buildZip/md5sum ",
     "build-zip": "cd build && rev=$(git rev-list HEAD --count) && echo r$rev > revision && zip -9 -r ../buildZip/Suwayomi-WebUI-r$rev *",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx --max-warnings=0 --cache",
-    "createChangelog": "ts-node -T tools/scripts/createReleaseChangelog.ts",
+    "createChangelog": "node --loader ts-node/esm tools/scripts/createReleaseChangelog.ts",
-    "createTranslationChangelog": "ts-node -T -r tsconfig-paths/register tools/scripts/createTranslationChangelog.ts",
+    "createTranslationChangelog": "node --loader ts-node/esm -r tsconfig-paths/register tools/scripts/createTranslationChangelog.ts",
-    "updateDeps": "ts-node -T tools/scripts/updateDependencies.ts",
+    "updateDeps": "node --loader ts-node/esm tools/scripts/updateDependencies.ts",
     "gql:codegen-base": "graphql-codegen --config gql_codegen.ts",
-    "gql:codegen-formatter": "ts-node -T tools/scripts/codegenFormatter.ts",
+    "gql:codegen-formatter": "node --loader ts-node/esm tools/scripts/codegenFormatter.ts",
     "gql:codegen": "yarn gql:codegen-base & yarn gql:codegen-formatter",
-    "i18n:gen-resources": "ts-node -T tools/scripts/generatei18nResources.ts",
+    "i18n:gen-resources": "node --loader ts-node/esm tools/scripts/generatei18nResources.ts",
-    "dayjs:gen-locales-array": "ts-node -T tools/scripts/generateDayJsLocales.ts",
+    "dayjs:gen-locales-array": "node --loader ts-node/esm tools/scripts/generateDayJsLocales.ts",
-    "dayjs:gen-locales-import": "ts-node -T tools/scripts/generateDayJsLocalesImport.ts",
+    "dayjs:gen-locales-import": "node --loader ts-node/esm tools/scripts/generateDayJsLocalesImport.ts",
     "dayjs:gen-locales": "yarn dayjs:gen-locales-array && yarn dayjs:gen-locales-import",
     "prepare": "husky"
   },

tools/scripts/codegenFormatter.ts

@@ -12,7 +12,7 @@ import * as path from 'path';
 const format = (source: string, regex: RegExp | string, replaceValue: string): string =>
     source.replace(regex, replaceValue);
 
-let generatedGraphQLFilePath = path.resolve(__dirname, '../../src/lib/graphql/generated/graphql.ts');
+let generatedGraphQLFilePath = path.resolve(import.meta.dirname, '../../src/lib/graphql/generated/graphql.ts');
 let generatedGraphQLFile = fs.readFileSync(generatedGraphQLFilePath, 'utf8');
 
 // add logic to format the codegen generated graphql file
@@ -33,7 +33,7 @@ fs.writeFileSync(generatedGraphQLFilePath, fixSubscriptionHookNameSuffix);
 /*                                            */
 /* ****************************************** */
 
-generatedGraphQLFilePath = path.resolve(__dirname, '../../src/lib/graphql/generated/apollo-helpers.ts');
+generatedGraphQLFilePath = path.resolve(import.meta.dirname, '../../src/lib/graphql/generated/apollo-helpers.ts');
 generatedGraphQLFile = fs.readFileSync(generatedGraphQLFilePath, 'utf8');
 
 const addImports = format(

tools/scripts/createTranslationChangelog.ts

@@ -284,7 +284,7 @@ const getContributorsForRange = async (url: string, authToken: string): Promise<
 const getLanguageLinesFromChangelog = (): Promise<string[]> => {
     const fileReadPromise = new ControlledPromise<string[]>();
 
-    const changelogFile = path.resolve(__dirname, '../../CHANGELOG.md');
+    const changelogFile = path.resolve(import.meta.dirname, '../../CHANGELOG.md');
     const fileStream = fs.createReadStream(changelogFile);
     const fileLineReader = readline.createInterface({
         input: fileStream,

tools/scripts/generateDayJsLocales.ts

@@ -9,8 +9,8 @@
 import path from 'path';
 import fs from 'fs';
 
-const outputFilePath = path.join(__dirname, '../../src/lib/dayjs/Locales.ts');
+const outputFilePath = path.join(import.meta.dirname, '../../src/lib/dayjs/Locales.ts');
-const resourcesDirPath = path.join(__dirname, '../../node_modules/dayjs/locale');
+const resourcesDirPath = path.join(import.meta.dirname, '../../node_modules/dayjs/locale');
 
 const dayjsLocaleFileNames = fs.readdirSync(resourcesDirPath);
 

tools/scripts/generateDayJsLocalesImport.ts

@@ -9,8 +9,8 @@
 import path from 'path';
 import fs from 'fs';
 
-const outputFilePath = path.join(__dirname, '../../src/lib/dayjs/LocaleImporter.ts');
+const outputFilePath = path.join(import.meta.dirname, '../../src/lib/dayjs/LocaleImporter.ts');
-const resourcesDirPath = path.join(__dirname, '../../node_modules/dayjs/locale');
+const resourcesDirPath = path.join(import.meta.dirname, '../../node_modules/dayjs/locale');
 
 const dayjsLocaleFileNames = fs.readdirSync(resourcesDirPath);
 

tools/scripts/generatei18nResources.ts

@@ -9,8 +9,8 @@
 import path from 'path';
 import fs from 'fs';
 
-const outputFilePath = path.join(__dirname, '../../src/i18n/index.ts');
+const outputFilePath = path.join(import.meta.dirname, '../../src/i18n/index.ts');
-const resourcesDirPath = path.join(__dirname, '../../public/locales');
+const resourcesDirPath = path.join(import.meta.dirname, '../../public/locales');
 
 const resourceFileNames = fs.readdirSync(resourcesDirPath);
 

tools/scripts/tsconfig.json

@@ -6,11 +6,5 @@
   "compilerOptions": {
     "moduleResolution": "node"
   },
-  "ts-node": {
+  "ts-node": {}
-    // these options are overrides used only by ts-node
-    // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
-    "compilerOptions": {
-      "module": "commonjs"
-    }
-  }
 }

vite.config.ts

@@ -14,8 +14,6 @@ import react from '@vitejs/plugin-react-swc';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 import legacy from '@vitejs/plugin-legacy';
 
-// TODO - switch to ESM - with Vite v5.x the CJS build is deprecated (https://vitejs.dev/guide/migration)
-
 // eslint-disable-next-line import/no-default-export
 export default defineConfig(() => ({
     build: {
@@ -26,7 +24,7 @@ export default defineConfig(() => ({
     },
     resolve: {
         alias: {
-            '@': path.resolve(__dirname, './src'),
+            '@': path.resolve(import.meta.dirname, './src'),
         },
     },
     optimizeDeps: {