fix

index.html

@@ -17,25 +17,23 @@
 		}
 	</style>
 
-	<div $text="" $count="5" cloak>
+	<!-- <div $text="" $count="1000" cloak>
 		<input :value="text">
 		<button @click="count.set(count() + 1)">Přidej<span :text="count"></span></button>
 		<button @click="count.set(count() - 1)">Odeber<span :text="count"></span></button><br>
 		<ul>
 			<template :for="i of count()">
-				<div>
+				<li :kei="i">
 					<template :if="i % 2 !== 0">
 						<span :text="'Odd' + i + ' - ' + text"></span>
 					</template>
-				</div>
-				<div>
 					<template :if="i % 2 === 0">
 						<span :text="'Even' + i + ' - ' + text" :style="text().length > 2 ? 'color:red' : 'color:blue'"></span>
 					</template>
-				</div>
+				</li>
 			</template>
 		</ul>
-	</div>
+	</div> -->
 
 	<!-- <form $items="{}" $text="" @submit="
 		event.preventDefault();
@@ -54,12 +52,12 @@
 							items.set(newItems);
 						"
 					>
-						<span :text="item"></span> -	X
+						<span :text="item"></span> - X
 					</a>
 				</li>
 			</template>
 		</ul>
-	</form> -->
+	</form>  -->
 
 	<!-- <template :for="[name, surname] of Object.entries({name: 'vladimir', surname: 'Macháček'})">
 		<li :text="name + ' ' + surname"></li>
@@ -79,16 +77,15 @@
 		</template>
 	</div> -->
 
-	<!-- <br><br>
-	<div $items="[]">
+	<!-- <div $items="[]">
 		<button @click="items.set([items().length, ...items()])" :text="'+' + items().length"></button>
 		<button @click="items.set(items().slice(1))" :text="'-' + items().length"></button>
 
 		<template :for="i of items()">
-			<div $text="i"><input :value="text"><span :text="text"></span></div>
+			<div $text="i" :key="i"><input :value="text"><span :text="text"></span></div>
 		</template>
-	</div>
- -->
+	</div> -->
+
 	<!-- <template :for="i in 1100">
 		<div :text="i"></div>
 	</template> -->
@@ -140,32 +137,13 @@
 	</div>
  -->
 
-	<!-- <div $renderForm>
-		<template :if="renderForm">
-			<div>Text</div>
-		</template>
-		<template :if="!renderForm">
-
-		</template>
-	</div>
- -->
-
- 	<!-- <div $count="1">
-		<button @click="count.set(count() + 1)">+</button>
-		<button @click="count.set(count() - 1)">-</button>
-		<template template="text" :if="count() > 0">
-			Ahoj
-		</template> -->
-		<!-- template  -->
-			<!-- Ahoj -->
-		<!-- /template -->
-	<!-- </div> -->
 
 	<script type="module">
 		import Signalize from 'signalizejs';
 		import Directives from 'signalizejs/directives';
 
 		const { use } = new Signalize();
+
 		use(Directives);
 	</script>
 

packages/signalizejs/ajax/src/index.ts

