@esportsplus/template 0.20.4 → 0.21.0

package/build/attributes.d.ts

@@ -1,7 +1,11 @@
+import { STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants.js';
 import { Attributes, Element } from './types.js';
+type State = typeof STATE_HYDRATING | typeof STATE_NONE | typeof STATE_WAITING;
+declare const set: (element: Element, name: string, value: unknown, state?: State) => void;
 declare const spread: (element: Element, value: Attributes | Attributes[]) => void;
 declare const _default: {
+    set: (element: Element, name: string, value: unknown, state?: State) => void;
     spread: (element: Element, value: Attributes | Attributes[]) => void;
 };
 export default _default;
-export { spread };
+export { set, spread };

package/build/attributes.js

@@ -102,7 +102,24 @@ function schedule(ctx, element, name, state, value) {
     scheduled = true;
     raf.add(task);
 }
-function set(element, name, value, state) {
+function task() {
+    let context, n = queue.length;
+    while ((context = queue.next()) && n--) {
+        let { element, updates } = context;
+        for (let name in updates) {
+            apply(element, name, updates[name]);
+        }
+        context.updates = {};
+        context.updating = false;
+    }
+    if (queue.length) {
+        raf.add(task);
+    }
+    else {
+        scheduled = false;
+    }
+}
+const set = (element, name, value, state = STATE_HYDRATING) => {
     let fn = name === 'class' || name === 'style' ? list : property, type = typeof value;
     if (type === 'function') {
         if (name.startsWith('on')) {
@@ -144,24 +161,7 @@ function set(element, name, value, state) {
         return;
     }
     fn(null, element, null, name, value, state);
-}
-function task() {
-    let context, n = queue.length;
-    while ((context = queue.next()) && n--) {
-        let { element, updates } = context;
-        for (let name in updates) {
-            apply(element, name, updates[name]);
-        }
-        context.updates = {};
-        context.updating = false;
-    }
-    if (queue.length) {
-        raf.add(task);
-    }
-    else {
-        scheduled = false;
-    }
-}
+};
 const spread = function (element, value) {
     if (isObject(value)) {
         for (let name in value) {
@@ -169,7 +169,7 @@ const spread = function (element, value) {
             if (v == null || v === false || v === '') {
                 continue;
             }
-            set(element, name, v, STATE_HYDRATING);
+            set(element, name, v);
         }
     }
     else if (isArray(value)) {
@@ -178,5 +178,5 @@ const spread = function (element, value) {
         }
     }
 };
-export default { spread };
-export { spread };
+export default { set, spread };
+export { set, spread };

package/build/event/index.js

@@ -4,6 +4,7 @@ import { addEventListener } from '../utilities/element.js';
 import { parentElement } from '../utilities/node.js';
 import { ondisconnect } from '../slot/cleanup.js';
 import onconnect from './onconnect.js';
+import onresize from './onresize.js';
 import ontick from './ontick.js';
 let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(), keys = {}, passive = new Set([
     'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
@@ -65,6 +66,9 @@ export default (element, event, listener) => {
         case 'ondisconnect':
             ondisconnect(element, () => listener(element));
             return;
+        case 'onresize':
+            onresize(element, listener);
+            return;
         case 'ontick':
             ontick(element, listener);
             return;

package/build/event/onresize.d.ts

@@ -0,0 +1,3 @@
+import { Element } from '../types.js';
+declare const _default: (element: Element, listener: Function) => void;
+export default _default;

package/build/event/onresize.js

@@ -0,0 +1,22 @@
+let listeners = new Map(), registered = false;
+function onresize() {
+    for (let [element, fn] of listeners) {
+        if (element.isConnected) {
+            fn(element);
+        }
+        else {
+            listeners.delete(element);
+        }
+    }
+    if (listeners.size === 0) {
+        window.removeEventListener('resize', onresize);
+        registered = false;
+    }
+}
+export default (element, listener) => {
+    listeners.set(element, listener);
+    if (!registered) {
+        window.addEventListener('resize', onresize);
+        registered = true;
+    }
+};

package/package.json

@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.20.4",
+  "version": "0.21.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -169,7 +169,31 @@ function schedule(ctx: Context | null, element: Element, name: string, state: St
     raf.add(task);
 }
 
-function set(element: Element, name: string, value: unknown, state: State) {
+function task() {
+    let context,
+        n = queue.length;
+
+    while ((context = queue.next()) && n--) {
+        let { element, updates } = context;
+
+        for (let name in updates) {
+            apply(element, name, updates[name]);
+        }
+
+        context.updates = {};
+        context.updating = false;
+    }
+
+    if (queue.length) {
+        raf.add(task);
+    }
+    else {
+        scheduled = false;
+    }
+}
+
+
+const set = (element: Element, name: string, value: unknown, state: State = STATE_HYDRATING) => {
     let fn = name === 'class' || name === 'style' ? list : property,
         type = typeof value;
 
@@ -233,31 +257,7 @@ function set(element: Element, name: string, value: unknown, state: State) {
     }
 
     fn(null, element, null, name, value, state);
-}
-
-function task() {
-    let context,
-        n = queue.length;
-
-    while ((context = queue.next()) && n--) {
-        let { element, updates } = context;
-
-        for (let name in updates) {
-            apply(element, name, updates[name]);
-        }
-
-        context.updates = {};
-        context.updating = false;
-    }
-
-    if (queue.length) {
-        raf.add(task);
-    }
-    else {
-        scheduled = false;
-    }
-}
-
+};
 
 const spread = function (element: Element, value: Attributes | Attributes[]) {
     if (isObject(value)) {
@@ -268,7 +268,7 @@ const spread = function (element: Element, value: Attributes | Attributes[]) {
                 continue;
             }
 
-            set(element, name, v, STATE_HYDRATING);
+            set(element, name, v);
         }
     }
     else if (isArray(value)) {
@@ -279,5 +279,5 @@ const spread = function (element: Element, value: Attributes | Attributes[]) {
 };
 
 
-export default { spread };
-export { spread };
+export default { set, spread };
+export { set, spread };

package/src/event/index.ts

@@ -5,6 +5,7 @@ import { addEventListener } from '~/utilities/element';
 import { parentElement } from '~/utilities/node';
 import { ondisconnect } from '~/slot/cleanup';
 import onconnect from './onconnect';
+import onresize from './onresize';
 import ontick from './ontick';
 
 
@@ -97,6 +98,10 @@ export default (element: Element, event: `on${string}`, listener: Function): voi
             ondisconnect(element, () => listener(element));
             return;
 
+        case 'onresize':
+            onresize(element, listener);
+            return;
+
         case 'ontick':
             ontick(element, listener);
             return;

package/src/event/onresize.ts

@@ -0,0 +1,32 @@
+import { Element } from '~/types';
+
+
+let listeners = new Map<Element, Function>(),
+    registered = false;
+
+
+function onresize() {
+    for (let [element, fn] of listeners) {
+        if (element.isConnected) {
+            fn(element);
+        }
+        else {
+            listeners.delete(element);
+        }
+    }
+
+    if (listeners.size === 0) {
+        window.removeEventListener('resize', onresize);
+        registered = false;
+    }
+}
+
+
+export default (element: Element, listener: Function) => {
+    listeners.set(element, listener);
+
+    if (!registered) {
+        window.addEventListener('resize', onresize);
+        registered = true;
+    }
+};