@wordpress/element 8.0.0 → 8.0.2-next.v.202606191442.0

package/src/react-polyfill-base.ts

@@ -1,133 +0,0 @@
-import { flushSync } from 'react-dom';
-import { createRoot, hydrateRoot } from 'react-dom/client';
-import type { Root } from 'react-dom/client';
-
-const internalsKey = '_reactInternals';
-
-// HostComponent fiber tag, represents a DOM element like <div>.
-const HostComponent = 5;
-const HostText = 6;
-
-function findCurrentFiber( fiber: any ): any {
-	if ( ! fiber.alternate ) {
-		// First mount — only one version exists, and it's current.
-		return fiber;
-	}
-
-	// Walk up to the HostRoot to figure out which tree this fiber is on.
-	let node = fiber;
-	while ( node.return ) {
-		node = node.return;
-	}
-
-	// The root's stateNode.current points to the current tree's root fiber.
-	if ( node.stateNode.current === node ) {
-		// We walked up the current tree, so `fiber` is already current.
-		return fiber;
-	}
-
-	// We walked up the alternate tree — switch to the current version.
-	return fiber.alternate;
-}
-
-function findHostFiber( fiber: any ): any {
-	const current = findCurrentFiber( fiber );
-	if ( ! current ) {
-		return null;
-	}
-	return findHostFiberImpl( current );
-}
-
-function findHostFiberImpl( fiber: any ): any {
-	if ( fiber.tag === HostComponent || fiber.tag === HostText ) {
-		return fiber;
-	}
-
-	let child = fiber.child;
-	while ( child ) {
-		const hostFiber = findHostFiberImpl( child );
-		if ( hostFiber ) {
-			return hostFiber;
-		}
-		child = child.sibling;
-	}
-
-	return null;
-}
-
-export function findDOMNode( instance: any ): Element | Text | null {
-	if ( instance === null || instance === undefined ) {
-		return null;
-	}
-
-	if ( instance.nodeType !== undefined ) {
-		return instance as Element | Text;
-	}
-
-	const fiber = instance[ internalsKey ];
-	if ( fiber === undefined ) {
-		if ( typeof instance.render === 'function' ) {
-			throw new Error( 'Unable to find node on an unmounted component.' );
-		}
-		const keys = Object.keys( instance ).join( ',' );
-		throw new Error(
-			`Argument appears to not be a ReactComponent. Keys: ${ keys }`
-		);
-	}
-
-	const hostFiber = findHostFiber( fiber );
-	return hostFiber?.stateNode ?? null;
-}
-
-const roots = new WeakMap< Element, Root >();
-
-export function render(
-	element: React.ReactNode,
-	container: Element,
-	callback?: () => void
-): void {
-	let root = roots.get( container );
-	if ( ! root ) {
-		root = createRoot( container );
-		roots.set( container, root );
-	}
-
-	flushSync( () => {
-		root.render( element );
-	} );
-
-	if ( typeof callback === 'function' ) {
-		callback();
-	}
-}
-
-export function hydrate(
-	element: React.ReactNode,
-	container: Element,
-	callback?: () => void
-): void {
-	let root = roots.get( container );
-	if ( ! root ) {
-		root = hydrateRoot( container, element );
-		roots.set( container, root );
-	} else {
-		root.render( element );
-	}
-
-	if ( typeof callback === 'function' ) {
-		callback();
-	}
-}
-
-export function unmountComponentAtNode( container: Element ): boolean {
-	const root = roots.get( container );
-	if ( ! root ) {
-		return false;
-	}
-
-	flushSync( () => {
-		root.unmount();
-	} );
-	roots.delete( container );
-	return true;
-}

package/src/react-polyfill.ts