@@ -24,7 +24,8 @@ export interface AjaxOptions extends RequestInit {
 }
 
 export default (signalize: Signalize): void => {
-	const { dispatch } = signalize;
+	const { dispatch, config } = signalize;
+	const requestedWithHeader = config.ajaxRequestedWithHeader ?? 'XMLHttpRequest';
 
 	signalize.ajax = async (options: AjaxOptions): Promise<AjaxReturn> => {
 		let response: Response | null = null;
@@ -50,7 +51,7 @@ export default (signalize: Signalize): void => {
 			const url = options.url;
 
 			const requestInit = { ...options };
-			requestInit.headers = { ...{ 'X-Requested-With': 'XMLHttpRequest' }, ...requestInit.headers ?? {} }
+			requestInit.headers = { ...{ 'X-Requested-With': requestedWithHeader }, ...requestInit.headers ?? {} }
 
 			delete requestInit.url;
 

packages/signalizejs/directives/src/index.ts

@@ -507,22 +507,10 @@ export default (signalize: Signalize): void => {
 
 				let nextSibling = element.nextSibling;
 				const nextSiblingScope = scope(nextSibling);
-				const rendered = signal(nextSiblingScope?.template === element)
+				let rendered = nextSiblingScope?.template === element;
+				const renderedElements = [];
 
-				const bindElementToRenderedSignal = (root: ChildNode) => {
-					scope(root, (rootScope) => {
-						rootScope.template = element;
-
-						const unwatch = rendered.watch(({ newValue }) => {
-							if (newValue === false) {
-								unwatch();
-								root.remove();
-							}
-						})
-					});
-				}
-
-				if (rendered() === false) {
+				if (rendered === false) {
 					let renderedTemplateSibling = element.nextSibling;
 					let renderedTemplateOpenned = false;
 
@@ -534,36 +522,43 @@ export default (signalize: Signalize): void => {
 						if (renderedTemplateSibling.nodeType === Node.COMMENT_NODE) {
 							const content = renderedTemplateSibling.textContent?.trim();
 							if (content === renderedTemplateStartComment) {
-								rendered.set(true);
-								bindElementToRenderedSignal(renderedTemplateSibling)
+								rendered = true;
+								renderedElements.push(renderedTemplateSibling);
 								renderedTemplateOpenned = true;
 								renderedTemplateSibling = renderedTemplateSibling.nextSibling;
 								continue;
 							} else if (content === renderedTemplateEndComment) {
-								bindElementToRenderedSignal(renderedTemplateSibling)
+								renderedElements.push(renderedTemplateSibling);
 								renderedTemplateOpenned = false;
 								break;
 							}
 						}
 
 						if (renderedTemplateOpenned) {
-							bindElementToRenderedSignal(renderedTemplateSibling);
+							renderedElements.push(renderedTemplateSibling);
 						}
 
 						renderedTemplateSibling = renderedTemplateSibling.nextSibling;
 					}
 				}
 
+				const cleanElements = () => {
+					while (renderedElements.length) {
+						renderedElements.pop().remove()
+					}
+				}
+
 				const render = async (): Promise<void> => {
 					const conditionResult = await fn(data());
 					let lastInsertPoint = element;
 
-					if (conditionResult === true && rendered() === true) {
+					if (conditionResult === true && rendered === true) {
 						return;
 					}
 
 					if (conditionResult !== true) {
-						rendered.set(false);
+						cleanElements();
+						rendered = false;
 						return;
 					}
 
@@ -577,24 +572,27 @@ export default (signalize: Signalize): void => {
 
 					fragment = await processDirectives({ root: fragment });
 					const children = [...fragment.childNodes];
+
 					while (children.length > 0) {
 						const root = children.shift();
-						bindElementToRenderedSignal(root)
+						renderedElements.push(root);
 						lastInsertPoint.after(root);
 						lastInsertPoint = root;
 					}
-					rendered.set(true);
+
+					rendered = true;
 				}
 
 				await render();
 
 				const unwatchSignalCallbacks = [];
 
-				for (const signalToWatch of signalsToWatch) {
-					unwatchSignalCallbacks.push(signalToWatch.watch(render));
+				while (signalsToWatch.length) {
+					unwatchSignalCallbacks.push(signalsToWatch.pop().watch(render));
 				}
 
 				scope(element).cleanup(() => {
+					cleanElements();
 					for (const unwatch of unwatchSignalCallbacks) {
 						unwatch();
 					}
@@ -621,7 +619,7 @@ export default (signalize: Signalize): void => {
 					context: currentData,
 					element
 				})
-				const signalsToWatch = [];
+				let signalsToWatch = [];
 
 				for (const signal of Object.values(currentData)) {
 					if (!(signal instanceof Signal)) {

packages/signalizejs/src/plugins/bind.ts

@@ -95,6 +95,8 @@ export default (signalize: Signalize): void => {
 				if (attributeBinderIsSignal === true || signalsToWatch.length === 1) {
 					getListener = () => attributeBinder();
 					setListener = (value) => signalsToWatch[0].set(value);
+				} else if (typeof attributeBinder === 'function') {
+					getListener = () => attributeBinder();
 				} else {
 					getListener = typeof attributeBinder.get === 'function' ? () => attributeBinder.get() : null;
 					setListener = typeof attributeBinder.set === 'function' ? (value) => attributeBinder.set(value) : null

packages/signalizejs/src/plugins/dispatch.ts

@@ -14,8 +14,9 @@ interface Options {
 }
 
 export default (signalize: Signalize): void => {
+	const { config } = signalize;
 	signalize.dispatch = (eventName: string, eventData: any = undefined, options: Options = {}): boolean => {
-		return (options?.target ?? document).dispatchEvent(
+		return (options?.target ?? config.root).dispatchEvent(
 			new window.CustomEvent(eventName, {
 				detail: eventData,
 				cancelable: options?.cancelable ?? true,

packages/signalizejs/src/plugins/merge.ts

@@ -21,7 +21,7 @@ export default (signalize: Signalize): void => {
 
 				if (Array.isArray(value)) {
 					mergedObject[key] = [...mergedObject[key], ...value];
-				} else if (value !== null && valueType === 'object') {
+				} else if (value !== null && !(value instanceof Element) && !(value instanceof Document) && !(value instanceof DocumentFragment) && valueType === 'object') {
 					mergedObject[key] = merge(mergedObject[key], value as T);
 				} else {
 					mergedObject[key] = value;

packages/signalizejs/src/plugins/on.ts

@@ -24,7 +24,6 @@ export interface CustomEventListeners extends HTMLElementEventMap {
 
 export default (signalize: Signalize): void => {
 	const { config, selectorToIterable } = signalize;
-	const domMutationRemoveListeners = new Set();
 
 	const customEventListeners: Record<string, CustomEventListener> = {
 		clickOutside: (target: HTMLElement | string, listener: CallableFunction, options: AddEventListenerOptions) => {

packages/signalizejs/src/plugins/signal.ts

@@ -76,7 +76,7 @@ class Signal<T = any> extends Function {
 		this.value = newValue;
 
 		for (const watcher of this.watchers.afterSet) {
-			setTimeout(() => watcher({ newValue, oldValue }), 0)
+			watcher({ newValue, oldValue });
 		}
 	}