@wordpress/eslint-plugin 24.3.1-next.v.202602271551.0 → 24.4.0

package/README.md

@@ -82,11 +82,16 @@ The granular rulesets will not define any environment globals. As such, if they
 | [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md)                                           | Enforce passing valid text domains.                                                             | ✓           |
 | [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md)                           | Enforce adding translator comments.                                                             | ✓           |
 | [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property. | ✓           |
+| [no-dom-globals-in-constructor](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-dom-globals-in-constructor.md)                 | Disallow use of DOM globals in class constructors.                                              |             |
+| [no-dom-globals-in-module-scope](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-dom-globals-in-module-scope.md)               | Disallow use of DOM globals in module scope.                                                    |             |
+| [no-dom-globals-in-react-cc-render](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-dom-globals-in-react-cc-render.md)         | Disallow use of DOM globals in React class component render methods.                            |             |
+| [no-dom-globals-in-react-fc](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-dom-globals-in-react-fc.md)                       | Disallow use of DOM globals in the render cycle of a React function component.                  |             |
 | [components-no-missing-40px-size-prop](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/components-no-missing-40px-size-prop.md)   | Disallow missing `__next40pxDefaultSize` prop on `@wordpress/components` components.            | ✓           |
 | [components-no-unsafe-button-disabled](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/components-no-unsafe-button-disabled.md)   | Disallow using `disabled` on Button without `accessibleWhenDisabled`.                           | ✓           |
 | [no-i18n-in-save](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-i18n-in-save.md)                                             | Disallow translation functions in block save methods.                                           |             |
 | [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md)                         | Disallow the usage of unguarded `getRangeAt` calls.                                             | ✓           |
 | [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md)                                         | Disallow the usage of unsafe APIs from `@wordpress/*` packages                                  | ✓           |
+| [use-recommended-components](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/use-recommended-components.md)                       | Encourage the use of recommended UI components in a WordPress environment.                      |             |
 | [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md)                   | Disallow assigning variable values if unused before a return.                                   | ✓           |
 | [no-wp-process-env](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-wp-process-env.md)                                         | Disallow legacy usage of WordPress variables via `process.env` like `process.env.SCRIPT_DEBUG`. | ✓           |
 | [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md)                             | Disallow unsafe `setTimeout` in component.                                                      |             |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "24.3.1-next.v.202602271551.0+464abe399",
+	"version": "24.4.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,9 +40,9 @@
 		"@babel/eslint-parser": "7.25.7",
 		"@typescript-eslint/eslint-plugin": "^6.4.1",
 		"@typescript-eslint/parser": "^6.4.1",
-		"@wordpress/babel-preset-default": "^8.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/prettier-config": "^4.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/theme": "^0.8.1-next.v.202602271551.0+464abe399",
+		"@wordpress/babel-preset-default": "^8.42.0",
+		"@wordpress/prettier-config": "^4.42.0",
+		"@wordpress/theme": "^0.9.0",
 		"cosmiconfig": "^7.0.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-import-resolver-typescript": "^4.4.4",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "95aa7055a5757219e2d96a91efc69f7dd1b2d4c3"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }

