@wordpress/block-library 8.13.0 → 8.15.0

package/src/utils/interactivity/hooks.js

@@ -1,145 +0,0 @@
-/**
- * External dependencies
- */
-import { h, options, createContext, cloneElement } from 'preact';
-import { useRef, useMemo } from 'preact/hooks';
-/**
- * Internal dependencies
- */
-import { rawStore as store } from './store';
-
-// Main context.
-const context = createContext( {} );
-
-// WordPress Directives.
-const directiveMap = {};
-const directivePriorities = {};
-export const directive = ( name, cb, { priority = 10 } = {} ) => {
-	directiveMap[ name ] = cb;
-	directivePriorities[ name ] = priority;
-};
-
-// Resolve the path to some property of the store object.
-const resolve = ( path, ctx ) => {
-	let current = { ...store, context: ctx };
-	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );
-	return current;
-};
-
-// Generate the evaluate function.
-const getEvaluate =
-	( { ref } = {} ) =>
-	( path, extraArgs = {} ) => {
-		// If path starts with !, remove it and save a flag.
-		const hasNegationOperator =
-			path[ 0 ] === '!' && !! ( path = path.slice( 1 ) );
-		const value = resolve( path, extraArgs.context );
-		const returnValue =
-			typeof value === 'function'
-				? value( {
-						ref: ref.current,
-						...store,
-						...extraArgs,
-				  } )
-				: value;
-		return hasNegationOperator ? ! returnValue : returnValue;
-	};
-
-// Separate directives by priority. The resulting array contains objects
-// of directives grouped by same priority, and sorted in ascending order.
-const usePriorityLevels = ( directives ) =>
-	useMemo( () => {
-		const byPriority = Object.entries( directives ).reduce(
-			( acc, [ name, values ] ) => {
-				const priority = directivePriorities[ name ];
-				if ( ! acc[ priority ] ) acc[ priority ] = {};
-				acc[ priority ][ name ] = values;
-
-				return acc;
-			},
-			{}
-		);
-
-		return Object.entries( byPriority )
-			.sort( ( [ p1 ], [ p2 ] ) => p1 - p2 )
-			.map( ( [ , obj ] ) => obj );
-	}, [ directives ] );
-
-// Directive wrapper.
-const Directive = ( { type, directives, props: originalProps } ) => {
-	const ref = useRef( null );
-	const element = h( type, { ...originalProps, ref } );
-	const evaluate = useMemo( () => getEvaluate( { ref } ), [] );
-
-	// Add wrappers recursively for each priority level.
-	const byPriorityLevel = usePriorityLevels( directives );
-	return (
-		<RecursivePriorityLevel
-			directives={ byPriorityLevel }
-			element={ element }
-			evaluate={ evaluate }
-			originalProps={ originalProps }
-		/>
-	);
-};
-
-// Priority level wrapper.
-const RecursivePriorityLevel = ( {
-	directives: [ directives, ...rest ],
-	element,
-	evaluate,
-	originalProps,
-} ) => {
-	// This element needs to be a fresh copy so we are not modifying an already
-	// rendered element with Preact's internal properties initialized. This
-	// prevents an error with changes in `element.props.children` not being
-	// reflected in `element.__k`.
-	element = cloneElement( element );
-
-	// Recursively render the wrapper for the next priority level.
-	//
-	// Note that, even though we're instantiating a vnode with a
-	// `RecursivePriorityLevel` here, its render function will not be executed
-	// just yet. Actually, it will be delayed until the current render function
-	// has finished. That ensures directives in the current priorty level have
-	// run (and thus modified the passed `element`) before the next level.
-	const children =
-		rest.length > 0 ? (
-			<RecursivePriorityLevel
-				directives={ rest }
-				element={ element }
-				evaluate={ evaluate }
-				originalProps={ originalProps }
-			/>
-		) : (
-			element
-		);
-
-	const props = { ...originalProps, children };
-	const directiveArgs = { directives, props, element, context, evaluate };
-
-	for ( const d in directives ) {
-		const wrapper = directiveMap[ d ]?.( directiveArgs );
-		if ( wrapper !== undefined ) props.children = wrapper;
-	}
-
-	return props.children;
-};
-
-// Preact Options Hook called each time a vnode is created.
-const old = options.vnode;
-options.vnode = ( vnode ) => {
-	if ( vnode.props.__directives ) {
-		const props = vnode.props;
-		const directives = props.__directives;
-		delete props.__directives;
-		vnode.props = {
-			type: vnode.type,
-			directives,
-			props,
-		};
-		vnode.type = Directive;
-	}
-
-	if ( old ) old( vnode );
-};

package/src/utils/interactivity/hydration.js

@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { hydrate } from 'preact';
-/**
- * Internal dependencies
- */
-import { toVdom, hydratedIslands } from './vdom';
-import { createRootFragment } from './utils';
-import { directivePrefix } from './constants';
-
-export const init = async () => {
-	document
-		.querySelectorAll( `[data-${ directivePrefix }-interactive]` )
-		.forEach( ( node ) => {
-			if ( ! hydratedIslands.has( node ) ) {
-				const fragment = createRootFragment( node.parentNode, node );
-				const vdom = toVdom( node );
-				hydrate( vdom, fragment );
-			}
-		} );
-};

