feature: @cloudcmd/modal: migrate to ESM

Author: coderaiser

.eslintrc.json

@@ -1,18 +1,24 @@
-'use strict';
+import {run, cutEnv} from 'madrun';
 
-const {run} = require('madrun');
+const env = {
+    NODE_OPTIONS: '"--import supertape/css"',
+};
 
-module.exports = {
+export default {
     'watch': () => 'nodemon --watch lib --exec',
     'watch:client': () => run('compile:client', '--watch'),
     'watch:test': () => run('watch', 'npm test'),
     'watch:lint': async () => await run('watch', `'npm run lint'`),
     'watch:lint:js': () => run('watch', '"run lint:js"'),
     'watch:coverage': () => run('watch', 'redrun coverage'),
-    'coverage': () => 'c8 npm test',
-    'report': () => 'c8 report --reporter=text-lcov | coveralls',
+    'coverage': async () => [env, `c8 ${await cutEnv('test')}`],
+    'report': () => 'c8 report --reporter=lcov',
     'lint': () => 'putout .',
     'fix:lint': async () => await run('lint', '--fix'),
-    'test': () => `tape 'lib/**/*.spec.js'`,
-    'test:update': () => 'UPDATE_FIXTURE=1 redrun test',
+    'test': () => [env, `tape 'lib/**/*.spec.js'`],
+    'test:update': async () => [
+        await cutEnv('redrun test'),{
+            ...env,
+            UPDATE_FIXTURE: 1,
+        }],
 };

.madrun.js

@@ -0,0 +1,13 @@
+{
+    "check-coverage": true,
+    "all": true,
+    "exclude": [
+        "**/*.spec.*",
+        "**/*.config.*",
+        ".*"
+    ],
+    "branches": 100,
+    "lines": 100,
+    "functions": 100,
+    "statements": 100
+}

.nycrc.json

@@ -55,12 +55,11 @@ Using build file:
 
 ```js
 const el = document.createElement('div');
-el.textContent = 'hello';
 
+el.textContent = 'hello';
 // simplest possible modal open using existing html element
 modal.open(el);
 modal.close();
-
 // usage with title and hooks
 modal.open(el, {
     title: 'hello world',
@@ -101,4 +100,3 @@ modal.close();
 # License
 
 MIT
-

README.md

@@ -0,0 +1,3 @@
+import {safeAlign} from 'eslint-plugin-putout';
+
+export default safeAlign;

eslint.config.js

@@ -1,6 +1,4 @@
-'use strict';
-
-module.exports = ({autoSize, isTitle}) => {
+export default ({autoSize, isTitle}) => {
     const classNames = ['modal-main'];
 
     if (autoSize)

lib/get-class-name.js

@@ -1,7 +1,5 @@
-'use strict';
-
-const test = require('supertape');
-const getClassName = require('./get-class-name');
+import test from 'supertape';
+import getClassName from './get-class-name.js';
 
 test('get-class-name: no', (t) => {
     const result = getClassName({});

lib/get-class-name.spec.js

@@ -1,14 +1,11 @@
-'use strict';
-
-const store = require('fullstore');
-const currify = require('currify');
-const createElement = require('@cloudcmd/create-element');
-
-require('../css/modal.css');
-const parseImages = require('./parse-images');
-const showTitle = require('./show-title');
-const query = require('./query');
-const getClassName = require('./get-class-name');
+import store from 'fullstore';
+import currify from 'currify';
+import createElement from '@cloudcmd/create-element';
+import '../css/modal.css';
+import _parseImages from './parse-images.js';
+import _showTitle from './show-title.js';
+import _query from './query.js';
+import getClassName from './get-class-name.js';
 
 const noop = () => {};
 
@@ -20,17 +17,14 @@ const innerHTML = `
     </div>
 `;
 
-const addEvent = currify((el, fn, name) => query(el).addEventListener(name, fn));
-const addAllEvents = (el, fn, names) => names.map(addEvent(el, fn));
+const addEvent = currify((el, fn, query, name) => query(el).addEventListener(name, fn));
+const addAllEvents = (el, fn, query, names) => names.map(addEvent(el, fn, query));
 
 const {isArray} = Array;
 
-module.exports.open = (inner, options = {}) => {
+export const open = (inner, options = {}) => {
     check(inner);
 
-    if (query('main'))
-        return;
-    
     const {
         beforeShow = noop,
         beforeClose = noop,
@@ -41,8 +35,14 @@ module.exports.open = (inner, options = {}) => {
         index = 0,
         helpers = {},
         title = '',
+        query = _query,
+        showTitle = _showTitle,
+        parseImages = _parseImages,
     } = options;
 
+    if (query('main'))
+        return;
+    
     optionsStore({
         beforeClose,
         afterClose,
@@ -64,7 +64,7 @@ module.exports.open = (inner, options = {}) => {
         dataName: 'modal-main',
     });
 
-    addAllEvents('main', onMainClick(onOverlayClick), ['click', 'contextmenu']);
+    addAllEvents('main', onMainClick(onOverlayClick), query, ['click', 'contextmenu']);
 
     query('close').addEventListener('click', close);
 
@@ -87,15 +87,19 @@ module.exports.open = (inner, options = {}) => {
     return el;
 };
 
-const onMainClick = currify((overlayClick, event) => {
+const onMainClick = (overlayClick, overrides = {}) => (event) => {
+    const {query = _query} = overrides;
+    
     if (event.target !== query('main'))
         return;
 
     close(event);
     overlayClick(event);
-});
+};
 
-const close = (event) => {
+export const close = (event, overrides = {}) => {
+    const {query = _query} = overrides;
+    
     if (event)
         event.stopPropagation();
 
@@ -116,10 +120,8 @@ const close = (event) => {
     afterClose();
 };
 
-module.exports.close = close;
-
-module.exports._optionsStore = optionsStore;
-module.exports._onMainClick = onMainClick;
+export const _optionsStore = optionsStore;
+export const _onMainClick = onMainClick;
 
 function check(inner) {
     if (!inner)

lib/modal.js

@@ -1,13 +1,10 @@
-'use strict';
-
-require('css-modules-require-hook/preset');
+import {createRequire} from 'node:module';
 
+const require = createRequire(import.meta.url);
 const {tryCatch} = require('try-catch');
 
-const mockRequire = require('mock-require');
-
 const autoGlobals = require('auto-globals');
-const {test: tape, stub}= require('supertape');
+const {test: tape, stub} = require('supertape');
 
 const {
     open,
@@ -17,21 +14,15 @@ const {
 } = require('./modal');
 
 const {create} = autoGlobals;
-
-const {reRequire, stopAll} = mockRequire;
-
 const test = autoGlobals(tape);
 
 test('modal: open: main exist', (t) => {
     const el = {};
     const query = stub().returns(el);
 
-    mockRequire('./query', query);
-    
-    const {open} = mockRequire.reRequire('./modal');
-    
-    open({});
-    stopAll();
+    open({}, {
+        query,
+    });
 
     t.calledWith(query, ['main'], 'should call querySelector');
     t.end();
@@ -49,16 +40,11 @@ test('modal: open: beforeShow', (t) => {
         called = true;
     };
 
-    mockRequire('./query', query);
-    
-    const {open} = reRequire('./modal');
-    
     open({}, {
         beforeShow,
+        query,
     });
 
-    stopAll();
-    
     t.calledWithNoArgs(beforeShow, 'should call querySelector');
     t.end();
 });
@@ -77,24 +63,16 @@ test('modal: open: showTitle', (t) => {
 
     const showTitle = stub();
 
-    mockRequire('./query', query);
-    mockRequire('./show-title', showTitle);
-    
-    const {open} = mockRequire.reRequire('./modal');
-    
     open({}, {
+        query,
+        showTitle,
         beforeShow,
         title: 'hello',
         helpers: {
             title: true,
         },
     });
 
-    mockRequire.stop('./query');
-    mockRequire.stop('./show-title');
-    
-    stopAll();
-    
     t.calledWith(showTitle, ['hello', el], 'should call querySelector');
     t.end();
 });
@@ -119,10 +97,6 @@ test('modal: open: images', (t) => {
 
     const parseImages = stub();
 
-    mockRequire('./query', query);
-    mockRequire('./parse-images', parseImages);
-    
-    const {open} = mockRequire.reRequire('./modal');
     const images = [{
         title: 'hello',
         href: 'world',
@@ -131,12 +105,11 @@ test('modal: open: images', (t) => {
     const afterShow = stub();
 
     open(images, {
+        query,
         afterShow,
+        parseImages,
     });
 
-    mockRequire.stop('./query');
-    mockRequire.stop('./parse-images');
-    
     const inner = [{
         title: 'hello',
         href: 'world',
@@ -148,8 +121,6 @@ test('modal: open: images', (t) => {
         helpers: {},
     };
 
-    stopAll();
-    
     t.calledWith(parseImages, [el, inner, options], 'should call querySelector');
     t.end();
 });
@@ -160,7 +131,9 @@ test('modal: onMainClick', (t) => {
         stopPropagation: stub(),
     };
 
-    _onMainClick(overlayClick, e);
+    const click = _onMainClick(overlayClick);
+    
+    click(e);
 
     t.calledWith(overlayClick, [e], 'should call overlayClick');
     t.end();
@@ -172,7 +145,13 @@ test('modal: onMainClick: no main', (t) => {
         target: {},
     };
 
-    _onMainClick(overlayClick, e);
+    const query = stub();
+    
+    const click = _onMainClick(overlayClick, {
+        query,
+    });
+    
+    click(e);
 
     t.notCalled(overlayClick, 'should not call overlayClick');
     t.end();