wip

signalizejs · Aug 26, 2023 · 2c41333 · 2c41333
1 parent 4617ba0
commit 2c41333
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -17,12 +17,12 @@
 		}
 	</style>
 
-	<div $text="" $count="5" cloak>
+	<!-- <div $text="" $count="5" 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 in [...Array(count())]">
+			<template :for="i of count()">
 				<div>
 					<template :if="i % 2 !== 0">
 						<span :text="'Odd' + i + ' - ' + text"></span>
@@ -35,7 +35,31 @@
 				</div>
 			</template>
 		</ul>
-	</div>
+	</div> -->
+
+	<form $items="{}" $text="" @submit="
+		event.preventDefault();
+		items.set({...items(), [text()]: text()})
+		text.set('');
+	">
+		<input :value="text">
+		<ul>
+			<template :for="item of Object.keys(items()).sort()">
+				<li :key="item.replace(/s/g, '')">
+					<a
+						role="button"
+						@click="
+							const newItems = items();
+							delete newItems[item];
+							items.set(newItems);
+						"
+					>
+						<span :text="item"></span> -	X
+					</a>
+				</li>
+			</template>
+		</ul>
+	</form>
 
 	<!-- <template :for="[name, surname] of Object.entries({name: 'vladimir', surname: 'Macháček'})">
 		<li :text="name + ' ' + surname"></li>

diff --git a/packages/signalize/src/plugins/directives.ts b/packages/signalize/src/plugins/directives.ts
@@ -340,12 +340,7 @@ export default (signalize: Signalize): void => {
 						}
 					}
 
-					while (currentState.length > fragments.length) {
-						const item = currentState.pop();
-						scope(item).cleanup();
-						item.remove();
-					}
-
+					const fragmentsLength = fragments.length;
 					while (fragments.length > 0) {
 						const root = fragments.shift();
 						scope(root, (rootScope) => {
@@ -361,24 +356,55 @@ export default (signalize: Signalize): void => {
 								if (keyMatches) {
 									existingItemIndex = index;
 								}
-								return true;
+								return keyMatches;
 							});
-							// Todo přesunout položku a její potomky v indexech
+
+							console.log('tu');
+							if (existingItem) {
+								if (existingItemIndex > i && currentState[i] !== undefined) {
+									console.log('Smaller index', root.outerHTML);
+									if (i === 0) {
+										const tmp = currentState[i];
+										currentState[i].before(existingItem);
+										currentState[i] = existingItem;
+										currentState[existingItemIndex] = tmp;
+									} else {
+										const tmp = currentState[i];
+										currentState[i - 1].after(existingItem);
+										currentState[i] = existingItem
+										currentState[existingItemIndex] = tmp;
+									}
+								}
+							} else if (i >= currentState.length) {
+								lastInsertPoint.after(root);
+								lastInsertPoint = root;
+								console.log('here');
+								for (const child of root.children) {
+									scope(child, ({ data }) => {
+										data = scope(root).data()
+									});
+
+									processDirectives({ root: child });
+								}
+							} else {
+								currentState[i].before(root);
+								processDirectives({ root: root });
+								console.log('fu');
+							}
+
 						} else if (currentState.length > 0 && i < currentState.length) {
 							const fragmentScope = scope(currentState[i]);
 
 							for (const [key, value] of Object.entries(scope(root).data())) {
 								fragmentScope.data[key] = value;
 							}
 
-							//scope.data = scope(root).data;
 							reinitDirectives(currentState[i]);
 
 							lastInsertPoint = currentState[i];
 						} else if (currentState.length === 0 || i >= currentState.length) {
 							lastInsertPoint.after(root);
 							lastInsertPoint = root;
-
 							for (const child of root.children) {
 								scope(child, ({ data }) => {
 									data = scope(root).data()
@@ -387,10 +413,29 @@ export default (signalize: Signalize): void => {
 								processDirectives({ root: child });
 							}
 						}
-
+						console.log(currentState, currentState.length, i)
 						i++;
 					}
 
+					nextElementSibling = element.nextElementSibling;
+					let removeId = 0;
+
+					while (nextElementSibling !== null) {
+						if (scope(nextElementSibling)?.template !== element) {
+							break;
+						}
+
+						const nextElementToRemove = nextElementSibling.nextElementSibling;
+
+						if (removeId >= fragmentsLength) {
+							scope(nextElementSibling).cleanup();
+							nextElementSibling.remove();
+						}
+
+						nextElementSibling = nextElementToRemove;
+						removeId++;
+					}
+
 					for (const unwatch of unwatchSignalCallbacks) {
 						unwatch();
 					}

diff --git a/packages/signalize/src/plugins/signal.ts b/packages/signalize/src/plugins/signal.ts
@@ -22,10 +22,6 @@ interface SignalWatcherArguments<T> {
 	oldValue?: T
 }
 
-interface SignalOptions {
-	equals: boolean
-}
-
 class Signal<T = any> extends Function {
 	constructor (defaultValue: T) {
 		super()
@@ -46,10 +42,10 @@ class Signal<T = any> extends Function {
 			return value;
 		}
 
-		this.set = (newValue: T, options?: SignalOptions): void => {
+		this.set = (newValue: T): void => {
 			const oldValue = value;
 
-			if (newValue === oldValue && (options?.equals ?? true)) {
+			if (['string', 'number'].includes(typeof newValue) && newValue === oldValue) {
 				return;
 			}