Use navigate function inside filter blocks

assets/js/blocks/active-filters/active-attribute-filters.tsx

@@ -15,6 +15,7 @@ import {
 	isAttributeTermCollection,
 	isBoolean,
 } from '@woocommerce/types';
+import { supportsClientSideNavigation } from '@woocommerce/utils';
 
 /**
  * Internal dependencies
@@ -128,7 +129,10 @@ const ActiveAttributeFilters = ( {
 								} );
 							}
 
-							if ( ! filteringForPhpTemplate ) {
+							if (
+								supportsClientSideNavigation ||
+								! filteringForPhpTemplate
+							) {
 								removeAttributeFilterBySlug(
 									productAttributes,
 									setProductAttributes,

assets/js/blocks/active-filters/block.tsx

@@ -15,7 +15,10 @@ import {
 	isStockStatusQueryCollection,
 	isStockStatusOptions,
 } from '@woocommerce/types';
-import { getUrlParameter } from '@woocommerce/utils';
+import {
+	getUrlParameter,
+	supportsClientSideNavigation,
+} from '@woocommerce/utils';
 import FilterTitlePlaceholder from '@woocommerce/base-components/filter-placeholder';
 import { useIsMounted } from '@woocommerce/base-hooks';
 
@@ -111,7 +114,10 @@ const ActiveFiltersBlock = ( {
 								removeArgsFromFilterUrl( {
 									filter_stock_status: slug,
 								} );
-								if ( ! filteringForPhpTemplate ) {
+								if (
+									supportsClientSideNavigation ||
+									! filteringForPhpTemplate
+								) {
 									const newStatuses =
 										productStockStatus.filter(
 											( status ) => {
@@ -149,7 +155,10 @@ const ActiveFiltersBlock = ( {
 			name: formatPriceRange( minPrice, maxPrice ),
 			removeCallback: () => {
 				removeArgsFromFilterUrl( 'max_price', 'min_price' );
-				if ( ! filteringForPhpTemplate ) {
+				if (
+					supportsClientSideNavigation ||
+					! filteringForPhpTemplate
+				) {
 					setMinPrice( undefined );
 					setMaxPrice( undefined );
 				}
@@ -215,7 +224,7 @@ const ActiveFiltersBlock = ( {
 	 * This code should be moved to Rating Filter block once it's implemented.
 	 */
 	useEffect( () => {
-		if ( ! filteringForPhpTemplate ) {
+		if ( supportsClientSideNavigation || ! filteringForPhpTemplate ) {
 			return;
 		}
 
@@ -264,7 +273,10 @@ const ActiveFiltersBlock = ( {
 								removeArgsFromFilterUrl( {
 									rating_filter: slug,
 								} );
-								if ( ! filteringForPhpTemplate ) {
+								if (
+									supportsClientSideNavigation ||
+									! filteringForPhpTemplate
+								) {
 									const newRatings = productRatings.filter(
 										( rating ) => {
 											return rating !== slug;
@@ -387,7 +399,10 @@ const ActiveFiltersBlock = ( {
 						className="wc-block-active-filters__clear-all"
 						onClick={ () => {
 							cleanFilterUrl();
-							if ( ! filteringForPhpTemplate ) {
+							if (
+								supportsClientSideNavigation ||
+								! filteringForPhpTemplate
+							) {
 								setMinPrice( undefined );
 								setMaxPrice( undefined );
 								setProductAttributes( [] );

assets/js/interactivity/directives.js

@@ -173,4 +173,61 @@ export default () => {
 			}
 		}
 	);
+
+	// wp-show
+	directive(
+		'show',
+		( {
+			directives: {
+				show: { default: show },
+			},
+			element,
+			evaluate,
+			context,
+		} ) => {
+			const contextValue = useContext( context );
+			if ( ! evaluate( show, { context: contextValue } ) )
+				element.props.children = (
+					<template>{ element.props.children }</template>
+				);
+		}
+	);
+
+	// 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 }
+				/>
+			);
+		}
+	);
+
+	// wp-text
+	directive(
+		'text',
+		( {
+			directives: {
+				text: { default: text },
+			},
+			element,
+			evaluate,
+			context,
+		} ) => {
+			const contextValue = useContext( context );
+			element.props.children = evaluate( text, {
+				context: contextValue,
+			} );
+		}
+	);
 };

assets/js/interactivity/index.js

@@ -2,6 +2,7 @@ import registerDirectives from './directives';
 import registerComponents from './components';
 import { init } from './router';
 export { store } from './store';
+export { navigate } from './router';
 
 /**
  * Initialize the initial vDOM.

assets/js/interactivity/router.js

@@ -70,14 +70,18 @@ export const prefetch = ( url ) => {
 };
 
 // Navigate to a new page.
-export const navigate = async ( href ) => {
+export const navigate = async ( href, { replace = false } = {} ) => {
 	const url = cleanUrl( href );
 	prefetch( url );
 	const page = await pages.get( url );
 	if ( page ) {
 		document.head.replaceChildren( ...page.head );
 		render( page.body, rootFragment );
-		window.history.pushState( {}, '', href );
+		if ( replace ) {
+			window.history.replaceState( {}, '', href );
+		} else {
+			window.history.pushState( {}, '', href );
+		}
 	} else {
 		window.location.assign( href );
 	}

assets/js/interactivity/vdom.js

@@ -48,7 +48,9 @@ export function toVdom( node ) {
 
 	if ( ignore && ! island )
 		return h( node.localName, {
-			dangerouslySetInnerHTML: { __html: node.innerHTML },
+			...props,
+			innerHTML: node.innerHTML,
+			directives: { ignore: true },
 		} );
 	if ( island ) hydratedIslands.add( node );
 

assets/js/utils/filters.ts

@@ -11,6 +11,11 @@ const filteringForPhpTemplate = getSettingWithCoercion(
 	isBoolean
 );
 
+export const supportsClientSideNavigation =
+	document
+		.querySelector( `meta[itemprop='woo-client-side-navigation']` )
+		?.getAttribute( 'content' ) === 'active';
+
 /**
  * Returns specified parameter from URL
  *
@@ -33,7 +38,19 @@ export function getUrlParameter( name: string ) {
  * @param {string} newUrl New URL to be set.
  */
 export function changeUrl( newUrl: string ) {
-	if ( filteringForPhpTemplate ) {
+	/**
+	 * In order not to enqueue the Interactivity runtime if it is disabled, we
+	 * cannot import `@woocommerce/interactivity` here. That's why we call
+	 * `navigate` from `window.wc.__experimentalInteractivity` directly.
+	 */
+	if (
+		supportsClientSideNavigation &&
+		window.wc?.__experimentalInteractivity
+	) {
+		window.wc.__experimentalInteractivity.navigate( newUrl, {
+			replace: true,
+		} );
+	} else if ( filteringForPhpTemplate ) {
 		window.location.href = newUrl;
 	} else {
 		window.history.replaceState( {}, '', newUrl );

bin/webpack-configs.js

@@ -785,11 +785,17 @@ const getInteractivityAPIConfig = ( options = {} ) => {
 	const { alias, resolvePlugins = [] } = options;
 	return {
 		entry: {
-			runtime: './assets/js/interactivity',
+			'wc-interactivity': './assets/js/interactivity',
 		},
 		output: {
-			filename: 'woo-directives-[name].js',
+			filename: '[name].js',
 			path: path.resolve( __dirname, '../build/' ),
+			library: [ 'wc', '__experimentalInteractivity' ],
+			libraryTarget: 'this',
+			// This fixes an issue with multiple webpack projects using chunking
+			// overwriting each other's chunk loader function.
+			// See https://webpack.js.org/configuration/output/#outputjsonpfunction
+			jsonpFunction: 'webpackWcBlocksJsonp',
 		},
 		resolve: {
 			alias,
@@ -806,13 +812,13 @@ const getInteractivityAPIConfig = ( options = {} ) => {
 		],
 		optimization: {
 			runtimeChunk: {
-				name: 'vendors',
+				name: 'wc-interactivity-vendors',
 			},
 			splitChunks: {
 				cacheGroups: {
 					vendors: {
 						test: /[\\/]node_modules[\\/]/,
-						name: 'vendors',
+						name: 'wc-interactivity-vendors',
 						minSize: 0,
 						chunks: 'all',
 					},

bin/webpack-helpers.js

@@ -17,6 +17,7 @@ const wcDepMap = {
 	'@woocommerce/shared-hocs': [ 'wc', 'wcBlocksSharedHocs' ],
 	'@woocommerce/price-format': [ 'wc', 'priceFormat' ],
 	'@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ],
+	'@woocommerce/interactivity': [ 'wc', '__experimentalInteractivity' ],
 };
 
 const wcHandleMap = {
@@ -28,6 +29,7 @@ const wcHandleMap = {
 	'@woocommerce/shared-hocs': 'wc-blocks-shared-hocs',
 	'@woocommerce/price-format': 'wc-price-format',
 	'@woocommerce/blocks-checkout': 'wc-blocks-checkout',
+	'@woocommerce/interactivity': 'wc-interactivity',
 };
 
 const getAlias = ( options = {} ) => {

src/Interactivity/directives/attributes/woo-context.php

@@ -1,6 +1,6 @@
 <?php
 
-function process_woo_context_attribute( $tags, $context ) {
+function process_woo_context( $tags, $context ) {
 	if ( $tags->is_tag_closer() ) {
 		$context->rewind_context();
 		return;

src/Interactivity/directives/class-woo-directive-context.php

@@ -2,7 +2,7 @@
 /**
  * Context data implementation.
  *
- * @package block-hydration-experiments
+ * @package block-interactivity-experiments
  */
 
 /**