.gitea/workflows/workflow.yaml

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

.github/workflows/workflow.yaml

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

biome.json

@@ -19,22 +19,7 @@
 	"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,7 +14,6 @@
 				"@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",
@@ -1041,22 +1040,6 @@
 				"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,7 +25,6 @@
 		"@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",
@@ -34,10 +33,5 @@
 		"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),
 				},
-				states,
+				options.states,
-				statesListeners,
+				options.statesListeners,
 			)
 
 			// initialize shadow dom
@@ -126,9 +126,7 @@ export default (options: ComponentOptions) => {
 
 		private _scheduleUpdate(elements: Set<HTMLElement>) {
 			requestAnimationFrame(() => {
-				for (const element of elements) {
+				for (const element of elements) this._updateElement(element)
-					this._updateElement(element)
-				}
 			})
 		}
 
@@ -144,9 +142,8 @@ export default (options: ComponentOptions) => {
 				const result = renderFunction()
 
 				// Update DOM
-				if (typeof result === 'string') {
+				if (typeof result === 'string') element.innerHTML = result
-					element.innerHTML = result
+				else if (result instanceof Node) {
-				} else if (result instanceof Node) {
 					element.innerHTML = ''
 					element.appendChild(result)
 				}
@@ -158,25 +155,21 @@ export default (options: ComponentOptions) => {
 
 		private _evaluateIfCondition(element: Element, condition: string) {
 			const info = this._conditionalElements.get(element)
-			if (!info) {
+			if (!info) return
-				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 {
+				else element.parentNode?.removeChild(element)
-					element.parentNode?.removeChild(element)
-				}
 
 				// Update the state
 				info.isPresent = shouldShow
@@ -187,9 +180,8 @@ 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)
@@ -197,11 +189,10 @@ 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)
@@ -241,16 +232,15 @@ 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
 		}
 
@@ -370,9 +360,7 @@ export default (options: ComponentOptions) => {
 			let result = this._states
 
 			for (const part of parts) {
-				if (result === undefined || result === null) {
+				if (result === undefined || result === null) return undefined
-					return undefined
-				}
 				result = (result as { [key: string]: Record<string, unknown> })[part]
 			}
 
@@ -380,15 +368,11 @@ export default (options: ComponentOptions) => {
 		}
 
 		connectedCallback() {
-			if (onMount) {
+			if (onMount) onMount.call(this)
-				onMount.call(this)
-			}
 		}
 
 		disconnectedCallback() {
-			if (onUnmount) {
+			if (onUnmount) onUnmount.call(this)
-				onUnmount.call(this)
-			}
 		}
 
 		static get observedAttributes() {
@@ -400,9 +384,7 @@ export default (options: ComponentOptions) => {
 			oldValue: string,
 			newValue: string,
 		) {
-			if (onAttributeChanged) {
+			if (onAttributeChanged) onAttributeChanged(attrName, oldValue, newValue)
-				onAttributeChanged(attrName, oldValue, newValue)
-			}
 		}
 
 		// state manager
@@ -414,9 +396,7 @@ export default (options: ComponentOptions) => {
 			const parts = keyPath.split('.')
 			let result = this._states
 			for (const part of parts) {
-				if (result === undefined || result === null) {
+				if (result === undefined || result === null) return undefined
-					return undefined
-				}
 				result = (result as { [key: string]: Record<string, unknown> })[part]
 			}
 			return result

src/utils/initState.ts

@@ -49,9 +49,7 @@ export default function initState(
 					if (Number.parseInt(i) === valueRoute.length - 1) {
 						currentTarget[key] = value
 					} else {
-						if (!currentTarget[key]) {
+						if (!currentTarget[key]) currentTarget[key] = {}
-							currentTarget[key] = {}
-						}
 						currentTarget = currentTarget[key] as Record<string, unknown>
 					}
 				}
@@ -64,18 +62,15 @@ 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)
@@ -85,9 +80,8 @@ 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)
 				}
 
@@ -95,13 +89,10 @@ 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]) {
+					if (!currentTarget[key]) currentTarget[key] = {}
-						currentTarget[key] = {}
-					}
 					currentTarget = currentTarget[key] as Record<string, unknown>
 				}
 				return undefined

