Merge branch 'main' into dev

.gitea/workflows/workflow.yaml

@@ -4,20 +4,23 @@ on:
   push:
     branches:
       - '*'
+  pull_request:
+    branches:
+      - '*'
 
 jobs:
   quality:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: '22'
       - name: Install dependencies
         run: npm ci
-      - name: Run Biome
+      - name: Run Biome checks
         run: npm run quality-check
     if: always()
     outputs:

.github/workflows/workflow.yaml

@@ -1,7 +1,7 @@
-name: Quality Check
+name: CI Pipeline
 
 on:
-  push:
+  pull_request:
     branches:
       - '*'
 
@@ -10,15 +10,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: '22'
+          cache: 'npm'
       - name: Install dependencies
         run: npm ci
-      - name: Run Biome
+      - name: Run Biome checks
-        run: npm run quality-check
+        run: npx @biomejs/biome check --apply .
-    if: always()
-    outputs:
-      status: ${{ job.status }}

biome.json

@@ -19,7 +19,22 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true
+			"recommended": true,
+			"correctness": {
+				"noUnusedVariables": "error",
+				"noUndeclaredVariables": "error",
+				"noUnreachable": "error",
+				"noUnsafeFinally": "error"
+			},
+			"security": {
+				"noDangerouslySetInnerHtml": "error",
+				"noGlobalEval": "error"
+			},
+			"style": {
+				"noVar": "error",
+				"useBlockStatements": "error",
+				"useConst": "error"
+			}
 		}
 	},
 	"javascript": {

package-lock.json

@@ -14,6 +14,7 @@
 				"@rollup/plugin-terser": "^0.4.4",
 				"@rollup/plugin-typescript": "^12.1.2",
 				"dts-bundle-generator": "^9.5.1",
+				"husky": "^9.1.7",
 				"i": "^0.3.7",
 				"npm": "^11.4.0",
 				"rimraf": "^6.0.1",
@@ -1040,6 +1041,22 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/husky": {
+			"version": "9.1.7",
+			"resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+			"integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"husky": "bin.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/typicode"
+			}
+		},
 		"node_modules/i": {
 			"version": "0.3.7",
 			"resolved": "https://registry.npmjs.org/i/-/i-0.3.7.tgz",

package.json

@@ -25,6 +25,7 @@
 		"@rollup/plugin-terser": "^0.4.4",
 		"@rollup/plugin-typescript": "^12.1.2",
 		"dts-bundle-generator": "^9.5.1",
+		"husky": "^9.1.7",
 		"i": "^0.3.7",
 		"npm": "^11.4.0",
 		"rimraf": "^6.0.1",
@@ -33,5 +34,10 @@
 		"tslib": "^2.8.1",
 		"typescript": "^5.8.3"
 	},
-	"type": "module"
+	"type": "module",
+	"husky": {
+		"hooks": {
+			"pre-commit": "npm run quality-check && npm test"
+		}
+	}
 }

src/main.ts

@@ -83,8 +83,8 @@ export default (options: ComponentOptions) => {
 					conditionalElements: this._conditionalElements,
 					evaluateIfCondition: this._evaluateIfCondition.bind(this),
 				},
-				options.states,
+				states,
-				options.statesListeners,
+				statesListeners,
 			)
 
 			// initialize shadow dom
