Skip to content

fix: signal attribute values not working with precompile transform #4798

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

Merged
merged 1 commit into from
Jun 11, 2025
Merged

fix: signal attribute values not working with precompile transform #4798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 16 additions & 1 deletion jsx-runtime/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,19 @@ function jsxTemplate(templates, ...exprs) {
const JS_TO_CSS = {};
const CSS_REGEX = /[A-Z]/g;

/**
* Unwrap potential signals.
* @param {*} value
* @returns {*}
*/
function normalizeAttrValue(value) {
return value !== null &&
typeof value === 'object' &&
typeof value.valueOf === 'function'
? value.valueOf()
: value;
}

/**
* Serialize an HTML attribute to a string. This function is not
* expected to be used directly, but rather through a precompile
Expand All @@ -109,6 +122,8 @@ function jsxAttr(name, value) {
if (typeof result === 'string') return result;
}

value = normalizeAttrValue(value);

if (name === 'ref' || name === 'key') return '';
if (name === 'style' && typeof value === 'object') {
let str = '';
Expand Down Expand Up @@ -145,7 +160,7 @@ function jsxAttr(name, value) {
return '';
} else if (value === true) return name;

return name + '="' + encodeEntities(value) + '"';
return name + '="' + encodeEntities('' + value) + '"';
Copy link
Member Author

@marvinhagemeister marvinhagemeister Jun 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Added the type conversion because encodeEntities expects a string, but we could also pass a number here

}

/**
Expand Down
24 changes: 24 additions & 0 deletions jsx-runtime/test/browser/jsx-runtime.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,24 @@ import {
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { encodeEntities } from '../../src/utils';

function createSignal(value) {
return {
value,
peek() {
return value;
},
subscribe() {
return () => {};
},
valueOf() {
return value;
},
toString() {
return String(value);
}
};
}

describe('Babel jsx/jsxDEV', () => {
let scratch;
let prevVNodeOption;
Expand Down Expand Up @@ -167,6 +185,12 @@ describe('precompiled JSX', () => {
);
});

it('should support signals', () => {
const sig = createSignal(`&<'"`);
expect(jsxAttr('foo', sig)).to.equal(`foo="&amp;&lt;'&quot;"`);
expect(jsxAttr('style', sig)).to.equal(`style="&amp;&lt;'&quot;"`);
});

it('should call options.attr()', () => {
options.attr = (name, value) => {
return `data-${name}="foo${value}"`;
Expand Down
Loading