aleman 1.0.3 → 1.0.5

package/index.html

@@ -3,7 +3,6 @@
 
 <section data-name="hydrate">
     <button data-name="menu-toggler">Menu</button>
-    <button data-name="select-toggler">Select</button>
     <button data-name=start>hello</button>
     <button data-name=stop>world</button>
     <label>
@@ -11,7 +10,7 @@
     </label>
     <label data-name="value"></label>
     <ul data-name="menu" class="menu menu-hidden" style="left: 0; top: 20px;">
-        <li data-name="js-menu-item" class="menu-item icon icon-view menu-item-selected"><label data-menu-path="View">View</label></li><li data-name="js-menu-item" class="menu-item icon icon-edit"><label data-menu-path="Edit">Edit</label></li><li data-name="js-menu-item" class="menu-item icon icon-rename"><label data-menu-path="Rename">Rename</label></li><li data-name="js-menu-item" class="menu-item icon icon-delete"><label data-menu-path="Delete">Delete</label></li><li data-name="js-menu-item" class="menu-item icon icon-pack"><label data-menu-path="Pack">Pack</label></li><li data-name="js-menu-item" class="menu-item icon icon-extract"><label data-menu-path="Extract">Extract</label></li><li data-name="js-menu-item" class="menu-item icon icon-download"><label data-menu-path="Download">Download</label></li><li data-name="js-menu-item" class="menu-item icon icon-upload-to-cloud"><label data-menu-path="Upload To Cloud">Upload To Cloud</label></li><li data-name="js-menu-item" class="menu-item icon icon-cut"><label data-menu-path="Cut">Cut</label></li><li data-name="js-menu-item" class="menu-item icon icon-copy"><label data-menu-path="Copy">Copy</label></li><li data-name="js-menu-item" class="menu-item icon icon-paste"><label data-menu-path="Paste">Paste</label></li><li data-name="js-menu-item" class="menu-item menu-submenu icon icon-new" data-menu="js-submenu"><label data-menu-path="New">New</label><ul data-name="js-menu" class="menu menu-hidden"><li data-name="js-menu-item" class="menu-item icon icon-file"><label data-menu-path="New.File">File</label></li><li data-name="js-menu-item" class="menu-item icon icon-directory"><label data-menu-path="New.Directory">Directory</label></li></ul></li><li data-name="js-menu-item" class="menu-item icon icon-upload"><label data-menu-path="Upload">Upload</label></li><li data-name="js-menu-item" class="menu-item icon icon-upload-from-cloud"><label data-menu-path="Upload From Cloud">Upload From Cloud</label></li><li data-name="js-menu-item" class="menu-item icon icon-toggle-file-selection"><label data-menu-path="Toggle File Selection">Toggle File Selection</label></li><li data-name="js-menu-item" class="menu-item icon icon-unselect-all"><label data-menu-path="(Un)Select All">(Un)Select All</label></li></ul>
+    </ul>
 </section>
 
 
@@ -19,7 +18,10 @@
 <script type="importmap">
     {
       "imports": {
-        "putout": "https://esm.sh/@putout/bundle"
-      }
+          "putout": "https://esm.sh/@putout/bundle",
+          "@putout/processor-html": "https://esm.sh/@putout/processor-html",
+          "html-escaper": "https://esm.sh/html-escaper",
+          "once": "https://esm.sh/once"
+        }
     }
 </script>

package/lib/addons/fixture/start-click.html

@@ -0,0 +1 @@
+<button data-name="start">world</button>

package/lib/addons/fixture/stop-click.html

@@ -0,0 +1 @@
+<button data-name="stop">world</button>

package/lib/addons/input-change.js

@@ -4,7 +4,7 @@ export const events = [
     'change',
 ];
 
