DataViews: WP Specific build (#66825)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: sirreal <[email protected]>
Co-authored-by: luisherranz <[email protected]>
Co-authored-by: jsnajdr <[email protected]>
Co-authored-by: louwie17 <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: Tropicalista <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: manzoorwanijk <[email protected]>

.gitignore

@@ -3,6 +3,7 @@ build
 build-module
 build-style
 build-types
+build-wp
 node_modules
 gutenberg.zip
 coverage

package.json

@@ -93,6 +93,7 @@
 		"cssnano": "6.0.1",
 		"deep-freeze": "0.0.1",
 		"equivalent-key-map": "0.2.2",
+		"esbuild": "0.18.20",
 		"escape-html": "1.0.3",
 		"eslint-import-resolver-node": "0.3.4",
 		"eslint-plugin-eslint-comments": "3.1.2",
@@ -177,9 +178,10 @@
 		"build:package-types": "node ./bin/packages/validate-typescript-version.js && ( tsc --build || ( echo 'tsc failed. Try cleaning up first: `npm run clean:package-types`'; exit 1 ) ) && node ./bin/packages/check-build-type-declaration-files.js",
 		"prebuild:packages": "npm run clean:packages && npm run --if-present --workspaces build",
 		"build:packages": "npm run --silent build:package-types && node ./bin/packages/build.js",
+		"postbuild:packages": " npm run --if-present --workspaces build:wp",
 		"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)\"",
+		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-wp|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\"",

packages/dataviews/README.md

@@ -17,6 +17,8 @@ npm install @wordpress/dataviews --save
 
 <div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's and <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs">example implementation of the Dataviews component</a>.</div>
 
+**Important note** If you're trying to use the `DataViews` component in a WordPress plugin or theme and you're building your scripts using the `@wordpress/scripts` package, you need to import the components from `@wordpress/dataviews/wp` instead of `@wordpress/dataviews`.
+
 ### Usage
 
 The `DataViews` component receives data and some other configuration to render the dataset. It'll call the `onChangeView` callback every time the user has interacted with the dataset in some way (sorted, filtered, changed layout, etc.):

packages/dataviews/build.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-extraneous-dependencies
+const esbuild = require( 'esbuild' );
+
+const wpExternals = {
+	name: 'wordpress-externals',
+	setup( build ) {
+		build.onResolve( { filter: /^@wordpress\// }, () => {
+			// Bundle wordpress packages
+			return { external: false };
+		} );
+		build.onResolve( { filter: /^\.[\.\/]/ }, () => {
+			// Bundle relative paths
+			return { external: false };
+		} );
+		build.onResolve( { filter: /.+/ }, ( args ) => {
+			// Mark everything else as external
+			return { path: args.path, external: true };
+		} );
+	},
+};
+
+esbuild.build( {
+	entryPoints: [ 'src/index.ts' ],
+	bundle: true,
+	outdir: 'build-wp',
+	plugins: [ wpExternals ],
+	jsx: 'automatic',
+	logLevel: 'info',
+	format: 'esm',
+} );

packages/dataviews/package.json

@@ -24,6 +24,20 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js"
+		},
+		"./wp": {
+			"types": "./build-types/index.d.ts",
+			"default": "./build-wp/index.js"
+		},
+		"./package.json": {
+			"default": "./package.json"
+		},
+		"./build-style/": "./build-style/"
+	},
 	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
@@ -48,5 +62,8 @@
 	},
 	"publishConfig": {
 		"access": "public"
+	},
+	"scripts": {
+		"build:wp": "node build"
 	}
 }

packages/dependency-extraction-webpack-plugin/lib/util.js

@@ -5,6 +5,7 @@ const WORDPRESS_NAMESPACE = '@wordpress/';
 // !!
 const BUNDLED_PACKAGES = [
 	'@wordpress/dataviews',
+	'@wordpress/dataviews/wp',
 	'@wordpress/icons',
 	'@wordpress/interface',
 	'@wordpress/sync',

tools/webpack/packages.js

@@ -36,6 +36,7 @@ const WORDPRESS_NAMESPACE = '@wordpress/';
 // !!
 const BUNDLED_PACKAGES = [
 	'@wordpress/dataviews',
+	'@wordpress/dataviews/wp',
 	'@wordpress/icons',
 	'@wordpress/interface',
 	'@wordpress/sync',