From 660ae40125fe3156db77dbd89c706dc716b7abd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Tue, 25 Jan 2022 09:45:27 +0100 Subject: [PATCH] auto generate entrypoint for block.json files --- package-lock.json | 24 ++++------ packages/toolkit/config/filenames.config.js | 2 +- packages/toolkit/config/webpack/entry.js | 7 ++- packages/toolkit/package.json | 1 + packages/toolkit/utils/config.js | 46 +++++++++++++++++++ packages/toolkit/utils/index.js | 2 + .../includes/blocks/example-block/block.json | 2 +- projects/10up-theme/package.json | 2 - 8 files changed, 67 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index f8a6d681..ebfe6a14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,6 +50,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", "imagemin-webpack-plugin": "^2.4.2", @@ -5766,13 +5767,7 @@ "name": "wp-prettier", "version": "2.2.1-beta-1", "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.2.1-beta-1.tgz", - "integrity": "sha512-+JHkqs9LC/JPp51yy1hzs3lQ7qeuWCwOcSzpQNeeY/G7oSpnF61vxt7hRh87zNRTr6ob2ndy0W8rVzhgrcA+Gw==", - "bin": { - "prettier": "bin-prettier.js" - }, - "engines": { - "node": ">=10.13.0" - } + "integrity": "sha512-+JHkqs9LC/JPp51yy1hzs3lQ7qeuWCwOcSzpQNeeY/G7oSpnF61vxt7hRh87zNRTr6ob2ndy0W8rVzhgrcA+Gw==" }, "node_modules/@wordpress/eslint-plugin/node_modules/type-fest": { "version": "0.8.1", @@ -12680,9 +12675,9 @@ "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==" }, "node_modules/fast-glob": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz", - "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==", + "version": "3.2.11", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", + "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==", "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -12691,7 +12686,7 @@ "micromatch": "^4.0.4" }, "engines": { - "node": ">=8" + "node": ">=8.6.0" } }, "node_modules/fast-json-stable-stringify": { @@ -21926,6 +21921,7 @@ "version": "5.3.1", "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.3.1.tgz", "integrity": "sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==", + "deprecated": "The functionality that this package provided is now in @npmcli/arborist", "dev": true, "dependencies": { "read-package-json": "^2.0.0", @@ -36540,9 +36536,9 @@ "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==" }, "fast-glob": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz", - "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==", + "version": "3.2.11", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", + "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==", "requires": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", diff --git a/packages/toolkit/config/filenames.config.js b/packages/toolkit/config/filenames.config.js index 025f1fea..a0ba4f80 100644 --- a/packages/toolkit/config/filenames.config.js +++ b/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', }; diff --git a/packages/toolkit/config/webpack/entry.js b/packages/toolkit/config/webpack/entry.js index f6fed467..c6b4ab41 100644 --- a/packages/toolkit/config/webpack/entry.js +++ b/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(), + }; }; diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json index cad462f5..6cf4a661 100644 --- a/packages/toolkit/package.json +++ b/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", "imagemin-webpack-plugin": "^2.4.2", diff --git a/packages/toolkit/utils/config.js b/packages/toolkit/utils/config.js index de5ed023..3462b9d4 100644 --- a/packages/toolkit/utils/config.js +++ b/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'); @@ -248,6 +249,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} 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, @@ -263,4 +308,5 @@ module.exports = { getTenUpScriptsPackageBuildConfig, hasWebpackConfig, hasTsConfig, + getWebpackEntryPoints, }; diff --git a/packages/toolkit/utils/index.js b/packages/toolkit/utils/index.js index ac14b063..1ca31031 100644 --- a/packages/toolkit/utils/index.js +++ b/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, }; diff --git a/projects/10up-theme/includes/blocks/example-block/block.json b/projects/10up-theme/includes/blocks/example-block/block.json index b4d52422..968b5743 100644 --- a/projects/10up-theme/includes/blocks/example-block/block.json +++ b/projects/10up-theme/includes/blocks/example-block/block.json @@ -36,5 +36,5 @@ "padding": false } }, - "editorScript": "file:../../../dist/blocks/example-block/editor.js" + "editorScript": "file:../../../dist/blocks/example-block/edit.js" } diff --git a/projects/10up-theme/package.json b/projects/10up-theme/package.json index 2af2ba7e..1a72add9 100644 --- a/projects/10up-theme/package.json +++ b/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", @@ -36,7 +35,6 @@ "style": "./assets/css/frontend/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" } }