aleman 1.0.16 → 1.1.0

package/{lib → menu}/rules/set-position/index.js

@@ -1,18 +1,36 @@
-import {operator} from 'putout';
+import {operator, types} from 'putout';
 import {checkDataName} from '../check-data-name.js';
 
+const {
+    stringLiteral,
+    jsxIdentifier,
+    jsxAttribute,
+} = types;
+
 const {setLiteralValue} = operator;
 
 export const report = () => `Set position`;
 
-export const fix = ({attr, left, top}) => {
+export const fix = ({path, attr, left, top}) => {
     const style = `left: ${left}px; top: ${top}px;`;
-    setLiteralValue(attr.value, style);
+    
+    if (attr) {
+        setLiteralValue(attr.value, style);
+        
+        return;
+    }
+    
+    const {attributes} = path.node;
+    
+    const attribute = jsxAttribute(jsxIdentifier('style'), stringLiteral(style));
+    
+    attributes.push(attribute);
 };
 
 export const traverse = ({options, push}) => ({
     JSXOpeningElement(path) {
-        const {left = 0, top = 20} = options;
+        const {position = {}} = options;
+        const {left = 0, top = 20} = position;
         
         if (!checkDataName(path.parentPath, 'menu'))
             return;
@@ -32,7 +50,14 @@ export const traverse = ({options, push}) => ({
                 left,
                 top,
             });
+            return;
         }
+        
+        push({
+            path,
+            left,
+            top,
+        });
     },
 });
 

package/{lib → menu}/rules/unselect-all/index.js

@@ -13,8 +13,13 @@ export const fix = ({path}) => {
     setLiteralValue(value, newValue);
 };
 
-export const traverse = ({push}) => ({
+export const traverse = ({push, options}) => ({
     JSXOpeningElement(path) {
+        const {index} = options;
+        
+        if (index !== -1)
+            return;
+        
         if (path.node.name.name !== 'li')
             return;
         

package/menu/state.js

@@ -0,0 +1,15 @@
+const {keys} = Object;
+
+export const initState = ({menu}) => {
+    const count = keys(menu);
+    
+    return {
+        command: 'hide',
+        index: -1,
+        count,
+        position: {
+            left: 0,
+            top: 20,
+        },
+    };
+};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "aleman",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "type": "module",
   "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
   "description": "🐊Putout-based framework for web",
   "homepage": "https://github.com/putoutjs/aleman#readme",
-  "main": "lib/aleman/aleman.js",
+  "main": "aleman/index.js",
   "release": false,
   "tag": false,
   "changelog": false,
@@ -13,10 +13,6 @@
     "type": "git",
     "url": "git+https://github.com/coderaiser/putout.git"
   },
-  "imports": {
-    "#test": "./test/test.js",
-    "#rules": "./lib/rules/index.js"
-  },
   "exports": {
     "./menu": "./menu/menu.js"
   },
@@ -32,6 +28,7 @@
   },
   "dependencies": {
     "@putout/processor-html": "^14.0.2",
+    "fullstore": "^3.0.0",
     "html-escaper": "^3.0.3",
     "once": "^1.4.0",
     "putout": "^40.5.1"

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

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

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

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

package/lib/addons/additional/input-change.js

@@ -1,39 +0,0 @@
-export const name = 'input';
-export const events = [
-    'keyup',
-    'change',
-];
-
-export const filter = ({event}) => {
-    const {key} = event;
-    const keys = [
-        'Shift',
-        'Meta',
-        'ArrowLeft',
-        'ArrowRight',
-    ];
-    
-    return !keys.includes(key);
-};
-
-export const listener = ({render, event, element}) => {
-    const {key} = event;
-    let {value} = element;
-    
-    if (isTextSelected(element) && key === 'Backspace')
-        value = '';
-    
-    render('set-value', {
-        name: 'value',
-        value,
-    });
-    
-    element.focus();
-};
-
-function isTextSelected(input) {
-    if (!input.value)
-        return false;
-    
-    return !input.selectionStart && input.selectionEnd === input.value.length;
-}

package/lib/addons/additional/start-click.js

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

package/lib/addons/additional/stop-click.js

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

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

@@ -1,27 +0,0 @@
-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

@@ -1,6 +0,0 @@
-export const name = 'menu';
-export const events = ['mouseenter'];
-export const listener = ({render, storage}) => {
-    storage.set('index', -1);
-    render('unselect-all');
-};

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

@@ -1,12 +0,0 @@
-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(['build-menu', 'menu'], {
-        command,
-        menu,
-    });
-};

package/lib/aleman/add-listeners.js

@@ -1,116 +0,0 @@
-const isFn = (a) => typeof a === 'function';
-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) {
-        for (const event of events) {
-            addEventListener(event, createListener({
-                filter,
-                name: 'document',
-                render,
-                listener,
-                storage,
-                state,
-            }));
-        }
-    }
-}
-
-const success = () => true;
-
-const createListener = ({name, filter = success, state, render, listener, storage}) => (event) => {
-    const is = filter({
-        event,
-        state,
-    });
-    
-    if (!is)
-        return;
-    
-    listener({
-        render: render(name),
-        event,
-        element: createElement(name, storage),
-        state,
-        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}']`);
-            
-            if (!element)
-                continue;
-            
-            element.addEventListener(event, createListener({
-                name,
-                render,
-                listener,
-                filter,
-                storage,
-                state,
-            }));
-        }
-    }
-}
-
-const createSet = (name, storage) => (target, key, value) => {
-    const element = document.querySelector(`[data-name='${name}']`);
-    
-    if (!element) {
-        storage.set(key, value);
-        return true;
-    }
-    
-    element[key] = value;
-    
-    return true;
-};
-
-const createGet = (name, storage) => (target, key) => {
-    const element = document.querySelector(`[data-name='${name}']`);
-    
-    if (!element)
-        return storage.get(key);
-    
-    const result = element[key];
-    
-    if (!result)
-        return element.getAttribute(key) || '';
-    
-    if (isFn(result))
-        return result.bind(element);
-    
-    return result;
-};
-
-const createElement = (name, storage) => {
-    const get = createGet(name, storage);
-    const set = createSet(name, storage);
-    
-    return new Proxy({}, {
-        get,
-        set,
-    });
-};

