Issue-685: Add support for block metadata viewScriptModule field

[efuller]

Summary

Fixes #685

This pull request introduces support for the viewScriptModule metadata field to enable the use of the Interactivity API. Additionally, it enhances the build process by accommodating the --experimental-modules flag, which modifies the Webpack configuration to support both single and array-based configurations. The changes also ensure backward compatibility with older versions of @wordpress/scripts.

Details

• Added functionality to handle the viewScriptModule field in block metadata registration.
• Introduced support for the --experimental-modules flag in the build and start commands, enabling the use of experimental features such as the Interactivity API.
• Updated Webpack configuration to support array-based configurations, allowing multiple configurations to be processed when the --experimental-modules flag is used. This includes backward compatibility for projects using older versions of @wordpress/scripts.
• Refactored and modularized Webpack configuration generation by introducing helper functions like generateBaseConfig and getConfigByType.
• Updated the @wordpress/scripts dependency to version ^30.14.1 to ensure compatibility with the latest features.
• Enhanced documentation with a new section on the Interactivity API in the README, outlining requirements and usage instructions.

Use Case

Developers can now specify the viewScriptModule field in a block's metadata to utilize the Interactivity API. These changes ensure compatibility with modern build processes and enable seamless integration of interactive features in WordPress blocks.

Testing Instructions

Follow these steps to test the changes:

1. Clone or download the wp-scripts repo to your machine.
2. With a project in mind, see what version of node that project uses
3. Inside of the wp-scripts folder switch to that version of node
4. Run npm install
5. Run npm run build
6. cd into packages/build-tool
7. Run npm link (this will create a symlink to the npm global workspace)
8. cd into the project you would like to test from
9. Run npm link @alleyinteractive/build-tool (this will tell your project to use the package we linked above)
10. Check to see if npm run build will work and produce the correct output. Does it build the assets correctly?
11. (optional) If the build fails, you may need to update @wordpress/scripts to at least version 30.8.0
12. After updating @wordpress/scripts, run your build again. If it works, proceed to next step.
13. Run npm install @wordpress/interactivity
14. Setup a block to test the interactivity API with (you could also use the interactivity api block template)
15. Add the --experimental-modules flag to your alley-build build script
16. Verify the block built
17. Test to make sure the interactivity API works as expected.
18. After you've verified all the things, from your project you can run npm unlink @alleyinteractive/build-tool or just delete node_modules and run npm install.

Additional Notes

Refer to the original issue for further context: #685. Updated documentation and helper functions ensure a smoother developer experience and compatibility with evolving WordPress tooling.

[changeset-bot]

⚠️ No Changeset found

Latest commit: dd9619c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[kaitlinbolling]

@efuller this looks good to me! Apologies for the long delay in reviewing this!

[efuller]

@kaitlinbolling no worries ... this ticket has been an absolute journey and it is not yet completed ... but we are close.

There are a few code updates I need to make as well as some 'hopefully' simplified testing steps.