Skip to content

Protect Components: Use @wordpress/dataviews/wp import path #41510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nateweller merged 6 commits into from
Mar 29, 2025
Merged

Protect Components: Use @wordpress/dataviews/wp import path #41510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9edd2dd
Use /wp import path with dataviews package
nateweller Mar 22, 2025
a8761cf
Add missing wordpress deps to dataviews build process for storybook
nateweller Mar 25, 2025
e4f9321
Remove initial ThreatsDataViews test
nateweller Mar 29, 2025
ae2cb0d
Revert "Remove initial ThreatsDataViews test"
nateweller Mar 29, 2025
53d1977
Fix tests
nateweller Mar 29, 2025
dda7f23
Remove tests and stories from build
nateweller Mar 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .pnpmfile.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ function fixDeps( pkg ) {
'@use-gesture/react',
'use-memo-one',
'uuid',
// Needed for storybook to build with the /wp endpoint. Normal builds don't need them due to dependency extraction.
'@wordpress/date',
'@wordpress/hooks',
] ) {
pkg.optionalDependencies[ dep ] = '*';
}
Expand Down
8 changes: 7 additions & 1 deletion pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion projects/js-packages/scan/src/components/scan-report/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
type Field,
DataViews,
filterSortAndPaginate,
} from '@wordpress/dataviews';
} from '@wordpress/dataviews/wp';
import { __, _n } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { useCallback, useMemo, useState } from 'react';
Expand Down
2 changes: 1 addition & 1 deletion projects/js-packages/scan/src/components/threat-severity-badge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Badge } from '@automattic/jetpack-components';
import { __, sprintf } from '@wordpress/i18n';
import { getSeverityLabel, getSeverityVariant } from '@automattic/jetpack-scan';
import { getSeverityLabel, getSeverityVariant } from '../../utils/severity.js';

const ThreatSeverityBadge = ( { severity, showLabel = false } ) => {
const title = getSeverityLabel( severity );
Expand Down
13 changes: 5 additions & 8 deletions projects/js-packages/scan/src/components/threats-data-views/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,15 @@ import {
type View,
DataViews,
filterSortAndPaginate,
} from '@wordpress/dataviews';
} from '@wordpress/dataviews/wp';
import { dateI18n } from '@wordpress/date';
import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { useCallback, useContext, useMemo, useState } from 'react';
import {
getThreatType,
THREAT_ACTION_FIX,
THREAT_ACTION_IGNORE,
ThreatsContext,
type Threat,
} from '@automattic/jetpack-scan';
import { THREAT_ACTION_FIX, THREAT_ACTION_IGNORE } from '../../actions/index.js';
import { ThreatsContext } from '../../context/index.js';
import { type Threat } from '../../types/threats.js';
import { getThreatType } from '../../utils/threats.js';
import ThreatFixerButton from '../threat-fixer-button/index.js';
import ThreatDetailsModal from '../threat-modals/details-modal/index.js';
import ThreatFixerModal from '../threat-modals/fixer-modal/index.js';
Expand Down
82 changes: 0 additions & 82 deletions projects/js-packages/scan/src/components/threats-data-views/test/index.test.jsx
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions projects/js-packages/scan/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"extends": "jetpack-js-tools/tsconfig.tsc.json",
"include": [ "./src/**/*" ],
"exclude": [ "**/test/**", "**/stories/**" ],
"compilerOptions": {
"typeRoots": [ "./node_modules/@types/", "src/*" ],
"sourceMap": false,
Expand Down
47 changes: 45 additions & 2 deletions projects/plugins/protect/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,56 @@ module.exports = [
* @see https://github.com/Automattic/jetpack/issues/39907
*/
jetpackWebpackConfig.TranspileRule( {
includeNodeModules: [ '@wordpress/dataviews/' ],
includeNodeModules: [ '@wordpress/dataviews/build-wp/' ],
babelOpts: {
configFile: false,
plugins: [
[
require.resolve( '@automattic/babel-plugin-replace-textdomain' ),
{ textdomain: 'jetpack-protect' },
{
textdomain: 'jetpack-protect',
functions: {
__: 1,
Copy link
Member

@ntsekouras ntsekouras Feb 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need the functions object here?

Was the compiling manual? If yes, would that mean updating things here if the core DataViews package adds more i18n functions in its code?

Copy link
Contributor

@anomiex anomiex Feb 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The real problem is that build-wp/index.js isn't preserving the names of the @wordpress/i18n functions. Instead it does a lot of aliasing like import { __ as __9 } from '@wordpress/i18n';.

It turns out that Webpack as used in this particular PR currently winds up undoing all the bad import aliasing, going back to the correct __ name so GlotPress's use of wp i18n will pick up the strings from the bundle. But @automattic/babel-plugin-replace-textdomain (which runs long before Webpack fixes it) needs this to know to inject the correct textdomain into all the aliased calls, because the translations won't be in Core's default domain.

Someday, when Core distributes @wordpress/dataviews like it does @wordpress/components and other packages, none of this will be needed because both the script and translations will come from Core instead of having to be bundled with the plugin. It's unfortunate that we're currently in this situation where @wordpress/dataviews is too unstable for Core to provide but everyone wants to start using it anyway.

__1: 1,
__2: 1,
__3: 1,
__4: 1,
__5: 1,
__6: 1,
__7: 1,
__8: 1,
__9: 1,
__10: 1,
__11: 1,
__12: 1,
__13: 1,
__14: 1,
__15: 1,
__16: 1,
__17: 1,
__18: 1,
__19: 1,
__20: 1,
__21: 1,
__22: 1,
__23: 1,
__24: 1,
__25: 1,
__26: 1,
__27: 1,
__28: 1,
__29: 1,
__30: 1,
_x: 2,
_x1: 2,
_x2: 2,
_x3: 2,
_x4: 2,
_x5: 2,
_n: 3,
_nx: 4,
},
},
],
],
},
Expand Down
Loading