Merge pull request #4799 from preactjs/precompile-signal-attr

fix: signal attribute values not working with precompile transform

Author: marvinhagemeister

jsx-runtime/src/index.js

@@ -86,6 +86,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
@@ -100,6 +113,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 = '';
@@ -127,7 +142,7 @@ function jsxAttr(name, value) {
 		return '';
 	} else if (value === true) return name;
 
-	return name + '="' + encodeEntities(value) + '"';
+	return name + '="' + encodeEntities('' + value) + '"';
 }
 
 /**

jsx-runtime/test/browser/jsx-runtime.test.js

@@ -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;
@@ -127,6 +145,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}"`;