Remove jQuery dependency from @wordpress/api-fetch (#8311)

* Remove jQuery dependency from api-fetch

* Fix namespace when adding an action

* Update package.lock

* Ordering dependencies alphabetically

* Fixing issue with single quotes inside double quotes

* Adding wp-hooks as dependency of wp-api-fetch

* Renaming hook action namespace

* Moving the script to heartbeat

* Fixing issues regarding code style

- Missing full stop after inline comment
- Missing whitespace after "!"

lib/client-assets.php

@@ -139,7 +139,7 @@ function gutenberg_register_scripts_and_styles() {
 	wp_register_script(
 		'wp-api-fetch',
 		gutenberg_url( 'build/api-fetch/index.js' ),
-		array( 'wp-i18n' ),
+		array( 'wp-hooks', 'wp-i18n' ),
 		filemtime( gutenberg_dir_path() . 'build/api-fetch/index.js' ),
 		true
 	);
@@ -1093,11 +1093,27 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 
 	gutenberg_prepare_wp_components_script();
 
+	global $wp_scripts;
+
+	// Add "wp-hooks" as dependency of "heartbeat".
+	$heartbeat_script = $wp_scripts->query( 'heartbeat', 'registered' );
+	if ( $heartbeat_script && ! in_array( 'wp-hooks', $heartbeat_script->deps ) ) {
+		$heartbeat_script->deps[] = 'wp-hooks';
+	}
+
 	// Enqueue heartbeat separately as an "optional" dependency of the editor.
 	// Heartbeat is used for automatic nonce refreshing, but some hosts choose
 	// to disable it outright.
 	wp_enqueue_script( 'heartbeat' );
 
+	// Transform a "heartbeat-tick" jQuery event into "heartbeat.tick" hook action.
+	// This removes the need of using jQuery for listening to the event.
+	wp_add_inline_script(
+		'heartbeat',
+		'jQuery( document ).on( "heartbeat-tick", function ( event, response ) { wp.hooks.doAction( "heartbeat.tick", response ) } );',
+		'after'
+	);
+
 	// Ignore Classic Editor's `rich_editing` user option, aka "Disable visual
 	// editor". Forcing this to be true guarantees that TinyMCE and its plugins
 	// are available in Gutenberg. Fixes

packages/api-fetch/package.json

@@ -21,8 +21,8 @@
 	"module": "build-module/index.js",
 	"dependencies": {
 		"@babel/runtime": "^7.0.0-beta.52",
-		"@wordpress/i18n": "file:../i18n",
-		"jquery": "^3.3.1"
+		"@wordpress/hooks": "file:../hooks",
+		"@wordpress/i18n": "file:../i18n"
 	},
 	"publishConfig": {
 		"access": "public"

packages/api-fetch/src/middlewares/nonce.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import jQuery from 'jquery';
+import { addAction } from '@wordpress/hooks';
 
 const createNonceMiddleware = ( nonce ) => ( options, next ) => {
 	let usedNonce = nonce;
@@ -11,7 +11,7 @@ const createNonceMiddleware = ( nonce ) => ( options, next ) => {
 	 * Configure heartbeat to refresh the wp-api nonce, keeping the editor
 	 * authorization intact.
 	 */
-	jQuery( document ).on( 'heartbeat-tick', ( event, response ) => {
+	addAction( 'heartbeat.tick', 'core/api-fetch/create-nonce-middleware', ( response ) => {
 		if ( response[ 'rest-nonce' ] ) {
 			usedNonce = response[ 'rest-nonce' ];
 		}