newspack-scripts 5.4.0 → 5.5.1-alpha.1

package/.circleci/config.yml

@@ -24,7 +24,7 @@ jobs:
           command: node --version
       - run:
           name: install
-          command: npm install
+          command: npm install --legacy-peer-deps
       - run:
           name: release
           command: npm run semantic-release || true

package/.eslintrc.js

@@ -0,0 +1,9 @@
+require( '@rushstack/eslint-patch/modern-module-resolution' );
+
+module.exports = {
+	extends: [ './config/eslintrc.js' ],
+	ignorePatterns: [ 'node_modules' ],
+	rules: {
+		'@typescript-eslint/no-var-requires': 'off',
+	},
+};

package/.nvmrc

@@ -1 +1 @@
-16.11.1
+lts/*

package/bin/newspack-scripts.js

@@ -1,43 +1,44 @@
 #!/usr/bin/env node
 
-const spawn = require("cross-spawn");
-const utils = require("../scripts/utils/index.js");
+const spawn = require( 'cross-spawn' );
+const utils = require( '../scripts/utils/index.js' );
 
-const [scriptName, ...nodeArgs] = process.argv.slice(2);
+const [ scriptName, ...nodeArgs ] = process.argv.slice( 2 );
 
 if (
-  [
-    "test",
-    "build",
-    "watch",
-    "commit",
-    "commitlint",
-    "release",
-    "typescript-check",
-  ].includes(scriptName)
+	[
+		'test',
+		'build',
+		'watch',
+		'commit',
+		'commitlint',
+		'eslint',
+		'release',
+		'typescript-check',
+	].includes( scriptName )
 ) {
-  const result = spawn.sync(
-    process.execPath,
-    [require.resolve("../scripts/" + scriptName), ...nodeArgs],
-    { stdio: "inherit" }
-  );
-  if (result.signal) {
-    if (result.signal === "SIGKILL") {
-      utils.log(
-        "The build failed because the process exited too early. " +
-          "This probably means the system ran out of memory or someone called " +
-          "`kill -9` on the process."
-      );
-    } else if (result.signal === "SIGTERM") {
-      utils.log(
-        "The build failed because the process exited too early. " +
-          "Someone might have called `kill` or `killall`, or the system could " +
-          "be shutting down."
-      );
-    }
-    process.exit(1);
-  }
-  process.exit(result.status);
+	const result = spawn.sync(
+		process.execPath,
+		[ require.resolve( '../scripts/' + scriptName ), ...nodeArgs ],
+		{ stdio: 'inherit' }
+	);
+	if ( result.signal ) {
+		if ( result.signal === 'SIGKILL' ) {
+			utils.log(
+				'The build failed because the process exited too early. ' +
+          'This probably means the system ran out of memory or someone called ' +
+          '`kill -9` on the process.'
+			);
+		} else if ( result.signal === 'SIGTERM' ) {
+			utils.log(
+				'The build failed because the process exited too early. ' +
+          'Someone might have called `kill` or `killall`, or the system could ' +
+          'be shutting down.'
+			);
+		}
+		process.exit( 1 );
+	}
+	process.exit( result.status );
 } else {
-  utils.log(`Unknown script "${scriptName}".`);
+	utils.log( `Unknown script "${ scriptName }".` );
 }

package/config/babel.config.js

@@ -1,9 +1,8 @@
 module.exports = api => {
-  api.cache(true);
-  return {
-    presets: [
-      "@automattic/calypso-build/babel/default",
-      "@automattic/calypso-build/babel/wordpress-element"
-    ]
-  };
+	api.cache( true );
+	return {
+		presets: [
+			'@wordpress/babel-preset-default',
+		],
+	};
 };

package/config/commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ["@commitlint/config-conventional"] };
+module.exports = { extends: [ '@commitlint/config-conventional' ] };

package/config/eslintrc.js

@@ -1,3 +1,8 @@
+const wpRecommended = require.resolve( '@wordpress/eslint-plugin/configs/recommended' );
+const reactRecommended = require.resolve( '@wordpress/eslint-plugin/configs/react' );
+// const tsRecommended = require.resolve( '@typescript-eslint/eslint-plugin/dist/configs/recommended' );
+// const tsESLintRecommended = require.resolve( '@typescript-eslint/eslint-plugin/dist/configs/eslint-recommended' );
+
 // Assume `@wordpress/*` packages are available. This is because `calypso-build` is using
 // Dependency Extraction Webpack Plugin to use core WP packages instead of those from
 // node_modules. The packages should still be part of the project (they are listed in this
@@ -5,61 +10,67 @@
 // More on this:
 // - https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin
 // - https://github.com/WordPress/gutenberg/issues/35630
-const GLOBALLY_AVAILABLE_PACKAGES = ["@wordpress/.*"];
+const GLOBALLY_AVAILABLE_PACKAGES = [ '@wordpress/.*' ];
 
 module.exports = {
-  extends: [
-    "plugin:@wordpress/eslint-plugin/recommended",
-    "plugin:react/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-  ],
-  env: {
-    browser: true,
-    jest: true,
-  },
-  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint"],
-  settings: {
-    "import/resolver": {
-      node: {
-        extensions: [".js", ".jsx", ".ts", ".tsx"],
-      },
-    },
-  },
-  ignorePatterns: ["dist/", "node_modules/"],
-  parser: "@typescript-eslint/parser",
-  rules: {
-    "no-console": "off",
-    camelcase: "off",
-    // Some dependencies are injected by WP, and should not be declared in package.json (won't be used anyway).
-    // See https://github.com/WordPress/gutenberg/blob/e035f71/packages/dependency-extraction-webpack-plugin/README.md#behavior-with-scripts
-    // Unfortunately there's no "ignore" option for this rule, so it's disabled altogether.
-    "import/no-extraneous-dependencies": "off",
-    "import/no-unresolved": ["error", { ignore: GLOBALLY_AVAILABLE_PACKAGES }],
-    // There's a conflict with prettier here:
-    "react/jsx-curly-spacing": "off",
-    // Skip prop types validation for now
-    "react/prop-types": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/self-closing-comp": "error",
-    // JSDoc rules overrides
-    "jsdoc/require-returns": "off",
-    "jsdoc/require-param": "off",
-    // Deprecated rules
-    "jsx-a11y/no-onchange": "off",
-    // For TypeScript type declarations.
-    camelcase: "off",
-    "@typescript-eslint/no-empty-function": "off",
-    // Fail on unused vars.
-    "@typescript-eslint/no-unused-vars": "error",
-    // Disallow logging.
-    "no-console": "error",
-    // Handle the issue where no-shadow is a false positive when declaring TS enums.
-    // See https://github.com/typescript-eslint/typescript-eslint/issues/2483
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": "error",
-  },
+	extends: [
+		'plugin:import/errors',
+		'plugin:import/warnings',
+		'plugin:@typescript-eslint/eslint-recommended',
+		'plugin:@typescript-eslint/recommended',
+		wpRecommended,
+		reactRecommended,
+	],
+	env: {
+		browser: true,
+		jest: true,
+	},
+	parser: '@typescript-eslint/parser',
+	plugins: [ '@typescript-eslint' ],
+	settings: {
+		'import/resolver': {
+			node: {
+				extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
+			},
+		},
+	},
+	ignorePatterns: [ 'dist/', 'node_modules/' ],
+	parser: '@typescript-eslint/parser',
+	rules: {
+		'arrow-parens': 'off',
+		camelcase: 'off',
+		'no-console': 'off',
+		'no-mixed-operators': 'off',
+		'space-before-function-paren': 'off',
+		'wrap-iife': 'off',
+		// Some dependencies are injected by WP, and should not be declared in package.json (won't be used anyway).
+		// See https://github.com/WordPress/gutenberg/blob/e035f71/packages/dependency-extraction-webpack-plugin/README.md#behavior-with-scripts
+		// Unfortunately there's no "ignore" option for this rule, so it's disabled altogether.
+		'import/no-extraneous-dependencies': 'off',
+		'import/no-unresolved': [ 'error', { ignore: GLOBALLY_AVAILABLE_PACKAGES } ],
+		'import/namespace': 'off',
+		// There's a conflict with prettier here:
+		'react/jsx-curly-spacing': 'off',
+		// Skip prop types validation for now
+		'react/prop-types': 'off',
+		'react/react-in-jsx-scope': 'off',
+		'react/self-closing-comp': 'error',
+		'react-hooks/exhaustive-deps': 'off',
+		// JSDoc rules overrides
+		'jsdoc/require-returns': 'off',
+		'jsdoc/require-param': 'off',
+		// Deprecated rules
+		'jsx-a11y/no-onchange': 'off',
+		'@typescript-eslint/no-empty-function': 'off',
+		// Fail on unused vars.
+		'@typescript-eslint/no-unused-vars': 'error',
+		// Disallow logging.
+		'no-console': 'error',
+		// Handle the issue where no-shadow is a false positive when declaring TS enums.
+		// See https://github.com/typescript-eslint/typescript-eslint/issues/2483
+		'no-shadow': 'off',
+		'@typescript-eslint/no-shadow': 'error',
+		'@typescript-eslint/ban-ts-comment': 'warn',
+		'@typescript-eslint/no-explicit-any': 'warn',
+	},
 };

package/config/getWebpackConfig.js

@@ -1,27 +1,25 @@
-const path = require("path");
+const path = require( 'path' );
+require( '@wordpress/browserslist-config' );
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
-const getWebpackConfig = require("@automattic/calypso-build/webpack.config.js");
+module.exports = ( ...args ) => {
+	let config = { ...defaultConfig };
 
-module.exports = (...args) => {
-  const config = getWebpackConfig(...args);
+	// Merge config extensions into default config.
+	args.forEach( extension => {
+		config = { ...config, ...extension };
+	} );
 
-  const scssRuleIndex = config.module.rules.findIndex(rule =>
-    rule.test.toString().match(/\(sc\|sa\|c\)ss/)
-  );
-  if (scssRuleIndex !== -1) {
-    const scssRule = config.module.rules[scssRuleIndex];
-    const postCssLoaderIndex = scssRule.use.findIndex(
-      loader => loader.loader && loader.loader.indexOf("postcss") > 0
-    );
-    if (postCssLoaderIndex !== -1) {
-      const postCssLoader = scssRule.use[postCssLoaderIndex];
-      const postCssConfigPath = path.resolve(__dirname, "postcss.config.js");
-      // Replace calypso-build's PostCSS config with this project's one.
-      postCssLoader.options.postcssOptions.config = postCssConfigPath;
-      config.module.rules[scssRuleIndex].use[
-        postCssLoaderIndex
-      ] = postCssLoader;
-    }
-  }
-  return config;
+	// Ensure that webpack resolves modules from the Newspack Scripts node_modules as well as the root repo's node_modules.
+	config.resolve.modules = [
+		path.resolve( 'node_modules/newspack-scripts/node_modules' ),
+		'node_modules',
+	];
+
+	// Clear cacheGroups so that CSS files don't get the `style-` prefix.
+	if ( config?.optimization?.splitChunks?.cacheGroups?.style ) {
+		delete config.optimization.splitChunks.cacheGroups.style;
+	}
+
+	return config;
 };

package/config/postcss.config.js

@@ -1,6 +1,6 @@
-const postcssFocusWithin = require("postcss-focus-within");
-const autoprefixer = require("autoprefixer");
+const postcssFocusWithin = require( 'postcss-focus-within' );
+const autoprefixer = require( 'autoprefixer' );
 
 module.exports = {
-  plugins: [autoprefixer(), postcssFocusWithin()]
+	plugins: [ autoprefixer(), postcssFocusWithin() ],
 };

package/config/stylelint.config.js

@@ -1,30 +1,30 @@
 module.exports = {
-  extends: ["stylelint-config-standard"],
-  rules: {
-    "rule-empty-line-before": null,
-    "at-rule-empty-line-before": null,
-    "comment-empty-line-before": null,
-    "no-descending-specificity": null,
-    "function-url-quotes": null,
-    "font-weight-notation": null,
-    "color-named": null,
-    "selector-class-pattern": null,
-    "custom-property-pattern": null,
-    "at-rule-no-unknown": null,
-    "alpha-value-notation": null,
-    "color-function-notation": null,
-    "selector-not-notation": null,
-    "function-no-unknown": [
-      true,
-      {
-        ignoreFunctions: ["/color/"],
-      },
-    ],
-    "annotation-no-unknown": [
-      true,
-      {
-        ignoreAnnotations: ["/default/"],
-      },
-    ],
-  },
+	extends: [ 'stylelint-config-standard' ],
+	rules: {
+		'rule-empty-line-before': null,
+		'at-rule-empty-line-before': null,
+		'comment-empty-line-before': null,
+		'no-descending-specificity': null,
+		'function-url-quotes': null,
+		'font-weight-notation': null,
+		'color-named': null,
+		'selector-class-pattern': null,
+		'custom-property-pattern': null,
+		'at-rule-no-unknown': null,
+		'alpha-value-notation': null,
+		'color-function-notation': null,
+		'selector-not-notation': null,
+		'function-no-unknown': [
+			true,
+			{
+				ignoreFunctions: [ '/color/' ],
+			},
+		],
+		'annotation-no-unknown': [
+			true,
+			{
+				ignoreAnnotations: [ '/default/' ],
+			},
+		],
+	},
 };

package/config/tsconfig.json

@@ -1,21 +1,25 @@
 {
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "noEmit": true,
-    "composite": true,
-    "noEmitHelpers": true,
-    "skipLibCheck": true,
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "target": "es6",
-    "module": "ESNext",
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "isolatedModules": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowJs": true,
-    "checkJs": false
-  }
-}
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"compilerOptions": {
+		"noEmit": true,
+		"composite": true,
+		"noEmitHelpers": true,
+		"skipLibCheck": true,
+		"lib": [
+			"ESNext",
+			"DOM",
+			"DOM.Iterable"
+		],
+		"target": "es6",
+		"module": "ESNext",
+		"esModuleInterop": true,
+		"jsx": "react-jsx",
+		"strict": true,
+		"isolatedModules": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"forceConsistentCasingInFileNames": true,
+		"allowJs": true,
+		"checkJs": false
+	}
+}

package/package.json

@@ -1,84 +1,83 @@
 {
-  "name": "newspack-scripts",
-  "version": "5.4.0",
-  "description": "",
-  "bin": {
-    "newspack-scripts": "./bin/newspack-scripts.js"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@automattic/calypso-build": "^10.0.0",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-typescript": "^7.18.6",
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@semantic-release/changelog": "^6.0.1",
-    "@semantic-release/git": "^10.0.1",
-    "@testing-library/jest-dom": "^5.15.1",
-    "@testing-library/react": "^13.4.0",
-    "@types/wordpress__data": "^4.6.10",
-    "@typescript-eslint/parser": "^5.26.0",
-    "@wordpress/a11y": "^3.2.4",
-    "@wordpress/api-fetch": "^6.17.0",
-    "@wordpress/base-styles": "^4.0.4",
-    "@wordpress/block-editor": "^8.0.11",
-    "@wordpress/blocks": "^11.1.4",
-    "@wordpress/components": "^21.3.0",
-    "@wordpress/compose": "^5.0.6",
-    "@wordpress/data": "^6.1.4",
-    "@wordpress/date": "^4.2.3",
-    "@wordpress/dom-ready": "^3.2.3",
-    "@wordpress/edit-post": "^6.17.0",
-    "@wordpress/element": "^4.0.4",
-    "@wordpress/escape-html": "^2.2.3",
-    "@wordpress/eslint-plugin": "^10.0.0",
-    "@wordpress/hooks": "^3.2.2",
-    "@wordpress/html-entities": "^3.2.3",
-    "@wordpress/i18n": "^4.2.4",
-    "@wordpress/icons": "^6.1.1",
-    "@wordpress/keycodes": "^3.2.4",
-    "@wordpress/plugins": "^4.0.6",
-    "@wordpress/url": "^3.3.1",
-    "autoprefixer": "^10.4.0",
-    "babel-jest": "^29.2.2",
-    "commitizen": "^4.2.4",
-    "cross-spawn": "^7.0.3",
-    "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^27.1.3",
-    "eslint-plugin-react": "^7.28.0",
-    "jest": "^27.4.3",
-    "jest-environment-jsdom": "^27.4.3",
-    "postcss": "^8.4.4",
-    "postcss-focus-within": "^5.0.1",
-    "prettier": "npm:wp-prettier@^2.6.2-beta-1",
-    "semantic-release": "^19.0.5",
-    "semantic-release-version-bump": "^1.4.1",
-    "stylelint": "^14.1.0",
-    "stylelint-config-standard": "^30.0.1",
-    "typescript": "^4.5.5",
-    "webpack": "^5.65.0"
-  },
-  "scripts": {
-    "semantic-release": "semantic-release"
-  },
-  "release": {
-    "branches": [
-      "trunk",
-      {
-        "name": "alpha",
-        "prerelease": true
-      }
-    ]
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Automattic/newspack-scripts.git"
-  },
-  "devDependencies": {
-    "yargs": "^17.3.0"
-  }
+	"name": "newspack-scripts",
+	"version": "5.5.1-alpha.1",
+	"description": "",
+	"bin": {
+		"newspack-scripts": "./bin/newspack-scripts.js"
+	},
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"@commitlint/cli": "^17.8.1",
+		"@commitlint/config-conventional": "^17.8.1",
+		"@rushstack/eslint-patch": "^1.10.3",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/git": "^10.0.1",
+		"@testing-library/jest-dom": "^5.17.0",
+		"@testing-library/react": "^13.4.0",
+		"@typescript-eslint/parser": "^7.13.0",
+		"@wordpress/base-styles": "^5.0.0",
+		"@wordpress/scripts": "^28.0.0",
+		"autoprefixer": "^10.4.19",
+		"commitizen": "^4.3.0",
+		"cross-spawn": "^7.0.3",
+		"cz-conventional-changelog": "^3.3.0",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^8.10.0",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-jest": "^27.9.0",
+		"eslint-plugin-react": "^7.34.2",
+		"lodash": "^4.17.21",
+		"postcss": "^8.4.38",
+		"postcss-focus-within": "^5.0.4",
+		"postcss-scss": "^4.0.9",
+		"prettier": "^3.3.2",
+		"semantic-release": "^24.0.0",
+		"semantic-release-version-bump": "^1.4.1",
+		"stylelint": "^14.16.1",
+		"stylelint-config-standard": "^30.0.1",
+		"typescript": "^5.4.5",
+		"yargs": "^17.7.2"
+	},
+	"dependencies": {
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/api-fetch": "^7.0.0",
+		"@wordpress/block-editor": "^13.0.0",
+		"@wordpress/blocks": "^13.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/data": "^10.0.0",
+		"@wordpress/date": "^5.0.0",
+		"@wordpress/dom-ready": "^4.0.0",
+		"@wordpress/edit-post": "^8.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/escape-html": "^3.0.0",
+		"@wordpress/eslint-plugin": "^19.0.0",
+		"@wordpress/hooks": "^4.0.0",
+		"@wordpress/html-entities": "^4.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/keycodes": "^4.0.0",
+		"@wordpress/plugins": "^7.0.0",
+		"@wordpress/url": "^4.0.0"
+	},
+	"scripts": {
+		"semantic-release": "semantic-release"
+	},
+	"release": {
+		"branches": [
+			"trunk",
+			{
+				"name": "alpha",
+				"prerelease": true
+			}
+		]
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/newspack-scripts.git"
+	},
+	"browserslist": [
+		"extends @wordpress/browserslist-config"
+	]
 }