From ce2eb1b161ff882a68508ca0194dbbfcac9baf08 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 30 Apr 2024 15:33:42 +0200 Subject: [PATCH 1/8] Prevent error on vdom --- packages/interactivity/src/vdom.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts index 05b49012c48861..3274da4d18a2ed 100644 --- a/packages/interactivity/src/vdom.ts +++ b/packages/interactivity/src/vdom.ts @@ -118,8 +118,22 @@ export function toVdom( root ) { if ( directives.length ) { props.__directives = directives.reduce( ( obj, [ name, ns, value ] ) => { - const [ , prefix, suffix = 'default' ] = - directiveParser.exec( name ); + let [ prefix, suffix ] = [ '', 'default' ]; + + const directiveMatch = directiveParser.exec( name ); + if ( directiveMatch ) { + const [ , _prefix, _suffix ] = directiveMatch; + prefix = _prefix; + suffix = _suffix ?? 'default'; + } else if ( + // @ts-expect-error + typeof SCRIPT_DEBUG !== 'undefined' && + // @ts-expect-error + SCRIPT_DEBUG === true + ) { + // eslint-disable-next-line no-console + console.warn( `Invalid directive: ${ name }.` ); + } if ( ! obj[ prefix ] ) { obj[ prefix ] = []; } From 4ab2b12c39df385097509339ea483f8dfefb5e9b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 30 Apr 2024 19:01:17 +0200 Subject: [PATCH 2/8] Refactor --- packages/interactivity/CHANGELOG.md | 2 ++ packages/interactivity/src/vdom.ts | 23 ++++++++++++----------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index fa4fee5976b0cd..bdfadffcb7ff3a 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -18,6 +18,8 @@ - Hooks useMemo and useCallback should return a value. ([#60474](https://github.com/WordPress/gutenberg/pull/60474)) +- Prevent wrong written directives from killing the runtime ([#61249](https://github.com/WordPress/gutenberg/pull/61249)) + ## 5.4.0 (2024-04-03) ## 5.3.0 (2024-03-21) diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts index 3274da4d18a2ed..286c633ae373b9 100644 --- a/packages/interactivity/src/vdom.ts +++ b/packages/interactivity/src/vdom.ts @@ -118,15 +118,16 @@ export function toVdom( root ) { if ( directives.length ) { props.__directives = directives.reduce( ( obj, [ name, ns, value ] ) => { - let [ prefix, suffix ] = [ '', 'default' ]; - const directiveMatch = directiveParser.exec( name ); - if ( directiveMatch ) { - const [ , _prefix, _suffix ] = directiveMatch; - prefix = _prefix; - suffix = _suffix ?? 'default'; - } else if ( - // @ts-expect-error + const prefix = directiveMatch ? directiveMatch[ 1 ] : ''; + const suffix = + directiveMatch && directiveMatch[ 2 ] + ? directiveMatch[ 2 ] + : 'default'; + + if ( + ! directiveMatch && + // @ts-expect-error This is a debug-only warning. typeof SCRIPT_DEBUG !== 'undefined' && // @ts-expect-error SCRIPT_DEBUG === true @@ -134,14 +135,14 @@ export function toVdom( root ) { // eslint-disable-next-line no-console console.warn( `Invalid directive: ${ name }.` ); } - if ( ! obj[ prefix ] ) { - obj[ prefix ] = []; - } + + obj[ prefix ] = obj[ prefix ] || []; obj[ prefix ].push( { namespace: ns ?? currentNamespace(), value, suffix, } ); + return obj; }, {} From 217f6233e24736304faf527c60327a070962ab98 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 30 Apr 2024 19:09:28 +0200 Subject: [PATCH 3/8] Remove blank space --- packages/interactivity/src/vdom.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts index 286c633ae373b9..701b1767fec6b8 100644 --- a/packages/interactivity/src/vdom.ts +++ b/packages/interactivity/src/vdom.ts @@ -142,7 +142,6 @@ export function toVdom( root ) { value, suffix, } ); - return obj; }, {} From e3d6bfb61f9191446f23a35b6e5803d6ed49a956 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 6 May 2024 17:34:44 +0200 Subject: [PATCH 4/8] Early warn, add test --- .../directive-on/render.php | 1 + packages/interactivity/src/vdom.ts | 21 ++++++++++--------- 2 files changed, 12 insertions(+), 10 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 index a1541ebe4fb8ca..1297dcca2f5600 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php @@ -12,6 +12,7 @@
diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts index 701b1767fec6b8..13dc8c57f6c12c 100644 --- a/packages/interactivity/src/vdom.ts +++ b/packages/interactivity/src/vdom.ts @@ -125,17 +125,18 @@ export function toVdom( root ) { ? directiveMatch[ 2 ] : 'default'; - if ( - ! directiveMatch && - // @ts-expect-error This is a debug-only warning. - typeof SCRIPT_DEBUG !== 'undefined' && - // @ts-expect-error - SCRIPT_DEBUG === true - ) { - // eslint-disable-next-line no-console - console.warn( `Invalid directive: ${ name }.` ); + if ( ! directiveMatch ) { + if ( + // @ts-expect-error This is a debug-only warning. + typeof SCRIPT_DEBUG !== 'undefined' && + // @ts-expect-error + SCRIPT_DEBUG === true + ) { + // eslint-disable-next-line no-console + console.warn( `Invalid directive: ${ name }.` ); + } + return obj; } - obj[ prefix ] = obj[ prefix ] || []; obj[ prefix ].push( { namespace: ns ?? currentNamespace(), From e7e06a4055c2816d383047693e6fd4d37db1506b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 6 May 2024 17:51:38 +0200 Subject: [PATCH 5/8] Move test and add comment --- .../plugins/interactive-blocks/directive-on/render.php | 4 ++-- 1 file changed, 2 insertions(+), 2 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 index 1297dcca2f5600..127d6080f8f5b3 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php @@ -6,13 +6,13 @@ */ ?> -
+ +

0

From b68ad28103bf6316249777f5a9f99e328c4c96bc Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 6 May 2024 18:12:06 +0200 Subject: [PATCH 6/8] Refactor --- packages/interactivity/src/vdom.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts index 13dc8c57f6c12c..a85af9062add13 100644 --- a/packages/interactivity/src/vdom.ts +++ b/packages/interactivity/src/vdom.ts @@ -119,17 +119,11 @@ export function toVdom( root ) { props.__directives = directives.reduce( ( obj, [ name, ns, value ] ) => { const directiveMatch = directiveParser.exec( name ); - const prefix = directiveMatch ? directiveMatch[ 1 ] : ''; - const suffix = - directiveMatch && directiveMatch[ 2 ] - ? directiveMatch[ 2 ] - : 'default'; - if ( ! directiveMatch ) { if ( // @ts-expect-error This is a debug-only warning. typeof SCRIPT_DEBUG !== 'undefined' && - // @ts-expect-error + // @ts-expect-error This is a debug-only warning. SCRIPT_DEBUG === true ) { // eslint-disable-next-line no-console @@ -137,6 +131,9 @@ export function toVdom( root ) { } return obj; } + const prefix = directiveMatch[ 1 ] || ''; + const suffix = directiveMatch[ 2 ] || 'default'; + obj[ prefix ] = obj[ prefix ] || []; obj[ prefix ].push( { namespace: ns ?? currentNamespace(), From ae3b8e3ed509205a217c2c3a9abe835808c8aa0a Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 6 May 2024 18:20:42 +0200 Subject: [PATCH 7/8] Use null --- packages/interactivity/src/vdom.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts index a85af9062add13..9e6221bb871f4f 100644 --- a/packages/interactivity/src/vdom.ts +++ b/packages/interactivity/src/vdom.ts @@ -119,7 +119,7 @@ export function toVdom( root ) { props.__directives = directives.reduce( ( obj, [ name, ns, value ] ) => { const directiveMatch = directiveParser.exec( name ); - if ( ! directiveMatch ) { + if ( directiveMatch === null ) { if ( // @ts-expect-error This is a debug-only warning. typeof SCRIPT_DEBUG !== 'undefined' && From 1df720cfa2956ca8d3be5b66c7fd060a4f31a12b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 7 May 2024 20:17:18 +0200 Subject: [PATCH 8/8] Move changelog --- packages/interactivity/CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index bdfadffcb7ff3a..56352eb4c489bc 100644 --- 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) @@ -18,8 +20,6 @@ - Hooks useMemo and useCallback should return a value. ([#60474](https://github.com/WordPress/gutenberg/pull/60474)) -- Prevent wrong written directives from killing the runtime ([#61249](https://github.com/WordPress/gutenberg/pull/61249)) - ## 5.4.0 (2024-04-03) ## 5.3.0 (2024-03-21)