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

@@ -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',

package.json

@@ -8,6 +8,7 @@
   "description": "The best modular GUI to run AI diffusion models.",
   "main": ".vite/build/main.js",
   "packageManager": "[email protected]",
+  "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",

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',
 });

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);

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();

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;

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')

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);

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 });
 }

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

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.

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 {

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,

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "jsx": "react",
     "target": "ESNext",
-    "module": "commonjs",
+    "module": "ES2022",
     "allowJs": true,
     "strict": true,
     "skipLibCheck": true,

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);
 });

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]',
         },
       },

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"