@microdom/mode 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Silvio Corigliano
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,135 @@
+
+# Mode JS
+
+**Mode JS** is a low-level interaction engine for the web.
+It belongs to the **Microdom** ecosystem.
+
+It does not provide widgets, components, or behaviors.
+It provides a way to reason about **movement**, **intent**, and **structure**.
+
+Mode JS is designed for developers who want to *build* interactions,
+not configure them.
+
+---
+
+## What Mode JS is
+
+![Mode JS ](./assets/logo.png)
+- A low-level interaction primitive
+- Pointer- and touch-aware
+- Minimal by design
+- Framework-agnostic
+- DOM-friendly
+- Data-binding ready
+
+Mode JS helps you express *how things move* — not *what they are*.
+
+---
+
+## What Mode JS is not
+
+- ❌ A WebComponents library
+- ❌ A UI framework
+- ❌ A state machine
+- ❌ A collection of ready-made behaviors
+
+Those things can be **built with Mode JS**, but they do not belong inside it.
+
+---
+### Install
+
+```bash
+npm install @microdom/mode
+```
+**Usage**
+```bash
+import µ from "@microdom/mode"
+// or: import { µ } from "@microdom/mode"
+```
+
+**CDN**
+```html
+<script src="https://cdn.jsdelivr.net/gh/microdom/mode.js/dist/mode.min.js"></script>
+<script>
+  µ("body", { /* ... */ })
+</script>
+```
+
+
+## Why Mode JS exists
+
+Most interaction libraries:
+- abstract too early
+- hide intent behind state
+- grow uncontrollably
+- break at the edges (touch, empty states, nested structures)
+
+Mode JS takes a different approach:
+
+> **Movement first.  
+> Intent is explicit.  
+> Structure matters more than features.**
+
+---
+
+## Why not X?
+
+Modern UI stacks often require tens of kilobytes of code
+to express a simple interaction.
+
+Mode JS asks a different question:
+
+> *How much code do you actually need  
+> to make something feel right?*
+
+```md
+A complete multi-list sortable with touch support
+can be built in **~6 KB total**.
+```
+
+Read the full comparison in  
+[`docs/why-not-x.md`](docs/why-not-x.md).
+
+---
+
+### Code weight in perspective
+>Characters © Team Cherry
+
+![Mode JS vs frameworks — code weight comparison](./assets/mode-weight-meme.jpg)
+
+> The little one can rule the town.
+
+---
+
+## Repository structure
+
+If you’re looking for examples, start in **/demos**.  
+If you’re looking for ideas, start in **/docs**.
+
+---
+
+## Demos
+
+- **Sortable (multi-list + touch)**  
+  A complete sortable interaction built with ~6 KB of code.
+  Demonstrates intent gating, empty container handling, and cross-list movement.
+
+Each demo is intentionally **self-contained**.
+They are not plugins — they are *proofs of thought*.
+
+---
+
+## Philosophy
+
+Mode JS is opinionated:
+
+> “If an interaction cannot be expressed simply,
+> the abstraction is probably wrong.”
+
+Read more in [`docs/philosophy.md`](docs/philosophy.md).
+
+---
+
+## License
+
+MIT

package/dist/mode.js