@@ -1,99 +0,0 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import {
-	findDOMNode as findDOMNodeBase,
-	render as renderBase,
-	hydrate as hydrateBase,
-	unmountComponentAtNode as unmountComponentAtNodeBase,
-} from './react-polyfill-base';
-
-/**
- * Finds the DOM node of a React component instance.
- *
- * @deprecated since WordPress 7.1.0. Use DOM refs instead.
- * @see https://react.dev/reference/react-dom/findDOMNode
- *
- * @param      instance Component's instance.
- */
-export function findDOMNode( instance: any ): Element | Text | null {
-	deprecated( 'wp.element.findDOMNode', {
-		since: '7.1',
-		alternative: 'DOM refs',
-		link: 'https://react.dev/reference/react-dom/findDOMNode',
-	} );
-
-	return findDOMNodeBase( instance );
-}
-
-/**
- * Renders a given element into the target DOM node.
- *
- * @deprecated since WordPress 6.2.0. Use `createRoot` instead.
- * @see https://react.dev/reference/react-dom/render
- *
- * @param      element   Element to render.
- * @param      container DOM node into which to render.
- * @param      callback  Optional callback called after render.
- */
-export function render(
-	element: React.ReactNode,
-	container: Element,
-	callback?: () => void
-): void {
-	deprecated( 'wp.element.render', {
-		since: '6.2',
-		alternative: 'wp.element.createRoot',
-		link: 'https://react.dev/reference/react-dom/client/createRoot',
-	} );
-
-	renderBase( element, container, callback );
-}
-
-/**
- * Hydrates a given element into the target DOM node.
- *
- * @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.
- * @see https://react.dev/reference/react-dom/hydrate
- *
- * @param      element   Element to hydrate.
- * @param      container DOM node to hydrate.
- * @param      callback  Optional callback called after hydration.
- */
-export function hydrate(
-	element: React.ReactNode,
-	container: Element,
-	callback?: () => void
-): void {
-	deprecated( 'wp.element.hydrate', {
-		since: '6.2',
-		alternative: 'wp.element.hydrateRoot',
-		link: 'https://react.dev/reference/react-dom/client/hydrateRoot',
-	} );
-
-	hydrateBase( element, container, callback );
-}
-
-/**
- * Removes any mounted element from the target DOM node.
- *
- * @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.
- * @see https://react.dev/reference/react-dom/unmountComponentAtNode
- *
- * @param      container DOM node in which to unmount.
- * @return Whether the node was unmounted.
- */
-export function unmountComponentAtNode( container: Element ): boolean {
-	deprecated( 'wp.element.unmountComponentAtNode', {
-		since: '6.2',
-		alternative: 'root.unmount()',
-		link: 'https://react.dev/reference/react-dom/client/createRoot#root-unmount',
-	} );
-
-	return unmountComponentAtNodeBase( container );
-}

package/src/test/find-dom-node.js

@@ -1,109 +0,0 @@
-import { act, render } from '@testing-library/react';
-import { Component } from '..';
-import { findDOMNode as findDOMNodePolyfill } from '../react-polyfill';
-
-describe.skip( 'findDOMNode', () => {
-	it( 'should return null when passed null', () => {
-		expect( findDOMNodePolyfill( null ) ).toBeNull();
-		expect( console ).toHaveWarned();
-	} );
-
-	it( 'should return the element when passed a DOM element', () => {
-		const div = document.createElement( 'div' );
-		expect( findDOMNodePolyfill( div ) ).toBe( div );
-	} );
-
-	it( 'should track the current DOM node across re-renders', () => {
-		class Toggle extends Component {
-			constructor( props ) {
-				super( props );
-				this.state = { count: 0 };
-				this.results = [];
-			}
-
-			componentDidMount() {
-				this.recordNode();
-			}
-
-			componentDidUpdate() {
-				this.recordNode();
-			}
-
-			recordNode() {
-				const node = findDOMNodePolyfill( this );
-				this.results.push( node.tagName );
-			}
-
-			render() {
-				return this.state.count % 2 === 0 ? (
-					<div>even</div>
-				) : (
-					<span>odd</span>
-				);
-			}
-		}
-
-		let toggleRef;
-		render( <Toggle ref={ ( ref ) => ( toggleRef = ref ) } /> );
-		act( () => toggleRef.setState( { count: 1 } ) );
-		act( () => toggleRef.setState( { count: 2 } ) );
-		act( () => toggleRef.setState( { count: 3 } ) );
-
-		expect( toggleRef.results ).toEqual( [ 'DIV', 'SPAN', 'DIV', 'SPAN' ] );
-	} );
-
-	it( 'should return null for an unmounted component', () => {
-		class MyComponent extends Component {
-			render() {
-				return <div>hello</div>;
-			}
-		}
-
-		let instanceRef;
-		const { rerender } = render(
-			<MyComponent
-				ref={ ( ref ) => {
-					instanceRef = ref;
-					return () => {};
-				} }
-			/>
-		);
-
-		expect( findDOMNodePolyfill( instanceRef ) ).toBeInstanceOf(
-			window.HTMLDivElement
-		);
-
-		rerender( <p>replaced</p> );
-
-		expect( instanceRef ).not.toBeNull();
-		expect( findDOMNodePolyfill( instanceRef ) ).toBeNull();
-	} );
-
-	it( 'should find DOM node rendered by a nested child component', () => {
-		function Empty() {
-			return null;
-		}
-
-		function Inner() {
-			return <span className="inner">hello</span>;
-		}
-
-		class Outer extends Component {
-			render() {
-				return (
-					<>
-						<Empty />
-						<Inner />
-					</>
-				);
-			}
-		}
-
-		let outerRef;
-		render( <Outer ref={ ( ref ) => ( outerRef = ref ) } /> );
-
-		const node = findDOMNodePolyfill( outerRef );
-		expect( node ).toBeInstanceOf( window.HTMLSpanElement );
-		expect( node.className ).toBe( 'inner' );
-	} );
-} );

