Interactivity API: Prevent wrong written directives from killing the …

…runtime (#61249) * Prevent error on vdom * Refactor * Remove blank space * Early warn, add test * Move test and add comment * Refactor * Use null * Move changelog Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org> Co-authored-by: sirreal <jonsurrell@git.wordpress.org> Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
WordPress · May 7, 2024 · 7f4adc2 · 7f4adc2
1 parent 2021ed8
commit 7f4adc2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
@@ -6,7 +6,8 @@
  */
 ?>
 
-<div data-wp-interactive="directive-on">
+<?php // A wrong directive name like "data-wp-on--" should not kill the interactivity. ?>
+<div data-wp-interactive="directive-on" data-wp-on--="">
 	<div>
 		<p data-wp-text="state.counter" data-testid="counter">0</p>
 		<button

diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
@@ -6,6 +6,8 @@
 
 -	Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([#61009](https://github.com/WordPress/gutenberg/pull/61009))
 
+-	Prevent wrong written directives from killing the runtime ([#61249](https://github.com/WordPress/gutenberg/pull/61249))
+
 ## 5.6.0 (2024-05-02)
 
 ## 5.5.0 (2024-04-19)

diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts
@@ -118,11 +118,23 @@ export function toVdom( root ) {
 		if ( directives.length ) {
 			props.__directives = directives.reduce(
 				( obj, [ name, ns, value ] ) => {
-					const [ , prefix, suffix = 'default' ] =
-						directiveParser.exec( name );
-					if ( ! obj[ prefix ] ) {
-						obj[ prefix ] = [];
+					const directiveMatch = directiveParser.exec( name );
+					if ( directiveMatch === null ) {
+						if (
+							// @ts-expect-error This is a debug-only warning.
+							typeof SCRIPT_DEBUG !== 'undefined' &&
+							// @ts-expect-error This is a debug-only warning.
+							SCRIPT_DEBUG === true
+						) {
+							// eslint-disable-next-line no-console
+							console.warn( `Invalid directive: ${ name }.` );
+						}
+						return obj;
 					}
+					const prefix = directiveMatch[ 1 ] || '';
+					const suffix = directiveMatch[ 2 ] || 'default';
+
+					obj[ prefix ] = obj[ prefix ] || [];
 					obj[ prefix ].push( {
 						namespace: ns ?? currentNamespace(),
 						value,