aleman 1.0.16 → 1.1.0

package/aleman/add-listeners.js

@@ -0,0 +1,94 @@
+const queryElement = ({name}) => {
+    return document.querySelector(`[data-name="${name}"]`);
+};
+
+const maybeEvents = ({events}) => {
+    if (events)
+        return events;
+    
+    return ['keydown'];
+};
+
+export const addListeners = ({namedAddons, options, readState, writeState}) => {
+    for (const addon of namedAddons) {
+        const element = queryElement(addon);
+        const events = maybeEvents(addon);
+        const {
+            key,
+            listener,
+            preventDefault,
+        } = addon;
+        
+        for (const event of events) {
+            element.addEventListener(event, (event) => {
+                if (preventDefault)
+                    event.preventDefault();
+                
+                if (key && event.key !== key)
+                    return;
+                
+                const state = readState();
+                
+                const newState = listener({
+                    event,
+                    state,
+                    options,
+                });
+                
+                writeState(newState);
+            });
+        }
+    }
+};
+
+const hasName = ({name}) => name;
+
+export const splitAddons = (addons) => {
+    const globalAddons = [];
+    const namedAddons = [];
+    
+    for (const addon of addons) {
+        if (hasName(addon)) {
+            namedAddons.push(addon);
+            continue;
+        }
+        
+        globalAddons.push(addon);
+    }
+    
+    return {
+        globalAddons,
+        namedAddons,
+    };
+};
+
+export const addGlobalListeners = ({globalAddons, options, readState, writeState}) => {
+    for (const addon of globalAddons) {
+        const events = maybeEvents(addon);
+        const {
+            key,
+            listener,
+            preventDefault,
+        } = addon;
+        
+        for (const event of events) {
+            document.addEventListener(event, (event) => {
+                if (preventDefault)
+                    event.preventDefault();
+                
+                if (key && event.key !== key)
+                    return;
+                
+                const state = readState();
+                
+                const newState = listener({
+                    event,
+                    state,
+                    options,
+                });
+                
+                writeState(newState);
+            });
+        }
+    }
+};

package/aleman/index.js

@@ -0,0 +1,44 @@
+import {createState} from './state.js';
+import {
+    addGlobalListeners,
+    addListeners,
+    splitAddons,
+} from './add-listeners.js';
+import {createRender} from './render.js';
+
+export const hydrate = (element, {addons, options, state, rules, stateName = 'aleman-state'}) => {
+    const render = createRender(element.innerHTML, {
+        options,
+        rules,
+    });
+    
+    const {globalAddons, namedAddons} = splitAddons(addons);
+    
+    const listener = () => {
+        const state = readState();
+        const [is, result] = render(state);
+        
+        if (!is)
+            return;
+        
+        element.innerHTML = result;
+        addListeners({
+            readState,
+            writeState,
+            namedAddons,
+            options,
+        });
+    };
+    
+    const {readState, writeState} = createState(state, {
+        stateName,
+        listener,
+    });
+    
+    addGlobalListeners({
+        readState,
+        writeState,
+        globalAddons,
+        options,
+    });
+};

package/aleman/render.js

@@ -0,0 +1,58 @@
+import {
+    parse,
+    transform,
+    print,
+    findPlaces,
+} from 'putout';
+import {branch, merge} from '@putout/processor-html';
+
+const {entries} = Object;
+
+export const SKIP = false;
+export const TRANSFORM = true;
+
+export const createRender = (html, {options, rules}) => {
+    const {source} = branch(html)[0];
+    const withDiv = `<template>${source}</template>`;
+    const ast = parse(withDiv);
+    
+    return function render(state) {
+        const currentRules = {};
+        const plugins = entries(rules);
+        
+        for (const [name] of plugins) {
+            currentRules[name] = ['on', {
+                ...state,
+                ...options,
+            }];
+        }
+        
+        const places = findPlaces(ast, source, {
+            rules: currentRules,
+            plugins,
+        });
+        
+        if (!places.length)
+            return [SKIP];
+        
+        transform(ast, '', {
+            rules: currentRules,
+            plugins,
+        });
+        
+        const code = print(ast, {
+            printer: ['putout', {
+                format: {
+                    newline: '',
+                    endOfFile: '',
+                },
+            }],
+        });
+        
+        const prefix = '<template>';
+        const suffix = '<\\template>\n';
+        const result = merge('', [code]).slice(prefix.length, -suffix.length);
+        
+        return [TRANSFORM, result];
+    };
+};

