src/main.ts

@@ -38,7 +38,7 @@ export default (options: ComponentOptions) => {
 		private _states: Record<string, any> = {}
 		private _stateToElementsMap: Record<string, Set<HTMLElement>> = {}
 		private _currentRenderingElement: HTMLElement | null = null
-		private _statesListeners: Record<string, (...args: any[]) => void> = {}
+		private _statesListeners: Record<string, Function> = {}
 		private _textBindings: Array<{
 			node: Text
 			expr: string
@@ -69,9 +69,9 @@ export default (options: ComponentOptions) => {
 					set: (target: Record<string, any>, keyPath: string, value: any) => {
 						const valueRoute = keyPath.split('.')
 						let currentTarget = target
-						for (const i in valueRoute) {
+						for (let i in valueRoute) {
 							const key = valueRoute[i]
-							if (Number.parseInt(i) === valueRoute.length - 1) {
+							if (parseInt(i) === valueRoute.length - 1) {
 								currentTarget[key] = value
 							} else {
 								if (!currentTarget[key]) {
@@ -93,7 +93,8 @@ export default (options: ComponentOptions) => {
 							})
 
 						// trigger state update events
-						statesListeners?.[keyPath]?.(value)
+						if (statesListeners && statesListeners[keyPath])
+							statesListeners[keyPath](value)
 
 						return true
 					},
@@ -109,15 +110,17 @@ export default (options: ComponentOptions) => {
 
 						const valueRoute = keyPath.split('.')
 						let currentTarget = target
-						for (const i in valueRoute) {
+						for (let i in valueRoute) {
 							const key = valueRoute[i]
-							if (Number.parseInt(i) === valueRoute.length - 1)
+							if (parseInt(i) === valueRoute.length - 1) {
 								return currentTarget[key]
-
+							} else {
-							if (!currentTarget[key])
+								if (!currentTarget[key]) {
 									currentTarget[key] = {}
+								}
 								currentTarget = currentTarget[key]
 							}
+						}
 						return undefined
 					},
 				},
@@ -141,7 +144,7 @@ export default (options: ComponentOptions) => {
 			const doc = parser.parseFromString(template, 'text/html')
 
 			const mainContent = doc.body.firstElementChild
-			let rootElement: Element
+			let rootElement
 
 			if (mainContent) {
 				rootElement = document.importNode(mainContent, true)
@@ -160,48 +163,51 @@ export default (options: ComponentOptions) => {
 			if (this._stateToElementsMap[keyPath]) {
 				const updateQueue = new Set<HTMLElement>()
 
-				for (const element of this._stateToElementsMap[keyPath]) {
+				this._stateToElementsMap[keyPath].forEach((element) => {
 					updateQueue.add(element)
-				}
+				})
 
 				this._scheduleUpdate(updateQueue)
 			}
 
 			// Update text bindings that depend on this state
 			if (this._textBindings) {
-				// this._textBindings.forEach((binding) => {
+				this._textBindings.forEach((binding) => {
-				for (const binding of this._textBindings)
 					if (
 						binding.expr === keyPath ||
-						binding.expr.startsWith(`${keyPath}.`)
+						binding.expr.startsWith(keyPath + '.')
-					)
+					) {
 						this._updateTextNode(
 							binding.node,
 							binding.expr,
 							binding.originalContent,
 						)
 					}
+				})
+			}
 
 			// Update attribute bindings that depend on this state
 			if (this._attributeBindings) {
-				for (const binding of this._attributeBindings)
+				this._attributeBindings.forEach((binding) => {
 					if (
 						binding.expr === keyPath ||
-						binding.expr.startsWith(`${keyPath}.`)
+						binding.expr.startsWith(keyPath + '.')
 					) {
 						const value = this._getNestedState(binding.expr)
-						if (value !== undefined)
+						if (value !== undefined) {
 							binding.element.setAttribute(binding.attrName, String(value))
 						}
-
+					}
+				})
 			}
 		}
 
 		private _scheduleUpdate(elements: Set<HTMLElement>) {
 			requestAnimationFrame(() => {
-				for (const element of elements)
+				elements.forEach((element) => {
 					this._updateElement(element)
 				})
+			})
 		}
 
 		private _updateElement(element: HTMLElement) {
@@ -252,14 +258,7 @@ export default (options: ComponentOptions) => {
 
 			// Traverse the DOM tree
 			let currentNode: Node | null
-			let flag = true
+			while ((currentNode = walker.nextNode())) {
-			while (flag) {
-				currentNode = walker.nextNode()
-				if (!currentNode) {
-					flag = false
-					break
-				}
-
 				// Handle text nodes
 				if (currentNode.nodeType === Node.TEXT_NODE) {
 					const textContent = currentNode.textContent || ''
@@ -273,7 +272,7 @@ export default (options: ComponentOptions) => {
 						// Record nodes and expressions that need to be updated
 						const matches = textContent.match(/\{\{\s*([^}]+)\s*\}\}/g)
 						if (matches) {
-							for (const match of matches) {
+							matches.forEach((match) => {
 								// Extract the expression content, removing {{ }} and spaces
 								const expr = match.replace(/\{\{\s*|\s*\}\}/g, '').trim()
 
@@ -290,7 +289,7 @@ export default (options: ComponentOptions) => {
 								this._stateToElementsMap[expr].add(
 									textNode as unknown as HTMLElement,
 								)
-							}
+							})
 						}
 					}
 				}
@@ -302,7 +301,7 @@ export default (options: ComponentOptions) => {
 					// Traverse all macro attributes
 
 					// Detect :attr="" bindings, such as :src="imageUrl"
-					for (const attr of Array.from(currentElementNode.attributes)) {
+					Array.from(currentElementNode.attributes).forEach((attr) => {
 						if (attr.name.startsWith(':')) {
 							const attrName = attr.name.substring(1) // Remove ':'
 							const expr = attr.value.trim()
@@ -318,14 +317,13 @@ export default (options: ComponentOptions) => {
 								attr.value,
 							)
 						}
-					}
+					})
 
 					// Process @event bindings, such as @click="handleClick"
 					const eventBindings = Array.from(
 						currentElementNode.attributes,
 					).filter((attr) => attr.name.startsWith('@'))
-					// eventBindings.forEach((attr) => {
+					eventBindings.forEach((attr) => {
-					for (const attr of eventBindings) {
 						const eventName = attr.name.substring(1) // Remove '@'
 						const handlerValue = attr.value.trim()
 
@@ -364,13 +362,12 @@ export default (options: ComponentOptions) => {
 								handlerValue,
 							)
 						}
-					}
+					})
 
 					// Process %-started macros, such as %connect="stateName", %if="condition", %for="item in items"
 					const macroBindings = Array.from(
 						currentElementNode.attributes,
 					).filter((attr) => attr.name.startsWith('%'))
-					// biome-ignore lint/complexity/noForEach: TODO: will cause a bug, need to be fixed
 					macroBindings.forEach((attr) => {
 						const macroName = attr.name.substring(1) // Remove '%'
 						const expr = attr.value.trim()
@@ -627,7 +624,7 @@ export default (options: ComponentOptions) => {
 			itemContext: Record<string, any>,
 		) {
 			// 1. Store the item context of the element so that subsequent updates can find it
-			; (element as any)._itemContext = itemContext
+			;(element as any)._itemContext = itemContext
 
 			// 2. Process bindings in text nodes
 			const processTextNodes = (node: Node) => {