Bridge @wordpress/build to upstream identity + discovery (#78822, #77465)

pnpm-workspace.yaml

@@ -73,6 +73,12 @@ ignoredOptionalDependencies:
 # Dependencies needing patching.
 patchedDependencies:
 
+  # Decouple script-module identity from `wpPlugin.packageNamespace`, discover
+  # script-module packages outside `./packages/` via convention, and scope the
+  # deregister-before-register to `@wordpress/*`.
+  # Upstream PRs: https://github.com/WordPress/gutenberg/pull/78822 + /pull/77465
+  '@wordpress/build@0.14.0': .pnpm-patches/@wordpress__build@0.14.0.patch
+
   # Vite/esbuild doesn't like the `__esModule` + `exports["default"]` pattern, it winds up double-wrapping the default.
   # See also https://github.com/WordPress/gutenberg/issues/39619
   react-autosize-textarea: .pnpm-patches/react-autosize-textarea.patch

projects/js-packages/number-formatters/changelog/update-wp-build-package-sources

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Add wpScriptModuleExports and expose ./package.json in exports so wp-build convention discovery can register this as a shared script module.

projects/js-packages/number-formatters/package.json

@@ -19,11 +19,13 @@
 			"types": "./dist/types/index.d.ts",
 			"import": "./dist/esm/index.js",
 			"require": "./dist/cjs/index.cjs"
-		}
+		},
+		"./package.json": "./package.json"
 	},
 	"main": "./dist/cjs/index.cjs",
 	"module": "./dist/esm/index.js",
 	"types": "./dist/types/index.d.ts",
+	"wpScriptModuleExports": ".",
 	"scripts": {
 		"build": "pnpm run clean && pnpm run build:ts",
 		"build:ts": "duel --dirs",

projects/packages/premium-analytics/changelog/update-wp-build-package-sources

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Patch `@wordpress/build` to read script-module IDs from `package.json#name`, discover script-module packages outside `./packages/` via convention, and scope the generated `wp_deregister_script_module()` calls to `@wordpress/*` so shared modules fall through to Core's first-wins. Pulls in `@automattic/number-formatters` as the first cross-directory shared script module, and renames the local `init` package to `@automattic/jetpack-premium-analytics-init` so its npm name, import specifier, and script-module ID all match.

projects/packages/premium-analytics/package.json

@@ -16,7 +16,7 @@
 			{
 				"id": "jetpack-premium-analytics",
 				"init": [
-					"@jetpack-premium-analytics/init"
+					"@automattic/jetpack-premium-analytics-init"
 				]
 			}
 		],
@@ -28,8 +28,10 @@
 		}
 	},
 	"dependencies": {
+		"@automattic/number-formatters": "workspace:*",
 		"@wordpress/boot": "0.13.0",
 		"@wordpress/data": "10.46.0",
+		"@wordpress/element": "^6.22.0",
 		"@wordpress/i18n": "^6.9.0",
 		"@wordpress/icons": "^13.0.0",
 		"@wordpress/route": "0.12.0",

projects/packages/premium-analytics/packages/init/package.json

@@ -1,6 +1,6 @@
 {
 	"private": true,
-	"name": "_@jetpack-premium-analytics/init",
+	"name": "@automattic/jetpack-premium-analytics-init",
 	"version": "0.1.0",
 	"type": "module",
 	"wpScript": true,

projects/packages/premium-analytics/routes/dashboard/package.json

@@ -6,6 +6,9 @@
 		"page": "jetpack-premium-analytics"
 	},
 	"dependencies": {
+		"@automattic/number-formatters": "workspace:*",
+		"@types/react": "18.3.28",
+		"@wordpress/element": "^6.22.0",
 		"@wordpress/i18n": "^6.9.0"
 	}
 }

projects/packages/premium-analytics/routes/dashboard/stage.tsx

@@ -1,10 +1,34 @@
+import { formatNumber } from '@automattic/number-formatters';
+import { lazy, Suspense } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
-export const stage = () => {
+const samplePageViews = 1234567;
+const sampleUniqueVisitors = 98432;
+
+const UniqueVisitors = lazy( () =>
+	import( '@automattic/number-formatters' ).then( ( { formatNumberCompact } ) => ( {
+		default: ( { value }: { value: number } ) => <strong>{ formatNumberCompact( value ) }</strong>,
+	} ) )
+);
+
+const Stage = () => {
 	return (
 		<div className="jetpack-premium-analytics-dashboard">
 			<h1>{ __( 'Analytics', 'jetpack-premium-analytics' ) }</h1>
-			<p>{ __( 'Welcome to the Analytics dashboard.', 'jetpack-premium-analytics' ) }</p>
+
+			<p>
+				{ __( 'Unique visitors (dynamic):', 'jetpack-premium-analytics' ) }{ ' ' }
+				<Suspense fallback={ <strong>…</strong> }>
+					<UniqueVisitors value={ sampleUniqueVisitors } />
+				</Suspense>
+			</p>
+
+			<p>
+				{ __( 'Total page views (static):', 'jetpack-premium-analytics' ) }{ ' ' }
+				<strong>{ formatNumber( samplePageViews ) }</strong>
+			</p>
 		</div>
 	);
 };
+
+export { Stage as stage };