Skip to content

Fix #1200: Quote hyphenated JSX attribute names in babel plugin getContent #1203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mariusc83 wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Fix #1200: Quote hyphenated JSX attribute names in babel plugin getContent #1203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f93a67
Fix #1200: Quote hyphenated JSX attribute names in getContent
mariusc83 Mar 13, 2026
fb40e48
Make extractGetContent regex resilient to whitespace changes
mariusc83 Mar 16, 2026
656f7fe
Fix lint errors in extractGetContent helper
mariusc83 Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/react-native-babel-plugin/src/actions/rum/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,9 +247,7 @@ function jsxChildToRuntimeCall(
t.isJSXAttribute(attr)
)
.map(attr => {
const key = t.isJSXIdentifier(attr.name)
? t.identifier(attr.name.name)
: t.stringLiteral(getNodeName(t, attr.name) || '');
const key = t.stringLiteral(getNodeName(t, attr.name) || '');
Copy link
Contributor

@cdn34dd cdn34dd Mar 17, 2026

Choose a reason for hiding this comment

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

While the suggested fix works, we should not be quoting every key if not needed, I would do something like this instead:

const key =
  t.isJSXIdentifier(attr.name) &&
  t.isValidIdentifier(attr.name.name)
    ? t.identifier(attr.name.name)
    : t.stringLiteral(getNodeName(t, attr.name) || '');

let value: Babel.types.Expression;
if (!attr.value) {
value = t.booleanLiteral(true);
Expand Down
80 changes: 80 additions & 0 deletions packages/react-native-babel-plugin/test/plugin.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1644,3 +1644,83 @@ describe('Babel plugin: wrap interaction handlers for RUM ( with memoization )',
`);
});
});

describe('Babel plugin: hyphenated JSX attribute names in getContent', () => {
function extractGetContent(output: string | null | undefined): string {
if (!output) {
return '';
}
const match = output.match(
/"getContent"\s*:\s*\(\)\s*=>\s*\{[\s\S]*?return\s+([\s\S]*?);\s*\}/
);
return match ? match[1] : '';
}

it('should quote hyphenated attribute names in getContent child elements to produce valid JS', () => {
const input = `
import { TouchableOpacity, View, Text } from 'react-native';

function MyComponent() {
return (
<TouchableOpacity onPress={() => {}}>
<View aria-hidden>
<Text>Hello</Text>
</View>
</TouchableOpacity>
);
}
`;

const output = transformCode(input);
const getContent = extractGetContent(output);
// Inside getContent, the generated _jsx call must use "aria-hidden" (quoted string)
// not aria-hidden (bare identifier) because aria-hidden is not a valid JS identifier.
// Bare identifiers with hyphens cause Hermes parse errors: ':' expected in property initialization
expect(getContent).toContain('"aria-hidden"');
expect(getContent).not.toMatch(/\baria-hidden\b(?!":)/);
});

it('should quote multiple hyphenated attribute names in getContent child elements', () => {
const input = `
import { TouchableOpacity, View, Text } from 'react-native';

function MyComponent() {
return (
<TouchableOpacity onPress={() => {}}>
<View aria-hidden aria-label="test" data-testid="my-view">
<Text>Hello</Text>
</View>
</TouchableOpacity>
);
}
`;

const output = transformCode(input);
const getContent = extractGetContent(output);
expect(getContent).toContain('"aria-hidden"');
expect(getContent).toContain('"aria-label"');
expect(getContent).toContain('"data-testid"');
});

it('should quote all attribute names consistently in getContent child elements', () => {
const input = `
import { TouchableOpacity, View, Text } from 'react-native';

function MyComponent() {
return (
<TouchableOpacity onPress={() => {}}>
<View style={{flex: 1}} accessible>
<Text>Hello</Text>
</View>
</TouchableOpacity>
);
}
`;

const output = transformCode(input);
const getContent = extractGetContent(output);
// All attribute names are quoted for consistency and safety
expect(getContent).toContain('"style"');
expect(getContent).toContain('"accessible"');
});
});
Loading