Experiment: Add view transitions API directive

src/runtime/directives.js

@@ -161,9 +161,17 @@ export default () => {
 			if (clientSideNavigation && link !== false) {
 				element.props.onclick = async (event) => {
 					event.preventDefault();
-
 					// Fetch the page (or return it from cache).
-					await navigate(href);
+					if (
+						document.startViewTransition &&
+						link.viewTransitionsAPI
+					) {
+						document.startViewTransition(async () => {
+							await navigate(href);
+						});
+					} else {
+						await navigate(href);
+					}
 
 					// Update the scroll, depending on the option. True by default.
 					if (link?.scroll === 'smooth') {

src/runtime/hooks.js

@@ -109,7 +109,14 @@ const RecursivePriorityLevel = ({
 		);
 
 	const props = { ...originalProps, children };
-	const directiveArgs = { directives, props, element, context, evaluate };
+	const directiveArgs = {
+		directives,
+		props,
+		element,
+		context,
+		evaluate,
+		store,
+	};
 
 	for (const d in directives) {
 		const wrapper = directiveMap[d]?.(directiveArgs);

src/runtime/index.js

@@ -2,6 +2,8 @@ import registerDirectives from './directives';
 import { init } from './router';
 export { store } from './store';
 export { navigate } from './router';
+export { directive } from './hooks';
+export * from 'preact/hooks';
 
 /**
  * Initialize the Interactivity API.

wp-directives.php

@@ -128,10 +128,10 @@ function wp_directives_add_wp_link_attribute( $block_content ) {
 			) {
 				$w->set_attribute(
 					'data-wp-link',
-					'{ "prefetch": true, "scroll": false }'
+					'{ "prefetch": true, "viewTransitionsAPI": true, "scroll": false }'
 				);
 			} else {
-				$w->set_attribute( 'data-wp-link', '{ "prefetch": true }' );
+				$w->set_attribute( 'data-wp-link', '{ "prefetch": true, "viewTransitionsAPI": true, "scroll": false }' );
 			}
 		}
 	}