compat/src/render.js

@@ -143,6 +143,8 @@ function handleDomVNode(vnode) {
 			// value will be used as the file name and the file will be called
 			// "true" upon downloading it.
 			value = '';
+		} else if (lowerCased === 'translate' && value === 'no') {
+			value = false;
 		} else if (lowerCased === 'ondoubleclick') {
 			i = 'ondblclick';
 		} else if (

compat/test/browser/render.test.js

@@ -499,6 +499,16 @@ describe('compat render', () => {
 		expect(updateSpy).to.not.be.calledOnce;
 	});
 
+	it('should support the translate attribute w/ yes as a string', () => {
+		render(<b translate="yes">Bold</b>, scratch);
+		expect(scratch.innerHTML).to.equal('<b translate="yes">Bold</b>');
+	});
+
+	it('should support the translate attribute w/ no as a string', () => {
+		render(<b translate="no">Bold</b>, scratch);
+		expect(scratch.innerHTML).to.equal('<b translate="no">Bold</b>');
+	});
+
 	it('should support false aria-* attributes', () => {
 		render(<div aria-checked={false} />, scratch);
 		expect(scratch.firstChild.getAttribute('aria-checked')).to.equal('false');

devtools/src/devtools.js

@@ -2,7 +2,7 @@ import { options, Fragment, Component } from 'preact';
 
 export function initDevTools() {
 	if (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {
-		window.__PREACT_DEVTOOLS__.attachPreact('10.19.4', options, {
+		window.__PREACT_DEVTOOLS__.attachPreact('10.19.5', options, {
 			Fragment,
 			Component
 		});

hooks/src/index.js

@@ -37,7 +37,7 @@ options._diff = vnode => {
 };
 
 options._root = (vnode, parentDom) => {
-	if (parentDom._children && parentDom._children._mask) {
+	if (vnode && parentDom._children && parentDom._children._mask) {
 		vnode._mask = parentDom._children._mask;
 	}
 

hooks/test/browser/useId.test.js

@@ -456,4 +456,25 @@ describe('useId', () => {
 			'<div><div>My id is P0-0</div><div>My id is P0-1</div></div>'
 		);
 	});
+
+	it('should not crash for rendering null after a non-null render', () => {
+		const Id = () => {
+			const id = useId();
+			return <div>My id is {id}</div>;
+		};
+
+		const App = props => {
+			return (
+				<div>
+					<Id />
+					{props.secondId ? <Id /> : null}
+				</div>
+			);
+		};
+
+		render(createElement(App, { secondId: false }), scratch);
+		expect(scratch.innerHTML).to.equal('<div><div>My id is P0-0</div></div>');
+		render(null, scratch);
+		expect(scratch.innerHTML).to.equal('');
+	});
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "preact",
   "amdName": "preact",
-  "version": "10.19.4",
+  "version": "10.19.5",
   "private": false,
   "description": "Fast 3kb React-compatible Virtual DOM library.",
   "main": "dist/preact.js",

src/component.js

@@ -143,6 +143,7 @@ function renderComponent(component, commitQueue, refQueue) {
 			refQueue
 		);
 
+		newVNode._original = oldVNode._original;
 		newVNode._parent._children[newVNode._index] = newVNode;
 
 		newVNode._nextDom = undefined;

src/diff/children.js

@@ -62,7 +62,6 @@ export function diffChildren(
 
 	for (i = 0; i < newChildrenLength; i++) {
 		childVNode = newParentVNode._children[i];
-
 		if (
 			childVNode == null ||
 			typeof childVNode == 'boolean' ||
@@ -231,11 +230,15 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) {
 		// Handle unmounting null placeholders, i.e. VNode => null in unkeyed children
 		if (childVNode == null) {
 			oldVNode = oldChildren[i];
-			if (oldVNode && oldVNode.key == null && oldVNode._dom) {
+			if (
+				oldVNode &&
+				oldVNode.key == null &&
+				oldVNode._dom &&
+				(oldVNode._flags & MATCHED) === 0
+			) {
 				if (oldVNode._dom == newParentVNode._nextDom) {
 					newParentVNode._nextDom = getDomSibling(oldVNode);
 				}
-
 				unmount(oldVNode, oldVNode, false);
 
 				// Explicitly nullify this position in oldChildren instead of just
@@ -250,7 +253,6 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) {
 				oldChildren[i] = null;
 				remainingOldChildren--;
 			}
-
 			continue;
 		}
 

src/jsx.d.ts

@@ -1996,7 +1996,7 @@ export namespace JSXInternal {
 	}
 
 	// All the WAI-ARIA 1.2 role attribute values from https://www.w3.org/TR/wai-aria-1.2/#role_definitions
-	type AriaRole =
+	type WAIAriaRole =
 		| 'alert'
 		| 'alertdialog'
 		| 'application'
@@ -2093,6 +2093,50 @@ export namespace JSXInternal {
 		| 'window'
 		| 'none presentation';
 
+	// All the Digital Publishing WAI-ARIA 1.0 role attribute values from https://www.w3.org/TR/dpub-aria-1.0/#role_definitions
+	type DPubAriaRole =
+		| 'doc-abstract'
+		| 'doc-acknowledgments'
+		| 'doc-afterword'
+		| 'doc-appendix'
+		| 'doc-backlink'
+		| 'doc-biblioentry'
+		| 'doc-bibliography'
+		| 'doc-biblioref'
+		| 'doc-chapter'
+		| 'doc-colophon'
+		| 'doc-conclusion'
+		| 'doc-cover'
+		| 'doc-credit'
+		| 'doc-credits'
+		| 'doc-dedication'
+		| 'doc-endnote'
+		| 'doc-endnotes'
+		| 'doc-epigraph'
+		| 'doc-epilogue'
+		| 'doc-errata'
+		| 'doc-example'
+		| 'doc-footnote'
+		| 'doc-foreword'
+		| 'doc-glossary'
+		| 'doc-glossref'
+		| 'doc-index'
+		| 'doc-introduction'
+		| 'doc-noteref'
+		| 'doc-notice'
+		| 'doc-pagebreak'
+		| 'doc-pagelist'
+		| 'doc-part'
+		| 'doc-preface'
+		| 'doc-prologue'
+		| 'doc-pullquote'
+		| 'doc-qna'
+		| 'doc-subtitle'
+		| 'doc-tip'
+		| 'doc-toc';
+
+	type AriaRole = WAIAriaRole | DPubAriaRole;
+
 	export interface HTMLAttributes<RefType extends EventTarget = EventTarget>
 		extends ClassAttributes<RefType>,
 			DOMAttributes<RefType>,
@@ -2419,7 +2463,7 @@ export namespace JSXInternal {
 			| undefined
 			| SignalLike<boolean | undefined>;
 		results?: number | undefined | SignalLike<number | undefined>;
-		translate?: 'yes' | 'no' | undefined | SignalLike<'yes' | 'no' | undefined>;
+		translate?: boolean | undefined | SignalLike<boolean | undefined>;
 
 		// RDFa Attributes
 		about?: string | undefined | SignalLike<string | undefined>;

test/browser/components.test.js

@@ -340,6 +340,50 @@ describe('Components', () => {
 			expect(scratch.innerHTML).to.equal('<p>B</p>');
 		});
 
+		it('should update children props correctly in subsequent renders', () => {
+			let update, update2;
+			class Counter extends Component {
+				constructor(props) {
+					super(props);
+					this.state = { counter: 0 };
+					update2 = () => {
+						this.setState({ counter: this.state.counter + 1 });
+					};
+				}
+
+				render({ counter }) {
+					if (!counter) return null;
+					return (
+						<p>
+							{counter}-{this.state.counter}
+						</p>
+					);
+				}
+			}
+			class App extends Component {
+				constructor(props) {
+					super(props);
+					this.state = { counter: 0 };
+					update = () => {
+						this.setState({ counter: this.state.counter + 1 });
+					};
+				}
+
+				render() {
+					return <Counter counter={this.state.counter} />;
+				}
+			}
+
+			render(<App />, scratch);
+			expect(scratch.innerHTML).to.equal('');
+
+			update2();
+			rerender();
+			update();
+			rerender();
+			expect(scratch.innerHTML).to.equal('<p>1-1</p>');
+		});
+
 		it("should render components that don't pass args into the Component constructor (unistore pattern)", () => {
 			// Pattern unistore uses for connect: https://github.com/developit/unistore/blob/1df7cf60ac6fa1a70859d745fbaea7ea3f1b8d30/src/integrations/preact.js#L23
 			function Wrapper() {

test/browser/render.test.js

@@ -130,6 +130,16 @@ describe('render()', () => {
 		expect(scratch.firstChild).to.have.property('nodeName', 'X-BAR');
 	});
 
+	it('should support the translate attribute w/ false as a boolean', () => {
+		render(<b translate={false}>Bold</b>, scratch);
+		expect(scratch.innerHTML).to.equal('<b translate="no">Bold</b>');
+	});
+
+	it('should support the translate attribute w/ true as a boolean', () => {
+		render(<b translate>Bold</b>, scratch);
+		expect(scratch.innerHTML).to.equal('<b translate="yes">Bold</b>');
+	});
+
 	it('should support the form attribute', () => {
 		render(
 			<div>
@@ -1298,4 +1308,52 @@ describe('render()', () => {
 		expect(divs[1].hasAttribute('role')).to.equal(false);
 		expect(divs[2].hasAttribute('role')).to.equal(false);
 	});
+
+	it('should not crash or repeatedly add the same child when replacing a matched vnode with null', () => {
+		const B = () => <div>B</div>;
+
+		let update;
+		class App extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { show: true };
+				update = () => {
+					this.setState(state => ({ show: !state.show }));
+				};
+			}
+
+			render() {
+				if (this.state.show) {
+					return (
+						<div>
+							<B />
+							<div />
+						</div>
+					);
+				}
+				return (
+					<div>
+						<div />
+						{null}
+						<B />
+					</div>
+				);
+			}
+		}
+
+		render(<App />, scratch);
+		expect(scratch.innerHTML).to.equal('<div><div>B</div><div></div></div>');
+
+		update();
+		rerender();
+		expect(scratch.innerHTML).to.equal('<div><div></div><div>B</div></div>');
+
+		update();
+		rerender();
+		expect(scratch.innerHTML).to.equal('<div><div>B</div><div></div></div>');
+
+		update();
+		rerender();
+		expect(scratch.innerHTML).to.equal('<div><div></div><div>B</div></div>');
+	});
 });