Product grid client side transitions with filters

assets/js/blocks/attribute-filter/block.tsx

@@ -275,48 +275,54 @@ const AttributeFilterBlock = ( {
 	 * @param {boolean} allFiltersRemoved If there are active filters or not.
 	 */
 	const updateFilterUrl = useCallback(
-		( query, allFiltersRemoved = false ) => {
-			if ( allFiltersRemoved ) {
-				if ( ! attributeObject?.taxonomy ) {
-					return;
-				}
-				const currentQueryArgKeys = Object.keys(
-					getQueryArgs( window.location.href )
-				);
-
-				const parsedTaxonomy = parseTaxonomyToGenerateURL(
-					attributeObject.taxonomy
-				);
-
-				const url = currentQueryArgKeys.reduce(
-					( currentUrl, queryArg ) =>
-						queryArg.includes(
-							PREFIX_QUERY_ARG_QUERY_TYPE + parsedTaxonomy
-						) ||
-						queryArg.includes(
-							PREFIX_QUERY_ARG_FILTER_TYPE + parsedTaxonomy
-						)
-							? removeQueryArgs( currentUrl, queryArg )
-							: currentUrl,
-					window.location.href
-				);
-
-				const newUrl = formatParams( url, query );
-				changeUrl( newUrl );
-			} else {
-				const newUrl = formatParams( pageUrl, query );
-				const currentQueryArgs = getQueryArgs( window.location.href );
-				const newUrlQueryArgs = getQueryArgs( newUrl );
-
-				if ( ! isQueryArgsEqual( currentQueryArgs, newUrlQueryArgs ) ) {
+		async ( query, allFiltersRemoved = false ) => {
+			return await new Promise( () => {
+				if ( allFiltersRemoved ) {
+					if ( ! attributeObject?.taxonomy ) {
+						return;
+					}
+					const currentQueryArgKeys = Object.keys(
+						getQueryArgs( window.location.href )
+					);
+
+					const parsedTaxonomy = parseTaxonomyToGenerateURL(
+						attributeObject.taxonomy
+					);
+
+					const url = currentQueryArgKeys.reduce(
+						( currentUrl, queryArg ) =>
+							queryArg.includes(
+								PREFIX_QUERY_ARG_QUERY_TYPE + parsedTaxonomy
+							) ||
+							queryArg.includes(
+								PREFIX_QUERY_ARG_FILTER_TYPE + parsedTaxonomy
+							)
+								? removeQueryArgs( currentUrl, queryArg )
+								: currentUrl,
+						window.location.href
+					);
+
+					const newUrl = formatParams( url, query );
 					changeUrl( newUrl );
+				} else {
+					const newUrl = formatParams( pageUrl, query );
+					const currentQueryArgs = getQueryArgs(
+						window.location.href
+					);
+					const newUrlQueryArgs = getQueryArgs( newUrl );
+
+					if (
+						! isQueryArgsEqual( currentQueryArgs, newUrlQueryArgs )
+					) {
+						changeUrl( newUrl );
+					}
 				}
-			}
+			} );
 		},
 		[ pageUrl, attributeObject?.taxonomy ]
 	);
 
-	const onSubmit = ( checkedFilters: string[] ) => {
+	const onSubmit = async ( checkedFilters: string[] ) => {
 		const query = updateAttributeFilter(
 			productAttributesQuery,
 			setProductAttributesQuery,
@@ -325,7 +331,7 @@ const AttributeFilterBlock = ( {
 			blockAttributes.queryType === 'or' ? 'in' : 'and'
 		);
 
-		updateFilterUrl( query, checkedFilters.length === 0 );
+		await updateFilterUrl( query, checkedFilters.length === 0 );
 	};
 
 	const updateCheckedFilters = useCallback(

assets/js/blocks/price-filter/block.tsx

@@ -169,30 +169,32 @@ const PriceFilterBlock = ( {
 
 	// Updates the query based on slider values.
 	const onSubmit = useCallback(
-		( newMinPrice, newMaxPrice ) => {
-			const finalMaxPrice =
-				newMaxPrice >= Number( maxConstraint )
-					? undefined
-					: newMaxPrice;
-			const finalMinPrice =
-				newMinPrice <= Number( minConstraint )
-					? undefined
-					: newMinPrice;
-
-			if ( window ) {
-				const newUrl = formatParams( window.location.href, {
-					min_price: finalMinPrice / 10 ** currency.minorUnit,
-					max_price: finalMaxPrice / 10 ** currency.minorUnit,
-				} );
-
-				// If the params have changed, lets update the filter URL.
-				if ( window.location.href !== newUrl ) {
-					changeUrl( newUrl );
+		async ( newMinPrice, newMaxPrice ) => {
+			return await new Promise( () => {
+				const finalMaxPrice =
+					newMaxPrice >= Number( maxConstraint )
+						? undefined
+						: newMaxPrice;
+				const finalMinPrice =
+					newMinPrice <= Number( minConstraint )
+						? undefined
+						: newMinPrice;
+
+				if ( window ) {
+					const newUrl = formatParams( window.location.href, {
+						min_price: finalMinPrice / 10 ** currency.minorUnit,
+						max_price: finalMaxPrice / 10 ** currency.minorUnit,
+					} );
+
+					// If the params have changed, lets update the filter URL.
+					if ( window.location.href !== newUrl ) {
+						changeUrl( newUrl );
+					}
 				}
-			}
 
-			setMinPriceQuery( finalMinPrice );
-			setMaxPriceQuery( finalMaxPrice );
+				setMinPriceQuery( finalMinPrice );
+				setMaxPriceQuery( finalMaxPrice );
+			} );
 		},
 		[
 			minConstraint,

assets/js/blocks/product-query/frontend.js

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { options } from 'preact';
+import { useEffect } from 'preact/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { prefetch, navigate, directive } from './full-vdom';
+
+// The `wp-client-navigation` directive.
+directive( 'clientNavigation', ( props ) => {
+	const {
+		wp: { clientNavigation },
+		href,
+	} = props;
+	const url = href.startsWith( '/' ) ? href : window.location.pathname + href;
+
+	useEffect( () => {
+		// Prefetch the page if it is in the directive options.
+		if ( clientNavigation?.prefetch ) {
+			prefetch( url );
+		}
+	}, [ url ] );
+
+	// Don't do anything if it's falsy.
+	if ( clientNavigation !== false ) {
+		props.onclick = async ( event ) => {
+			// Stop server-side navigation.
+			event.preventDefault();
+			// Start client-side navigation.
+			await navigate( url, { scroll: clientNavigation?.scroll } );
+		};
+	}
+} );
+
+// Manually add the `wp-client-navigation` directive to the virtual nodes.
+// TODO: Move this to the HTML once WP_HTML_Walker is available.
+const clientNavigationClassNames = [
+	'wp-block-query-pagination-next',
+	'wp-block-query-pagination-previous',
+	'page-numbers',
+];
+const old = options.vnode;
+options.vnode = ( vnode ) => {
+	if ( vnode.type === 'a' ) {
+		clientNavigationClassNames.forEach( ( className ) => {
+			if ( vnode.props.class?.includes( className ) ) {
+				vnode.props.wp = {
+					clientNavigation: {
+						prefetch:
+							className === 'page-numbers' ? false : 'eager',
+						scroll: false,
+					},
+				};
+			}
+		} );
+	}
+	if ( old ) old( vnode );
+};

assets/js/blocks/product-query/full-vdom/directives.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { h, options } from 'preact';
+
+// WordPress Directives.
+const directives = {};
+
+// Expose function to add directives.
+export const directive = ( name, cb ) => {
+	directives[ name ] = cb;
+};
+
+const WpDirective = ( props ) => {
+	for ( const d in props.wp ) {
+		directives[ d ]?.( props );
+	}
+	props._wrapped = true;
+	const { wp, tag, children, ...rest } = props;
+	return h( tag, rest, children );
+};
+
+const old = options.vnode;
+
+options.vnode = ( vnode ) => {
+	const wp = vnode.props.class;
+	const wrapped = vnode.props._wrapped;
+
+	if ( wp ) {
+		if ( ! wrapped ) {
+			vnode.props.tag = vnode.type;
+			vnode.type = WpDirective;
+		}
+	} else if ( wrapped ) {
+		delete vnode.props._wrapped;
+	}
+
+	if ( old ) old( vnode );
+};

assets/js/blocks/product-query/full-vdom/index.js

@@ -0,0 +1,2 @@
+export { navigate, prefetch } from './router';
+export { directive } from './directives';

assets/js/blocks/product-query/full-vdom/router-helpers.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { hydrate, render } from 'preact';
+
+/**
+ * Internal dependencies
+ */
+import { toVdom } from './vdom';
+
+// Remove domain and hash from the URL. We are only interesting in the path and
+// the query.
+export const cleanUrl = ( url ) => {
+	const u = new URL( url, 'http://a.bc' );
+	return u.pathname + u.search;
+};
+
+// Helper to await until the CPU is idle.
+export const idle = () =>
+	new Promise( ( resolve ) => window.requestIdleCallback( resolve ) );
+
+// Get the id class from a Product Query element.
+const getQueryId = ( query ) =>
+	Array.from( query.classList.values() ).find( ( className ) =>
+		className.startsWith( 'query-id-' )
+	);
+
+// Root fragments where we will render the Product Query blocks.
+const rootFragments = new Map();
+
+// Create root fragments for each Product Query block.
+export const createRootFragments = () => {
+	document.querySelectorAll( '.woo-product-query' ).forEach( ( query ) => {
+		rootFragments.set(
+			getQueryId( query ),
+			createRootFragment( query.parentElement, query )
+		);
+	} );
+};
+
+// Fetch a URL and return the HTML string.
+const fetchUrl = async ( url ) => {
+	return await window.fetch( url ).then( ( res ) => res.text() );
+};
+
+// Parse a DOM from an HTML string.
+const parseDom = ( html ) => {
+	return new window.DOMParser().parseFromString( html, 'text/html' );
+};
+
+// Fetch a page and return the virtual DOM of each Product Query block.
+export const fetchPage = async ( url ) => {
+	const html = await fetchUrl( url );
+	const dom = parseDom( html );
+	return toVdoms( dom );
+};
+
+// Build a virtual DOM for each Product Query block found in a document.
+export const toVdoms = ( dom ) => {
+	const vdoms = new Map();
+	dom.querySelectorAll( '.woo-product-query' ).forEach( ( query ) => {
+		vdoms.set( getQueryId( query ), toVdom( query ) );
+	} );
+	return vdoms;
+};
+
+// Render the virtual DOM of each Product Query block.
+export const renderVdoms = ( vdoms, initial = false ) => {
+	const r = initial ? hydrate : render;
+	vdoms.forEach( ( vdom, id ) => {
+		r( vdom, rootFragments.get( id ) );
+	} );
+};
+
+// We use this for wrapperless hydration.
+// See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c
+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 );
+		},
+	} );
+};