@@ -0,0 +1,455 @@
+
+function µ(el, fns) {
+    const _ = null
+    const roneTag = (/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i)
+    const rhtml = /<|&#?\w+;/
+    const rtagName = (/<([a-z][^\/\0>\x20\t\r\n\f]*)/i)
+    const whitespace = "[\\x20\\t\\r\\n\\f]"
+    const rtrim = new RegExp("^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g")
+    const tr = (s) => s.replace(/^\s\s*/, '').replace(/\s\s*$/, '').replace(/(\r\n|\n|\r)/gm, "").replace(/>\s+</g, '><')
+    const arr =  ( b , n=null) => n? n=='array'? Array.from(b) : Object[n](b) : Object.entries(b) 
+    const __ = {
+        html,
+        text,
+        insert,
+        on,
+        each,
+        proceed,
+        find,
+        css,
+        classes,
+        clss,
+        attr,
+        prev,
+        next,
+        parents,
+        childs,
+        after,
+        children,
+        last,
+        first,
+        siblingsAll,
+        siblings,
+        filter,
+        wrap
+    }
+    function el_(s) {
+        s.forEach(e => e.setAttribute(`µicro`, "µ"))
+        _el = getEl(`/[µicro]/`)
+        _el.forEach(e => e.removeAttribute(`µicro`))
+    }
+    const nodeDom = (t, att, tx, ch) => {
+        let o = document.createElement(t)
+        function val(v) {
+            return typeof v !== 'object' ? v : Object.keys(v).map((e) => `${e}:${v[e]}`).join(';')
+        }
+        for (const key in att) o.setAttribute(key, val(att[key]))
+        if (tx) {
+            let newtext = document.createTextNode(tx)
+            o.appendChild(newtext)
+        }
+        for (const key in childs) o.appendChild(childs[key])
+        return o
+    }
+    let _el = el !== _ ? getEl(el) : el
+    if (!!fns) {
+        for (let [fn, p] of Object.entries(fns)) {
+            fn = fn.replace(/_/g, '')
+            _el && typeof __[fn] === 'function' ? __[fn](p) : null
+        }
+    }
+    function getEl(e) {
+        e = isStr(e) ? tr(e) : e
+        const sel = (s, c) => s.at(0) == '/' && s.at(-1) == '/' ? c.querySelectorAll(s.replace(/^\/|\/$/g, '')) : c.querySelector(s)
+        if (isEl(e) || isList(e)) {
+            return e
+        } else if (isArr(e)) {
+            let s, c
+            if (isStr(e[1])) {
+                c = document.querySelector(e[1])
+            } else if (isEl(e[1])) {
+                c = e[1]
+            }
+            if (isStr(e[0])) {
+                s = e[0]
+                return sel(s, c)
+            }
+            if (isEl(e[0])) {
+                return e
+            }
+            return console.error('Array error')
+        } else if (isHtml(e)) {
+            return parseHTML(e)
+        } else if (isStr(e)) {
+            return sel(e, document)
+        }
+    }
+    function isArr(e) { return Array.isArray(e) }
+    function isEl(e) { return e instanceof HTMLElement /* || e.nodeType  */ }
+    function isList(e) { return NodeList.prototype.isPrototypeOf(e) }
+    function isStr(e) { return typeof e === 'string' || e instanceof String }
+    function isColl(e) { return HTMLCollection.prototype.isPrototypeOf(e) }
+    function isHtml(e) { return e[0] === "<" && e[e.length - 1] === ">" }
+// Helpers
+    function html(p) {
+        if (!isStr(p)) return false
+        isList(_el) || isArr(_el) ? _el.forEach(el => el.innerHTML = p) : _el.innerHTML = p
+    }
+    function text(p) {
+        if (!isStr(p)) return false
+        isList(_el) || isArr(_el) ? _el.forEach(el => el.textContent = p) : _el.textContent = p
+    }
+    function parseHTML(p) {
+        let o = nodeDom('div', {}, '', '')
+        o.insertAdjacentHTML("beforeend", p.replace(/\s+/g, ' '))
+        return o.firstChild
+    }
+    function insert(p) {
+        if ( isHtml(p)) _el.insertAdjacentHTML("beforeend", p.replace(/\s+/g, ' '))
+        else if( isEl(p))   _el.appendChild(p)
+    }
+    function on(p) {
+        const add = (e, fn, el = null) => {
+            el = !!el ? el : _el
+            console.log(el, "····")
+            isList(el) || isArr(el) ? el.forEach(l => l.addEventListener(e, fn, false)) :
+                el.addEventListener(e, fn, false)
+        }
+        const ctm = (c, t, fn) => {
+            _el.addEventListener(e, fn, false)
+        }
+        const on = (o) => {
+            if (o.e)
+                isArr(o.e) ? o.e.forEach(n => add(n, o.fn)) : add(o.e, o.fn)
+            if (o.l) {
+                isArr(o.l) ? o.l.forEach(n => add(o.e, n.fn, n.tg)) : add(o.e, o.l.fn, o.l.tg)
+            }
+        }
+        isArr(p) ? p.forEach(e => on(e)) : on(p)
+    }
+
+    function each(p) {
+        isList(_el) || isArr(_el) ? _el.forEach(p) : p(_el)
+    }
+    function proceed(p) {
+        _el = p(_el)
+    }
+    function find(p) {
+        const xel = (s, c) => s.at(0) == '/' && s.at(-1) == '/' ? c.querySelectorAll(s.replace(/^\/|\/$/g, '')) : c.querySelector(s)
+        let n, found = document.createElement('div')
+        isList(_el) || isArr(_el) ? _el.forEach(el => {
+            n = xel(p, el)
+            if (n != null) found.append(n)
+        }) : _el = getEl([p, _el])
+        if (found.childNodes.length > 0) _el = found.childNodes
+    }
+    function css(p) {
+        const add = (s, v) => {
+            isList(_el) || isArr(_el) ? _el.forEach(el => el.style[s] = v) : _el.style[s] = v
+        }
+        Object.keys(p).map((k) => add(k, p[k]))
+    }
+    function classes(p) {
+        const add = (s, v) => {
+            const set = (el, s, v) => { isArr(v) ? v.forEach(i => el.classList[s](i)) : el.classList[s](v) }
+            isList(_el) || isArr(_el) ? _el.forEach(el => set(el, s, v)) : set(_el, s, v)
+        }
+        Object.keys(p).map((k) => add(k, p[k]))
+    }
+    function clss(p) {
+        const add = (s, v) => {
+            const set = (el, s, v) => { isArr(v) ? v.forEach(i => el.classList[s](i)) : el.classList[s](v) }
+            isList(_el) || isArr(_el) ? _el.forEach(el => set(el, s, v)) : set(_el, s, v)
+        }
+        Object.keys(p).map((k) => add(k, p[k]))
+    }
+    function attr(p) {
+        const bin =(el,s,v) => {
+            switch (s) {
+                case "set": el.setAttribute(arr(v)[0][0],arr(v)[0][1]);break
+                case "get": el.getAttribute(v);break
+                case "del": el.removeAttribute(v);break
+                case "has": el.hasAttribute(v);break
+                case "tog": el.toggleAttribute(v);break
+                case "list": el.getAttributeNames()
+            }
+        }
+        const add = (s, v) => {
+            const set = (el, s, v) => { isArr(v) ? v.forEach(i => bin(el,s,i)) : bin(el,s,v) }
+            isList(_el) || isArr(_el) ? _el.forEach( el => set(el, s, v)) : set(_el, s, v)
+        }
+        Object.keys(p).map((k) => add(k, p[k]))
+    }
+    function prev(p) {
+        if (isList(_el)) return false
+        if (p) {
+            let prev = _el.previousElementSibling
+            while (prev && !prev.matches(p)) prev = prev.previousElementSibling
+            _el = prev
+        } else {
+            _el = _el.previousElementSibling
+        }
+    }
+    function next(p) {
+        if (isList(_el)) return false
+        if (p) {
+            let next = _el.nextElementSibling
+            while (next && !next.matches(p)) next = next.nextElementSibling
+            _el = next;
+        } else {
+            _el = _el.nextElementSibling
+        }
+    }
+
+    function parents(p) {
+        if (!isEl(_el)) return false
+        const parents = []
+        el = _el
+        while ((el = el.parentNode) && el !== document) {
+            (!p || el.matches(p)) ? parents.push(el) : _
+        }
+        _el = parents
+    }
+
+    function childs(p) {
+        if (!isEl(_el)) return false
+        let el = []
+        for (const e of _el.childNodes) {
+            isEl(e) && (!p || e.matches(p)) ? el.push(e) : _
+        }
+        el_(el)
+    }
+    function after(p) {
+        if (!isEl(_el)) return false
+        _el.parentNode.insertBefore(p, _el.nextSibling);
+    }
+    function children(p) {
+        if (!isEl(_el)) return false
+        el = [..._el.children].filter((child) => p ? child.matches(p) : child)
+        el_(el)
+    }
+
+    function last(p) {
+        if (!isList(_el) && !isArr(_el)) return null
+        let child
+        isStr(p) ?
+            _el.forEach(e => e.matches(p) ? child = e : _)
+            : _el.forEach(e => child = e)
+        _el = child
+    }
+
+    function first(p) {
+        if (!isList(_el) && !isArr(_el)) return null
+        if (isStr(p)) {
+            try {
+                _el.forEach(r => { if (r.matches(p)) throw _el = r, "break" })
+            } catch (r) { if ("break" !== r) throw r }
+        } else {
+            try {
+                _el.forEach((r, i) => { if (i === 0) throw _el = r, "break" })
+            } catch (r) { if ("break" !== r) throw r }
+        }
+    }
+    function siblingsAll(p) {
+        if (!isEl(_el)) return false
+        el = [..._el.parentNode.children].filter((child) => p ? child.matches(p) : child)
+        el_(el)
+    }
+    function siblings(p) {
+        if (!isEl(_el)) return false
+        el = [..._el.parentNode.children].filter((child) => p ? child.matches(p) && child !== _el : child !== _el)
+        el_(el)
+    }
+    function filter(p) {
+        if (!isList(_el) || !p) return false
+        el = [..._el].filter((item) => item.matches(p))
+        el_(el)
+    }
+    function wrap(p) {
+        const add = (e, w) => {
+            e.parentElement.insertBefore(w, e)
+            w.appendChild(e)
+        }
+        (isList(_el) || isArr(_el)) ? _el.forEach(e => add(e, p.cloneNode())) : add(_el, p.cloneNode())
+    }
+    return isArr(_el) && _el.length === 0 ? _ : _el
+}
+function moveDOM(fns) {
+    const _ = null
+    let _return
+    if (fns) {
+        for (let [fn, params] of Object.entries(fns)) {
+            fn = fn.replace(/_/g, '')
+            typeof eval(fn) === 'function' ? eval(fn)(params) : null
+        }
+    }
+    function isArr(e) { return Array.isArray(e) }
+    function isEl(e) { return e instanceof HTMLElement }
+    function isList(e) { return NodeList.prototype.isPrototypeOf(e) }
+    function isStr(e) { return typeof e === 'string' || e instanceof String }
+    function wrap(p) {
+        const add = (e, w) => {
+            e.parentElement.insertBefore(w, e)
+            w.appendChild(e)
+        }
+        isList(p.el) ? p.el.forEach(e => add(e, p.wrp.cloneNode())) : add(p.el, p.wrp.cloneNode())
+    }
+
+    function slideUp(p) {
+        let css = {
+            transitionProperty: 'height, margin, padding',
+            transitionDuration: p.t + 'ms',
+            boxSizing: 'border-box',
+            height: p.el.offsetHeight + 'px'
+        }
+        let css2 = {
+            overflow: 'hidden',
+            height: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            marginTop: 0,
+            marginBottom: 0
+        }
+        µ(p.el, { css: css })
+        p.el.offsetHeight
+        µ(p.el, { css: css2 })
+        setTimeout(() => {
+            ['height', 'padding-top', 'padding-bottom', 'margin-top', 'margin-bottom', 'overflow', 'transition-duration', 'transition-property']
+                .forEach(i => p.el.style.removeProperty(i))
+            p.el.style.display = 'none'
+            p.fn ? p.fn() : _
+        }, p.t)
+    }
+
+    function slideDown(p) {
+        let display = getComputedStyle(p.el).display
+        if (display === 'none') display = 'block'
+        p.el.style.display = display
+        let height = p.el.offsetHeight
+        const time = Math.ceil(p.t * (height / 200))
+        console.log("time >>", time)
+        let css = {
+            overflow: 'hidden',
+            height: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            marginTop: 0,
+            marginBottom: 0,
+        }
+        let css2 = {
+            boxSizing: 'border-box',
+            transitionProperty: "height, margin, padding",
+            transitionDuration: time + 'ms',
+            height: height + 'px'
+        }
+
+        µ(p.el, {
+            css: css
+        })
+        p.el.offsetHeight
+        µ(p.el, { css: css2 })
+        let a = ['padding-top', 'padding-bottom', 'margin-top', 'margin-bottom']
+            .forEach(i => p.el.style.removeProperty(i))
+        setTimeout(() => {
+            ['height', 'overflow', 'transition-duration', 'transition-property']
+                .forEach(i => p.el.style.removeProperty(i))
+            // (↓)callback
+            p.fn ? p.fn() : _
+        }, time);
+    }
+
+    function slideToggle(p) {
+        getComputedStyle(p.el).display === 'none' ? slideDown(p) : slideUp(p)
+    }
+
+    function offset(p) {
+        let rect = p.getBoundingClientRect(), _body = document.body
+        _return = {
+            top: rect.top + _body.scrollTop,
+            left: rect.left + _body.scrollLeft
+        }
+    }
+    function pos(p) {
+        let rect = p.getBoundingClientRect(), _body = document.body
+        _return = {
+            top: rect.top + _body.scrollTop,
+            left: rect.left + _body.scrollLeft
+        }
+    }
+
+    function last(p) {
+        _return = p.length ? p[p.length - 1] : _
+    }
+    function first(p) {
+        _return = p.length ? p[0] : _
+    }
+ 
+    if (!!_return) return _return
+}
+//////// HELPERS
+µ.e = ( e , d=null , b = !0 )=> b? new CustomEvent( e, { detail: d, bubbles: b }):new Event(e)
+µ.l = ( n , e , fn) => n.addEventListener(e,(fn))
+µ.d =  ( e, n=null  )=> n ? n.dispatchEvent(e) : null
+µ.t = ( e, o=null) =>  ( e.preventDefault(), e.stopPropagation(), o)? µ(e.target.closest(o)): e.target 
+µ.a = ( b , t=null) => t? t=='array'? Array.from(b) : Object[t](b) : Object.entries(b)  // t= Object types ( keys, values)
+µ.ar =µ.a
+µ.ax = ( options ) =>{
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const method = options.method ? options.method.toUpperCase() : 'GET';
+    let url = options.url || '';
+    const isGet = method === 'GET';
+    const headers = options.headers || {};
+    if (isGet && options.data) {
+      const queryString = new URLSearchParams(options.data).toString();
+      url += (url.includes('?') ? '&' : '?') + queryString;
+    }
+
+    xhr.open(method, url, true);
+    for (let key in headers) {
+      xhr.setRequestHeader(key, headers[key]);
+    }
+    if (!headers['Content-Type'] && !(options.data instanceof FormData) && method !== 'GET') {
+      xhr.setRequestHeader('Content-Type', 'application/json');
+    }
+
+    if (options.timeout) {
+      xhr.timeout = options.timeout;
+    }
+
+    xhr.onload = () => {
+      const isSuccess = xhr.status >= 200 && xhr.status < 300;
+      let response = xhr.responseText;
+
+      try {
+        response = JSON.parse(response);
+      } catch (e) { /* Not JSON */ }
+
+      if (isSuccess) {
+        resolve({ response, status: xhr.status, xhr });
+      } else {
+        reject({ error: xhr.statusText, status: xhr.status, xhr });
+      }
+    };
+
+    xhr.onerror = () => {
+      reject({ error: xhr.statusText, status: xhr.status, xhr });
+    };
+
+    let payload = null;
+    if (!isGet && options.data) {
+      if (options.data instanceof FormData) {
+        payload = options.data;
+      } else {
+        payload = JSON.stringify(options.data);
+      }
+    }
+    xhr.send(payload);
+  });
+}
+if (typeof window !== 'undefined') {
+window._ = null
+window.html = String.raw
+window.µ = µ
+window._µ = moveDOM
+}

