npm - aleman - Versions diffs - 2.0.3 → 2.0.4 - Mend

aleman 2.0.3 → 2.0.4

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 (45) hide show

package/ChangeLog CHANGED Viewed

@@ -1,3 +1,18 @@
+2026.05.27, v2.0.4
+fix:
+- 79ad4aa aleman: menu: rm afterHydrate
+- 98c1d80 example: menu
+feature:
+- fe3cf8c lunes: Escape
+- b592739 lunes: apply-visibility: add
+- f2b6589 lunes: render
+- 17ac3a2 lunes: event loop
+- af911e2 lunes: hydrate
+- ed3bf43 lunes: cursor
+- 6408584 lunes: build-menu: open/close -> on/off
 2026.05.24, v2.0.3
 feature:

package/example/lunes/index.html ADDED Viewed

@@ -0,0 +1,3 @@
+<script src="index.js" type="module"></script>
+<body data-name="lunes"></body>

package/example/lunes/index.js ADDED Viewed

@@ -0,0 +1,22 @@
+import {createMenu} from '../../lunes/lunes.js';
+const menuData = {
+    hello: () => alert('x'),
+    world: () => alert('y'),
+};
+const options = {
+    name: 'menu',
+    infiniteScroll: true,
+};
+const {name} = document.body.dataset;
+const menu = await createMenu(name, options, menuData);
+globalThis.addEventListener('keydown', (event) => {
+    if (event.key === 'F9')
+        menu.show();
+    if (event.key === 'Escape')
+        menu.hide();
+});

package/example/menu/index.html CHANGED Viewed

	@@ -1 +1,2 @@
1 1	<script src="index.js" type="module"></script>
2	+ <body data-name="aleman-example"></body>

package/example/menu/index.js CHANGED Viewed

@@ -5,4 +5,15 @@ const menuData = {
     world: () => alert('y'),
 };
-await createMenu(document.body, {}, menuData);
+const options = {
+    name: 'menu',
+    infiniteScroll: true,
+};
+const {name} = document.body.dataset;
+const menu = await createMenu(name, options, menuData);
+globalThis.addEventListener('keydown', (event) => {
+    if (event.key === 'F9')
+        menu.show();
+});

package/lunes/actions/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+import up from './up.json' with {
+    type: 'json',
+};
+export const actions = [
+    up,
+];

package/lunes/actions/up.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+    "keys": ["ArrowUp"],
+    "preventDefault": true,
+    "operations": ["up"]
+}

package/lunes/compiler/compiler.js ADDED Viewed

@@ -0,0 +1,5 @@
+export const createCompiler = (element, {commit, render}) => (operation, cursor) => {
+    const state = commit(operation);
+    element.innerHTML = render(state, cursor);
+};

package/lunes/engine/engine.js ADDED Viewed

@@ -0,0 +1,16 @@
+import {listen} from './listen.js';
+export const createLoop = (element, {actions, compile}) => {
+    setTimeout(async () => {
+        await loop({
+            actions,
+            compile,
+        });
+    });
+};
+const loop = async ({actions, compile}) => {
+    for await (const [operation, cursor] of listen(actions)) {
+        compile(operation, cursor);
+    }
+};

package/lunes/engine/listen.js ADDED Viewed

@@ -0,0 +1,61 @@
+export const listen = (events = ['click'], overrides = {}) => ({
+    [Symbol.asyncIterator]() {
+        const {
+            addEventListener = globalThis.addEventListener,
+            removeEventListener = globalThis.removeEventListener,
+        } = overrides;
+        const queue = [];
+        let resolveNext;
+        const handlers = events.map((event) => {
+            const fn = () => {
+                if (resolveNext) {
+                    resolveNext({
+                        value: event,
+                        done: false,
+                    });
+                    resolveNext = null;
+                    return;
+                }
+                queue.push(event);
+            };
+            addEventListener(event, fn);
+            return {
+                event,
+                fn,
+            };
+        });
+        const cleanup = () => {
+            for (const h of handlers) {
+                removeEventListener(h.event, h.fn);
+            }
+        };
+        return {
+            next() {
+                if (queue.length)
+                    return Promise.resolve({
+                        value: queue.shift(),
+                        done: false,
+                    });
+                return new Promise((resolve) => {
+                    resolveNext = resolve;
+                });
+            },
+            return() {
+                cleanup();
+                return Promise.resolve({
+                    done: true,
+                });
+            },
+        };
+    },
+});

