Visitar URL original
[2/3] Interactive Compose previews: enable component snippets by riggaroo · Pull Request #1191 · android/snippets · GitHub
Skip to content

[2/3] Interactive Compose previews: enable component snippets - #1191

Merged
riggaroo merged 4 commits into
mainfrom
interactive-previews-2-all-snippets
Oct 30, 2026
Merged

riggaroo merged 4 commits into
mainfrom
interactive-previews-2-all-snippets

Conversation

@riggaroo

@riggaroo riggaroo commented Oct 16, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Enables interactive previews for the Compose component snippets (52 more, 57 in total), on top of the Button-only infrastructure in #1190. The date and time pickers follow in #1193 because they need kotlinx-datetime.

compose/snippets

  • Replace material-icons-extended usages in the component snippets with a small AppIcons set, so the snippets compile for wasmJs.
  • Move NavigationDrawerExamples into the components package.

:preview:wasm

  • Compile the component snippets (except ComponentsScreen, Snackbar, DatePickers and TimePickers).
  • Generated resources. A generateSnippetResources task scans the snippets for R.drawable.* / R.string.* (skipping android.R.*). It copies only those files (raster and vector XML) and strings into Compose Multiplatform resources, and generates R with IDs that index tables of the matching Res accessors. IDs start at 1, because 0 means "no resource" on Android. ResStubs.kt is a 3-function shim over CMP painterResource / stringResource. The carousel and dialog images render their real images.
  • Use the real multiplatform @Preview (ui-tooling-preview). Small stubs remain for @DrawableRes, android.util.Log and SnippetsTheme.
  • Add navigation-compose.

SnippetRegistry

  • Register the snippets.
  • Use larger PreviewFrames for the alert dialog (576×324) and both carousels (512×288; items are 205dp tall plus padding) so they aren't clipped.

Testing

  • ./gradlew :preview:generator:recordRoborazziDebug: 57/57 screenshots plus PreviewFontTest pass.
  • ./gradlew :preview:wasm:packageDevelopmentSite: Chrome checks of the carousel (including live resizes of the stage), icon buttons and alert dialog match the screenshots.
  • ./gradlew :compose:snippets:compileDebugKotlin

Follow-ups

  • New dialog or picker snippets need an entry in SnippetPreviewFrames.

@riggaroo
riggaroo added this pull request to stack #1192 October 16, 2026 13:28
@riggaroo
riggaroo force-pushed the interactive-previews-2-all-snippets branch from ac3deb3 to a993628 Compare October 16, 2026 13:37
@riggaroo riggaroo changed the title [2/2] Interactive Compose previews: enable all component snippets [2/3] Interactive Compose previews: enable component snippets Oct 16, 2026
@riggaroo
riggaroo force-pushed the interactive-previews-2-all-snippets branch 4 times, most recently from d3435c4 to f5e4085 Compare October 19, 2026 09:56
Base automatically changed from interactive-previews-1-buttons to main October 20, 2026 12:00
@riggaroo
riggaroo force-pushed the interactive-previews-2-all-snippets branch from f5e4085 to 8c0f265 Compare October 20, 2026 12:00
Builds on the Button-only interactive preview infrastructure and registers
the remaining component snippets, except the date and time pickers (which
follow separately because they need kotlinx-datetime).

- compose/snippets: replace material-icons-extended usages in the
  component snippets with a small AppIcons set so they compile for wasmJs;
  move NavigationDrawerExamples into the components package.
- :preview:wasm: compile the component snippets (except ComponentsScreen,
  Snackbar, DatePickers and TimePickers). Generate R from the snippets'
  R.drawable/R.string references and serve those resources via Compose
  Multiplatform resources (IDs start at 1). Use the real multiplatform
  @Preview; keep small stubs for @DrawableRes, android.util.Log and
  SnippetsTheme. Add navigation-compose.
- SnippetRegistry: register the snippets, with a larger PreviewFrame for
  the alert dialog so it isn't clipped.
Carousel items are 205dp tall plus 32dp of padding, which doesn't fit the
default 216dp frame. Use 512x288 (16:9) so the static screenshot and the
live preview show the whole carousel.
@riggaroo
riggaroo force-pushed the interactive-previews-2-all-snippets branch from 8c0f265 to 20e3266 Compare October 21, 2026 08:47
…ocument pullSnippets

