aleman 1.4.3 → 1.4.4

package/ChangeLog

@@ -1,3 +1,8 @@
+2025.09.08, v1.4.4
+
+feature:
+- c69b6da aleman: menu: simplify
+
 2025.09.07, v1.4.3
 
 feature:

package/menu/addons/item-click.js

@@ -30,4 +30,3 @@ function getMenuPath(event) {
     
     return menuItemElement.dataset.menuPath;
 }
-

package/menu/importmap.js

@@ -1,6 +1,6 @@
 export const importmap = {
     imports: {
-        'putout': 'https://esm.sh/@putout/bundle@4.6.0't add .,
+        'putout': 'https://esm.sh/@putout/bundle@4.6.0',
         '@putout/processor-html': 'https://esm.sh/@putout/processor-html',
         'fullstore': 'https://esm.sh/fullstore',
         'jessy': 'https://esm.sh/jessy',

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

@@ -1,6 +1,6 @@
 import {template} from 'putout';
 import {
-    appendAttributeValue,
+    addAttributeValue,
     hasDataName,
     setAttributeValue,
 } from '../jsx-operator.js';
@@ -45,9 +45,7 @@ export const fix = ({path, menu, icon, name = ''}) => {
             setSubmenu(menuItem);
             menuItem.children.push(createMenu());
             
-            const elementPath = path
-                .get('children')
-                .at(-1)
+            const elementPath = path.get('children').at(-1)
                 .get('children.1');
             
             fix({
@@ -83,7 +81,7 @@ export const traverse = ({options, push}) => ({
 });
 
 function setSubmenu(menuItem) {
-    appendAttributeValue(menuItem, 'className', 'menu-submenu');
+    addAttributeValue(menuItem, 'className', 'menu-submenu');
 }
 
 function setDataMenuPath(key, name, menuItem) {
@@ -92,7 +90,7 @@ function setDataMenuPath(key, name, menuItem) {
 }
 
 function setIcon(name, menuItem) {
-    appendAttributeValue(menuItem, 'className', `icon ${getIconName(name)}`);
+    addAttributeValue(menuItem, 'className', `icon ${getIconName(name)}`);
 }
 
 function getIconName(name) {

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

@@ -0,0 +1,18 @@
+// second selected
+<ul data-name="menu" 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

@@ -32,4 +32,3 @@ export const traverse = ({push, options}) => ({
             push(path);
     },
 });
-

package/menu/rules/jsx-operator.js

@@ -1,24 +1,22 @@
 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;
+    const attribute = getAttributeNode(path, attributeName);
     
-    for (const {name, value} of attributes) {
-        if (name.name === attributeName)
-            return value.value;
-    }
+    if (!attribute)
+        return '';
     
-    return '';
+    return attribute.value.value;
 }
 
-export function getAttributeNode(node, name) {
+export function getAttributeNode(path, name) {
     let result = null;
+    
+    const node = path.node || path;
     const {attributes} = node.openingElement;
     
     for (const attr of attributes) {
@@ -48,7 +46,7 @@ export function getAttributePath(path, name) {
     return result;
 }
 
-export function appendAttributeValue(path, name, value) {
+export function addAttributeValue(path, name, value) {
     const node = path.node || path;
     const attributeNode = getAttributeNode(node, name);
     
@@ -68,7 +66,7 @@ export function setAttributeValue(node, name, value) {
 }
 
 export function addClassName(path, name) {
-    appendAttributeValue(path, 'className', name);
+    addAttributeValue(path, 'className', name);
 }
 
 export function removeClassName(path, name) {
@@ -95,6 +93,5 @@ export function removeAttributeValue(path, name, attributeValue) {
 
 export function hasDataName(path, value = 'menu') {
     const attribute = getAttributeValue(path, 'data-name');
-    
     return attribute === value;
 }

package/menu/rules/select/index.js

@@ -1,6 +1,6 @@
 import {operator, types} from 'putout';
 import {
-    appendAttributeValue,
+    addAttributeValue,
     getAttributePath,
     hasDataName,
     removeAttributeValue,
@@ -73,7 +73,7 @@ function unselect(path) {
 
 function addShowSubmenu(path, {showSubmenu}) {
     if (showSubmenu)
-        return appendAttributeValue(path, 'className', 'menu-submenu-show');
+        return addAttributeValue(path, 'className', 'menu-submenu-show');
 }
 
 function removeShowSubmenu(path) {

package/menu/rules/submenu/fixture/last-selected-fix.js

@@ -45,7 +45,7 @@
         <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'>
+        <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>

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

@@ -0,0 +1,54 @@
+// second selected
+<ul data-name="menu" class="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">
+        <label data-menu-path="New">New</label>
+            <ul data-name="menu" class="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>;
+
+
+// first selected
+<ul data-name="menu" class="menu menu-hidden">
+    <li data-menu-path="Upload" data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+        <label data-menu-path="Upload">Upload</label>
+    </li>
+    <li data-menu-path="New" data-name="menu-item" className="menu-item icon icon-edit">
+        <label data-menu-path="New">New</label>
+            <ul data-name="menu" class="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>;
+
+// second selected, submenu first selected
+<ul data-name="menu" class="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">
+        <label data-menu-path="New">New</label>
+            <ul data-name="menu" class="menu menu-hidden">
+                <li data-menu-path="New.File" data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+                    <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/submenu/index.js

@@ -1,40 +1,37 @@
 import {operator, types} from 'putout';
 import {
-    getAttributePath,
+    addAttributeValue,
+    addClassName,
     getAttributeValue,
     hasDataName,
     removeAttributeValue,
+    removeClassName,
 } from '../jsx-operator.js';
 
+const {hasTagName} = operator;
+
 const {isJSXElement} = types;
-const {setLiteralValue} = operator;
 
 export const report = ({insideSubmenu}) => `${insideSubmenu ? 'Show' : 'Hide'} submenu`;
 
 export const fix = ({path, prev, next, insideSubmenu}) => {
-    const {value} = path.node;
     unselect(prev);
     unselect(next);
     
     if (!insideSubmenu) {
-        const newValue = value.value.replace(/\s?menu-item-selected/, '');
-        setLiteralValue(value, newValue);
-        
+        removeClassName(path, 'menu-item-selected');
         return;
     }
     
-    if (!value.value.includes('menu-item-selected')) {
-        const newValue = `${value.value} menu-item-selected`;
-        setLiteralValue(value, newValue);
-    }
+    addClassName(path, 'menu-item-selected');
 };
 
 export const traverse = ({options, push}) => ({
-    JSXOpeningElement(path) {
-        if (path.node.name.name !== 'li')
+    JSXElement(path) {
+        if (!hasTagName(path, 'li'))
             return;
         
-        if (!isJSXElement(path.parentPath.parentPath))
+        if (!isJSXElement(path.parentPath))
             return;
         
         const {insideSubmenu = true, submenuIndex = 1} = options;
@@ -43,16 +40,13 @@ export const traverse = ({options, push}) => ({
         if (!isJSXElement(parentMenu))
             return;
         
-        if (!isParentSelected(parentMenu))
+        if (!isParentSelected(path.parentPath.parentPath))
             return;
         
-        const openingElementPath = path.parentPath.parentPath.get('openingElement');
-        
-        if (!hasDataName(openingElementPath))
+        if (!hasDataName(path.parentPath))
             return;
         
         const children = path.parentPath
-            .parentPath
             .get('children')
             .filter(isJSXElement);
         
@@ -63,11 +57,8 @@ export const traverse = ({options, push}) => ({
         if (!current)
             return;
         
-        const currentOpeningElementPath = current.get('openingElement');
-        const currentClassPath = getAttributePath(currentOpeningElementPath, 'className');
-        
         push({
-            path: currentClassPath,
+            path: current,
             insideSubmenu,
             prev,
             next,
@@ -76,9 +67,7 @@ export const traverse = ({options, push}) => ({
 });
 
 function isParentSelected(path) {
-    const openingElement = path.get('openingElement');
-    const classAttributeValue = getAttributeValue(openingElement, 'className');
-    
+    const classAttributeValue = getAttributeValue(path, 'className');
     return classAttributeValue.includes('menu-item-selected');
 }
 

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

@@ -1,53 +1,51 @@
 import {operator, types} from 'putout';
-import {hasDataName} from '../jsx-operator.js';
+import {
+    getAttributeValue,
+    hasDataName,
+    removeClassName,
+} from '../jsx-operator.js';
+
+const {
+    hasTagName,
+    setLiteralValue,
+} = operator;
 
 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);
+    removeClassName(path, 'menu-item-selected');
 };
 
 export const traverse = ({push, options}) => ({
-    JSXOpeningElement(path) {
+    JSXElement(path) {
         const {index, name} = options;
         
         if (index !== -1)
             return;
         
-        if (path.node.name.name !== 'li')
+        if (!hasTagName(path, 'li'))
             return;
         
-        if (!isJSXElement(path.parentPath.parentPath))
+        if (!isJSXElement(path.parentPath))
             return;
         
-        const openingElementPath = path.parentPath.parentPath.get('openingElement');
-        
-        if (!hasDataName(openingElementPath, name))
+        if (!hasDataName(path.parentPath, name))
             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,
-                    });
-            }
+            const classNameValue = getAttributeValue(child, 'className');
+            
+            if (classNameValue.includes('menu-item-selected'))
+                push({
+                    path: child,
+                });
         }
     },
 });
+

package/package.json

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