package/lunes/engine/position/get-position.js ADDED Viewed

@@ -0,0 +1,35 @@
+import {calculate} from './calculate.js';
+export const getPosition = (name, event) => {
+    const element = document.querySelector(`[data-name="${name}"]`);
+    const heightMenu = getMenuHeight(element);
+    const widthMenu = getMenuWidth(element);
+    const {innerHeight, innerWidth} = globalThis;
+    const {x, y} = calculate(event, {
+        heightMenu,
+        widthMenu,
+        innerWidth,
+        innerHeight,
+    });
+    const left = x;
+    const top = y;
+    return {
+        position: {
+            left,
+            top,
+        },
+    };
+};
+function getMenuHeight(element) {
+    const {height} = getComputedStyle(element);
+    return parseInt(height, 10);
+}
+function getMenuWidth(element) {
+    const {width} = getComputedStyle(element);
+    return parseInt(width, 10);
+}

package/lunes/hydrate-menu.js ADDED Viewed

@@ -0,0 +1,34 @@
+import {createState} from './state/state.js';
+import {render} from './render/render.js';
+import {actions} from './actions/index.js';
+import {createLoop} from './engine/engine.js';
+import {createCompiler} from './compiler/compiler.js';
+export const hydrateMenu = (elementName, {hydrateElement, menu}) => {
+    const {commit} = createState(menu);
+    const compile = createCompiler(hydrateElement, {
+        commit,
+        render,
+    });
+    createLoop(hydrateElement, {
+        compile,
+        actions,
+    });
+    return {
+        show: (top = 0, left = 0) => {
+            compile('show', {
+                position: {
+                    top,
+                    left,
+                },
+            });
+        },
+        hide: () => {
+            compile('hide', {
+                position: {},
+            });
+        },
+    };
+};

package/lunes/importmap.js ADDED Viewed

@@ -0,0 +1,9 @@
+export const importmap = {
+    imports: {
+        'putout': 'https://esm.sh/@putout/bundle@5.5.0',
+        '@putout/processor-html': 'https://esm.sh/@putout/processor-html',
+        'fullstore': 'https://esm.sh/fullstore',
+        'jessy': 'https://esm.sh/jessy',
+        '#aleman': '../aleman/aleman.js',
+    },
+};

package/lunes/lunes.js ADDED Viewed

@@ -0,0 +1,102 @@
+const {stringify} = JSON;
+export const createMenu = async (elementName, options, menu) => {
+    options.name = options.name || 'menu';
+    const {name} = options;
+    const hydrateElement = createHydrate(name);
+    await createMap();
+    await loadStyle();
+    const {hydrateMenu} = await import('./hydrate-menu.js');
+    return hydrateMenu(elementName, {
+        hydrateElement,
+        options,
+        menu,
+    });
+};
+async function loadStyle() {
+    const name = 'aleman-menu-style';
+    if (findByName(name))
+        return;
+    const [error] = await tryToCatch(importCSS);
+    if (!error)
+        return;
+    createLink();
+}
+function createLink() {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = new URL('menu.css', import.meta.url).pathname;
+    document.head.appendChild(link);
+}
+async function importCSS() {
+    const content = await import('./menu.css', {
+        with: {
+            type: 'css',
+        },
+    });
+    const style = document.createElement('style');
+    style.dataset.name = name;
+    for (const rule of content.default.cssRules) {
+        style.innerHTML += rule.cssText;
+    }
+    document.head.appendChild(style);
+}
+function createHydrate(name) {
+    const hydrateElement = findByName(name);
+    if (hydrateElement)
+        return hydrateElement;
+    const section = document.createElement('section');
+    section.dataset.name = `aleman-hydrate-${name}`;
+    section.innerHTML = `<ul data-name="${name}" class="menu menu-hidden"></ul>`;
+    document.body.append(section);
+    return section;
+}
+async function createMap() {
+    const name = 'aleman-importmap';
+    if (findByName(name))
+        return;
+    const script = document.createElement('script');
+    const {importmap} = await import('./importmap.js');
+    script.dataset.name = name;
+    script.type = 'importmap';
+    script.innerHTML = stringify(importmap, null, 4);
+    document.body.append(script);
+}
+function findByName(name) {
+    return document.querySelector(`[data-name=${name}]`);
+}
+async function tryToCatch(fn, args) {
+    try {
+        return [null, await fn(...args)];
+    } catch(error) {
+        return [error];
+    }
+}

