Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 18 commits into from Apr 5, 2022
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c8a9c01
Add new flag to allow customization of the src directory.
ryanwelcher Mar 21, 2022
f334906
Add new flag to the build command.
ryanwelcher Mar 21, 2022
6465545
Update changelog.
ryanwelcher Mar 21, 2022
6438856
Add npmDevDependencies as a template variable. Update messaging to sh…
ryanwelcher Mar 24, 2022
6f24eb8
Merge remote-tracking branch 'upstream/trunk' into trunk
ryanwelcher Mar 25, 2022
37ec581
Let's try dynamic entry points
gziolo Mar 28, 2022
c5a2b68
Update packages/scripts/CHANGELOG.md
gziolo Mar 28, 2022
4e2af84
Merge branch 'trunk' into try/scripts-custom-src-directory
gziolo Mar 28, 2022
19b81b0
Ensure that `block.json` is always loaded fresh in watch mode
gziolo Mar 28, 2022
c980cd2
Update CHANGELOG.md
gziolo Mar 28, 2022
0f50fcf
Update packages/scripts/utils/config.js
ryanwelcher Apr 4, 2022
0b691cc
Merge remote-tracking branch 'upstream/trunk' into trunk
ryanwelcher Apr 4, 2022
1ed44fc
Merge branch 'trunk' into try/scripts-custom-src-directory
ryanwelcher Apr 4, 2022
727ba85
Merge branch 'try/scripts-custom-src-directory' of github.com:ryanwel…
ryanwelcher Apr 4, 2022
188f23f
Remove duplicated code from merge.
ryanwelcher Apr 4, 2022
6d6b943
Fix typo for WebPack.
ryanwelcher Apr 4, 2022
c7075da
Formatting updates.
ryanwelcher Apr 4, 2022
04b0606
Updates to README.
ryanwelcher Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/scripts/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -2,7 +2,11 @@

## Unreleased

### Bug Fix
### New Feature

