@esportsplus/template 0.22.5 → 0.23.1

package/build/attributes.js

@@ -27,52 +27,33 @@ function apply(element, name, value) {
 function context(element) {
     return (element[STORE] ??= { element });
 }
-function list(ctx, element, id, name, value, state) {
+function list(ctx, element, id, name, state, value) {
     if (value == null || value === false || value === '') {
         value = '';
     }
-    let base = name + '.static', delimiter = delimiters[name], store = (ctx ??= context(element)).store ??= {}, dynamic = store[name], type = typeof value;
-    if (dynamic === undefined) {
-        let value = (element.getAttribute(name) || '').trim();
-        store[base] = value;
-        store[name] = dynamic = {};
+    if (!value || typeof value !== 'string') {
+        return;
+    }
+    let delimiter = delimiters[name], store = (ctx ??= context(element)).store ??= {}, v = store[name];
+    if (v === undefined) {
+        v = store[name] = (element.getAttribute(name) || '').trim();
     }
     if (id === null) {
-        if (value && type === 'string') {
-            store[base] += (store[base] ? delimiter : '') + value;
-        }
+        v = store[name] += (v ? delimiter : '') + value;
     }
     else {
-        let hot = {};
-        if (value && type === 'string') {
-            let part, parts = value.split(delimiter);
-            for (let i = 0, n = parts.length; i < n; i++) {
-                part = parts[i].trim();
-                if (part === '') {
-                    continue;
-                }
-                dynamic[part] = null;
-                hot[part] = null;
-            }
+        let current = delimiter + value, previous = store[id];
+        if (previous === undefined) {
+            v = store[name] += current;
         }
-        let cold = store[id];
-        if (cold !== undefined) {
-            for (let part in cold) {
-                if (part in hot) {
-                    continue;
-                }
-                delete dynamic[part];
-            }
+        else if (previous !== current) {
+            v = store[name] = store[name].replace(previous, current);
         }
-        store[id] = hot;
+        store[id] = current;
     }
-    value = store[base];
-    for (let key in dynamic) {
-        value += (value ? delimiter : '') + key;
-    }
-    schedule(ctx, element, name, state, value);
+    schedule(ctx, element, name, state, v);
 }
-function property(ctx, element, id, name, value, state) {
+function property(ctx, element, id, name, state, value) {
     if (value == null || value === false || value === '') {
         value = '';
     }
@@ -137,9 +118,9 @@ const set = (element, name, value, state = STATE_HYDRATING) => {
             else if (isArray(v)) {
                 let last = v.length - 1;
                 for (let i = 0, n = v.length; i < n; i++) {
-                    fn(ctx, element, id, name, v[i], state === STATE_HYDRATING
+                    fn(ctx, element, id, name, state === STATE_HYDRATING
                         ? state
-                        : i !== last ? STATE_WAITING : state);
+                        : i !== last ? STATE_WAITING : state, v[i]);
                 }
             }
         });
@@ -147,7 +128,7 @@ const set = (element, name, value, state = STATE_HYDRATING) => {
         return;
     }
     if (type !== 'object') {
-        fn(null, element, null, name, value, state);
+        fn(null, element, null, name, state, value);
         return;
     }
     if (isArray(value)) {
@@ -160,7 +141,7 @@ const set = (element, name, value, state = STATE_HYDRATING) => {
         }
         return;
     }
-    fn(null, element, null, name, value, state);
+    fn(null, element, null, name, state, value);
 };
 const spread = function (element, value) {
     if (isObject(value)) {

package/build/slot/effect.d.ts

@@ -1,3 +1,3 @@
-import { Element } from '../types.js';
-declare const _default: (anchor: Element, fn: Function) => void;
+import { Element, Renderable } from '../types.js';
+declare const _default: (anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) => void;
 export default _default;

package/build/slot/effect.js

@@ -43,9 +43,21 @@ export default (anchor, fn) => {
     let context = {
         group: undefined,
         textnode: undefined
-    }, state = STATE_HYDRATING;
-    effect(() => {
-        let value = fn();
+    }, dispose = fn.length ? () => {
+        let { group, textnode } = context;
+        if (textnode) {
+            group = { head: anchor, tail: textnode };
+        }
+        else if (group) {
+            group.head = anchor;
+        }
+        d();
+        if (group) {
+            remove([group]);
+        }
+    } : undefined, state = STATE_HYDRATING;
+    let d = effect(() => {
+        let value = fn(dispose);
         if (state === STATE_HYDRATING) {
             update.call(context, anchor, value);
             state = STATE_NONE;

package/package.json

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

package/src/attributes.ts

@@ -54,72 +54,43 @@ function list(
     element: Element,
     id: null | number,
     name: string,
-    value: unknown,
-    state: State
+    state: State,
+    value: unknown
 ) {
     if (value == null || value === false || value === '') {
         value = '';
     }
 
-    let base = name + '.static',
-        delimiter = delimiters[name],
-        store = (ctx ??= context(element)).store ??= {},
-        dynamic = store[name] as Attributes | undefined,
-        type = typeof value;
+    if (!value || typeof value !== 'string') {
+        return;
+    }
 
-    if (dynamic === undefined) {
-        let value = (element.getAttribute(name) || '').trim();
+    let delimiter = delimiters[name],
+        store = (ctx ??= context(element)).store ??= {},
+        v = store[name];
 
-        store[base] = value;
-        store[name] = dynamic = {};
+    if (v === undefined) {
+        v = store[name] = (element.getAttribute(name) || '').trim();
     }
 
     if (id === null) {
-        if (value && type === 'string') {
-            store[base] += (store[base] ? delimiter : '') + value;
-        }
+        v = store[name] += (v ? delimiter : '') + value;
     }
     else {
-        let hot: Attributes = {};
+        let current = delimiter + value,
+            previous = store[id] as string | undefined;
 
-        if (value && type === 'string') {
-            let part: string,
-                parts = (value as string).split(delimiter);
-
-            for (let i = 0, n = parts.length; i < n; i++) {
-                part = parts[i].trim();
-
-                if (part === '') {
-                    continue;
-                }
-
-                dynamic[part] = null;
-                hot[part] = null;
-            }
+        if (previous === undefined) {
+            v = store[name] += current;
         }
-
-        let cold = store[id] as Attributes | undefined;
-
-        if (cold !== undefined) {
-            for (let part in cold) {
-                if (part in hot) {
-                    continue;
-                }
-
-                delete dynamic[part];
-            }
+        else if (previous !== current) {
+            v = store[name] = (store[name] as string).replace(previous, current);
         }
 
-        store[id] = hot;
+        store[id] = current;
     }
 
-    value = store[base];
-
-    for (let key in dynamic) {
-        value += (value ? delimiter : '') + key;
-    }
-
-    schedule(ctx, element, name, state, value);
+    schedule(ctx, element, name, state, v);
 }
 
 function property(
@@ -127,8 +98,8 @@ function property(
     element: Element,
     id: null | number,
     name: string,
-    value: unknown,
-    state: State
+    state: State,
+    value: unknown
 ) {
     if (value == null || value === false || value === '') {
         value = '';
@@ -224,10 +195,10 @@ const set = (element: Element, name: string, value: unknown, state: State = STAT
                         element,
                         id,
                         name,
-                        v[i],
                         state === STATE_HYDRATING
                             ? state
-                            : i !== last ? STATE_WAITING : state
+                            : i !== last ? STATE_WAITING : state,
+                        v[i],
                     );
                 }
             }
@@ -239,7 +210,7 @@ const set = (element: Element, name: string, value: unknown, state: State = STAT
     }
 
     if (type !== 'object') {
-        fn(null, element, null, name, value, state);
+        fn(null, element, null, name, state, value);
         return;
     }
 
@@ -256,7 +227,7 @@ const set = (element: Element, name: string, value: unknown, state: State = STAT
         return;
     }
 
-    fn(null, element, null, name, value, state);
+    fn(null, element, null, name, state, value);
 };
 
 const spread = function (element: Element, value: Attributes | Attributes[]) {

package/src/slot/effect.ts

@@ -1,6 +1,6 @@
 import { effect } from '@esportsplus/reactivity';
 import { STATE_HYDRATING, STATE_NONE } from '~/constants';
-import { Element, SlotGroup } from '~/types';
+import { Element, Renderable, SlotGroup } from '~/types';
 import { firstChild, lastChild, nodeValue } from '~/utilities/node'
 import { raf } from '~/utilities/queue'
 import { remove } from './cleanup';
@@ -52,24 +52,40 @@ function update(this: { group?: SlotGroup, textnode?: Node }, anchor: Element, v
 }
 
 
-export default (anchor: Element, fn: Function) => {
+export default (anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) => {
     let context = {
             group: undefined as SlotGroup | undefined,
             textnode: undefined as Node | undefined
         },
+        dispose = fn.length ? () => {
+            let { group, textnode } = context;
+
+            if (textnode) {
+                group = { head: anchor, tail: textnode as Element };
+            }
+            else if (group) {
+                group.head = anchor;
+            }
+
+            d();
+
+            if (group) {
+                remove([group]);
+            }
+        } : undefined,
         state = STATE_HYDRATING;
 
-    effect(() => {
-        let value = fn();
+    let d = effect(() => {
+            let value = fn(dispose);
 
-        if (state === STATE_HYDRATING) {
-            update.call(context, anchor, value);
-            state = STATE_NONE;
-        }
-        else if (state === STATE_NONE) {
-            raf.add(() => {
+            if (state === STATE_HYDRATING) {
                 update.call(context, anchor, value);
-            });
-        }
-    });
+                state = STATE_NONE;
+            }
+            else if (state === STATE_NONE) {
+                raf.add(() => {
+                    update.call(context, anchor, value);
+                });
+            }
+        });
 };

package/src/slot/index.ts

@@ -5,7 +5,7 @@ import render from './render';
 
 export default (anchor: Element, value: unknown): void => {
     if (typeof value === 'function') {
-        effect(anchor, value as Function);
+        effect(anchor, value as Parameters<typeof effect>[1]);
     }
     else {
         anchor.after( render(anchor, value) );