package/lunes/menu.css ADDED Viewed

@@ -0,0 +1,65 @@
+.menu-hidden {
+    display: none;
+}
+.menu {
+    position            : absolute;
+    z-index             : 2;
+    padding             : 0;
+    font-size           : 14px;
+    list-style          : none;
+    color               : #222;
+    background          : rgb(255 255 255 / 90%);
+    border-color        : rgb(49 123 249 / 40%);
+    border-style        : solid;
+    border-width        : 1px;
+    border-radius       : 5px;
+    -webkit-user-select : none;
+    -moz-user-select    : none;
+    -ms-user-select     : none;
+    user-select         : none;
+}
+.menu-button {
+    background: white;
+    border: 0;
+}
+.menu-item {
+    position: relative;
+    padding: 3px 20px;
+    white-space: nowrap;
+}
+.menu-item::after {
+    content: attr(data-key);
+    float: right;
+}
+.menu-item:hover, .menu-item-selected {
+    background-color: #e3f2ff;
+}
+.menu-item > .menu {
+    top: 0;
+    left: 100%;
+    display: none;
+}
+.menu-submenu-show > .menu, .menu-item:hover > .menu  {
+    display: block;
+}
+.menu-submenu > label::after {
+    display: block;
+    float: right;
+    width: 0;
+    height: 0;
+    margin-top: 3px;
+    margin-right: -10px;
+    border-color: transparent;
+    border-left-color: rgb(49 123 249);
+    border-style: solid;
+    border-width: 5px 0 5px 5px;
+    content: ' ';
+}

package/lunes/render/render.js ADDED Viewed

@@ -0,0 +1,16 @@
+import {putout} from 'putout';
+import {merge} from '@putout/processor-html';
+import * as buildMenu from './rules/build-menu/index.js';
+export const render = (state, options) => {
+    const {code} = putout(state, {
+        rules: {
+            'lunes/build-menu': ['on', options],
+        },
+        plugins: [
+            ['lunes/build-menu', buildMenu],
+        ],
+    });
+    return merge('', [code]);
+};

package/lunes/render/rules/build-menu/fixture/build-menu.js ADDED Viewed

@@ -0,0 +1,9 @@
+['on', {
+    view,
+    edit,
+    rename,
+    new: ['on', 'cursor', {
+        file,
+        directory,
+    }],
+}];

package/lunes/render/rules/build-menu/fixture/no-cursor-fix.js ADDED Viewed

@@ -0,0 +1,9 @@
+['on', 'no-cursor', {
+    view,
+    edit,
+    rename,
+    new: ['off', {
+        file,
+        directory,
+    }],
+}];

package/lunes/render/rules/build-menu/fixture/no-cursor.js ADDED Viewed

@@ -0,0 +1,9 @@
+['on', 'no-cursor', {
+    view,
+    edit,
+    rename,
+    new: ['off', {
+        file,
+        directory,
+    }],
+}];

package/lunes/{rules → render/rules}/build-menu/index.js RENAMED Viewed

@@ -17,6 +17,20 @@ const {
     setAttributeValue,
 } = operator;