- Add `--webpack-src-dir` CLI flag to allow customizing the source code directory (`src` by default) ([#39618](https://github.com/WordPress/gutenberg/pull/39618)).

### Bug Fixes

- Add `vendor/` to `.markdownlintignore`, to match `lint-md-docs` docs ([#39724](https://github.com/WordPress/gutenberg/pull/39724)).
- Include files with `.jsx` extension in the build process ([#39613](https://github.com/WordPress/gutenberg/pull/39613)).
Expand Down
4 changes: 2 additions & 2 deletions packages/scripts/config/webpack.config.js
View file
Open in desktop
Expand Up @@ -90,7 +90,7 @@ const cssLoaders = [
const config = {
mode,
target,
entry: getWebpackEntryPoints(),
entry: getWebpackEntryPoints,
output: {
filename: '[name].js',
path: resolve( process.cwd(), 'build' ),
Expand Down Expand Up @@ -233,7 +233,7 @@ const config = {
patterns: [
{
from: copyWebPackPattens,
context: 'src',
context: process.env.WP_SRC_DIRECTORY,
noErrorOnMissing: true,
},
],
Expand Down
6 changes: 5 additions & 1 deletion packages/scripts/scripts/build.js
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ const { sync: resolveBin } = require( 'resolve-bin' );
/**
* Internal dependencies
*/
const { getWebpackArgs, hasArgInCLI } = require( '../utils' );
const { getWebpackArgs, hasArgInCLI, getArgFromCLI } = require( '../utils' );

process.env.NODE_ENV = process.env.NODE_ENV || 'production';

Expand All @@ -23,6 +23,10 @@ if ( hasArgInCLI( '--webpack-copy-php' ) ) {
process.env.WP_COPY_PHP_FILES_TO_DIST = true;
}

process.env.WP_SRC_DIRECTORY = hasArgInCLI( '--webpack-src-dir' )
? getArgFromCLI( '--webpack-src-dir' )
: 'src';

const { status } = spawn( resolveBin( 'webpack' ), getWebpackArgs(), {
stdio: 'inherit',
} );
Expand Down
4 changes: 4 additions & 0 deletions packages/scripts/scripts/start.js
View file
Open in desktop
Expand Up @@ -25,6 +25,10 @@ if ( hasArgInCLI( '--webpack-copy-php' ) ) {
process.env.WP_COPY_PHP_FILES_TO_DIST = true;
}

process.env.WP_SRC_DIRECTORY = hasArgInCLI( '--webpack-src-dir' )
? getArgFromCLI( '--webpack-src-dir' )
: 'src';

const { status } = spawn(
resolveBin( 'webpack' ),
[ hasArgInCLI( '--hot' ) ? 'serve' : 'watch', ...getWebpackArgs() ],
Expand Down
53 changes: 36 additions & 17 deletions packages/scripts/utils/config.js
View file
Open in desktop
Expand Up @@ -183,19 +183,29 @@ function getWebpackEntryPoints() {
return JSON.parse( process.env.WP_ENTRY );
}

// Continue only if the `src` directory exists.
if ( ! hasProjectFile( 'src' ) ) {
// Continue only if the source directory exists.
if ( ! hasProjectFile( process.env.WP_SRC_DIRECTORY ) ) {
log(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Related comment I mentioned: #38739 (comment).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

chalk.yellow(
`Source directory"${ process.env.WP_SRC_DIRECTORY }" was not found. Please confirm there is a "src" directory in the root or the value passed to --webpack-src-dir is correct.`
ryanwelcher marked this conversation as resolved.
Show resolved Hide resolved
)
);
return {};
}

// 2. Checks whether any block metadata files can be detected in the `src` directory.
// 2. Checks whether any block metadata files can be detected in the defined source directory.
// It scans all discovered files looking for JavaScript assets and converts them to entry points.
const blockMetadataFiles = glob( 'src/**/block.json', {
absolute: true,
} );
const blockMetadataFiles = glob(
`${ process.env.WP_SRC_DIRECTORY }/**/block.json`,
{
absolute: true,
}
);

if ( blockMetadataFiles.length > 0 ) {
const srcDirectory = fromProjectRoot( 'src' + sep );
const srcDirectory = fromProjectRoot(
process.env.WP_SRC_DIRECTORY + sep
);
const entryPoints = blockMetadataFiles.reduce(
( accumulator, blockMetadataFile ) => {
const {
Expand All @@ -213,7 +223,7 @@ function getWebpackEntryPoints() {
value.replace( 'file:', '' )
);

// Takes the path without the file extension, and relative to the `src` directory.
// Takes the path without the file extension, and relative to the defined source directory.
if ( ! filepath.startsWith( srcDirectory ) ) {
log(
chalk.yellow(
Expand All @@ -223,7 +233,9 @@ function getWebpackEntryPoints() {
) }" listed in "${ blockMetadataFile.replace(
fromProjectRoot( sep ),
''
) }". File is located outside of the "src" directory.`
) }". File is located outside of the "${
process.env.WP_SRC_DIRECTORY
}" directory.`
)
);
return;
Expand All @@ -233,9 +245,9 @@ function getWebpackEntryPoints() {
.replace( srcDirectory, '' )
.replace( /\\/g, '/' );

// Detects the proper file extension used in the `src` directory.
// Detects the proper file extension used in the defined source directory.
const [ entryFilepath ] = glob(
`src/${ entryName }.[jt]s?(x)`,
`${ process.env.WP_SRC_DIRECTORY }/${ entryName }.[jt]s?(x)`,
{
absolute: true,
}
Expand All @@ -250,7 +262,9 @@ function getWebpackEntryPoints() {
) }" listed in "${ blockMetadataFile.replace(
fromProjectRoot( sep ),
''
) }". File does not exist in the "src" directory.`
) }". File does not exist in the "${
process.env.WP_SRC_DIRECTORY
}" directory.`
)
);
return;
Expand All @@ -267,14 +281,19 @@ function getWebpackEntryPoints() {
}
}

// 3. Checks whether a standard file name can be detected in the `src` directory,
// 3. Checks whether a standard file name can be detected in the defined source directory,
// and converts the discovered file to entry point.
const [ entryFile ] = glob( 'src/index.[jt]s?(x)', {
absolute: true,
} );
const [ entryFile ] = glob(
`${ process.env.WP_SRC_DIRECTORY }/index.[jt]s?(x)`,
{
absolute: true,
}
);
if ( ! entryFile ) {
log(
chalk.yellow( 'No entry file discovered in the "src" directory.' )
chalk.yellow(
`No entry file discovered in the "${ process.env.WP_SRC_DIRECTORY }" directory.`
)
);
return {};
}
Expand Down