@esportsplus/template 0.22.4 → 0.23.0

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

@@ -13,20 +13,23 @@ function update(anchor, value) {
     if (value == null || value === false) {
         value = '';
     }
+    let textnode = this.textnode;
     if (typeof value !== 'object') {
-        let textnode = this.textnode;
         if (textnode) {
             nodeValue.call(textnode, String(value));
+            if (!textnode.isConnected) {
+                anchor.after(textnode);
+            }
         }
         else {
-            textnode = this.textnode = text(String(value));
-        }
-        if (!textnode.isConnected) {
-            anchor.after(textnode);
+            anchor.after(this.textnode = text(String(value)));
         }
     }
     else {
         let fragment = render(anchor, value), head = firstChild.call(fragment);
+        if (textnode && textnode.isConnected) {
+            remove([{ head: textnode, tail: textnode }]);
+        }
         if (head) {
             this.group = {
                 head,
@@ -40,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.4",
+  "version": "0.23.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

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';
@@ -18,24 +18,28 @@ function update(this: { group?: SlotGroup, textnode?: Node }, anchor: Element, v
         value = '';
     }
 
-    if (typeof value !== 'object') {
-        let textnode = this.textnode;
+    let textnode = this.textnode;
 
+    if (typeof value !== 'object') {
         if (textnode) {
             nodeValue.call(textnode, String(value));
+
+            if (!textnode.isConnected) {
+                anchor.after(textnode);
+            }
         }
         else {
-            textnode = this.textnode = text( String(value) );
-        }
-
-        if (!textnode.isConnected) {
-            anchor.after(textnode);
+            anchor.after( this.textnode = text( String(value) ) );
         }
     }
     else {
         let fragment = render(anchor, value),
             head = firstChild.call(fragment);
 
+        if (textnode && textnode.isConnected) {
+            remove([{ head: textnode as Element, tail: textnode as Element }]);
+        }
+
         if (head) {
             this.group = {
                 head,
@@ -48,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);
+                });
+            }
+        });
 };