feature: client: view: migrate to ESM

Author: coderaiser

.webpack/js.mjs

@@ -125,7 +125,7 @@ export default {
         [`${modules}/edit-names`]: `${dirModules}/edit-names.js`,
         [`${modules}/edit-names-vim`]: `${dirModules}/edit-names-vim.js`,
         [`${modules}/menu`]: `${dirModules}/menu/index.mjs`,
-        [`${modules}/view`]: `${dirModules}/view/index.js`,
+        [`${modules}/view`]: `${dirModules}/view/index.mjs`,
         [`${modules}/help`]: `${dirModules}/help.js`,
         [`${modules}/markdown`]: `${dirModules}/markdown.js`,
         [`${modules}/config`]: `${dirModules}/config/index.mjs`,

client/modules/view/get-type.js client/modules/view/get-type.mjsclient/modules/view/get-type.js renamed to client/modules/view/get-type.mjs

@@ -1,14 +1,13 @@
-'use strict';
+import currify from 'currify';
 
-const currify = require('currify');
 const testRegExp = currify((name, reg) => reg.test(name));
 const getRegExp = (ext) => RegExp(`\\.${ext}$`, 'i');
 
 const isPDF = (a) => /\.pdf$/i.test(a);
 const isHTML = (a) => a.endsWith('.html');
 const isMarkdown = (a) => /.\.md$/.test(a);
 
-module.exports = (name) => {
+export default (name) => {
     if (isPDF(name))
         return 'pdf';
 

client/modules/view/index.js client/modules/view/index.mjsclient/modules/view/index.js renamed to client/modules/view/index.mjs

@@ -1,35 +1,26 @@
 /* global CloudCmd, DOM */
-
-'use strict';
-
-const CloudCmd = globalThis.CloudCmd || {};
-const DOM = globalThis.DOM || {};
-
-require('../../../css/view.css');
-
-const rendy = require('rendy');
-const currify = require('currify');
-const wraptile = require('wraptile');
-const {tryToCatch} = require('try-to-catch');
-const load = require('load.js');
-
-const _modal = require('@cloudcmd/modal');
-const _createElement = require('@cloudcmd/create-element');
-
-const {time} = require('#common/util');
-const {FS} = require('../../../common/cloudfunc.mjs');
-
-const {
+import rendy from 'rendy';
+import currify from 'currify';
+import wraptile from 'wraptile';
+import {tryToCatch} from 'try-to-catch';
+import load from 'load.js';
+import * as _modal from '@cloudcmd/modal';
+import _createElement from '@cloudcmd/create-element';
+import {time} from '#common/util';
+import * as Files from '#dom/files';
+import * as Events from '#dom/events';
+import '../../../css/view.css';
+import {FS} from '../../../common/cloudfunc.mjs';
+import {
     isImage,
     isAudio,
     getType,
-} = require('./types');
-
-const Files = require('#dom/files');
-const Events = require('#dom/events');
-const Images = require('../../dom/images.mjs');
+} from './types.mjs';
+import * as Images from '../../dom/images.mjs';
+import {encode} from '../../../common/entity.js';
 
-const {encode} = require('../../../common/entity');
+const CloudCmd = globalThis.CloudCmd || {};
+const DOM = globalThis.DOM || {};
 const isString = (a) => typeof a === 'string';
 const {assign} = Object;
 const {isArray} = Array;
@@ -47,14 +38,15 @@ const addEvent = lifo(Events.add);
 
 const loadCSS = load.css;
 
-module.exports.show = show;
-module.exports.hide = hide;
-
 let Loading = false;
 
 const Name = 'View';
 
-CloudCmd[Name] = module.exports;
+CloudCmd[Name] = {
+    init,
+    show,
+    hide,
+};
 
 const Info = DOM.CurrentInfo;
 const {Key} = CloudCmd;
@@ -91,9 +83,9 @@ const Config = {
     },
 };
 
-module.exports._Config = Config;
+export const _Config = Config;
 
-module.exports.init = async () => {
+export async function init() {
     await loadAll();
 
     const events = [
@@ -105,9 +97,9 @@ module.exports.init = async () => {
         Overlay,
         onOverlayClick,
     ));
-};
+}
 
-async function show(data, options = {}) {
+export async function show(data, options = {}) {
     const prefixURL = CloudCmd.prefixURL + FS;
 
     if (Loading)
@@ -159,7 +151,8 @@ async function show(data, options = {}) {
     }
 }
 
-module.exports._createIframe = createIframe;
+export const _createIframe = createIframe;
+
 function createIframe(src, overrides = {}) {
     const {
         createElement = _createElement,
@@ -178,7 +171,8 @@ function createIframe(src, overrides = {}) {
     return element;
 }
 
-module.exports._viewHtml = viewHtml;
+export const _viewHtml = viewHtml;
+
 function viewHtml(src, overrides = {}) {
     const {modal = _modal} = overrides;
     modal.open(createIframe(src), Config);
@@ -234,7 +228,8 @@ async function viewFile() {
 
 const copy = (a) => assign({}, a);
 
-module.exports._initConfig = initConfig;
+export const _initConfig = initConfig;
+
 function initConfig(options) {
     const config = copy(Config);
 
@@ -260,7 +255,7 @@ function initConfig(options) {
     return config;
 }
 
-function hide() {
+export function hide() {
     _modal.close();
 }
 

client/modules/view/index.spec.js client/modules/view/index.spec.mjsclient/modules/view/index.spec.js renamed to client/modules/view/index.spec.mjs

@@ -1,18 +1,14 @@
-'use strict';
-
-require('css-modules-require-hook/preset');
-
-const autoGlobals = require('auto-globals');
-const {stub} = require('@cloudcmd/stub');
-const {test: tape} = require('supertape');
-const test = autoGlobals(tape);
-
-const {
+import autoGlobals from 'auto-globals';
+import {stub} from '@cloudcmd/stub';
+import {test as tape} from 'supertape';
+import {
     _initConfig,
     _viewHtml,
     _Config,
     _createIframe,
-} = require('.');
+} from './index.mjs';
+
+const test = autoGlobals(tape);
 
 test('cloudcmd: client: view: initConfig', (t) => {
     let config;

client/modules/view/types.js client/modules/view/types.mjsclient/modules/view/types.js renamed to client/modules/view/types.mjs

@@ -1,16 +1,16 @@
-'use strict';
+import {extname} from 'node:path';
+import currify from 'currify';
+
+export const isAudio = (name) => /\.(mp3|ogg|m4a)$/i.test(name);
 
-const {extname} = require('node:path');
-const currify = require('currify');
-const isAudio = (name) => /\.(mp3|ogg|m4a)$/i.test(name);
 const testRegExp = currify((name, reg) => reg.test(name));
 const getRegExp = (ext) => RegExp(`\\.${ext}$`, 'i');
 
 const isPDF = (a) => /\.pdf$/i.test(a);
 const isHTML = (a) => a.endsWith('.html');
 const isMarkdown = (a) => /.\.md$/.test(a);
 
-module.exports.getType = async (path) => {
+export const getType = async (path) => {
     const ext = extname(path);
 
     if (!ext)
@@ -32,8 +32,7 @@ module.exports.getType = async (path) => {
         return 'markdown';
 };
 
-module.exports.isImage = isImage;
-function isImage(name) {
+export function isImage(name) {
     const images = [
         'jp(e|g|eg)',
         'gif',
@@ -53,13 +52,12 @@ function isMedia(name) {
     return isAudio(name) || isVideo(name);
 }
 
-module.exports.isAudio = isAudio;
-
 function isVideo(name) {
     return /\.(mp4|avi|webm)$/i.test(name);
 }
 
-module.exports._detectType = detectType;
+export const _detectType = detectType;
+
 async function detectType(path) {
     const {headers} = await fetch(path, {
         method: 'HEAD',

client/modules/view/types.spec.js client/modules/view/types.spec.mjsclient/modules/view/types.spec.js renamed to client/modules/view/types.spec.mjs

@@ -1,7 +1,5 @@
-'use strict';
-
-const {test, stub} = require('supertape');
-const {isAudio, _detectType} = require('./types');
+import {test, stub} from 'supertape';
+import {isAudio, _detectType} from './types.mjs';
 
 test('cloudcmd: client: view: types: isAudio', (t) => {
     const result = isAudio('hello.mp3');