Introduce React Scanner for component usage stats (#65463)

* Try: React Scanner for componenent usage stats

* Fix globs and exclude dirs

* Update glob to avoid native files

* Filter out non-component elements

* Add comments and exclude more dirs

* Merge experimental and unstable components with canonical names

* Specify processors explicitly

* Count component usage only

* Add back omitted comment

* Bump react-scanner to v1.2.0

* Only count wp/components imports from outside the package

* Default to components and props processor

* Default to raw-report

* Specify output directory, gitignore it

* Fix globs to properly exclude native files

* Do not merge unstable and experimental stats with canonical ones

* Exclude a few more dirs

Co-authored-by: tyxla <[email protected]>
Co-authored-by: ciampo <[email protected]>

.gitignore

@@ -13,6 +13,7 @@ coverage
 # Directories/files that may appear in your environment
 *.log
 yarn.lock
+results
 /artifacts
 /test/e2e/artifacts
 /perf-envs

package.json

@@ -141,6 +141,7 @@
 		"react-native": "0.73.3",
 		"react-native-url-polyfill": "1.1.2",
 		"react-refresh": "0.14.0",
+		"react-scanner": "1.2.0",
 		"react-test-renderer": "18.3.1",
 		"reassure": "0.7.1",
 		"redux": "4.1.2",
@@ -179,6 +180,7 @@
 		"build:plugin-zip": "bash ./bin/build-plugin-zip.sh",
 		"clean:package-types": "tsc --build --clean && rimraf \"./packages/*/build-types\"",
 		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"",
+		"component-usage-stats": "node ./node_modules/react-scanner/bin/react-scanner -c ./react-scanner.config.js",
 		"dev": "cross-env NODE_ENV=development npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
 		"dev:packages": "cross-env NODE_ENV=development concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"",
 		"distclean": "git clean --force -d -X",

react-scanner.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+	// Crawl the entire repo
+	crawlFrom: './',
+	// Needed for properly reporting components with dot notation
+	includeSubComponents: true,
+	// Exclude usage in tests, stories, and React Native files.
+	globs: [ '**/!(test|stories)/!(*native).@(js|ts)?(x)' ],
+	// Exclude any vendor or docs directories
+	exclude: [
+		'bin',
+		'build',
+		'build-module',
+		'docs',
+		'node_modules',
+		'patches',
+		'platform-docs',
+		'results',
+		'schemas',
+		'storybook',
+		'test',
+		'tools',
+		'typings',
+		'vendor',
+	],
+	/*
+	 * Filter out any non-component React elements and consider only imports of
+	 * `@wordpress/components` outside of the package.
+	 */
+	importedFrom: '@wordpress/components',
+	processors: [ [ 'raw-report', { outputTo: './results/gutenberg.json' } ] ],
+};