aleman 1.4.0 → 1.4.2

package/ChangeLog

@@ -1,3 +1,17 @@
+2025.09.07, v1.4.2
+
+feature:
+- 1a1899e aleman: menu: item-click: no data-menu find on element
+
+2025.09.06, v1.4.1
+
+feature:
+- f745059 aleman: menu: build-menu: simplify
+- 88f4f81 aleman: menu: rules: hide-submenu: siplify
+- ffe78e2 aleman: menu: jsx-operator: containsClass
+- 779f1e6 aleman: menu: rules: menu: simplify
+- fe341ff menu: set-position: simplify
+
 2025.09.04, v1.4.0
 
 feature:

package/menu/addons/item-click.js

@@ -7,9 +7,8 @@ export const createItemClick = (name) => ({
 });
 
 const listener = ({event, options}) => {
-    const menuItemElement = document.elementFromPoint(event.clientX, event.clientY);
-    const {menuPath} = menuItemElement.dataset;
     const {menu} = options;
+    const menuPath = getMenuPath(event);
     const fn = jessy(menuPath, menu);
     
     setTimeout(fn);
@@ -21,3 +20,14 @@ const listener = ({event, options}) => {
         showSubmenu: false,
     };
 };
+
+function getMenuPath(event) {
+    let menuItemElement = document.elementFromPoint(event.clientX, event.clientY);
+    const {menuPath} = menuItemElement.dataset;
+    
+    if (!menuPath)
+        menuItemElement = menuItemElement.querySelector('[data-menu-path]');
+    
+    return menuItemElement.dataset.menuPath;
+}
+

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

@@ -1,7 +1,7 @@
 import {template} from 'putout';
-import {checkDataName} from '../check-data-name.js';
 import {
     appendAttributeValue,
+    hasDataName,
     setAttributeValue,
 } from '../jsx-operator.js';
 