+const isOn = ({node}) => {
+    if (isObjectProperty(node))
+        return node.value.value;
+    return node.elements[0].value === 'on';
+};
+const isSelected = ({node}) => {
+    if (isObjectProperty(node))
+        return node.value.value;
+    return node.elements[1].value === 'cursor';
+};
 export const report = () => `Build menu`;
 export const include = () => [
     'ObjectProperty',
@@ -46,8 +60,7 @@ const createMenuItem = (path) => {
         return submenu;
     }
-    const selected = path.node.value.value === 'cursor';
-    const classSelected = selected ? ' menu-item-selected' : '';
+    const classSelected = isSelected(path) ? 'menu-item-selected' : '';
     const node = template.ast.fresh(`
         <li data-name="menu-item" className="menu-item${classSelected}">
@@ -59,12 +72,11 @@ const createMenuItem = (path) => {
 };
 const createUL = (path) => {
-    const show = path.node.elements[0].value === 'open';
     const node = template.ast.fresh(`
         <ul className="menu menu-hidden"></ul>
     `);
-    if (show)
+    if (isOn(path))
         removeClassName(node, 'menu-hidden');
     return node;
@@ -72,12 +84,8 @@ const createUL = (path) => {
 const createSubmenu = (path) => {
     const {name} = path.parentPath.node.key;
-    const selected = path.node.elements[1].value === 'cursor';
-    const show = path.node.elements[0].value === 'open';
-    const menuHidden = show ? '' : ' menu-hidden';
-    const classSelected = selected ? '  menu-item-selected' : '';
+    const menuHidden = isOn(path) ? '' : ' menu-hidden';
+    const classSelected = isSelected(path) ? '  menu-item-selected' : '';
     const node = template.ast.fresh(`
         <li data-name="menu-item" className="menu-item${classSelected}">
@@ -89,21 +97,10 @@ const createSubmenu = (path) => {
     return node;
 };
-const parsePosition = (path) => {
-    const [left, top] = path
-        .node
-        .elements
-        .at(-2)
-        .value
-        .split(':');
+export const fix = (path, {options}) => {
+    const {position} = options;
+    const {top, left} = position;
-    return {
-        left,
-        top,
-    };
-};
-export const fix = (path) => {
     if (isObjectProperty(path)) {
         replaceWith(path, createMenuItem(path));
         return;
@@ -114,9 +111,6 @@ export const fix = (path) => {
         if (isExpressionStatement(path.parentPath)) {
             replaceWith(path, ul);
-            const {left, top} = parsePosition(path);
             setAttributeValue(ul, 'style', `left: ${left}px; top: ${top}px`);
         }

package/lunes/render/rules/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import * as buildMenu from './build-menu/index.js';
+export const rules = {
+    'build-menu': buildMenu,
+};

package/lunes/state/convert-menu-to-state/convert-menu-to-state.js CHANGED Viewed

@@ -1,7 +1,7 @@
 const {entries} = Object;
 const isObject = (a) => a && typeof a === 'object';
-export function convertMenuToState(menu) {
+export function convertMenuToState(menu, {submenu} = {}) {
     const result = [];
     for (const [key, value] of entries(menu)) {
@@ -10,8 +10,12 @@ export function convertMenuToState(menu) {
             continue;
         }
-        result.push(`${key}: ${convertMenuToState(value)}`);
+        result.push(`${key}: ${convertMenuToState(value, {
+            submenu: true,
+        })}`);
     }
-    return `['close',{${result.join(',')}}]`;
+    const noCursor = submenu ? '' : `'no-cursor', `;
+    return `['off', ${noCursor} {${result.join(', ')}}]`;
 }

package/lunes/state/{README.md → rules/README.md} RENAMED Viewed

@@ -2,3 +2,4 @@
 - [add-cursor](https://putout.cloudcmd.io/#/gist/0d0be0b7d19949be48c4122416654936/0cf8e1c512a0503f8c4bd0abf2af221b6680630b);
 - [move-cursor](https://putout.cloudcmd.io/#/gist/54ff76b9673e0caf216b0f0f33d9f8bb/dad16ba0f861073a3ab7549e553dd2b97d252729);
+- [apply-visibility](https://putout.cloudcmd.io/#/gist/7b97aaec7fcc518de4f6eef4ecc3dd58/f38db01fb9af051d49bd114bfb7bb04d2298c501);

package/lunes/state/rules/add-cursor/fixture/add-cursor.js ADDED Viewed

@@ -0,0 +1,9 @@
+['on', 'no-cursor', {
+    view,
+    edit,
+    rename,
+    new: ['off', {
+        file,
+        directory,
+    }],
+}];

package/lunes/state/{add-cursor → rules/add-cursor}/fixture/down-fix.js RENAMED Viewed

@@ -1,8 +1,8 @@
-['open', 'view', {
+['on', {
     view: 'cursor',
     edit,
     rename,
-    new: ['close', {
+    new: ['off', {
         file,
         directory,
     }],

package/lunes/state/{add-cursor → rules/add-cursor}/fixture/down.js RENAMED Viewed

@@ -1,9 +1,9 @@
-['open', 'no-cursor', {
+['on', 'no-cursor', {
     view,
     edit,
     rename,
-    new: ['close', {
+    new: ['off', {
         file,
         directory,
-    }]
+    }],
 }];

package/lunes/state/{add-cursor → rules/add-cursor}/fixture/up-fix.js RENAMED Viewed

@@ -1,8 +1,8 @@
-['open', 'new', {
+['on', {
     view,
     edit,
     rename,
-    new: ['cursor', 'close', {
+    new: ['off', 'cursor', {
         file,
         directory,
     }],

package/lunes/state/{add-cursor → rules/add-cursor}/fixture/up.js RENAMED Viewed

@@ -1,9 +1,9 @@
-['open', 'no-cursor', {
+['on', 'no-cursor', {
     view,
     edit,
     rename,
-    new: ['close', {
+    new: ['off', {
         file,
         directory,
-    }]
+    }],
 }];

package/lunes/state/{add-cursor → rules/add-cursor}/index.js RENAMED Viewed

@@ -5,7 +5,7 @@ import {
     setCursor,
 } from '../cursor.js';
-const {setLiteralValue} = operator;
+const {remove} = operator;
 const operations = {
     last,
@@ -30,9 +30,5 @@ export const fix = (path, {options}) => {
     const cursorPath = getCursor(path);
     setCursor(cursorPath);
-    const keyPath = cursorPath.get('key');
-    const {name} = keyPath.node;
-    setLiteralValue(path.node, name);
+    remove(path);
 };

package/lunes/state/rules/apply-visibility/fixture/apply-visibility-fix.js ADDED Viewed

@@ -0,0 +1,9 @@
+['on', 'no-cursor', {
+    view,
+    edit,
+    rename,
+    new: ['off', {
+        file,
+        directory,
+    }],
+}];

package/lunes/state/{add-cursor/fixture/add-cursor.js → rules/apply-visibility/fixture/apply-visibility.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-['open', 'no-cursor', {
+['off', 'no-cursor', {
     view,
     edit,
     rename,
-    new: ['close', {
+    new: ['off', {
         file,
         directory,
     }]

package/lunes/state/rules/apply-visibility/index.js ADDED Viewed

@@ -0,0 +1,29 @@
+import {types} from 'putout';
+const {isExpressionStatement} = types;
+export const report = () => `Apply visibility`;
+export const match = ({options}) => {
+    const {operation = 'show'} = options;
+    return {
+        '"off"': (vars, path) => {
+            if (operation !== 'show')
+                return false;
+            return isExpressionStatement(path.parentPath.parentPath);
+        },
+        '"on"': (vars, path) => {
+            if (operation !== 'hide')
+                return false;
+            return isExpressionStatement(path.parentPath.parentPath);
+        },
+    };
+};
+export const replace = () => ({
+    '"off"': '"on"',
+    '"on"': '"off"',
+});

package/lunes/state/{cursor.js → rules/cursor.js} RENAMED Viewed

@@ -36,7 +36,7 @@ export function setCursor(path) {
     }
     if (isArrayExpression(valuePath))
-        valuePath.node.elements.unshift(stringLiteral('cursor'));
+        valuePath.node.elements.splice(1, 0, stringLiteral('cursor'));
 }
 export function prev(path) {

package/lunes/state/{move-cursor → rules/move-cursor}/fixture/move-cursor-fix.js RENAMED Viewed

@@ -1,8 +1,8 @@
-['open', '10:20', {
+['on', {
     view,
     edit,
     rename,
-    new: ['cursor', 'close', {
+    new: ['off', 'cursor', {
         file,
         directory,
     }],

package/lunes/state/{move-cursor → rules/move-cursor}/fixture/move-cursor.js RENAMED Viewed

@@ -1,8 +1,8 @@
-['open', '10:20', {
+['on', {
     view: 'cursor',
     edit,
     rename,
-    new: ['close', {
+    new: ['off', {
         file,
         directory,
     }],

package/lunes/state/state.js CHANGED Viewed

@@ -1,27 +1,34 @@
 import {putout} from 'putout';
 import {convertMenuToState} from './convert-menu-to-state/convert-menu-to-state.js';
-import * as addCursor from './add-cursor/index.js';
-import * as moveCursor from './move-cursor/index.js';
+import * as addCursor from './rules/add-cursor/index.js';
+import * as moveCursor from './rules/move-cursor/index.js';
+import * as applyVisibility from './rules/apply-visibility/index.js';
 export const createState = (menu) => {
     const state = convertMenuToState(menu);
     return {
-        updateState: createUpdateState(state),
+        commit: createCommit(state),
     };
 };
-function createUpdateState(state, options) {
+const createCommit = (state) => (operation) => {
+    const options = {
+        operation,
+    };
     const {code} = putout(state, {
         rules: {
             'add-cursor': ['on', options],
             'move-cursor': ['on', options],
+            'apply-visibility': ['on', options],
         },
         plugins: [
             ['add-cursor', addCursor],
             ['move-cursor', moveCursor],
+            ['apply-visibility', applyVisibility],
         ],
     });
     return code;
-}
+};

package/menu/addons/set-position/set-position.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {calculate} from './calculate.js';
+import {calculate} from '../../../lunes/engine/position/calculate.js';
 export const setPosition = (name, event) => {
     const element = document.querySelector(`[data-name="${name}"]`);

package/menu/hydrate-menu.js CHANGED Viewed

@@ -6,7 +6,6 @@ import {createMouseEnter} from './addons/mouse-leave/index.js';
 import {createItemClick} from './addons/item-click/item-click.js';
 import * as click from './addons/click/click.js';
 import {createContextMenu} from './addons/context-menu.js';
-import {setPosition} from './addons/set-position/set-position.js';
 const {assign} = Object;
@@ -29,7 +28,6 @@ export const hydrateMenu = (elementName, {hydrateElement, options, menu}) => {
             ...addons,
         ],
         rules,
-        afterHydrate: setPosition,
         stateName: `aleman-state-${name}`,
     });

package/nemo/hydrate-menu.js CHANGED Viewed

@@ -6,7 +6,6 @@ import {createMouseEnter} from './addons/mouse-leave/index.js';
 import {createItemClick} from './addons/item-click/item-click.js';
 import * as click from './addons/click/click.js';
 import {createContextMenu} from './addons/context-menu.js';
-import {setPosition} from './addons/set-position/set-position.js';
 const {assign} = Object;
@@ -29,7 +28,6 @@ export const hydrateMenu = (elementName, {hydrateElement, options, menu}) => {
             ...addons,
         ],
         rules,
-        afterHydrate: setPosition,
         stateName: `aleman-state-${name}`,
     });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "aleman",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "type": "module",
   "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
   "description": "🐊Putout-based framework for web",
@@ -25,7 +25,8 @@
     "report": "madrun report"
   },
   "imports": {
-    "#test": "./test/create-test.js"
+    "#test": "./test/create-test.js",
+    "#aleman": "./aleman/lib/index.js"
   },
   "dependencies": {
     "@putout/processor-html": "^14.0.2",

package/lunes/rules/build-menu/fixture/build-menu.js DELETED Viewed

@@ -1,9 +0,0 @@
-['open', '100:20', {
-    view,
-    edit,
-    rename,
-    new: ['open', 'cursor', {
-        file,
-        directory,
-    }]
-}];

/package/{menu/addons/set-position → lunes/engine/position}/calculate.js RENAMED Viewed

File without changes

/package/lunes/{rules → render/rules}/README.md RENAMED Viewed

File without changes

/package/lunes/{rules → render/rules}/build-menu/fixture/build-menu-fix.js RENAMED Viewed

File without changes

/package/lunes/state/{move-cursor → rules/move-cursor}/index.js RENAMED Viewed

File without changes