From 94ac2becfc5c81903796ba3d332cc5b4b8bca92c Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Thu, 12 Dec 2024 17:16:57 +0100
Subject: [PATCH] :bug: ddeStringable and simulateSlots

---
 docs/global.css.js |  2 +-
 docs/index.html.js |  2 +-
 index.d.ts         | 12 ++++++------
 src/dom.js         |  8 +++++---
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/docs/global.css.js b/docs/global.css.js
index c3878b2..e956052 100644
--- a/docs/global.css.js
+++ b/docs/global.css.js
@@ -103,7 +103,7 @@ main{
 	[main-start] min(var(--body-max-width), 90%) [main-end]
 	1fr [full-main-end];
 }
-main > *{
+main > *, main slot > *{
 	grid-column: main;
 }
 .icon {
diff --git a/docs/index.html.js b/docs/index.html.js
index ab7b91e..60e1a18 100644
--- a/docs/index.html.js
+++ b/docs/index.html.js
@@ -36,7 +36,7 @@ export function page({ pkg, info }){
 		el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }),
 		el("p").append(...T`
 			As we can see, in the code at location “A” we define ${el("em", t`how to react`)} when the function
-			is called with any event as an argument. At that moment, we ${el("em", t`don't care who/why/how`)}
+			is called with any event as an argument. At that moment, we ${el("em", t`don’t care who/why/how`)}
 			the function was called. Similarly, at point “B”, we reference to a function to be called on the event
 			${el("em", t`without caring`)} what the function will do at that time. Finally, at point “C”, we tell
 			the application that a change has occurred, in the input, and we ${el("em", t`don't care if/how someone`)}
diff --git a/index.d.ts b/index.d.ts
index 6365503..8f420a7 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -72,7 +72,7 @@ export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap,
 >(
 	tag_name: TAG,
-	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeString,
+	attrs?: ElementAttributes<ExtendedHTMLElementTagNameMap[NoInfer<TAG>]> | ddeStringable,
 	...addons: ddeElementAddon<
 		ExtendedHTMLElementTagNameMap[NoInfer<TAG>]
 	>[], // TODO: for now addons must have the same element
@@ -82,7 +82,7 @@ export function el(
 ): ddeDocumentFragment
 export function el(
 	tag_name: string,
-	attrs?: ElementAttributes<HTMLElement> | ddeString,
+	attrs?: ElementAttributes<HTMLElement> | ddeStringable,
 	...addons: ddeElementAddon<HTMLElement>[]
 ): ddeHTMLElement
 
@@ -90,7 +90,7 @@ export function el<
 	C extends (attr: ddeComponentAttributes)=> SupportedElement | ddeDocumentFragment
 >(
 	component: C,
-	attrs?: Parameters<C>[0] | ddeString,
+	attrs?: Parameters<C>[0] | ddeStringable,
 	...addons: ddeElementAddon<ReturnType<C>>[]
 ): ReturnType<C> extends ddeHTMLElementTagNameMap[keyof ddeHTMLElementTagNameMap]
 	? ReturnType<C>
@@ -104,7 +104,7 @@ export function elNS(
 	EL extends ( TAG extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[TAG] : SVGElement ),
 >(
 	tag_name: TAG,
-	attrs?: ElementAttributes<NoInfer<EL>> | ddeString,
+	attrs?: ElementAttributes<NoInfer<EL>> | ddeStringable,
 	...addons: ddeElementAddon<NoInfer<EL>>[]
 )=>  TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement
 export function elNS(
@@ -114,7 +114,7 @@ export function elNS(
 	EL extends ( TAG extends keyof MathMLElementTagNameMap ? MathMLElementTagNameMap[TAG] : MathMLElement ),
 >(
 	tag_name: TAG,
-	attrs?: ddeString | Partial<{
+	attrs?: ddeStringable | Partial<{
 		[key in keyof EL]: EL[key] | ddeSignal<EL[key]> | string | number | boolean
 	}>,
 	...addons: ddeElementAddon<NoInfer<EL>>[]
@@ -123,7 +123,7 @@ export function elNS(
 	namespace: string
 ): (
 	tag_name: string,
-	attrs?: string | ddeString | Record<string, any>,
+	attrs?: string | ddeStringable | Record<string, any>,
 	...addons: ddeElementAddon<SupportedElement>[]
 )=> SupportedElement
 export { elNS as createElementNS }
diff --git a/src/dom.js b/src/dom.js
index 60b0ef5..7c6370b 100644
--- a/src/dom.js
+++ b/src/dom.js
@@ -108,9 +108,11 @@ export function simulateSlots(element, root= element){
 				try{ elementAttribute(el, "remove", "slot"); } catch(_error){}
 				const slot= slots[name];
 				if(!slot) return;
-				if(!name.startsWith(mark_s)) slot.childNodes.forEach(c=> c.remove());
+				if(!slot.name.startsWith(mark_s)){
+					slot.childNodes.forEach(c=> c.remove());
+					slot.name= mark_s+name;
+				}
 				slot.append(el);
-				slot.name= mark_s+name;
 				//TODO?: el.dispatchEvent(new CustomEvent("dde:slotchange", { detail: slot }));
 			}
 			element.append= orig; //TODO?: better memory management, but non-native behavior!
@@ -119,7 +121,7 @@ export function simulateSlots(element, root= element){
 	});
 	if(element!==root){
 		const els= Array.from(element.childNodes);
-		//els.forEach(el=> el.remove());
+		//TODO?: els.forEach(el=> el.remove());
 		element.append(...els);
 	}
 	return root;