Refactor to more idiomatic Jaspr code

[schultek]

This refactors some parts of the code to have more idiomatic Jaspr components and reduce logic in global_scripts.dart.

• Implement a new ComponentRef system that in some capacity works similar to server components (more limited and less elegant, but functionally working). This is to unblock some improvements (some of which are included in this PR) to the interactive components of the website, as we can already start architecting towards server components and write less manual dom logic.
• Change the Dropdown component to accept direct toggle and content components, which simplifies it's implementation. Migrate existing uses of Dropdown.
• Migrate the top TOC (renamed to PageNav) to use the Dropdown component, as well as the new ComponentRefs. Split into separate "site-subheader" and "pagenav" elements. Preparations for Add optional page navigation to top toc dropdown (for FWE) #12715
• Add a new Tooltip component and migrate the glossary tooltips to it using the new ComponentRefs. Can be reused for feat: add a tooltip for each api docs link #12600

[gemini-code-assist]

Summary of Changes

Hello @schultek, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on refactoring several UI elements to align with more idiomatic Jaspr component patterns. The primary goal is to reduce manual DOM manipulation in client-side scripts by introducing a ComponentRef system, a revamped Dropdown component, and a new Tooltip component. These changes streamline the development of interactive elements, making the codebase more modular and easier to maintain, while also laying groundwork for future improvements like server components.

Highlights

• New ComponentRef System: Introduced a ComponentRef system to facilitate passing components between server and client in Jaspr, enabling more idiomatic component architecture and unblocking future interactive features.
• Refactored Dropdown Component: The Dropdown component has been refactored to accept direct toggle and content components, simplifying its implementation and usage across the site.
• New Tooltip Component: A new Tooltip component has been added, providing a standardized way to display interactive tooltips, and replacing previous manual DOM logic.
• Migration of TOC (PageNav): The top Table of Contents (renamed to PageNav) has been migrated to use the new Dropdown component and the ComponentRef system, splitting it into 'site-subheader' and 'pagenav' elements.
• Migration of Glossary Tooltips: Glossary tooltips now utilize the new Tooltip component and ComponentRef system, centralizing their logic and improving maintainability.
• Cleanup of global_scripts.dart: Significant logic related to dropdowns and tooltips has been removed from global_scripts.dart, moving functionality into dedicated Jaspr components and reducing client-side JavaScript.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This is an excellent refactoring that significantly improves the codebase. Moving logic from global_scripts.dart into self-contained Jaspr components like Tooltip and PageNav is a huge win for maintainability and follows best practices for component-based architecture. The new ComponentRef system is a clever solution to work around the current limitations of Jaspr for passing server-rendered components to client components. The updated Dropdown API is also much cleaner and more intuitive. Overall, these changes make the code more idiomatic, robust, and easier to work with. I have one suggestion to improve the Dropdown component's behavior.

[flutter-website-bot]

Visit the preview URL for this PR (updated for commit 8369e3e):

https://flutter-docs-prod--pr12726-feat-cleanup-jaspr-code-zmihxxot.web.app

[parlough]

Thanks for making that fix! Looks great to me :D