From a2e060bc5ffbe0d823a7be150a60d7cdbdcb194c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladim=C3=ADr?= <8machy@seznam.cz>
Date: Tue, 7 Nov 2023 23:04:52 +0100
Subject: [PATCH] wip

---
 index.html                                   |  60 +++++++--
 packages/signalizejs/directives/src/index.ts | 130 ++++++++++++-------
 packages/signalizejs/src/Signalize.ts        |   2 +-
 packages/signalizejs/src/plugins/bind.ts     |  29 ++---
 packages/signalizejs/src/plugins/signal.ts   |   9 +-
 5 files changed, 150 insertions(+), 80 deletions(-)
diff --git a/index.html b/index.html
index 8ff33d2..ef83778 100755
--- a/index.html
+++ b/index.html
@@ -7,15 +7,31 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta snippet="spa-cache-control" name="spa-cache-control" content="cache">
 	<title snippet="title">Index page</title>
-	<!-- <script type="module" src="http://localhost:5173/@vite/client"></script> -->
-	<script type="module">
+	<!-- <script type="module">
 		import Signalize from 'signalizejs';
 		import directives from 'signalizejs/directives';
 
-		const $ = new Signalize({
-			plugins: [ directives ]
+		const { bind, select, signal } = new Signalize({
+			plugins: [ ]
 		});
-	</script>
+
+		const smallerNumber = signal(0);
+		const largerNumber = signal(0);
+
+		smallerNumber.watch(({ newValue, oldValue }) => {
+			return {
+				value: newValue >= largerNumber() ? largerNumber() - 1 : newValue,
+			}
+		}, { execution: 'beforeSet' });
+
+		smallerNumber.watch(({ newValue, oldValue }) => {
+			console.log(newValue, oldValue);
+		});
+
+		bind(select('#smaller'), { value: smallerNumber });
+		bind(select('#larger'), { value: largerNumber });
+		bind(select('#sum'), { text: [smallerNumber, largerNumber, () => largerNumber + smallerNumber]})
+	</script> -->
 </head>
 
 <body>
@@ -25,8 +41,36 @@
 		}
 	</style>
 
+	<form $items="[]" $value="" @submit="() => {
+		$event.preventDefault();
+		items.set([...new Set([...items(), value()])]);
+		value.set('');
+	}">
+		<!-- Shortcuts for attribute binding -->
+		<input {value} placeholder="Type something" required>
+		<button>Add</button>
+		<br>
+		<!-- Native for of/in loops -->
+		<template :for="item of items">
+			<!-- Iterator feature: count, first, last, odd, even -->
+			<div :text="item + (iterator.last ? '' : ', ')" :style="iterator.odd ? 'color:red': 'color:blue'"></div>
+		</template>
+	</form>
+	<script type="module">
+		import Signalize from 'signalizejs';
+		import directives from 'signalizejs/directives';
+
+		// Use the directives plugin
+		new Signalize({ plugins: [directives()] })
+	</script>
+
+	<!-- <input id="smaller" type="number">
+	<input id="larger" type="number">
+
+	<div id="sum"></div>
+ -->
 	<!-- Conditional loop for large amount of elements -->
- 	<!-- <div $text="'Hello World!'" $count="10">
+	<div $text="'Hello World!'" $count="10">
 		<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>
@@ -42,7 +86,7 @@
 				</li>
 			</template>
 		</ul>
-	</div> -->
+	</div>
 
 	<!-- <div $text="">
 		<input :value="text">
@@ -104,7 +148,7 @@
 	<!-- <template :for="i in 1100">
 		<div :text="i"></div>
 	</template> -->
-<!-- 	<button $count="0" @click="count.set(count() + 1)">Count <span :text="count"></span></button>
+	<!-- 	<button $count="0" @click="count.set(count() + 1)">Count <span :text="count"></span></button>
  -->
 	<!-- <div $text="'Longer'">
 		<template :if="text().length < 2">