-export const filter = ({state, event}) => {
+export const filter = ({event}) => {
     const {key} = event;
     const keys = [
         'Shift',
@@ -37,4 +37,3 @@ function isTextSelected(input) {
     
     return !input.selectionStart && input.selectionEnd === input.value.length;
 }
-

package/lib/addons/menu-item-click.js

@@ -0,0 +1,27 @@
+import {menu} from '../menu/menu.js';
+import {hideMenu} from '../globals/menu/menu.js';
+
+export const name = 'menu';
+export const events = ['click'];
+export const listener = ({event, render, element, state}) => {
+    const index = element.index ?? -1;
+    
+    const menuItemElement = document.elementFromPoint(event.clientX, event.clientY);
+    const name = menuItemElement.textContent.trim();
+    const fn = menu[name];
+    
+    fn();
+    
+    hideMenu({
+        render,
+        state,
+    });
+    
+    render('unselect', {
+        index: index - 1,
+    });
+    
+    render('select', {
+        index,
+    });
+};

package/lib/addons/menu-mouse-over.js

@@ -0,0 +1,9 @@
+import {select} from '../globals/menu/menu.js';
+
+export const name = 'menu';
+export const events = ['mouseenter'];
+export const listener = ({render, storage}) => {
+    storage.set('index', -1);
+    render('unselect-all');
+};
+

package/lib/addons/{menu-click.js → show-menu-click.js}

@@ -1,9 +1,12 @@
+import {menu} from '../menu/menu.js';
+
 export const name = 'menu-toggler';
 export const events = ['click'];
 export const listener = ({render, element}) => {
     const command = element.command === 'show' ? 'hide' : 'show';
     
-    render('menu', {
+    render(['build-menu', 'menu'], {
         command,
+        menu,
     });
 };

package/lib/addons/stop-click.js

@@ -1,7 +1,7 @@
 export const name = 'stop';
 export const events = ['click'];
 export const listener = ({render}) => {
-    return render('remove-button', {
+    render('remove-button', {
         name: 'stop',
     });
 };

package/lib/aleman/add-listeners.js

@@ -1,5 +1,24 @@
 const isFn = (a) => typeof a === 'function';
-const {addEventListener} = document;
+const {addEventListener} = globalThis.document || {};
+
+export function addGlobalKeyListener({render, state, keys, storage}) {
+    const listeners = {};
+    
+    for (const {key, listener, filter} of keys) {
+        listeners[key] = createListener({
+            name: 'document',
+            filter,
+            render,
+            listener,
+            storage,
+            state,
+        });
+    }
+    
+    addEventListener('keydown', (event) => {
+        listeners[event.key]?.(event);
+    });
+}
 
 export function addGlobalListeners({render, state, globals, storage}) {
     for (const {events, listener, filter} of globals) {
@@ -32,10 +51,11 @@ const createListener = ({name, filter = success, state, render, listener, storag
         event,
         element: createElement(name, storage),
         state,
+        storage,
     });
 };
 
-export function addListeners({render, addons, storage}) {
+export function addListeners({render, addons, storage, state}) {
     for (const {name, events, listener, filter} of addons) {
         for (const event of events) {
             const element = document.querySelector(`[data-name='${name}']`);
@@ -49,6 +69,7 @@ export function addListeners({render, addons, storage}) {
                 listener,
                 filter,
                 storage,
+                state,
             }));
         }
     }

package/lib/aleman/aleman.js

@@ -1,14 +1,17 @@
 import {
     addListeners,
     addGlobalListeners,
+    addGlobalKeyListener,
 } from './add-listeners.js';
 import {createRender} from './render.js';
 
-export const hydrate = ({element, rules, addons, globals}) => {
+const isKey = ({key}) => key;
+const notKey = ({key}) => !key;
+
+export const hydrate = ({element, rules, addons, globals, state = {}}) => {
     element = element || document.querySelector('[data-name="hydrate"]') || document.body;
     const html = `<section>${element.innerHTML}</section>`;
     const storage = new Map();
-    const state = {};
     
     const render = createRender(html, {
         rules,
@@ -18,6 +21,27 @@ export const hydrate = ({element, rules, addons, globals}) => {
         state,
     });
     
-    addListeners({render, addons, storage, state});
-    addGlobalListeners({render, globals, storage, state});
+    addListeners({
+        render,
+        addons,
+        storage,
+        state,
+    });
+    
+    const keys = globals.filter(isKey);
+    const other = globals.filter(notKey);
+    
+    addGlobalListeners({
+        render,
+        globals: other,
+        storage,
+        state,
+    });
+    
+    addGlobalKeyListener({
+        render,
+        keys,
+        storage,
+        state,
+    });
 };

package/lib/aleman/render.js

@@ -2,16 +2,17 @@ import {
     parse,
     transform,
     print,
-} from 'https://esm.sh/@putout/bundle';
-import {branch, merge} from 'https://esm.sh/@putout/processor-html@14.0.2';
-import {escape} from 'https://esm.sh/html-escaper';
+    findPlaces,
+} from 'putout';
+import {branch, merge} from '@putout/processor-html';
+import {escape} from 'html-escaper';
 import {addListeners} from './add-listeners.js';
 
 const {isArray} = Array;
 const maybeArray = (a) => isArray(a) ? a : [a];
 const {assign, entries} = Object;
 
-export const createRender = (html, {state, storage, rules, addons, element}) => {
+export const createRender = (html, {headless, state, storage, rules, addons, element}) => {
     const {source} = branch(html)[0];
     const ast = parse(source);
     
@@ -37,6 +38,20 @@ export const createRender = (html, {state, storage, rules, addons, element}) =>
                 }
             }
             
+            const places = findPlaces(ast, source, {
+                rules: currentRules,
+                plugins,
+            });
+            
+            if (!places.length) {
+                restoreState({
+                    state,
+                    element,
+                    storage,
+                });
+                return;
+            }
+            
             transform(ast, '', {
                 rules: currentRules,
                 plugins,
@@ -55,11 +70,17 @@ export const createRender = (html, {state, storage, rules, addons, element}) =>
             const suffix = '<\\section>';
             
             element.innerHTML = merge('', [code]).slice(prefix.length, -suffix.length);
+            
+            if (headless)
+                return;
+            
             addListeners({
                 render,
                 addons,
                 storage,
+                state,
             });
+            
             restoreState({
                 state,
                 element,

package/lib/globals/menu/click.js

@@ -0,0 +1,21 @@
+import {
+    hideMenu,
+    filter as menuFilter,
+} from '../menu/menu.js';
+
+export const events = ['click'];
+export const filter = ({event, state}) => {
+    if (!menuFilter({state}))
+        return false;
+    
+    const {target} = event;
+    
+    return target.dataset.name !== 'menu-toggler';
+};
+
+export const listener = ({render, state}) => {
+    hideMenu({
+        render,
+        state,
+    });
+};

package/lib/globals/menu/context-menu.js

@@ -0,0 +1,13 @@
+import {showMenu} from '../menu/menu.js';
+
+export const events = [
+    'contextmenu',
+];
+
+export const listener = ({render, state, event}) => {
+    event.preventDefault();
+    showMenu({
+        render,
+        state,
+    });
+};

package/lib/globals/menu/down.js

@@ -0,0 +1,21 @@
+import {menu} from '../../menu/menu.js';
+import {select} from './menu.js';
+
+const {keys} = Object;
+
+export const key = 'ArrowDown';
+
+export {filter} from './menu.js';
+
+export const listener = ({render, element}) => {
+    let index = element.index ?? -1;
+    const n = keys(menu).length - 1;
+    
+    if (index < n)
+        ++index;
+    
+    select({
+        render,
+        index,
+    });
+};

package/lib/globals/menu/enter.js

@@ -0,0 +1,33 @@
+import {menu} from '../../menu/menu.js';
+import {hideMenu, select} from './menu.js';
+
+const {values} = Object;
+
+export const key = 'Enter';
+
+export {filter} from './menu.js';
+
+export const listener = ({render, element, state}) => {
+    let index = element.index ?? -1;
+    
+    run({
+        index,
+        render,
+        state,
+    });
+    index = -1;
+    
+    select({
+        render,
+        index,
+    });
+};
+
+function run({index, render, state}) {
+    const fn = values(menu)[index];
+    fn();
+    hideMenu({
+        render,
+        state,
+    });
+}

package/lib/globals/menu/escape.js

@@ -0,0 +1,19 @@
+import {hideMenu, select} from './menu.js';
+
+export const key = 'Escape';
+
+export {filter} from './menu.js';
+
+export const listener = ({render, state}) => {
+    const index = -1;
+    
+    hideMenu({
+        render,
+        state,
+    });
+    
+    select({
+        render,
+        index,
+    });
+};

package/lib/globals/menu/f9.js

@@ -0,0 +1,22 @@
+import {select, showMenu} from './menu.js';
+
+export const key = 'F9';
+
+export const filter = ({state}) => {
+    const {command} = state['menu-toggler'];
+    return command !== 'show';
+};
+
+export const listener = ({render, state}) => {
+    const index = -1;
+    
+    showMenu({
+        render,
+        state,
+    });
+    
+    select({
+        render,
+        index,
+    });
+};

package/lib/globals/menu/menu.js

@@ -0,0 +1,31 @@
+import {menu} from '../../menu/menu.js';
+
+export const filter = ({state}) => {
+    const {command} = state['menu-toggler'];
+    return command !== 'hide';
+};
+
+export const select = ({render, index}) => {
+    render('unselect', {
+        index: index - 1,
+    });
+    
+    render('select', {
+        index,
+    });
+};
+
+export function hideMenu({render, state}) {
+    state['menu-toggler'].command = 'hide';
+    render('menu', {
+        command: 'hide',
+    });
+}
+
+export function showMenu({render, state}) {
+    state['menu-toggler'].command = 'show';
+    render(['build-menu', 'menu'], {
+        command: 'show',
+        menu,
+    });
+}

package/lib/globals/menu/up.js

@@ -0,0 +1,16 @@
+import {select} from './menu.js';
+
+export const key = 'ArrowUp';
+
+export {filter} from './menu.js';
+export const listener = ({render, element}) => {
+    let index = element.index ?? -1;
+    
+    if (index)
+        --index;
+    
+    select({
+        render,
+        index,
+    });
+};

package/lib/globals/menu.js

@@ -0,0 +1,17 @@
+import * as enter from './menu/enter.js';
+import * as escape from './menu/escape.js';
+import * as f9 from './menu/f9.js';
+import * as up from './menu/up.js';
+import * as down from './menu/down.js';
+import * as click from './menu/click.js';
+import * as contextMenu from './menu/context-menu.js';
+
+export default [
+    enter,
+    escape,
+    f9,
+    up,
+    down,
+    click,
+    contextMenu,
+];

package/lib/main.js

@@ -1,8 +1,10 @@
 import * as start from './addons/start-click.js';
 import * as stop from './addons/stop-click.js';
 import * as inputChange from './addons/input-change.js';
-import * as menuClick from './addons/menu-click.js';
-import * as menuNext from './globals/menu-next.js';
+import * as menuClick from './addons/show-menu-click.js';
+import * as menuItemClick from './addons/menu-item-click.js';
+import * as menuMouseOver from './addons/menu-mouse-over.js';
+import menu from './globals/menu.js';
 import {hydrate} from './aleman/aleman.js';
 import {rules} from './rules/index.js';
 
@@ -11,13 +13,20 @@ const addons = [
     stop,
     inputChange,
     menuClick,
+    menuItemClick,
+    menuMouseOver,
 ];
 
-const globals = [
-    menuNext,
-];
+const globals = [...menu];
+
+const state = {
+    'menu-toggler': {
+        command: 'hide',
+    },
+};
 
 hydrate({
+    state,
     rules,
     addons,
     globals,

package/lib/menu/menu.js

@@ -0,0 +1,4 @@
+export const menu = {
+    hello: () => alert('hello'),
+    world: () => alert('world'),
+};

package/lib/rules/README.md

@@ -3,4 +3,7 @@
 - ✅[`set-value`](https://putout.cloudcmd.io/#/gist/29850822bca99f83dbea1b17fda61904/6cdec0ef8c1903cbc9b9df6dfcde6056b8165386);
 - ✅[`remove-button`](https://putout.cloudcmd.io/#/gist/fa2b037a629306cbd43cf42c457c08b9/0cac9c986141d69f9747538816e66b14c4cbd256);
 - ✅[`show-menu`](https://putout.cloudcmd.io/#/gist/884fd40c07b94951de1a9ce99afab015/21d4881b44955b1426f80e87c76b7ad86eeea464);
-- ✅[`select-next`](https://putout.cloudcmd.io/#/gist/10891aa58ff2ecfa1728ed19aeb2e3f2/ce536fb0b414faefbae5d0c8a094517beb1c606e);
+- ✅[`select`](https://putout.cloudcmd.io/#/gist/10891aa58ff2ecfa1728ed19aeb2e3f2/ce536fb0b414faefbae5d0c8a094517beb1c606e);
+- ✅[`unselect`](https://putout.cloudcmd.io/#/gist/aa6006f83aebcb70362a65b3349f8ddd/df1a06b94ccce3134b2246892702bf63dff79145);
+- ✅[`unselect-all`](https://putout.cloudcmd.io/#/gist/ca24f199f508cccb34b11baf726eba83/96f08fa91331ac6265d9f5ff48692c9d4ad1b98b);
+- ✅[`build-menu`](https://putout.cloudcmd.io/#/gist/329dccd5fdc7f8b220be79af405dc9bb/b56df53f52bbe2a300ede38a96d1d2242e60679f);

package/lib/rules/build-menu/fixture/build-menu-fix.js

@@ -0,0 +1,8 @@
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-name='menu-item' className='menu-item'>
+        <label>hello</label>
+    </li>
+    <li data-name='menu-item' className='menu-item'>
+        <label>world</label>
+    </li>
+</ul>;

package/lib/rules/build-menu/fixture/build-menu.js

@@ -0,0 +1 @@
+<ul data-name="menu" class="menu menu-hidden"></ul>;

package/lib/rules/build-menu/fixture/built.js

@@ -0,0 +1,8 @@
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-name='menu-item' class='menu-item'>
+        <label>hello</label>
+    </li>
+    <li data-name='menu-item' class='menu-item'>
+        <label>world</label>
+    </li>
+</ul>;

package/lib/rules/build-menu/index.js

@@ -0,0 +1,66 @@
+import {types, template} from 'putout';
+
+const {entries} = Object;
+const noop = () => {};
+const {jsxText} = types;
+
+export const report = () => `Build menu`;
+
+const createMenuItem = template(`
+    <li data-name="menu-item" className="menu-item">
+        <label>NAME</label>
+    </li>
+`);
+
+const NEWLINE = jsxText('\n');
+const INDENT = jsxText(' ');
+
+const DefaultMenu = {
+    hello: noop,
+    world: noop,
+};
+
+export const fix = ({path, menu}) => {
+    const items = [];
+    
+    for (const [key] of entries(menu)) {
+        const menuItem = createMenuItem();
+        
+        menuItem.children[1].children[0].value = key;
+        items.push(INDENT, menuItem);
+    }
+    
+    items.push(NEWLINE);
+    path.parentPath.node.children = items;
+};
+
+export const traverse = ({options, push}) => ({
+    JSXOpeningElement(path) {
+        const {
+            name = 'menu',
+            menu = DefaultMenu,
+        } = options;
+        
+        if (!checkDataName(path, name))
+            return;
+        
+        if (path.parentPath.node.children.length)
+            return;
+        
+        push({
+            path,
+            menu,
+        });
+    },
+});
+
+function checkDataName(path, dataName) {
+    const {attributes} = path.node;
+    
+    for (const {name, value} of attributes) {
+        if (name.name === 'data-name')
+            return value.value === dataName;
+    }
+    
+    return false;
+}

package/lib/rules/check-data-name.js

@@ -0,0 +1,12 @@
+export function checkDataName(path) {
+    const attributes = path.get('openingElement.attributes');
+    
+    for (const attr of attributes) {
+        const {name, value} = attr.node;
+        
+        if (name.name === 'data-name')
+            return value.value === 'menu';
+    }
+    
+    return false;
+}

package/lib/rules/index.js

@@ -1,4 +1,7 @@
-import * as selectNext from './select-next/index.js';
+import * as unselectAll from './unselect-all/index.js';
+import * as buildMenu from './build-menu/index.js';
+import * as select from './select/index.js';
+import * as unselect from './unselect/index.js';
 import * as menu from './menu/index.js';
 import * as removeButton from './remove-button/index.js';
 import * as setValue from './set-value/index.js';
@@ -7,5 +10,8 @@ export const rules = {
     'set-value': setValue,
     'remove-button': removeButton,
     'menu': menu,
-    'select-next': selectNext,
+    'select': select,
+    'build-menu': buildMenu,
+    'unselect': unselect,
+    'unselect-all': unselectAll,
 };

package/lib/rules/select/fixture/no-data-name.js

@@ -0,0 +1,4 @@
+<ul className="hello">
+    <li className="menu menu-hidden">
+    </li>
+</ul>;

package/lib/rules/select/fixture/no-next.js

@@ -0,0 +1,5 @@
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+        <label data-menu-path="View">View</label>
+    </li>
+</ul>;

package/lib/rules/select/fixture/no-parent.js

@@ -0,0 +1,2 @@
+<li className="menu menu-hidden">
+</li>;

package/lib/rules/select/fixture/select-fix.js

@@ -0,0 +1,8 @@
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+        <label data-menu-path="View">View</label>
+    </li>
+    <li data-name="menu-item" className='menu-item icon icon-edit menu-item-selected'>
+        <label data-menu-path="Edit">Edit</label>
+    </li>
+</ul>;

package/lib/rules/select/fixture/select.js

@@ -0,0 +1,8 @@
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+        <label data-menu-path="View">View</label>
+    </li>
+    <li data-name="menu-item" className="menu-item icon icon-edit">
+        <label data-menu-path="Edit">Edit</label>
+    </li>
+</ul>;

package/lib/rules/select/fixture/wrong-data-name.js

@@ -0,0 +1,4 @@
+<ul data-name="hello" className="hello">
+    <li className="menu menu-hidden">
+    </li>
+</ul>;

package/lib/rules/select/index.js

@@ -0,0 +1,61 @@
+import {operator, types} from 'putout';
+
+const {isJSXElement} = types;
+const {setLiteralValue} = operator;
+
+export const report = () => `Select item`;
+
+export const fix = (path) => {
+    const {value} = path.node;
+    setLiteralValue(value, `${value.value} menu-item-selected`);
+};
+
+export const traverse = ({options, push}) => ({
+    JSXOpeningElement(path) {
+        if (path.node.name.name !== 'li')
+            return;
+        
+        const {index = 1} = options;
+        
+        if (!isJSXElement(path.parentPath.parentPath))
+            return;
+        
+        if (!checkDataName(path.parentPath.parentPath))
+            return;
+        
+        const children = path.parentPath
+            .parentPath
+            .get('children')
+            .filter(isJSXElement);
+        
+        const next = children[index];
+        
+        if (!next)
+            return;
+        
+        for (const attr of next.get('openingElement.attributes')) {
+            const {name, value} = attr.node;
+            
+            if (name.name !== 'className')
+                continue;
+            
+            if (!value.value.includes('menu-item-selected')) {
+                push(attr);
+                break;
+            }
+        }
+    },
+});
+
+function checkDataName(path) {
+    const attributes = path.get('openingElement.attributes');
+    
+    for (const attr of attributes) {
+        const {name, value} = attr.node;
+        
+        if (name.name === 'data-name')
+            return value.value === 'menu';
+    }
+    
+    return false;
+}

package/lib/rules/set-value/fixture/no-data-name.js

@@ -0,0 +1 @@
+<label className="hello">x</label>;

package/lib/rules/set-value/fixture/not-label.js

@@ -0,0 +1 @@
+<section data-name="x">x</section>;

package/lib/rules/unselect/fixture/no-data-name.js

@@ -0,0 +1,4 @@
+<ul className="hello">
+    <li className="menu menu-hidden">
+    </li>
+</ul>;

package/lib/rules/unselect/fixture/no-parent.js

@@ -0,0 +1,2 @@
+<li className="menu menu-hidden">
+</li>;

package/lib/rules/unselect/fixture/unselect-fix.js

@@ -0,0 +1,8 @@
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-name="menu-item" className='menu-item icon icon-view'>
+        <label data-menu-path="View">View</label>
+    </li>
+    <li data-name="menu-item" className="menu-item icon icon-edit">
+        <label data-menu-path="Edit">Edit</label>
+    </li>
+</ul>;

package/lib/rules/unselect/fixture/unselect.js

@@ -0,0 +1,8 @@
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+        <label data-menu-path="View">View</label>
+    </li>
+    <li data-name="menu-item" className="menu-item icon icon-edit">
+        <label data-menu-path="Edit">Edit</label>
+    </li>
+</ul>;

package/lib/rules/unselect/index.js

@@ -0,0 +1,39 @@
+import {operator, types} from 'putout';
+import {checkDataName} from '../check-data-name.js';
+
+const {isJSXElement} = types;
+const {setLiteralValue} = operator;
+
+export const report = () => `Select next item`;
+
+export const fix = ({path}) => {
+    const {value} = path.node;
+    const newValue = value.value.replace(/\s?menu-item-selected/, '');
+    
+    setLiteralValue(value, newValue);
+};
+
+export const traverse = ({push}) => ({
+    JSXOpeningElement(path) {
+        if (path.node.name.name !== 'li')
+            return;
+        
+        if (!isJSXElement(path.parentPath.parentPath))
+            return;
+        
+        if (!checkDataName(path.parentPath.parentPath))
+            return;
+        
+        for (const attr of path.get('attributes')) {
+            const {name, value} = attr.node;
+            
+            if (name.name !== 'className')
+                continue;
+            
+            if (value.value.includes('menu-item-selected'))
+                push({
+                    path: attr,
+                });
+        }
+    },
+});

package/lib/rules/unselect-all/fixture/no-data-name.js

@@ -0,0 +1,4 @@
+<ul className="hello">
+    <li className="menu menu-hidden">
+    </li>
+</ul>;

package/lib/rules/unselect-all/fixture/no-parent.js

@@ -0,0 +1,2 @@
+<li className="menu menu-hidden">
+</li>;

package/lib/rules/{select-next/fixture/select-next-fix.js → unselect-all/fixture/unselect-all-fix.js}

@@ -1,8 +1,8 @@
 <ul data-name="menu" class="menu menu-hidden">
-    <li data-name="menu-item" class='menu-item icon icon-view'>
+    <li data-name="menu-item" className='menu-item icon icon-view'>
         <label data-menu-path="View">View</label>
     </li>
-    <li data-name="menu-item" class='menu-item icon icon-edit menu-item-selected'>
+    <li data-name="menu-item" className='menu-item icon icon-edit'>
         <label data-menu-path="Edit">Edit</label>
     </li>
 </ul>;

package/lib/rules/unselect-all/fixture/unselect-all.js

@@ -0,0 +1,8 @@
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+        <label data-menu-path="View">View</label>
+    </li>
+    <li data-name="menu-item" className="menu-item icon icon-edit menu-item-selected">
+        <label data-menu-path="Edit">Edit</label>
+    </li>
+</ul>;

package/lib/rules/unselect-all/index.js

@@ -0,0 +1,46 @@
+import {operator, types} from 'putout';
+import {checkDataName} from '../check-data-name.js';
+
+const {isJSXElement} = types;
+const {setLiteralValue} = operator;
+
+export const report = () => `Unselect all`;
+
+export const fix = ({path}) => {
+    const {value} = path.node;
+    const newValue = value.value.replace(/\s?menu-item-selected/, '');
+    
+    setLiteralValue(value, newValue);
+};
+
+export const traverse = ({push}) => ({
+    JSXOpeningElement(path) {
+        if (path.node.name.name !== 'li')
+            return;
+        
+        if (!isJSXElement(path.parentPath.parentPath))
+            return;
+        
+        if (!checkDataName(path.parentPath.parentPath))
+            return;
+        
+        const children = path.parentPath
+            .parentPath
+            .get('children')
+            .filter(isJSXElement);
+        
+        for (const child of children) {
+            for (const attr of child.get('openingElement.attributes')) {
+                const {name, value} = attr.node;
+                
+                if (name.name !== 'className')
+                    continue;
+                
+                if (value.value.includes('menu-item-selected'))
+                    push({
+                        path: attr,
+                    });
+            }
+        }
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aleman",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
   "description": "🐊Putout-based framework for web",
@@ -13,6 +13,10 @@
     "type": "git",
     "url": "git+https://github.com/coderaiser/putout.git"
   },
+  "imports": {
+    "#test": "./test/test.js",
+    "#rules": "./lib/rules/index.js"
+  },
   "scripts": {
     "test": "madrun test",
     "watch:test": "madrun watch:test",
@@ -24,6 +28,9 @@
     "report": "madrun report"
   },
   "dependencies": {
+    "@putout/processor-html": "^14.0.2",
+    "html-escaper": "^3.0.3",
+    "once": "^1.4.0",
     "putout": "^40.5.1"
   },
   "keywords": [
@@ -39,8 +46,11 @@
     "eslint": "^9.0.0",
     "eslint-plugin-n": "^17.0.0",
     "eslint-plugin-putout": "^28.0.0",
+    "just-kebab-case": "^4.2.0",
     "madrun": "^11.0.0",
-    "nodemon": "^3.0.1"
+    "nodemon": "^3.0.1",
+    "supertape": "^11.3.0",
+    "try-catch": "^3.0.1"
   },
   "license": "MIT",
   "engines": {

package/lib/globals/menu-next.js

@@ -1,20 +0,0 @@
-export const events = ['keydown'];
-
-export const filter = ({event, state}) => {
-    if (event.key !== 'ArrowDown')
-        return false;
-    
-    const {command} = state['menu-toggler'] || {
-        command: 'show',
-    };
-    
-    return command !== 'hide';
-};
-export const listener = ({state, render, element}) => {
-    const index = element.index || 0;
-    
-    render('select-next', {
-        index: index + 1,
-    });
-};
-

package/lib/rules/select-next/fixture/select-next.js

@@ -1,8 +0,0 @@
-<ul data-name="menu" class="menu menu-hidden">
-    <li data-name="menu-item" class="menu-item icon icon-view menu-item-selected">
-        <label data-menu-path="View">View</label>
-    </li> 
-    <li data-name="menu-item" class="menu-item icon icon-edit">
-        <label data-menu-path="Edit">Edit</label>
-    </li>    
-</ul>

package/lib/rules/select-next/index.js

@@ -1,69 +0,0 @@
-import {operator, types} from 'putout';
-
-const {isJSXElement} = types;
-const {setLiteralValue} = operator;
-
-export const report = () => `Select next item`;
-
-export const fix = ({path, next}) => {
-    const {value} = path.node;
-    const newValue = value.value.replace(/\s?menu-item-selected/, '');
-    
-    setLiteralValue(value, newValue);
-    
-    for (const {name, value} of next.node.openingElement.attributes) {
-        if (name.name !== 'className')
-            continue;
-        
-        setLiteralValue(value, `${value.value} menu-item-selected`);
-    }
-};
-
-export const traverse = ({options, push}) => ({
-    JSXOpeningElement(path) {
-        if (path.node.name.name !== 'li')
-            return;
-        
-        const {index = 1} = options;
-        
-        const attributes = path.parentPath.parentPath.get('openingElement.attributes');
-        
-        for (const attr of attributes) {
-            const {name, value} = attr.node;
-            
-            if (name.name !== 'data-name')
-                continue;
-            
-            if (value.value !== 'menu')
-                return;
-            
-            break;
-        }
-        
-        const children = path.parentPath
-            .parentPath
-            .get('children')
-            .filter(isJSXElement);
-        
-        if (index !== children.indexOf(path.parentPath) + 1)
-            return;
-        
-        const next = children[index];
-        
-        if (!next)
-            return;
-        
-        for (const attr of path.get('attributes')) {
-            const {name, value} = attr.node;
-            
-            if (name.name !== 'className')
-                continue;
-            
-            if (value.value.includes('menu-item-selected'))
-                push({
-                    path: attr,
-                    next,
-                });
-        }
-    },
-});