Skip to content

Commit aa981ac

Browse files
cbravobernalcbravobernal
committed
Update webpack dependencies, remove deprecations, etc
1 parent be5c1d9 commit aa981ac

File tree

4 files changed

+171
-32
lines changed

4 files changed

+171
-32
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ jspm_packages/
4444
assets/build/**/*.css
4545
assets/build/**/*.map
4646
assets/build/**/*.js
47+
assets/build/**/*.php
4748

4849
# PHPUnit result cache
4950
.phpunit.result.cache

‎includes/assets.php

+138-15
Original file line numberDiff line numberDiff line change
@@ -109,26 +109,149 @@ public function register_scripts() {
109109
$suffix = defined( 'SCF_DEVELOPMENT_MODE' ) && SCF_DEVELOPMENT_MODE ? '' : '.min';
110110
$version = acf_get_setting( 'version' );
111111

112-
// Register scripts.
113-
wp_register_script( 'acf-pro-input', acf_get_url( 'assets/build/js/pro/acf-pro-input' . $suffix . '.js' ), array( 'acf-input' ), $version, true );
114-
wp_register_script( 'acf-pro-field-group', acf_get_url( 'assets/build/js/pro/acf-pro-field-group' . $suffix . '.js' ), array( 'acf-field-group' ), $version, true );
115-
wp_register_script( 'acf-pro-ui-options-page', acf_get_url( 'assets/build/js/pro/acf-pro-ui-options-page' . $suffix . '.js' ), array( 'acf-input' ), $version, true );
112+
// Define path patterns.
113+
$js_path_patterns = array(
114+
'pro' => 'assets/build/js/pro/%s' . $suffix . '.js',
115+
'base' => 'assets/build/js/%s' . $suffix . '.js',
116+
);
117+
$css_path_patterns = array(
118+
'pro' => 'assets/build/css/pro/%s.css',
119+
'base' => 'assets/build/css/%s' . $suffix . '.css',
120+
);
121+
$asset_path_patterns = array(
122+
'pro' => 'assets/build/js/pro/%s.asset.php',
123+
'base' => 'assets/build/js/%s.asset.php',
124+
);
116125

117-
// Register styles.
118-
wp_register_style( 'acf-pro-input', acf_get_url( 'assets/build/css/pro/acf-pro-input.css' ), array( 'acf-input' ), $version );
119-
wp_register_style( 'acf-pro-field-group', acf_get_url( 'assets/build/css/pro/acf-pro-field-group.css' ), array( 'acf-input' ), $version );
126+
// Define script registrations.
127+
$scripts = array(
128+
'acf-pro-input' => array(
129+
'handle' => 'acf-pro-input',
130+
'src' => acf_get_url( sprintf( $js_path_patterns['pro'], 'acf-pro-input' ) ),
131+
'asset_file' => acf_get_path( sprintf( $asset_path_patterns['pro'], 'acf-pro-input' ) ),
132+
'deps' => array( 'acf-input' ),
133+
'version' => $version,
134+
'in_footer' => true,
135+
),
136+
'acf-pro-field-group' => array(
137+
'handle' => 'acf-pro-field-group',
138+
'src' => acf_get_url( sprintf( $js_path_patterns['pro'], 'acf-pro-field-group' ) ),
139+
'asset_file' => acf_get_path( sprintf( $asset_path_patterns['pro'], 'acf-pro-field-group' ) ),
140+
'deps' => array( 'acf-field-group' ),
141+
'version' => $version,
142+
'in_footer' => true,
143+
),
144+
'acf-pro-ui-options-page' => array(
145+
'handle' => 'acf-pro-ui-options-page',
146+
'src' => acf_get_url( sprintf( $js_path_patterns['pro'], 'acf-pro-ui-options-page' ) ),
147+
'asset_file' => acf_get_path( sprintf( $asset_path_patterns['pro'], 'acf-pro-ui-options-page' ) ),
148+
'deps' => array( 'acf-input' ),
149+
'version' => $version,
150+
'in_footer' => true,
151+
),
152+
'acf' => array(
153+
'handle' => 'acf',
154+
'src' => acf_get_url( sprintf( $js_path_patterns['base'], 'acf' ) ),
155+
'asset_file' => acf_get_path( sprintf( $asset_path_patterns['base'], 'acf' ) ),
156+
'deps' => array( 'jquery' ),
157+
'version' => $version,
158+
'in_footer' => false,
159+
),
160+
'acf-input' => array(
161+
'handle' => 'acf-input',
162+
'src' => acf_get_url( sprintf( $js_path_patterns['base'], 'acf-input' ) ),
163+
'asset_file' => acf_get_path( sprintf( $asset_path_patterns['base'], 'acf-input' ) ),
164+
'deps' => array( 'jquery', 'jquery-ui-sortable', 'jquery-ui-resizable', 'acf', 'wp-a11y' ),
165+
'version' => $version,
166+
'in_footer' => false,
167+
),
168+
'acf-field-group' => array(
169+
'handle' => 'acf-field-group',
170+
'src' => acf_get_url( sprintf( $js_path_patterns['base'], 'acf-field-group' ) ),
171+
'asset_file' => acf_get_path( sprintf( $asset_path_patterns['base'], 'acf-field-group' ) ),
172+
'deps' => array( 'acf-input' ),
173+
'version' => $version,
174+
'in_footer' => false,
175+
),
176+
'acf-internal-post-type' => array(
177+
'handle' => 'acf-internal-post-type',
178+
'src' => acf_get_url( sprintf( $js_path_patterns['base'], 'acf-internal-post-type' ) ),
179+
'asset_file' => acf_get_path( sprintf( $asset_path_patterns['base'], 'acf-internal-post-type' ) ),
180+
'deps' => array( 'acf-input' ),
181+
'version' => $version,
182+
'in_footer' => false,
183+
),
184+
'acf-escaped-html-notice' => array(
185+
'handle' => 'acf-escaped-html-notice',
186+
'src' => acf_get_url( sprintf( $js_path_patterns['base'], 'acf-escaped-html-notice' ) ),
187+
'asset_file' => acf_get_path( sprintf( $asset_path_patterns['base'], 'acf-escaped-html-notice' ) ),
188+
'deps' => array( 'jquery' ),
189+
'version' => $version,
190+
'in_footer' => true,
191+
),
192+
);
193+
194+
// Define style registrations.
195+
$styles = array(
196+
'acf-pro-input' => array(
197+
'handle' => 'acf-pro-input',
198+
'src' => acf_get_url( sprintf( $css_path_patterns['pro'], 'acf-pro-input' ) ),
199+
'deps' => array( 'acf-input' ),
200+
'version' => $version,
201+
),
202+
'acf-pro-field-group' => array(
203+
'handle' => 'acf-pro-field-group',
204+
'src' => acf_get_url( sprintf( $css_path_patterns['pro'], 'acf-pro-field-group' ) ),
205+
'deps' => array( 'acf-input' ),
206+
'version' => $version,
207+
),
208+
'acf-global' => array(
209+
'handle' => 'acf-global',
210+
'src' => acf_get_url( sprintf( $css_path_patterns['base'], 'acf-global' ) ),
211+
'deps' => array( 'dashicons' ),
212+
'version' => $version,
213+
),
214+
'acf-input' => array(
215+
'handle' => 'acf-input',
216+
'src' => acf_get_url( sprintf( $css_path_patterns['base'], 'acf-input' ) ),
217+
'deps' => array( 'acf-global' ),
218+
'version' => $version,
219+
),
220+
'acf-field-group' => array(
221+
'handle' => 'acf-field-group',
222+
'src' => acf_get_url( sprintf( $css_path_patterns['base'], 'acf-field-group' ) ),
223+
'deps' => array( 'acf-input' ),
224+
'version' => $version,
225+
),
226+
);
120227

121228
// Register scripts.
122-
wp_register_script( 'acf', acf_get_url( 'assets/build/js/acf' . $suffix . '.js' ), array( 'jquery' ), $version );
123-
wp_register_script( 'acf-input', acf_get_url( 'assets/build/js/acf-input' . $suffix . '.js' ), array( 'jquery', 'jquery-ui-sortable', 'jquery-ui-resizable', 'acf', 'wp-a11y' ), $version );
124-
wp_register_script( 'acf-field-group', acf_get_url( 'assets/build/js/acf-field-group' . $suffix . '.js' ), array( 'acf-input' ), $version );
125-
wp_register_script( 'acf-internal-post-type', acf_get_url( 'assets/build/js/acf-internal-post-type' . $suffix . '.js' ), array( 'acf-input' ), $version );
126-
wp_register_script( 'acf-escaped-html-notice', acf_get_url( 'assets/build/js/acf-escaped-html-notice' . $suffix . '.js' ), array( 'jquery' ), $version, true );
229+
foreach ( $scripts as $script ) {
230+
// Load asset file if it exists.
231+
$asset = file_exists( $script['asset_file'] ) ? require $script['asset_file'] : null;
232+
233+
// Merge dependencies if asset file exists.
234+
$deps = $asset ? array_merge( $asset['dependencies'], $script['deps'] ) : $script['deps'];
235+
$ver = $asset ? $asset['version'] : $script['version'];
236+
237+
wp_register_script(
238+
$script['handle'],
239+
$script['src'],
240+
$deps,
241+
$ver,
242+
$script['in_footer']
243+
);
244+
}
127245

128246
// Register styles.
129-
wp_register_style( 'acf-global', acf_get_url( 'assets/build/css/acf-global' . $suffix . '.css' ), array( 'dashicons' ), $version );
130-
wp_register_style( 'acf-input', acf_get_url( 'assets/build/css/acf-input' . $suffix . '.css' ), array( 'acf-global' ), $version );
131-
wp_register_style( 'acf-field-group', acf_get_url( 'assets/build/css/acf-field-group' . $suffix . '.css' ), array( 'acf-input' ), $version );
247+
foreach ( $styles as $style ) {
248+
wp_register_style(
249+
$style['handle'],
250+
$style['src'],
251+
$style['deps'],
252+
$style['version']
253+
);
254+
}
132255

133256
/**
134257
* Fires after core scripts and styles have been registered.

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@babel/core": "^7.25.8",
1616
"@babel/preset-env": "^7.25.8",
1717
"@babel/preset-react": "^7.25.7",
18+
"@wordpress/dependency-extraction-webpack-plugin": "^6.20.0",
1819
"babel-loader": "^9.2.1",
1920
"css-loader": "^7.1.2",
2021
"css-minimizer-webpack-plugin": "^7.0.0",
@@ -25,9 +26,9 @@
2526
"sass-loader": "^16.0.2",
2627
"sort-package-json": "^2.14.0",
2728
"terser-webpack-plugin": "^5.3.10",
28-
"webpack": "^5.95.0",
29+
"webpack": "^5.98.0",
2930
"webpack-cli": "^5.1.4",
30-
"webpack-fix-style-only-entries": "^0.6.1"
31+
"webpack-remove-empty-scripts": "^1.0.4"
3132
},
3233
"engines": {
3334
"node": ">=20.15.1",

‎webpack.config.js

+29-15
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,34 @@ const path = require('path');
22
const TerserPlugin = require('terser-webpack-plugin');
33
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
44
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
5-
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
5+
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
6+
const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
67

78
// Common configuration for both builds
89
const commonConfig = {
910
entry: {
1011
// JavaScript files
11-
'js/acf-escaped-html-notice': './assets/src/js/acf-escaped-html-notice.js',
12+
'js/acf-escaped-html-notice':
13+
'./assets/src/js/acf-escaped-html-notice.js',
1214
'js/acf-field-group': './assets/src/js/acf-field-group.js',
1315
'js/acf-input': './assets/src/js/acf-input.js',
14-
'js/acf-internal-post-type': './assets/src/js/acf-internal-post-type.js',
16+
'js/acf-internal-post-type':
17+
'./assets/src/js/acf-internal-post-type.js',
1518
'js/acf': './assets/src/js/acf.js',
1619
'js/pro/acf-pro-blocks': './assets/src/js/pro/acf-pro-blocks.js',
17-
'js/pro/acf-pro-field-group': './assets/src/js/pro/acf-pro-field-group.js',
20+
'js/pro/acf-pro-field-group':
21+
'./assets/src/js/pro/acf-pro-field-group.js',
1822
'js/pro/acf-pro-input': './assets/src/js/pro/acf-pro-input.js',
19-
'js/pro/acf-pro-ui-options-page': './assets/src/js/pro/acf-pro-ui-options-page.js',
23+
'js/pro/acf-pro-ui-options-page':
24+
'./assets/src/js/pro/acf-pro-ui-options-page.js',
2025

2126
// CSS files
2227
'css/acf-dark': './assets/src/sass/acf-dark.scss',
2328
'css/acf-field-group': './assets/src/sass/acf-field-group.scss',
2429
'css/acf-global': './assets/src/sass/acf-global.scss',
2530
'css/acf-input': './assets/src/sass/acf-input.scss',
26-
'css/pro/acf-pro-field-group': './assets/src/sass/pro/acf-pro-field-group.scss',
31+
'css/pro/acf-pro-field-group':
32+
'./assets/src/sass/pro/acf-pro-field-group.scss',
2733
'css/pro/acf-pro-input': './assets/src/sass/pro/acf-pro-input.scss',
2834
},
2935
output: {
@@ -37,8 +43,8 @@ const commonConfig = {
3743
use: {
3844
loader: 'babel-loader',
3945
options: {
40-
presets: ['@babel/preset-react']
41-
}
46+
presets: ['@babel/preset-react'],
47+
},
4248
},
4349
},
4450
{
@@ -53,7 +59,7 @@ const commonConfig = {
5359
},
5460
'sass-loader',
5561
],
56-
}
62+
},
5763
],
5864
},
5965
};
@@ -71,10 +77,14 @@ const unminifiedConfig = {
7177
minimize: false, // No minification for this config
7278
},
7379
plugins: [
74-
new FixStyleOnlyEntriesPlugin(),
80+
new RemoveEmptyScriptsPlugin(),
7581
new MiniCssExtractPlugin({
7682
filename: '[name].css', // Output CSS as .css
7783
}),
84+
new DependencyExtractionWebpackPlugin({
85+
injectPolyfill: true,
86+
useCombinedAssetFile: true,
87+
}),
7888
],
7989
};
8090

@@ -101,11 +111,15 @@ const minifiedConfig = {
101111
],
102112
},
103113
plugins: [
104-
new FixStyleOnlyEntriesPlugin(),
105-
new MiniCssExtractPlugin({
106-
filename: '[name].min.css', // Changed to output .min.css files
107-
}),
108-
],
114+
new RemoveEmptyScriptsPlugin(),
115+
new MiniCssExtractPlugin({
116+
filename: '[name].min.css', // Changed to output .min.css files
117+
}),
118+
new DependencyExtractionWebpackPlugin({
119+
injectPolyfill: true,
120+
useCombinedAssetFile: true,
121+
}),
122+
],
109123
};
110124

111125
// Export both configurations

0 commit comments

Comments
 (0)