From 24bbb2f5cd7b7956b03f72cc412a49b5ce6ebec7 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 12 Nov 2018 16:48:20 -0500 Subject: [PATCH 1/7] Framework: Dispatch all heartbeat events as actions --- lib/client-assets.php | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index d38a3c2098feb2..d3e84f1b9779ca 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -1026,11 +1026,32 @@ function gutenberg_editor_scripts_and_styles( $hook ) { // 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. + // Transforms heartbeat jQuery events into equivalent hook actions. This + // avoids a dependency on jQuery for listening to the event. + $heartbeat_hooks = << Date: Mon, 12 Nov 2018 16:49:11 -0500 Subject: [PATCH 2/7] Editor: Send PostLockModal lock request via XHR --- .../src/components/post-locked-modal/index.js | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index db8de6f00579c2..75d6d9c2b698c0 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -104,18 +104,15 @@ class PostLockedModal extends Component { return; } - const data = { - action: 'wp-remove-post-lock', - _wpnonce: postLockUtils.unlockNonce, - post_ID: postId, - active_post_lock: activePostLock, - }; - - jQuery.post( { - async: false, - url: postLockUtils.ajaxUrl, - data, - } ); + const data = new window.FormData(); + data.append( 'action', 'wp-remove-post-lock' ); + data.append( '_wpnonce', postLockUtils.unlockNonce ); + data.append( 'post_ID', postId ); + data.append( 'active_post_lock', activePostLock ); + + const xhr = new window.XMLHttpRequest(); + xhr.open( 'POST', postLockUtils.ajaxUrl, false ); + xhr.send( data ); } render() { From a2a1550166e55c5f9968f430ca0d77007b82235b Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 12 Nov 2018 16:49:29 -0500 Subject: [PATCH 3/7] Editor: Use hooks for PostLockedModal heartbeat handling --- lib/packages-dependencies.php | 1 - packages/editor/CHANGELOG.md | 6 ++++ packages/editor/package.json | 1 - .../src/components/post-locked-modal/index.js | 32 +++++++++++++------ 4 files changed, 29 insertions(+), 11 deletions(-) diff --git a/lib/packages-dependencies.php b/lib/packages-dependencies.php index 34c70851ff727c..ada718023b33c7 100644 --- a/lib/packages-dependencies.php +++ b/lib/packages-dependencies.php @@ -131,7 +131,6 @@ 'wp-viewport', ), 'wp-editor' => array( - 'jquery', 'lodash', 'wp-tinymce-lists', 'wp-a11y', diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index f8465425eed103..672be5a61d0a04 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -1,3 +1,9 @@ +## 9.0.7 (Unreleased) + +### Internal + +- Removed `jQuery` dependency + ## 9.0.6 (2018-12-18) ### Bug Fixes diff --git a/packages/editor/package.json b/packages/editor/package.json index 811eb9643e4c0b..a1b72033210d41 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -47,7 +47,6 @@ "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "inherits": "^2.0.3", - "jquery": "^3.3.1", "lodash": "^4.17.10", "memize": "^1.0.5", "react-autosize-textarea": "^3.0.2", diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index 75d6d9c2b698c0..acba2ea4377911 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import jQuery from 'jquery'; import { get } from 'lodash'; /** @@ -12,7 +11,8 @@ import { Modal, Button } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { addQueryArgs } from '@wordpress/url'; import { Component } from '@wordpress/element'; -import { compose, withGlobalEvents } from '@wordpress/compose'; +import { addAction, removeAction } from '@wordpress/hooks'; +import { compose, withGlobalEvents, withInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -30,17 +30,30 @@ class PostLockedModal extends Component { } componentDidMount() { + const hookNamePrefix = this.getHookNamePrefix(); + // Details on these events on the Heartbeat API docs // https://developer.wordpress.org/plugins/javascript/heartbeat-api/ - jQuery( document ) - .on( 'heartbeat-send.refresh-lock', this.sendPostLock ) - .on( 'heartbeat-tick.refresh-lock', this.receivePostLock ); + addAction( 'heartbeat.send', hookNamePrefix + '-send', this.sendPostLock ); + addAction( 'heartbeat.tick', hookNamePrefix + '-tick', this.receivePostLock ); } componentWillUnmount() { - jQuery( document ) - .off( 'heartbeat-send.refresh-lock', this.sendPostLock ) - .off( 'heartbeat-tick.refresh-lock', this.receivePostLock ); + const hookNamePrefix = this.getHookNamePrefix(); + + removeAction( 'heartbeat.send', hookNamePrefix + '-send' ); + removeAction( 'heartbeat.tick', hookNamePrefix + '-tick' ); + } + + /** + * Returns a `@wordpress/hooks` hook name specific to the instance of the + * component. + * + * @return {string} Hook name prefix. + */ + getHookNamePrefix() { + const { instanceId } = this.props; + return 'core/editor/post-locked-modal-' + instanceId + '-heartbeat'; } /** @@ -231,5 +244,6 @@ export default compose( } ), withGlobalEvents( { beforeunload: 'releasePostLock', - } ) + } ), + withInstanceId, )( PostLockedModal ); From ed70bc1a6e315228db22ffd60da3addeca255f56 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 12 Nov 2018 17:16:37 -0500 Subject: [PATCH 4/7] Framework: Update package-lock.json per jQuery dependency drop --- package-lock.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d54418b81877e..917bb93ee50060 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2562,7 +2562,6 @@ "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "inherits": "^2.0.3", - "jquery": "^3.3.1", "lodash": "^4.17.10", "memize": "^1.0.5", "react-autosize-textarea": "^3.0.2", @@ -12774,11 +12773,6 @@ "merge-stream": "^1.0.1" } }, - "jquery": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", - "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" - }, "js-base64": { "version": "2.4.6", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.6.tgz", From d1e3891e946e3a832fe7d56af4acfa112bdeb519 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 13 Nov 2018 17:44:02 -0500 Subject: [PATCH 5/7] Editor: Remove unsupported event object from action callback --- .../editor/src/components/post-locked-modal/index.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index acba2ea4377911..7a2cd5950dfc77 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -62,10 +62,9 @@ class PostLockedModal extends Component { * When the user does not send a heartbeat in a heartbeat-tick * the user is no longer editing and another user can start editing. * - * @param {Object} event Event. - * @param {Object} data Data to send in the heartbeat request. + * @param {Object} data Data to send in the heartbeat request. */ - sendPostLock( event, data ) { + sendPostLock( data ) { const { isLocked, activePostLock, postId } = this.props; if ( isLocked ) { return; @@ -80,10 +79,9 @@ class PostLockedModal extends Component { /** * Refresh post locks: update the lock string or show the dialog if somebody has taken over editing. * - * @param {Object} event Event. - * @param {Object} data Data received in the heartbeat request + * @param {Object} data Data received in the heartbeat request */ - receivePostLock( event, data ) { + receivePostLock( data ) { if ( ! data[ 'wp-refresh-post-lock' ] ) { return; } From d4faa01acd3b0798206ee4579668b26cd69e0b33 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 13 Nov 2018 17:44:35 -0500 Subject: [PATCH 6/7] Editor: Assure withGlobalEvents is last to wrap component Since it tests for static method on which to call --- packages/editor/src/components/post-locked-modal/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index 7a2cd5950dfc77..c0509576bf8f86 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -240,8 +240,8 @@ export default compose( updatePostLock, }; } ), + withInstanceId, withGlobalEvents( { beforeunload: 'releasePostLock', - } ), - withInstanceId, + } ) )( PostLockedModal ); From e1c3c0e9bb02fb67f969a604b16ac1207df3343d Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 11 Dec 2018 16:52:08 -0500 Subject: [PATCH 7/7] Editor: Reuse hook name across disparate hooks --- .../src/components/post-locked-modal/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index c0509576bf8f86..ecdb4b6a54b327 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -30,19 +30,19 @@ class PostLockedModal extends Component { } componentDidMount() { - const hookNamePrefix = this.getHookNamePrefix(); + const hookName = this.getHookName(); // Details on these events on the Heartbeat API docs // https://developer.wordpress.org/plugins/javascript/heartbeat-api/ - addAction( 'heartbeat.send', hookNamePrefix + '-send', this.sendPostLock ); - addAction( 'heartbeat.tick', hookNamePrefix + '-tick', this.receivePostLock ); + addAction( 'heartbeat.send', hookName, this.sendPostLock ); + addAction( 'heartbeat.tick', hookName, this.receivePostLock ); } componentWillUnmount() { - const hookNamePrefix = this.getHookNamePrefix(); + const hookName = this.getHookName(); - removeAction( 'heartbeat.send', hookNamePrefix + '-send' ); - removeAction( 'heartbeat.tick', hookNamePrefix + '-tick' ); + removeAction( 'heartbeat.send', hookName ); + removeAction( 'heartbeat.tick', hookName ); } /** @@ -51,9 +51,9 @@ class PostLockedModal extends Component { * * @return {string} Hook name prefix. */ - getHookNamePrefix() { + getHookName() { const { instanceId } = this.props; - return 'core/editor/post-locked-modal-' + instanceId + '-heartbeat'; + return 'core/editor/post-locked-modal-' + instanceId; } /**