[compiler] Fix enableJsxOutlining with hyphenated JSX attribute names

[sleitor]

Summary

Fixes two issues with enableJsxOutlining: true:

1. Hyphenated JSX attribute names produce invalid JS (#36218)

JSX attributes with hyphens (e.g. aria-label, data-testid) were used directly as JavaScript identifier names in the outlined component's props destructuring, producing invalid code:

// Before (invalid - aria-label is not a valid JS identifier)
const { "aria-label": aria-label } = t0;

Fix: sanitize attribute names to valid JS identifiers by converting to camelCase:

// After (valid)
const { ariaLabel: ariaLabel } = t0;

The original attribute name is preserved in the inner JSX (<Switch aria-label={ariaLabel} />).

2. VariableDeclaration inside SequenceExpression value block (#36217)

When a VariableDeclaration appeared inside a SequenceExpression value block during codegen, it emitted a Todo error (Cannot declare variables in a value block) or produced invalid JS output.

Fix: convert VariableDeclarations to assignment expressions within SequenceExpression contexts, since JS sequence expressions ((a, b, c)) only accept expressions.

Test

Added fixture: jsx-outlining-variable-declaration-in-sequence-expression

Closes #36217
Closes #36218

[dimaMachina]

@sleitor amazing contribution! Maybe you can take a look at #36151 too? 🙂

[sleitor]

Thanks @dimaMachina! 😊 I took a look at #36151 — there's already a competing PR #36153 open for that issue, so I'll let that one proceed.

[dimaMachina]

Thanks @dimaMachina! 😊 I took a look at #36151 — there's already a competing PR #36153 open for that issue, so I'll let that one proceed.

This PR was closed 😞 #36153 (review)

[sleitor]

True.... Sorry my bad. :)
Ok. sure! will have a look then