package/rules/__tests__/no-dom-globals-in-constructor.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-dom-globals-in-constructor';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+ruleTester.run( 'no-dom-globals-in-constructor', rule, {
+	valid: [
+		{
+			code: `class Foo {
+				method() { document.title = "test"; }
+			}`,
+		},
+		{
+			code: `class Foo {
+				constructor() { this.name = "test"; }
+			}`,
+		},
+	],
+	invalid: [
+		{
+			code: `class Foo {
+				constructor() { document.title = "test"; }
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'document' },
+				},
+			],
+		},
+		{
+			code: `class Foo {
+				constructor() { window.addEventListener("resize", () => {}); }
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );

package/rules/__tests__/no-dom-globals-in-module-scope.js

@@ -0,0 +1,117 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-dom-globals-in-module-scope';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+ruleTester.run( 'no-dom-globals-in-module-scope', rule, {
+	valid: [
+		{
+			code: 'function foo() { window.scrollTo(0, 0); }',
+		},
+		{
+			code: 'if (typeof window !== "undefined") {}',
+		},
+		{
+			code: 'const isClient = typeof document !== "undefined";',
+		},
+		{
+			code: 'function effect() { const el = document.createElement("div"); }',
+		},
+		{
+			// Function scope in a script file should not be flagged.
+			code: 'function foo() { window.scrollTo(0, 0); }',
+			parserOptions: { ecmaVersion: 2020, sourceType: 'script' },
+		},
+		// Shared globals (browser + node) should NOT be flagged.
+		{
+			code: 'console.log("hello");',
+		},
+		{
+			code: 'setTimeout(() => {}, 100);',
+		},
+		{
+			code: 'const u = new URL("https://example.com");',
+		},
+		{
+			code: 'fetch("/api/data");',
+		},
+	],
+	invalid: [
+		{
+			code: 'const width = window.innerWidth;',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+		{
+			code: 'const el = document.createElement("div");',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'document' },
+				},
+			],
+		},
+		{
+			code: 'navigator.userAgent;',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'navigator' },
+				},
+			],
+		},
+		{
+			code: 'localStorage.getItem("key");',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'localStorage' },
+				},
+			],
+		},
+		{
+			code: 'sessionStorage.setItem("key", "value");',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'sessionStorage' },
+				},
+			],
+		},
+		{
+			code: 'history.pushState({}, "", "/new");',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'history' },
+				},
+			],
+		},
+		{
+			code: 'location.href = "/";',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'location' },
+				},
+			],
+		},
+	],
+} );

