feature: client: cloudcmd: migrate to ESM

.webpack/js.mjs

@@ -114,7 +114,7 @@ export default {
         'terminal': `${dirCss}/terminal.css`,
         'user-menu': `${dirCss}/user-menu.css`,
         'sw': `${dir}/sw/sw.js`,
-        'cloudcmd': `${dir}/cloudcmd.js`,
+        'cloudcmd': `${dir}/cloudcmd.mjs`,
         [`${modules}/edit`]: `${dirModules}/edit.js`,
         [`${modules}/edit-file`]: `${dirModules}/edit-file.js`,
         [`${modules}/edit-file-vim`]: `${dirModules}/edit-file-vim.js`,

client/client.mjs

@@ -26,8 +26,11 @@ const isDev = process.env.NODE_ENV === 'development';
 
 inherits(CloudCmdProto, Emitify);
 
-export const createCloudCmd = (DOM) => {
-    return new CloudCmdProto(DOM);
+export const createCloudCmd = ({DOM, Listeners}) => {
+    return new CloudCmdProto({
+        DOM,
+        Listeners,
+    });
 };
 
 load.addErrorListener((e, src) => {
@@ -35,9 +38,7 @@ load.addErrorListener((e, src) => {
     Images.show.error(msg);
 });
 
-function CloudCmdProto(DOM) {
-    let Listeners;
-    
+function CloudCmdProto({DOM, Listeners}) {
     Emitify.call(this);
     
     const CloudCmd = this;
@@ -224,7 +225,6 @@ function CloudCmdProto(DOM) {
         
         const dirPath = DOM.getCurrentDirPath();
         
-        ({Listeners} = CloudCmd);
         Listeners.init();
         
         const panels = getPanels();

client/cloudcmd.mjs

@@ -1,33 +1,32 @@
-'use strict';
-
-const process = require('node:process');
-require('../css/main.css');
-
-const wraptile = require('wraptile');
-const load = require('load.js');
-
-const {registerSW, listenSW} = require('./sw/register');
-const {initSortPanel, sortPanel} = require('./sort.mjs');
-const Util = require('../common/util');
-const CloudFunc = require('../common/cloudfunc.mjs');
-const DOM = require('./dom');
-const {createCloudCmd} = require('./client.mjs');
+import process from 'node:process';
+import wraptile from 'wraptile';
+import load from 'load.js';
+import '../css/main.css';
+import {registerSW, listenSW} from './sw/register.js';
+import {initSortPanel, sortPanel} from './sort.mjs';
+import Util from '../common/util.js';
+import * as CloudFunc from '../common/cloudfunc.mjs';
+import DOM from './dom/index.js';
+import {createCloudCmd} from './client.mjs';
+import * as Listeners from './listeners/index.js';
 
 const isDev = process.env.NODE_ENV === 'development';
 
-module.exports = init;
+export default init;
+
+globalThis.CloudCmd = init;
 
 async function init(config) {
-    globalThis.CloudCmd = createCloudCmd(DOM);
+    globalThis.CloudCmd = createCloudCmd({
+        DOM,
+        Listeners,
+    });
     globalThis.DOM = DOM;
     globalThis.Util = Util;
     globalThis.CloudFunc = CloudFunc;
     
     await register(config);
     
-    require('./listeners');
-    require('./key');
-    
     initSortPanel();
     globalThis.CloudCmd.sortPanel = sortPanel;
     const prefix = getPrefix(config.prefix);
@@ -41,8 +40,6 @@ async function init(config) {
         }, 100);
 }
 
-globalThis.CloudCmd = init;
-
 function getPrefix(prefix) {
     if (!prefix)
         return '';
@@ -75,3 +72,4 @@ async function register(config) {
     
     listenSW(sw, 'updatefound', onUpdateFound(config));
 }
+

client/listeners/index.js

@@ -29,8 +29,6 @@ module.exports.init = async () => {
     ]);
 };
 
-CloudCmd.Listeners = module.exports;
-
 const unselect = (event) => {
     const isMac = /Mac/.test(globalThis.navigator.platform);
     const {
@@ -50,9 +48,6 @@ const execAll = currify((funcs, event) => {
         fn(event);
 });
 
-const Info = DOM.CurrentInfo;
-const {Events} = DOM;
-
 const EventsFiles = {
     mousedown: exec.with(execIfNotUL, setCurrentFileByEvent),
     click: execAll([onClick, exec.with(execIfNotMobile, unselect)]),
@@ -70,6 +65,8 @@ function header() {
         return /^js-(left|right)$/.test(el.dataset.name);
     };
     
+    const {Events} = DOM;
+    
     Events.addClick(fm, (event) => {
         const el = event.target;
         const parent = el.parentElement;
@@ -106,6 +103,7 @@ async function config() {
 }
 
 module.exports.initKeysPanel = () => {
+    const {Events} = DOM;
     const keysElement = DOM.getById('js-keyspanel');
     
     if (!keysElement)
@@ -152,6 +150,7 @@ const getPanel = (side) => {
 };
 
 module.exports.setOnPanel = (side) => {
+    const {Events} = DOM;
     const panel = getPanel(side);
     
     const filesElement = DOM.getByDataName('js-files', panel);
@@ -167,6 +166,7 @@ function getPathListener(panel) {
 }
 
 function isNoCurrent(panel) {
+    const Info = DOM.CurrentInfo;
     const infoPanel = Info.panel;
     
     if (!infoPanel)
@@ -191,6 +191,7 @@ function decodePath(path) {
 }
 
 async function onPathElementClick(panel, event) {
+    const Info = DOM.CurrentInfo;
     event.preventDefault();
     
     const element = event.target;
@@ -261,6 +262,7 @@ function toggleSelect(key, files) {
 }
 
 function changePanel(element) {
+    const Info = DOM.CurrentInfo;
     const {panel} = Info;
     const files = DOM.getByDataName('js-files', panel);
     const ul = getULElement(element);
@@ -302,6 +304,7 @@ async function onTouch(event) {
   * in Chrome (HTML5)
   */
 function onDragStart(event) {
+    const Info = DOM.CurrentInfo;
     const {prefixURL} = CloudCmd;
     const element = getLIElement(event.target);
     const {isDir} = Info;
@@ -338,6 +341,7 @@ function getULElement(element) {
 }
 
 function setCurrentFileByEvent(event) {
+    const Info = DOM.CurrentInfo;
     const BUTTON_LEFT = 0;
     
     const key = {
@@ -376,6 +380,7 @@ function getFilesRange(from, to) {
 }
 
 function contextMenu() {
+    const {Events} = DOM;
     const fm = DOM.getFM();
     
     Events.addOnce('contextmenu', fm, (event) => {
@@ -391,6 +396,7 @@ function contextMenu() {
 }
 
 function dragndrop() {
+    const {Events} = DOM;
     const panels = DOM.getByClassAll('panel');
     const select = ({target}) => {
         target.classList.add('selected-panel');
@@ -464,7 +470,7 @@ function unload() {
 }
 
 function pop() {
-    Events.add('popstate', async ({state}) => {
+    DOM.Events.add('popstate', async ({state}) => {
         const path = (state || '').replace(FS, '');
         
         if (!path)
@@ -479,7 +485,8 @@ function pop() {
 }
 
 function resize() {
-    Events.add('resize', () => {
+    DOM.Events.add('resize', () => {
+        const Info = DOM.CurrentInfo;
         const is = globalThis.innerWidth < CloudCmd.MIN_ONE_PANEL_WIDTH;
         
         if (!is)