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

@@ -406,5 +406,11 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: [ 'packages/interactivity*/src/**' ],
+			rules: {
+				'react/react-in-jsx-scope': 'error',
+			},
+		},
 	],
 };

packages/interactivity/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   Break up init with yielding to main to prevent long task from hydration. ([#58227](https://github.com/WordPress/gutenberg/pull/58227))
 
+### Bug Fixes
+
+-   Ensure Preact is used in published packages ([58258](https://github.com/WordPress/gutenberg/pull/58258).
+
 ## 4.0.0 (2024-01-24)
 
 ### Enhancements

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';
 

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;

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',
 							],
 						},
 					},