package/src/test/platform.native.js

@@ -1,15 +0,0 @@
-/**
- * Internal dependencies
- */
-import Platform from '../platform';
-
-describe( 'Platform', () => {
-	it( 'is chooses the right thing', () => {
-		const selection = Platform.select( {
-			web: 'web',
-			native: 'native',
-		} );
-
-		expect( selection ).toBe( 'native' );
-	} );
-} );

package/src/test/react-polyfill.js

@@ -1,77 +0,0 @@
-/**
- * Internal dependencies
- */
-import { createElement } from '..';
-import { render, hydrate, unmountComponentAtNode } from '../react-polyfill';
-
-describe.skip( 'render', () => {
-	it( 'should render into a container', () => {
-		const container = document.createElement( 'div' );
-
-		render( createElement( 'p', null, 'hello' ), container );
-
-		expect( container ).toHaveTextContent( 'hello' );
-		expect( console ).toHaveWarned();
-	} );
-
-	it( 'should update the container on subsequent renders', () => {
-		const container = document.createElement( 'div' );
-
-		render( createElement( 'p', null, 'hello' ), container );
-		render( createElement( 'p', null, 'world' ), container );
-
-		expect( container ).toHaveTextContent( 'world' );
-	} );
-
-	it( 'should call the callback after rendering', () => {
-		const container = document.createElement( 'div' );
-		const callback = jest.fn();
-
-		render( createElement( 'p', null, 'hello' ), container, callback );
-
-		expect( callback ).toHaveBeenCalledTimes( 1 );
-		expect( container ).toHaveTextContent( 'hello' );
-	} );
-} );
-
-describe.skip( 'hydrate', () => {
-	it( 'should hydrate into a container with matching markup', () => {
-		const container = document.createElement( 'div' );
-		container.innerHTML = '<p>hello</p>';
-
-		hydrate( createElement( 'p', null, 'hello' ), container );
-
-		expect( container ).toHaveTextContent( 'hello' );
-		expect( console ).toHaveWarned();
-	} );
-
-	it( 'should call the callback after hydrating', () => {
-		const container = document.createElement( 'div' );
-		container.innerHTML = '<p>hello</p>';
-		const callback = jest.fn();
-
-		hydrate( createElement( 'p', null, 'hello' ), container, callback );
-
-		expect( callback ).toHaveBeenCalledTimes( 1 );
-	} );
-} );
-
-describe.skip( 'unmountComponentAtNode', () => {
-	it( 'should return false when the container has no root', () => {
-		const container = document.createElement( 'div' );
-
-		expect( unmountComponentAtNode( container ) ).toBe( false );
-		expect( console ).toHaveWarned();
-	} );
-
-	it( 'should unmount and return true when a root exists', () => {
-		const container = document.createElement( 'div' );
-
-		render( createElement( 'p', null, 'hello' ), container );
-		expect( container ).toHaveTextContent( 'hello' );
-
-		expect( unmountComponentAtNode( container ) ).toBe( true );
-		expect( container ).toHaveTextContent( '' );
-		expect( unmountComponentAtNode( container ) ).toBe( false );
-	} );
-} );