From abd91320720a1648b02b2093e06a350da2f473fb Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jan 2024 12:47:38 +0100
Subject: [PATCH] Interactivity: Fix broken react usage in published package
 (#58258)

@wordpress/interactivity depends on preact, not react.

- Enable the "no react in scope" eslint rule for the interactivity packages.
- Add pragmas to set the JSX transform the use createElement.
- Import Preact's `h` as `createElement` explicitly.

This setup ensures that `@wordpress/babel-plugin-import-jsx-pragma` does not add a
`createElement` import from React because it detects createElement is already in scope.
---
 .eslintrc.js                             |  6 ++++++
 packages/interactivity/CHANGELOG.md      |  4 ++++
 packages/interactivity/src/directives.js |  3 +++
 packages/interactivity/src/hooks.tsx     | 13 ++++++++++---
 tools/webpack/interactivity.js           | 12 +++---------
 5 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b7962fddda881a..03a5f786a51c15 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -386,5 +386,11 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: [ 'packages/interactivity*/src/**' ],
+			rules: {
+				'react/react-in-jsx-scope': 'error',
+			},
+		},
 	],
 };
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 0c627c9f640c59..a33c0eb6dd88eb 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Ensure Preact is used in published packages ([58258](https://github.com/WordPress/gutenberg/pull/58258).
+
 ## 4.0.0 (2024-01-24)
 
 ### Enhancements
diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js
index 250d3bde6084c9..38849f53d7f953 100644
--- a/packages/interactivity/src/directives.js
+++ b/packages/interactivity/src/directives.js
@@ -1,6 +1,9 @@
+/* @jsx createElement */
+
 /**
  * External dependencies
  */
+import { h as createElement } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
 import { deepSignal, peek } from 'deepsignal';
 
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index c133eb9981880b..383bcaa1a4ae83 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -1,7 +1,14 @@
+/* @jsx createElement */
+
 /**
  * External dependencies
  */
-import { h, options, createContext, cloneElement } from 'preact';
+import {
+	h as createElement,
+	options,
+	createContext,
+	cloneElement,
+} from 'preact';
 import { useRef, useCallback, useContext } from 'preact/hooks';
 import type { VNode, Context, RefObject } from 'preact';
 
@@ -59,7 +66,7 @@ interface Scope {
 	evaluate: Evaluate;
 	context: Context< any >;
 	ref: RefObject< HTMLElement >;
-	attributes: h.JSX.HTMLAttributes;
+	attributes: createElement.JSX.HTMLAttributes;
 }
 
 interface Evaluate {
@@ -372,7 +379,7 @@ options.vnode = ( vnode: VNode< any > ) => {
 				priorityLevels,
 				originalProps: props,
 				type: vnode.type,
-				element: h( vnode.type as any, props ),
+				element: createElement( vnode.type as any, props ),
 				top: true,
 			};
 			vnode.type = Directives;
diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js
index 5dd9192c855661..2aadcbf79a158e 100644
--- a/tools/webpack/interactivity.js
+++ b/tools/webpack/interactivity.js
@@ -17,8 +17,8 @@ module.exports = {
 	...baseConfig,
 	name: 'interactivity',
 	entry: {
-		index: `./packages/interactivity/src/index.js`,
-		router: `./packages/interactivity-router/src/index.js`,
+		index: './packages/interactivity',
+		router: './packages/interactivity-router',
 		navigation: './packages/block-library/src/navigation/view.js',
 		query: './packages/block-library/src/query/view.js',
 		image: './packages/block-library/src/image/view.js',
@@ -57,13 +57,7 @@ module.exports = {
 							configFile: false,
 							presets: [
 								'@babel/preset-typescript',
-								[
-									'@babel/preset-react',
-									{
-										runtime: 'automatic',
-										importSource: 'preact',
-									},
-								],
+								'@babel/preset-react',
 							],
 						},
 					},