diff --git a/packages/signalizejs/directives/src/index.ts b/packages/signalizejs/directives/src/index.ts
index 6c81270..31d125a 100755
--- a/packages/signalizejs/directives/src/index.ts
+++ b/packages/signalizejs/directives/src/index.ts
@@ -36,6 +36,7 @@ interface RegisteredDirective extends Directive {
 interface ProcessDirectiveOptions {
 	root?: Element
 	directiveName?: string
+	reinit?: boolean
 }
 
 interface CreateFunctionOptions {
@@ -52,7 +53,7 @@ interface PluginOptions {
 export default (options?: PluginOptions): SignalizePlugin => {
 
 	return ($: Signalize) => {
-		const { bind, on, Signal, scope, signal, globals, attributePrefix, attributeSeparator } = $;
+		const { bind, on, scope, signal, globals, attributePrefix, attributeSeparator } = $;
 		const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
 		const directives: Record<string, RegisteredDirective> = {};
 		const directivesAttribute = `${attributePrefix}directives`;
@@ -62,7 +63,11 @@ export default (options?: PluginOptions): SignalizePlugin => {
 		const renderedTemplateEndComment = options?.renderedBlockEnd ?? '/template';
 		let inited = false;
 
-		const processElement = async (element: Element, directivesToProcess?: string[]): Promise<Element> => {
+		const processElement = async (options?: ProcessElementOptions): Promise<Element> => {
+			const element: Element = options.element;
+			const directivesToProcess = options.directives ?? [];
+			const reinit = options.reinit ?? false;
+
 			const elementClosestScope = element.closest(`[${$.scopeAttribute}]`);
 			let scopeInitPromise = null;
 
@@ -80,6 +85,14 @@ export default (options?: PluginOptions): SignalizePlugin => {
 				await scopeInitPromise;
 			}
 
+			const elementScope = scope(element, (elementScope) => {
+				if (!('directives' in elementScope)) {
+					elementScope.directives = new Map();
+				}
+			});
+
+			const compiledDirectives = elementScope.directives;
+
 			let directivesQueue = [...directivesToProcess ?? Object.keys(directives)];
 			const customDirectivesOrder = element.getAttribute(orderAttribute) ?? '';
 
@@ -90,15 +103,13 @@ export default (options?: PluginOptions): SignalizePlugin => {
 				])]
 			}
 
-			if (directivesQueue.length > 0) {
-				let countdown = element.attributes.length;
-				const processDirectiveFromQueue = async (directiveName: string): Promise<void> => {
-					if (directiveName === undefined) {
-						return;
-					}
+			directivesQueue = directivesQueue.filter((item) => !compiledDirectives.has(item));
 
+			if (directivesQueue.length > 0) {
+				while (directivesQueue.length) {
+					const directiveName = directivesQueue.shift();
 					const matcher = directives[directiveName]?.matcher
-					let directivesPromises = [];
+
 					for (const attribute of element.attributes) {
 						const matcherReturn = matcher({ element, attribute });
 
@@ -112,46 +123,54 @@ export default (options?: PluginOptions): SignalizePlugin => {
 						}
 
 						const directive = directives[directiveName];
-						const elementScope = scope(element, (elementScope) => {
-							if (!('directives' in elementScope)) {
-								elementScope.directives = new Set();
-							}
-
-							elementScope.directives.add(directiveName);
+						scope(element, (elementScope) => {
+							elementScope.directives.set(
+								directiveName,
+								[
+									...elementScope.directives.get(directiveName) ?? [],
+									(elementScope) => {
+										return directive.callback({
+											...elementScope,
+											data: elementScope.data,
+											matches,
+											attribute
+										})
+									}
+								]
+							);
 						});
-
-						countdown--;
-						directivesPromises.push(
-							directive.callback({
-								...elementScope,
-								data: elementScope.data,
-								matches,
-								attribute
-							})
-						)
 					}
+				}
+			}
 
-					if (directivesPromises.length > 0) {
-						await Promise.all(directivesPromises);
-					}
+			const directivesToRun = [...elementScope.directives.keys()]
 
-					if (countdown === 0) {
-						return;
-					}
+			const runDirective = async (name: string): Promise<void> => {
+				const promises = [];
 
-					return processDirectiveFromQueue(directivesQueue.shift());
+				for (const directiveFunction of elementScope.directives.get(name)) {
+					promises.push(directiveFunction(elementScope));
 				}
 
-				await processDirectiveFromQueue(directivesQueue.shift());
+				await Promise.all(promises);
+
+				if (directivesToRun.length > 0) {
+					await runDirective(directivesToRun.shift());
+				}
+			}
 
-				element.removeAttribute($.cloakAttribute);
+			if (directivesToRun.length > 0) {
+				await runDirective(directivesToRun.shift());
 			}
 
+			element.removeAttribute($.cloakAttribute);
+
 			return element;
 		};
 
 		const processDirectives = async (options: ProcessDirectiveOptions = { root: $.root }): Promise<Element | Document | DocumentFragment> => {
-			let { root, directiveName } = options;
+			// TODO reinit
+			let { root, directiveName, reinit = false } = options;
 			const directivesToProcess = directiveName === undefined ? Object.keys(directives) : [directiveName];
 
 			const processElements = async (root): Promise<void> => {
@@ -162,7 +181,10 @@ export default (options?: PluginOptions): SignalizePlugin => {
 				}
 
 				if (rootIsElement) {
-					await processElement(root, directivesToProcess);
+					await processElement({
+						element: root,
+						directives: directivesToprocess
+					});
 				}
 
 				const elementsProcessingPromises = []
@@ -292,7 +314,7 @@ export default (options?: PluginOptions): SignalizePlugin => {
 									data[key] = value;
 								}
 							});
-							directivesProcessingPromises.push(processElement(child));
+							directivesProcessingPromises.push(processElement({ element: child }));
 						}
 					}
 
@@ -327,11 +349,13 @@ export default (options?: PluginOptions): SignalizePlugin => {
 							iterator: {
 								count: counter,
 								first: counter === 0,
-								last: counter === totalCount,
+								last: counter === totalCount - 1,
 								odd: counter % 2 !== 0,
 								even: counter % 2 === 0
 							}
 						});
+
+						counter++;
 					}
 
 					if (argumentsMatch[2] === 'in') {
@@ -346,7 +370,6 @@ export default (options?: PluginOptions): SignalizePlugin => {
 
 					const currentState = [];
 					let nextElementSibling = element.nextElementSibling;
-
 					while (nextElementSibling !== null) {
 						if (scope(nextElementSibling)?.template !== element) {
 							break;
@@ -362,23 +385,25 @@ export default (options?: PluginOptions): SignalizePlugin => {
 					const fragments = await Promise.all(directivesProcessingPromises);
 
 					const reinitDirectives = (element) => {
-						const elementScope = scope(element);
+						processDirectives({
+							root: element,
+							reinit: true
+						})
+						/* const elementScope = scope(element);
 						if (elementScope !== undefined && elementScope?.directives !== undefined) {
 							elementScope.cleanup();
-							const directivesQueue = elementScope.directives;
-							elementScope.directives.clear();
-							processElement(element, directivesQueue);
+							processElement(element);
 						}
 
 						for (const child of element.children) {
 							reinitDirectives(child);
-						}
+						} */
 					}
 
 					const fragmentsLength = fragments.length;
 					while (fragments.length > 0) {
 						const root = fragments.shift();
-						scope(root, (rootScope) => {
+						const rootScope = scope(root, (rootScope) => {
 							rootScope.template = element;
 						});
 						const rootKey = root.getAttribute('key')
@@ -407,13 +432,21 @@ export default (options?: PluginOptions): SignalizePlugin => {
 										currentState[i] = existingItem
 										currentState[existingItemIndex] = tmp;
 									}
+								} else {
+									const existingItemScope = scope(existingItem);
+
+									for (const [key, value] of Object.entries(rootScope.data)) {
+										existingItemScope.data[key] = value;
+									}
+
+									reinitDirectives(existingItem);
 								}
 							} else if (i >= currentState.length) {
 								lastInsertPoint.after(root);
 								lastInsertPoint = root;
 								for (const child of root.children) {
 									scope(child, ({ data }) => {
-										data = scope(root).data
+										data = rootScope.data
 									});
 
 									processDirectives({ root: child });
@@ -425,7 +458,7 @@ export default (options?: PluginOptions): SignalizePlugin => {
 						} else if (currentState.length > 0 && i < currentState.length) {
 							const fragmentScope = scope(currentState[i]);
 
-							for (const [key, value] of Object.entries(scope(root).data)) {
+							for (const [key, value] of Object.entries(rootScope.data)) {
 								fragmentScope.data[key] = value;
 							}
 
@@ -437,7 +470,7 @@ export default (options?: PluginOptions): SignalizePlugin => {
 							lastInsertPoint = root;
 							for (const child of root.children) {
 								scope(child, ({ data }) => {
-									data = scope(root).data
+									data = rootScope.data
 								});
 
 								processDirectives({ root: child });
@@ -466,7 +499,6 @@ export default (options?: PluginOptions): SignalizePlugin => {
 				}
 
 				await process();
-
 				unwatchSignalCallbacks = [];
 				for (const signalToWatch of signalsToWatch) {
 					unwatchSignalCallbacks.push(signalToWatch.watch(process))
diff --git a/packages/signalizejs/src/Signalize.ts b/packages/signalizejs/src/Signalize.ts
index 7aea21a..77442ee 100755
--- a/packages/signalizejs/src/Signalize.ts
+++ b/packages/signalizejs/src/Signalize.ts
@@ -41,7 +41,7 @@ export interface SignalizeOptions {
 	attributeSeparator: string
 	attributePrefix: string
 	globals?: SignalizeGlobals
-	plugins?: SignalizePlugin
+	plugins?: SignalizePlugin[]
 }
 
 export type SignalizePlugin = (signalize: Signalize) => void
diff --git a/packages/signalizejs/src/plugins/bind.ts b/packages/signalizejs/src/plugins/bind.ts
index 87b666f..e79eaa3 100755
--- a/packages/signalizejs/src/plugins/bind.ts
+++ b/packages/signalizejs/src/plugins/bind.ts
@@ -53,7 +53,7 @@ export default ($: Signalize): void => {
 			let attributeInited = false;
 			let previousSettedValue: any;
 
-			const setOption = async (attribute, value) => {
+			const setAttribute = async (attribute, value): Promise<void> => {
 				value = value instanceof Promise ? await value : value;
 				attribute = attributesAliases[attribute] ?? attribute;
 
@@ -82,15 +82,18 @@ export default ($: Signalize): void => {
 			}
 
 			if (['string', 'number'].includes(attributeBinderType)) {
-				setOption(attr, attributeBinder);
+				setAttribute(attr, attributeBinder);
 				continue;
 			}
 
-			/* if (attributeBinderIsSignal === true) {
+			if (attributeBinderIsSignal) {
 				signalsToWatch.push(attributeBinder);
-			} */
+			}
 
-			if (attributeBinderIsSignal === true || signalsToWatch.length === 1) {
+			if (attributeBinderIsSignal) {
+				getListener = () => attributeBinder();
+				setListener = (value) => attributeBinder.set(value);
+			} else if (signalsToWatch.length === 1) {
 				getListener = () => attributeBinder();
 				setListener = (value) => signalsToWatch[0].set(value);
 			} else if (typeof attributeBinder === 'function') {
@@ -101,31 +104,23 @@ export default ($: Signalize): void => {
 			}
 
 			if (attributeBinderIsFunction === true) {
-				setOption(attr, attributeBinder());
+				setAttribute(attr, attributeBinder());
 			}
 
 			for (const signalToWatch of signalsToWatch) {
 				unwatchSignalCallbacks.push(
 					signalToWatch.watch(async () => {
-						setOption(attr, getListener());
+						setAttribute(attr, getListener());
 					})
 				);
 			}
 
 			if (typeof setListener === 'function' && reactiveInputAttributes.includes(attr)) {
-				const inputListener = async (): void => {
+				const inputListener = (): void => {
 					setListener(isNumericInput ? Number(element[attr] as string) : element[attr] as string);
 				};
 
-				on('input', element, () => {
-					inputListener()
-				}, { passive: true });
-
-				if (elementScope instanceof Scope) {
-					elementScope.cleanup(() => {
-						off('input', element, inputListener);
-					})
-				}
+				on('input', element, inputListener, { passive: true });
 			}
 		}
 
diff --git a/packages/signalizejs/src/plugins/signal.ts b/packages/signalizejs/src/plugins/signal.ts
index 6d6bb18..c417906 100755
--- a/packages/signalizejs/src/plugins/signal.ts
+++ b/packages/signalizejs/src/plugins/signal.ts
@@ -76,17 +76,15 @@ export default ($: Signalize): void => {
 			this.#setTimeout = setTimeout(() => {
 				const oldValue = this.value;
 
-				if (['string', 'number'].includes(typeof newValue) && newValue === oldValue) {
-					return;
-				}
-
 				let settable = true;
+
 				for (const watcher of this.watchers.beforeSet) {
 					const watcherData = watcher({ newValue, oldValue });
 					if (typeof watcherData !== 'undefined') {
 						settable = watcherData.settable ?? settable;
-						newValue = watcherData.value;
+						newValue = watcherData.value ?? newValue;
 					}
+
 					if (!settable) {
 						break;
 					}
@@ -97,6 +95,7 @@ export default ($: Signalize): void => {
 				}
 
 				this.value = newValue;
+
 				for (const watcher of this.watchers.afterSet) {
 					watcher({ newValue, oldValue })
 				}
