Merge pull request #278 from BeAPI/feature/wordpress-dependency-extraction

Intégration du plugin d'extraction des dépendances

Author: petitphp

.yarn/releases/yarn-3.2.1.cjs

@@ -1,3 +1,3 @@
 nodeLinker: pnp
 
-yarnPath: .yarn/releases/yarn-3.2.1.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

.yarn/releases/yarn-3.2.3.cjs

@@ -51,6 +51,7 @@ module.exports = {
           options: {
             loader: 'js',
             target: 'es2016',
+            legalComments: 'inline',
           },
         },
       },

.yarnrc.yml

@@ -7,6 +7,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const StyleLintPlugin = require('stylelint-webpack-plugin')
 const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
 const WebpackBar = require('webpackbar')
+const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin')
 
 const browsersyncConfig = require('./browsersync.config')
 
@@ -30,6 +31,7 @@ module.exports = {
       new WebpackBar({
         color: '#ffe600',
       }),
+      new DependencyExtractionWebpackPlugin({ injectPolyfill: true }),
     ]
 
     if (mode === 'production') {

config/loaders.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const entries = require('./entries')
+const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = {
   entry: entries,
@@ -9,6 +10,25 @@ module.exports = {
     publicPath: '',
     assetModuleFilename: 'assets/[hash][ext][query]',
   },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          format: {
+            comments: /translators:/i,
+          },
+          compress: {
+            passes: 2,
+          },
+          mangle: {
+            reserved: ['__', '_n', '_nx', '_x'],
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+  },
   externals: {
     jquery: 'window.jQuery',
   },

config/plugins.js

@@ -8,7 +8,10 @@ module.exports = merge(common, {
   mode: mode,
   stats: 'minimal',
   output: {
-    filename: '[name].[chunkhash:8].min.js',
+    filename: '[name]-min.js',
+  },
+  optimization: {
+    concatenateModules: true,
   },
   plugins: plugins.get(mode),
   module: {

config/webpack.common.js

@@ -16,7 +16,7 @@
 class Assets implements Service {
 
 	/**
-	 * @var \BEA\Theme\Framework\Tools\Assets
+	 * @var Assets_Tools
 	 */
 	private $assets_tools;
 
@@ -57,16 +57,19 @@ public function register_assets(): void {
 		}
 		$theme = wp_get_theme();
 
-		// Js theme
-		// Theme js dependencies
-		$scripts_dependencies = [ 'jquery' ];
-
-		// Async and footer
-		$file = $this->is_minified() ? $this->get_min_file( 'js' ) : 'app.js';
-
-		// Do not add version if minified
+		// Do not add a versioning query param in assets URLs if minified
 		$version = $this->is_minified() ? null : $theme->get( 'Version' );
-		$this->assets_tools->register_script( 'scripts', 'dist/' . $file, $scripts_dependencies, $version, true );
+
+		// Js
+		$file       = $this->is_minified() ? $this->get_min_file( 'js' ) : 'app.js';
+		$asset_data = $this->get_asset_data( $file );
+		$this->assets_tools->register_script(
+			'scripts',
+			'dist/' . $file,
+			array_merge( [ 'jquery' ], $asset_data['dependencies'] ), // ensure jQuery dependency is set even if not declared explicitly in the JS
+			$asset_data['version'],
+			true
+		);
 
 		// CSS
 		wp_register_style( 'theme-style', get_stylesheet_uri(), [], $version );
@@ -167,13 +170,52 @@ public function get_min_file( string $type ): string {
 		return $file;
 	}
 
+	/**
+	 * Retrieve data for a compiled asset file.
+	 *
+	 * Asset data are produced by the webpack dependencies extraction plugin. They contain for each asset the list of
+	 * dependencies use by the asset and a hash representing the current version of the asset.
+	 *
+	 * @param string $file The asset name including its extension, eg: app.js, app-min.js
+	 *
+	 * @return array{dependencies: string[], version:string} The asset data if available or an array with the default keys.
+	 */
+	public function get_asset_data( string $file ): array {
+		static $cache_data;
+
+		$empty_asset_data = [
+			'dependencies' => [],
+			'version'      => '',
+		];
+
+		$file = trim( $file );
+		if ( empty( $file ) ) {
+			return $empty_asset_data;
+		}
+
+		if ( isset( $cache_data[ $file ] ) ) {
+			return $cache_data[ $file ];
+		}
+
+		$filename = strtok( $file, '.' );
+		$file     = sprintf( '/dist/%s.asset.php', $filename );
+		if ( ! file_exists( \get_theme_file_path( $file ) ) ) {
+			$cache_data[ $file ] = $empty_asset_data;
+			return $cache_data[ $file ];
+		}
+
+		$cache_data[ $file ] = require \get_theme_file_path( $file );
+
+		return $cache_data[ $file ];
+	}
+
 	/**
 	 * Check if we are on minified environment.
 	 *
 	 * @return bool
 	 * @author Nicolas JUEN
 	 */
-	private function is_minified(): bool {
+	public function is_minified(): bool {
 		return ( ! defined( 'SCRIPT_DEBUG' ) || SCRIPT_DEBUG === false );
 	}
 

config/webpack.prod.js

@@ -1,15 +1,15 @@
 <?php
 
-
 namespace BEA\Theme\Framework\Services;
 
 use BEA\Theme\Framework\Framework;
 use BEA\Theme\Framework\Service;
 use BEA\Theme\Framework\Service_Container;
+use BEA\Theme\Framework\Tools\Assets as Assets_Tools;
 
 class Editor implements Service {
 	/**
-	 * @var \BEA\Theme\Framework\Tools\Assets $assets_tools
+	 * @var Assets_Tools $assets_tools
 	 */
 	private $assets_tools;
 
@@ -22,7 +22,7 @@ class Editor implements Service {
 	 * @param Service_Container $container
 	 */
 	public function register( Service_Container $container ): void {
-		$this->assets_tools = new \BEA\Theme\Framework\Tools\Assets();
+		$this->assets_tools = new Assets_Tools();
 		$this->assets       = Framework::get_container()->get_service( 'assets' );
 	}
 
@@ -142,19 +142,7 @@ private function after_theme_setup(): void {
 	 * editor style
 	 */
 	private function style(): void {
-		/**
-		 * Default file
-		 **/
-		$file = 'editor.css';
-
-		/**
-		 * @var Assets $assets
-		 **/
-		$assets = Framework::get_container()->get_service( 'assets' );
-
-		if ( ( ! defined( 'SCRIPT_DEBUG' ) || false === SCRIPT_DEBUG ) && false !== $assets ) {
-			$file = $assets->get_min_file( 'editor.css' );
-		}
+		$file = $this->assets->is_minified() ? $this->assets->get_min_file( 'editor.css' ) : 'editor.css';
 
 		/**
 		 * Do not enqueue a inexistant file on admin
@@ -170,27 +158,19 @@ private function style(): void {
 	 * Editor script
 	 */
 	public function admin_editor_script(): void {
-		/**
-		 * @var Assets $assets
-		 **/
-		$assets = Framework::get_container()->get_service( 'assets' );
-
-		$theme    = wp_get_theme();
-		$file     = ( ! defined( 'SCRIPT_DEBUG' ) || SCRIPT_DEBUG === false ) ? $assets->get_min_file( 'editor.js' ) : 'editor.js';
+		$file     = $this->assets->is_minified() ? $this->assets->get_min_file( 'editor.js' ) : 'editor.js';
 		$filepath = 'dist/' . $file;
 
 		if ( ! file_exists( get_theme_file_path( $filepath ) ) ) {
 			return;
 		}
 
+		$asset_data = $this->assets->get_asset_data( $file );
 		$this->assets_tools->register_script(
 			'theme-admin-editor-script',
 			$filepath,
-			[
-				'wp-blocks',
-				'wp-dom',
-			],
-			$theme->get( 'Version' ),
+			$asset_data['dependencies'],
+			$asset_data['version'],
 			true
 		);
 		$this->assets_tools->enqueue_script( 'theme-admin-editor-script' );

inc/Services/Assets.php

@@ -2,8 +2,6 @@
 
 namespace BEA\Theme\Framework\Tools;
 
-use phpDocumentor\Reflection\DocBlock\Tags\TagWithType;
-
 /**
  * Class Assets
  *

inc/Services/Editor.php

@@ -19,7 +19,11 @@
     "what-input": "^5.2.10"
   },
   "devDependencies": {
-    "@wordpress/stylelint-config": "^20.0.2",
+    "@wordpress/blocks": "^11.16.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^4.0.0",
+    "@wordpress/dom-ready": "^3.17.0",
+    "@wordpress/hooks": "^3.17.0",
+    "@wordpress/stylelint-config": "^21.0.0",
     "browser-sync": "^2.27.10",
     "browser-sync-webpack-plugin": "^2.3.0",
     "canvas": "^2.9.2",
@@ -54,6 +58,7 @@
     "stylelint-webpack-plugin": "3.3.0",
     "svg-sprite-loader": "^6.0.10",
     "svgo-loader": "^3.0.0",
+    "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.35.0",
     "webpack-bundle-analyzer": "^4.4.1",
     "webpack-cli": "^4.6.0",
@@ -65,5 +70,5 @@
     "node": "16.15.0",
     "yarn": "1.22.19"
   },
-  "packageManager": "yarn@3.2.1"
+  "packageManager": "yarn@3.2.3"
 }

inc/Tools/Assets.php

@@ -1,6 +1,9 @@
 import lazySizes from 'lazysizes'
 import 'lazysizes/plugins/native-loading/ls.native-loading'
 import 'lazysizes/plugins/object-fit/ls.object-fit'
+import domReady from '@wordpress/dom-ready'
+import { addFilter } from '@wordpress/hooks'
+import { unregisterBlockStyle, getBlockVariations, unregisterBlockVariation } from '@wordpress/blocks'
 
 /**
  * LazySizes configuration
@@ -11,25 +14,23 @@ lazySizes.cfg.nativeLoading = {
 }
 
 // Native Gutenberg
-if (typeof wp !== 'undefined') {
-  wp.domReady(() => {
-    wp.blocks.unregisterBlockStyle('core/separator', ['wide', 'dots'])
-    // whitelist core embeds
-    const allowedEmbedVariants = ['youtube', 'vimeo', 'dailymotion']
-    wp.blocks.getBlockVariations('core/embed').forEach((variant) => {
-      if (!allowedEmbedVariants.includes(variant.name)) {
-        wp.blocks.unregisterBlockVariation('core/embed', variant.name)
-      }
-    })
+domReady(() => {
+  unregisterBlockStyle('core/separator', ['wide', 'dots'])
+  // whitelist core embeds
+  const allowedEmbedVariants = ['youtube', 'vimeo', 'dailymotion']
+  getBlockVariations('core/embed').forEach((variant) => {
+    if (!allowedEmbedVariants.includes(variant.name)) {
+      unregisterBlockVariation('core/embed', variant.name)
+    }
   })
-}
+})
 
 // ACF Blocks
 if (window.acf) {
   // Do stuff
 }
 
-wp.hooks.addFilter('blocks.registerBlockType', 'beapi-framework', function (settings, name) {
+addFilter('blocks.registerBlockType', 'beapi-framework', function (settings, name) {
   if (name === 'core/list') {
     // compact preview for block list
     settings.example.attributes.values = '<li><a>Lorem ipsum</a></li><li><a>Dolor sit amet</a></li>'