Refactor %for macro handling: remove key attribute requirement and streamline list rendering logic

This commit is contained in:
Astrian Zheng 2025-05-15 13:48:02 +10:00
parent 7f818b5324
commit 59e5124c14
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA

View File

@ -308,13 +308,8 @@ export default (options: ComponentOptions) => {
ifDirectivesToProcess.push({ element: currentElementNode, expr }) ifDirectivesToProcess.push({ element: currentElementNode, expr })
else if (macroName === 'for') { else if (macroName === 'for') {
// detect %key="keyName" attribute // detect %key="keyName" attribute
const keyAttr = currentElementNode.getAttribute('%key') this._setupListRendering(currentElementNode, expr)
if (!keyAttr) } else
return console.error(`%for macro requires %key attribute: %for="${expr}"`)
this._setupListRendering(currentElementNode, expr, keyAttr)
} else if (macroName === 'key') // Ignore %key macro, as it is handled in %for
return
else
console.warn(`Unknown macro: %${macroName}`) console.warn(`Unknown macro: %${macroName}`)
}) })
@ -384,8 +379,9 @@ export default (options: ComponentOptions) => {
}) })
} }
// Handle list rendering (%for marco)
// Handle list rendering (%for macro) // Handle list rendering (%for macro)
private _setupListRendering(element: Element, expr: string, keyAttr: string) { private _setupListRendering(element: Element, expr: string) {
// Parse the expression (e.g., "item in items" or "(item, index) in items") // Parse the expression (e.g., "item in items" or "(item, index) in items")
const match = expr.match(/(?:\(([^,]+),\s*([^)]+)\)|([^,\s]+))\s+in\s+(.+)/) const match = expr.match(/(?:\(([^,]+),\s*([^)]+)\)|([^,\s]+))\s+in\s+(.+)/)
if (!match) { if (!match) {
@ -501,10 +497,10 @@ export default (options: ComponentOptions) => {
this._statesListeners[collectionExpr] = () => { this._statesListeners[collectionExpr] = () => {
updateList() updateList()
} }
} }
// Helper method to evaluate key expressions for list items // Helper method to evaluate key expressions for list items
private _evaluateKeyExpression(keyExpr: string, itemData: any, index: number, itemVar: string): any { private _evaluateKeyExpression(keyExpr: string, itemData: any, index: number, itemVar: string): any {
try { try {
// If keyExpr is directly the item property, return it // If keyExpr is directly the item property, return it
if (keyExpr === itemVar) { if (keyExpr === itemVar) {
@ -534,10 +530,10 @@ export default (options: ComponentOptions) => {
console.error(`Error evaluating key expression: ${keyExpr}`, error) console.error(`Error evaluating key expression: ${keyExpr}`, error)
return index // Fallback to index as key return index // Fallback to index as key
} }
} }
// Helper method to apply item context to elements // Helper method to apply item context to elements
private _applyItemContext(element: Element, itemContext: Record<string, any>) { private _applyItemContext(element: Element, itemContext: Record<string, any>) {
// Store the item context on the element // Store the item context on the element
(element as any)._itemContext = itemContext (element as any)._itemContext = itemContext
@ -591,7 +587,7 @@ export default (options: ComponentOptions) => {
// Also handle event handlers and other bindings if needed // Also handle event handlers and other bindings if needed
// This is more complex and would require extending other methods // This is more complex and would require extending other methods
// to be aware of the item context // to be aware of the item context
} }
private _evaluateIfCondition(element: Element, condition: string) { private _evaluateIfCondition(element: Element, condition: string) {
const info = this._conditionalElements.get(element) const info = this._conditionalElements.get(element)