package/dist/mode.min.js

@@ -0,0 +1,2 @@
+/* MIT License Copyright (c) 2025 Silvio Corigliano https://github.com/microdom/mode.js */
+function µ(a,b){function c(a){a.forEach(a=>a.setAttribute(`µicro`,"\xB5")),K=d(`/[µicro]/`),K.forEach(a=>a.removeAttribute(`µicro`))}function d(a){a=i(a)?G(a):a;const b=(a,b)=>"/"==a.at(0)&&"/"==a.at(-1)?b.querySelectorAll(a.replace(/^\/|\/$/g,"")):b.querySelector(a);if(g(a)||h(a))return a;if(f(a)){let d,e;return i(a[1])?e=document.querySelector(a[1]):g(a[1])&&(e=a[1]),i(a[0])?(d=a[0],b(d,e)):g(a[0])?a:console.error("Array error")}return j(a)?m(a):i(a)?b(a,document):void 0}function f(a){return Array.isArray(a)}function g(a){return a instanceof HTMLElement}function h(a){return NodeList.prototype.isPrototypeOf(a)}function i(a){return"string"==typeof a||a instanceof String}function j(a){return"<"===a[0]&&">"===a[a.length-1]}function k(a){return!!i(a)&&void(h(K)||f(K)?K.forEach(b=>b.innerHTML=a):K.innerHTML=a)}function l(a){return!!i(a)&&void(h(K)||f(K)?K.forEach(b=>b.textContent=a):K.textContent=a)}function m(a){let b=J("div",{},"","");return b.insertAdjacentHTML("beforeend",a.replace(/\s+/g," ")),b.firstChild}function n(a){j(a)?K.insertAdjacentHTML("beforeend",a.replace(/\s+/g," ")):g(a)&&K.appendChild(a)}function o(a){const b=(a,b,c=null)=>{c=!c?K:c,console.log(c,"\xB7\xB7\xB7\xB7"),h(c)||f(c)?c.forEach(c=>c.addEventListener(a,b,!1)):c.addEventListener(a,b,!1)},c=a=>{a.e&&(f(a.e)?a.e.forEach(c=>b(c,a.fn)):b(a.e,a.fn)),a.l&&(f(a.l)?a.l.forEach(c=>b(a.e,c.fn,c.tg)):b(a.e,a.l.fn,a.l.tg))};f(a)?a.forEach(a=>c(a)):c(a)}function e(a){h(K)||f(K)?K.forEach(a):a(K)}function p(a){K=a(K)}function q(a){const b=(a,b)=>"/"==a.at(0)&&"/"==a.at(-1)?b.querySelectorAll(a.replace(/^\/|\/$/g,"")):b.querySelector(a);let c,e=document.createElement("div");h(K)||f(K)?K.forEach(d=>{c=b(a,d),null!=c&&e.append(c)}):K=d([a,K]),0<e.childNodes.length&&(K=e.childNodes)}function r(a){if(h(K))return!1;if(a){let b=K.previousElementSibling;for(;b&&!b.matches(a);)b=b.previousElementSibling;K=b}else K=K.previousElementSibling}function s(a){if(h(K))return!1;if(a){let b=K.nextElementSibling;for(;b&&!b.matches(a);)b=b.nextElementSibling;K=b}else K=K.nextElementSibling}function t(b){if(!g(K))return!1;const c=[];for(a=K;(a=a.parentNode)&&a!==document;)!b||a.matches(b)?c.push(a):D;K=c}function u(a){if(!g(K))return!1;let b=[];for(const c of K.childNodes)g(c)&&(!a||c.matches(a))?b.push(c):D;c(b)}function v(a){return!!g(K)&&void K.parentNode.insertBefore(a,K.nextSibling)}function w(b){return!!g(K)&&void(a=[...K.children].filter(a=>b?a.matches(b):a),c(a))}function x(a){if(!h(K)&&!f(K))return null;let b;i(a)?K.forEach(c=>c.matches(a)?b=c:D):K.forEach(a=>b=a),K=b}function y(a){if(!h(K)&&!f(K))return null;if(i(a))try{K.forEach(b=>{if(b.matches(a))throw K=b,"break"})}catch(a){if("break"!==a)throw a}else try{K.forEach((a,b)=>{if(0===b)throw K=a,"break"})}catch(a){if("break"!==a)throw a}}function z(b){return!!g(K)&&void(a=[...K.parentNode.children].filter(a=>b?a.matches(b):a),c(a))}function A(b){return!!g(K)&&void(a=[...K.parentNode.children].filter(a=>b?a.matches(b)&&a!==K:a!==K),c(a))}function B(b){return!!(h(K)&&b)&&void(a=[...K].filter(a=>a.matches(b)),c(a))}function C(a){const b=(a,b)=>{a.parentElement.insertBefore(b,a),b.appendChild(a)};h(K)||f(K)?K.forEach(c=>b(c,a.cloneNode())):b(K,a.cloneNode())}const D=null,E="[\\x20\\t\\r\\n\\f]",F=new RegExp("^"+E+"+|((?:^|[^\\\\])(?:\\\\.)*)"+E+"+$","g"),G=a=>a.replace(/^\s\s*/,"").replace(/\s\s*$/,"").replace(/(\r\n|\n|\r)/gm,"").replace(/>\s+</g,"><"),H=(a,b=null)=>b?"array"==b?Array.from(a):Object[b](a):Object.entries(a),I={html:k,text:l,insert:n,on:o,each:e,proceed:p,find:q,css:function(a){const b=(a,b)=>{h(K)||f(K)?K.forEach(c=>c.style[a]=b):K.style[a]=b};Object.keys(a).map(c=>b(c,a[c]))},classes:function(a){const b=(a,b)=>{const c=(a,b,c)=>{f(c)?c.forEach(c=>a.classList[b](c)):a.classList[b](c)};h(K)||f(K)?K.forEach(d=>c(d,a,b)):c(K,a,b)};Object.keys(a).map(c=>b(c,a[c]))},clss:function(a){const b=(a,b)=>{const c=(a,b,c)=>{f(c)?c.forEach(c=>a.classList[b](c)):a.classList[b](c)};h(K)||f(K)?K.forEach(d=>c(d,a,b)):c(K,a,b)};Object.keys(a).map(c=>b(c,a[c]))},attr:function(a){const b=(a,b,c)=>{"set"===b?a.setAttribute(H(c)[0][0],H(c)[0][1]):"get"===b?a.getAttribute(c):"del"===b?a.removeAttribute(c):"has"===b?a.hasAttribute(c):"tog"===b?a.toggleAttribute(c):"list"===b?a.getAttributeNames():void 0},c=(a,c)=>{const d=(a,c,d)=>{f(d)?d.forEach(d=>b(a,c,d)):b(a,c,d)};h(K)||f(K)?K.forEach(b=>d(b,a,c)):d(K,a,c)};Object.keys(a).map(b=>c(b,a[b]))},prev:r,next:s,parents:t,childs:u,after:v,children:w,last:x,first:y,siblingsAll:z,siblings:A,filter:B,wrap:C},J=(a,b,c)=>{function d(a){return"object"==typeof a?Object.keys(a).map(b=>`${b}:${a[b]}`).join(";"):a}let e=document.createElement(a);for(const f in b)e.setAttribute(f,d(b[f]));if(c){let a=document.createTextNode(c);e.appendChild(a)}for(const d in u)e.appendChild(u[d]);return e};let K=a===D?a:d(a);if(!!b)for(let[a,c]of Object.entries(b))a=a.replace(/_/g,""),K&&"function"==typeof I[a]?I[a](c):null;return f(K)&&0===K.length?D:K}function moveDOM(fns){function isArr(a){return Array.isArray(a)}function isEl(a){return a instanceof HTMLElement}function isList(a){return NodeList.prototype.isPrototypeOf(a)}function isStr(a){return"string"==typeof a||a instanceof String}function wrap(a){const b=(a,b)=>{a.parentElement.insertBefore(b,a),b.appendChild(a)};isList(a.el)?a.el.forEach(c=>b(c,a.wrp.cloneNode())):b(a.el,a.wrp.cloneNode())}function slideUp(a){let b={transitionProperty:"height, margin, padding",transitionDuration:a.t+"ms",boxSizing:"border-box",height:a.el.offsetHeight+"px"};µ(a.el,{css:b}),a.el.offsetHeight,µ(a.el,{css:{overflow:"hidden",height:0,paddingTop:0,paddingBottom:0,marginTop:0,marginBottom:0}}),setTimeout(()=>{["height","padding-top","padding-bottom","margin-top","margin-bottom","overflow","transition-duration","transition-property"].forEach(b=>a.el.style.removeProperty(b)),a.el.style.display="none",a.fn?a.fn():_},a.t)}function slideDown(a){let b=getComputedStyle(a.el).display;"none"===b&&(b="block"),a.el.style.display=b;let c=a.el.offsetHeight;const d=Math.ceil(a.t*(c/200));console.log("time >>",d);µ(a.el,{css:{overflow:"hidden",height:0,paddingTop:0,paddingBottom:0,marginTop:0,marginBottom:0}}),a.el.offsetHeight,µ(a.el,{css:{boxSizing:"border-box",transitionProperty:"height, margin, padding",transitionDuration:d+"ms",height:c+"px"}});["padding-top","padding-bottom","margin-top","margin-bottom"].forEach(b=>a.el.style.removeProperty(b));setTimeout(()=>{["height","overflow","transition-duration","transition-property"].forEach(b=>a.el.style.removeProperty(b)),a.fn?a.fn():_},d)}function slideToggle(a){"none"===getComputedStyle(a.el).display?slideDown(a):slideUp(a)}function offset(a){let b=a.getBoundingClientRect(),c=document.body;_return={top:b.top+c.scrollTop,left:b.left+c.scrollLeft}}function pos(a){let b=a.getBoundingClientRect(),c=document.body;_return={top:b.top+c.scrollTop,left:b.left+c.scrollLeft}}function last(a){_return=a.length?a[a.length-1]:_}function first(a){_return=a.length?a[0]:_}const _=null;let _return;if(fns)for(let[fn,params]of Object.entries(fns))fn=fn.replace(/_/g,""),"function"==typeof eval(fn)?eval(fn)(params):null;return _return?_return:void 0}µ.e=(a,c=null,d=!0)=>d?new CustomEvent(a,{detail:c,bubbles:d}):new Event(a),µ.l=(a,b,c)=>a.addEventListener(b,c),µ.d=(a,b=null)=>b?b.dispatchEvent(a):null,µ.t=(a,b=null)=>(a.preventDefault(),a.stopPropagation(),b)?µ(a.target.closest(b)):a.target,µ.a=(a,b=null)=>b?"array"==b?Array.from(a):Object[b](a):Object.entries(a),µ.ar=µ.a,µ.ax=a=>new Promise((b,c)=>{const d=new XMLHttpRequest,e=a.method?a.method.toUpperCase():"GET";let f=a.url||"";const g="GET"===e,h=a.headers||{};if(g&&a.data){const b=new URLSearchParams(a.data).toString();f+=(f.includes("?")?"&":"?")+b}for(let a in d.open(e,f,!0),h)d.setRequestHeader(a,h[a]);h["Content-Type"]||a.data instanceof FormData||"GET"===e||d.setRequestHeader("Content-Type","application/json"),a.timeout&&(d.timeout=a.timeout),d.onload=()=>{const a=200<=d.status&&300>d.status;let e=d.responseText;try{e=JSON.parse(e)}catch(a){}a?b({response:e,status:d.status,xhr:d}):c({error:d.statusText,status:d.status,xhr:d})},d.onerror=()=>{c({error:d.statusText,status:d.status,xhr:d})};let i=null;!g&&a.data&&(a.data instanceof FormData?i=a.data:i=JSON.stringify(a.data)),d.send(i)}),"undefined"!=typeof window&&(window._=null,window.html=String.raw,window.µ=µ,window._µ=moveDOM);

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@microdom/mode",
+  "version": "1.0.0",
+  "description": "Mode JS is a ~7kb semantic layer for modern vanilla JavaScript.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/mode.js",
+      "default": "./src/mode.js"
+    },
+    "./dist/mode.js": "./dist/mode.js",
+    "./dist/mode.min.js": "./dist/mode.min.js"
+  },
+  "files": ["src", "dist", "README.md", "LICENSE"],
+  "keywords": ["microdom", "dom", "vanilla", "tiny", "jquery-like"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/microdom/mode.js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/microdom/mode.js/issues"
+  },
+  "homepage": "https://github.com/microdom/mode.js#readme"
+}

