Scripts: Add new flag to allow customization of the `src` directory. #39618

ryanwelcher · 2022-03-21T20:05:17Z

What?

Adds a new CLI flag to allow customization of the "src" directory called --webpack-src-dir.

Why?

The scripts package allows for entry point customization when being called i.e wp-scripts start ./custom-dir however those custom entry points will not benefit from the auto-detection of block.json files and the ability to copy PHP files due to "src" being hardcoded in the code that provides those features.

In some cases, being able to change the name of the directory helps to clarify its usage, especially if there are other directories that also contain source code. This is seen in WordPress/gutenberg-examples#195 (comment), where we are needing to have directories that handle blocks and add a separate one for non-block code examples. See WordPress/gutenberg-examples#195 (comment) for more context on why the src directory doesn't work for all examples.

How?

If the new flag is detected, the passed directory is used, otherwise "src" is used.

Testing Instructions

I created a block using npx @wordpress/create-block@ scripts-test
Renamed src to test-directory
Ran node {FULLPATH}/gutenberg/packages/scripts/bin/wp-scripts.js -- start --webpack-src-dir=test-directory

Update error messaging and inline comments.

…ow what packages are being installed.

gziolo · 2022-03-25T15:01:04Z

packages/scripts/utils/config.js

-	if ( ! hasProjectFile( 'src' ) ) {
+	// Continue only if the source directory exists.
+	if ( ! hasProjectFile( process.env.WP_SRC_DIRECTORY ) ) {
+		log(


I remember some folks reporting a similar message on the terminal was confusing in case they using a custom config that overrides the entry points.

It made me think that we could use a dynamic entry as documented in https://webpack.js.org/configuration/entry-context/#dynamic-entry. We would never run this code when the project overrides entry points.

If a function is passed, then it will be invoked on every make event.

Note that the making event triggers when webpack starts and for every invalidation when watching for file changes.

In fact, this would solve a more pressing issue we recently discovered with @schmitzoide when working on a plugin with multiple blocks. Currently, the logic for finding entry points runs only once in the watch mode. Therefore you need to restart the development build whenever new blocks get introduced or scripts for the block change. Using a callback function should resolve the issue.

Related comment I mentioned: #38739 (comment).

@gziolo @ryanwelcher Hope this PR resolves the confusing behaviour for #38739 (comment)

I added commit 37ec581 to see if that resolves the issue.

I can confirm that the message isn't shown when we use the default handling for entry points.

I can also confirm that entry points get dynamically updated in the watch mode when block.json changes.

packages/scripts/CHANGELOG.md

gziolo

This is a great idea! Thank you for starting this PR. I left my feedback, and I believe this is nearly ready to go. I want to test it extensively when you get the chance to respond to the idea of using dynamic entry points. It’s probably as simple as not calling the existing function 😃

It would be great to update https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/README.md and explain how to pass a custom source folder. Ideally, we move that to its section and reference from both start and build commands.

packages/scripts/utils/config.js

gziolo

We still need to improve the documentation for @wordpress/scripts to educate how to use the new --webpack-src-dir CLI flag. In general, we need better docs for how to work with the build process that has become very flexible but also a bit too magical 😄

gziolo · 2022-03-28T13:33:35Z

I see I messed up something with whitespaces when editing with GitHub UI:

It's always tricky when trying to update a forked repository.

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

…cher/gutenberg into try/scripts-custom-src-directory

gziolo · 2022-04-04T17:55:53Z

packages/scripts/config/webpack.config.js

@@ -232,7 +232,7 @@ const config = {
 		new CopyWebpackPlugin( {
 			patterns: [
 				{
-					from: copyWebPackPattens,
+					from: copyWebPackPatterns,


NIt: it's webpack not WebPack 😄

🤦 Nice catch - I've updated the reference.

ryanwelcher · 2022-04-04T18:33:55Z

We still need to improve the documentation for @wordpress/scripts to educate how to use the new --webpack-src-dir CLI flag. In general, we need better docs for how to work with the build process that has become very flexible but also a bit too magical 😄

💯 on this for sure. I have added some updated information with this PR but I think we may need to restructure the docs as it's broken down by command.

gziolo

Everything looks great in regards to the new CLI option introduced.

I have added some updated information with this PR but I think we may need to restructure the docs as it's broken down by command.

Yes, totally agree. I think we still need to have all commands listed in the README file but we definitely should make that shorter and reference more detailed documents/guides grouped by concepts. In particular, it would be important to have something that covers all related concepts to the build process in one place rather than duplicated for build and start.

Add new flag to allow customization of the src directory.

c8a9c01

Update error messaging and inline comments.

ryanwelcher added [Package] Scripts /packages/scripts Developer Experience Ideas about improving block and theme developer experience labels Mar 21, 2022

ryanwelcher added 2 commits March 21, 2022 16:05

Add new flag to the build command.

f334906

Update changelog.

6465545

ryanwelcher marked this pull request as ready for review March 21, 2022 20:08

ryanwelcher requested review from gziolo, ntwb, nerrad and ajitbohra as code owners March 21, 2022 20:08

ryanwelcher requested review from mkaz and gziolo and removed request for gziolo, ntwb, ajitbohra and nerrad March 21, 2022 20:08

ryanwelcher mentioned this pull request Mar 21, 2022

Major structural overhaul to the repo WordPress/gutenberg-examples#195

Merged

Add npmDevDependencies as a template variable. Update messaging to sh…

6438856

…ow what packages are being installed.

gziolo reviewed Mar 25, 2022

View reviewed changes

Merge remote-tracking branch 'upstream/trunk' into trunk

6f24eb8

gziolo reviewed Mar 25, 2022

View reviewed changes

packages/scripts/CHANGELOG.md Outdated Show resolved Hide resolved

gziolo reviewed Mar 25, 2022

View reviewed changes

gziolo mentioned this pull request Mar 28, 2022

Scripts: "No entry files discovered in the "src" folder" with entry context in webpack.config.js #38739

Closed

gziolo added 2 commits March 28, 2022 08:39

Let's try dynamic entry points

37ec581

Update packages/scripts/CHANGELOG.md

c5a2b68

gziolo added [Type] Feature New feature to highlight in changelogs. [Type] New API New API to be used by plugin developers or package users. and removed [Type] Feature New feature to highlight in changelogs. labels Mar 28, 2022

gziolo assigned ryanwelcher Mar 28, 2022

Merge branch 'trunk' into try/scripts-custom-src-directory

4e2af84

gziolo added this to Needs review in Core JS Mar 28, 2022

gziolo changed the title ~~[Scripts]: Add new flag to allow customization of the src directory.~~ Scripts: Add new flag to allow customization of the src directory. Mar 28, 2022

gziolo reviewed Mar 28, 2022

View reviewed changes

packages/scripts/utils/config.js Outdated Show resolved Hide resolved

gziolo added 2 commits March 28, 2022 14:59

Ensure that block.json is always loaded fresh in watch mode

19b81b0

Update CHANGELOG.md

c980cd2

gziolo approved these changes Mar 28, 2022

View reviewed changes

ryanwelcher and others added 4 commits April 4, 2022 13:37

Update packages/scripts/utils/config.js

0f50fcf

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

Merge remote-tracking branch 'upstream/trunk' into trunk

0b691cc

Merge branch 'trunk' into try/scripts-custom-src-directory

1ed44fc

Merge branch 'try/scripts-custom-src-directory' of github.com:ryanwel…

727ba85

…cher/gutenberg into try/scripts-custom-src-directory

gziolo reviewed Apr 4, 2022

View reviewed changes

ryanwelcher added 4 commits April 4, 2022 13:58

Remove duplicated code from merge.

188f23f

Fix typo for WebPack.

6d6b943

Formatting updates.

c7075da

Updates to README.

04b0606

gziolo approved these changes Apr 4, 2022

View reviewed changes

ryanwelcher merged commit 60827ac into WordPress:trunk Apr 5, 2022

github-actions bot added this to the Gutenberg 13.0 milestone Apr 5, 2022

gziolo moved this from Needs review to Done in Core JS Apr 5, 2022

ryanwelcher mentioned this pull request Apr 5, 2022

Create Block: Create a more modular structure that is easier to extend to several blocks #25188

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scripts: Add new flag to allow customization of the `src` directory. #39618

Scripts: Add new flag to allow customization of the `src` directory. #39618

ryanwelcher commented Mar 21, 2022

gziolo Mar 25, 2022

gziolo Mar 25, 2022

gziolo Mar 28, 2022

shivapoudel Mar 28, 2022

gziolo Mar 28, 2022

gziolo Mar 28, 2022

gziolo left a comment

gziolo left a comment

gziolo commented Mar 28, 2022

gziolo Apr 4, 2022

ryanwelcher Apr 4, 2022

ryanwelcher commented Apr 4, 2022

gziolo left a comment •

edited

Scripts: Add new flag to allow customization of the src directory. #39618

Scripts: Add new flag to allow customization of the src directory. #39618

Conversation

ryanwelcher commented Mar 21, 2022

What?

Why?

How?

Testing Instructions

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

gziolo commented Mar 28, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryanwelcher commented Apr 4, 2022

gziolo left a comment • edited

Choose a reason for hiding this comment

Scripts: Add new flag to allow customization of the `src` directory. #39618

Scripts: Add new flag to allow customization of the `src` directory. #39618

gziolo left a comment •

edited