Add conditional control-flow blocks in DevTools#69676
Conversation
Carry conditional block metadata through template lowering and emit the debug instruction that records it in generated views. This keeps the original expressions for if and switch branches so runtime inspection can report the declared control-flow structure.
Record development-mode metadata for conditional control-flow blocks so debugging APIs can describe `@if` and `@switch` views. This gives DevTools the context it needs to show which branch is active and where each condition came from, while keeping the data limited to development-time inspection.
| @@ -0,0 +1,122 @@ | |||
| <section class="control-flow-cases" aria-label="Control flow validation cases"> | |||
There was a problem hiding this comment.
I'm wondering if this is the right place for it, or if we should create a different route for these cases and perhaps make it more interactive, or is it okay as is?
|
|
||
| export function guardedExpression(guard: string, expr: o.Expression): o.Expression { | ||
| const guardExpr = new o.ExternalExpr({name: guard, moduleName: null}); | ||
| const guardExpr = o.variable(guard); |
There was a problem hiding this comment.
I had to update this because in case of JIT were failing. I'm not sure if this is correct or if I'm missing something.
Surface conditional control-flow blocks in Angular DevTools alongside the existing `@defer` and `@for` blocks. The directive tree now labels active branches and cases, and the property pane shows the declared blocks, rendered state, and source expressions from the runtime metadata.
e66e977 to
f4e073e
Compare
|
@SkyZeroZx, thank you for the contribution, but we are already actively working on this feature and plan to ship an experimental version probably in the upcoming weeks. |
|
Actually, I think that your approach with the tree shakable Anyway, I'll let someone from the FW team verify if we are okay with this addition to Ivy to begin with, and then I can leave my review on the rest of the code. |
refactor(compiler): collect metadata for conditional blocks
Carry conditional block metadata through template lowering and emit the debug instruction that records it in generated views.
This keeps the original expressions for if and switch branches so runtime inspection can report the declared control-flow structure.
feat(core): expose metadata for conditional blocks
Record development-mode metadata for conditional control-flow blocks so debugging APIs can describe
@ifand@switchviews.This gives DevTools the context it needs to show which branch is active and where each condition came from, while keeping the data limited to development-time inspection.
feat(devtools): show conditional control-flow blocks
Surface conditional control-flow blocks in Angular DevTools alongside the existing
@deferand@forblocks.The directive tree now labels active branches and cases, and the property pane shows the declared blocks, rendered state, and source expressions from the runtime metadata.
This would align with what was commented at #65849 (comment)
devtools.mp4