package/src/index.js

@@ -0,0 +1 @@
+export { mode } from "./mode.js";

package/src/mode.js

@@ -0,0 +1,455 @@
+
+function µ(el, fns) {
+    const _ = null
+    const roneTag = (/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i)
+    const rhtml = /<|&#?\w+;/
+    const rtagName = (/<([a-z][^\/\0>\x20\t\r\n\f]*)/i)
+    const whitespace = "[\\x20\\t\\r\\n\\f]"
+    const rtrim = new RegExp("^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g")
+    const tr = (s) => s.replace(/^\s\s*/, '').replace(/\s\s*$/, '').replace(/(\r\n|\n|\r)/gm, "").replace(/>\s+</g, '><')
+    const arr =  ( b , n=null) => n? n=='array'? Array.from(b) : Object[n](b) : Object.entries(b) 
+    const __ = {
+        html,
+        text,
+        insert,
+        on,
+        each,
+        proceed,
+        find,
+        css,
+        classes,
+        clss,
+        attr,
+        prev,
+        next,
+        parents,
+        childs,
+        after,
+        children,
+        last,
+        first,
+        siblingsAll,
+        siblings,
+        filter,
+        wrap
+    }
+    function el_(s) {
+        s.forEach(e => e.setAttribute(`µicro`, "µ"))
+        _el = getEl(`/[µicro]/`)
+        _el.forEach(e => e.removeAttribute(`µicro`))
+    }
+    const nodeDom = (t, att, tx, ch) => {
+        let o = document.createElement(t)
+        function val(v) {
+            return typeof v !== 'object' ? v : Object.keys(v).map((e) => `${e}:${v[e]}`).join(';')
+        }
+        for (const key in att) o.setAttribute(key, val(att[key]))
+        if (tx) {
+            let newtext = document.createTextNode(tx)
+            o.appendChild(newtext)
+        }
+        for (const key in childs) o.appendChild(childs[key])
+        return o
+    }
+    let _el = el !== _ ? getEl(el) : el
+    if (!!fns) {
+        for (let [fn, p] of Object.entries(fns)) {
+            fn = fn.replace(/_/g, '')
+            _el && typeof __[fn] === 'function' ? __[fn](p) : null
+        }
+    }
+    function getEl(e) {
+        e = isStr(e) ? tr(e) : e
+        const sel = (s, c) => s.at(0) == '/' && s.at(-1) == '/' ? c.querySelectorAll(s.replace(/^\/|\/$/g, '')) : c.querySelector(s)
+        if (isEl(e) || isList(e)) {
+            return e
+        } else if (isArr(e)) {
+            let s, c
+            if (isStr(e[1])) {
+                c = document.querySelector(e[1])
+            } else if (isEl(e[1])) {
+                c = e[1]
+            }
+            if (isStr(e[0])) {
+                s = e[0]
+                return sel(s, c)
+            }
+            if (isEl(e[0])) {
+                return e
+            }
+            return console.error('Array error')
+        } else if (isHtml(e)) {
+            return parseHTML(e)
+        } else if (isStr(e)) {
+            return sel(e, document)
+        }
+    }
+    function isArr(e) { return Array.isArray(e) }
+    function isEl(e) { return e instanceof HTMLElement /* || e.nodeType  */ }
+    function isList(e) { return NodeList.prototype.isPrototypeOf(e) }
+    function isStr(e) { return typeof e === 'string' || e instanceof String }
+    function isColl(e) { return HTMLCollection.prototype.isPrototypeOf(e) }
+    function isHtml(e) { return e[0] === "<" && e[e.length - 1] === ">" }
+// Helpers
+    function html(p) {
+        if (!isStr(p)) return false
+        isList(_el) || isArr(_el) ? _el.forEach(el => el.innerHTML = p) : _el.innerHTML = p
+    }
+    function text(p) {
+        if (!isStr(p)) return false
+        isList(_el) || isArr(_el) ? _el.forEach(el => el.textContent = p) : _el.textContent = p
+    }
+    function parseHTML(p) {
+        let o = nodeDom('div', {}, '', '')
+        o.insertAdjacentHTML("beforeend", p.replace(/\s+/g, ' '))
+        return o.firstChild
+    }
+    function insert(p) {
+        if ( isHtml(p)) _el.insertAdjacentHTML("beforeend", p.replace(/\s+/g, ' '))
+        else if( isEl(p))   _el.appendChild(p)
+    }
+    function on(p) {
+        const add = (e, fn, el = null) => {
+            el = !!el ? el : _el
+            console.log(el, "····")
+            isList(el) || isArr(el) ? el.forEach(l => l.addEventListener(e, fn, false)) :
+                el.addEventListener(e, fn, false)
+        }
+        const ctm = (c, t, fn) => {
+            _el.addEventListener(e, fn, false)
+        }
+        const on = (o) => {
+            if (o.e)
+                isArr(o.e) ? o.e.forEach(n => add(n, o.fn)) : add(o.e, o.fn)
+            if (o.l) {
+                isArr(o.l) ? o.l.forEach(n => add(o.e, n.fn, n.tg)) : add(o.e, o.l.fn, o.l.tg)
+            }
+        }
+        isArr(p) ? p.forEach(e => on(e)) : on(p)
+    }
+
+    function each(p) {
+        isList(_el) || isArr(_el) ? _el.forEach(p) : p(_el)
+    }
+    function proceed(p) {
+        _el = p(_el)
+    }
+    function find(p) {
+        const xel = (s, c) => s.at(0) == '/' && s.at(-1) == '/' ? c.querySelectorAll(s.replace(/^\/|\/$/g, '')) : c.querySelector(s)
+        let n, found = document.createElement('div')
+        isList(_el) || isArr(_el) ? _el.forEach(el => {
+            n = xel(p, el)
+            if (n != null) found.append(n)
+        }) : _el = getEl([p, _el])
+        if (found.childNodes.length > 0) _el = found.childNodes
+    }
+    function css(p) {
+        const add = (s, v) => {
+            isList(_el) || isArr(_el) ? _el.forEach(el => el.style[s] = v) : _el.style[s] = v
+        }
+        Object.keys(p).map((k) => add(k, p[k]))
+    }
+    function classes(p) {
+        const add = (s, v) => {
+            const set = (el, s, v) => { isArr(v) ? v.forEach(i => el.classList[s](i)) : el.classList[s](v) }
+            isList(_el) || isArr(_el) ? _el.forEach(el => set(el, s, v)) : set(_el, s, v)
+        }
+        Object.keys(p).map((k) => add(k, p[k]))
+    }
+    function clss(p) {
+        const add = (s, v) => {
+            const set = (el, s, v) => { isArr(v) ? v.forEach(i => el.classList[s](i)) : el.classList[s](v) }
+            isList(_el) || isArr(_el) ? _el.forEach(el => set(el, s, v)) : set(_el, s, v)
+        }
+        Object.keys(p).map((k) => add(k, p[k]))
+    }
+    function attr(p) {
+        const bin =(el,s,v) => {
+            switch (s) {
+                case "set": el.setAttribute(arr(v)[0][0],arr(v)[0][1]);break
+                case "get": el.getAttribute(v);break
+                case "del": el.removeAttribute(v);break
+                case "has": el.hasAttribute(v);break
+                case "tog": el.toggleAttribute(v);break
+                case "list": el.getAttributeNames()
+            }
+        }
+        const add = (s, v) => {
+            const set = (el, s, v) => { isArr(v) ? v.forEach(i => bin(el,s,i)) : bin(el,s,v) }
+            isList(_el) || isArr(_el) ? _el.forEach( el => set(el, s, v)) : set(_el, s, v)
+        }
+        Object.keys(p).map((k) => add(k, p[k]))
+    }
+    function prev(p) {
+        if (isList(_el)) return false
+        if (p) {
+            let prev = _el.previousElementSibling
+            while (prev && !prev.matches(p)) prev = prev.previousElementSibling
+            _el = prev
+        } else {
+            _el = _el.previousElementSibling
+        }
+    }
+    function next(p) {
+        if (isList(_el)) return false
+        if (p) {
+            let next = _el.nextElementSibling
+            while (next && !next.matches(p)) next = next.nextElementSibling
+            _el = next;
+        } else {
+            _el = _el.nextElementSibling
+        }
+    }
+
+    function parents(p) {
+        if (!isEl(_el)) return false
+        const parents = []
+        el = _el
+        while ((el = el.parentNode) && el !== document) {
+            (!p || el.matches(p)) ? parents.push(el) : _
+        }
+        _el = parents
+    }
+
+    function childs(p) {
+        if (!isEl(_el)) return false
+        let el = []
+        for (const e of _el.childNodes) {
+            isEl(e) && (!p || e.matches(p)) ? el.push(e) : _
+        }
+        el_(el)
+    }
+    function after(p) {
+        if (!isEl(_el)) return false
+        _el.parentNode.insertBefore(p, _el.nextSibling);
+    }
+    function children(p) {
+        if (!isEl(_el)) return false
+        el = [..._el.children].filter((child) => p ? child.matches(p) : child)
+        el_(el)
+    }
+
+    function last(p) {
+        if (!isList(_el) && !isArr(_el)) return null
+        let child
+        isStr(p) ?
+            _el.forEach(e => e.matches(p) ? child = e : _)
+            : _el.forEach(e => child = e)
+        _el = child
+    }
+
+    function first(p) {
+        if (!isList(_el) && !isArr(_el)) return null
+        if (isStr(p)) {
+            try {
+                _el.forEach(r => { if (r.matches(p)) throw _el = r, "break" })
+            } catch (r) { if ("break" !== r) throw r }
+        } else {
+            try {
+                _el.forEach((r, i) => { if (i === 0) throw _el = r, "break" })
+            } catch (r) { if ("break" !== r) throw r }
+        }
+    }
+    function siblingsAll(p) {
+        if (!isEl(_el)) return false
+        el = [..._el.parentNode.children].filter((child) => p ? child.matches(p) : child)
+        el_(el)
+    }
+    function siblings(p) {
+        if (!isEl(_el)) return false
+        el = [..._el.parentNode.children].filter((child) => p ? child.matches(p) && child !== _el : child !== _el)
+        el_(el)
+    }
+    function filter(p) {
+        if (!isList(_el) || !p) return false
+        el = [..._el].filter((item) => item.matches(p))
+        el_(el)
+    }
+    function wrap(p) {
+        const add = (e, w) => {
+            e.parentElement.insertBefore(w, e)
+            w.appendChild(e)
+        }
+        (isList(_el) || isArr(_el)) ? _el.forEach(e => add(e, p.cloneNode())) : add(_el, p.cloneNode())
+    }
+    return isArr(_el) && _el.length === 0 ? _ : _el
+}
+function moveDOM(fns) {
+    const _ = null
+    let _return
+    if (fns) {
+        for (let [fn, params] of Object.entries(fns)) {
+            fn = fn.replace(/_/g, '')
+            typeof eval(fn) === 'function' ? eval(fn)(params) : null
+        }
+    }
+    function isArr(e) { return Array.isArray(e) }
+    function isEl(e) { return e instanceof HTMLElement }
+    function isList(e) { return NodeList.prototype.isPrototypeOf(e) }
+    function isStr(e) { return typeof e === 'string' || e instanceof String }
+    function wrap(p) {
+        const add = (e, w) => {
+            e.parentElement.insertBefore(w, e)
+            w.appendChild(e)
+        }
+        isList(p.el) ? p.el.forEach(e => add(e, p.wrp.cloneNode())) : add(p.el, p.wrp.cloneNode())
+    }
+
+    function slideUp(p) {
+        let css = {
+            transitionProperty: 'height, margin, padding',
+            transitionDuration: p.t + 'ms',
+            boxSizing: 'border-box',
+            height: p.el.offsetHeight + 'px'
+        }
+        let css2 = {
+            overflow: 'hidden',
+            height: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            marginTop: 0,
+            marginBottom: 0
+        }
+        µ(p.el, { css: css })
+        p.el.offsetHeight
+        µ(p.el, { css: css2 })
+        setTimeout(() => {
+            ['height', 'padding-top', 'padding-bottom', 'margin-top', 'margin-bottom', 'overflow', 'transition-duration', 'transition-property']
+                .forEach(i => p.el.style.removeProperty(i))
+            p.el.style.display = 'none'
+            p.fn ? p.fn() : _
+        }, p.t)
+    }
+
+    function slideDown(p) {
+        let display = getComputedStyle(p.el).display
+        if (display === 'none') display = 'block'
+        p.el.style.display = display
+        let height = p.el.offsetHeight
+        const time = Math.ceil(p.t * (height / 200))
+        console.log("time >>", time)
+        let css = {
+            overflow: 'hidden',
+            height: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            marginTop: 0,
+            marginBottom: 0,
+        }
+        let css2 = {
+            boxSizing: 'border-box',
+            transitionProperty: "height, margin, padding",
+            transitionDuration: time + 'ms',
+            height: height + 'px'
+        }
+
+        µ(p.el, {
+            css: css
+        })
+        p.el.offsetHeight
+        µ(p.el, { css: css2 })
+        let a = ['padding-top', 'padding-bottom', 'margin-top', 'margin-bottom']
+            .forEach(i => p.el.style.removeProperty(i))
+        setTimeout(() => {
+            ['height', 'overflow', 'transition-duration', 'transition-property']
+                .forEach(i => p.el.style.removeProperty(i))
+            // (↓)callback
+            p.fn ? p.fn() : _
+        }, time);
+    }
+
+    function slideToggle(p) {
+        getComputedStyle(p.el).display === 'none' ? slideDown(p) : slideUp(p)
+    }
+
+    function offset(p) {
+        let rect = p.getBoundingClientRect(), _body = document.body
+        _return = {
+            top: rect.top + _body.scrollTop,
+            left: rect.left + _body.scrollLeft
+        }
+    }
+    function pos(p) {
+        let rect = p.getBoundingClientRect(), _body = document.body
+        _return = {
+            top: rect.top + _body.scrollTop,
+            left: rect.left + _body.scrollLeft
+        }
+    }
+
+    function last(p) {
+        _return = p.length ? p[p.length - 1] : _
+    }
+    function first(p) {
+        _return = p.length ? p[0] : _
+    }
+ 
+    if (!!_return) return _return
+}
+//////// HELPERS
+µ.e = ( e , d=null , b = !0 )=> b? new CustomEvent( e, { detail: d, bubbles: b }):new Event(e)
+µ.l = ( n , e , fn) => n.addEventListener(e,(fn))
+µ.d =  ( e, n=null  )=> n ? n.dispatchEvent(e) : null
+µ.t = ( e, o=null) =>  ( e.preventDefault(), e.stopPropagation(), o)? µ(e.target.closest(o)): e.target 
+µ.a = ( b , t=null) => t? t=='array'? Array.from(b) : Object[t](b) : Object.entries(b)  // t= Object types ( keys, values)
+µ.ar =µ.a
+µ.ax = ( options ) =>{
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const method = options.method ? options.method.toUpperCase() : 'GET';
+    let url = options.url || '';
+    const isGet = method === 'GET';
+    const headers = options.headers || {};
+    if (isGet && options.data) {
+      const queryString = new URLSearchParams(options.data).toString();
+      url += (url.includes('?') ? '&' : '?') + queryString;
+    }
+
+    xhr.open(method, url, true);
+    for (let key in headers) {
+      xhr.setRequestHeader(key, headers[key]);
+    }
+    if (!headers['Content-Type'] && !(options.data instanceof FormData) && method !== 'GET') {
+      xhr.setRequestHeader('Content-Type', 'application/json');
+    }
+
+    if (options.timeout) {
+      xhr.timeout = options.timeout;
+    }
+
+    xhr.onload = () => {
+      const isSuccess = xhr.status >= 200 && xhr.status < 300;
+      let response = xhr.responseText;
+
+      try {
+        response = JSON.parse(response);
+      } catch (e) { /* Not JSON */ }
+
+      if (isSuccess) {
+        resolve({ response, status: xhr.status, xhr });
+      } else {
+        reject({ error: xhr.statusText, status: xhr.status, xhr });
+      }
+    };
+
+    xhr.onerror = () => {
+      reject({ error: xhr.statusText, status: xhr.status, xhr });
+    };
+
+    let payload = null;
+    if (!isGet && options.data) {
+      if (options.data instanceof FormData) {
+        payload = options.data;
+      } else {
+        payload = JSON.stringify(options.data);
+      }
+    }
+    xhr.send(payload);
+  });
+}
+if (typeof window !== 'undefined') {
+window._ = null
+window.html = String.raw
+window.µ = µ
+window._µ = moveDOM
+}