From acd79ef3d55ca1b96bcfb908e1a10576a2797e9d Mon Sep 17 00:00:00 2001
From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:59:46 +0100
Subject: [PATCH] Refactor to use string instead of an object (#59034)

Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
---
 .../block-templates/render.php.mustache          |  2 +-
 .../interactive-blocks/directive-bind/render.php |  2 +-
 .../interactive-blocks/directive-context/view.js |  2 +-
 .../interactive-blocks/directive-each/render.php |  4 ++--
 .../interactive-blocks/directive-each/view.js    |  2 +-
 .../interactive-blocks/directive-init/render.php |  2 +-
 .../interactive-blocks/directive-key/render.php  |  2 +-
 .../interactive-blocks/directive-key/view.js     |  2 +-
 .../directive-on-document/render.php             |  4 ++--
 .../directive-on-window/render.php               |  2 +-
 .../interactive-blocks/directive-on/render.php   |  2 +-
 .../directive-priorities/render.php              |  4 ++--
 .../interactive-blocks/directive-run/render.php  |  4 ++--
 .../interactive-blocks/directive-run/view.js     |  2 +-
 .../directive-style/render.php                   |  2 +-
 .../interactive-blocks/directive-text/render.php |  2 +-
 .../directive-watch/render.php                   |  2 +-
 .../negation-operator/render.php                 |  2 +-
 .../interactive-blocks/store-tag/render.php      |  2 +-
 .../interactive-blocks/tovdom-islands/render.php | 16 ++++++++--------
 .../plugins/interactive-blocks/tovdom/render.php |  2 +-
 .../interactive-blocks/with-scope/render.php     |  2 +-
 packages/interactivity/docs/1-getting-started.md |  2 +-
 packages/interactivity/src/hooks.tsx             |  4 ++--
 packages/interactivity/src/store.ts              |  2 +-
 25 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/packages/create-block-interactive-template/block-templates/render.php.mustache b/packages/create-block-interactive-template/block-templates/render.php.mustache
index 960da619f790a..bb8f843d80a77 100644
--- a/packages/create-block-interactive-template/block-templates/render.php.mustache
+++ b/packages/create-block-interactive-template/block-templates/render.php.mustache
@@ -17,7 +17,7 @@ $unique_id = wp_unique_id( 'p-' );
 
 <div
 	<?php echo get_block_wrapper_attributes(); ?>
-	data-wp-interactive='{ "namespace": "{{namespace}}" }'
+	data-wp-interactive="{{namespace}}"
 	data-wp-context='{ "isOpen": false }'
 	data-wp-watch="callbacks.logIsOpen"
 >
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
index 24e3c9343c115..1511a8b428de1 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-bind-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-bind" }'>
+<div data-wp-interactive="directive-bind">
 	<a
 		data-wp-bind--href="state.url"
 		data-testid="add missing href at hydration"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
index 7238185bac3aa..aed4a3fefed07 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
@@ -27,7 +27,7 @@ store( 'directive-context', {
 
 const html = `
 		<div
-			data-wp-interactive='{ "namespace": "directive-context-navigate" }'
+			data-wp-interactive="directive-context-navigate"
 			data-wp-router-region="navigation"
 			data-wp-context='{ "text": "second page" }'
 		>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
index 03a2b89cc1233..2fb92f8097834 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-each-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-each" }'>
+<div data-wp-interactive="directive-each">
 	<div data-testid="letters">
 		<template data-wp-each="state.letters">
 			<p data-wp-text="context.item" data-testid="item"></p>
@@ -220,7 +220,7 @@
 <hr>
 
 <div
-	data-wp-interactive='{ "namespace": "directive-each" }'
+	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
 	data-wp-context='{ "list": [ "beta", "gamma", "delta" ] }'
 	data-testid="navigation-updated list"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
index 20e8fcec4b0d9..5b981c552b746 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
@@ -157,7 +157,7 @@ store( 'directive-each', {
 
 const html = `
 <div
-	data-wp-interactive='{ "namespace": "directive-each" }'
+	data-wp-interactive="directive-each"
 	data-wp-router-region="navigation-updated list"
 	data-wp-context='{ "list": [ "alpha", "beta", "gamma", "delta" ] }'
 	data-testid="navigation-updated list"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
index e94c3032d9b70..d9b43c12759d1 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-init-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-init" }'>
+<div data-wp-interactive="directive-init">
 	<div
 		data-testid="single init"
 		data-wp-context='{"isReady":[false],"calls":[0]}'
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
index 422d6ac5eadaa..9beb985d113d1 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
@@ -9,7 +9,7 @@
 ?>
 
 <div
-	data-wp-interactive='{ "namespace": "directive-key" }'
+	data-wp-interactive="directive-key"
 	data-wp-router-region="some-id"
 >
 	<ul>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
index 40fc83621d812..8035757b7ea65 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
@@ -5,7 +5,7 @@ import { store } from '@wordpress/interactivity';
 
 const html = `
 		<div
-			data-wp-interactive='{ "namespace": "directive-key" }'
+			data-wp-interactive="directive-key"
 			data-wp-router-region="some-id"
 		>
 			<ul>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
index cf5261a461e2e..3ce1ac56a25bc 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
@@ -8,8 +8,8 @@
 wp_enqueue_script_module( 'directive-on-document-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-on-document" }'>
-	<button 
+<div data-wp-interactive="directive-on-document">
+	<button
 		data-testid="visibility"
 		data-wp-on--click="actions.visibilityHandler"
 	>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
index 6676012600019..4ad72ff8206e4 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-on-window-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-on-window" }'>
+<div data-wp-interactive="directive-on-window">
 	<button
 		data-wp-on--click="actions.visibilityHandler"
 		data-testid="visibility">
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 edb081922fc0e..bcae884ffe9b7 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-on-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-on" }'>
+<div data-wp-interactive="directive-on">
 	<div>
 		<p data-wp-text="state.counter" data-testid="counter">0</p>
 		<button
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
index 2f98eb62aa5c6..d494d9a7c316f 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-priorities-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-priorities" }'>
+<div data-wp-interactive="directive-priorities">
 	<pre data-testid="execution order"></pre>
 
 	<!-- Element with test directives -->
@@ -25,5 +25,5 @@
 	<!-- WARNING: the `div` with `data-wp-non-existent-directive` should remain
 		inline (i.e., without new line or blank characters in between) to
 		ensure it is the only child node. Otherwise, tests could fail. -->
-	<div data-wp-interactive='{ "namespace": "directive-priorities" }'><div data-wp-non-existent-directive></div></div>
+	<div data-wp-interactive="directive-priorities"><div data-wp-non-existent-directive></div></div>
 </div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php
index eeb63e64eb0d5..1a22d31ad3fd8 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php
@@ -9,7 +9,7 @@
 ?>
 
 <div
-	data-wp-interactive='{ "namespace": "directive-run" }'
+	data-wp-interactive="directive-run"
 	data-wp-router-region='test-directive-run'
 >
 	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
@@ -24,7 +24,7 @@
 	></div>
 </div>
 
-<div data-wp-interactive='{ "namespace": "directive-run" }' >
+<div data-wp-interactive="directive-run" >
 	<button data-testid="toggle" data-wp-on--click="actions.toggle">
 		Toggle
 	</button>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
index ae1095f08ac8f..a9d6927907c29 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
@@ -29,7 +29,7 @@ directive(
 
 const html = `
 <div
-	data-wp-interactive='{ "namespace": "directive-run" }'
+	data-wp-interactive="directive-run"
 	data-wp-router-region='test-directive-run'
 >
 	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
index b101b44ee6b40..7fa1d66fb40a8 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-style-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-style" }'>
+<div data-wp-interactive="directive-style">
 	<button
 		data-wp-on--click="actions.toggleColor"
 		data-testid="toggle color"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
index 428c1bfe24da2..53ac85f9ec39e 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-text-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-context" }'>
+<div data-wp-interactive="directive-context">
 	<div>
 		<span
 			data-wp-text="state.text"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
index 74fb650b15388..0ab17389e7273 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'directive-watch-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "directive-watch" }'>
+<div data-wp-interactive="directive-watch">
 	<div data-wp-show-mock="state.isOpen">
 		<input
 			data-testid="input"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
index b94b639c07985..670e6105145e8 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'negation-operator-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "negation-operator" }'>
+<div data-wp-interactive="negation-operator">
 	<button
 		data-wp-on--click="actions.toggle"
 		data-testid="toggle active value"
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php b/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
index f6a9a3bbf8650..f1739d6f4561b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
@@ -14,7 +14,7 @@
 $test_store_tag_double  = $test_store_tag_counter * 2;
 ?>
 
-<div data-wp-interactive='{ "namespace": "store-tag" }'>
+<div data-wp-interactive="store-tag">
 	<div>
 		Counter:
 		<span
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
index 57ed3714a3b49..e1a8458a8dddf 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
@@ -15,7 +15,7 @@
 		</span>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+	<div data-wp-interactive="tovdom-islands">
 		<div data-wp-show-mock="state.falseValue">
 			<span data-testid="inside an island with json object">
 				This should not be shown because it is inside an island.
@@ -31,7 +31,7 @@
 		</div>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+	<div data-wp-interactive="tovdom-islands">
 		<div data-wp-ignore>
 			<div data-wp-show-mock="state.falseValue">
 				<span
@@ -44,8 +44,8 @@
 		</div>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
-		<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-interactive="tovdom-islands">
 			<div
 				data-wp-show-mock="state.falseValue"
 				data-testid="island inside another island"
@@ -58,10 +58,10 @@
 		</div>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
+	<div data-wp-interactive="tovdom-islands">
 		<div>
 			<div
-				data-wp-interactive='{ "namespace": "tovdom-islands" }'
+				data-wp-interactive="tovdom-islands"
 				data-wp-ignore
 			>
 				<div data-wp-show-mock="state.falseValue">
@@ -77,8 +77,8 @@
 		</div>
 	</div>
 
-	<div data-wp-interactive='{ "namespace": "tovdom-islands" }'>
-		<div data-wp-interactive='{ "namespace": "something-new" }'></div>
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-interactive="something-new"></div>
 		<div data-wp-show-mock="state.falseValue">
 			<span data-testid="directive after different namespace">
 				The directive above should keep the `tovdom-island` namespace,
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
index 07a50745c7242..494a28610d11d 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
@@ -12,7 +12,7 @@
 wp_enqueue_script_module( 'tovdom-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "tovdom" }'>
+<div data-wp-interactive="tovdom">
 	<div data-testid="it should delete comments">
 		<!-- ##1## -->
 		<div data-testid="it should keep this node between comments">
diff --git a/packages/e2e-tests/plugins/interactive-blocks/with-scope/render.php b/packages/e2e-tests/plugins/interactive-blocks/with-scope/render.php
index 699c29aabe28c..ea835f9ca1198 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/with-scope/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/with-scope/render.php
@@ -8,7 +8,7 @@
 wp_enqueue_script_module( 'with-scope-view' );
 ?>
 
-<div data-wp-interactive='{ "namespace": "with-scope" }' data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>
+<div data-wp-interactive="with-scope" data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>
 		<p data-wp-text="context.asyncCounter" data-testid="asyncCounter">0</p>
 		<p data-wp-text="context.syncCounter" data-testid="syncCounter">0</p>
 </div>
diff --git a/packages/interactivity/docs/1-getting-started.md b/packages/interactivity/docs/1-getting-started.md
index 660671a8b10cd..7d8bb8ba23cb2 100644
--- a/packages/interactivity/docs/1-getting-started.md
+++ b/packages/interactivity/docs/1-getting-started.md
@@ -83,7 +83,7 @@ To "activate" the Interactivity API in a DOM element (and its children) we add t
 
 
 ```html
-<div data-wp-interactive='{ "namespace": "myPlugin" }'>
+<div data-wp-interactive="myPlugin">
     <!-- Interactivity API zone -->
 </div>
 ```
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 726579f50176d..0b869dee4fda8 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -198,7 +198,7 @@ const directivePriorities: Record< string, number > = {};
  * the `data-wp-alert` directive will have the `onclick` event handler, e.g.,
  *
  * ```html
- * <div data-wp-interactive='{ "namespace": "messages" }'>
+ * <div data-wp-interactive="messages">
  *   <button data-wp-alert="state.alert">Click me!</button>
  * </div>
  * ```
@@ -208,7 +208,7 @@ const directivePriorities: Record< string, number > = {};
  * attribute, followed by the suffix, like in the following HTML snippet:
  *
  * ```html
- * <div data-wp-interactive='{ "namespace": "myblock" }'>
+ * <div data-wp-interactive="myblock">
  *   <button
  *     data-wp-color--text="state.text"
  *     data-wp-color--background="state.background"
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
index b971bbcd1590c..3b877dac2d414 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -235,7 +235,7 @@ const universalUnlock =
  * the store by using directives in the HTML, e.g.:
  *
  * ```html
- * <div data-wp-interactive='{ "namespace": "counter" }'>
+ * <div data-wp-interactive="counter">
  *   <button
  *     data-wp-text="state.double"
  *     data-wp-on--click="actions.increment"