feature: migrate to esbuild

build.mjs

@@ -0,0 +1,51 @@
+âˆimport * as esbuild from 'esbuild'
+
+const dir = './client';
+const dirModules = './client/modules';
+
+await esbuild.build({
+  entryPoints: [
+        `${dir}/cloudcmd.js`,
+        `${dirModules}/edit.js`,
+        `${dirModules}/edit-file.js`,
+        `${dirModules}/edit-file-vim.js`,
+        `${dirModules}/edit-names.js`,
+        `${dirModules}/edit-names-vim.js`,
+        `${dirModules}/menu.js`,
+        `${dirModules}/view/index.js`,
+        `${dirModules}/help.js`,
+        `${dirModules}/markdown.js`,
+        `${dirModules}/config/index.js`,
+        `${dirModules}/contact.js`,
+        `${dirModules}/upload.js`,
+        `${dirModules}/operation/index.js`,
+        `${dirModules}/konsole.js`,
+        `${dirModules}/terminal.js`,
+        `${dirModules}/terminal-run.js`,
+        `${dirModules}/cloud.js`,
+        `${dirModules}/user-menu/index.js`,
+        `${dirModules}/polyfill.js`,
+        `${dirModules}/command-line.js`,
+
+        'css/columns/name-size-date.css',
+        'css/columns/name-size.css',
+  ],
+  entryNames: '[dir]',
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  target: ['chrome100'],
+  alias: {
+    path: 'path-browserify',
+  },
+  outdir: 'dist',
+    loader: {
+      '.png': 'dataurl',
+      '.gif': 'dataurl',
+      '.woff': 'dataurl',
+      '.woff2': 'dataurl',
+      '.ttf': 'dataurl',
+      '.eot': 'dataurl',
+      '.svg': 'text',
+    }
+})

client/client.js

