@wordpress/interactivity - npm Package Compare versions

Comparing version 2.2.1-next.5a1d1283.0 to 2.3.0

build-module/directives.js

@@ -5,3 +5,3 @@ import { createElement, Fragment } from "@wordpress/element";
  */
-import { useContext, useMemo, useEffect, useRef } from 'preact/hooks';
+import { useContext, useMemo, useEffect, useRef, useLayoutEffect } from 'preact/hooks';
 import { deepSignal, peek } from 'deepsignal';
@@ -228,2 +228,10 @@
       element.props[attribute] = result;
+      // Preact doesn't handle the `role` attribute properly, as it doesn't remove it when `null`.
+      // We need this workaround until the following issue is solved:
+      // https://github.com/preactjs/preact/issues/4136
+      useLayoutEffect(() => {
+        if (attribute === 'role' && (result === null || result === undefined)) {
+          element.ref.current.removeAttribute(attribute);
+        }
+      }, [attribute, result]);
 
@@ -243,3 +251,3 @@ // This seems necessary because Preact doesn't change the attributes
         // cast to `0` instead
-        attribute !== 'tabIndex' && attribute !== 'download' && attribute !== 'rowSpan' && attribute !== 'colSpan' && attribute in el) {
+        attribute !== 'tabIndex' && attribute !== 'download' && attribute !== 'rowSpan' && attribute !== 'colSpan' && attribute !== 'role' && attribute in el) {
           try {
@@ -246,0 +254,0 @@ el[attribute] = result === null || result === undefined ? '' : result;

build-module/router.js

@@ -81,7 +81,23 @@ /**
 
+// Variable to store the current navigation.
+let navigatingTo = '';
+
 // Navigate to a new page.
 export const navigate = async (href, options = {}) => {
   const url = cleanUrl(href);
+  navigatingTo = href;
   prefetch(url, options);
-  const page = await pages.get(url);
+
+  // Create a promise that resolves when the specified timeout ends. The
+  // timeout value is 10 seconds by default.
+  const timeoutPromise = new Promise(resolve => {
+    var _options$timeout;
+    return setTimeout(resolve, (_options$timeout = options.timeout) !== null && _options$timeout !== void 0 ? _options$timeout : 10000);
+  });
+  const page = await Promise.race([pages.get(url), timeoutPromise]);
+
+  // Once the page is fetched, the destination URL could have changed (e.g.,
+  // by clicking another link in the meantime). If so, bail out, and let the
+  // newer execution to update the HTML.
+  if (navigatingTo !== href) return;
   if (page) {
@@ -92,2 +108,3 @@ renderRegions(page);
     window.location.assign(href);
+    await new Promise(() => {});
   }
@@ -94,0 +111,0 @@ };

build/directives.js

@@ -234,2 +234,10 @@ "use strict";
       element.props[attribute] = result;
+      // Preact doesn't handle the `role` attribute properly, as it doesn't remove it when `null`.
+      // We need this workaround until the following issue is solved:
+      // https://github.com/preactjs/preact/issues/4136
+      (0, _hooks.useLayoutEffect)(() => {
+        if (attribute === 'role' && (result === null || result === undefined)) {
+          element.ref.current.removeAttribute(attribute);
+        }
+      }, [attribute, result]);
 
@@ -249,3 +257,3 @@ // This seems necessary because Preact doesn't change the attributes
         // cast to `0` instead
-        attribute !== 'tabIndex' && attribute !== 'download' && attribute !== 'rowSpan' && attribute !== 'colSpan' && attribute in el) {
+        attribute !== 'tabIndex' && attribute !== 'download' && attribute !== 'rowSpan' && attribute !== 'colSpan' && attribute !== 'role' && attribute in el) {
           try {
@@ -252,0 +260,0 @@ el[attribute] = result === null || result === undefined ? '' : result;

build/router.js

@@ -89,7 +89,23 @@ "use strict";
 
+// Variable to store the current navigation.
+let navigatingTo = '';
+
 // Navigate to a new page.
 const navigate = async (href, options = {}) => {
   const url = cleanUrl(href);
+  navigatingTo = href;
   prefetch(url, options);
-  const page = await pages.get(url);
+
+  // Create a promise that resolves when the specified timeout ends. The
+  // timeout value is 10 seconds by default.
+  const timeoutPromise = new Promise(resolve => {
+    var _options$timeout;
+    return setTimeout(resolve, (_options$timeout = options.timeout) !== null && _options$timeout !== void 0 ? _options$timeout : 10000);
+  });
+  const page = await Promise.race([pages.get(url), timeoutPromise]);
+
+  // Once the page is fetched, the destination URL could have changed (e.g.,
+  // by clicking another link in the meantime). If so, bail out, and let the
+  // newer execution to update the HTML.
+  if (navigatingTo !== href) return;
   if (page) {
@@ -100,2 +116,3 @@ renderRegions(page);
     window.location.assign(href);
+    await new Promise(() => {});
   }
@@ -102,0 +119,0 @@ };

CHANGELOG.md

@@ -5,2 +5,13 @@ <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
+## 2.3.0 (2023-09-20)
+
+### Enhancements
+
+-   Improve `navigate()` to render only the result of the last call when multiple happen simultaneously. ([#54201](https://github.com/WordPress/gutenberg/pull/54201))
+
+### Bug Fix
+
+-   Remove `role` attribute when set to `null` in `data-wp-bind`. ([#54608](https://github.com/WordPress/gutenberg/pull/54608))
+-   Add `timeout` option to `navigate()`, with a default value of `10000` milliseconds. ([#54474](https://github.com/WordPress/gutenberg/pull/54474))
+
 ## 2.2.0 (2023-08-31)
@@ -7,0 +18,0 @@

docs/README.md

@@ -8,3 +8,3 @@ # Interactivity API Docs
 
-> As part of an [Open Source project](https://developer.wordpress.org/block-editor/explanations/faq/#the-gutenberg-project) we encourage participation in helping shape this API and its Docs. The [discussions](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) and [issues](https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API) in GitHub are the best place to engage.
+> As part of an [Open Source project](https://developer.wordpress.org/block-editor/getting-started/faq/#the-gutenberg-project) we encourage participation in helping shape this API and its Docs. The [discussions](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) and [issues](https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API) in GitHub are the best place to engage.
 
@@ -11,0 +11,0 @@

package.json

 {
 	"name": "@wordpress/interactivity",
-	"version": "2.2.1-next.5a1d1283.0",
+	"version": "2.3.0",
 	"description": "Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.",
@@ -35,3 +35,3 @@ "author": "The WordPress Contributors",
 	},
-	"gitHead": "fa0b66987dab5a15f38663e06036d09bccffaa4b"
+	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
 }

README.md

@@ -8,3 +8,3 @@ # Interactivity API
 > **Note**
-> This package enables the API shared at [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). As part of an [Open Source project](https://developer.wordpress.org/block-editor/explanations/faq/#the-gutenberg-project) we encourage participation in helping shape this API and the [discussions in GitHub](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) is the best place to engage.
+> This package enables the API shared at [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). As part of an [Open Source project](https://developer.wordpress.org/block-editor/getting-started/faq/#the-gutenberg-project) we encourage participation in helping shape this API and the [discussions in GitHub](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) is the best place to engage.
 
@@ -11,0 +11,0 @@ This package can be tested, but it's still very experimental.

src/directives.js

 /**
  * External dependencies
  */
-import { useContext, useMemo, useEffect, useRef } from 'preact/hooks';
+import {
+	useContext,
+	useMemo,
+	useEffect,
+	useRef,
+	useLayoutEffect,
+} from 'preact/hooks';
 import { deepSignal, peek } from 'deepsignal';
@@ -221,2 +227,13 @@
 					element.props[ attribute ] = result;
+					// Preact doesn't handle the `role` attribute properly, as it doesn't remove it when `null`.
+					// We need this workaround until the following issue is solved:
+					// https://github.com/preactjs/preact/issues/4136
+					useLayoutEffect( () => {
+						if (
+							attribute === 'role' &&
+							( result === null || result === undefined )
+						) {
+							element.ref.current.removeAttribute( attribute );
+						}
+					}, [ attribute, result ] );
 
@@ -245,2 +262,3 @@ // This seems necessary because Preact doesn't change the attributes
 							attribute !== 'colSpan' &&
+							attribute !== 'role' &&
 							attribute in el
@@ -247,0 +265,0 @@ ) {

src/router.js

@@ -81,7 +81,24 @@ /**
 
+// Variable to store the current navigation.
+let navigatingTo = '';
+
 // Navigate to a new page.
 export const navigate = async ( href, options = {} ) => {
 	const url = cleanUrl( href );
+	navigatingTo = href;
 	prefetch( url, options );
-	const page = await pages.get( url );
+
+	// Create a promise that resolves when the specified timeout ends. The
+	// timeout value is 10 seconds by default.
+	const timeoutPromise = new Promise( ( resolve ) =>
+		setTimeout( resolve, options.timeout ?? 10000 )
+	);
+
+	const page = await Promise.race( [ pages.get( url ), timeoutPromise ] );
+
+	// Once the page is fetched, the destination URL could have changed (e.g.,
+	// by clicking another link in the meantime). If so, bail out, and let the
+	// newer execution to update the HTML.
+	if ( navigatingTo !== href ) return;
+
 	if ( page ) {
@@ -96,2 +113,3 @@ renderRegions( page );
 		window.location.assign( href );
+		await new Promise( () => {} );
 	}
@@ -98,0 +116,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

819624

increased by0.99%

Lines of code

3449

increased by2.22%

Number of low quality alerts

0

decreased by-100%

No dependency changes