Build Tooling: Pass individual files as arguments from watch to build script

[aduth]

Fixes #14960

This pull request seeks to resolve an error which can occur while running npm run dev, often when switching between branches (Error: ENAMETOOLONG: name too long).

The underlying cause is that when passing files as arguments to build.js, it expects many arguments:

gutenberg/bin/packages/build.js

Line 211 in db990fc

const files = process.argv.slice( 2 );

...but in fact, the watch script would have only passed at most one, a single argument of space-separated changed files:

gutenberg/bin/packages/watch.js

Line 72 in db990fc

execSync( `${ BUILD_CMD } \"${ files.join( ' ' ) }\"`, { stdio: [ 0, 1, 2 ] } );

The changes here address this by assuring that each file is passed as its own argument, made simpler by substituting exec with spawn, which accepts args as part of its function signature.

However, while this addresses the immediate issue, testing the effects had me begging the question: This was previously never working correctly to rebuild files, and it's unclear why we'd want to watch them at all. Notably, the files being built here are the ones generated to the build directory of the individual packages, which is relevant for NPM publishing, but not so much for use by the plugin. Separately, we may want to consider whether wp-scripts start should be the sole command of npm run dev.

Testing Instructions:

With this branch checked out, start npm run dev. Then, switch between branches where watched files would be changed (e.g. between master and try/scroll=beyond-end) and verify that the [1] -> update: entries are shown correctly, and no errors occur.

[aduth]

However, while this addresses the immediate issue, testing the effects had me begging the question: This was previously never working correctly to rebuild files, and it's unclear why we'd want to watch them at all. Notably, the files being built here are the ones generated to the build directory of the individual packages, which is relevant for NPM publishing, but not so much for use by the plugin. Separately, we may want to consider whether wp-scripts start should be the sole command of npm run dev.

I took a look back to #6708 and it makes more sense now why it's done this way:

The idea is to consider these packages as real external modules. Building happens in two steps, the build script generates the build and build-module transpiled files and webpack uses these built files to generate its bundle with the library support (global variable).

i.e. the build.js script will produce the package distributables. Webpack will detect changes in those files to trigger its own rebuild.

It still seems like there's some redundancy here in that we could either (a) just let Webpack compile from the source files or (b) avoid including Babel processing in the Webpack configuration, since it's already operating on the transpiled output.

[aduth]

It still seems like there's some redundancy here in that we could either (a) just let Webpack compile from the source files or (b) avoid including Babel processing in the Webpack configuration, since it's already operating on the transpiled output.

See #15226, which takes the latter approach.

[gziolo]

It works as advertised. I can confirm that I couldn't reproduce the issue. Code changes look good 👍

[ellatrix]

I'm now getting the following error every time I run npm test:

[1] Failed to read config file: /Users/ella/gutenberg/packages/block-editor/build/components/block-edit/index.js /Users/ella/gutenberg/packages/block-editor/src/components/block-list-appender/style.scss /Users/ella/gutenberg/packages/block-editor/src/components/button-block-appender/style.scss /Users/ella/gutenberg/packages/block-editor/src/components/rich-text/index.native.js /Users/ella/gutenberg/packages/block-editor/src/components/rich-text/style.scss /Users/ella/gutenberg/packages/block-library/src/group/edit.js /Users/ella/gutenberg/packages/block-library/src/heading/edit.native.js /Users/ella/gutenberg/packages/block-library/src/paragraph/edit.js /Users/ella/gutenberg/packages/block-library/src/paragraph/edit.native.js /Users/ella/gutenberg/packages/blocks/src/api/validation.js /Users/ella/gutenberg/packages/components/src/drop-zone/provider.js /Users/ella/gutenberg/packages/components/src/focal-point-picker/index.js /Users/ella/gutenberg/packages/data/src/components/with-dispatch/index.js /Users/ella/gutenberg/packages/date/package.json. 
[1] Error: ENAMETOOLONG: name too long, open '/Users/ella/gutenberg/packages/block-editor/build/components/block-edit/index.js /Users/ella/gutenberg/packages/block-editor/src/components/block-list-appender/style.scss /Users/ella/gutenberg/packages/block-editor/src/components/button-block-appender/style.scss /Users/ella/gutenberg/packages/block-editor/src/components/rich-text/index.native.js /Users/ella/gutenberg/packages/block-editor/src/components/rich-text/style.scss /Users/ella/gutenberg/packages/block-library/src/group/edit.js /Users/ella/gutenberg/packages/block-library/src/heading/edit.native.js /Users/ella/gutenberg/packages/block-library/src/paragraph/edit.js /Users/ella/gutenberg/packages/block-library/src/paragraph/edit.native.js /Users/ella/gutenberg/packages/blocks/src/api/validation.js /Users/ella/gutenberg/packages/components/src/drop-zone/provider.js /Users/ella/gutenberg/packages/components/src/focal-point-picker/index.js /Users/ella/gutenberg/packages/data/src/components/with-dispatch/index.js /Users/ella/gutenberg/packages/date/package.json'

Is it related to this?

[aduth]

@ellatrix I can't imagine it would have been caused by this, since the watch.js file shouldn't be relevant for npm test. But it could be of a similar sort of issue.