From 524aeeb9dc7a4c990cd21df8320cd9341592ecf0 Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Tue, 17 Dec 2024 05:38:08 +1100
Subject: [PATCH] Convert repo from CommonJS to ES Modules (#491)

* Convert package from CommonJS to ES Modules

Revert conversion of preload to esm
- Fixes preload script loading issues
- Electron has better support for CommonJS in preload scripts

* Fix CommonJS files treated as ESM

* Convert CommonJS scripts to ES modules

* Fix type errors - missing node.js types

* Remove unnecessary type assertions

* Fix broken imports

* Rename CommonJS build / test scripts to .cjs

* Fix playwright using cjs require

* Fix UV download script - ESM conversion error
---
 builder-debug.config.ts                       |  2 +-
 jest.config.js => jest.config.cjs             |  0
 package.json                                  |  9 +++++----
 playwright.config.ts                          |  2 +-
 scripts/downloadFrontend.js                   | 12 ++++++-----
 scripts/downloadUV.js                         | 18 +++++++++--------
 scripts/getPackage.js                         |  7 +++++++
 scripts/launchdev.js                          |  6 +++---
 scripts/makeComfy.js                          |  8 ++++----
 scripts/{preMake.js => preMake.cjs}           |  0
 scripts/prepareTypes.js                       | 10 ++++------
 scripts/releaseTypes.js                       |  4 ++--
 scripts/resetInstall.js                       | 10 +++++-----
 .../todesktop/{afterPack.js => afterPack.cjs} |  0
 .../{beforeInstall.js => beforeInstall.cjs}   |  0
 scripts/updateFrontend.js                     |  4 ++--
 src/main-process/appWindow.ts                 |  2 +-
 tsconfig.json                                 |  2 +-
 vite.main.config.ts                           |  6 ++----
 vite.preload.config.ts                        |  6 +++---
 yarn.lock                                     | 20 +++++++++++++++++--
 21 files changed, 76 insertions(+), 52 deletions(-)
 rename jest.config.js => jest.config.cjs (100%)
 create mode 100644 scripts/getPackage.js
 rename scripts/{preMake.js => preMake.cjs} (100%)
 rename scripts/todesktop/{afterPack.js => afterPack.cjs} (100%)
 rename scripts/todesktop/{beforeInstall.js => beforeInstall.cjs} (100%)

diff --git a/builder-debug.config.ts b/builder-debug.config.ts
index 777d31c8..17f68322 100644
--- a/builder-debug.config.ts
+++ b/builder-debug.config.ts
@@ -8,7 +8,7 @@ const debugConfig: Configuration = {
     { from: './assets/uv/uvx', to: 'uv/uvx' },
     { from: './assets/UI', to: 'UI' },
   ],
-  beforeBuild: './scripts/preMake.js',
+  beforeBuild: './scripts/preMake.cjs',
   win: {
     icon: './assets/UI/Comfy_Logo.ico',
     target: 'zip',
diff --git a/jest.config.js b/jest.config.cjs
similarity index 100%
rename from jest.config.js
rename to jest.config.cjs
diff --git a/package.json b/package.json
index 1cc151e2..bc3569dc 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   "description": "The best modular GUI to run AI diffusion models.",
   "main": ".vite/build/main.js",
   "packageManager": "yarn@4.5.0",
+  "type": "module",
   "config": {
     "frontendVersion": "1.5.14",
     "comfyVersion": "0.3.7",
@@ -42,10 +43,10 @@
     "sign": "node debug/sign.js",
     "start": "node ./scripts/launchdev.js",
     "test:e2e": "npx playwright test",
-    "test:unit": "jest --config jest.config.js",
+    "test:unit": "jest --config jest.config.cjs",
     "test:update-snapshots": "npx playwright test --update-snapshots",
-    "todesktop:afterPack": "./scripts/todesktop/afterPack.js",
-    "todesktop:beforeInstall": "./scripts/todesktop/beforeInstall.js",
+    "todesktop:afterPack": "./scripts/todesktop/afterPack.cjs",
+    "todesktop:beforeInstall": "./scripts/todesktop/beforeInstall.cjs",
     "typescript": "yarn run tsc",
     "vite:compile": "vite build --config vite.main.config.ts && vite build --config vite.preload.config.ts",
     "vite:types": "vite build --config vite.types.config.ts && node scripts/prepareTypes.js",
@@ -63,7 +64,7 @@
     "@types/adm-zip": "^0.5.5",
     "@types/electron-squirrel-startup": "^1.0.2",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.5.0",
+    "@types/node": "^22.10.2",
     "@types/tar": "6.1.13",
     "@types/wait-on": "^5.3.4",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
diff --git a/playwright.config.ts b/playwright.config.ts
index 56d275bf..c07c405f 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -3,5 +3,5 @@ import { defineConfig } from '@playwright/test';
 export default defineConfig({
   testDir: './tests/integration',
   /* Run local instance before starting the tests */
-  globalSetup: require.resolve('./playwright.setup'),
+  globalSetup: './playwright.setup',
 });
diff --git a/scripts/downloadFrontend.js b/scripts/downloadFrontend.js
index faffb9ef..ff415b09 100644
--- a/scripts/downloadFrontend.js
+++ b/scripts/downloadFrontend.js
@@ -1,10 +1,12 @@
-const axios = require('axios');
-const extract = require('extract-zip');
-const fs = require('fs/promises');
-const path = require('path');
+import axios from 'axios'
+import extract from 'extract-zip'
+import fs from 'fs/promises'
+import path from 'path'
+
+import packageJson from './getPackage.js'
 
 // Example "v1.3.34"
-const version = process.argv[2] || require('../package.json').config.frontendVersion;
+const version = process.argv[2] || packageJson.config.frontendVersion;
 if (!version) {
     console.error('No version specified');
     process.exit(1);
diff --git a/scripts/downloadUV.js b/scripts/downloadUV.js
index 42db97e3..9c72a2e1 100644
--- a/scripts/downloadUV.js
+++ b/scripts/downloadUV.js
@@ -1,10 +1,12 @@
-const path = require("path");
-const os = require('os');
-const fs = require('fs-extra');
-const axios = require('axios');
-const tar = require('tar');
-const extractZip = require('extract-zip');
-const uvVer = require('../package.json').config.uvVersion;
+import path from "path"
+import os from 'os'
+import fs from 'fs-extra'
+import axios from 'axios'
+import * as tar from 'tar'
+import extractZip from 'extract-zip'
+import packageJson from './getPackage.js'
+
+const uvVer = packageJson.config.uvVersion;
 
 const options = {
     win32: {
@@ -80,4 +82,4 @@ async function downloadAndExtract(baseURL, options) {
 }
 
 //** Download and Extract UV. Default uses OS.Platfrom. Add 'all' will download all. Add 'none' will skip */
-downloadUV();
+await downloadUV();
diff --git a/scripts/getPackage.js b/scripts/getPackage.js
new file mode 100644
index 00000000..be959dde
--- /dev/null
+++ b/scripts/getPackage.js
@@ -0,0 +1,7 @@
+// Read the main package.json
+import { createRequire } from "module";
+
+/** @type {import('../package.json')} */
+const packageJson = createRequire(import.meta.url)("../package.json");
+
+export default packageJson;
diff --git a/scripts/launchdev.js b/scripts/launchdev.js
index 8850afbd..77832307 100644
--- a/scripts/launchdev.js
+++ b/scripts/launchdev.js
@@ -1,6 +1,6 @@
-const {build} =  require('vite');
-const electronPath = require('electron');
-const {spawn} = require('child_process');
+import { build } from 'vite'
+import electronPath from 'electron'
+import { spawn } from 'child_process'
 
 /** @type 'production' | 'development'' */
 const mode = (process.env.MODE = process.env.MODE || 'development')
diff --git a/scripts/makeComfy.js b/scripts/makeComfy.js
index e747e11e..4d3fde00 100644
--- a/scripts/makeComfy.js
+++ b/scripts/makeComfy.js
@@ -1,6 +1,6 @@
-const { execSync } = require('child_process');
-const pkg = require('../package.json');
-const fs = require('fs');
+import * as child_process from 'child_process'
+import pkg from './getPackage.js'
+import fs from 'fs'
 
 function makeAssets(gpuFlag) {
   const baseCommand = [
@@ -17,7 +17,7 @@ function makeAssets(gpuFlag) {
   ].join(' ');
 
   try {
-    execSync(baseCommand, { stdio: 'inherit' });
+    child_process.execSync(baseCommand, { stdio: 'inherit' });
   } catch (error) {
     console.error('Failed to make assets:', error);
     process.exit(1);
diff --git a/scripts/preMake.js b/scripts/preMake.cjs
similarity index 100%
rename from scripts/preMake.js
rename to scripts/preMake.cjs
diff --git a/scripts/prepareTypes.js b/scripts/prepareTypes.js
index 32d6f241..8961876b 100644
--- a/scripts/prepareTypes.js
+++ b/scripts/prepareTypes.js
@@ -1,8 +1,6 @@
-const fs = require('fs');
-const path = require('path');
-
-// Read the main package.json
-const mainPackage = require('../package.json');
+import fs from 'fs'
+import path from 'path'
+import mainPackage from './getPackage.js'
 
 // Create the types-only package.json
 const typesPackage = {
@@ -25,7 +23,7 @@ const typesPackage = {
 };
 
 // Ensure dist directory exists
-const distDir = path.join(__dirname, '../dist');
+const distDir = path.join(import.meta.dirname, '../dist');
 if (!fs.existsSync(distDir)) {
   fs.mkdirSync(distDir, { recursive: true });
 }
diff --git a/scripts/releaseTypes.js b/scripts/releaseTypes.js
index 0cde6213..a58622a1 100644
--- a/scripts/releaseTypes.js
+++ b/scripts/releaseTypes.js
@@ -1,5 +1,5 @@
-const { execSync } = require('child_process')
-const { readFileSync } = require('fs')
+import { execSync } from 'child_process'
+import { readFileSync } from 'fs'
 
 try {
   // Create a new branch with version-bump prefix
diff --git a/scripts/resetInstall.js b/scripts/resetInstall.js
index 4d82b0e3..4548b26d 100644
--- a/scripts/resetInstall.js
+++ b/scripts/resetInstall.js
@@ -1,8 +1,8 @@
-const fs = require('fs');
-const path = require('path');
-const os = require('os');
-const yaml = require('yaml');
-const readline = require('readline');
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+import * as yaml from 'yaml'
+import * as readline from 'readline'
 
 /**
  * Get the path to the extra_models_config.yaml file based on the platform.
diff --git a/scripts/todesktop/afterPack.js b/scripts/todesktop/afterPack.cjs
similarity index 100%
rename from scripts/todesktop/afterPack.js
rename to scripts/todesktop/afterPack.cjs
diff --git a/scripts/todesktop/beforeInstall.js b/scripts/todesktop/beforeInstall.cjs
similarity index 100%
rename from scripts/todesktop/beforeInstall.js
rename to scripts/todesktop/beforeInstall.cjs
diff --git a/scripts/updateFrontend.js b/scripts/updateFrontend.js
index 70c311ec..a29f5b92 100644
--- a/scripts/updateFrontend.js
+++ b/scripts/updateFrontend.js
@@ -1,5 +1,5 @@
-const { execSync } = require('child_process')
-const { readFileSync, writeFileSync } = require('fs')
+import { execSync } from 'child_process'
+import { readFileSync, writeFileSync } from 'fs'
 
 async function main() {
   try {
diff --git a/src/main-process/appWindow.ts b/src/main-process/appWindow.ts
index 3304f0fa..d051224c 100644
--- a/src/main-process/appWindow.ts
+++ b/src/main-process/appWindow.ts
@@ -45,7 +45,7 @@ export class AppWindow {
       x: storedX,
       y: storedY,
       webPreferences: {
-        preload: path.join(__dirname, '../build/preload.js'),
+        preload: path.join(import.meta.dirname, '../build/preload.cjs'),
         nodeIntegration: true,
         contextIsolation: true,
         webviewTag: true,
diff --git a/tsconfig.json b/tsconfig.json
index db4a872d..5f13ddcc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react",
     "target": "ESNext",
-    "module": "commonjs",
+    "module": "ES2022",
     "allowJs": true,
     "strict": true,
     "skipLibCheck": true,
diff --git a/vite.main.config.ts b/vite.main.config.ts
index bdc7a79b..3c1b8c33 100644
--- a/vite.main.config.ts
+++ b/vite.main.config.ts
@@ -6,15 +6,13 @@ import { version } from './package.json';
 
 // https://vitejs.dev/config
 export default defineConfig((env) => {
-  const forgeEnv = env as ConfigEnv;
-
   const config: UserConfig = {
     build: {
       outDir: '.vite/build',
       lib: {
         entry: './src/main.ts',
         fileName: () => '[name].js',
-        formats: ['cjs'],
+        formats: ['es'],
       },
       rollupOptions: {
         external,
@@ -46,5 +44,5 @@ export default defineConfig((env) => {
     },
   };
 
-  return mergeConfig(getBuildConfig(forgeEnv), config);
+  return mergeConfig(getBuildConfig(env), config);
 });
diff --git a/vite.preload.config.ts b/vite.preload.config.ts
index 3f14b8b4..11ae331b 100644
--- a/vite.preload.config.ts
+++ b/vite.preload.config.ts
@@ -3,7 +3,7 @@ import { defineConfig, mergeConfig } from 'vite';
 import { getBuildConfig, external } from './vite.base.config';
 
 // https://vitejs.dev/config
-export default defineConfig((env: ConfigEnv) => {
+export default defineConfig((env) => {
   const config: UserConfig = {
     build: {
       rollupOptions: {
@@ -14,8 +14,8 @@ export default defineConfig((env: ConfigEnv) => {
           format: 'cjs',
           // It should not be split chunks.
           inlineDynamicImports: true,
-          entryFileNames: '[name].js',
-          chunkFileNames: '[name].js',
+          entryFileNames: '[name].cjs',
+          chunkFileNames: '[name].cjs',
           assetFileNames: '[name].[ext]',
         },
       },
diff --git a/yarn.lock b/yarn.lock
index bd9100e0..d03f94e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -551,7 +551,7 @@ __metadata:
     "@types/adm-zip": "npm:^0.5.5"
     "@types/electron-squirrel-startup": "npm:^1.0.2"
     "@types/jest": "npm:^29.5.14"
-    "@types/node": "npm:^22.5.0"
+    "@types/node": "npm:^22.10.2"
     "@types/tar": "npm:6.1.13"
     "@types/wait-on": "npm:^5.3.4"
     "@typescript-eslint/eslint-plugin": "npm:^5.0.0"
@@ -3500,7 +3500,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:>=13.7.0, @types/node@npm:^22.5.0":
+"@types/node@npm:*, @types/node@npm:>=13.7.0":
   version: 22.7.9
   resolution: "@types/node@npm:22.7.9"
   dependencies:
@@ -3518,6 +3518,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^22.10.2":
+  version: 22.10.2
+  resolution: "@types/node@npm:22.10.2"
+  dependencies:
+    undici-types: "npm:~6.20.0"
+  checksum: 10c0/2c7b71a040f1ef5320938eca8ebc946e6905caa9bbf3d5665d9b3774a8d15ea9fab1582b849a6d28c7fc80756a62c5666bc66b69f42f4d5dafd1ccb193cdb4ac
+  languageName: node
+  linkType: hard
+
 "@types/pg-pool@npm:2.0.6":
   version: 2.0.6
   resolution: "@types/pg-pool@npm:2.0.6"
@@ -12757,6 +12766,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici-types@npm:~6.20.0":
+  version: 6.20.0
+  resolution: "undici-types@npm:6.20.0"
+  checksum: 10c0/68e659a98898d6a836a9a59e6adf14a5d799707f5ea629433e025ac90d239f75e408e2e5ff086afc3cace26f8b26ee52155293564593fbb4a2f666af57fc59bf
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^2.0.0":
   version: 2.0.1
   resolution: "unique-filename@npm:2.0.1"