package/rules/__tests__/no-dom-globals-in-react-cc-render.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-dom-globals-in-react-cc-render';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+ruleTester.run( 'no-dom-globals-in-react-cc-render', rule, {
+	valid: [
+		{
+			code: `class Foo {
+				render() { const x = 1; return <div>{x}</div>; }
+			}`,
+		},
+		{
+			code: `class Foo {
+				componentDidMount() { window.scrollTo(0, 0); }
+				render() { return <div />; }
+			}`,
+		},
+		{
+			code: `class Foo {
+				render() { return "not jsx"; }
+			}`,
+		},
+	],
+	invalid: [
+		{
+			code: `class Foo {
+				render() { const w = window.innerWidth; return <div>{w}</div>; }
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );

package/rules/__tests__/no-dom-globals-in-react-fc.js

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-dom-globals-in-react-fc';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+ruleTester.run( 'no-dom-globals-in-react-fc', rule, {
+	valid: [
+		{
+			code: 'function notAComponent() { window.scrollTo(0, 0); }',
+		},
+		{
+			code: 'function Component() { return <div />; }',
+		},
+		{
+			code: `function Component() {
+				useEffect(() => { window.scrollTo(0, 0); });
+				return <div />;
+			}`,
+		},
+		{
+			// DOM global inside a nested callback (event handler) inside FC
+			// is allowed — the handler runs at event time, not render time.
+			code: `function Component() {
+				const onClick = () => { document.title = "clicked"; };
+				return <button onClick={onClick} />;
+			}`,
+		},
+	],
+	invalid: [
+		{
+			code: `function Component() {
+				window.addEventListener("resize", () => {});
+				return <div />;
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+		{
+			code: `const Header = () => {
+				const w = document.body.clientWidth;
+				return <header>{w}</header>;
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'document' },
+				},
+			],
+		},
+		{
+			code: `const Icon = ( { name } ) => <span className={ window.iconPrefix + name } />;`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );

package/rules/__tests__/no-i18n-in-save.js

@@ -90,7 +90,6 @@ function render() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -103,7 +102,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -116,7 +114,6 @@ const save = () => {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -129,7 +126,6 @@ const save = function() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -142,7 +138,6 @@ export default function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -157,7 +152,6 @@ const settings = {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -170,7 +164,6 @@ const settings = {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -183,7 +176,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -197,7 +189,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -211,7 +202,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -228,7 +218,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -243,11 +232,9 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -262,7 +249,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},

package/rules/__tests__/no-setting-ds-tokens.js

@@ -24,6 +24,15 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 		{
 			code: `<div style={ { margin: '10px' } } />`,
 		},
+		{
+			code: `const styles = { '--my-custom-prop': 'value' };`,
+		},
+		{
+			code: `const styles = { color: 'var(--wpds-color-fg-content-neutral)' };`,
+		},
+		{
+			code: `const { '--wpds-color-fg-content-neutral': neutralColor } = styles;`,
+		},
 	],
 	invalid: [
 		{
@@ -42,5 +51,29 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 				},
 			],
 		},
+		{
+			code: `const styles = { '--wpds-color-fg-content-neutral': 'red' };`,
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
+		{
+			code: `function getStyles() { return { '--wpds-font-size-md': '10px' }; }`,
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
+		{
+			code: `const config = { inner: { '--wpds-color-fg-content-neutral': 'red' } };`,
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
 	],
 } );

package/rules/__tests__/no-unknown-ds-tokens.js

@@ -39,6 +39,9 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 		{
 			code: '`var(--wpds-color-fg-content-neutral) ${ suffix }`',
 		},
+		{
+			code: `const style = { '--wpds-color-fg-content-neutral': 'red' };`,
+		},
 	],
 	invalid: [
 		{
@@ -142,5 +145,60 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 				},
 			],
 		},
+		{
+			code: `const token = '--wpds-color-fg-content-neutral';`,
+			errors: [
+				{
+					messageId: 'bareToken',
+					data: {
+						tokenNames: "'--wpds-color-fg-content-neutral'",
+					},
+				},
+			],
+		},
+		{
+			code: 'const token = `--wpds-color-fg-content-neutral`;',
+			errors: [
+				{
+					messageId: 'bareToken',
+					data: {
+						tokenNames: "'--wpds-color-fg-content-neutral'",
+					},
+				},
+			],
+		},
+		{
+			code: '<div style={ { gap: `--wpds-color-fg-content-neutral` } } />',
+			errors: [
+				{
+					messageId: 'bareToken',
+					data: {
+						tokenNames: "'--wpds-color-fg-content-neutral'",
+					},
+				},
+			],
+		},
+		{
+			code: '`${ prefix }: --wpds-color-fg-content-neutral`',
+			errors: [
+				{
+					messageId: 'bareToken',
+					data: {
+						tokenNames: "'--wpds-color-fg-content-neutral'",
+					},
+				},
+			],
+		},
+		{
+			code: '`var(--wpds-color-fg-content-neutral) --wpds-color-fg-content-neutral ${ x }`',
+			errors: [
+				{
+					messageId: 'bareToken',
+					data: {
+						tokenNames: "'--wpds-color-fg-content-neutral'",
+					},
+				},
+			],
+		},
 	],
 } );

package/rules/__tests__/no-unsafe-wp-apis.js

@@ -64,7 +64,6 @@ ruleTester.run( 'no-unsafe-wp-apis', rule, {
 				{
 					message: `Usage of \`__experimentalUnsafe\` from \`@wordpress/package\` is not allowed.
 See https://developer.wordpress.org/block-editor/contributors/develop/coding-guidelines/#experimental-and-unstable-apis for details.`,
-					type: 'ImportSpecifier',
 				},
 			],
 		},
@@ -75,7 +74,6 @@ See https://developer.wordpress.org/block-editor/contributors/develop/coding-gui
 				{
 					message: `Usage of \`__experimentalSafe\` from \`@wordpress/unsafe\` is not allowed.
 See https://developer.wordpress.org/block-editor/contributors/develop/coding-guidelines/#experimental-and-unstable-apis for details.`,
-					type: 'ImportSpecifier',
 				},
 			],
 		},