package/aleman/state.js

@@ -0,0 +1,78 @@
+import fullstore from 'fullstore';
+
+const {assign} = Object;
+const {stringify, parse} = JSON;
+
+const wrap = (render, {prev, options, stateElement, readState, writeState}) => () => {
+    const {textContent} = stateElement;
+    
+    if (stateElement.textContent === prev())
+        return;
+    
+    const state = readState();
+    prev(textContent);
+    writeState(state);
+    
+    render({
+        state,
+        options,
+    });
+};
+
+export const createState = (state, {options, listener, stateName = 'aleman-state'}) => {
+    const stateElement = document.querySelector(`[data-name="${stateName}"]`);
+    
+    const prev = fullstore();
+    const readState = createReadState(stateElement);
+    const writeState = createWriteState(prev, stateElement);
+    
+    const fn = wrap(listener, {
+        options,
+        prev,
+        stateElement,
+        readState,
+        writeState,
+    });
+    
+    const observer = new MutationObserver(fn);
+    const str = stringify(state, null, 4);
+    
+    history[str] = true;
+    stateElement.textContent = str;
+    
+    document.addEventListener('keydown', ({key}) => {
+        if (key === '`')
+            fn();
+    });
+    
+    observer.observe(stateElement, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    
+    return {
+        readState,
+        writeState,
+    };
+};
+
+export const createReadState = (stateElement) => () => {
+    return parse(stateElement.textContent);
+};
+
+export const createWriteState = (prev, stateElement) => (newState) => {
+    const prevStateStr = stateElement.textContent;
+    const prevState = parse(stateElement.textContent);
+    
+    assign(prevState, newState);
+    const str = stringify(prevState);
+    
+    if (str === prevStateStr)
+        return;
+    
+    stateElement.textContent = str;
+    setTimeout(() => {
+        prev(str);
+    });
+};

package/example/index.html

@@ -0,0 +1 @@
+<script src="index.js" type="module"></script>

package/example/index.js

@@ -0,0 +1,8 @@
+import {createMenu} from '../menu/menu.js';
+
+const menuData = {
+    hello: () => alert('x'),
+    world: () => alert('y'),
+};
+
+await createMenu(document.body, {}, menuData);

package/index-buttons.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<link href="menu/menu.css" rel="stylesheet">
+<link href="menu-v1/menu.css" rel="stylesheet">
 
 <section data-name="hydrate">
     <button data-name="menu-toggler">Menu</button>
@@ -14,7 +14,7 @@
 </section>
 
 
-<script data-name="aleman" type="module" src="lib/aleman/load.js" data-main="lib/main.js"></script>
+<script data-name="aleman" type="module" src="menu-v1/aleman/load.js" data-main="lib/main.js"></script>
 <script type="importmap">
     {
       "imports": {

package/index.html

@@ -1,13 +1,12 @@
 <!doctype html>
-<link href="menu/menu.css" rel="stylesheet">
+<link href="menu-v1/menu.css" rel="stylesheet">
 
 <section data-name="hydrate">
     <ul data-name="menu" class="menu menu-hidden" style="left: 0; top: 20px;">
     </ul>
 </section>
 
-
-<script data-name="aleman" type="module" src="lib/aleman/load.js"></script>
+<script data-name="aleman" type="module" src="menu-v1/aleman/load.js"></script>
 <script type="importmap">
     {
       "imports": {

package/menu/addons/click.js

@@ -0,0 +1,6 @@
+export const events = ['click'];
+
+export const listener = () => ({
+    command: 'hide',
+    index: -1,
+});

package/menu/addons/context-menu.js

@@ -0,0 +1,13 @@
+export const events = [
+    'contextmenu',
+];
+
+export const preventDefault = true;
+
+export const listener = ({event}) => ({
+    command: 'show',
+    position: {
+        left: event.clientX,
+        top: event.clientY - 14,
+    },
+});

package/menu/addons/down.js

@@ -0,0 +1,16 @@
+const {keys} = Object;
+
+export const key = 'ArrowDown';
+
+export const listener = ({state, options}) => {
+    let {index} = state;
+    const {menu} = options;
+    const n = keys(menu).length - 1;
+    
+    if (index < n)
+        ++index;
+    
+    return {
+        index,
+    };
+};

package/menu/addons/enter.js

@@ -0,0 +1,16 @@
+const {values} = Object;
+
+export const key = 'Enter';
+
+export const listener = ({options, state}) => {
+    const {index} = state;
+    const {menu} = options;
+    
+    const fn = values(menu)[index];
+    setTimeout(fn);
+    
+    return {
+        command: 'hide',
+        index: -1,
+    };
+};

package/menu/addons/escape.js

@@ -0,0 +1,6 @@
+export const key = 'Escape';
+
+export const listener = () => ({
+    command: 'hide',
+    index: -1,
+});

package/menu/addons/f9.js

@@ -0,0 +1,9 @@
+export const key = 'F9';
+
+export const listener = () => ({
+    command: 'show',
+    position: {
+        left: 0,
+        top: 0,
+    },
+});

package/menu/addons/index.js

@@ -0,0 +1,21 @@
+import * as contextMenu from './context-menu.js';
+import * as click from './click.js';
+import * as escape from './escape.js';
+import * as down from './down.js';
+import * as up from './up.js';
+import * as f9 from './f9.js';
+import * as enter from './enter.js';
+import * as mouseEnter from './mouse-enter.js';
+import * as itemClick from './item-click.js';
+
+export const addons = [
+    contextMenu,
+    click,
+    escape,
+    down,
+    up,
+    f9,
+    enter,
+    mouseEnter,
+    itemClick,
+];

package/menu/addons/item-click.js

@@ -0,0 +1,16 @@
+export const name = 'menu';
+export const events = ['click'];
+
+export const listener = ({event, options}) => {
+    const menuItemElement = document.elementFromPoint(event.clientX, event.clientY);
+    const name = menuItemElement.textContent.trim();
+    const {menu} = options;
+    const fn = menu[name];
+    
+    setTimeout(fn);
+    
+    return {
+        index: -1,
+        command: 'hide',
+    };
+};

package/menu/addons/mouse-enter.js

@@ -0,0 +1,5 @@
+export const name = 'menu';
+export const events = ['mouseenter'];
+export const listener = () => ({
+    index: -1,
+});

package/menu/addons/up.js

@@ -0,0 +1,12 @@
+export const key = 'ArrowUp';
+
+export const listener = ({state}) => {
+    let {index} = state;
+    
+    if (index)
+        --index;
+    
+    return {
+        index,
+    };
+};

package/menu/hydrate-menu.js

@@ -0,0 +1,22 @@
+import {rules} from './rules/index.js';
+import {hydrate} from '../aleman/index.js';
+import {initState} from './state.js';
+import {addons} from './addons/index.js';
+
+const {assign} = Object;
+
+export const hydrateMenu = (element, options, menu) => {
+    assign(options, {
+        menu,
+    });
+    
+    const state = initState(options);
+    
+    hydrate(element, {
+        options,
+        state,
+        addons,
+        rules,
+        stateName: 'aleman-state-menu',
+    });
+};

package/menu/importmap.json

@@ -0,0 +1,9 @@
+{
+    "imports": {
+        "putout": "https://esm.sh/@putout/bundle",
+        "@putout/processor-html": "https://esm.sh/@putout/processor-html@14.1.1",
+        "html-escaper": "https://esm.sh/html-escaper",
+        "once": "https://esm.sh/once",
+        "fullstore": "https://esm.sh/fullstore"
+    }
+}

package/menu/menu.js

@@ -1,43 +1,60 @@
+const {stringify} = JSON;
+
 export const createMenu = async (element, options, menuData) => {
-    createHydrate();
-    createMap();
+    const hydrateElement = createHydrate();
+    
+    await createMap();
+    await createLink();
     
-    createLink();
-    const {hydrateMenu} = await import('./main.js');
+    createStateElement();
+    const {hydrateMenu} = await import('./hydrate-menu.js');
     
-    hydrateMenu(element, options, menuData);
+    hydrateMenu(hydrateElement, options, menuData);
 };
 
-function createLink() {
-    const style = document.createElement('link');
+async function createLink() {
+    const style = document.createElement('style');
+    const content = await import('./menu.css', {
+        with: {
+            type: 'css',
+        },
+    });
+    
+    for (const rule of content.default.cssRules) {
+        style.innerHTML += rule.cssText;
+    }
     
-    style.rel = 'stylesheet';
-    style.href = 'https://esm.sh/aleman@1.0.15/menu/menu.css';
     document.head.appendChild(style);
 }
 
 function createHydrate() {
     const section = document.createElement('section');
     
-    section.dataset.name = 'hydrate';
-    section.innerHTML = `<ul data-name="menu" class="menu menu-hidden" style="left: 0; top: 20px;">
-        </ul>`;
+    section.dataset.name = 'aleman-hydrate-menu';
+    section.innerHTML = `<ul data-name="menu" class="menu menu-hidden"></ul>`;
+    document.body.append(section);
+    
+    return section;
+}
+
+function createStateElement() {
+    const section = document.createElement('section');
+    
+    section.classList.add('menu-hidden');
+    section.dataset.name = 'aleman-state-menu';
     document.body.append(section);
 }
 
-function createMap() {
+async function createMap() {
+    const {default: importmap} = await import('./importmap.json', {
+        with: {
+            type: 'json',
+        },
+    });
+    
     const script = document.createElement('script');
     
     script.type = 'importmap';
-    script.innerHTML = `
-        {
-            "imports": {
-                "putout": "https://esm.sh/@putout/bundle",
-                "@putout/processor-html": "https://esm.sh/@putout/processor-html",
-                "html-escaper": "https://esm.sh/html-escaper",
-                "once": "https://esm.sh/once"
-            }
-        }
-    `;
+    script.innerHTML = stringify(importmap, null, 4);
     document.body.append(script);
 }

package/{lib → menu}/rules/index.js

@@ -1,19 +1,13 @@
 import * as setPosition from './set-position/index.js';
-import * as unselectAll from './unselect-all/index.js';
 import * as buildMenu from './build-menu/index.js';
-import * as select from './select/index.js';
-import * as unselect from './unselect/index.js';
 import * as menu from './menu/index.js';
-import * as removeButton from './remove-button/index.js';
-import * as setValue from './set-value/index.js';
+import * as select from './select/index.js';
+import * as unselectAll from './unselect-all/index.js';
 
 export const rules = {
-    'set-value': setValue,
-    'remove-button': removeButton,
     'menu': menu,
-    'select': select,
     'build-menu': buildMenu,
-    'unselect': unselect,
-    'unselect-all': unselectAll,
     'set-position': setPosition,
+    'select': select,
+    'select-all': unselectAll,
 };

package/{lib → menu}/rules/select/fixture/select-fix.js

@@ -1,5 +1,5 @@
 <ul data-name="menu" class="menu menu-hidden">
-    <li data-name="menu-item" className="menu-item icon icon-view menu-item-selected">
+    <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'>

package/{lib → menu}/rules/select/index.js

@@ -5,9 +5,12 @@ const {setLiteralValue} = operator;
 
 export const report = () => `Select item`;
 
-export const fix = (path) => {
+export const fix = ({path, prev, next}) => {
     const {value} = path.node;
     setLiteralValue(value, `${value.value} menu-item-selected`);
+    
+    unselect(prev);
+    unselect(next);
 };
 
 export const traverse = ({options, push}) => ({
@@ -28,19 +31,25 @@ export const traverse = ({options, push}) => ({
             .get('children')
             .filter(isJSXElement);
         
-        const next = children[index];
+        const prev = children[index - 1];
+        const current = children[index];
+        const next = children[index + 1];
         
-        if (!next)
+        if (!current)
             return;
         
-        for (const attr of next.get('openingElement.attributes')) {
+        for (const attr of current.get('openingElement.attributes')) {
             const {name, value} = attr.node;
             
             if (name.name !== 'className')
                 continue;
             
             if (!value.value.includes('menu-item-selected')) {
-                push(attr);
+                push({
+                    path: attr,
+                    prev,
+                    next,
+                });
                 break;
             }
         }
@@ -59,3 +68,18 @@ function checkDataName(path) {
     
     return false;
 }
+
+function unselect(path) {
+    if (!path)
+        return;
+    
+    for (const attr of path.get('openingElement.attributes')) {
+        const {name, value} = attr.node;
+        
+        if (name.name !== 'className')
+            continue;
+        
+        if (value.value.includes('menu-item-selected'))
+            setLiteralValue(value, value.value.replace(' menu-item-selected', ''));
+    }
+}

package/menu/rules/set-position/fixture/no-style.js

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

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

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