package/lib/aleman/aleman.js

@@ -1,47 +0,0 @@
-import {
-    addListeners,
-    addGlobalListeners,
-    addGlobalKeyListener,
-} from './add-listeners.js';
-import {createRender} from './render.js';
-
-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 render = createRender(html, {
-        rules,
-        addons,
-        element,
-        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/load.js

@@ -1,5 +0,0 @@
-document.addEventListener('DOMContentLoaded', async function load() {
-    const {createMenu} = await import('../main.js');
-    await createMenu();
-    document.removeEventListener('DOMContentLoaded', load);
-});

package/lib/aleman/render.js

@@ -1,107 +0,0 @@
-import {
-    parse,
-    transform,
-    print,
-    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, {headless, state, storage, rules, addons, element}) => {
-    const {source} = branch(html)[0];
-    const ast = parse(source);
-    
-    return function render(elementName = 'document') {
-        return (names, options = {}) => {
-            assign(state, {
-                [elementName]: options,
-            });
-            
-            assign(options, {
-                escape,
-            });
-            
-            const plugins = [];
-            const currentRules = {};
-            
-            for (const [name, rule] of entries(rules)) {
-                for (const currentName of maybeArray(names)) {
-                    if (name === currentName) {
-                        plugins.push([name, rule]);
-                        currentRules[name] = ['on', options];
-                    }
-                }
-            }
-            
-            const places = findPlaces(ast, source, {
-                rules: currentRules,
-                plugins,
-            });
-            
-            if (!places.length) {
-                restoreState({
-                    state,
-                    element,
-                    storage,
-                });
-                return;
-            }
-            
-            transform(ast, '', {
-                rules: currentRules,
-                plugins,
-            });
-            
-            const code = print(ast, {
-                printer: ['putout', {
-                    format: {
-                        newline: '',
-                        endOfFile: '',
-                    },
-                }],
-            });
-            
-            const prefix = '<section>';
-            const suffix = '<\\section>';
-            
-            element.innerHTML = merge('', [code]).slice(prefix.length, -suffix.length);
-            
-            if (headless)
-                return;
-            
-            addListeners({
-                render,
-                addons,
-                storage,
-                state,
-            });
-            
-            restoreState({
-                state,
-                element,
-                storage,
-            });
-        };
-    };
-};
-
-function restoreState({state, element, storage}) {
-    for (const [name, options] of entries(state)) {
-        const el = element.querySelector(`[data-name='${name}']`);
-        
-        if (!el && name === 'document')
-            for (const [key, value] of entries(options)) {
-                storage.set(key, value);
-            }
-        
-        if (!el)
-            continue;
-        
-        assign(el, options);
-    }
-}

package/lib/globals/menu/click.js

@@ -1,21 +0,0 @@
-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

@@ -1,18 +0,0 @@
-import {showMenu} from '../menu/menu.js';
-
-export const events = [
-    'contextmenu',
-];
-
-export const listener = ({render, state, event}) => {
-    event.preventDefault();
-    showMenu({
-        render,
-        state,
-    });
-    
-    render('set-position', {
-        left: event.clientX,
-        top: event.clientY - 14,
-    });
-};

package/lib/globals/menu/down.js

@@ -1,21 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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,
-    });
-    
-    render('set-position', {
-        left: 0,
-        top: 20,
-    });
-};