aleman 1.1.32 → 1.1.34

package/aleman/index.js

@@ -6,6 +6,8 @@ import {
 } from './add-listeners.js';
 import {createRender} from './render.js';
 
+const id = (a) => a;
+
 export const hydrate = (element, {addons, options, state, rules, stateName = 'aleman-state'}) => {
     const render = createRender(element.innerHTML, {
         options,
@@ -43,24 +45,19 @@ export const hydrate = (element, {addons, options, state, rules, stateName = 'al
     });
     
     return {
-        run: (partialState) => {
-            const state = {
-                ...readState(),
-                ...partialState,
-            };
-            
-            const [is, result] = render(state);
-            
-            if (!is)
-                return;
-            
-            element.innerHTML = result;
-            addListeners({
-                readState,
-                writeState,
-                namedAddons,
+        run: (event, fn = id, condition) => {
+            const state = readState();
+            const newState = fn({
+                state,
+                event,
                 options,
             });
+            
+            writeState({
+                ...state,
+                ...newState,
+            });
         },
     };
 };
+

package/menu/addons/click.js

@@ -1,5 +1,9 @@
 export const events = ['click'];
 
+export const filter = ({state}) => {
+    return state.command === 'show';
+};
+
 export const listener = ({options, state}) => {
     options.beforeClick?.(state);
     options.beforeHide?.(state);

package/menu/addons/f9.js

@@ -6,21 +6,11 @@ export const filter = ({state, options}) => {
     if (!beforeShow)
         return true;
     
-    return options.beforeShow?.({
-        ...state,
-        position: {
-            x: state.position.left,
-            y: state.position.top,
-        },
-    });
+    return options.beforeShow?.(state);
 };
 
 export const listener = ({options, state}) => {
     return {
         command: 'show',
-        position: {
-            left: 0,
-            top: 0,
-        },
     };
 };

package/menu/hydrate-menu.js

@@ -4,6 +4,8 @@ import {initState} from './state.js';
 import {addons} from './addons/index.js';
 import {createMouseEnter} from './addons/mouse-enter.js';
 import {createItemClick} from './addons/item-click.js';
+import * as contextMenu from './addons/context-menu.js';
+import * as click from './addons/click.js';
 
 const {assign} = Object;
 
@@ -13,8 +15,6 @@ export const hydrateMenu = (element, options, menu) => {
     });
     
     const state = initState(options);
-    const {beforeShow} = options;
-    beforeShow?.(state);
     const {run} = hydrate(element, {
         options,
         state,
@@ -27,16 +27,14 @@ export const hydrateMenu = (element, options, menu) => {
         stateName: `aleman-state-${options.name}`,
     });
     
-    const show = run.bind(null, {
-        command: 'show',
-    });
-    
-    const hide = run.bind(null, {
-        command: 'hide',
-    });
-    
     return {
-        show,
-        hide,
+        show: (clientX, clientY) => {
+            const event = {
+                clientX,
+                clientY,
+            };
+            run(event, contextMenu.listener, options.beforeShow);
+        },
+        hide: () => run({}, click.listener, options.beforeHide),
     };
 };

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

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

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

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

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

@@ -1,6 +1,6 @@
 import {types, template} from 'putout';
 
-const {entries} = Object;
+const {entries, keys} = Object;
 const noop = () => {};
 const {jsxText} = types;
 
@@ -20,13 +20,17 @@ const DefaultMenu = {
     world: noop,
 };
 
-export const fix = ({path, menu}) => {
+export const fix = ({path, menu, icon}) => {
     const items = [];
     
-    for (const [key] of entries(menu)) {
+    for (const key of keys(menu)) {
         const menuItem = createMenuItem();
         
         menuItem.children[1].children[0].value = key;
+        
+        if (icon)
+            setIcon(key, menuItem);
+        
         items.push(INDENT, menuItem);
     }
     
@@ -39,6 +43,7 @@ export const traverse = ({options, push}) => ({
         const {
             name = 'menu',
             menu = DefaultMenu,
+            icon = false,
         } = options;
         
         if (!checkDataName(path, name))
@@ -50,6 +55,7 @@ export const traverse = ({options, push}) => ({
         push({
             path,
             menu,
+            icon,
         });
     },
 });
@@ -64,3 +70,21 @@ function checkDataName(path, dataName) {
     
     return false;
 }
+
+function setIcon(name, menuItem) {
+    const {attributes} = menuItem.openingElement;
+    
+    for (const attr of attributes) {
+        if (attr.name.name === 'className') {
+            attr.value.value += ` icon ${getIconName(name)}`;
+            return;
+        }
+    }
+}
+
+function getIconName(name) {
+    return 'icon-' + name
+        .replace(/[()]/g, '')
+        .replace(/\s/g, '-')
+        .toLowerCase();
+}

package/package.json

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