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>

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

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)

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,