@wordpress/block-library 8.12.6 → 8.14.0

package/src/utils/interactivity/directives.js

@@ -1,200 +0,0 @@
-/**
- * External dependencies
- */
-import { useContext, useMemo, useEffect } from 'preact/hooks';
-import { deepSignal, peek } from 'deepsignal';
-/**
- * Internal dependencies
- */
-import { createPortal } from './portals.js';
-
-/**
- * Internal dependencies
- */
-import { useSignalEffect } from './utils';
-import { directive } from './hooks';
-
-const isObject = ( item ) =>
-	item && typeof item === 'object' && ! Array.isArray( item );
-
-const mergeDeepSignals = ( target, source ) => {
-	for ( const k in source ) {
-		if ( typeof peek( target, k ) === 'undefined' ) {
-			target[ `$${ k }` ] = source[ `$${ k }` ];
-		} else if (
-			isObject( peek( target, k ) ) &&
-			isObject( peek( source, k ) )
-		) {
-			mergeDeepSignals(
-				target[ `$${ k }` ].peek(),
-				source[ `$${ k }` ].peek()
-			);
-		}
-	}
-};
-
-export default () => {
-	// data-wp-context
-	directive(
-		'context',
-		( {
-			directives: {
-				context: { default: context },
-			},
-			props: { children },
-			context: inherited,
-		} ) => {
-			const { Provider } = inherited;
-			const inheritedValue = useContext( inherited );
-			const value = useMemo( () => {
-				const localValue = deepSignal( context );
-				mergeDeepSignals( localValue, inheritedValue );
-				return localValue;
-			}, [ context, inheritedValue ] );
-
-			return <Provider value={ value }>{ children }</Provider>;
-		},
-		{ priority: 5 }
-	);
-
-	// data-wp-body
-	directive( 'body', ( { props: { children }, context: inherited } ) => {
-		const { Provider } = inherited;
-		const inheritedValue = useContext( inherited );
-		return createPortal(
-			<Provider value={ inheritedValue }>{ children }</Provider>,
-			document.body
-		);
-	} );
-
-	// data-wp-effect--[name]
-	directive( 'effect', ( { directives: { effect }, context, evaluate } ) => {
-		const contextValue = useContext( context );
-		Object.values( effect ).forEach( ( path ) => {
-			useSignalEffect( () => {
-				return evaluate( path, { context: contextValue } );
-			} );
-		} );
-	} );
-
-	// data-wp-init--[name]
-	directive( 'init', ( { directives: { init }, context, evaluate } ) => {
-		const contextValue = useContext( context );
-		Object.values( init ).forEach( ( path ) => {
-			useEffect( () => {
-				return evaluate( path, { context: contextValue } );
-			}, [] );
-		} );
-	} );
-
-	// data-wp-on--[event]
-	directive( 'on', ( { directives: { on }, element, evaluate, context } ) => {
-		const contextValue = useContext( context );
-		Object.entries( on ).forEach( ( [ name, path ] ) => {
-			element.props[ `on${ name }` ] = ( event ) => {
-				evaluate( path, { event, context: contextValue } );
-			};
-		} );
-	} );
-
-	// data-wp-class--[classname]
-	directive(
-		'class',
-		( {
-			directives: { class: className },
-			element,
-			evaluate,
-			context,
-		} ) => {
-			const contextValue = useContext( context );
-			Object.keys( className )
-				.filter( ( n ) => n !== 'default' )
-				.forEach( ( name ) => {
-					const result = evaluate( className[ name ], {
-						className: name,
-						context: contextValue,
-					} );
-					const currentClass = element.props.class || '';
-					const classFinder = new RegExp(
-						`(^|\\s)${ name }(\\s|$)`,
-						'g'
-					);
-					if ( ! result )
-						element.props.class = currentClass
-							.replace( classFinder, ' ' )
-							.trim();
-					else if ( ! classFinder.test( currentClass ) )
-						element.props.class = currentClass
-							? `${ currentClass } ${ name }`
-							: name;
-
-					useEffect( () => {
-						// This seems necessary because Preact doesn't change the class
-						// names on the hydration, so we have to do it manually. It doesn't
-						// need deps because it only needs to do it the first time.
-						if ( ! result ) {
-							element.ref.current.classList.remove( name );
-						} else {
-							element.ref.current.classList.add( name );
-						}
-					}, [] );
-				} );
-		}
-	);
-
-	// data-wp-bind--[attribute]
-	directive(
-		'bind',
-		( { directives: { bind }, element, context, evaluate } ) => {
-			const contextValue = useContext( context );
-			Object.entries( bind )
-				.filter( ( n ) => n !== 'default' )
-				.forEach( ( [ attribute, path ] ) => {
-					const result = evaluate( path, {
-						context: contextValue,
-					} );
-					element.props[ attribute ] = result;
-
-					// This seems necessary because Preact doesn't change the attributes
-					// on the hydration, so we have to do it manually. It doesn't need
-					// deps because it only needs to do it the first time.
-					useEffect( () => {
-						// aria- and data- attributes have no boolean representation.
-						// A `false` value is different from the attribute not being
-						// present, so we can't remove it.
-						// We follow Preact's logic: https://github.com/preactjs/preact/blob/ea49f7a0f9d1ff2c98c0bdd66aa0cbc583055246/src/diff/props.js#L131C24-L136
-						if ( result === false && attribute[ 4 ] !== '-' ) {
-							element.ref.current.removeAttribute( attribute );
-						} else {
-							element.ref.current.setAttribute(
-								attribute,
-								result === true && attribute[ 4 ] !== '-'
-									? ''
-									: result
-							);
-						}
-					}, [] );
-				} );
-		}
-	);
-
-	// data-wp-ignore
-	directive(
-		'ignore',
-		( {
-			element: {
-				type: Type,
-				props: { innerHTML, ...rest },
-			},
-		} ) => {
-			// Preserve the initial inner HTML.
-			const cached = useMemo( () => innerHTML, [] );
-			return (
-				<Type
-					dangerouslySetInnerHTML={ { __html: cached } }
-					{ ...rest }
-				/>
-			);
-		}
-	);
-};

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 );
-}