Refactor sidebar to use reactive Var operations instead of Python conditionals#6528
Draft
masenf wants to merge 1 commit into
Draft
Refactor sidebar to use reactive Var operations instead of Python conditionals#6528masenf wants to merge 1 commit into
masenf wants to merge 1 commit into
Conversation
Convert sidebar_comp into an experimental memo component so the rendered sidebar tree compiles to a single React component shared across every docpage. The route-specific url and per-section indices are now passed as runtime props, and the per-page JSX no longer re-inlines the entire sidebar. - Decorate sidebar_comp with @rx._x.memo; type all parameters as rx.Var subclasses (StringVar / ArrayVar) so the memo system can build placeholders and emit JSX with Var operations. - Update helpers (sidebar_leaf_guide, sidebar_leaf, sidebar_item_comp, sidebar_category, create_sidebar_section) to accept Var-typed url and index parameters. - Replace Python conditionals on Var-derived expressions with rx.cond. - Convert index handling (bool(index), index[1:] if open else []) to Var operations (index.length(), rx.cond(is_open, index[1:], []).to(...)). - Express startswith / contains URL checks via StringVar.startswith / StringVar.contains chained with Var __or__ / __and__ / __invert__. - Drop the unused cli_ref_index and width parameters from sidebar_comp; sidebar() still accepts width for callers but no longer threads it through. normalize_url stays in the outer sidebar() since it relies on Python string ops not expressible as Var operations. https://claude.ai/code/session_013mppZsm9QZVz6DTPYokXR2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Type of change
Description
This PR refactors the sidebar component to use Reflex's reactive
Varoperations instead of Python-level conditionals, enabling better runtime reactivity and compilation to optimized React code.Key changes:
Type annotations: Updated function signatures to use
rx.vars.StringVar[str],rx.vars.ArrayVar[list[int]], andrx.Var[bool]for reactive parameters instead of plain Python types.Reactive conditionals: Replaced Python
if/elseexpressions withrx.cond()for dynamic UI rendering:sidebar_leaf_guide(): Now usesrx.cond()for conditional renderingsidebar_leaf(): Converted all conditional styling torx.cond()callssidebar_category(): Usesrx.cond()for active state stylingsidebar_comp(): Replaced complex nested Python conditionals with reactiverx.cond()chainsReactive comparisons: Updated logic to use Var operations:
is_opencalculation now usesindex.length() > 0and bitwise&operator.startswith()and.contains()methods on Var objectsMemoization: Added
@rx._x.memodecorator tosidebar_comp()to compile the reactive tree into a single optimized React component that receives runtime props.Separation of concerns: The
sidebar()wrapper function remains a regular Python function that handles non-reactive operations (URL normalization, index calculation), whilesidebar_comp()handles all reactive rendering logic.Removed unused imports: Removed
cli_reffrom imports as it's no longer used.Documentation: Added comprehensive docstrings explaining the memoization strategy and the division between reactive and non-reactive logic.
Motivation
This refactoring enables the sidebar to respond to runtime URL and index changes without re-executing Python code, resulting in better performance and more idiomatic Reflex patterns. The memoized component compiles to a single React component that receives these values as props, rather than recalculating the entire tree on each change.
Testing
Existing sidebar functionality is preserved. The changes are internal refactoring to use reactive patterns rather than Python conditionals. All sidebar rendering behavior remains identical from the user's perspective.
https://claude.ai/code/session_013mppZsm9QZVz6DTPYokXR2