From 2713e685663e85d082a78a0a22223b968af982b8 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 15 May 2024 22:17:07 +0100
Subject: [PATCH] Fix interactivity

---
 .../lib/util.js                               |  4 ++--
 packages/interactivity/src/directives.tsx     | 23 +++++++++----------
 packages/interactivity/src/hooks.tsx          | 20 ++++++++--------
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index 51b1799a34e22a..907f1db782a9f6 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -96,9 +96,9 @@ function defaultRequestToExternalModule( request ) {
 	const isWordPressScript = Boolean( defaultRequestToExternal( request ) );
 
 	if ( isWordPressScript ) {
-		/*throw new Error(
+		throw new Error(
 			`Attempted to use WordPress script in a module: ${ request }, which is not supported yet.`
-		);*/
+		);
 	}
 }
 
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index 3e106fc51a5eec..cfe6adc468a011 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import { type RefObject } from 'preact';
+import { h as createElement, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
 import { deepSignal, peek, type DeepSignal } from 'deepsignal';
 
@@ -231,6 +231,7 @@ export default () => {
 	// data-wp-context
 	directive(
 		'context',
+		// @ts-ignore-next-line
 		( {
 			directives: { context },
 			props: { children },
@@ -260,7 +261,7 @@ export default () => {
 				return proxifyContext( currentValue.current, inheritedValue );
 			}, [ defaultEntry, inheritedValue ] );
 
-			return <Provider value={ contextStack }>{ children }</Provider>;
+			return createElement( Provider, { value: contextStack }, children );
 		},
 		{ priority: 5 }
 	);
@@ -481,12 +482,10 @@ export default () => {
 		} ) => {
 			// Preserve the initial inner HTML.
 			const cached = useMemo( () => innerHTML, [] );
-			return (
-				<Type
-					dangerouslySetInnerHTML={ { __html: cached } }
-					{ ...rest }
-				/>
-			);
+			return createElement( Type, {
+				dangerouslySetInnerHTML: { __html: cached },
+				...rest,
+			} );
 		}
 	);
 
@@ -549,10 +548,10 @@ export default () => {
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
 
-				return (
-					<Provider value={ mergedContext } key={ key }>
-						{ element.props.content }
-					</Provider>
+				return createElement(
+					Provider,
+					{ value: mergedContext, key },
+					element.props.content
 				);
 			} );
 		},
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index e1139df0ad40d6..91876e627e1a3b 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -350,17 +350,15 @@ const Directives = ( {
 
 	// Recursively render the wrapper for the next priority level.
 	const children =
-		nextPriorityLevels.length > 0 ? (
-			<Directives
-				directives={ directives }
-				priorityLevels={ nextPriorityLevels }
-				element={ element }
-				originalProps={ originalProps }
-				previousScope={ scope }
-			/>
-		) : (
-			element
-		);
+		nextPriorityLevels.length > 0
+			? createElement( Directives, {
+					directives,
+					priorityLevels: nextPriorityLevels,
+					element,
+					originalProps,
+					previousScope: scope,
+			  } )
+			: element;
 
 	const props = { ...originalProps, children };
 	const directiveArgs = {