Refactor %for macro handling: remove key attribute requirement and streamline list rendering logic
This commit is contained in:
parent
7f818b5324
commit
59e5124c14
26
src/main.ts
26
src/main.ts
|
@ -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)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user