Merge branch 'main' into fix/template-hydration-reuse-dom

Author: frontman-git

compat/src/forwardRef.js

@@ -22,7 +22,7 @@ export function forwardRef(fn) {
 	// It expects an object here with a `render` property,
 	// and prototype.render will fail. Without this
 	// mobx-react throws.
-	Forwarded.render = Forwarded;
+	Forwarded.render = fn;
 
 	Forwarded.prototype.isReactComponent = true;
 	Forwarded.displayName = 'ForwardRef(' + (fn.displayName || fn.name) + ')';

compat/test/browser/forwardRef.test.js

@@ -498,4 +498,15 @@ describe('forwardRef', () => {
 
 		expect(actual).to.equal(null);
 	});
+
+	// Issue #4769
+	it('should attach .render pointing to the original render function', () => {
+		function Foo(props, ref) {
+			return <div ref={ref} />;
+		}
+
+		const Forwarded = forwardRef(Foo);
+
+		expect(Forwarded.render).to.equal(Foo);
+  });
 });

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 = '';
@@ -115,7 +130,7 @@ function jsxAttr(name, value) {
 				str = str + name + ':' + val + ';';
 			}
 		}
-		return name + '="' + str + '"';
+		return name + '="' + encodeEntities(str) + '"';
 	}
 
 	if (
@@ -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;
@@ -122,6 +140,15 @@ describe('precompiled JSX', () => {
 
 		it('should escape values', () => {
 			expect(jsxAttr('foo', "&<'")).to.equal('foo="&amp;&lt;\'"');
+			expect(jsxAttr('style', { foo: `"&<'"` })).to.equal(
+				'style="foo:&quot;&amp;&lt;\'&quot;;"'
+			);
+		});
+
+		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()', () => {

src/index.d.ts

@@ -38,7 +38,7 @@ export interface VNode<P = {}> {
 export type Key = string | number | any;
 
 export type RefObject<T> = { current: T };
-export type RefCallback<T> = (instance: T | null) => void;
+export type RefCallback<T> = (instance: T | null) => void | (() => void);
 export type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
 
 export type ComponentChild =