- dialogwithimage, simple_searchbar and swipeitemexample now render the
  composable inside their region tag instead of a parent demo screen.
- Directional AppIcons (ArrowBack, Send, Help, OpenInNew, Directions*) set
  autoMirror, matching the AutoMirrored Material icons they replace.
- Remove the duplicated license header in NavigationDrawer.kt.
- Document that every file in components/ must compile for Kotlin/Wasm.
@riggaroo
riggaroo marked this pull request as ready for review October 21, 2026 09:56
@riggaroo
riggaroo requested a review from a team as a code owner October 21, 2026 09:56
@riggaroo
riggaroo requested a review from raystatic October 21, 2026 09:56
@compose-devrel-github-bot

Copy link
Copy Markdown
Contributor

⚡ Jetpack Compose Performance Review

No Jetpack Compose performance issues were found in the changed code.

Summary of Audit

  • Strict Diff Scope: All newly introduced and modified lines (+ lines) across the 21 touched files in .gemini/pr_diff.patch were evaluated against Categories 1–7 of the Jetpack Compose Performance guidelines.
  • Icon Rendering & Allocations: The introduction of AppIcons lazily caches all parsed ImageVector instances (by lazy) at the singleton object level, avoiding repeated SVG path parsing or runtime decoding during composition passes. Uses of Icon(painter = rememberVectorPainter(...)) appropriately cache VectorPainter instances across recompositions.
  • WASM Preview Stubs & Registry: The preview registry additions in SnippetRegistry.kt and WASM stubs (ResStubs.kt, AnnotationStubs.kt, ThemeStubs.kt) correctly delegate multiplatform resource loading without introducing main-thread blocking operations or redundant compositions.

@compose-devrel-github-bot

Copy link
Copy Markdown
Contributor

⚡ Jetpack Compose Performance Review

No Jetpack Compose performance issues were found in the changed code.

Summary of Changes Analyzed

An exhaustive scan was performed on all newly introduced and modified Kotlin code (+ lines in .gemini/pr_diff.patch) across the 21 touched files:

  • Vector Icon Migration (AppIcons.kt, AppBar.kt, Badges.kt, Chip.kt, Dialog.kt, FloatingActionButton.kt, Menus.kt, Navigation.kt, NavigationDrawer.kt, PullToRefreshBox.kt, Scaffold.kt, SearchBar.kt, SegmentedButton.kt, SwipeToDismissBox.kt, Switch.kt, Tooltips.kt):

    • Replaced external/extended icon dependencies with standalone ImageVector definitions in AppIcons.
    • Icon vectors are instantiated once using Kotlin by lazy singletons on the AppIcons object rather than being allocated inside composable bodies, avoiding composition overhead and GC pressure.
    • Usage of Icon(painter = rememberVectorPainter(AppIcons.<Icon>), ...) correctly caches the VectorPainter in the slot table keyed by the static ImageVector reference.
  • Multiplatform WASM Preview Registry & Stubs (SnippetRegistry.kt, ResStubs.kt, AnnotationStubs.kt, ThemeStubs.kt):

    • SnippetRegistry entries provide top-level preview lambdas mapping snippet region tags for WASM rendering and screenshot generation without state observation leaks.
    • Multiplatform resource helpers and theme stubs adhere to Compose idioms without introducing redundant state wrapping, backwards writes, or un-cached computations.
  • Visibility & Scoping (SearchBar.kt, SwipeToDismissBox.kt, SnippetsActivity.kt):

    • Minor visibility updates (private fun to fun) and import adjustments maintain the existing composable hierarchy without introducing recomposition regressions.

@riggaroo
riggaroo merged commit f4e7156 into main Oct 30, 2026
14 checks passed
@riggaroo
riggaroo deleted the interactive-previews-2-all-snippets branch October 30, 2026 18:36
riggaroo added a commit that referenced this pull request Oct 30, 2026
Keep #1191's whole components folder in pullSnippets and add the animation files, keep
both navigation libraries, combine the registry entries and frames, and check that every
SnippetPreviewFrames ID is registered.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants