Rename yieldToMain to splitTask and export from @wordpress/interactivity (#62665)

* Export yieldToMain from @wordpress/interactivity

* Rename yieldToMain to splitTask

Co-authored-by: tunetheweb <[email protected]>

* Update docs to note splitTask being exported

---------

Co-authored-by: tunetheweb <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: luisherranz <[email protected]>
Co-authored-by: cbravobernal <[email protected]>

Author: 4 people

docs/reference-guides/interactivity-api/api-reference.md

@@ -813,7 +813,8 @@ const { state } = store("myPlugin", {
 As mentioned above with [`wp-on`](#wp-on), [`wp-on-window`](#wp-on-window), and [`wp-on-document`](#wp-on-document), an async action should be used whenever the `async` versions of the aforementioned directives cannot be used due to the action requiring synchronous access to the `event` object. Synchronous access is reqired whenever the action needs to call `event.preventDefault()`, `event.stopPropagation()`, or `event.stopImmediatePropagation()`. To ensure that the action code does not contribute to a long task, you may manually yield to the main thread after calling the synchronous event API. For example:
 
 ```js
-function toMainThread() {
+// Note: In WordPress 6.6 this splitTask function is exported by @wordpress/interactivity.
+function splitTask() {
   return new Promise(resolve => {
     setTimeout(resolve, 0);
   });
@@ -823,7 +824,7 @@ store("myPlugin", {
   actions: {
     handleClick: function* (event) {
       event.preventDefault();
-      yield toMainThread();
+      yield splitTask();
       doTheWork();
     },
   },

packages/interactivity/src/directives.tsx

@@ -11,13 +11,7 @@ import { deepSignal, peek, type DeepSignal } from 'deepsignal';
 /**
  * Internal dependencies
  */
-import {
-	useWatch,
-	useInit,
-	kebabToCamelCase,
-	warn,
-	yieldToMain,
-} from './utils';
+import { useWatch, useInit, kebabToCamelCase, warn, splitTask } from './utils';
 import type { DirectiveEntry } from './hooks';
 import { directive, getScope, getEvaluate } from './hooks';
 
@@ -246,7 +240,7 @@ const getGlobalAsyncEventDirective = ( type: 'window' | 'document' ) => {
 				const eventName = entry.suffix.split( '--', 1 )[ 0 ];
 				useInit( () => {
 					const cb = async ( event: Event ) => {
-						await yieldToMain();
+						await splitTask();
 						evaluate( entry, event );
 					};
 					const globalVar = type === 'window' ? window : document;
@@ -361,7 +355,7 @@ export default () => {
 						existingHandler( event );
 					}
 					entries.forEach( async ( entry ) => {
-						await yieldToMain();
+						await splitTask();
 						evaluate( entry, event );
 					} );
 				};

packages/interactivity/src/index.ts

@@ -25,6 +25,7 @@ export {
 	useLayoutEffect,
 	useCallback,
 	useMemo,
+	splitTask,
 } from './utils';
 
 export { useState, useRef } from 'preact/hooks';

packages/interactivity/src/init.ts

@@ -6,7 +6,7 @@ import { hydrate, type ContainerNode, type ComponentChild } from 'preact';
  * Internal dependencies
  */
 import { toVdom, hydratedIslands } from './vdom';
-import { createRootFragment, yieldToMain } from './utils';
+import { createRootFragment, splitTask } from './utils';
 import { directivePrefix } from './constants';
 
 // Keep the same root fragment for each interactive region node.
@@ -35,11 +35,11 @@ export const init = async () => {
 
 	for ( const node of nodes ) {
 		if ( ! hydratedIslands.has( node ) ) {
-			await yieldToMain();
+			await splitTask();
 			const fragment = getRegionRootFragment( node );
 			const vdom = toVdom( node );
 			initialVdom.set( node, vdom );
-			await yieldToMain();
+			await splitTask();
 			hydrate( vdom, fragment );
 		}
 	}

packages/interactivity/src/utils.ts

@@ -54,7 +54,7 @@ const afterNextFrame = ( callback: () => void ) => {
  *
  * @return Promise
  */
-export const yieldToMain = () => {
+export const splitTask = () => {
 	return new Promise( ( resolve ) => {
 		// TODO: Use scheduler.yield() when available.
 		setTimeout( resolve, 0 );