void)>;
_hasScuFromHooks?: boolean;
diff --git a/hooks/test/browser/use.test.jsx b/hooks/test/browser/use.test.jsx
new file mode 100644
index 0000000000..f90dc6bc35
--- /dev/null
+++ b/hooks/test/browser/use.test.jsx
@@ -0,0 +1,293 @@
+import { createElement, render, createContext, Component } from 'preact';
+import { setupRerender } from 'preact/test-utils';
+import { Suspense } from 'preact/compat';
+import { use, useState } from 'preact/hooks';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
+
+describe('use(promise)', () => {
+ /** @type {HTMLDivElement} */
+ let scratch;
+
+ /** @type {() => void} */
+ let rerender;
+
+ beforeEach(() => {
+ scratch = setupScratch();
+ rerender = setupRerender();
+ });
+
+ afterEach(() => {
+ teardown(scratch);
+ });
+
+ async function flushPromise(promise) {
+ await promise;
+ rerender();
+ rerender();
+ }
+
+ it('suspends while pending and renders the fulfilled value', async () => {
+ /** @type {(value: string) => void} */
+ let resolve;
+ const promise = new Promise(res => {
+ resolve = res;
+ });
+
+ function Data() {
+ return Data: {use(promise)}
;
+ }
+
+ render(
+ Loading}>
+
+ ,
+ scratch
+ );
+ rerender();
+ expect(scratch.innerHTML).to.equal('Loading
');
+
+ resolve('hello');
+ await flushPromise(promise);
+ expect(scratch.innerHTML).to.equal('Data: hello
');
+ });
+
+ it('supports falsy fulfilled values', async () => {
+ const promise = Promise.resolve(0);
+
+ function Data() {
+ return {use(promise)}
;
+ }
+
+ render(
+ Loading}>
+
+ ,
+ scratch
+ );
+ rerender();
+ expect(scratch.innerHTML).to.equal('Loading
');
+
+ await flushPromise(promise);
+ expect(scratch.innerHTML).to.equal('0
');
+ });
+
+ it('renders multiple consumers of the same fulfilled promise', async () => {
+ /** @type {(value: string) => void} */
+ let resolve;
+ const promise = new Promise(res => {
+ resolve = res;
+ });
+
+ function A() {
+ return A: {use(promise)}
;
+ }
+
+ function B() {
+ return B: {use(promise)}
;
+ }
+
+ render(
+ Loading}>
+
+
+ ,
+ scratch
+ );
+ rerender();
+ expect(scratch.innerHTML).to.equal('Loading
');
+
+ resolve('x');
+ await flushPromise(promise);
+ expect(scratch.innerHTML).to.equal('A: x
B: x
');
+ });
+
+ it('throws the rejection reason after suspension', async () => {
+ /** @type {(error: Error) => void} */
+ let reject;
+ const promise = new Promise((_res, rej) => {
+ reject = rej;
+ });
+
+ class ErrorBoundary extends Component {
+ state = { error: null };
+
+ componentDidCatch(error) {
+ this.setState({ error });
+ }
+
+ render(props, state) {
+ return state.error ? (
+ Caught: {state.error.message}
+ ) : (
+ props.children
+ );
+ }
+ }
+
+ function Data() {
+ return Data: {use(promise)}
;
+ }
+
+ render(
+
+ Loading}>
+
+
+ ,
+ scratch
+ );
+ rerender();
+ expect(scratch.innerHTML).to.equal('Loading
');
+
+ reject(new Error('boom'));
+ await flushPromise(promise.catch(() => {}));
+ expect(scratch.innerHTML).to.equal('Caught: boom
');
+ });
+
+ it('can be called conditionally without shifting hook state', () => {
+ const promise =
+ /** @type {Promise & { status: string, value: string }} */ (
+ Promise.resolve('done')
+ );
+ promise.status = 'fulfilled';
+ promise.value = 'done';
+ /** @type {(value: string) => void} */
+ let setSecond;
+
+ function App(props) {
+ const [first] = useState('first');
+ let value = 'skipped';
+ if (props.show) value = use(promise);
+ const [second, updateSecond] = useState('second');
+ setSecond = updateSecond;
+ return (
+
+ {first}:{value}:{second}
+
+ );
+ }
+
+ render(, scratch);
+ expect(scratch.innerHTML).to.equal('first:skipped:second
');
+
+ setSecond('updated');
+ rerender();
+ expect(scratch.innerHTML).to.equal('first:skipped:updated
');
+
+ render(, scratch);
+ expect(scratch.innerHTML).to.equal('first:done:updated
');
+ });
+});
+
+describe('use(context)', () => {
+ /** @type {HTMLDivElement} */
+ let scratch;
+
+ /** @type {() => void} */
+ let rerender;
+
+ beforeEach(() => {
+ scratch = setupScratch();
+ rerender = setupRerender();
+ });
+
+ afterEach(() => {
+ teardown(scratch);
+ });
+
+ it('reads the current context value', () => {
+ const Context = createContext(13);
+
+ function App() {
+ return {use(Context)}
;
+ }
+
+ render(, scratch);
+ expect(scratch.innerHTML).to.equal('13
');
+
+ render(
+
+
+ ,
+ scratch
+ );
+ expect(scratch.innerHTML).to.equal('42
');
+ });
+
+ it('subscribes to provider updates', () => {
+ const Context = createContext('a');
+
+ class NoUpdate extends Component {
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ render() {
+ return this.props.children;
+ }
+ }
+
+ function App() {
+ return {use(Context)}
;
+ }
+
+ render(
+
+
+
+
+ ,
+ scratch
+ );
+ expect(scratch.innerHTML).to.equal('a
');
+
+ render(
+
+
+
+
+ ,
+ scratch
+ );
+ rerender();
+ expect(scratch.innerHTML).to.equal('b
');
+ });
+
+ it('can be called conditionally without shifting hook state', () => {
+ const Context = createContext('context');
+ /** @type {(value: string) => void} */
+ let setSecond;
+
+ function App(props) {
+ const [first] = useState('first');
+ const value = props.show ? use(Context) : 'skipped';
+ const [second, updateSecond] = useState('second');
+ setSecond = updateSecond;
+ return (
+
+ {first}:{value}:{second}
+
+ );
+ }
+
+ render(
+
+
+ ,
+ scratch
+ );
+ expect(scratch.innerHTML).to.equal('first:skipped:second
');
+
+ setSecond('updated');
+ rerender();
+ expect(scratch.innerHTML).to.equal('first:skipped:updated
');
+
+ render(
+
+
+ ,
+ scratch
+ );
+ expect(scratch.innerHTML).to.equal('first:provided:updated
');
+ });
+});
diff --git a/src/internal.d.ts b/src/internal.d.ts
index f530064c19..3deef2fe44 100644
--- a/src/internal.d.ts
+++ b/src/internal.d.ts
@@ -12,7 +12,8 @@ export enum HookType {
useContext = 9,
useErrorBoundary = 10,
// Not a real hook, but the devtools treat is as such
- useDebugvalue = 11
+ useDebugvalue = 11,
+ use = 12
}
export interface DevSource {
diff --git a/test/ts/hooks.test.tsx b/test/ts/hooks.test.tsx
new file mode 100644
index 0000000000..a0d0dd2e72
--- /dev/null
+++ b/test/ts/hooks.test.tsx
@@ -0,0 +1,20 @@
+import { createContext } from '../../';
+import { use } from '../../hooks';
+
+const Context = createContext(1);
+
+function UseTypes() {
+ const contextValue: number = use(Context);
+ const promiseValue: number = use(Promise.resolve(1));
+
+ contextValue.toFixed();
+ promiseValue.toFixed();
+
+ return null;
+}
+
+void UseTypes;
+
+describe('hooks types', () => {
+ it('typechecks use()', () => {});
+});