@@ -126,7 +126,9 @@ export default (options: ComponentOptions) => {
 
 		private _scheduleUpdate(elements: Set<HTMLElement>) {
 			requestAnimationFrame(() => {
-				for (const element of elements) this._updateElement(element)
+				for (const element of elements) {
+					this._updateElement(element)
+				}
 			})
 		}
 
@@ -142,8 +144,9 @@ export default (options: ComponentOptions) => {
 				const result = renderFunction()
 
 				// Update DOM
-				if (typeof result === 'string') element.innerHTML = result
+				if (typeof result === 'string') {
-				else if (result instanceof Node) {
+					element.innerHTML = result
+				} else if (result instanceof Node) {
 					element.innerHTML = ''
 					element.appendChild(result)
 				}
@@ -155,21 +158,25 @@ export default (options: ComponentOptions) => {
 
 		private _evaluateIfCondition(element: Element, condition: string) {
 			const info = this._conditionalElements.get(element)
-			if (!info) return
+			if (!info) {
+				return
+			}
 
 			// Evaluate the condition
 			const result = this._evaluateExpression(condition)
 			const shouldShow = Boolean(result)
 
 			if (shouldShow !== info.isPresent) {
-				if (shouldShow)
+				if (shouldShow) {
 					// Insert the element back into the DOM
 					info.placeholder.parentNode?.insertBefore(
 						element,
 						info.placeholder.nextSibling,
 					)
 					// Remove the element from the DOM
-				else element.parentNode?.removeChild(element)
+				} else {
+					element.parentNode?.removeChild(element)
+				}
 
 				// Update the state
 				info.isPresent = shouldShow
@@ -180,8 +187,9 @@ export default (options: ComponentOptions) => {
 		private _evaluateExpression(expression: string): unknown {
 			try {
 				// get the state keys and values
-				if (this._states[expression] !== undefined)
+				if (this._states[expression] !== undefined) {
 					return this._states[expression]
+				}
 
 				// execute the expression
 				const stateKeys = Object.keys(this._states)
@@ -189,10 +197,11 @@ export default (options: ComponentOptions) => {
 
 				const func = new Function(...stateKeys, `return ${expression}`)
 				const execRes = func(...stateValues)
-				if (typeof execRes !== 'boolean')
+				if (typeof execRes !== 'boolean') {
 					throw new Error(
 						`The expression "${expression}" must return a boolean value.`,
 					)
+				}
 				return execRes
 			} catch (error) {
 				console.error(`Error evaluating expression: ${expression}`, error)
@@ -232,15 +241,16 @@ export default (options: ComponentOptions) => {
 			// 	(name) => {
 			for (const name of Object.getOwnPropertyNames(
 				Object.getPrototypeOf(this),
-			))
+			)) {
 				if (
 					typeof (this as Record<string, unknown>)[name] === 'function' &&
 					name !== 'constructor'
-				)
+				) {
 					context[name] = (
 						this as unknown as Record<string, (...args: unknown[]) => unknown>
 					)[name].bind(this)
-
+				}
+			}
 			return context
 		}
 
@@ -360,7 +370,9 @@ export default (options: ComponentOptions) => {
 			let result = this._states
 
 			for (const part of parts) {
-				if (result === undefined || result === null) return undefined
+				if (result === undefined || result === null) {
+					return undefined
+				}
 				result = (result as { [key: string]: Record<string, unknown> })[part]
 			}
 
@@ -368,11 +380,15 @@ export default (options: ComponentOptions) => {
 		}
 
 		connectedCallback() {
-			if (onMount) onMount.call(this)
+			if (onMount) {
+				onMount.call(this)
+			}
 		}
 
 		disconnectedCallback() {
-			if (onUnmount) onUnmount.call(this)
+			if (onUnmount) {
+				onUnmount.call(this)
+			}
 		}
 
 		static get observedAttributes() {
@@ -384,7 +400,9 @@ export default (options: ComponentOptions) => {
 			oldValue: string,
 			newValue: string,
 		) {
-			if (onAttributeChanged) onAttributeChanged(attrName, oldValue, newValue)
+			if (onAttributeChanged) {
+				onAttributeChanged(attrName, oldValue, newValue)
+			}
 		}
 
 		// state manager
@@ -396,7 +414,9 @@ export default (options: ComponentOptions) => {
 			const parts = keyPath.split('.')
 			let result = this._states
 			for (const part of parts) {
-				if (result === undefined || result === null) return undefined
+				if (result === undefined || result === null) {
+					return undefined
+				}
 				result = (result as { [key: string]: Record<string, unknown> })[part]
 			}
 			return result

src/utils/initState.ts

@@ -49,7 +49,9 @@ export default function initState(
 					if (Number.parseInt(i) === valueRoute.length - 1) {
 						currentTarget[key] = value
 					} else {
-						if (!currentTarget[key]) currentTarget[key] = {}
+						if (!currentTarget[key]) {
+							currentTarget[key] = {}
+						}
 						currentTarget = currentTarget[key] as Record<string, unknown>
 					}
 				}
@@ -62,15 +64,18 @@ export default function initState(
 					getNestedState: ops.getNestedState,
 					scheduleUpdate: ops.scheduleUpdate,
 				})
-				if (ops.statesListenersSelf[keyPath])
+				if (ops.statesListenersSelf[keyPath]) {
 					ops.statesListenersSelf[keyPath](value)
+				}
 
 				// trigger %if macros
-				if (ops.conditionalElements.size > 0)
+				if (ops.conditionalElements.size > 0) {
 					ops.conditionalElements.forEach((info, element) => {
-						if (info.expr.includes(keyPath))
+						if (info.expr.includes(keyPath)) {
 							ops.evaluateIfCondition(element, info.expr)
+						}
 					})
+				}
 
 				// trigger state update events
 				statesListeners?.[keyPath]?.(value)
@@ -80,8 +85,9 @@ export default function initState(
 			get: (target: Record<string, unknown>, keyPath: string) => {
 				// collect state dependencies
 				if (ops.currentRenderingElement) {
-					if (!ops.stateToElementsMap[keyPath])
+					if (!ops.stateToElementsMap[keyPath]) {
 						ops.stateToElementsMap[keyPath] = new Set()
+					}
 					ops.stateToElementsMap[keyPath].add(ops.currentRenderingElement)
 				}
 
@@ -89,10 +95,13 @@ export default function initState(
 				let currentTarget = target
 				for (const i in valueRoute) {
 					const key = valueRoute[i]
-					if (Number.parseInt(i) === valueRoute.length - 1)
+					if (Number.parseInt(i) === valueRoute.length - 1) {
 						return currentTarget[key]
+					}
 
-					if (!currentTarget[key]) currentTarget[key] = {}
+					if (!currentTarget[key]) {
+						currentTarget[key] = {}
+					}
 					currentTarget = currentTarget[key] as Record<string, unknown>
 				}
 				return undefined

src/utils/parseTemplate.ts

@@ -5,8 +5,9 @@ export default function parseTemplate(template: string): Element {
 	const mainContent = doc.body.firstElementChild
 	let rootElement: Element
 
-	if (mainContent) rootElement = document.importNode(mainContent, true)
+	if (mainContent) {
-	else {
+		rootElement = document.importNode(mainContent, true)
+	} else {
 		const container = document.createElement('div')
 		container.innerHTML = template
 		rootElement = container

src/utils/processTemplateMarcos.ts

@@ -109,8 +109,9 @@ export default function processTemplateMacros(
 						options.updateTextNode(textNode, expr, originalContent)
 
 						// Add dependency relationship for this state path
-						if (!options.stateToElementsMap[expr])
+						if (!options.stateToElementsMap[expr]) {
 							options.stateToElementsMap[expr] = new Set()
+						}
 
 						options.stateToElementsMap[expr].add(
 							textNode as unknown as HTMLElement,
@@ -219,14 +220,14 @@ export default function processTemplateMacros(
 				currentElementNode.removeAttribute(attr.name)
 
 				// Handle different types of macros
-				if (macroName === 'connect')
+				if (macroName === 'connect') {
 					// Handle state connection: %connect="stateName"
 					setupTwoWayBinding(currentElementNode, expr, {
 						getNestedState: context.getState.bind(context),
 						setState: context.setState.bind(context),
 						statesListeners: options.stateListeners,
 					})
-				else if (macroName === 'if') {
+				} else if (macroName === 'if') {
 					ifDirectivesToProcess.push({ element: currentElementNode, expr })
 				} else if (macroName === 'for') {
 					const listContext: ListRenderingContext = {
@@ -238,8 +239,7 @@ export default function processTemplateMacros(
 						triggerFunc: options.triggerFunc.bind(context),
 					}
 					setupListRendering(currentElementNode, expr, listContext)
-				} else if (macroName === 'key') continue
+				}
-				else console.warn(`Unknown macro: %${macroName}`)
 			}
 		}
 	}
@@ -272,12 +272,13 @@ function setupTwoWayBinding(
 	const value = ops.getNestedState(expr)
 
 	// Set the initial value
-	if (value !== undefined)
+	if (value !== undefined) {
 		element.setAttribute('data-laterano-connect', String(value))
-	else
+	} else {
 		console.error(
 			`State \`${expr}\` not found in the component state. Although Laterano will try to work with it, it may has potentially unexpected behavior.`,
 		)
+	}
 
 	// Add event listener for input events
 	element.addEventListener('input', (event: Event) => {
@@ -290,8 +291,11 @@ function setupTwoWayBinding(
 
 	// Add event listener for state changes
 	ops.statesListeners[expr] = (newValue: unknown) => {
-		if (element instanceof HTMLInputElement) element.value = newValue as string
+		if (element instanceof HTMLInputElement) {
-		else element.setAttribute('data-laterano-connect', String(newValue))
+			element.value = newValue as string
+		} else {
+			element.setAttribute('data-laterano-connect', String(newValue))
+		}
 	}
 }
 
@@ -322,7 +326,9 @@ function setupConditionRendering(
 
 	const statePaths = ops.extractStatePathsFromExpression(expr)
 	for (const path of statePaths) {
-		if (!ops.stateToElementsMap[path]) ops.stateToElementsMap[path] = new Set()
+		if (!ops.stateToElementsMap[path]) {
+			ops.stateToElementsMap[path] = new Set()
+		}
 		ops.stateToElementsMap[path].add(element as HTMLElement)
 	}
 }
@@ -349,7 +355,9 @@ function evaluateExpressionWithItemContext(
 			let value = itemContext[itemVar]
 
 			for (const part of parts) {
-				if (value === undefined || value === null) return undefined
+				if (value === undefined || value === null) {
+					return undefined
+				}
 				value = (value as { [key: string]: unknown })[part]
 			}
 
@@ -461,7 +469,7 @@ function processElementWithItemContext(
 				const textNode = node as Text
 				const updatedContent = textContent.replace(
 					/\{\{\s*([^}]+)\s*\}\}/g,
-					(match, expr) => {
+					(_match, expr) => {
 						const value = evaluateExpressionWithItemContext(
 							expr.trim(),
 							itemContext,
@@ -476,8 +484,11 @@ function processElementWithItemContext(
 	}
 
 	// Process the text nodes of the element itself
-	for (const node of Array.from(element.childNodes))
+	for (const node of Array.from(element.childNodes)) {
-		if (node.nodeType === Node.TEXT_NODE) processTextNodes(node)
+		if (node.nodeType === Node.TEXT_NODE) {
+			processTextNodes(node)
+		}
+	}
 
 	// Process attribute bindings (:attr)
 	for (const attr of Array.from(element.attributes)) {
@@ -490,7 +501,9 @@ function processElementWithItemContext(
 				context,
 			)
 
-			if (value !== undefined) element.setAttribute(attrName, String(value))
+			if (value !== undefined) {
+				element.setAttribute(attrName, String(value))
+			}
 
 			// Remove the original binding attribute
 			element.removeAttribute(attr.name)
@@ -555,7 +568,9 @@ function processElementWithItemContext(
 			shouldDisplay = Boolean(result)
 
 			// Apply the condition
-			if (!shouldDisplay) (element as HTMLElement).style.display = 'none'
+			if (!shouldDisplay) {
+				;(element as HTMLElement).style.display = 'none'
+			}
 		}
 	}
 
@@ -581,12 +596,15 @@ function processElementWithItemContext(
 	}
 
 	// If this element is a list element, skip child element processing
-	if (hasForDirective) return
+	if (hasForDirective) {
+		return
+	}
 
 	// Recursively process all child elements
-	for (const child of Array.from(element.children))
+	for (const child of Array.from(element.children)) {
 		processElementWithItemContext(child, itemContext, context)
 	}
+}
 
 // Handle list rendering (%for macro)
 function setupListRendering(
@@ -643,22 +661,27 @@ function setupListRendering(
 		}
 
 		// Detach all currently rendered DOM items
-		for (const item of renderedItems)
+		for (const item of renderedItems) {
-			if (item.element.parentNode === parentNode)
+			if (item.element.parentNode === parentNode) {
 				parentNode.removeChild(item.element)
+			}
+		}
 
 		// Get key attribute if available
 		const keyAttr = template.getAttribute('%key')
-		if (!keyAttr)
+		if (!keyAttr) {
 			console.warn(
 				'%key attribute not found in the template, which is not a recommended practice.',
 			)
+		}
 
 		// Store a map of existing items by key for reuse
 		const existingElementsByKey = new Map()
-		for (const item of renderedItems)
+		for (const item of renderedItems) {
-			if (item.key !== undefined) existingElementsByKey.set(item.key, item)
+			if (item.key !== undefined) {
-
+				existingElementsByKey.set(item.key, item)
+			}
+		}
 		// Clear rendered items
 		renderedItems.length = 0
 
@@ -704,7 +727,9 @@ function setupListRendering(
 			const itemContext = {
 				[itemVar]: item,
 			}
-			if (indexVar) itemContext[indexVar] = index
+			if (indexVar) {
+				itemContext[indexVar] = index
+			}
 
 			// insert %key attribute
 			if (keyAttr) {
@@ -730,17 +755,20 @@ function setupListRendering(
 		placeholder.parentNode?.insertBefore(fragment, placeholder.nextSibling)
 
 		// Remove any remaining unused items
-		for (const item of existingElementsByKey.values())
+		for (const item of existingElementsByKey.values()) {
-			if (item.element.parentNode)
+			if (item.element.parentNode) {
 				item.element.parentNode.removeChild(item.element)
 			}
+		}
+	}
 
 	// Initial render
 	updateList()
 
 	// Set up state dependency for collection changes
-	if (!context.stateToElementsMap[collectionExpr])
+	if (!context.stateToElementsMap[collectionExpr]) {
 		context.stateToElementsMap[collectionExpr] = new Set()
+	}
 
 	// Using a unique identifier for this list rendering instance
 	const listVirtualElement = document.createElement('div')

src/utils/setupArrowFunctionHandler.ts

@@ -24,7 +24,9 @@ export default function setupArrowFunctionHandler(
 				throw new Error(`Invalid arrow function syntax: ${handlerValue}`)
 			}
 			const paramsStr = (() => {
-				if (splitted[0].includes('(')) return splitted[0].trim()
+				if (splitted[0].includes('(')) {
+					return splitted[0].trim()
+				}
 				return `(${splitted[0].trim()})`
 			})()
 			const bodyStr = splitted[1].trim()

src/utils/triggerDomUpdates.ts

@@ -25,8 +25,9 @@ export default function triggerDomUpdates(
 	if (ops.stateToElementsMap[keyPath]) {
 		const updateQueue = new Set<HTMLElement>()
 
-		for (const element of ops.stateToElementsMap[keyPath])
+		for (const element of ops.stateToElementsMap[keyPath]) {
 			updateQueue.add(element)
+		}
 
 		ops.scheduleUpdate(updateQueue)
 	}
@@ -34,18 +35,22 @@ export default function triggerDomUpdates(
 	// Update text bindings that depend on this state
 	if (ops.textBindings) {
 		// this._textBindings.forEach((binding) => {
-		for (const binding of ops.textBindings)
+		for (const binding of ops.textBindings) {
-			if (binding.expr === keyPath || binding.expr.startsWith(`${keyPath}.`))
+			if (binding.expr === keyPath || binding.expr.startsWith(`${keyPath}.`)) {
 				ops.updateTextNode(binding.node, binding.expr, binding.originalContent)
 			}
+		}
+	}
 
 	// Update attribute bindings that depend on this state
 	if (ops.attributeBindings) {
-		for (const binding of ops.attributeBindings)
+		for (const binding of ops.attributeBindings) {
 			if (binding.expr === keyPath || binding.expr.startsWith(`${keyPath}.`)) {
 				const value = ops.getNestedState(binding.expr)
-				if (value !== undefined)
+				if (value !== undefined) {
 					binding.element.setAttribute(binding.attrName, String(value))
 				}
 			}
 		}
+	}
+}