Enhance condition rendering: trigger updates for %if macros and improve setup logic
This commit is contained in:
parent
723110efab
commit
4a7737c74f
17
src/main.ts
17
src/main.ts
|
@ -57,10 +57,16 @@ export default (options: ComponentOptions) => {
|
||||||
if (this._statesListeners[keyPath])
|
if (this._statesListeners[keyPath])
|
||||||
this._statesListeners[keyPath](value)
|
this._statesListeners[keyPath](value)
|
||||||
|
|
||||||
|
// trigger %if macros
|
||||||
|
if (this._conditionalElements.size > 0)
|
||||||
|
this._conditionalElements.forEach((info, element) => {
|
||||||
|
if (info.expr.includes(keyPath))
|
||||||
|
this._evaluateIfCondition(element, info.expr)
|
||||||
|
})
|
||||||
|
|
||||||
// trigger state update events
|
// trigger state update events
|
||||||
if (statesListeners && statesListeners[keyPath]) {
|
if (statesListeners && statesListeners[keyPath])
|
||||||
statesListeners[keyPath](value)
|
statesListeners[keyPath](value)
|
||||||
}
|
|
||||||
|
|
||||||
return true
|
return true
|
||||||
},
|
},
|
||||||
|
@ -345,7 +351,6 @@ export default (options: ComponentOptions) => {
|
||||||
|
|
||||||
// Handle condition rendering (%if marco)
|
// Handle condition rendering (%if marco)
|
||||||
private _setupConditionRendering(element: Element, expr: string) {
|
private _setupConditionRendering(element: Element, expr: string) {
|
||||||
console.log("setting up condition rendering for", expr)
|
|
||||||
|
|
||||||
const placeholder = document.createComment(` %if: ${expr} `)
|
const placeholder = document.createComment(` %if: ${expr} `)
|
||||||
element.parentNode?.insertBefore(placeholder, element)
|
element.parentNode?.insertBefore(placeholder, element)
|
||||||
|
@ -353,7 +358,7 @@ export default (options: ComponentOptions) => {
|
||||||
this._conditionalElements.set(element, {
|
this._conditionalElements.set(element, {
|
||||||
expr,
|
expr,
|
||||||
placeholder,
|
placeholder,
|
||||||
isPresent: false
|
isPresent: true
|
||||||
})
|
})
|
||||||
|
|
||||||
this._evaluateIfCondition(element, expr)
|
this._evaluateIfCondition(element, expr)
|
||||||
|
@ -374,10 +379,6 @@ export default (options: ComponentOptions) => {
|
||||||
// Evaluate the condition
|
// Evaluate the condition
|
||||||
const result = this._evaluateExpression(condition)
|
const result = this._evaluateExpression(condition)
|
||||||
const shouldShow = Boolean(result)
|
const shouldShow = Boolean(result)
|
||||||
if (shouldShow) console.log(`Condition "${condition}" is true, showing element.`)
|
|
||||||
else console.log(`Condition "${condition}" is false, hiding element.`)
|
|
||||||
|
|
||||||
if (info.isPresent)
|
|
||||||
|
|
||||||
if (shouldShow !== info.isPresent) {
|
if (shouldShow !== info.isPresent) {
|
||||||
if (shouldShow) // Insert the element back into the DOM
|
if (shouldShow) // Insert the element back into the DOM
|
||||||
|
|
Loading…
Reference in New Issue
Block a user