package/src/utils/interactivity/index.js

@@ -1,15 +0,0 @@
-/**
- * Internal dependencies
- */
-import registerDirectives from './directives';
-import { init } from './hydration';
-export { store } from './store';
-
-/**
- * Initialize the Interactivity API.
- */
-registerDirectives();
-
-document.addEventListener( 'DOMContentLoaded', async () => {
-	await init();
-} );

package/src/utils/interactivity/portals.js

@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, render } from 'preact';
-
-/**
- * @param {import('../../src/index').RenderableProps<{ context: any }>} props
- */
-function ContextProvider( props ) {
-	this.getChildContext = () => props.context;
-	return props.children;
-}
-
-/**
- * Portal component
- *
- * @this {import('./internal').Component}
- * @param {object | null | undefined} props
- *
- *                                          TODO: use createRoot() instead of fake root
- */
-function Portal( props ) {
-	const _this = this;
-	const container = props._container;
-
-	_this.componentWillUnmount = function () {
-		render( null, _this._temp );
-		_this._temp = null;
-		_this._container = null;
-	};
-
-	// When we change container we should clear our old container and
-	// indicate a new mount.
-	if ( _this._container && _this._container !== container ) {
-		_this.componentWillUnmount();
-	}
-
-	// When props.vnode is undefined/false/null we are dealing with some kind of
-	// conditional vnode. This should not trigger a render.
-	if ( props._vnode ) {
-		if ( ! _this._temp ) {
-			_this._container = container;
-
-			// Create a fake DOM parent node that manages a subset of `container`'s children:
-			_this._temp = {
-				nodeType: 1,
-				parentNode: container,
-				childNodes: [],
-				appendChild( child ) {
-					this.childNodes.push( child );
-					_this._container.appendChild( child );
-				},
-				insertBefore( child ) {
-					this.childNodes.push( child );
-					_this._container.appendChild( child );
-				},
-				removeChild( child ) {
-					this.childNodes.splice(
-						// eslint-disable-next-line no-bitwise
-						this.childNodes.indexOf( child ) >>> 1,
-						1
-					);
-					_this._container.removeChild( child );
-				},
-			};
-		}
-
-		// Render our wrapping element into temp.
-		render(
-			createElement(
-				ContextProvider,
-				{ context: _this.context },
-				props._vnode
-			),
-			_this._temp
-		);
-	}
-	// When we come from a conditional render, on a mounted
-	// portal we should clear the DOM.
-	else if ( _this._temp ) {
-		_this.componentWillUnmount();
-	}
-}
-
-/**
- * Create a `Portal` to continue rendering the vnode tree at a different DOM node
- *
- * @param {import('./internal').VNode}         vnode     The vnode to render
- * @param {import('./internal').PreactElement} container The DOM node to continue rendering in to.
- */
-export function createPortal( vnode, container ) {
-	const el = createElement( Portal, {
-		_vnode: vnode,
-		_container: container,
-	} );
-	el.containerInfo = container;
-	return el;
-}

package/src/utils/interactivity/store.js

@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { deepSignal } from 'deepsignal';
-
-const isObject = ( item ) =>
-	item && typeof item === 'object' && ! Array.isArray( item );
-
-const deepMerge = ( target, source ) => {
-	if ( isObject( target ) && isObject( source ) ) {
-		for ( const key in source ) {
-			if ( isObject( source[ key ] ) ) {
-				if ( ! target[ key ] ) Object.assign( target, { [ key ]: {} } );
-				deepMerge( target[ key ], source[ key ] );
-			} else {
-				Object.assign( target, { [ key ]: source[ key ] } );
-			}
-		}
-	}
-};
-
-const getSerializedState = () => {
-	// TODO: change the store tag ID for a better one.
-	const storeTag = document.querySelector(
-		`script[type="application/json"]#store`
-	);
-	if ( ! storeTag ) return {};
-	try {
-		const { state } = JSON.parse( storeTag.textContent );
-		if ( isObject( state ) ) return state;
-		throw Error( 'Parsed state is not an object' );
-	} catch ( e ) {
-		// eslint-disable-next-line no-console
-		console.log( e );
-	}
-	return {};
-};
-
-const rawState = getSerializedState();
-export const rawStore = { state: deepSignal( rawState ) };
-
-export const store = ( { state, ...block } ) => {
-	deepMerge( rawStore, block );
-	deepMerge( rawState, state );
-};

package/src/utils/interactivity/utils.js

