aleman 1.0.5 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/index-buttons.html +27 -0
  2. package/index.html +1 -8
  3. package/lib/addons/menu-mouse-over.js +0 -3
  4. package/lib/aleman/load.js +3 -8
  5. package/lib/aleman/render.js +1 -3
  6. package/lib/globals/menu/context-menu.js +5 -0
  7. package/lib/globals/menu/f9.js +5 -0
  8. package/lib/globals/menu/menu.js +5 -2
  9. package/lib/globals/menu/up.js +3 -0
  10. package/lib/main.js +28 -26
  11. package/lib/rules/README.md +1 -0
  12. package/lib/rules/check-data-name.js +2 -2
  13. package/lib/rules/index.js +2 -0
  14. package/lib/rules/set-position/fixture/not-menu.js +2 -0
  15. package/lib/rules/set-position/fixture/set-position-fix.js +2 -0
  16. package/lib/rules/set-position/fixture/set-position.js +2 -0
  17. package/lib/rules/set-position/index.js +45 -0
  18. package/menu/index.html +4 -0
  19. package/menu/menu.js +51 -0
  20. package/package.json +4 -1
  21. /package/lib/addons/{fixture → additional/fixture}/start-click-fix.html +0 -0
  22. /package/lib/addons/{fixture → additional/fixture}/start-click.html +0 -0
  23. /package/lib/addons/{fixture → additional/fixture}/stop-click-fix.html +0 -0
  24. /package/lib/addons/{fixture → additional/fixture}/stop-click.html +0 -0
  25. /package/lib/addons/{input-change.js → additional/input-change.js} +0 -0
  26. /package/lib/addons/{start-click.js → additional/start-click.js} +0 -0
  27. /package/lib/addons/{stop-click.js → additional/stop-click.js} +0 -0
package/index-buttons.html ADDED
@@ -0,0 +1,27 @@
1
+ <!doctype html>
2
+ <link href="style.css" rel="stylesheet">
3
+
4
+ <section data-name="hydrate">
5
+ <button data-name="menu-toggler">Menu</button>
6
+ <button data-name=start>hello</button>
7
+ <button data-name=stop>world</button>
8
+ <label>
9
+ <input data-name="input"/>
10
+ </label>
11
+ <label data-name="value"></label>
12
+ <ul data-name="menu" class="menu menu-hidden" style="left: 0; top: 20px;">
13
+ </ul>
14
+ </section>
15
+
16
+
17
+ <script data-name="aleman" type="module" src="lib/aleman/load.js" data-main="lib/main.js"></script>
18
+ <script type="importmap">
19
+ {
20
+ "imports": {
21
+ "putout": "https://esm.sh/@putout/bundle",
22
+ "@putout/processor-html": "https://esm.sh/@putout/processor-html",
23
+ "html-escaper": "https://esm.sh/html-escaper",
24
+ "once": "https://esm.sh/once"
25
+ }
26
+ }
27
+ </script>
package/index.html CHANGED
@@ -2,19 +2,12 @@
2
2
  <link href="style.css" rel="stylesheet">
3
3
 
4
4
  <section data-name="hydrate">
5
- <button data-name="menu-toggler">Menu</button>
6
- <button data-name=start>hello</button>
7
- <button data-name=stop>world</button>
8
- <label>
9
- <input data-name="input"/>
10
- </label>
11
- <label data-name="value"></label>
12
5
  <ul data-name="menu" class="menu menu-hidden" style="left: 0; top: 20px;">
13
6
  </ul>
14
7
  </section>
15
8
 
16
9
 
17
- <script data-name="aleman" type="module" src="lib/aleman/load.js" data-main="lib/main.js"></script>
10
+ <script data-name="aleman" type="module" src="lib/aleman/load.js"></script>
18
11
  <script type="importmap">
19
12
  {
20
13
  "imports": {
package/lib/addons/menu-mouse-over.js CHANGED
@@ -1,9 +1,6 @@
1
- import {select} from '../globals/menu/menu.js';
2
-
3
1
  export const name = 'menu';
4
2
  export const events = ['mouseenter'];
5
3
  export const listener = ({render, storage}) => {
6
4
  storage.set('index', -1);
7
5
  render('unselect-all');
8
6
  };
9
-
package/lib/aleman/load.js CHANGED
@@ -1,10 +1,5 @@
1
- document.addEventListener('DOMContentLoaded', function load() {
2
- const loader = document.querySelector('[data-name="aleman"]');
3
- const el = document.createElement('script');
4
-
5
- el.src = loader.dataset.main;
6
- el.type = 'module';
7
-
8
- document.body.appendChild(el);
1
+ document.addEventListener('DOMContentLoaded', async function load() {
2
+ const {createMenu} = await import('../main.js');
3
+ await createMenu();
9
4
  document.removeEventListener('DOMContentLoaded', load);
10
5
  });
package/lib/aleman/render.js CHANGED
@@ -99,10 +99,8 @@ function restoreState({state, element, storage}) {
99
99
  storage.set(key, value);
100
100
  }
101
101
 
102
- if (!el) {
103
- delete state[name];
102
+ if (!el)
104
103
  continue;
105
- }
106
104
 
107
105
  assign(el, options);
108
106
  }
package/lib/globals/menu/context-menu.js CHANGED
@@ -10,4 +10,9 @@ export const listener = ({render, state, event}) => {
10
10
  render,
11
11
  state,
12
12
  });
13
+
14
+ render('set-position', {
15
+ left: event.clientX,
16
+ top: event.clientY - 14,
17
+ });
13
18
  };
package/lib/globals/menu/f9.js CHANGED
@@ -19,4 +19,9 @@ export const listener = ({render, state}) => {
19
19
  render,
20
20
  index,
21
21
  });