@@ -86,7 +84,6 @@ See https://developer.wordpress.org/block-editor/contributors/develop/coding-gui
 				{
 					message: `Usage of \`__experimentalSafe\` from \`@wordpress/unsafe\` is not allowed.
 See https://developer.wordpress.org/block-editor/contributors/develop/coding-guidelines/#experimental-and-unstable-apis for details.`,
-					type: 'ImportSpecifier',
 				},
 			],
 		},
@@ -97,7 +94,6 @@ See https://developer.wordpress.org/block-editor/contributors/develop/coding-gui
 				{
 					message: `Usage of \`__experimentalUnsafe\` from \`@wordpress/package\` is not allowed.
 See https://developer.wordpress.org/block-editor/contributors/develop/coding-guidelines/#experimental-and-unstable-apis for details.`,
-					type: 'ImportSpecifier',
 				},
 			],
 		},
@@ -108,7 +104,6 @@ See https://developer.wordpress.org/block-editor/contributors/develop/coding-gui
 				{
 					message: `Usage of \`__unstableFeature\` from \`@wordpress/package\` is not allowed.
 See https://developer.wordpress.org/block-editor/contributors/develop/coding-guidelines/#experimental-and-unstable-apis for details.`,
-					type: 'ImportSpecifier',
 				},
 			],
 		},

package/rules/__tests__/use-recommended-components.js

@@ -0,0 +1,91 @@
+/* eslint-env jest */
+
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule, { ALLOWLIST, DENYLIST } from '../use-recommended-components';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 6,
+	},
+} );
+
+ruleTester.run( 'use-recommended-components', rule, {
+	valid: [
+		// Unrelated packages are not affected.
+		"import { Anything } from 'other-package';",
+		"import { Button } from '@wordpress/components';",
+
+		// Default and namespace imports are not affected.
+		"import UI from '@wordpress/ui';",
+		"import * as UI from '@wordpress/ui';",
+
+		// Allowed @wordpress/ui components.
+		"import { Badge } from '@wordpress/ui';",
+		"import { Stack } from '@wordpress/ui';",
+		"import { Badge, Stack } from '@wordpress/ui';",
+	],
+
+	invalid: [
+		// Allowlist: non-allowed @wordpress/ui imports are flagged.
+		{
+			code: "import { SomeComponent } from '@wordpress/ui';",
+			errors: [
+				{
+					message:
+						'`SomeComponent` from `@wordpress/ui` is not yet recommended for use in a WordPress environment.',
+				},
+			],
+		},
+		{
+			code: "import { Foo, Bar } from '@wordpress/ui';",
+			errors: [
+				{
+					message:
+						'`Foo` from `@wordpress/ui` is not yet recommended for use in a WordPress environment.',
+				},
+				{
+					message:
+						'`Bar` from `@wordpress/ui` is not yet recommended for use in a WordPress environment.',
+				},
+			],
+		},
+		// Denylist: denied components are flagged with their message.
+		{
+			code: "import { __experimentalZStack } from '@wordpress/components';",
+			errors: [
+				{
+					message:
+						'__experimentalZStack is planned for deprecation. Write your own CSS instead.',
+				},
+			],
+		},
+		{
+			code: "import { __experimentalZStack as ZStack } from '@wordpress/components';",
+			errors: [
+				{
+					message:
+						'__experimentalZStack is planned for deprecation. Write your own CSS instead.',
+				},
+			],
+		},
+	],
+} );
+
+describe( 'ALLOWLIST and DENYLIST', () => {
+	it( 'should not have overlapping package keys', () => {
+		const allowlistPackages = Object.keys( ALLOWLIST );
+		const denylistPackages = Object.keys( DENYLIST );
+		const overlap = allowlistPackages.filter( ( pkg ) =>
+			denylistPackages.includes( pkg )
+		);
+		expect( overlap ).toEqual( [] );
+	} );
+} );