Script modules: Add server to client data passing (WordPress#61658)

Add a `scriptmoduledata_{ MODULE_ID }` filter that allows data to be
embedded in page HTML for use by Script Modules.

For example:

    add_filter(
      'scriptmoduledata_MyScriptModuleID',
      function ( array $data ): array {
        $data['doesIt'] = 'it works';
        return $data;
      }
    );

See the proposal for details:

https://make.wordpress.org/core/2024/05/06/proposal-server-to-client-data-sharing-for-script-modules/

Author: sirreal

lib/experimental/script-modules.php

@@ -197,3 +197,94 @@ function gutenberg_dequeue_module( $module_identifier ) {
 	_deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_dequeue_script_module' );
 	wp_script_modules()->dequeue( $module_identifier );
 }
+
+
+/**
+ * Print data associated with Script Modules in Script tags.
+ *
+ * This embeds data in the page HTML so that it is available on page load.
+ *
+ * Data can be associated with a given Script Module by using the
+ * `scriptmoduledata_{$module_id}` filter.
+ *
+ * The data for a given Script Module will be JSON serialized in a script tag with an ID
+ * like `wp-scriptmodule-data_{$module_id}`.
+ */
+function gutenberg_print_script_module_data(): void {
+	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
+	$get_import_map         = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
+
+	$modules = array();
+	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
+		$modules[ $id ] = true;
+	}
+	foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
+		$modules[ $id ] = true;
+	}
+
+	foreach ( array_keys( $modules ) as $module_id ) {
+		/**
+		 * Filters data associated with a given Script Module.
+		 *
+		 * Script Modules may require data that is required for initialization or is essential to
+		 * have immediately available on page load. These are suitable use cases for this data.
+		 *
+		 * This is best suited to a minimal set of data and is not intended to replace the REST API.
+		 *
+		 * If the filter returns no data (an empty array), nothing will be embedded in the page.
+		 *
+		 * The data for a given Script Module, if provided, will be JSON serialized in a script tag
+		 * with an ID like `wp-scriptmodule-data_{$module_id}`.
+		 *
+		 * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that
+		 * the data is associated with.
+		 *
+		 * @param array $data The data that should be associated with the array.
+		 */
+		$data = apply_filters( "scriptmoduledata_{$module_id}", array() );
+
+		if ( is_array( $data ) && ! empty( $data ) ) {
+			/*
+			 * This data will be printed as JSON inside a script tag like this:
+			 *   <script type="application/json"></script>
+			 *
+			 * A script tag must be closed by a sequence beginning with `</`. It's impossible to
+			 * close a script tag without using `<`. We ensure that `<` is escaped and `/` can
+			 * remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
+			 *
+			 *   - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
+			 *   - JSON_UNESCAPED_SLASHES: Don't escape /.
+			 *
+			 * If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
+			 *
+			 *   - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
+			 *   - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
+			 *     JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
+			 *     before PHP 7.1 without this constant. Available as of PHP 7.1.0.
+			 *
+			 * The JSON specification requires encoding in UTF-8, so if the generated HTML page
+			 * is not encoded in UTF-8 then it's not safe to include those literals. They must
+			 * be escaped to avoid encoding issues.
+			 *
+			 * @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
+			 * @see https://www.php.net/manual/en/json.constants.php for details on these constants.
+			 * @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
+			 */
+			$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
+			if ( 'UTF-8' !== get_option( 'blog_charset' ) ) {
+				$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
+			}
+
+			wp_print_inline_script_tag(
+				wp_json_encode( $data, $json_encode_flags ),
+				array(
+					'type' => 'application/json',
+					'id'   => "wp-scriptmodule-data_{$module_id}",
+				)
+			);
+		}
+	}
+}
+
+add_action( 'wp_footer', 'gutenberg_print_script_module_data' );
+add_action( 'admin_print_footer_scripts', 'gutenberg_print_script_module_data' );

packages/interactivity/src/store.ts

@@ -319,15 +319,15 @@ export function store(
 }
 
 export const parseInitialData = ( dom = document ) => {
-	const storeTag = dom.querySelector(
-		`script[type="application/json"]#wp-interactivity-data`
-	);
-	if ( storeTag?.textContent ) {
+	const jsonDataScriptTag =
+		// Preferred Script Module data passing form
+		dom.getElementById( 'wp-scriptmodule-data_@wordpress/interactivity' ) ??
+		// Legacy form
+		dom.getElementById( 'wp-interactivity-data' );
+	if ( jsonDataScriptTag?.textContent ) {
 		try {
-			return JSON.parse( storeTag.textContent );
-		} catch ( e ) {
-			// Do nothing.
-		}
+			return JSON.parse( jsonDataScriptTag.textContent );
+		} catch {}
 	}
 	return {};
 };