Solve using `DataViews` in Jetpack products

We have multiple plugins using or will be using the DataViews: Social, Forms, Protect, Newsletters.

@manzoorwanijk noted:

I don't think DataViews can be used in Jetpack at the moment. We tried using DataViews in Social share status reporting, but Jetpack monorepo tooling wasn’t perfect enough and thus it didn’t allow us to use the component in our JS code. (Internal ref p1725458862906509/1725456184.868289-slack-C05Q5HSS013 )

So, we just used the same markup as that of the Dataviews component and imported only its styles. (internal ref p1725601980355649/1725456184.868289-slack-C05Q5HSS013 )

@anomiex noted:

The problem isn't the monorepo tooling, it's that Gutenberg's @wordpress/dependency-extraction-webpack-plugin doesn't extract the DataViews package, so it (along with its i18n messages and such) get included in each bundle.

From the summary of WordPress/gutenberg#56721 it seems they did that because they didn't consider the new package as being stable yet. Once it's stable they should have dependency-extraction-webpack-plugin start extracting it (file a bug with them if they forgot to do that). Then we wait for all supported versions of WordPress Core to include the wp-dataviews script handle or we add a polyfill (similar to Automattic/jetpack#38428), then things in the monorepo should work.

If you really want to use it despite it still being considered experimental, there's a workaround for your webpack config in Slack (internal ref p1725461808826489/1725456184.868289-slack-C05Q5HSS013 ) that should allow it to be bundled successfully. Note any i18n strings from DataViews would need to be re-translated for Jetpack or whichever plugin, there's no good way to re-use core translations when the package has to be bundled. You'd also need to watch out for it being declared stable and starting to be extracted, e.g. make sure there's E2E test coverage of the feature.

Above is reference to adding below webpack config:

tools/webpack.config.extensions.js

// Add textdomains (but no other optimizations) for @wordpress/dataviews.
jetpackWebpackConfig.TranspileRule( {
includeNodeModules: [
'@wordpress/dataviews/',
],
babelOpts: {
configFile: false,
plugins: [
[
require.resolve( '@automattic/babel-plugin-replace-textdomain' ),
{ textdomain: 'jetpack' },
]
],
},
} ),

Automattic / jetpack

Solve using `DataViews` in Jetpack products #39907