Skip to content

refactor(sidebar-filter): migrate to ReactiveElement with typed igc API#90

Open
viktorkombov wants to merge 12 commits into
masterfrom
vkombov/refactor-sidebar-filter
Open

refactor(sidebar-filter): migrate to ReactiveElement with typed igc API#90
viktorkombov wants to merge 12 commits into
masterfrom
vkombov/refactor-sidebar-filter

Conversation

@viktorkombov

Copy link
Copy Markdown
Collaborator

Summary

  • HTMLElementReactiveElement: lifecycle callbacks without a render cycle; createRenderRoot() returns this to keep children in light DOM.
  • Proper igc types: replace ad-hoc cast types (ExpandableEl, FilterInputEl, etc.) with IgcInputComponent, IgcIconButtonComponent, IgcTreeItemComponent from igniteui-webcomponents.
  • igc API usage: setExpandedState sets el.expanded directly on items instead of calling igcTree.expand(items) (no-op before the tree's slot registry is ready); ensureActiveAncestorsExpanded and collectAncestors use IgcTreeItemComponent.path; collectGroupDescendants uses getChildren({ flatten: true }).
  • registerPageHooks() guard: global module-level document.addEventListener calls wrapped in a lazy _pageHooksRegistered guard — safe for multiple instances, clear intent.
  • parseKeys/serializeKeys helpers: consolidate repeated split('\n').filter(Boolean) and [...keys].join('\n') patterns into two module-level functions.
  • AbortController with { signal } for all event listener cleanup in disconnectedCallback.

@viktorkombov
viktorkombov requested a review from rkaraivanov June 17, 2026 12:59
@viktorkombov viktorkombov added the ❌ status: awaiting-test PRs awaiting manual verification label Jun 17, 2026
Base automatically changed from vkombov/docs-toc-improvements to master June 18, 2026 13:42
Comment thread src/components/DocsSidebar/sidebar-filter.ts Outdated
Comment thread src/components/DocsSidebar/sidebar-filter.ts Outdated
Comment thread src/components/DocsSidebar/sidebar-filter.ts
Switch the <sidebar-filter> element from ReactiveElement to LitElement and
adopt Lit's query decorators, per PR review.

- Extend LitElement instead of ReactiveElement: the default render() returns
  noChange and createRenderRoot() returns `this`, so Astro's SSR light-DOM
  children are left untouched.
- Replace the manual querySelector fields and their connectedCallback
  assignments with @query/@QueryAll decorators, matching the declaration
  style used in igniteui-webcomponents (experimental decorators, cache flag
  on stable single-element queries).
- Enable experimentalDecorators and disable useDefineForClassFields in
  tsconfig so the decorator accessors aren't shadowed by instance fields.
- Route the astro:page-load listener through the AbortController signal so
  every connectedCallback listener is cleaned up in disconnectedCallback.
@ChronosSF ChronosSF assigned ChronosSF and unassigned Zneeky Jul 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

❌ status: awaiting-test PRs awaiting manual verification

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants