Gutenberg: Block.json files aren't rebuilt when running `npm run dev`

[talldan]

Describe the bug
When running npm run dev and making changes to a block.json files, the files are not rebuilt.

The watch script does notice the change as the isSourceFile function returns true for a json file:
https://github.com/WordPress/gutenberg/blob/master/bin/packages/watch.js

However, the build worker script doesn't handle json files in its BUILD_TASK_BY_EXTENSION object and ignores the change:
https://github.com/WordPress/gutenberg/blob/master/bin/packages/build-worker.js#L85

To reproduce
Steps to reproduce the behavior:

1. Run npm run dev
2. Update a block.json file
3. Observe that those changes had no effect

Expected behavior
Changes to block.json files should be rebuilt by npm run dev

[swissspidy]

Previously: #15135 / #15455.

[talldan]

Looked into it some more. Usually when babel builds a js file, it outputs the compiled version into [package]/build-module/[path-to-file].

For json files, it's inlining them (I think using https://www.npmjs.com/package/babel-plugin-inline-json-import).

The json for a block.json is inlined into the index.js it's imported by. This can be seen if you look at `block-library/build-module/[block]/index.js, the metadata from the json file is all there.

The challenge for watching is that when a change to the block.json file is detected, it's not that file that needs to be rebuilt, but the neighbouring index.js. To handle this gracefully for any json files in the project you'd have to do a sort of reverse trace of where the file is imported, and rebuild those files.

For block.json files they're such an established pattern that it might be worth adding a special rule to the build scripts for them. It wouldn't expand to other json files, but would at least solve the most pressing use-case.

Another solution would be to transform the json into js, so that there's an equivalent block.js file in the build-modules folder, and then all json files could be handled that way. Is that what you're proposing @gziolo for #16088?

[gziolo]

For block.json files they're such an established pattern that it might be worth adding a special rule to the build scripts for them. It wouldn't expand to other json files, but would at least solve the most pressing use-case.

It's all based on convention, so we could assume that the change in block.json requires to update the corresponding index.js file in the same folder. It isn't perfect but would resolve this issue.

Another solution would be to transform the json into js, so that there's an equivalent block.js file in the build-modules folder, and then all json files could be handled that way. Is that what you're proposing @gziolo for #16088?

It's a different proposal, it's still based on reading JSON file and inlining it into the JS file which imports it. With macros you can teach webpack to never cache files transpiled with Babel which use them: https://github.com/facebook/create-react-app/commit/11737bc78676868e76ce5d0c04ddbb5c758d3908. However, I don't know how it works in practice. It's mostly the issue on our side because we use a custom watch solution to build packages.

[talldan]

I'll try to tackle this now.