chore: cleaning + major versions upgrade (#147)

* chore: cleaning + major versions upgrade (typescript, vite, jest, eslint, electron-chromedriver, prettier)

* chore: converted to ESM imports
+ get-port v5 to v7 + cleaned some imports

* fix: better ESM __dirname

* fix: eslint migrate from .eslintrc to eslint.config.js

* wip: jest typescript esm
+ update electron context menu

* wip: jest typescript esm
+ update electron-store

* wip: jest electron mock

* chore: upgrade electron to v32

* fix: preload has to end with .mjs in ESM mode
+ update deps
+ cleaning unused imports
+ more ESM conversion

* fix: convert notarize.js to ESM modules

* fix: rebased on main

* wip: why??

* fix: node v20 minimum dependency

* Revert "wip: why??"

This reverts commit 3193381.

* fix: node v20 minimum dependency

.github/workflows/run-plugin-tests.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - name: Install dependencies
         working-directory: ./resources/js/
         run: npm install

.github/workflows/run-tests.yml

@@ -37,6 +37,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:

resources/js/.gitignore

@@ -1,3 +1,3 @@
 .idea
 node_modules
-out
+out

resources/js/build/notarize.js

@@ -1,6 +1,6 @@
-const {notarize} = require('@electron/notarize')
+import { notarize } from '@electron/notarize';
 
-module.exports = async (context) => {
+export default async (context) => {
     if (process.platform !== 'darwin') return
 
     console.log('aftersign hook triggered, start to notarize app.')

resources/js/electron-builder.js

@@ -1,7 +1,10 @@
-const os = require('os');
-const { join } = require("path");
-const { mkdtempSync } = require("fs");
-const { copySync, removeSync, writeJsonSync } = require("fs-extra");
+import os from 'os';
+import { join } from 'path';
+import { mkdtempSync } from 'fs';
+
+// Workaround for CommonJS module
+import fs_extra from 'fs-extra';
+const { copySync, removeSync, writeJsonSync } = fs_extra;
 
 const isBuilding = process.env.NATIVEPHP_BUILDING;
 const appId = process.env.NATIVEPHP_APP_ID;
@@ -54,7 +57,7 @@ if (isBuilding) {
     console.log();
 
     try {
-        const appPath = join(__dirname, 'resources', 'app');
+        const appPath = join(import.meta.dirname, 'resources', 'app');
 
         removeSync(appPath);
 
@@ -122,7 +125,7 @@ if (isBuilding) {
 
 }
 
-module.exports = {
+export default {
     appId: appId,
     productName: appName,
     directories: {

resources/js/electron-plugin/babel.config.js

@@ -1,5 +1,6 @@
-module.exports = {
+export default {
   presets: [
-    '@babel/preset-typescript',
+      ['@babel/preset-env', {targets: {node: 'current'}}],
+      '@babel/preset-typescript',
   ],
 };

resources/js/electron-plugin/dist/index.js

@@ -8,21 +8,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { app } from "electron";
-import { autoUpdater } from "electron-updater";
-import state from "./server/state";
+import { initialize } from "@electron/remote/main/index.js";
+import state from "./server/state.js";
 import { electronApp, optimizer } from "@electron-toolkit/utils";
-import { retrieveNativePHPConfig, retrievePhpIniSettings, runScheduler, startAPI, startPhpApp, } from "./server";
-import { notifyLaravel } from "./server/utils";
+import { retrieveNativePHPConfig, retrievePhpIniSettings, runScheduler, startAPI, startPhpApp, } from "./server/index.js";
+import { notifyLaravel } from "./server/utils.js";
 import { resolve } from "path";
-import { stopAllProcesses } from "./server/api/childProcess";
+import { stopAllProcesses } from "./server/api/childProcess.js";
 import ps from "ps-node";
+import electronUpdater from 'electron-updater';
+const { autoUpdater } = electronUpdater;
 class NativePHP {
     constructor() {
         this.processes = [];
         this.schedulerInterval = undefined;
     }
     bootstrap(app, icon, phpBinary, cert) {
-        require("@electron/remote/main").initialize();
+        initialize();
         state.icon = icon;
         state.php = phpBinary;
         state.caCert = cert;

resources/js/electron-plugin/dist/preload/index.js → resources/js/electron-plugin/dist/preload/index.mjs

@@ -1,5 +1,5 @@
-const { contextBridge, ipcRenderer } = require('electron');
-const remote = require('@electron/remote');
+import remote from "@electron/remote";
+import { ipcRenderer } from "electron";
 const Native = {
     on: (event, callback) => {
         ipcRenderer.on('native-event', (_, data) => {

resources/js/electron-plugin/dist/server/api.js

@@ -9,32 +9,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import express from "express";
 import bodyParser from "body-parser";
-import getPort from "get-port";
-import middleware from "./api/middleware";
-import clipboardRoutes from "./api/clipboard";
-import appRoutes from "./api/app";
-import screenRoutes from "./api/screen";
-import dialogRoutes from "./api/dialog";
-import debugRoutes from "./api/debug";
-import broadcastingRoutes from "./api/broadcasting";
-import systemRoutes from "./api/system";
-import globalShortcutRoutes from "./api/globalShortcut";
-import notificationRoutes from "./api/notification";
-import dockRoutes from "./api/dock";
-import menuRoutes from "./api/menu";
-import menuBarRoutes from "./api/menuBar";
-import windowRoutes from "./api/window";
-import processRoutes from "./api/process";
-import contextMenuRoutes from "./api/contextMenu";
-import settingsRoutes from "./api/settings";
-import shellRoutes from "./api/shell";
-import progressBarRoutes from "./api/progressBar";
-import powerMonitorRoutes from "./api/powerMonitor";
-import childProcessRoutes from "./api/childProcess";
+import getPort, { portNumbers } from "get-port";
+import middleware from "./api/middleware.js";
+import clipboardRoutes from "./api/clipboard.js";
+import appRoutes from "./api/app.js";
+import screenRoutes from "./api/screen.js";
+import dialogRoutes from "./api/dialog.js";
+import debugRoutes from "./api/debug.js";
+import broadcastingRoutes from "./api/broadcasting.js";
+import systemRoutes from "./api/system.js";
+import globalShortcutRoutes from "./api/globalShortcut.js";
+import notificationRoutes from "./api/notification.js";
+import dockRoutes from "./api/dock.js";
+import menuRoutes from "./api/menu.js";
+import menuBarRoutes from "./api/menuBar.js";
+import windowRoutes from "./api/window.js";
+import processRoutes from "./api/process.js";
+import contextMenuRoutes from "./api/contextMenu.js";
+import settingsRoutes from "./api/settings.js";
+import shellRoutes from "./api/shell.js";
+import progressBarRoutes from "./api/progressBar.js";
+import powerMonitorRoutes from "./api/powerMonitor.js";
+import childProcessRoutes from "./api/childProcess.js";
 function startAPIServer(randomSecret) {
     return __awaiter(this, void 0, void 0, function* () {
         const port = yield getPort({
-            port: getPort.makeRange(4000, 5000),
+            port: portNumbers(4000, 5000),
         });
         return new Promise((resolve, reject) => {
             const httpServer = express();

resources/js/electron-plugin/dist/server/api/broadcasting.js

@@ -1,5 +1,5 @@
 import express from 'express';
-import { broadcastToWindows } from '../utils';
+import { broadcastToWindows } from '../utils.js';
 const router = express.Router();
 router.post('/', (req, res) => {
     const { event, payload } = req.body;

resources/js/electron-plugin/dist/server/api/childProcess.js

@@ -9,18 +9,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import express from 'express';
 import { utilityProcess } from 'electron';
-import state from '../state';
-import { notifyLaravel } from "../utils";
-import { join } from 'path';
-import { getDefaultEnvironmentVariables, getDefaultPhpIniSettings } from "../php";
+import state from '../state.js';
+import { notifyLaravel } from "../utils.js";
+import { getDefaultEnvironmentVariables, getDefaultPhpIniSettings } from "../php.js";
+import killSync from "kill-sync";
+import { fileURLToPath } from "url";
 const router = express.Router();
-const killSync = require('kill-sync');
 function startProcess(settings) {
     const { alias, cmd, cwd, env, persistent } = settings;
     if (getProcess(alias) !== undefined) {
         return state.processes[alias];
     }
-    const proc = utilityProcess.fork(join(__dirname, '../../electron-plugin/dist/server/childProcess.js'), cmd, {
+    const proc = utilityProcess.fork(fileURLToPath(new URL('../../electron-plugin/dist/server/childProcess.js', import.meta.url)), cmd, {
         cwd,
         stdio: 'pipe',
         serviceName: alias,

resources/js/electron-plugin/dist/server/api/contextMenu.js

@@ -1,5 +1,5 @@
 import express from 'express';
-import { compileMenu } from "./helper";
+import { compileMenu } from "./helper/index.js";
 import contextMenu from "electron-context-menu";
 const router = express.Router();
 let contextMenuDisposable = null;

resources/js/electron-plugin/dist/server/api/debug.js

@@ -1,5 +1,5 @@
 import express from 'express';
-import { broadcastToWindows } from '../utils';
+import { broadcastToWindows } from '../utils.js';
 const router = express.Router();
 router.post('/log', (req, res) => {
     const { level, message, context } = req.body;

resources/js/electron-plugin/dist/server/api/dialog.js

@@ -1,7 +1,7 @@
 import express from 'express';
 import { dialog } from 'electron';
-import state from '../state';
-import { trimOptions } from '../utils';
+import state from '../state.js';
+import { trimOptions } from '../utils.js';
 const router = express.Router();
 router.post('/open', (req, res) => {
     const { title, buttonLabel, filters, properties, defaultPath, message, windowReference } = req.body;

resources/js/electron-plugin/dist/server/api/dock.js

@@ -1,7 +1,7 @@
 import express from 'express';
 import { app, Menu } from 'electron';
-import { compileMenu } from './helper';
-import state from '../state';
+import { compileMenu } from './helper/index.js';
+import state from '../state.js';
 const router = express.Router();
 router.post('/', (req, res) => {
     const menuEntries = req.body.items.map(compileMenu);

resources/js/electron-plugin/dist/server/api/globalShortcut.js

@@ -1,6 +1,6 @@
 import express from 'express';
 import { globalShortcut } from 'electron';
-import { notifyLaravel } from "../utils";
+import { notifyLaravel } from "../utils.js";
 const router = express.Router();
 router.post('/', (req, res) => {
     const { key, event } = req.body;

resources/js/electron-plugin/dist/server/api/helper/index.js

@@ -1,6 +1,6 @@
 import { shell } from 'electron';
-import { notifyLaravel, goToUrl } from '../../utils';
-import state from '../../state';
+import { notifyLaravel, goToUrl } from '../../utils.js';
+import state from '../../state.js';
 function triggerMenuItemEvent(menuItem, combo) {
     notifyLaravel('events', {
         event: menuItem.event || '\\Native\\Laravel\\Events\\Menu\\MenuItemClicked',

resources/js/electron-plugin/dist/server/api/menu.js

@@ -1,6 +1,6 @@
 import express from 'express';
 import { Menu } from 'electron';
-import { compileMenu } from './helper';
+import { compileMenu } from './helper/index.js';
 const router = express.Router();
 router.post('/', (req, res) => {
     Menu.setApplicationMenu(null);

resources/js/electron-plugin/dist/server/api/menuBar.js

@@ -1,10 +1,11 @@
 import express from "express";
 import { Menu, Tray } from "electron";
-import { compileMenu } from "./helper";
-import state from "../state";
+import { compileMenu } from "./helper/index.js";
+import state from "../state.js";
 import { menubar } from "menubar";
-import { notifyLaravel } from "../utils";
-import { join } from "path";
+import { notifyLaravel } from "../utils.js";
+import { fileURLToPath } from 'url';
+import { enable } from "@electron/remote/main/index.js";
 const router = express.Router();
 router.post("/label", (req, res) => {
     res.sendStatus(200);
@@ -77,15 +78,15 @@ router.post("/create", (req, res) => {
                 backgroundColor,
                 transparent: transparency,
                 webPreferences: {
-                    preload: join(__dirname, '../../electron-plugin/dist/preload/index.js'),
+                    preload: fileURLToPath(new URL('../../electron-plugin/dist/preload/index.mjs', import.meta.url)),
                     nodeIntegration: true,
                     sandbox: false,
                     contextIsolation: false,
                 }
             }
         });
         state.activeMenuBar.on("after-create-window", () => {
-            require("@electron/remote/main").enable(state.activeMenuBar.window.webContents);
+            enable(state.activeMenuBar.window.webContents);
         });
     }
     state.activeMenuBar.on("ready", () => {

resources/js/electron-plugin/dist/server/api/notification.js

@@ -1,6 +1,6 @@
 import express from 'express';
 import { Notification } from 'electron';
-import { notifyLaravel } from "../utils";
+import { notifyLaravel } from "../utils.js";
 const router = express.Router();
 router.post('/', (req, res) => {
     const { title, body, subtitle, silent, icon, hasReply, timeoutType, replyPlaceholder, sound, urgency, actions, closeButtonText, toastXml, event: customEvent } = req.body;

resources/js/electron-plugin/dist/server/api/powerMonitor.js

@@ -1,6 +1,6 @@
 import express from 'express';
 import { powerMonitor } from 'electron';
-import { notifyLaravel } from '../utils';
+import { notifyLaravel } from '../utils.js';
 const router = express.Router();
 router.get('/get-system-idle-state', (req, res) => {
     let threshold = Number(req.query.threshold) || 60;

resources/js/electron-plugin/dist/server/api/progressBar.js

@@ -1,5 +1,5 @@
 import express from 'express';
-import state from "../state";
+import state from "../state.js";
 const router = express.Router();
 router.post('/update', (req, res) => {
     const { percent } = req.body;

resources/js/electron-plugin/dist/server/api/settings.js

@@ -1,5 +1,5 @@
 import express from 'express';
-import state from '../state';
+import state from '../state.js';
 const router = express.Router();
 router.get('/:key', (req, res) => {
     const key = req.params.key;