Merge branch 'main' into use-id-hook

.changeset/little-melons-crash.md

@@ -0,0 +1,5 @@
+---
+'preact': minor
+---
+
+Move `createPortal` to the core package 

compat/src/index.js

@@ -6,7 +6,8 @@ import {
  Component,
  createContext,
  Fragment,
- createRoot
+ createRoot,
+ createPortal
 } from 'preact';
 import {
  useState,
@@ -26,7 +27,6 @@ import { forwardRef } from './forwardRef';
 import { Children } from './Children';
 import { Suspense, lazy } from './suspense';
 import { SuspenseList } from './suspense-list';
-import { createPortal } from './portals';
 import {
  hydrate,
  render,

compat/src/suspense.js

@@ -1,7 +1,6 @@
-import { Component, createElement, options, Fragment } from 'preact';
+import { Component, createElement, options, Fragment, createPortal } from 'preact';
 import { TYPE_ELEMENT, MODE_HYDRATE } from '../../src/constants';
 import { getParentDom } from '../../src/tree';
-import { createPortal } from './portals';
 
 const oldCatchError = options._catchError;
 /** @type {(error: any, internal: import('./internal').Internal) => void} */

compat/src/portals.js → src/create-portal.js

@@ -1,4 +1,4 @@
-import { createElement } from 'preact';
+import { createElement } from './create-element';
 
 /**
  * Portal component

src/diff/children.js

@@ -113,9 +113,9 @@ export function diffChildren(
 
  newDom = childInternal._dom;
 
- if (childVNode.ref) {
+ if (childVNode.ref || oldVNodeRef) {
  if (!refs) refs = [];
- childInternal.ref = childVNode.ref
+ childInternal.ref = childVNode.ref;
  refs.push(
  oldVNodeRef,
  childVNode.ref,

src/diff/refs.js

@@ -12,7 +12,7 @@ export function applyRef(oldRef, ref, value, internal) {
  if (oldRef) applyRef(null, oldRef, null, internal);
  try {
  if (typeof ref == 'function') ref(value);
- else ref.current = value;
+ else if (ref) ref.current = value;
  } catch (e) {
  options._catchError(e, internal);
  }

src/index.d.ts

@@ -101,6 +101,11 @@ export interface ComponentClass<P = {}, S = {}> {
 export interface ComponentConstructor<P = {}, S = {}>
  extends ComponentClass<P, S> {}
 
+export function createPortal(
+ vnode: VNode,
+ container: Element
+): VNode<any>;
+
 // Type alias for a component instance considered generally, whether stateless or stateful.
 export type AnyComponent<P = {}, S = {}> =
  | FunctionComponent<P>

src/index.js

@@ -12,3 +12,4 @@ export { cloneElement } from './clone-element';
 export { createContext } from './create-context';
 export { toChildArray } from './diff/children';
 export { default as options } from './options';
+export { createPortal } from './create-portal';

compat/test/browser/portals.test.js → test/browser/portals.test.js

@@ -1,15 +1,15 @@
-import React, {
+import {
  createElement,
  render,
  createPortal,
- useState,
  Component
-} from 'preact/compat';
-import { setupScratch, teardown } from '../../../test/_util/helpers';
-import { getLog, clearLog } from '../../../test/_util/logCall';
+} from 'preact';
+import { useState } from 'preact/hooks';
 import { setupRerender, act } from 'preact/test-utils';
+import { setupScratch, teardown } from '../_util/helpers';
+import { getLog, clearLog } from '../_util/logCall';
 
-/* eslint-disable react/jsx-boolean-value, react/display-name, prefer-arrow-callback */
+/** @jsx createElement */
 
 describe('Portal', () => {
  /** @type {HTMLDivElement} */

test/browser/refs.test.js

@@ -436,14 +436,14 @@ describe('refs', () => {
  });
 
  it('should correctly unmount refs', () => {
- const called = []
- const mock = (x) => {
+ const called = [];
+ const mock = x => {
  called.push(x);
- }
+ };
 
  const App = ({ withRef, unmount }) => {
- return unmount ? null : <div ref={withRef ? mock : undefined}>hi</div>
- }
+ return unmount ? null : <div ref={withRef ? mock : undefined}>hi</div>;
+ };
 
  render(<App />, scratch);
  expect(called.length).to.be.equal(0);
@@ -478,4 +478,35 @@ describe('refs', () => {
  render(<App />, scratch);
  expect(el).to.not.be.equal(null);
  });
+
+ it('should correctly (un)mount refs', () => {
+ let el = [];
+ let ref = { current: null };
+ let refFunc = e => {
+ el = e;
+ };
+
+ class App extends Component {
+ render({ apply }) {
+ return (
+ <div>
+ <div ref={apply ? ref : undefined}>Foo</div>
+ <div ref={apply ? refFunc : undefined}>Bar</div>
+ </div>
+ );
+ }
+ }
+
+ render(<App apply />, scratch);
+ expect(el.innerHTML).to.be.equal('Bar');
+ expect(ref.current.innerHTML).to.be.equal('Foo');
+
+ render(<App apply={false} />, scratch);
+ expect(el).to.be.equal(null);
+ expect(ref.current).to.be.equal(null);
+
+ render(<App apply />, scratch);
+ expect(el.innerHTML).to.be.equal('Bar');
+ expect(ref.current.innerHTML).to.be.equal('Foo');
+ });
 });