@@ -59,8 +59,8 @@ function CloudCmdProto(DOM) {
     this.prefix = '';
     this.prefixSocket = '';
     this.prefixURL = '';
-    this.DIRCLIENT = '/dist/';
-    this.DIRCLIENT_MODULES = this.DIRCLIENT + 'modules/';
+    this.DIR_CLIENT = '/dist/client';
+    this.DIR_CLIENT_MODULES = this.DIR_CLIENT + '/modules';
 
     this.MIN_ONE_PANEL_WIDTH = 1155;
     this.HOST = location.origin || location.protocol + '//' + location.host;
@@ -130,21 +130,23 @@ function CloudCmdProto(DOM) {
             CloudCmd.MIN_ONE_PANEL_WIDTH = Infinity;
 
         if (!document.body.scrollIntoViewIfNeeded)
-            await load.js(prefix + CloudCmd.DIRCLIENT_MODULES + 'polyfill.js');
+            await load.js(`${prefix}${CloudCmd.DIR_CLIENT_MODULES}/polyfill.js`);
 
         await initModules();
         await baseInit();
-        await loadStyle();
+        //await loadStyle();
 
         CloudCmd.route(location.hash);
     };
 
+    /*
     async function loadStyle() {
         const {prefix} = CloudCmd;
-        const name = prefix + '/dist/cloudcmd.common.css';
+        const name = prefix + '/build/cloudcmd.css';
 
         await load.css(name);
     }
+    */
 
     this.route = (path) => {
         const query = path.split('/');

client/cloudcmd.js

@@ -50,8 +50,7 @@ const onUpdateFound = wraptile(async (config) => {
     const {DOM} = window;
     const prefix = getPrefix(config.prefix);
     
-    await load.js(`${prefix}/dist/cloudcmd.common.js`);
-    await load.js(`${prefix}/dist/cloudcmd.js`);
+    await load.js(`${prefix}/dist/client/cloudcmd.js`);
     
     console.log('cloudcmd: sw: updated');
     

client/load-module.js

@@ -29,7 +29,7 @@ module.exports = function loadModule(params) {
         exec(doBefore);
 
         const {prefix} = CloudCmd;
-        const pathFull = prefix + CloudCmd.DIRCLIENT_MODULES + path + '.js';
+        const pathFull = `${prefix}${CloudCmd.DIR_CLIENT_MODULES}/${path}.js`;
 
         return loadJS(pathFull).then(async () => {
             const newModule = async (f) => f && f();

client/modules/menu.js

@@ -1,19 +1,21 @@
-/* global CloudCmd, DOM */
-
 'use strict';
 
+/* global CloudCmd, DOM */
+
 const exec = require('execon');
 const wrap = require('wraptile');
 const supermenu = require('supermenu');
 const createElement = require('@cloudcmd/create-element');
+const load = require('load.js');
 
 const {FS} = require('../../common/cloudfunc');
 const {getIdBySrc} = require('../dom/load');
 const RESTful = require('../dom/rest');
-
 const {
     config,
     Key,
+    prefix,
+    DIR_CLIENT_MODULES,
 } = CloudCmd;
 
 const {
@@ -35,7 +37,8 @@ module.exports.ENABLED = false;
 
 CloudCmd.Menu = exports;
 
-module.exports.init = () => {
+module.exports.init = async () => {
+    await load.css(`${prefix}${DIR_CLIENT_MODULES}/menu.css`);
     const {
         isAuth,
         menuDataFile,
@@ -342,3 +345,4 @@ function listener(event) {
         event.preventDefault();
     }
 }
+

client/modules/user-menu/index.js

@@ -27,11 +27,15 @@ const sourceStore = fullstore();
 const Name = 'UserMenu';
 CloudCmd[Name] = module.exports;
 
-const {Key} = CloudCmd;
+const {
+    Key,
+    prefix,
+    DIR_CLIENT_MODULES,
+} = CloudCmd;
 
 module.exports.init = async () => {
     await Promise.all([
-        loadCSS(`${CloudCmd.prefix}/dist/user-menu.css`),
+        loadCSS(`${prefix}${DIR_CLIENT_MODULES}/user-menu/index.css`),
         CloudCmd.View(),
     ]);
 };

client/modules/view/index.js

@@ -318,12 +318,12 @@ function check(src) {
  * @callback   -  executes, when everything loaded
  */
 async function loadAll() {
-    const {prefix} = CloudCmd;
+    const {DIRCLIENT_MODULES} = CloudCmd;
 
     time(Name + ' load');
 
     Loading = true;
-    await loadCSS(`${prefix}/dist/view.css`);
+    await loadCSS(`${DIRCLIENT_MODULES}view/index.css`);
     Loading = false;
 }
 

css/icons.css

@@ -58,7 +58,7 @@
     content     : '\e80c  ';
 }
 
-.icon-file::before, {
+.icon-file::before {
     font-family : 'Fontello';
     content     : '\e80d  ';
 }

html/index.html

@@ -8,9 +8,9 @@
         <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
         <link rel="icon" href="{{ prefix }}/favicon.ico">
         
-        <link rel=stylesheet href="{{ prefix }}/dist/cloudcmd.css">
+        <link rel=stylesheet href="{{ prefix }}/dist/client/cloudcmd.css">
         <noscript>
-            <link rel=stylesheet href="{{ prefix }}/dist/nojs.css">
+            <link rel=stylesheet href="{{ prefix }}/dist/css/nojs.css">
         </noscript>
         <style data-name="columns">
             {{ columns }}
@@ -33,8 +33,7 @@
             <button id=shift~  class="cmd-button reduce-text icon-terminal"  title="Terminal"        >⇧ ~</button>
             <button id=contact class="cmd-button reduce-text icon-contact"   title="Contact"         ></button>
         </div>
-        <script src="{{ prefix }}/dist/cloudcmd.common.js"></script>
-        <script src="{{ prefix }}/dist/cloudcmd.js"></script>
+        <script src="{{ prefix }}/dist/client/cloudcmd.js"></script>
         <script>
             CloudCmd({{ config }});
         </script>

package.json

@@ -164,6 +164,7 @@
     "css-modules-require-hook": "^4.2.3",
     "domtokenlist-shim": "^1.2.0",
     "emitify": "^4.0.1",
+    "esbuild": "^0.17.5",
     "eslint": "^8.0.1",
     "eslint-plugin-n": "^15.2.4",
     "eslint-plugin-putout": "^16.0.0",

server/cloudcmd.js

@@ -36,7 +36,7 @@ const fileop = require('@cloudcmd/fileop');
 const DIR_ROOT = DIR + '../';
 
 const isDev = process.env.NODE_ENV === 'development';
-const getDist = (isDev) => isDev ? 'dist-dev' : 'dist';
+const getDist = () => 'html';//(isDev) => isDev ? 'dist-dev' : 'dist';
 
 const getIndexPath = (isDev) => path.join(DIR, '..', `${getDist(isDev)}/index.html`);
 const html = fs.readFileSync(getIndexPath(isDev), 'utf8');

server/columns.js

@@ -15,7 +15,7 @@ const isDev = process.env.NODE_ENV === 'development';
 const getDist = (isDev) => isDev ? 'dist-dev' : 'dist';
 
 const dist = getDist(isDev);
-const columnsDir = path.join(__dirname, '..', dist, 'columns');
+const columnsDir = path.join(__dirname, '..', 'dist', 'css', 'columns');
 
 const names = fs.readdirSync(columnsDir)
     .filter(not(isMap));