chore: adding camelcase flag keys to useFlags hook (#1174)

depends on #1166

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes the shape/behavior of values returned by deprecated
`useFlags()` (key transformation, filtering, and proxy evaluation
mapping), which can affect consumers relying on raw keys or object
enumeration semantics.
> 
> **Overview**
> **Deprecated `useFlags()` now returns camelCased flag keys by
default** (matching legacy `launchdarkly-react-client-sdk`) while still
recording evaluations against the original flag keys.
> 
> This introduces a shared `toCamelCase` utility, filters out `$` system
keys from the returned flags object, and adds a
`LDReactClient.shouldUseCamelCaseFlagKeys()` switch (wired from
`LDReactClientOptions.useCamelCaseFlagKeys`, defaulting to `true`, and
implemented for the noop/server client).
> 
> The hook’s subscription effect now re-syncs flags and resets its
variation cache on context (re-identify) changes, avoids an extra mount
render, and the test suite is expanded/updated to cover camelCase
behavior, proxy semantics (`in`, `Object.keys`, spread), variation call
mapping, and system key filtering.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
841ba58. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- devin-review-badge-begin -->

---

<a href="https://app.devin.ai/review/launchdarkly/js-core/pull/1174"
target="_blank">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->

Author: joker23

packages/sdk/react/__tests__/client/deprecated-hooks/flagKeyUtils.test.ts

@@ -0,0 +1,129 @@
+import { toCamelCase } from '../../../src/client/deprecated-hooks/flagKeyUtils';
+
+it('converts kebab-case to camelCase', () => {
+  expect(toCamelCase('my-flag-key')).toBe('myFlagKey');
+});
+
+it('converts snake_case to camelCase', () => {
+  expect(toCamelCase('my_flag_key')).toBe('myFlagKey');
+});
+
+it('converts dot.separated to camelCase', () => {
+  expect(toCamelCase('my.flag.key')).toBe('myFlagKey');
+});
+
+it('lowercases ALL_CAPS first word', () => {
+  expect(toCamelCase('MY_FLAG')).toBe('myFlag');
+});
+
+it('preserves already-camelCase keys', () => {
+  expect(toCamelCase('myFlagKey')).toBe('myFlagKey');
+});
+
+it('handles HTMLParser (ALLCAPS boundary)', () => {
+  expect(toCamelCase('HTMLParser')).toBe('htmlParser');
+});
+
+it('handles a single word with no separators', () => {
+  expect(toCamelCase('flag')).toBe('flag');
+});
+
+it('handles runs of multiple separators', () => {
+  expect(toCamelCase('my--flag')).toBe('myFlag');
+  expect(toCamelCase('my_.flag')).toBe('myFlag');
+});
+
+it('handles empty string', () => {
+  expect(toCamelCase('')).toBe('');
+});
+
+// ─── Already camelCase (idempotency) ──────────────────────────────────────────
+
+it('preserves multi-hump camelCase', () => {
+  expect(toCamelCase('myBigFlagKey')).toBe('myBigFlagKey');
+});
+
+it('preserves short camelCase', () => {
+  expect(toCamelCase('xFlag')).toBe('xFlag');
+});
+
+// ─── All caps ─────────────────────────────────────────────────────────────────
+
+it('lowercases a single all-caps word with no separators', () => {
+  expect(toCamelCase('ALLFLAG')).toBe('allflag');
+});
+
+it('handles multi-word ALL_CAPS', () => {
+  expect(toCamelCase('ALL_CAPS_FLAG')).toBe('allCapsFlag');
+});
+
+it('lowercases short all-caps abbreviations', () => {
+  expect(toCamelCase('URL')).toBe('url');
+  expect(toCamelCase('API')).toBe('api');
+});
+
+it('returns an all-lowercase word with no separators unchanged', () => {
+  expect(toCamelCase('flagkey')).toBe('flagkey');
+});
+
+it('converts PascalCase to camelCase', () => {
+  expect(toCamelCase('MyFlagKey')).toBe('myFlagKey');
+});
+
+// NOTE: This case should never happen as LaunchDarkly should handle invalid
+// characters already.
+it('preserves special characters that are not separators', () => {
+  expect(toCamelCase('my@flag')).toBe('my@flag');
+  expect(toCamelCase('my#flag!')).toBe('my#flag!');
+  expect(toCamelCase('flag$key')).toBe('flag$key');
+  expect(toCamelCase('my+flag')).toBe('my+flag');
+});
+
+it('keeps digits within a word token', () => {
+  expect(toCamelCase('flag2value')).toBe('flag2value');
+});
+
+it('camelCases around digit-only segments separated by dashes', () => {
+  expect(toCamelCase('my-flag-123')).toBe('myFlag123');
+  expect(toCamelCase('flag-2-value')).toBe('flag2Value');
+});
+
+it('handles a leading digit segment', () => {
+  expect(toCamelCase('123-flag')).toBe('123Flag');
+});
+
+it('preserves digits adjacent to camelCase boundaries', () => {
+  expect(toCamelCase('my2ndFlag')).toBe('my2ndFlag');
+});
+
+it('detects digit-to-uppercase boundary in camelCase keys', () => {
+  expect(toCamelCase('my2Flag')).toBe('my2Flag');
+  expect(toCamelCase('flag2Value')).toBe('flag2Value');
+  expect(toCamelCase('x2Y')).toBe('x2Y');
+});
+
+// NOTE: This case should never happen as LaunchDarkly should handle invalid
+// characters already.
+it('ignores a leading separator', () => {
+  expect(toCamelCase('-my-flag')).toBe('myFlag');
+});
+
+it('ignores a trailing separator', () => {
+  expect(toCamelCase('my-flag-')).toBe('myFlag');
+});
+
+it('ignores leading and trailing separators together', () => {
+  expect(toCamelCase('.my.flag.')).toBe('myFlag');
+});
+
+it('handles mixed separator types in one key', () => {
+  expect(toCamelCase('my-flag_key.value')).toBe('myFlagKeyValue');
+});
+
+it('returns a single lowercase character unchanged', () => {
+  expect(toCamelCase('a')).toBe('a');
+});
+
+it('lowercases a single uppercase character', () => {
+  expect(toCamelCase('A')).toBe('a');
+});

packages/sdk/react/__tests__/client/deprecated-hooks/renderHelpers.tsx

@@ -4,10 +4,14 @@ import { LDReactClientContextValue } from '../../../src/client/LDClient';
 import { LDReactContext } from '../../../src/client/provider/LDReactContext';
 import { makeMockClient } from '../mockClient';
 
-export function makeWrapper(mockClient: ReturnType<typeof makeMockClient>) {
+export function makeWrapper(
+  mockClient: ReturnType<typeof makeMockClient>,
+  contextOverrides?: Partial<LDReactClientContextValue>,
+) {
   const contextValue: LDReactClientContextValue = {
     client: mockClient,
     initializedState: 'unknown',
+    ...contextOverrides,
   };
 
   return function Wrapper({ children }: { children: React.ReactNode }) {