aleman 1.7.1 → 1.8.0

package/ChangeLog

@@ -1,3 +1,8 @@
+2025.09.14, v1.8.0
+
+feature:
+- c338550 aleman: menu: vim: built-in
+
 2025.09.13, v1.7.1
 
 feature:

package/README.md

@@ -20,13 +20,36 @@
 bun i aleman
 ```
 
-## Usage Example
+## Rules and Addons
 
-Addon:
+Aleman supports two main concepts:
+- ✅addons - events;
+- ✅rules - 🐊**Putout** rules that changes HTML;
+
+All interaction with DOM made using rules, and we interact not with DOM directly, but with JSX AST.
+It makes testing simple, states predictable and independent.
+
+### Addons
+
+Addon responsible for UI and interfaction with outer world: clicks, fetches and everything like this.
+Aleman supports next types of addons:
+
+- Global
+- Events
+- Keys
+- Vim
+
+When you need to filter out events according to `state` use `filter`:
 
 ```js
-export const events = ['click'];
 export const filter = ({state}) => state.command === 'show';
+```
+#### Global
+
+Any browser event you need to listen globally:
+
+```js
+export const events = ['click'];
 export const listener = () => ({
     command: 'hide',
     index: -1,
@@ -35,6 +58,63 @@ export const listener = () => ({
 });
 ```
 
+#### Events
+
+Any browser event you need to listen according to element with `data-name="hello":
+
+```js
+export const name = 'hello'
+export const events = ['click'];
+export const listener = () => ({
+    command: 'hide',
+    index: -1,
+    showSubmenu: false,
+    insideSubmenu: false,
+});
+```
+
+#### Keys
+
+```js
+export const keys = ['Escape'];
+
+export const listener = ({state, options}) => {
+    options.beforeHide?.(state);
+    return {
+        command: 'hide',
+        showSubmenu: false,
+        index: -1,
+    }
+};
+```
+
+### Vim
+
+```js
+import * as up from './up.js';
+
+export const commands = ['gg'];
+
+export function listener({state, options}) {
+    const {
+        insideSubmenu,
+        index,
+        submenuIndex,
+    } = state;
+
+    const newState = {
+        ...state,
+        index: insideSubmenu ? index : 1,
+        submenuIndex: insideSubmenu ? 1 : submenuIndex,
+    };
+    
+    return up.listener({
+        state: newState,
+        options,
+    });
+}
+```
+
 ## Licence
 
 MIT

package/aleman/add-listeners.js

@@ -1,3 +1,5 @@
+import {createVimParser} from './vim.js';
+
 const queryElement = ({name}) => {
     return document.querySelector(`[data-name="${name}"]`);
 };
@@ -61,7 +63,7 @@ export const addGlobalListeners = ({globalAddons, options, readState, writeState
     }
 };
 
-const createListener = ({options, addon, readState, writeState}) => (event) => {
+const createListener = ({options, addon, readState, writeState, parseVim = createVimParser()}) => (event) => {
     const {
         keys,
         listener,
@@ -70,11 +72,17 @@ const createListener = ({options, addon, readState, writeState}) => (event) => {
         filter,
         after,
         afterIf,
+        commands,
     } = addon;
     
     if (keys && !keys.includes(event.key))
         return;
     
+    const [command, count] = parseVim(event);
+    
+    if (commands && !commands.includes(command))
+        return;
+    
     const state = readState();
     
     const is = filter?.({
@@ -93,6 +101,7 @@ const createListener = ({options, addon, readState, writeState}) => (event) => {
         event.stopPropagation();
     
     const newState = listener({
+        count,
         event,
         state,
         options,

package/aleman/vim.js

@@ -0,0 +1,41 @@
+const isNumber = (a) => !Number.isNaN(a) && typeof a === 'number';
+
+export const createVimParser = (buffer = []) => (event) => {
+    const {key} = event;
+    
+    if (!buffer.length && key === 'g') {
+        buffer.push('g');
+        return [''];
+    }
+    
+    if (!buffer.length && /\d/.test(key)) {
+        buffer.push(Number(key));
+        return [''];
+    }
+    
+    if (!buffer.length && key === 'j')
+        buffer.push(1);
+    
+    if (!buffer.length && key === 'k')
+        buffer.push(1);
+    
+    const [count] = buffer;
+    
+    if (isNumber(count) && key === 'j') {
+        buffer = [];
+        return ['j', count];
+    }
+    
+    if (isNumber(count) && key === 'k') {
+        buffer = [];
+        return ['k', count];
+    }
+    
+    if (count === 'g' && key === 'g') {
+        buffer = [];
+        return ['gg'];
+    }
+    
+    buffer = [];
+    return [''];
+};

package/menu/addons/{vim/gg.js → gg.js}

@@ -1,6 +1,9 @@
-import * as up from '../up.js';
+import * as up from './up.js';
 
-export function gg({state, options}) {
+export const {filter} = up;
+export const commands = ['gg'];
+
+export function listener({state, options}) {
     const {
         insideSubmenu,
         index,
@@ -18,3 +21,4 @@ export function gg({state, options}) {
         options,
     });
 }
+

package/menu/addons/index.js

@@ -6,7 +6,9 @@ import * as enter from './enter.js';
 import * as left from './left.js';
 import * as right from './right.js';
 import * as shiftG from './shift-g.js';
-import {createVim} from './vim/index.js';
+import * as gg from './gg.js';
+import * as j from './j.js';
+import * as k from './k.js';
 
 export const addons = [
     click,
@@ -17,5 +19,7 @@ export const addons = [
     left,
     right,
     shiftG,
-    createVim(),
+    gg,
+    j,
+    k,
 ];

package/menu/addons/{vim/j.js → j.js}

@@ -1,7 +1,10 @@
-import * as down from '../down.js';
-import {getSubmenu} from '../submenu/index.js';
+import * as down from './down.js';
+import {getSubmenu} from './submenu/index.js';
 
-export function j({count, state, options}) {
+export const {filter} = down;
+export const commands = ['j'];
+
+export function listener({count, state, options}) {
     const {
         index,
         insideSubmenu,
@@ -34,3 +37,4 @@ export function j({count, state, options}) {
         options,
     });
 }
+

package/menu/addons/{vim/k.js → k.js}

@@ -1,6 +1,9 @@
-import * as down from '../down.js';
+import * as down from './down.js';
 
-export function k({count, state, options}) {
+export const {filter} = down;
+export const commands = ['k'];
+
+export function listener({count, state, options}) {
     const {
         insideSubmenu,
         index,
@@ -27,3 +30,4 @@ export function k({count, state, options}) {
         options,
     });
 }
+

package/package.json

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

package/menu/addons/vim/index.js

@@ -1,69 +0,0 @@
-import {k} from './k.js';
-import {gg} from './gg.js';
-import {j} from './j.js';
-
-const isNumber = (a) => !Number.isNaN(a) && typeof a === 'number';
-
-export const createVim = () => {
-    const buffer = [];
-    
-    return {
-        events,
-        filter,
-        listener: createListener(buffer),
-    };
-};
-
-const events = ['keydown'];
-
-const filter = ({state}) => state.command === 'show';
-
-const createListener = (buffer) => ({event, state, options}) => {
-    const {key} = event;
-    
-    if (!buffer.length && key === 'g') {
-        buffer.push('g');
-        return null;
-    }
-    
-    if (!buffer.length && /\d/.test(key)) {
-        buffer.push(Number(key));
-        return null;
-    }
-    
-    if (!buffer.length && key === 'j')
-        buffer.push(1);
-    
-    if (!buffer.length && key === 'k')
-        buffer.push(1);
-    
-    const [count] = buffer;
-    
-    if (isNumber(count) && key === 'j') {
-        buffer = [];
-        return j({
-            count,
-            state,
-            options,
-        });
-    }
-    
-    if (isNumber(count) && key === 'k') {
-        buffer = [];
-        return k({
-            count,
-            state,
-            options,
-        });
-    }
-    
-    if (count === 'g' && key === 'g') {
-        buffer = [];
-        return gg({
-            state,
-            options,
-        });
-    }
-    
-    buffer = [];
-};