Skip to content

fix: centralize toSnakeCase into web_core to eliminate renderer duplication#858

Open
sanjayrohith wants to merge 2 commits intogoogle:mainfrom
sanjayrohith:main
Open

fix: centralize toSnakeCase into web_core to eliminate renderer duplication#858
sanjayrohith wants to merge 2 commits intogoogle:mainfrom
sanjayrohith:main

Conversation

@sanjayrohith
Copy link

Summary

Fixes #786

The toSnakeCase utility (used to convert camelCase icon names like
shoppingCartshopping_cart for Material Symbols) was scattered
across 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_core that all renderers import.

What was wrong

Renderer Status Implementation
React ⚠️ Duplicated Local function using .toLowerCase()
Lit ⚠️ Duplicated Inline anonymous using .toLocaleLowerCase()
Angular ❌ Missing No conversion applied at all — icons were broken for camelCase names

The toLocaleLowerCase() vs toLowerCase() inconsistency between Lit
and 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 — Added export function toSnakeCase(str: string): string as the single canonical implementation, co-located with the icon CSS utilities where it naturally belongs. Already re-exported via @a2ui/web_core/styles/icons.
  • Lit renderer — Removed inline regex+toLocaleLowerCase() lambda; now imports toSnakeCase from web_core.
  • Angular renderer — Added missing conversion: resolvedName now pipes the resolved string through toSnakeCase before rendering.
  • React renderer — Removed local function definition; now imports from web_core.

Impact

  • All three renderers now produce identical output for the same icon name input.
  • The toLowerCase() canonical form is used consistently (locale-invariant, correct for ASCII icon names).
  • Angular icons with camelCase names (e.g. shoppingCart) now render correctly for the first time.
  • Zero behavior change for already-snake_case icon names.

Testing

The existing React unit tests in Icon.test.tsx cover toSnakeCase
behavior end-to-end (camelCase → snake_case, already-lowercase passthrough,
unknown names). These tests continue to pass with the import swapped to
web_core.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

toSnakeCase is repeated across multiple implementations

1 participant