fix: centralize toSnakeCase into web_core to eliminate renderer duplication#858
Open
sanjayrohith wants to merge 2 commits intogoogle:mainfrom
Open
fix: centralize toSnakeCase into web_core to eliminate renderer duplication#858sanjayrohith wants to merge 2 commits intogoogle:mainfrom
sanjayrohith wants to merge 2 commits intogoogle:mainfrom
Conversation
Contributor
There was a problem hiding this comment.
Code Review
This pull request is a great improvement, centralizing the toSnakeCase utility to remove code duplication and fix inconsistencies across different renderers. The changes correctly refactor the Lit and React renderers and fix a bug in the Angular renderer where camelCase icon names were not working. I have one suggestion to make the new toSnakeCase function more robust by correctly handling PascalCase strings, which currently produce an incorrect leading underscore.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
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
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.
Summary
Fixes #786
The
toSnakeCaseutility (used to convert camelCase icon names likeshoppingCart→shopping_cartfor Material Symbols) was scatteredacross renderers with no single source of truth — and worse, with
subtle behavioral differences between them.
This PR fixes that by introducing one canonical implementation in
web_corethat all renderers import.What was wrong
.toLowerCase().toLocaleLowerCase()The
toLocaleLowerCase()vstoLowerCase()inconsistency between Litand React meant icon rendering could differ across renderers for the
same input, depending on locale. The Angular renderer silently passed
camelCase names straight to Material Symbols, which has no effect on
rendering (the icon just doesn't show).
What changed
web_core/src/v0_8/styles/icons.ts— Addedexport function toSnakeCase(str: string): stringas the single canonical implementation, co-located with the icon CSS utilities where it naturally belongs. Already re-exported via@a2ui/web_core/styles/icons.toLocaleLowerCase()lambda; now importstoSnakeCasefrom web_core.resolvedNamenow pipes the resolved string throughtoSnakeCasebefore rendering.Impact
toLowerCase()canonical form is used consistently (locale-invariant, correct for ASCII icon names).shoppingCart) now render correctly for the first time.Testing
The existing React unit tests in
Icon.test.tsxcovertoSnakeCasebehavior end-to-end (camelCase → snake_case, already-lowercase passthrough,
unknown names). These tests continue to pass with the import swapped to
web_core.