Refactor to use string instead of an object

WordPress · Feb 14, 2024 · c2531b2 · c2531b2
1 parent 2d7a1de
commit c2531b2
Show file tree

Hide file tree

Showing 26 changed files with 38 additions and 38 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/router-navigate/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
@@ -18,7 +18,7 @@
 ?>
 
 <div
-	data-wp-interactive='{ "namespace": "router" }'
+	data-wp-interactive="router"
 	data-wp-router-region="region-1"
 >
 	<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"