@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import { useRef, useEffect } from 'preact/hooks';
-import { effect } from '@preact/signals';
-
-function afterNextFrame( callback ) {
-	const done = () => {
-		window.cancelAnimationFrame( raf );
-		setTimeout( callback );
-	};
-	const raf = window.requestAnimationFrame( done );
-}
-
-// Using the mangled properties:
-// this.c: this._callback
-// this.x: this._compute
-// https://github.com/preactjs/signals/blob/main/mangle.json
-function createFlusher( compute, notify ) {
-	let flush;
-	const dispose = effect( function () {
-		flush = this.c.bind( this );
-		this.x = compute;
-		this.c = notify;
-		return compute();
-	} );
-	return { flush, dispose };
-}
-
-// Version of `useSignalEffect` with a `useEffect`-like execution. This hook
-// implementation comes from this PR:
-// https://github.com/preactjs/signals/pull/290.
-//
-// We need to include it here in this repo until the mentioned PR is merged.
-export function useSignalEffect( cb ) {
-	const callback = useRef( cb );
-	callback.current = cb;
-
-	useEffect( () => {
-		const execute = () => callback.current();
-		const notify = () => afterNextFrame( eff.flush );
-		const eff = createFlusher( execute, notify );
-		return eff.dispose;
-	}, [] );
-}
-
-// For wrapperless hydration.
-// See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c
-export const createRootFragment = ( parent, replaceNode ) => {
-	replaceNode = [].concat( replaceNode );
-	const s = replaceNode[ replaceNode.length - 1 ].nextSibling;
-	function insert( c, r ) {
-		parent.insertBefore( c, r || s );
-	}
-	return ( parent.__k = {
-		nodeType: 1,
-		parentNode: parent,
-		firstChild: replaceNode[ 0 ],
-		childNodes: replaceNode,
-		insertBefore: insert,
-		appendChild: insert,
-		removeChild( c ) {
-			parent.removeChild( c );
-		},
-	} );
-};

package/src/utils/interactivity/vdom.js

@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-import { h } from 'preact';
-/**
- * Internal dependencies
- */
-import { directivePrefix as p } from './constants';
-
-const ignoreAttr = `data-${ p }-ignore`;
-const islandAttr = `data-${ p }-interactive`;
-const fullPrefix = `data-${ p }-`;
-
-// Regular expression for directive parsing.
-const directiveParser = new RegExp(
-	`^data-${ p }-` + // ${p} must be a prefix string, like 'wp'.
-		// Match alphanumeric characters including hyphen-separated
-		// segments. It excludes underscore intentionally to prevent confusion.
-		// E.g., "custom-directive".
-		'([a-z0-9]+(?:-[a-z0-9]+)*)' +
-		// (Optional) Match '--' followed by any alphanumeric charachters. It
-		// excludes underscore intentionally to prevent confusion, but it can
-		// contain multiple hyphens. E.g., "--custom-prefix--with-more-info".
-		'(?:--([a-z0-9][a-z0-9-]+))?$',
-	'i' // Case insensitive.
-);
-
-export const hydratedIslands = new WeakSet();
-
-// Recursive function that transforms a DOM tree into vDOM.
-export function toVdom( root ) {
-	const treeWalker = document.createTreeWalker(
-		root,
-		205 // ELEMENT + TEXT + COMMENT + CDATA_SECTION + PROCESSING_INSTRUCTION
-	);
-
-	function walk( node ) {
-		const { attributes, nodeType } = node;
-
-		if ( nodeType === 3 ) return [ node.data ];
-		if ( nodeType === 4 ) {
-			const next = treeWalker.nextSibling();
-			node.replaceWith( new window.Text( node.nodeValue ) );
-			return [ node.nodeValue, next ];
-		}
-		if ( nodeType === 8 || nodeType === 7 ) {
-			const next = treeWalker.nextSibling();
-			node.remove();
-			return [ null, next ];
-		}
-
-		const props = {};
-		const children = [];
-		const directives = {};
-		let hasDirectives = false;
-		let ignore = false;
-		let island = false;
-
-		for ( let i = 0; i < attributes.length; i++ ) {
-			const n = attributes[ i ].name;
-			if (
-				n[ fullPrefix.length ] &&
-				n.slice( 0, fullPrefix.length ) === fullPrefix
-			) {
-				if ( n === ignoreAttr ) {
-					ignore = true;
-				} else if ( n === islandAttr ) {
-					island = true;
-				} else {
-					hasDirectives = true;
-					let val = attributes[ i ].value;
-					try {
-						val = JSON.parse( val );
-					} catch ( e ) {}
-					const [ , prefix, suffix ] = directiveParser.exec( n );
-					directives[ prefix ] = directives[ prefix ] || {};
-					directives[ prefix ][ suffix || 'default' ] = val;
-				}
-			} else if ( n === 'ref' ) {
-				continue;
-			}
-			props[ n ] = attributes[ i ].value;
-		}
-
-		if ( ignore && ! island )
-			return [
-				h( node.localName, {
-					...props,
-					innerHTML: node.innerHTML,
-					__directives: { ignore: true },
-				} ),
-			];
-		if ( island ) hydratedIslands.add( node );
-
-		if ( hasDirectives ) props.__directives = directives;
-
-		let child = treeWalker.firstChild();
-		if ( child ) {
-			while ( child ) {
-				const [ vnode, nextChild ] = walk( child );
-				if ( vnode ) children.push( vnode );
-				child = nextChild || treeWalker.nextSibling();
-			}
-			treeWalker.parentNode();
-		}
-
-		return [ h( node.localName, props, children ) ];
-	}
-
-	return walk( treeWalker.currentNode );
-}