@@ -26,7 +26,7 @@ const DefaultMenu = {
 };
 
 export const fix = ({path, menu, icon, name = ''}) => {
-    const {children} = path.parentPath.node;
+    const {children} = path.node;
     
     for (const [key, value] of entries(menu)) {
         const menuItem = createMenuItem();
@@ -45,13 +45,13 @@ export const fix = ({path, menu, icon, name = ''}) => {
             setSubmenu(menuItem);
             menuItem.children.push(createMenu());
             
-            const openingElement = path.parentPath
+            const elementPath = path
                 .get('children')
                 .at(-1)
-                .get('children.1.openingElement');
+                .get('children.1');
             
             fix({
-                path: openingElement,
+                path: elementPath,
                 icon,
                 menu: value,
                 name: key,
@@ -61,17 +61,17 @@ export const fix = ({path, menu, icon, name = ''}) => {
 };
 
 export const traverse = ({options, push}) => ({
-    JSXOpeningElement(path) {
+    JSXElement(path) {
         const {
             name = 'menu',
             menu = DefaultMenu,
             icon = false,
         } = options;
         
-        if (!checkDataName(path, name))
+        if (!hasDataName(path, name))
             return;
         
-        if (path.parentPath.node.children.length)
+        if (path.node.children.length)
             return;
         
         push({

package/menu/rules/hide-submenu/fixture/no-menu.js

@@ -0,0 +1,16 @@
+<ul data-name="hello" className="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" className="menu-item icon icon-view">
+        <label data-menu-path="Upload">Upload</label>
+    </li>
+    <li data-menu-path="New" data-name="menu-item" className="menu-item icon icon-edit menu-item-selected menu-submenu-show">
+        <label data-menu-path="New">New</label>
+        <ul data-name="menu" className="menu menu-hidden">
+            <li data-menu-path="New.File" data-name="menu-item" className="menu-item icon icon-view">
+                <label data-menu-path="New.File">File</label>
+            </li>
+            <li data-menu-path="New.Directory" data-name="menu-item" className="menu-item icon icon-edit">
+                <label data-menu-path="New.Directory">Directory</label>
+            </li>
+        </ul>
+    </li>
+</ul>;

package/menu/rules/hide-submenu/index.js

@@ -1,41 +1,33 @@
-import {operator} from 'putout';
-import {checkDataName} from '../check-data-name.js';
-import {getAttributePath} from '../jsx-operator.js';
+import {
+    hasTagName,
+    containsClassName,
+    removeClassName,
+    hasDataName,
+} from '../jsx-operator.js';
 
-const {setLiteralValue} = operator;
+const CLASS = 'menu-submenu-show';
 
 export const report = () => `Hide submenu`;
 
 export const fix = (path) => {
-    const {value} = path.node;
-    const newValue = value.value;
-    
-    setLiteralValue(value, newValue
-        .replace('menu-submenu-show', '')
-        .trim());
+    removeClassName(path, CLASS);
 };
 
 export const traverse = ({push, options}) => ({
-    JSXOpeningElement(path) {
+    JSXElement(path) {
         const {name, showSubmenu} = options;
-        
-        if (path.node.name.name !== 'li')
-            return;
+        const {parentPath} = path;
         
         if (showSubmenu)
             return;
         
-        const openingElementPath = path.parentPath.parentPath.get('openingElement');
+        if (!hasTagName(path, 'li'))
+            return;
         
-        if (!checkDataName(openingElementPath, name))
+        if (!hasDataName(parentPath, name))
             return false;
         
-        const attributePath = getAttributePath(path, 'className');
-        
-        if (!attributePath)
-            return;
-        
-        if (attributePath.node.value.value.includes('menu-submenu-show'))
-            push(attributePath);
+        if (containsClassName(path, CLASS))
+            push(path);
     },
 });

package/menu/rules/jsx-operator.js

@@ -1,8 +1,12 @@
-import {operator} from 'putout';
+import {operator, types} from 'putout';
 
+const {isJSXElement} = types;
 const {setLiteralValue} = operator;
 
 export function getAttributeValue(path, attributeName) {
+    if (isJSXElement(path))
+        path = path.get('openingElement');
+    
     const {attributes} = path.node;
     
     for (const {name, value} of attributes) {
@@ -28,6 +32,9 @@ export function getAttributeNode(node, name) {
 }
 
 export function getAttributePath(path, name) {
+    if (isJSXElement(path))
+        path = path.get('openingElement');
+    
     let result = null;
     const attributes = path.get('attributes');
     
@@ -45,9 +52,6 @@ export function appendAttributeValue(path, name, value) {
     const node = path.node || path;
     const attributeNode = getAttributeNode(node, name);
     
-    if (!attributeNode)
-        return;
-    
     if (attributeNode.value.value.includes(value))
         return;
     
@@ -55,24 +59,44 @@ export function appendAttributeValue(path, name, value) {
 }
 
 export function setAttributeValue(node, name, value) {
+    node = node.node || node;
+    
     const attributeNode = getAttributeNode(node, name);
     
     if (attributeNode)
         setLiteralValue(attributeNode.value, value);
 }
 
+export function addClassName(path, name) {
+    appendAttributeValue(path, 'className', name);
+}
+
+export function removeClassName(path, name) {
+    removeAttributeValue(path, 'className', name);
+}
+
+export function containsClassName(path, className) {
+    const classNameValue = getAttributeValue(path, 'className');
+    return classNameValue.includes(className);
+}
+
+export const hasTagName = (path, name) => path.node.openingElement.name.name === name;
+
 export function removeAttributeValue(path, name, attributeValue) {
     if (!path)
         return;
     
-    const node = path.node || path;
+    const {node} = path;
     const classAttribute = getAttributeNode(node, name);
     
-    if (!classAttribute)
-        return;
-    
     const {value} = classAttribute.value;
     
     if (value.includes(attributeValue))
         setLiteralValue(classAttribute.value, value.replace(RegExp(`\\s?${attributeValue}`), ''));
 }
+
+export function hasDataName(path, value = 'menu') {
+    const attribute = getAttributeValue(path, 'data-name');
+    
+    return attribute === value;
+}

package/menu/rules/menu/index.js

@@ -1,7 +1,9 @@
-import {operator} from 'putout';
-import {checkDataName} from '../check-data-name.js';
-
-const {setLiteralValue} = operator;
+import {
+    addClassName,
+    containsClassName,
+    hasDataName,
+    removeClassName,
+} from '../jsx-operator.js';
 
 export const report = ({command}) => {
     const [first, ...rest] = command;
@@ -10,44 +12,27 @@ export const report = ({command}) => {
 };
 
 export const fix = ({path, command}) => {
-    const {value} = path.node;
-    let newValue;
-    
-    if (command === 'show')
-        newValue = value.value.replace(/\s?menu-hidden/, '');
-    else
-        newValue = value.value + ' menu-hidden';
+    if (command === 'show') {
+        removeClassName(path, 'menu-hidden');
+        return;
+    }
     
-    setLiteralValue(value, newValue);
+    addClassName(path, 'menu-hidden');
 };
 
 export const traverse = ({push, options}) => ({
-    JSXOpeningElement(path) {
+    JSXElement(path) {
         const {name, command} = options;
-        const attributes = path.get('attributes');
         
-        const opengineElementPath = path.parentPath.get('openingElement');
-        
-        if (!checkDataName(opengineElementPath, name))
+        if (!hasDataName(path, name))
             return false;
         
-        for (const attr of attributes) {
-            const {name, value} = attr.node;
-            
-            if (name.name !== 'className')
-                continue;
-            
-            if (command === 'show' && value.value.includes('menu-hidden'))
-                push({
-                    command: 'show',
-                    path: attr,
-                });
-            
-            if (command === 'hide' && !value.value.includes('menu-hidden'))
-                push({
-                    command,
-                    path: attr,
-                });
-        }
+        const shown = !containsClassName(path, 'menu-hidden');
+        
+        if (command === 'show' && !shown || command === 'hide' && shown)
+            push({
+                command,
+                path,
+            });
     },
 });

package/menu/rules/select/fixture/submenu-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 menu-item-selected menu-submenu-show'>
+        <label data-menu-path="Edit">Edit</label>
+    </li>
+</ul>;

package/menu/rules/select/fixture/submenu.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/menu/rules/select/index.js

@@ -1,8 +1,8 @@
 import {operator, types} from 'putout';
-import {checkDataName} from '../check-data-name.js';
 import {
     appendAttributeValue,
     getAttributePath,
+    hasDataName,
     removeAttributeValue,
 } from '../jsx-operator.js';
 
@@ -38,18 +38,15 @@ export const traverse = ({options, push}) => ({
         if (path.node.name.name !== 'li')
             return;
         
-        if (!isJSXElement(path.parentPath.parentPath))
-            return;
+        const parentParentPath = path.parentPath.parentPath;
         
-        const openingElementPath = path.parentPath.parentPath.get('openingElement');
+        if (!isJSXElement(parentParentPath))
+            return;
         
-        if (!checkDataName(openingElementPath, name))
+        if (!hasDataName(parentParentPath, name))
             return;
         
-        const children = path.parentPath
-            .parentPath
-            .get('children')
-            .filter(isJSXElement);
+        const children = parentParentPath.get('children').filter(isJSXElement);
         
         const prev = children[index - 1];
         const current = children[index];
@@ -58,8 +55,7 @@ export const traverse = ({options, push}) => ({
         if (!current)
             return;
         
-        const currentOpeningElement = current.get('openingElement');
-        const attributePath = getAttributePath(currentOpeningElement, 'className');
+        const attributePath = getAttributePath(current, 'className');
         
         push({
             path: attributePath,
@@ -78,8 +74,6 @@ function unselect(path) {
 function addShowSubmenu(path, {showSubmenu}) {
     if (showSubmenu)
         return appendAttributeValue(path, 'className', 'menu-submenu-show');
-    
-    removeAttributeValue(path, 'className', 'menu-submenu-show');
 }
 
 function removeShowSubmenu(path) {

package/menu/rules/set-position/fixture/same-position.js

@@ -0,0 +1,2 @@
+<ul data-name="menu" className="menu menu-hidden" style="left: 0; top: 20px;">
+</ul>;

package/menu/rules/set-position/index.js

@@ -1,5 +1,10 @@
-import {operator, types} from 'putout';
-import {checkDataName} from '../check-data-name.js';
+import {types} from 'putout';
+import {
+    getAttributePath,
+    getAttributeValue,
+    hasDataName,
+    setAttributeValue,
+} from '../jsx-operator.js';
 
 const {
     stringLiteral,
@@ -7,56 +12,51 @@ const {
     jsxAttribute,
 } = types;
 
-const {setLiteralValue} = operator;
-
 export const report = () => `Set position`;
 
 export const fix = ({path, attr, x, y}) => {
     const style = `left: ${x}px; top: ${y}px;`;
     
     if (attr) {
-        setLiteralValue(attr.value, style);
-        
+        setAttributeValue(path, 'style', style);
         return;
     }
     
-    const {attributes} = path.node;
-    
+    const {attributes} = path.node.openingElement;
     const attribute = jsxAttribute(jsxIdentifier('style'), stringLiteral(style));
     
     attributes.push(attribute);
 };
 
 export const traverse = ({options, push}) => ({
-    JSXOpeningElement(path) {
+    JSXElement(path) {
         const {name = 'menu', position = {}} = options;
         const {x = 0, y = 20} = position;
         
-        const openingElementPath = path.parentPath.get('openingElement');
-        
-        if (!checkDataName(openingElementPath, name))
+        if (!hasDataName(path, name))
             return;
         
-        for (const attr of path.node.attributes) {
-            if (attr.name.name !== 'style')
-                continue;
-            
-            const [x1, y1] = parsePosition(attr.value.value);
-            
-            if (x === x1 && y === y1)
-                return;
-            
+        const styleAttributeValue = getAttributeValue(path, 'style');
+        
+        if (!styleAttributeValue) {
             push({
                 path,
-                attr,
                 x,
                 y,
             });
             return;
         }
         
+        const [x1, y1] = parsePosition(styleAttributeValue);
+        
+        if (x === x1 && y === y1)
+            return;
+        
+        const styleAttributePath = getAttributePath(path, 'style');
+        
         push({
             path,
+            attr: styleAttributePath,
             x,
             y,
         });
@@ -68,5 +68,8 @@ function parsePosition(str) {
         .split(/;|left|\s|:|top|px/)
         .filter(Boolean);
     
-    return [x, y];
+    return [
+        Number(x),
+        Number(y),
+    ];
 }

package/menu/rules/submenu/index.js

@@ -1,8 +1,8 @@
 import {operator, types} from 'putout';
-import {checkDataName} from '../check-data-name.js';
 import {
     getAttributePath,
     getAttributeValue,
+    hasDataName,
     removeAttributeValue,
 } from '../jsx-operator.js';
 
@@ -48,7 +48,7 @@ export const traverse = ({options, push}) => ({
         
         const openingElementPath = path.parentPath.parentPath.get('openingElement');
         
-        if (!checkDataName(openingElementPath))
+        if (!hasDataName(openingElementPath))
             return;
         
         const children = path.parentPath

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

@@ -1,5 +1,5 @@
 import {operator, types} from 'putout';
-import {checkDataName} from '../check-data-name.js';
+import {hasDataName} from '../jsx-operator.js';
 
 const {isJSXElement} = types;
 const {setLiteralValue} = operator;
@@ -28,7 +28,7 @@ export const traverse = ({push, options}) => ({
         
         const openingElementPath = path.parentPath.parentPath.get('openingElement');
         
-        if (!checkDataName(openingElementPath, name))
+        if (!hasDataName(openingElementPath, name))
             return;
         
         const children = path.parentPath

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aleman",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "type": "module",
   "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
   "description": "🐊Putout-based framework for web",

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

@@ -1,7 +0,0 @@
-import {getAttributeValue} from './jsx-operator.js';
-
-export function checkDataName(path, value = 'menu') {
-    const attribute = getAttributeValue(path, 'data-name');
-    
-    return attribute === value;
-}