From a3e75759de5a013611aff06f19a267d21bb6805d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Thu, 11 Apr 2024 20:36:23 +0200
Subject: [PATCH] feature allow defining module scripts through project config
 decoupled from blocks

---
 packages/toolkit/config/webpack.config.js      | 10 +++++++++-
 packages/toolkit/config/webpack/entry.js       |  4 +++-
 packages/toolkit/utils/config.js               | 18 ++++++++++++++++++
 .../assets/js/frontend/frontend-module.js      | 12 ++++++++++++
 projects/10up-theme/package.json               |  5 ++++-
 5 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 projects/10up-theme/assets/js/frontend/frontend-module.js

diff --git a/packages/toolkit/config/webpack.config.js b/packages/toolkit/config/webpack.config.js
index 7137a2e5..8b52d948 100644
--- a/packages/toolkit/config/webpack.config.js
+++ b/packages/toolkit/config/webpack.config.js
@@ -6,6 +6,7 @@ const {
 	getTenUpScriptsConfig,
 	getTenUpScriptsPackageBuildConfig,
 } = require('../utils');
+const { getModuleBuildFiles } = require('../utils/config');
 
 const {
 	getEntryPoints,
@@ -25,6 +26,7 @@ const projectConfig = getTenUpScriptsConfig();
 const packageConfig = getTenUpScriptsPackageBuildConfig();
 const { source, main } = packageConfig;
 const buildFiles = getBuildFiles();
+const moduleBuildFiles = getModuleBuildFiles();
 
 // assume it's a package if there's source and main
 const isPackage = typeof source !== 'undefined' && typeof main !== 'undefined';
@@ -44,6 +46,7 @@ const config = {
 	projectConfig,
 	packageConfig,
 	buildFiles,
+	moduleBuildFiles,
 	isPackage,
 	mode,
 	isProduction,
@@ -95,7 +98,12 @@ const moduleConfig = {
 			...baseConfig.output.library,
 			type: 'module',
 		},
-		filename: 'blocks/[name].js',
+		filename: (pathData) => {
+			const isBlockAsset =
+				moduleBuildFiles[pathData.chunk.name].match(/\/blocks?\//) ||
+				moduleBuildFiles[pathData.chunk.name].match(/\\blocks?\\/);
+			return isBlockAsset ? projectConfig.filenames.block : projectConfig.filenames.js;
+		},
 	},
 };
 
diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js
index 5f66b3af..f08458f6 100644
--- a/packages/toolkit/config/webpack/entry.js
+++ b/packages/toolkit/config/webpack/entry.js
@@ -12,6 +12,7 @@ module.exports = ({
 	projectConfig: { devServer, paths, useBlockAssets, filenames },
 	packageConfig: { packageType, source, main, umd, libraryName },
 	buildFiles,
+	moduleBuildFiles,
 }) => {
 	let additionalEntrypoints = {};
 	if (useBlockAssets) {
@@ -105,7 +106,8 @@ module.exports = ({
 	}
 
 	if (buildType === 'module') {
-		return additionalEntrypoints;
+		Object.assign(moduleBuildFiles, additionalEntrypoints);
+		return moduleBuildFiles;
 	}
 
 	// merge the new entrypoints with the existing ones
diff --git a/packages/toolkit/utils/config.js b/packages/toolkit/utils/config.js
index ca8554ad..c9b72637 100644
--- a/packages/toolkit/utils/config.js
+++ b/packages/toolkit/utils/config.js
@@ -124,6 +124,7 @@ const getDefaultConfig = () => {
 
 	return {
 		entry: require(buildFilesPath),
+		moduleEntry: {},
 		filenames: require(filenamesPath),
 		paths: require(pathsPath),
 		wordpress: wpMode !== 'false',
@@ -295,6 +296,22 @@ const getBuildFiles = () => {
 	return entries;
 };
 
+const getModuleBuildFiles = () => {
+	const { moduleEntry } = getTenUpScriptsConfig();
+
+	const entries = {};
+
+	Object.keys(moduleEntry).forEach((key) => {
+		const filePath = path.resolve(process.cwd(), moduleEntry[key]);
+
+		if (fileExists(filePath)) {
+			entries[key] = filePath;
+		}
+	});
+
+	return entries;
+};
+
 module.exports = {
 	hasBabelConfig,
 	getJestOverrideConfigFile,
@@ -303,6 +320,7 @@ module.exports = {
 	hasPostCSSConfig,
 	hasStylelintConfig,
 	getBuildFiles,
+	getModuleBuildFiles,
 	hasEslintignoreConfig,
 	hasEslintConfig,
 	getTenUpScriptsConfig,
diff --git a/projects/10up-theme/assets/js/frontend/frontend-module.js b/projects/10up-theme/assets/js/frontend/frontend-module.js
new file mode 100644
index 00000000..c606cecc
--- /dev/null
+++ b/projects/10up-theme/assets/js/frontend/frontend-module.js
@@ -0,0 +1,12 @@
+import { store } from '@wordpress/interactivity';
+
+const { state } = store('frontend', {
+	state: {
+		isExpanded: false,
+	},
+	actions: {
+		toggleExpanded() {
+			state.isExpanded = !state.isExpanded;
+		},
+	},
+});
diff --git a/projects/10up-theme/package.json b/projects/10up-theme/package.json
index 22513459..8e9cc981 100644
--- a/projects/10up-theme/package.json
+++ b/projects/10up-theme/package.json
@@ -46,6 +46,9 @@
       "styleguide-style": "./assets/css/styleguide/styleguide.css",
       "core-block-overrides": "./includes/core-block-overrides.js",
       "test-style": "./assets/css/frontend/testing.scss"
-    }
+    },
+	"moduleEntry": {
+		"frontend-module": "./assets/js/frontend/frontend-module.js"
+	}
   }
 }