fix(gatsby-plugin-image): do not return from preprocessSource if nothing is changed

[vladar]

Description

It only makes sense to return the actual value from the preprocessSource if it changes the content. Otherwise, it causes a redundant babel parsing when gatsby-plugin-image is used alongside other plugins, i.e. gatsby-plugin-mdx.

Some context. We run this preprocessSource hook here when extracting queries:

gatsby/packages/gatsby/src/query/file-parser.js

Lines 83 to 91 in 8138b97

	const transpiled = await apiRunnerNode(`preprocessSource`, {
	filename: filePath,
	contents: fileStr,
	parentSpan: parentSpan,
	})
	if (transpiled && transpiled.length) {
	for (const item of transpiled) {
	try {
	const tmp = babelParseToAst(item, filePath)

And then doing additional babelParseToAst for every returned value.

If we return undefined instead, results of gatsby-plugin-image will be simply ignored here and won't be added to transpiled array above. Here is where we filter empty plugin results:

gatsby/packages/gatsby/src/utils/api-runner-node.js

Lines 682 to 683 in 8138b97

	// Filter empty results
	apiRunInstance.results = results.filter(result => !_.isEmpty(result))

So to recap:

If there are multiple plugins with preprocessSource (e.g. gatsby-plugin-image and gatsby-plugin-mdx - we'll do a redundant babelParseToAst.

Also, it will likely throw in this combination and hit another slow path as well as cause weird issues with query extraction, see #28676 for a related fix in the core.

[ascorbic]

Looks good. I didn't realise this worked

[vladar]

Published in [email protected]