feat: Forward refs with lazy() (#57)

Author: rschristian

src/lazy.js

@@ -1,6 +1,15 @@
 import { h, options } from 'preact';
 import { useState, useRef } from 'preact/hooks';
 
+const oldDiff = options.__b;
+options.__b = (vnode) => {
+	if (vnode.type && vnode.type._forwarded && vnode.ref) {
+		vnode.props.ref = vnode.ref;
+		vnode.ref = null;
+	}
+	if (oldDiff) oldDiff(vnode);
+};
+
 export default function lazy(load) {
 	let p, c;
 
@@ -21,6 +30,7 @@ export default function lazy(load) {
 		return p;
 	}
 
+	LazyComponent._forwarded = true;
 	return LazyComponent;
 }
 

test/lazy.test.js

@@ -4,7 +4,7 @@ import * as sinon from 'sinon';
 import sinonChai from 'sinon-chai';
 
 import { LocationProvider, Router } from '../src/router.js';
-import lazy from '../src/lazy.js';
+import lazy, { ErrorBoundary } from '../src/lazy.js';
 
 const expect = chai.expect;
 chai.use(sinonChai);
@@ -42,4 +42,21 @@ describe('lazy', () => {
 		await B.preload();
 		expect(loadB).to.have.been.calledOnce;
 	});
+
+	it('should forward refs', async () => {
+		const A = () => <h1>A</h1>;
+		const LazyA = lazy(() => Promise.resolve(A));
+
+		const ref = {};
+
+		render(
+			<ErrorBoundary>
+				<LazyA ref={ref} />
+			</ErrorBoundary>,
+			scratch
+		);
+		await new Promise(r => setTimeout(r, 1))
+
+		expect(ref.current.constructor).to.equal(A);
+	});
 });