Skip to content

Conversation

rodja
Copy link
Member

@rodja rodja commented Oct 14, 2025

Motivation

Writing demos for Single Page Applications (SPAs) with ui.sub_pages has been cumbersome and unnatural. Demo code doesn't match what users should actually write in their own applications:

  1. Unnatural code patterns: Demo code used FakeSubPages and manual workarounds (sub_pages.link(), FakeArguments, etc.) instead of the clean, straightforward API (ui.link(), ui.sub_pages())
  2. Quite some code duplications which makes it hard to find areas where the rendered demo didn't match what users should write

Implementation

This PR introduces an automatic code transformation system that allows demo authors to write natural, idiomatic NiceGUI code while still supporting browser-based demo execution:

  1. New transformation infrastructure (website/documentation/code_extraction.py):
    • Transform ui.sub_pages()FakeSubPages.init(), ui.link()pages.link()
    • Handles nested sub-pages, URL parameters, query strings, and chained methods
    • Uses special # TRANSFORM comments for complex cases (e.g., parameterized routes)
    • test cases covering transformation of sub-pages, nested routes, URL parameters, TRANSFORM hints
  2. Demo execution engine (website/documentation/demo.py):
    • Displays non-transformed code block
    • Executes transformed code with automatic root() function detection
  3. Updated sub-pages documentation (website/documentation/content/sub_pages_documentation.py):
    • All demos now use natural ui.link() and ui.sub_pages() API
    • Removed ~140 lines of workaround code

Progress

  • I chose a meaningful title that completes the sentence: "If applied, this PR will..."
  • The implementation is complete.
    • The transformation itself is AI generated hand I have not yet found the time to clean it up
  • Pytests have been added (or are not necessary).
  • Documentation has been updated.

@rodja rodja added documentation Type/scope: Documentation, examples and website in progress Status: Someone is working on it labels Oct 14, 2025
@rodja
Copy link
Member Author

rodja commented Oct 14, 2025

While I generally like the idea I'm not sure the actual implementation is worth it. I guess it depends on how many ui.sub_pages tests we want to write/maintain.

@evnchn
Copy link
Collaborator

evnchn commented Oct 15, 2025

Prefer not to add code transformation to all of the demos just for ui.sub_page demos because we can't really be certain our new code transformer is the same as the old one if it is not a ui.sub_page demo.

How about we can pass in a transformer: Callable[[str], str] somewhere?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Type/scope: Documentation, examples and website in progress Status: Someone is working on it

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants