fix: attribute reflection fixes#184
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughNative invoker target handling now uses element-based properties with attribute reflection, updated interest and popover controller resolution, lint support for property bindings, revised Lighthouse payload thresholds, and supporting example and metadata updates. ChangesNative invoker target resolution
Benchmark and supporting updates
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant ButtonFormControlMixin
participant TypeInterestInvokerController
participant TypePopoverTriggerController
participant PopoverTargetElement
ButtonFormControlMixin->>TypeInterestInvokerController: expose target attributes and properties
TypeInterestInvokerController->>PopoverTargetElement: resolve inferred target
TypeInterestInvokerController->>PopoverTargetElement: dispatch interest or loseinterest
ButtonFormControlMixin->>TypePopoverTriggerController: provide popovertarget attribute
TypePopoverTriggerController->>PopoverTargetElement: resolve and toggle popover
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/forms/src/mixins/button.ts`:
- Around line 393-400: Make button.ts#getElementById the canonical ID-resolution
helper and extend it to support the flattened-tree cases currently handled by
controller fallbacks. In
projects/forms/src/internal/controllers/type-interest-invoker.controller.ts
lines 93-105, type-popover-trigger.controller.ts lines 46-53, and
type-command.controller.ts lines 69-80, remove the getFlattenedDOMTree scans and
reuse the shared helper for their target lookups, preserving constant-time
resolution and consistent public/controller behavior.
- Around line 375-391: Add a concise comment in `#setElementTarget` next to the
setAttributeValue call documenting that its attributeChangedCallback runs
synchronously and clears the cached target before the following statement
restores it. Do not change the existing cache-update behavior in
`#handleElementTargetAttributeChange` or `#getElementTarget`.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: cc794496-b644-4599-aadf-acccd18c80fb
📒 Files selected for processing (11)
projects/core/src/internal/button-form-control-usage.test.tsprojects/forms/src/internal/controllers/type-command.controller.tsprojects/forms/src/internal/controllers/type-interest-invoker.controller.test.tsprojects/forms/src/internal/controllers/type-interest-invoker.controller.tsprojects/forms/src/internal/controllers/type-popover-trigger.controller.test.tsprojects/forms/src/internal/controllers/type-popover-trigger.controller.tsprojects/forms/src/mixins/button.test.tsprojects/forms/src/mixins/button.tsprojects/forms/src/mixins/button.types.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.test.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.ts
143e4de to
71e539b
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/forms/src/mixins/button.ts`:
- Around line 403-410: Update `#setElementTarget` to return immediately when the
current target property value equals the incoming value, before calling
setAttributeValue, `#requestHostUpdate`, or `#queueBehaviorSync`. Preserve the
existing update and synchronization flow for changed element references.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: c76ba28a-8036-4f31-9705-c0012f849b55
📒 Files selected for processing (10)
projects/core/src/internal/button-form-control-usage.test.tsprojects/forms/src/internal/controllers/type-interest-invoker.controller.test.tsprojects/forms/src/internal/controllers/type-interest-invoker.controller.tsprojects/forms/src/internal/controllers/type-popover-trigger.controller.test.tsprojects/forms/src/internal/controllers/type-popover-trigger.controller.tsprojects/forms/src/mixins/button.test.tsprojects/forms/src/mixins/button.tsprojects/forms/src/mixins/button.types.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.test.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.ts
71e539b to
55a888c
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
projects/forms/src/mixins/button.ts (2)
376-392: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winCorrectness depends on synchronous
attributeChangedCallback; still undocumented.
#handleElementTargetAttributeChangenulls the cache on every attribute change, including the synthetic one from#setElementTarget's ownsetAttributeValuecall — correctness relies on that callback firing synchronously so the cache is restored on the very next line. This was flagged previously and still holds with no comment added.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@projects/forms/src/mixins/button.ts` around lines 376 - 392, Document the synchronous attribute-change callback requirement in the element-target update flow, specifically around `#handleElementTargetAttributeChange` and `#setElementTarget`’s setAttributeValue call. Explain that the cache must be restored immediately after the synthetic callback invalidates it, and preserve the existing behavior that depends on synchronous callback execution.
398-405: 🚀 Performance & Scalability | 🟠 Major | ⚡ Quick winMissing no-op guard still allows redundant target reassignment to trigger renders/behavior sync.
#setElementTargetunconditionally callssetAttributeValue,#requestHostUpdate, and#queueBehaviorSynceven whenvalue === oldValue, unlike#setBooleanState/#setStringStatewhich both guard against this. Since these are now framework-bindable properties, a binding re-assigning the same element reference every change-detection cycle repeatedly triggers unnecessary work.⚡ Proposed fix
`#setElementTarget`(attribute: ElementTargetAttribute, value: HTMLElement | null) { const property = ELEMENT_TARGET_PROPERTIES[attribute]; const oldValue = this[property]; + if (oldValue === value) { + return; + } setAttributeValue(this, attribute, value ? '' : null); this.#elementTargets[property] = value; this.#requestHostUpdate(property, oldValue); this.#queueBehaviorSync(); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@projects/forms/src/mixins/button.ts` around lines 398 - 405, Update `#setElementTarget` to return immediately when the incoming value equals the current target value, before calling setAttributeValue, `#requestHostUpdate`, or `#queueBehaviorSync`. Preserve the existing update and synchronization flow when the target reference actually changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/forms/src/mixins/button.ts`:
- Around line 394-396: Extract the duplicated flattened-DOM ID resolution into a
shared exported helper, such as resolveElementById(root, id), alongside
getFlattenedDOMTree and setAttributeValue in
projects/forms/src/internal/utils.ts; update projects/forms/src/mixins/button.ts
lines 394-396 to use or define this canonical helper, replace `#getElementById` in
projects/forms/src/internal/controllers/type-interest-invoker.controller.ts
lines 103-105 with it, and replace the inline lookup in
projects/forms/src/internal/controllers/type-popover-trigger.controller.ts lines
51-54 with it. Preserve null results for missing or null IDs.
---
Duplicate comments:
In `@projects/forms/src/mixins/button.ts`:
- Around line 376-392: Document the synchronous attribute-change callback
requirement in the element-target update flow, specifically around
`#handleElementTargetAttributeChange` and `#setElementTarget`’s setAttributeValue
call. Explain that the cache must be restored immediately after the synthetic
callback invalidates it, and preserve the existing behavior that depends on
synchronous callback execution.
- Around line 398-405: Update `#setElementTarget` to return immediately when the
incoming value equals the current target value, before calling
setAttributeValue, `#requestHostUpdate`, or `#queueBehaviorSync`. Preserve the
existing update and synchronization flow when the target reference actually
changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 7f45af0d-837d-444c-b0f5-77e743c0d902
📒 Files selected for processing (38)
projects/core/src/accordion/accordion.test.lighthouse.tsprojects/core/src/alert/alert.test.lighthouse.tsprojects/core/src/button/button.test.lighthouse.tsprojects/core/src/chat-message/chat-message.test.lighthouse.tsprojects/core/src/color/color.test.lighthouse.tsprojects/core/src/combobox/combobox.test.lighthouse.tsprojects/core/src/copy-button/copy-button.test.lighthouse.tsprojects/core/src/datetime/datetime.test.lighthouse.tsprojects/core/src/dialog/dialog.test.lighthouse.tsprojects/core/src/dropdown-group/dropdown-group.test.lighthouse.tsprojects/core/src/icon-button/icon-button.test.lighthouse.tsprojects/core/src/index.test.lighthouse.tsprojects/core/src/internal/button-form-control-usage.test.tsprojects/core/src/menu/menu.test.lighthouse.tsprojects/core/src/month/month.test.lighthouse.tsprojects/core/src/notification/notification.test.lighthouse.tsprojects/core/src/pagination/pagination.test.lighthouse.tsprojects/core/src/panel/panel.test.lighthouse.tsprojects/core/src/password/password.test.lighthouse.tsprojects/core/src/preferences-input/preferences-input.test.lighthouse.tsprojects/core/src/search/search.test.lighthouse.tsprojects/core/src/select/select.test.lighthouse.tsprojects/core/src/sort-button/sort-button.test.lighthouse.tsprojects/core/src/steps/steps.test.lighthouse.tsprojects/core/src/tag/tag.test.lighthouse.tsprojects/core/src/time/time.test.lighthouse.tsprojects/core/src/toast/toast.test.lighthouse.tsprojects/core/src/tree/tree.test.lighthouse.tsprojects/core/src/week/week.test.lighthouse.tsprojects/forms/src/internal/controllers/type-interest-invoker.controller.test.tsprojects/forms/src/internal/controllers/type-interest-invoker.controller.tsprojects/forms/src/internal/controllers/type-popover-trigger.controller.test.tsprojects/forms/src/internal/controllers/type-popover-trigger.controller.tsprojects/forms/src/mixins/button.test.tsprojects/forms/src/mixins/button.tsprojects/forms/src/mixins/button.types.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.test.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.ts
55a888c to
35c78e2
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/core/src/accordion/accordion.test.lighthouse.ts`:
- Line 26: Verify every relaxed Lighthouse payload budget against the measured
post-change output and document a minimal margin before retaining the new
threshold: accordion 22.9 KB at
projects/core/src/accordion/accordion.test.lighthouse.ts:26; alert 23.6 KB at
projects/core/src/alert/alert.test.lighthouse.ts:19 and :36; button 14.4 KB at
projects/core/src/button/button.test.lighthouse.ts:21; chat-message 14.4 KB at
projects/core/src/chat-message/chat-message.test.lighthouse.ts:19 after
correcting its fixture import; select 34.9 KB at
projects/core/src/select/select.test.lighthouse.ts:26; sort-button 19.1 KB at
projects/core/src/sort-button/sort-button.test.lighthouse.ts:19; steps 24 KB at
projects/core/src/steps/steps.test.lighthouse.ts:23; tag 18.9 KB at
projects/core/src/tag/tag.test.lighthouse.ts:19; time 25.6 KB at
projects/core/src/time/time.test.lighthouse.ts:22; toast 25 KB at
projects/core/src/toast/toast.test.lighthouse.ts:20; tree 30 KB at
projects/core/src/tree/tree.test.lighthouse.ts:30; and week 25.9 KB at
projects/core/src/week/week.test.lighthouse.ts:22. Adjust any threshold that
lacks measured-output support or an explicitly documented minimal margin.
In `@projects/internals/patterns/src/dashboard.examples.ts`:
- Around line 333-336: Update the JSDoc summary for the multi-route dashboard
example to remove the claim that tab views synchronize with the URL, and
describe them as stateful local tabs instead. Keep the existing navigation and
resource-management description accurate without implementing routing changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 8def9d97-dffc-407d-a8fd-351c6947bada
⛔ Files ignored due to path filters (1)
projects/core/.visual/tabs-group.layout-end.pngis excluded by!**/*.png
📒 Files selected for processing (36)
projects/cli/src/mcp/ui/index.tsprojects/core/src/accordion/accordion.test.lighthouse.tsprojects/core/src/alert/alert.test.lighthouse.tsprojects/core/src/button/button.test.lighthouse.tsprojects/core/src/chat-message/chat-message.test.lighthouse.tsprojects/core/src/color/color.test.lighthouse.tsprojects/core/src/combobox/combobox.test.lighthouse.tsprojects/core/src/copy-button/copy-button.test.lighthouse.tsprojects/core/src/datetime/datetime.test.lighthouse.tsprojects/core/src/dialog/dialog.test.lighthouse.tsprojects/core/src/dropdown-group/dropdown-group.test.lighthouse.tsprojects/core/src/icon-button/icon-button.test.lighthouse.tsprojects/core/src/index.test.lighthouse.tsprojects/core/src/menu/menu.test.lighthouse.tsprojects/core/src/month/month.test.lighthouse.tsprojects/core/src/notification/notification.test.lighthouse.tsprojects/core/src/pagination/pagination.test.lighthouse.tsprojects/core/src/panel/panel.test.lighthouse.tsprojects/core/src/password/password.test.lighthouse.tsprojects/core/src/preferences-input/preferences-input.test.lighthouse.tsprojects/core/src/search/search.test.lighthouse.tsprojects/core/src/select/select.test.lighthouse.tsprojects/core/src/sort-button/sort-button.test.lighthouse.tsprojects/core/src/steps/steps.test.lighthouse.tsprojects/core/src/tabs/tabs-group.cssprojects/core/src/tag/tag.test.lighthouse.tsprojects/core/src/time/time.test.lighthouse.tsprojects/core/src/toast/toast.test.lighthouse.tsprojects/core/src/tree/tree.test.lighthouse.tsprojects/core/src/week/week.test.lighthouse.tsprojects/internals/patterns/src/dashboard.examples.tsprojects/internals/tools/src/api/utils.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.test.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.tsprojects/site/src/docs/skills/index.mdprojects/styles/build/metadata.js
35c78e2 to
4ab90ba
Compare
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
projects/core/src/chat-message/chat-message.test.lighthouse.ts (1)
7-19:⚠️ Potential issue | 🟠 MajorLoad the chat-message definition in this benchmark.
This test renders
nve-chat-messagebut imports the button definition, so the element remains unregistered and the 14.4 KB assertion measures the wrong payload. Import@nvidia-elements/core/chat-message/define.jsand rename the test description before validating this threshold.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@projects/core/src/chat-message/chat-message.test.lighthouse.ts` around lines 7 - 19, Update the “button lighthouse report” test to describe the chat-message benchmark, and change the module import in its lighthouse HTML from `@nvidia-elements/core/button/define.js` to `@nvidia-elements/core/chat-message/define.js` before validating the existing performance, accessibility, best-practices, and payload thresholds.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@projects/core/src/chat-message/chat-message.test.lighthouse.ts`:
- Around line 7-19: Update the “button lighthouse report” test to describe the
chat-message benchmark, and change the module import in its lighthouse HTML from
`@nvidia-elements/core/button/define.js` to
`@nvidia-elements/core/chat-message/define.js` before validating the existing
performance, accessibility, best-practices, and payload thresholds.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 8dd0c768-7659-4a9d-a440-e644aa5149e2
⛔ Files ignored due to path filters (1)
projects/core/.visual/tabs-group.layout-end.pngis excluded by!**/*.png
📒 Files selected for processing (44)
projects/cli/src/mcp/ui/index.tsprojects/core/src/accordion/accordion.test.lighthouse.tsprojects/core/src/alert/alert.test.lighthouse.tsprojects/core/src/button/button.test.lighthouse.tsprojects/core/src/chat-message/chat-message.test.lighthouse.tsprojects/core/src/color/color.test.lighthouse.tsprojects/core/src/combobox/combobox.test.lighthouse.tsprojects/core/src/copy-button/copy-button.test.lighthouse.tsprojects/core/src/datetime/datetime.test.lighthouse.tsprojects/core/src/dialog/dialog.test.lighthouse.tsprojects/core/src/dropdown-group/dropdown-group.test.lighthouse.tsprojects/core/src/icon-button/icon-button.test.lighthouse.tsprojects/core/src/index.test.lighthouse.tsprojects/core/src/internal/button-form-control-usage.test.tsprojects/core/src/menu/menu.test.lighthouse.tsprojects/core/src/month/month.test.lighthouse.tsprojects/core/src/notification/notification.test.lighthouse.tsprojects/core/src/pagination/pagination.test.lighthouse.tsprojects/core/src/panel/panel.test.lighthouse.tsprojects/core/src/password/password.test.lighthouse.tsprojects/core/src/preferences-input/preferences-input.test.lighthouse.tsprojects/core/src/search/search.test.lighthouse.tsprojects/core/src/select/select.test.lighthouse.tsprojects/core/src/sort-button/sort-button.test.lighthouse.tsprojects/core/src/steps/steps.test.lighthouse.tsprojects/core/src/tabs/tabs-group.cssprojects/core/src/tag/tag.test.lighthouse.tsprojects/core/src/time/time.test.lighthouse.tsprojects/core/src/toast/toast.test.lighthouse.tsprojects/core/src/tree/tree.test.lighthouse.tsprojects/core/src/week/week.test.lighthouse.tsprojects/forms/src/internal/controllers/type-interest-invoker.controller.test.tsprojects/forms/src/internal/controllers/type-interest-invoker.controller.tsprojects/forms/src/internal/controllers/type-popover-trigger.controller.test.tsprojects/forms/src/internal/controllers/type-popover-trigger.controller.tsprojects/forms/src/mixins/button.test.tsprojects/forms/src/mixins/button.tsprojects/forms/src/mixins/button.types.tsprojects/internals/patterns/src/dashboard.examples.tsprojects/internals/tools/src/api/utils.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.test.tsprojects/lint/src/eslint/rules/no-missing-popover-trigger.tsprojects/site/src/docs/skills/index.mdprojects/styles/build/metadata.js
- Changed `HTMLElement` to `Element` for `commandForElement`, `interestForElement`, and `popoverTargetElement` in various controllers and mixins to enhance type flexibility. - Added new tests to verify behavior when `popovertarget` changes in `InterestInvokerController`. - Updated tests in `PopoverTriggerController` and `ButtonFormControlMixin` to reflect changes in element type handling. Signed-off-by: Cory Rylan <crylan@nvidia.com>
… types Signed-off-by: Cory Rylan <crylan@nvidia.com>
- fixes issue where tab group collapsed with missing width Signed-off-by: Cory Rylan <crylan@nvidia.com>
4ab90ba to
a50edba
Compare
…ver triggers - Improved the `hasDataBinding` function for better readability and efficiency. - Refactored the way attributes are checked for Angular and Lit property bindings. - Updated test cases to reflect changes in property names for `popoverTargetElement`, `commandForElement`, and `interestForElement`. Signed-off-by: Cory Rylan <crylan@nvidia.com>
Signed-off-by: Cory Rylan <crylan@nvidia.com>
Signed-off-by: Cory Rylan <crylan@nvidia.com>
a50edba to
ed970ea
Compare
|
🎉 This issue has been resolved in version 2.0.4 🎉 |
|
🎉 This issue has been resolved in version 2.1.4 🎉 |
|
🎉 This issue has been resolved in version 2.1.2 🎉 |
|
🎉 This issue has been resolved in version 2.1.6 🎉 |
Summary by CodeRabbit
interest/loseinterestdispatch updates automatically when the popover target changes, including proper handling of explicitinterestForElement.popoverTargetElement,commandForElement, andinterestForElement.popovertarget,commandfor, andinterestfor(use the element-based counterparts).nve-layout/nve-textattribute description wording;tabshost now spans full width.