src/utils/parseTemplate.ts

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

src/utils/processTemplateMarcos.ts

@@ -109,9 +109,8 @@ 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,
@@ -220,14 +219,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 = {
@@ -239,7 +238,8 @@ 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,13 +272,12 @@ 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) => {
@@ -291,11 +290,8 @@ function setupTwoWayBinding(
 
 	// Add event listener for state changes
 	ops.statesListeners[expr] = (newValue: unknown) => {
-		if (element instanceof HTMLInputElement) {
+		if (element instanceof HTMLInputElement) element.value = newValue as string
-			element.value = newValue as string
+		else element.setAttribute('data-laterano-connect', String(newValue))
-		} else {
-			element.setAttribute('data-laterano-connect', String(newValue))
-		}
 	}
 }
 
@@ -326,9 +322,7 @@ function setupConditionRendering(
 
 	const statePaths = ops.extractStatePathsFromExpression(expr)
 	for (const path of statePaths) {
-		if (!ops.stateToElementsMap[path]) {
+		if (!ops.stateToElementsMap[path]) ops.stateToElementsMap[path] = new Set()
-			ops.stateToElementsMap[path] = new Set()
-		}
 		ops.stateToElementsMap[path].add(element as HTMLElement)
 	}
 }
@@ -355,9 +349,7 @@ function evaluateExpressionWithItemContext(
 			let value = itemContext[itemVar]
 
 			for (const part of parts) {
-				if (value === undefined || value === null) {
+				if (value === undefined || value === null) return undefined
-					return undefined
-				}
 				value = (value as { [key: string]: unknown })[part]
 			}
 
@@ -469,7 +461,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,
@@ -484,11 +476,8 @@ 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) {
+		if (node.nodeType === Node.TEXT_NODE) processTextNodes(node)
-			processTextNodes(node)
-		}
-	}
 
 	// Process attribute bindings (:attr)
 	for (const attr of Array.from(element.attributes)) {
@@ -501,9 +490,7 @@ function processElementWithItemContext(
 				context,
 			)
 
-			if (value !== undefined) {
+			if (value !== undefined) element.setAttribute(attrName, String(value))
-				element.setAttribute(attrName, String(value))
-			}
 
 			// Remove the original binding attribute
 			element.removeAttribute(attr.name)
@@ -568,9 +555,7 @@ function processElementWithItemContext(
 			shouldDisplay = Boolean(result)
 
 			// Apply the condition
-			if (!shouldDisplay) {
+			if (!shouldDisplay) (element as HTMLElement).style.display = 'none'
-				;(element as HTMLElement).style.display = 'none'
-			}
 		}
 	}
 
@@ -596,14 +581,11 @@ function processElementWithItemContext(
 	}
 
 	// If this element is a list element, skip child element processing
-	if (hasForDirective) {
+	if (hasForDirective) return
-		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)
@@ -661,27 +643,22 @@ 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) {
+			if (item.key !== undefined) existingElementsByKey.set(item.key, item)
-				existingElementsByKey.set(item.key, item)
+
-			}
-		}
 		// Clear rendered items
 		renderedItems.length = 0
 
@@ -727,9 +704,7 @@ function setupListRendering(
 			const itemContext = {
 				[itemVar]: item,
 			}
-			if (indexVar) {
+			if (indexVar) itemContext[indexVar] = index
-				itemContext[indexVar] = index
-			}
 
 			// insert %key attribute
 			if (keyAttr) {
@@ -755,20 +730,17 @@ 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,9 +24,7 @@ export default function setupArrowFunctionHandler(
 				throw new Error(`Invalid arrow function syntax: ${handlerValue}`)
 			}
 			const paramsStr = (() => {
-				if (splitted[0].includes('(')) {
+				if (splitted[0].includes('(')) return splitted[0].trim()
-					return splitted[0].trim()
-				}
 				return `(${splitted[0].trim()})`
 			})()
 			const bodyStr = splitted[1].trim()

src/utils/triggerDomUpdates.ts

@@ -25,9 +25,8 @@ 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)
 	}
@@ -35,22 +34,18 @@ 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))
 			}
 	}
-		}
-	}
 }