22
+
23
+ render('set-position', {
24
+ left: 0,
25
+ top: 20,
26
+ });
22
27
  };
package/lib/globals/menu/menu.js CHANGED
@@ -17,15 +17,18 @@ export const select = ({render, index}) => {
17
17
 
18
18
  export function hideMenu({render, state}) {
19
19
  state['menu-toggler'].command = 'hide';
20
- render('menu', {
20
+ render(['menu', 'unselect-all'], {
21
+ index: -1,
21
22
  command: 'hide',
22
23
  });
23
24
  }
24
25
 
25
- export function showMenu({render, state}) {
26
+ export function showMenu({render, state, left, top}) {
26
27
  state['menu-toggler'].command = 'show';
27
28
  render(['build-menu', 'menu'], {
28
29
  command: 'show',
29
30
  menu,
31
+ left,
32
+ top,
30
33
  });
31
34
  }
package/lib/globals/menu/up.js CHANGED
@@ -6,6 +6,9 @@ export {filter} from './menu.js';
6
6
  export const listener = ({render, element}) => {
7
7
  let index = element.index ?? -1;
8
8
 
9
+ if (index === -1)
10
+ return;
11
+
9
12
  if (index)
10
13
  --index;
11
14
 
package/lib/main.js CHANGED
@@ -1,6 +1,6 @@
1
- import * as start from './addons/start-click.js';
2
- import * as stop from './addons/stop-click.js';
3
- import * as inputChange from './addons/input-change.js';
1
+ import * as start from './addons/additional/start-click.js';
2
+ import * as stop from './addons/additional/stop-click.js';
3
+ import * as inputChange from './addons/additional/input-change.js';
4
4
  import * as menuClick from './addons/show-menu-click.js';
5
5
  import * as menuItemClick from './addons/menu-item-click.js';
6
6
  import * as menuMouseOver from './addons/menu-mouse-over.js';
@@ -8,26 +8,28 @@ import menu from './globals/menu.js';
8
8
  import {hydrate} from './aleman/aleman.js';
9
9
  import {rules} from './rules/index.js';
10
10
 
11
- const addons = [
12
- start,
13
- stop,
14
- inputChange,
15
- menuClick,
16
- menuItemClick,
17
- menuMouseOver,
18
- ];
19
-
20
- const globals = [...menu];
21
-
22
- const state = {
23
- 'menu-toggler': {
24
- command: 'hide',
25
- },
26
- };
27
-
28
- hydrate({
29
- state,
30
- rules,
31
- addons,
32
- globals,
33
- });
11
+ export function hydrateMenu() {
12
+ const addons = [
13
+ start,
14
+ stop,
15
+ inputChange,
16
+ menuClick,
17
+ menuItemClick,
18
+ menuMouseOver,
19
+ ];
20
+
21
+ const globals = [...menu];
22
+
23
+ const state = {
24
+ 'menu-toggler': {
25
+ command: 'hide',
26
+ },
27
+ };
28
+
29
+ hydrate({
30
+ state,
31
+ rules,
32
+ addons,
33
+ globals,
34
+ });
35
+ }
package/lib/rules/README.md CHANGED
@@ -7,3 +7,4 @@
7
7
  - ✅[`unselect`](https://putout.cloudcmd.io/#/gist/aa6006f83aebcb70362a65b3349f8ddd/df1a06b94ccce3134b2246892702bf63dff79145);
8
8
  - ✅[`unselect-all`](https://putout.cloudcmd.io/#/gist/ca24f199f508cccb34b11baf726eba83/96f08fa91331ac6265d9f5ff48692c9d4ad1b98b);
9
9
  - ✅[`build-menu`](https://putout.cloudcmd.io/#/gist/329dccd5fdc7f8b220be79af405dc9bb/b56df53f52bbe2a300ede38a96d1d2242e60679f);
10
+ - ✅[`set-position`](https://putout.cloudcmd.io/#/gist/215bb4654a27f15235f3e380a3035138/7f4af88aaa4863be4f1b8a90b9f0f4b1cf4744a0);
package/lib/rules/check-data-name.js CHANGED
@@ -1,11 +1,11 @@
1
- export function checkDataName(path) {
1
+ export function checkDataName(path, dataName = 'menu') {
2
2
  const attributes = path.get('openingElement.attributes');
3
3
 
4
4
  for (const attr of attributes) {
5
5
  const {name, value} = attr.node;
6
6
 
7
7
  if (name.name === 'data-name')
8
- return value.value === 'menu';
8
+ return value.value === dataName;
9
9
  }
10
10
 
11
11
  return false;
package/lib/rules/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import * as setPosition from './set-position/index.js';
1
2
  import * as unselectAll from './unselect-all/index.js';
2
3
  import * as buildMenu from './build-menu/index.js';
3
4
  import * as select from './select/index.js';
@@ -14,4 +15,5 @@ export const rules = {
14
15
  'build-menu': buildMenu,
15
16
  'unselect': unselect,
16
17
  'unselect-all': unselectAll,
18
+ 'set-position': setPosition,
17
19
  };
package/lib/rules/set-position/fixture/not-menu.js ADDED
@@ -0,0 +1,2 @@
1
+ <ul class="menu menu-hidden" style="left: 0; top: 20px;">
2
+ </ul>;
package/lib/rules/set-position/fixture/set-position-fix.js ADDED
@@ -0,0 +1,2 @@
1
+ <ul data-name="menu" class="menu menu-hidden" style='left: 33px; top: 20px;'>
2
+ </ul>;
package/lib/rules/set-position/fixture/set-position.js ADDED
@@ -0,0 +1,2 @@
1
+ <ul data-name="menu" class="menu menu-hidden" style="left: 0; top: 20px;">
2
+ </ul>
package/lib/rules/set-position/index.js ADDED
@@ -0,0 +1,45 @@
1
+ import {operator} from 'putout';
2
+ import {checkDataName} from '../check-data-name.js';
3
+
4
+ const {setLiteralValue} = operator;
5
+
6
+ export const report = () => `Set position`;
7
+
8
+ export const fix = ({attr, left, top}) => {
9
+ const style = `left: ${left}px; top: ${top}px;`;
10
+ setLiteralValue(attr.value, style);
11
+ };
12
+
13
+ export const traverse = ({options, push}) => ({
14
+ JSXOpeningElement(path) {
15
+ const {left = 0, top = 20} = options;
16
+
17
+ if (!checkDataName(path.parentPath, 'menu'))
18
+ return;
19
+
20
+ for (const attr of path.node.attributes) {
21
+ if (attr.name.name !== 'style')
22
+ continue;
23
+
24
+ const [x, y] = parsePosition(attr.value.value);
25
+
26
+ if (x === left && y === top)
27
+ return;
28
+
29
+ push({
30
+ path,
31
+ attr,
32
+ left,
33
+ top,
34
+ });
35
+ }
36
+ },
37
+ });
38
+
39
+ function parsePosition(str) {
40
+ const [x, y] = str
41
+ .split(/;|left|\s|:|top|px/)
42
+ .filter(Boolean);
43
+
44
+ return [x, y];
45
+ }
package/menu/index.html ADDED
@@ -0,0 +1,4 @@
1
+ <script type="module">
2
+ import {createMenu} from "./menu.js";
3
+ await createMenu()
4
+ </script>
package/menu/menu.js ADDED
@@ -0,0 +1,51 @@
1
+ export const createMenu = async () => {
2
+ createHydrate();
3
+ createMap();
4
+
5
+ await createLink();
6
+ const {hydrateMenu} = await import('../lib/main.js');
7
+
8
+ hydrateMenu(hydrateMenu);
9
+ };
10
+
11
+ async function createLink() {
12
+ const style = document.createElement('style');
13
+ const content = await import('../style.css', {
14
+ with: {
15
+ type: 'css',
16
+ },
17
+ });
18
+
19
+ for (const rule of content.default.cssRules) {
20
+ style.innerHTML += rule.cssText;
21
+ }
22
+
23
+ document.head.appendChild(style);
24
+ }
25
+
26
+ function createHydrate() {
27
+ const section = document.createElement('section');
28
+
29
+ section.dataset.name = 'hydrate';
30
+ section.innerHTML = `<ul data-name="menu" class="menu menu-hidden" style="left: 0; top: 20px;">
31
+ </ul>`;
32
+ document.body.append(section);
33
+ }
34
+
35
+ function createMap() {
36
+ const script = document.createElement('script');
37
+
38
+ script.type = 'importmap';
39
+ script.innerHTML = `
40
+ {
41
+ "imports": {
42
+ "putout": "https://esm.sh/@putout/bundle",
43
+ "@putout/processor-html": "https://esm.sh/@putout/processor-html",
44
+ "html-escaper": "https://esm.sh/html-escaper",
45
+ "once": "https://esm.sh/once"
46
+ }
47
+ }
48
+ `;
49
+ document.body.append(script);
50
+ }
51
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aleman",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "type": "module",
5
5
  "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
6
6
  "description": "🐊Putout-based framework for web",
@@ -17,6 +17,9 @@
17
17
  "#test": "./test/test.js",
18
18
  "#rules": "./lib/rules/index.js"
19
19
  },
20
+ "exports": {
21
+ "menu": "./menu/menu.js"
22
+ },
20
23
  "scripts": {
21
24
  "test": "madrun test",
22
25
  "watch:test": "madrun watch:test",