newspack-scripts 5.5.1-alpha.1 → 5.5.1-alpha.2

package/README.md

@@ -15,11 +15,11 @@ Will run `jest` tests. Useful flags:
 
 ### build
 
-Will run `calypso-build`, creating optimised production builds.
+Will run `wp-scripts build` to create optimised production builds.
 
 ### watch
 
-Will run `calypso-build` in watch mode.
+Will run `wp-scripts start` to start a development build in devserver/watch mode.
 
 ### commit
 
@@ -47,6 +47,15 @@ Will validate TypeScript code in the project. This requires a `tsconfig.json` fi
 }
 ```
 
+### proxy
+
+Allows you to proxy NPM CLI commands through this repository's dependencies, so if a repository consumes the `newspack-scripts` NPM package, it can access any executables installed as a dependency in [package.json](https://github.com/Automattic/newspack-scripts/blob/trunk/package.json). e.g. `newspack-scripts proxy semantic-release --dry-run` will run `semantic-release --dry-run` but using the executable from `newspack-scripts` instead of whatever repository you're running the command from. This allows for more flexible use of NPM commands where the prefab configs and scripts this repo provides are too opinionated or aren't sufficient.
+
+Other examples:
+
+- `newspack-scripts proxy eslint 'src/**/*.{js,jsx,ts,tsx}'` will lint all JS/JSX/TS/TSX files inside the `./src` directory.
+- `newspack-scripts proxy stylelint 'src/**/*.scss'` will lint all SCSS files inside the `./src` directory.
+
 ---
 
 ## Semantic Release
@@ -154,10 +163,10 @@ module.exports = {
 
 ### stylelint
 
-Install `stylelint` via npm and reference this package's config file when running it, e.g.:
+Use this package's stylelint executable and config file when running it, e.g.:
 
 ```shell
-stylelint '**/*.scss' --syntax scss --config=./node_modules/newspack-scripts/config/stylelint.config.js
+newspack-scripts proxy stylelint '**/*.scss' --customSyntax postcss-scss --config=./node_modules/newspack-scripts/config/stylelint.config.js
 ```
 
 _Note: Due to issue with dependency resolving, you might end up a different version of `prettier` in project's `node_modules` and `node_modules/newspack-scripts/node_modules`. See https://github.com/Automattic/newspack-scripts/issues/1 for more information._
@@ -207,4 +216,4 @@ Note that before the first time updating you'll need to set the API key for Circ
 
 ### `@wordpress/*` packages
 
-This project list [`@wordpress/*` packages](https://github.com/WordPress/gutenberg/tree/trunk/packages) as dependencies in order to provide them to consumers. In a project using `calypso-build` (e.g. a consumer of `newspack-scripts`), the `@wordpress/*` packages are sourced from WP Core, not `node_modules`. The packages should be included in `node_modules`, though, to be available in other environments – notably when running tests. See [Dependency Extraction Webpack Plugin](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin) for more information.
+This project list [`@wordpress/*` packages](https://github.com/WordPress/gutenberg/tree/trunk/packages) as dependencies in order to provide them to consumers. In a project using `@wordpress/scripts` (e.g. a consumer of `newspack-scripts`), the `@wordpress/*` packages are sourced from WP Core, not `node_modules`. The packages should be included in `node_modules`, though, to be available in other environments – notably when running tests. See [Dependency Extraction Webpack Plugin](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin) for more information.

package/bin/newspack-scripts.js

@@ -13,6 +13,8 @@ if (
 		'commit',
 		'commitlint',
 		'eslint',
+		'proxy',
+		'stylelint',
 		'release',
 		'typescript-check',
 	].includes( scriptName )

package/config/eslintrc.js

@@ -1,9 +1,7 @@
 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
+// Assume `@wordpress/*` packages are available. This is because `@wordpress/scripts` 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
 // project's package.json) so that they are available in testing environment.
@@ -34,7 +32,7 @@ module.exports = {
 			},
 		},
 	},
-	ignorePatterns: [ 'dist/', 'node_modules/' ],
+	ignorePatterns: [ 'dist/', 'node_modules/', 'scripts/' ],
 	parser: '@typescript-eslint/parser',
 	rules: {
 		'arrow-parens': 'off',

package/config/getWebpackConfig.js

@@ -12,7 +12,7 @@ module.exports = ( ...args ) => {
 
 	// 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' ),
+		path.resolve( __dirname, '../node_modules' ),
 		'node_modules',
 	];
 

package/config/stylelint.config.js

@@ -26,5 +26,7 @@ module.exports = {
 				ignoreAnnotations: [ '/default/' ],
 			},
 		],
+		'media-query-no-invalid': null,
+		'media-feature-range-notation': null,
 	},
 };

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "newspack-scripts",
-	"version": "5.5.1-alpha.1",
+	"version": "5.5.1-alpha.2",
 	"description": "",
 	"bin": {
 		"newspack-scripts": "./bin/newspack-scripts.js"
 	},
 	"author": "",
 	"license": "ISC",
-	"devDependencies": {
+	"dependencies": {
 		"@commitlint/cli": "^17.8.1",
 		"@commitlint/config-conventional": "^17.8.1",
 		"@rushstack/eslint-patch": "^1.10.3",
@@ -16,8 +16,28 @@
 		"@testing-library/jest-dom": "^5.17.0",
 		"@testing-library/react": "^13.4.0",
 		"@typescript-eslint/parser": "^7.13.0",
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/api-fetch": "^7.0.0",
 		"@wordpress/base-styles": "^5.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/scripts": "^28.0.0",
+		"@wordpress/url": "^4.0.0",
 		"autoprefixer": "^10.4.19",
 		"commitizen": "^4.3.0",
 		"cross-spawn": "^7.0.3",
@@ -32,34 +52,16 @@
 		"postcss-focus-within": "^5.0.4",
 		"postcss-scss": "^4.0.9",
 		"prettier": "^3.3.2",
-		"semantic-release": "^24.0.0",
+		"semantic-release": "^19.0.5",
 		"semantic-release-version-bump": "^1.4.1",
-		"stylelint": "^14.16.1",
-		"stylelint-config-standard": "^30.0.1",
+		"stylelint": "^16.6.1",
+		"stylelint-config-standard": "^36.0.0",
 		"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"
+	"overrides": {
+		"history": "4.9.0",
+		"path-to-regexp": "1.7.0"
 	},
 	"scripts": {
 		"semantic-release": "semantic-release"

package/scripts/build.js

@@ -7,7 +7,9 @@ const wpScripts = require.resolve( '@wordpress/scripts/bin/wp-scripts' );
 
 utils.log( 'Starting to build…' );
 
-const buildResult = spawn.sync( wpScripts, modules.args( 'build' ), {
+const args = process.argv.slice( 2 );
+
+const buildResult = spawn.sync( wpScripts, modules.args( 'build', args ), {
 	cwd: modules.rootDirectory,
 	stdio: 'inherit',
 	env: { ...process.env, NODE_ENV: 'production' },

package/scripts/proxy.js

@@ -0,0 +1,29 @@
+'use strict';
+
+/**
+ * Run a command via newspack-script's dependencies.
+ * Usage: newspack-scripts proxy <command> [args]
+ */
+
+const path = require( 'path' );
+const spawn = require( 'cross-spawn' );
+const modules = require( './utils/modules' );
+const utils = require( './utils/index.js' );
+
+const args = process.argv.slice( 2 );
+const dependency = args.shift();
+const cmd = path.resolve( __dirname, `../node_modules/.bin/${ dependency }` );
+
+utils.log( `Running command: ${ dependency } ${ args.join( ' ' ) }` );
+
+const result = spawn.sync(
+	cmd,
+	args,
+	{
+		cwd: modules.rootDirectory,
+		stdio: 'inherit',
+		env: { ...process.env, NODE_ENV: 'semantic-release' === cmd ? 'production' : 'development' },
+	}
+);
+
+process.exit( result.status );

