From fc09d8c6c2810e350b0df3d6a09ec2e25f3bcad4 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Tue, 9 Sep 2025 14:28:59 +0200 Subject: [PATCH 1/5] webpack.config.js: Update paths Update `ibexaConfigManager` and `getIbexaConfig` paths --- .../back_office/image_editor/config/webpack.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code_samples/back_office/image_editor/config/webpack.config.js b/code_samples/back_office/image_editor/config/webpack.config.js index ef64950295..083c4ff136 100644 --- a/code_samples/back_office/image_editor/config/webpack.config.js +++ b/code_samples/back_office/image_editor/config/webpack.config.js @@ -1,10 +1,10 @@ const Encore = require('@symfony/webpack-encore'); const path = require('path'); -const getIbexaConfig = require('./ibexa.webpack.config.js'); +const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); const ibexaConfig = getIbexaConfig(Encore); const customConfigs = require('./ibexa.webpack.custom.configs.js'); const { isReactBlockPathCreated } = require('./ibexa.webpack.config.react.blocks.js'); -const ibexaConfigManager = require('./ibexa.webpack.config.manager.js'); +const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager'); Encore.reset(); Encore From ccbeb83cfc8c5b74997296e1eb6832ab523b9f07 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Tue, 9 Sep 2025 15:39:14 +0200 Subject: [PATCH 2/5] Update webpack.config.js for 5.0 Get `ibexaConfigManager` and `getIbexaConfig`, now absent by default, then use them, and finally add ibexaConfig to module.exports --- .../image_editor/config/webpack.config.js | 47 +++++++++---------- .../images/extend_image_editor.md | 7 ++- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/code_samples/back_office/image_editor/config/webpack.config.js b/code_samples/back_office/image_editor/config/webpack.config.js index 083c4ff136..bb927a21fa 100644 --- a/code_samples/back_office/image_editor/config/webpack.config.js +++ b/code_samples/back_office/image_editor/config/webpack.config.js @@ -1,34 +1,30 @@ -const Encore = require('@symfony/webpack-encore'); +const fs = require('fs'); const path = require('path'); -const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); -const ibexaConfig = getIbexaConfig(Encore); -const customConfigs = require('./ibexa.webpack.custom.configs.js'); -const { isReactBlockPathCreated } = require('./ibexa.webpack.config.react.blocks.js'); -const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager'); +const Encore = require('@symfony/webpack-encore'); +const getWebpackConfigs = require('@ibexa/frontend-config/webpack-config/get-configs'); +const customConfigsPaths = require('./var/encore/ibexa.webpack.custom.config.js'); + +const customConfigs = getWebpackConfigs(Encore, customConfigsPaths); +const isReactBlockPathCreated = fs.existsSync('./assets/page-builder/react/blocks'); Encore.reset(); Encore .setOutputPath('public/build/') .setPublicPath('/build') - .enableStimulusBridge('./assets/controllers.json') .enableSassLoader() - .enableReactPreset() + .enableReactPreset((options) => { + options.runtime = 'classic'; + }) .enableSingleRuntimeChunk() .copyFiles({ from: './assets/images', to: 'images/[path][name].[ext]', - pattern: /\.(png|svg)$/ + pattern: /\.(png|svg)$/, }) - .configureBabel((config) => { - config.plugins.push('@babel/plugin-proposal-class-properties'); - }) - - // enables @babel/preset-env polyfills .configureBabelPresetEnv((config) => { config.useBuiltIns = 'usage'; config.corejs = 3; - }) -; + }); // Welcome page stylesheets Encore.addEntry('welcome-page-css', [ @@ -47,18 +43,21 @@ if (isReactBlockPathCreated) { Encore.addEntry('app', './assets/app.js'); -// Image Editor Dot Action +const projectConfig = Encore.getWebpackConfig(); + +projectConfig.name = 'app'; + +/* Get ibexaConfig and ibexaConfigManager */ +const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager'); +const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); +const ibexaConfig = getIbexaConfig(); + +/* Add entries to Admin UI layout JS */ ibexaConfigManager.add({ ibexaConfig, entryName: 'ibexa-admin-ui-layout-js', newItems: [ path.resolve(__dirname, './assets/random_dot/random-dot.js'), ], }); -const projectConfig = Encore.getWebpackConfig(); - -projectConfig.name = 'app'; - +/* Add ibexaConfig to module.exports */ module.exports = [ibexaConfig, ...customConfigs, projectConfig]; - -// uncomment this line if you've commented-out the above lines -// module.exports = [ eZConfig, ibexaConfig, ...customConfigs ]; diff --git a/docs/content_management/images/extend_image_editor.md b/docs/content_management/images/extend_image_editor.md index 3c780f3dd9..7fa42468ee 100644 --- a/docs/content_management/images/extend_image_editor.md +++ b/docs/content_management/images/extend_image_editor.md @@ -32,11 +32,10 @@ Configure the new Image Editor action under the `ibexa.system..image_edit ## Add entry to the Webpack configuration Once you create and configure the React component, you must add an entry to [the Webpack configuration](3_customize_the_front_page.md#configuring-webpack). -In the root directory of your project, modify the `webpack.config.js` file by adding the following code: +In the root directory of your project, modify the `webpack.config.js` file by adding the following code in replacement of the default `module.exports = [...customConfigs, projectConfig];`: -``` js -[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 6, 7) =]]//... -[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 50, 55) =]] +``` js hl_lines="10 14" +[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 49, 63) =]] ``` At this point you should be able to see a new button in the Image Editor's UI. From cfe8ef51dd375e51ba8291326ba5f157b5b90cba Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Tue, 9 Sep 2025 16:07:52 +0200 Subject: [PATCH 3/5] Update webpack.config.js for 5.0 No need to add ibexaConfig to module.exports --- .../back_office/image_editor/config/webpack.config.js | 5 ++--- docs/content_management/images/extend_image_editor.md | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/code_samples/back_office/image_editor/config/webpack.config.js b/code_samples/back_office/image_editor/config/webpack.config.js index bb927a21fa..4b617d1720 100644 --- a/code_samples/back_office/image_editor/config/webpack.config.js +++ b/code_samples/back_office/image_editor/config/webpack.config.js @@ -47,6 +47,8 @@ const projectConfig = Encore.getWebpackConfig(); projectConfig.name = 'app'; +module.exports = [...customConfigs, projectConfig]; + /* Get ibexaConfig and ibexaConfigManager */ const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager'); const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); @@ -58,6 +60,3 @@ ibexaConfigManager.add({ entryName: 'ibexa-admin-ui-layout-js', newItems: [ path.resolve(__dirname, './assets/random_dot/random-dot.js'), ], }); - -/* Add ibexaConfig to module.exports */ -module.exports = [ibexaConfig, ...customConfigs, projectConfig]; diff --git a/docs/content_management/images/extend_image_editor.md b/docs/content_management/images/extend_image_editor.md index 7fa42468ee..c091daf887 100644 --- a/docs/content_management/images/extend_image_editor.md +++ b/docs/content_management/images/extend_image_editor.md @@ -32,10 +32,10 @@ Configure the new Image Editor action under the `ibexa.system..image_edit ## Add entry to the Webpack configuration Once you create and configure the React component, you must add an entry to [the Webpack configuration](3_customize_the_front_page.md#configuring-webpack). -In the root directory of your project, modify the `webpack.config.js` file by adding the following code in replacement of the default `module.exports = [...customConfigs, projectConfig];`: +In the root directory of your project, modify the `webpack.config.js` file by appending the following code: -``` js hl_lines="10 14" -[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 49, 63) =]] +``` js hl_lines="10" +[[= include_file('code_samples/back_office/image_editor/config/webpack.config.js', 51, 62) =]] ``` At this point you should be able to see a new button in the Image Editor's UI. From 16f9f677c5a749fd0227a53b5621b2e711827f69 Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Tue, 9 Sep 2025 16:16:43 +0200 Subject: [PATCH 4/5] Update webpack.config.js for 5.0 --- code_samples/back_office/image_editor/config/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code_samples/back_office/image_editor/config/webpack.config.js b/code_samples/back_office/image_editor/config/webpack.config.js index 4b617d1720..c3ca3e3c1b 100644 --- a/code_samples/back_office/image_editor/config/webpack.config.js +++ b/code_samples/back_office/image_editor/config/webpack.config.js @@ -54,7 +54,7 @@ const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manage const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); const ibexaConfig = getIbexaConfig(); -/* Add entries to Admin UI layout JS */ +/* Add dot action to Admin UI layout JS */ ibexaConfigManager.add({ ibexaConfig, entryName: 'ibexa-admin-ui-layout-js', From db8462151be30ba3834cd35d954a80bd8ddeddaf Mon Sep 17 00:00:00 2001 From: Adrien Dupuis <61695653+adriendupuis@users.noreply.github.com> Date: Tue, 9 Sep 2025 16:42:04 +0200 Subject: [PATCH 5/5] Update append_to_webpack.config.js for 5.0 --- code_samples/back_office/search/append_to_webpack.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code_samples/back_office/search/append_to_webpack.config.js b/code_samples/back_office/search/append_to_webpack.config.js index 5146bc2a0e..72c4e9bfa5 100644 --- a/code_samples/back_office/search/append_to_webpack.config.js +++ b/code_samples/back_office/search/append_to_webpack.config.js @@ -1,4 +1,6 @@ -const ibexaConfigManager = require('./ibexa.webpack.config.manager.js'); +const ibexaConfigManager = require('@ibexa/frontend-config/webpack-config/manager'); +const getIbexaConfig = require('@ibexa/frontend-config/webpack-config/ibexa'); +const ibexaConfig = getIbexaConfig(); ibexaConfigManager.add({ ibexaConfig,