From 436afec3ab8993fecaaf326b89e1c1e2e9d51c01 Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Thu, 13 Jan 2022 11:11:35 +0100
Subject: [PATCH] Move `createPortal` to core (#3408)

---
 .changeset/little-melons-crash.md             |  5 +++++
 compat/src/index.js                           |  4 ++--
 compat/src/suspense.js                        |  3 +--
 compat/src/portals.js => src/create-portal.js |  2 +-
 src/index.d.ts                                |  5 +++++
 src/index.js                                  |  1 +
 {compat/test => test}/browser/portals.test.js | 12 ++++++------
 7 files changed, 21 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/little-melons-crash.md
 rename compat/src/portals.js => src/create-portal.js (96%)
 rename {compat/test => test}/browser/portals.test.js (98%)

diff --git a/.changeset/little-melons-crash.md b/.changeset/little-melons-crash.md
new file mode 100644
index 0000000000..fabf856957
--- /dev/null
+++ b/.changeset/little-melons-crash.md
@@ -0,0 +1,5 @@
+---
+'preact': minor
+---
+
+Move `createPortal` to the core package 
diff --git a/compat/src/index.js b/compat/src/index.js
index d3eae17584..aab4f61b51 100644
--- a/compat/src/index.js
+++ b/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,
diff --git a/compat/src/suspense.js b/compat/src/suspense.js
index cfcdea23a7..654b161b97 100644
--- a/compat/src/suspense.js
+++ b/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} */
diff --git a/compat/src/portals.js b/src/create-portal.js
similarity index 96%
rename from compat/src/portals.js
rename to src/create-portal.js
index 8a13f1f164..ef15d72239 100644
--- a/compat/src/portals.js
+++ b/src/create-portal.js
@@ -1,4 +1,4 @@
-import { createElement } from 'preact';
+import { createElement } from './create-element';
 
 /**
  * Portal component
diff --git a/src/index.d.ts b/src/index.d.ts
index 578fd428a7..26cf13bb8a 100644
--- a/src/index.d.ts
+++ b/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>
diff --git a/src/index.js b/src/index.js
index 8456b2dda5..bc7797931a 100644
--- a/src/index.js
+++ b/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';
diff --git a/compat/test/browser/portals.test.js b/test/browser/portals.test.js
similarity index 98%
rename from compat/test/browser/portals.test.js
rename to test/browser/portals.test.js
index 003f3fd063..901acca6e7 100644
--- a/compat/test/browser/portals.test.js
+++ b/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} */