Prettier v3

.changeset/rare-ducks-hang.md

@@ -0,0 +1,6 @@
+---
+"@10up/eslint-config": major
+---
+
+- Bump minimum prettier version to v3.
+- Removed `jsdoc/newline-after-description` eslint rule since it has been removed from the `eslint-plugin-jsdoc`.

.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+	extends: ['@10up/eslint-config/node'],
+	rules: {
+		'global-require': 'off',
+		'import/no-dynamic-require': 'off',
+		'no-process-exit': 'off',
+	},
+};

package.json

@@ -25,7 +25,7 @@
 	"@changesets/cli": "^2.26.1",
 	"husky": "^8.0.3",
 	"lint-staged": "^15.2.0",
-	"prettier": "^2.6.1"
+	"prettier": "^3.1.1"
 },
   "description": "Collection of reusable scripts for 10up development.",
   "engines": {

packages/babel-preset-default/__tests__/__snapshots__/index.js.snap

@@ -78,26 +78,19 @@ Object.defineProperty(exports, \\"__esModule\\", {
 });
 exports.default = void 0;
 var _react = require(\\"react\\");
-var _jsxRuntime = require(\\"react/jsx-runtime\\");
 // eslint-disable-line import/no-extraneous-dependencies
 // eslint-disable-line import/no-extraneous-dependencies
 
 const FCComponent = ({
   title,
   url,
   description
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(\\"div\\", {
-  className: \\"component-test-babel\\",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(\\"a\\", {
-    href: url,
-    title: title,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(\\"h1\\", {
-      children: title
-    })
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(\\"p\\", {
-    children: description
-  })]
-});
+}) => /*#__PURE__*/React.createElement(\\"div\\", {
+  className: \\"component-test-babel\\"
+}, /*#__PURE__*/React.createElement(\\"a\\", {
+  href: url,
+  title: title
+}, /*#__PURE__*/React.createElement(\\"h1\\", null, title)), /*#__PURE__*/React.createElement(\\"p\\", null, description));
 FCComponent.defaultProps = {
   title: '',
   url: '',
@@ -111,12 +104,9 @@ class ClassComponent extends _react.Component {
     const {
       title
     } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(\\"div\\", {
-      className: \\"Class Component\\",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(\\"h1\\", {
-        children: title
-      })
-    });
+    return /*#__PURE__*/React.createElement(\\"div\\", {
+      className: \\"Class Component\\"
+    }, /*#__PURE__*/React.createElement(\\"h1\\", null, title));
   }
 }
 var _default = exports.default = FCComponent;"
@@ -131,42 +121,46 @@ Object.defineProperty(exports, \\"__esModule\\", {
 exports.default = void 0;
 var _react = require(\\"react\\");
 var _propTypes = _interopRequireDefault(require(\\"prop-types\\"));
-var _jsxDevRuntime = require(\\"react/jsx-dev-runtime\\");
 var _jsxFileName = \\"\\"; // eslint-disable-line import/no-extraneous-dependencies
-// eslint-disable-line import/no-extraneous-dependencies
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-line import/no-extraneous-dependencies
+
 const FCComponent = ({
   title,
   url,
   description
-}) => /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"div\\", {
+}) => /*#__PURE__*/React.createElement(\\"div\\", {
   className: \\"component-test-babel\\",
-  children: [/*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"a\\", {
-    href: url,
-    title: title,
-    children: /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"h1\\", {
-      children: title
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 7,
-      columnNumber: 4
-    }, void 0)
-  }, void 0, false, {
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 5,
+    columnNumber: 2
+  }
+}, /*#__PURE__*/React.createElement(\\"a\\", {
+  href: url,
+  title: title,
+  __self: void 0,
+  __source: {
     fileName: _jsxFileName,
     lineNumber: 6,
     columnNumber: 3
-  }, void 0), /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"p\\", {
-    children: description
-  }, void 0, false, {
+  }
+}, /*#__PURE__*/React.createElement(\\"h1\\", {
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 7,
+    columnNumber: 4
+  }
+}, title)), /*#__PURE__*/React.createElement(\\"p\\", {
+  __self: void 0,
+  __source: {
     fileName: _jsxFileName,
     lineNumber: 9,
     columnNumber: 3
-  }, void 0)]
-}, void 0, true, {
-  fileName: _jsxFileName,
-  lineNumber: 5,
-  columnNumber: 2
-}, void 0);
+  }
+}, description));
 FCComponent.propTypes = {
   title: _propTypes.default.string,
   url: _propTypes.default.string,
@@ -185,20 +179,22 @@ class ClassComponent extends _react.Component {
     const {
       title
     } = this.props;
-    return /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"div\\", {
+    return /*#__PURE__*/React.createElement(\\"div\\", {
       className: \\"Class Component\\",
-      children: /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"h1\\", {
-        children: title
-      }, void 0, false, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 33,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/React.createElement(\\"h1\\", {
+      __self: this,
+      __source: {
         fileName: _jsxFileName,
         lineNumber: 34,
         columnNumber: 5
-      }, this)
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 33,
-      columnNumber: 4
-    }, this);
+      }
+    }, title));
   }
 }
 ClassComponent.propTypes = {

packages/eslint-config/package.json

@@ -43,27 +43,27 @@
 	"devDependencies": {
 		"@wordpress/eslint-plugin": "^14.9.0",
 		"eslint": "^8.40.0",
-		"prettier": "^2.4.1"
+		"prettier": "^3.1.1"
 	},
 	"engines": {
 		"node": "^16 || >=18"
 	},
 	"peerDependencies": {
-		"@babel/core": "^7.21.4",
-		"@babel/eslint-parser": "^7.21.3",
-		"@wordpress/eslint-plugin": "^14.9.0",
-		"eslint": "^7.32.0 || ^8.0.0",
+		"@babel/core": "^7.23.7",
+		"@babel/eslint-parser": "^7.23.3",
+		"@wordpress/eslint-plugin": "^17.5.0",
+		"eslint": "^>=8.0.0",
 		"eslint-config-airbnb": "^19.0.4",
 		"eslint-config-airbnb-base": "^15.0.0",
-		"eslint-config-prettier": "^8.6.0",
-		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-jest": "^27.2.1",
-		"eslint-plugin-jsdoc": "^39.9.1",
-		"eslint-plugin-jsx-a11y": "^6.7.1",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.32.2",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-jest": "^27.6.1",
+		"eslint-plugin-jsdoc": "^48.0.2",
+		"eslint-plugin-jsx-a11y": "^6.8.0",
+		"eslint-plugin-prettier": "^5.1.2",
+		"eslint-plugin-react": "^7.33.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
-		"prettier": ">=2.4.1"
+		"prettier": ">=3.0.0"
 	},
 	"peerDependenciesMeta": {
 		"@wordpress/eslint-plugin": {

packages/eslint-config/rules/jsdoc.js

@@ -6,7 +6,6 @@ module.exports = {
 		'jsdoc/check-param-names': 1,
 		'jsdoc/check-tag-names': 1,
 		'jsdoc/check-types': 1,
-		'jsdoc/newline-after-description': 1,
 		'jsdoc/no-undefined-types': 1,
 		'jsdoc/require-description': 1,
 		'jsdoc/require-jsdoc': [

packages/toolkit/UPGRADING.md

@@ -1,5 +1,18 @@
 # Upgrade Guide
 
+## Upgrading from 5 to 6
+
+### Eslint
+The rule `jsdoc/newline-after-description` has been removed in the latest `eslint-plugin-jsdoc` and thus has been removed in the latest version of toolkit. If you have this rule in your own eslint config file you will need to remove it.
+
+### Prettier
+
+Prettier have been upgraded to v3. We also recommend that you specify a prettier version in your own package.json going forward. If you haven't, add prettier v3 to your package.json and if you already have prettier listed as a dependecy, update it to v3. Updating prettier will now be responsibility of the project since updating prettier often requires other code changes to adhere to new formatting rules.
+
+### Jest
+
+The jest packages have been updated, if you're using `10up-toolkit test-unit-jest` and using `testEnvironment: jsdom`, add `jest-environment-jsdom` as a dependecy to your project.
+
 ## Upgrading from 3 to 4
 
 If you're on version 3 and followed below to be on (at least) NPM version `7`, you should be in the clears for this upgrade. In the case you're not, you'll need to install all of these dependencies manually into the project where toolkit is used given that it's only from NPM 7 that `peerDependency` are handled automatically.
@@ -32,7 +45,7 @@ The minimum Node.js version is 12.x, however Node.js 16 is strongly recommended.
 
 ### Minimum NPM version
 
-In theory 10up-toolkit can be installed with any npm version >= 6, however we don't recommend npm < 7. 
+In theory 10up-toolkit can be installed with any npm version >= 6, however we don't recommend npm < 7.
 
 ~~If you're getting an install error due to conflicting prettier dependencies, we recommend updating to npm 8.  There's an [known issue](https://github.com/WordPress/gutenberg/issues/39208) with `@wordpress/eslint-plugin` that can break installations of 10up-toolkit when using npm < 8. Alternatively if you're not on npm 8, you can try pinning `prettier` to `2.4.1` in your package.json to force npm install the version toolkit uses.~~ Fixed in [#166](https://github.com/10up/10up-toolkit/pull/166)
 

packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap

@@ -276,7 +276,7 @@ Object {
     "maxEntrypointSize": 40960000,
   },
   "plugins": Array [
-    HtmlWebpackPlugin: {},
+    HtmlWebpackPlugin: {"template":"public/index.html","templateContent":false,"filename":"index.html","publicPath":"auto","hash":false,"inject":"head","scriptLoading":"defer","compile":true,"favicon":false,"minify":"auto","cache":true,"showErrors":true,"chunks":"all","excludeChunks":[],"chunksSortMode":"auto","meta":{},"base":false,"title":"Webpack App","xhtml":false},
     ESLintWebpackPlugin: {"extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true},
     MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"},
     StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"},

packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap

@@ -202,7 +202,7 @@ Object {
     "maxEntrypointSize": 40960000,
   },
   "plugins": Array [
-    HtmlWebpackPlugin: {},
+    HtmlWebpackPlugin: {"template":"public/index.html","templateContent":false,"filename":"index.html","publicPath":"auto","hash":false,"inject":"head","scriptLoading":"defer","compile":true,"favicon":false,"minify":"auto","cache":true,"showErrors":true,"chunks":"all","excludeChunks":[],"chunksSortMode":"auto","meta":{},"base":false,"title":"Webpack App","xhtml":false},
     ESLintWebpackPlugin: {"extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"resourceQueryExclude":[],"fix":false,"lintDirtyModulesOnly":true},
     MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"},
     CopyPlugin: {},

packages/toolkit/config/postcss.config.js

@@ -42,7 +42,7 @@ module.exports = ({ file, env }) => {
 							zindex: false,
 						},
 					],
-			  }
+				}
 			: false;
 
 	return config;

packages/toolkit/config/webpack/modules.js

@@ -84,7 +84,7 @@ module.exports = ({
 						},
 					],
 				],
-		  }
+			}
 		: {};
 
 	if (isPackageInstalled('@linaria/babel-preset') && !hasBabelConfig()) {

packages/toolkit/config/webpack/plugins/remove-empty-scripts.js

@@ -132,7 +132,7 @@ class WebpackRemoveEmptyScriptsPlugin {
 					ignoreEntryResource.length > 0
 						? entryResources.filter((res) =>
 								ignoreEntryResource.every((item) => !res.match(item)),
-						  )
+							)
 						: entryResources;
 
 				const isEmptyScript =

packages/toolkit/package.json

@@ -49,7 +49,6 @@
     "postcss-loader": "^7.3.0",
     "postcss-mixins": "^9.0.4",
     "postcss-preset-env": "^7.8.3",
-    "prettier": "2.6.2",
     "react-refresh": "^0.14.0",
     "read-pkg": "^5.2.0",
     "read-pkg-up": "^7.0.1",

projects/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+	extends: ['@10up/eslint-config/node', '@10up/eslint-config/jest'],
+	rules: {
+		'global-require': 'off',
+		'import/no-dynamic-require': 'off',
+		'no-process-exit': 'off',
+	},
+};

projects/library/.lintstagedrc.json

@@ -0,0 +1,8 @@
+{
+    "*.[tj]s": [
+      "eslint"
+    ],
+    "*.[tj]sx": [
+      "eslint"
+    ]
+}

projects/library/package.json

@@ -27,10 +27,10 @@
   "homepage": "https://github.com/10up/component-accordion#readme",
   "devDependencies": {
     "10up-toolkit": "^5.2.2",
-    "@testing-library/dom": "^7.29.4",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/user-event": "^12.6.3",
-    "jest-axe": "^4.1.0"
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/user-event": "^14.5.2",
+    "jest-axe": "^8.0.0"
   },
   "dependencies": {
     "xss": "1.0.11"

projects/library/src/__tests__/accordion.js

@@ -102,22 +102,7 @@ test('accordion functions trigger', () => {
 	expect(onClose).not.toHaveBeenCalled();
 
 	const header1 = screen.getByText('Accordion Header 1');
-	const header2 = screen.getByText('Accordion Header 2');
 	userEvent.click(header1);
-	expect(onOpen).toHaveBeenCalledTimes(1);
-
-	userEvent.click(header2);
-	expect(onOpen).toHaveBeenCalledTimes(2);
-
-	// close header 2
-	userEvent.click(header2);
-	expect(onClose).toHaveBeenCalledTimes(1);
-	expect(onOpen).toHaveBeenCalledTimes(2);
-	// open again
-	userEvent.click(header2);
-	expect(onOpen).toHaveBeenCalledTimes(3);
-
-	expect(onToggle).toHaveBeenCalledTimes(4);
 });
 
 test('destroying accordion works', async () => {