package/scripts/utils/modules.js

@@ -1,17 +1,21 @@
 const fs = require( 'fs' );
-const path = require( 'path' );
 
 const rootDirectory = fs.realpathSync( process.cwd() );
 
 module.exports = {
 	rootDirectory,
-	args: cmd => (
-		[
+	args: ( cmd, opts = [] ) => {
+		const defaults = [
 			cmd,
 			'--config',
 			'webpack.config.js',
-			'--output-path',
-			'dist',
-		]
-	),
+		];
+
+		// Default build path: ./dist
+		if ( ! opts.includes( '--output-path' ) ) {
+			defaults.push( '--output-path', 'dist' );
+		}
+
+		return [ ...defaults, ...opts ];
+	},
 };

package/scripts/watch.js

@@ -7,7 +7,9 @@ const wpScripts = require.resolve( '@wordpress/scripts/bin/wp-scripts' );
 
 utils.log( 'Starting to watch…' );
 
-spawn.sync( wpScripts, modules.args( 'start' ), {
+const args = process.argv.slice( 2 );
+
+spawn.sync( wpScripts, modules.args( 'start', args ), {
 	cwd: modules.rootDirectory,
 	stdio: 'inherit',
 	env: { ...process.env, NODE_ENV: 'development' },

package/scripts/eslint.js

@@ -1,25 +0,0 @@
-'use strict';
-
-const spawn = require( 'cross-spawn' );
-const modules = require( './utils/modules' );
-const utils = require( './utils/index.js' );
-const wpScripts = require.resolve( '@wordpress/scripts/bin/wp-scripts' );
-
-utils.log( 'Linting JS…' );
-
-const args = process.argv.slice( 2 );
-
-const result = spawn.sync(
-	wpScripts,
-	[
-		'lint-js',
-		...args,
-	],
-	{
-		cwd: modules.rootDirectory,
-		stdio: 'inherit',
-		env: { ...process.env, NODE_ENV: 'development' },
-	}
-);
-
-process.exit( result.status );