auto generate entrypoint for block.json files

packages/toolkit/config/filenames.config.js

@@ -2,6 +2,6 @@ module.exports = {
 	js: 'js/[name].js',
 	jsChunk: 'js/[name].[contenthash].chunk.js',
 	css: 'css/[name].css',
-	block: 'blocks/[name]/editor.js',
+	block: '[name].js',
 	blockCSS: 'blocks/[name]/editor.css',
 };

packages/toolkit/config/webpack/entry.js

@@ -1,3 +1,5 @@
+const { getWebpackEntryPoints } = require('../../utils');
+
 const removeDistFolder = (file) => {
 	return file.replace(/(^\.\/dist\/)|^dist\//, '');
 };
@@ -31,5 +33,8 @@ module.exports = ({
 		return config;
 	}
 
-	return buildFiles;
+	return {
+		...buildFiles,
+		...getWebpackEntryPoints(),
+	};
 };

packages/toolkit/package.json

@@ -52,6 +52,7 @@
     "eslint-plugin-react": "^7.27.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-webpack-plugin": "^3.1.1",
+    "fast-glob": "^3.2.11",
     "html-webpack-plugin": "^5.5.0",
     "ignore-emit-webpack-plugin": "2.0.6",
     "image-minimizer-webpack-plugin": "^3.2.3",

packages/toolkit/utils/config.js

@@ -4,6 +4,7 @@
 const { existsSync: fileExists } = require('fs');
 const path = require('path');
 const camelcase = require('camelcase');
+const { sync: glob } = require('fast-glob');
 const { hasArgInCLI, getArgFromCLI } = require('./cli');
 const { fromConfigRoot, fromProjectRoot, hasProjectFile } = require('./file');
 const { hasPackageProp, getPackage } = require('./package');
@@ -253,6 +254,50 @@ const getBuildFiles = () => {
 	return entries;
 };
 
+/**
+ * Detects the list of entry points to use with webpack. There are three ways to do this:
+ *  Scan `block.json` files for scripts.
+ *
+ * @see https://webpack.js.org/concepts/entry-points/
+ *
+ * @returns {object<string, string>} The list of entry points.
+ */
+function getWebpackEntryPoints() {
+	const blockMetadataFiles = glob('includes/blocks/**/block.json', {
+		absolute: true,
+	});
+	if (blockMetadataFiles.length > 0) {
+		return blockMetadataFiles.reduce((accumulator, blockMetadataFile) => {
+			const { editorScript, script, viewScript } = require(blockMetadataFile);
+			[editorScript, script, viewScript]
+				.flat()
+				.filter((value) => value && value.startsWith('file:'))
+				.forEach((value) => {
+					// Removes the `file:` prefix.
+					const filepath = path.join(
+						path.dirname(blockMetadataFile),
+						value.replace('file:', ''),
+					);
+
+					// Takes the path without the file extension, and relative to the `src` directory.
+					const [, entryName] = filepath.split('.')[0].split('dist/');
+					if (!entryName) {
+						return;
+					}
+
+					// Detects the proper file extension used in the `src` directory.
+					const [entryFilepath] = glob(`includes/${entryName}.[jt]s?(x)`, {
+						absolute: true,
+					});
+
+					accumulator[entryName.replace(/\//g, '--')] = entryFilepath;
+				});
+			return accumulator;
+		}, {});
+	}
+	return {};
+}
+
 module.exports = {
 	hasBabelConfig,
 	getJestOverrideConfigFile,
@@ -268,4 +313,5 @@ module.exports = {
 	getTenUpScriptsPackageBuildConfig,
 	hasWebpackConfig,
 	hasTsConfig,
+	getWebpackEntryPoints,
 };

packages/toolkit/utils/index.js

@@ -25,6 +25,7 @@ const {
 	getTenUpScriptsPackageBuildConfig,
 	hasWebpackConfig,
 	hasTsConfig,
+	getWebpackEntryPoints,
 } = require('./config');
 const { fromProjectRoot, fromConfigRoot, hasProjectFile } = require('./file');
 
@@ -61,4 +62,5 @@ module.exports = {
 	getTenUpScriptsPackageBuildConfig,
 	hasWebpackConfig,
 	displayWebpackStats,
+	getWebpackEntryPoints,
 };

projects/10up-theme/includes/blocks/example-block/block.json

@@ -38,6 +38,6 @@
 			"padding": false
 		}
 	},
-	"editorScript": "file:../../../dist/blocks/example-block/editor.js",
+	"editorScript": "file:../../../dist/blocks/example-block/edit.js",
   "editorStyle": "file:../../../dist/blocks/example-block/editor.css"
 }

projects/10up-theme/package.json

@@ -26,7 +26,6 @@
     "devURL": "https://my-project.test",
     "entry": {
       "admin": "./assets/js/admin/admin.js",
-      "blocks": "./includes/blocks/blocks.js",
       "frontend": "./assets/js/frontend/frontend.ts",
       "shared": "./assets/js/shared/shared.js",
       "styleguide": "./assets/js/styleguide/styleguide.js",
@@ -35,7 +34,6 @@
       "shared-style": "./assets/css/shared/shared-style.css",
       "styleguide-style": "./assets/css/styleguide/styleguide.css",
       "core-block-overrides": "./includes/core-block-overrides.js",
-      "example-block": "./includes/blocks/example-block/index.js",
       "test-style": "./assets/css/frontend/testing.scss"
     }
   }