Update "Add entry to the Webpack configuration" for 5.0

code_samples/ai_actions/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,
@@ -7,3 +9,5 @@ ibexaConfigManager.add({
         path.resolve(__dirname, './assets/js/addAudioModule.js')
     ],
 });
+
+module.exports = [ibexaConfig, ...customConfigs, projectConfig];

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.webpack.config.js');
-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 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)$/
-    })
-    .configureBabel((config) => {
-        config.plugins.push('@babel/plugin-proposal-class-properties');
+        pattern: /\.(png|svg)$/,
     })
-
-    // enables @babel/preset-env polyfills
     .configureBabelPresetEnv((config) => {
         config.useBuiltIns = 'usage';
         config.corejs = 3;
-    })
-;
+    });
 
 // Welcome page stylesheets
 Encore.addEntry('welcome-page-css', [
@@ -47,18 +43,23 @@ if (isReactBlockPathCreated) {
 
 Encore.addEntry('app', './assets/app.js');
 
-// Image Editor Dot Action
+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');
+const ibexaConfig = getIbexaConfig();
+
+/* Add dot action 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';
-
+/* Export updated ibexaConfig and previous modules */
 module.exports = [ibexaConfig, ...customConfigs, projectConfig];
-
-// uncomment this line if you've commented-out the above lines
-// module.exports = [ eZConfig, ibexaConfig, ...customConfigs ];

code_samples/back_office/search/append_to_webpack.config.js

@@ -1,7 +1,11 @@
-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,
     entryName: 'ibexa-admin-ui-layout-js',
     newItems: [path.resolve(__dirname, './assets/js/admin.search.autocomplete.product.js')],
 });
+
+module.exports = [ibexaConfig, ...customConfigs, projectConfig];

code_samples/forms/custom_form_attribute/webpack.config.js

@@ -1,33 +1,30 @@
-const Encore = require('@symfony/webpack-encore');
+const fs = require('fs');
 const path = require('path');
-const getIbexaConfig = require('./ibexa.webpack.config.js');
-const ibexaConfig = getIbexaConfig(Encore);
-const customConfigs = require('./ibexa.webpack.custom.configs.js');
-const { isReactBlockPathCreated } = require('./ibexa.webpack.config.react.blocks.js');
+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', [
@@ -52,7 +49,4 @@ const projectConfig = Encore.getWebpackConfig();
 
 projectConfig.name = 'app';
 
-module.exports = [ibexaConfig, ...customConfigs, projectConfig];
-
-// uncomment this line if you've commented-out the above lines
-// module.exports = [ eZConfig, ibexaConfig, ...customConfigs ];
+module.exports = [...customConfigs, projectConfig];

docs/administration/back_office/back_office_elements/importing_assets_from_bundle.md

@@ -14,8 +14,8 @@ To import assets from a bundle, configure them in an `ibexa.config.js` file that
 const path = require('path');
 
 module.exports = (Encore) => {
-	Encore.addEntry('<entry-name>', [
-		path.resolve(__dirname, '<path_to_file>'),
+    Encore.addEntry('<entry-name>', [
+        path.resolve(__dirname, '<path_to_file>'),
     ]);
 };
 ```
@@ -40,35 +40,35 @@ To edit existing configuration entries, either in the bundle's `Resources/encore
 const path = require('path');
 
 module.exports = (ibexaConfig, ibexaConfigManager) => {
-	ibexaConfigManager.replace({
-	    ibexaConfig,
-	    entryName: '<entry-name>',
-	    itemToReplace: path.resolve(__dirname, '<path_to_old_file>'),
-	    newItem: path.resolve(__dirname, '<path_to_new_file>'),
-	});
-	ibexaConfigManager.remove({
-	    ibexaConfig,
-	    entryName: '<entry-name>',
-	    itemsToRemove: [
-	        path.resolve(__dirname, '<path_to_old_file>'),
-	        path.resolve(__dirname, '<path_to_old_file>'),
-	    ],
-	});
-	ibexaConfigManager.add({
-	    ibexaConfig,
-	    entryName: '<entry-name>',
-	    newItems: [
-	        path.resolve(__dirname, '<path_to_new_file>'),
-	        path.resolve(__dirname, '<path_to_new_file>'),
-	    ],
-	});
+    ibexaConfigManager.replace({
+        ibexaConfig,
+        entryName: '<entry-name>',
+        itemToReplace: path.resolve(__dirname, '<path_to_old_file>'),
+        newItem: path.resolve(__dirname, '<path_to_new_file>'),
+    });
+    ibexaConfigManager.remove({
+        ibexaConfig,
+        entryName: '<entry-name>',
+        itemsToRemove: [
+            path.resolve(__dirname, '<path_to_old_file>'),
+            path.resolve(__dirname, '<path_to_old_file>'),
+        ],
+    });
+    ibexaConfigManager.add({
+        ibexaConfig,
+        entryName: '<entry-name>',
+        newItems: [
+            path.resolve(__dirname, '<path_to_new_file>'),
+            path.resolve(__dirname, '<path_to_new_file>'),
+        ],
+    });
 };
 ```
 
 !!! tip
 
-	If you don't know what `entryName` to use, you can use the browser's developer tools to check what files are loaded on the given page.
-	Then, use the file name as `entryName`.
+    If you don't know what `entryName` to use, you can use the browser's developer tools to check what files are loaded on the given page.
+    Then, use the file name as `entryName`.
 
 !!! tip
 
@@ -79,20 +79,20 @@ module.exports = (ibexaConfig, ibexaConfigManager) => {
 To add a new configuration under your own namespace and with its own dependencies, create an `ibexa.webpack.custom.config.js` file that you create either in the bundle's `Resources/encore/` folder, or in the `encore` folder in the root directory of your project, for example:
 
 ``` js
-	const Encore = require('@symfony/webpack-encore');
+    const Encore = require('@symfony/webpack-encore');
 
-	Encore.setOutputPath('<custom-path>')
-	    .setPublicPath('<custom-path>')
-	    .addExternals('<custom-externals>')
-	    // ...
-	    .addEntry('<entry-name>', ['<JS-path>']);
+    Encore.setOutputPath('<custom-path>')
+        .setPublicPath('<custom-path>')
+        .addExternals('<custom-externals>')
+        // ...
+        .addEntry('<entry-name>', ['<JS-path>']);
 
-	const customConfig = Encore.getWebpackConfig();
+    const customConfig = Encore.getWebpackConfig();
 
-	customConfig.name = 'customConfigName';
+    customConfig.name = 'customConfigName';
 
-	// Config or array of configs: [customConfig1, customConfig2];
-	module.exports = customConfig;
+    // Config or array of configs: [customConfig1, customConfig2];
+    module.exports = customConfig;
 ```
 
 !!! tip
@@ -103,14 +103,16 @@ To add a new configuration under your own namespace and with its own dependencie
 
 ## Configuration from main project files
 
-If you prefer to include the asset configuration in the main project files, add it in [`webpack.config.js`](https://github.com/ibexa/recipes/blob/master/ibexa/oss/4.6/encore/webpack.config.js#L26).
+If you prefer to include the asset configuration in the main project files, add it in [`webpack.config.js`](https://github.com/ibexa/recipes/blob/master/ibexa/oss/5.0/encore/webpack.config.js#L26).
 
 To overwrite the built-in assets, use the following configuration to replace, remove, or add asset files in `webpack.config.js`:
 
 ``` js
-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.replace({
     ibexaConfig,
@@ -136,4 +138,9 @@ ibexaConfigManager.add({
         path.resolve(__dirname, '<path_to_new_file>'),
     ],
 });
+
+//…
+
+module.exports = [ibexaConfig, ...customConfigs, projectConfig];
+
 ```

docs/administration/back_office/browser/add_browser_tab.md

@@ -16,7 +16,7 @@ Follow the instructions below to create and add a new tab called **Images** whic
 First, in `assets/js/image-tab/`, add an `image.tab.module.js` file.
 
 ``` js
-[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js', 0, 14) =]]
+[[= include_code('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js', 1, 14) =]]
 ```
 
 Next, add the tab to the configuration in the same file.
@@ -29,25 +29,27 @@ Each tab definition is an object containing the following properties:
 |label|string|Label text, for example, `Images`.|
 |icon|string|Path to the icon, for example, `/bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg#info-square`.|
 
-```js
-[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js', 14, 29) =]]
+``` js
+[[= include_code('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js', 15, 28) =]]
 ```
 
 The module governs the creation of the new tab.
 
 <details class="tip">
 <summary>Complete image.tab.module.js code</summary>
-```js
-[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js') =]]
+``` js
+[[= include_code('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js') =]]
 ```
 </details>
 
 ## Add tab to webpack config
 
-In `webpack.config.js`, add the following declaration:
+In `webpack.config.js`, add the following declarations:
 
 ```js
-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();
 ```
 
 Next, provide configuration for the new module:
@@ -60,6 +62,12 @@ ibexaConfigManager.add({
 });
 ```
 
+Finally, export the module back:
+
+```js
+module.exports = [ibexaConfig, ...customConfigs, projectConfig];
+```
+
 ## Provide ReactJS files
 
 Next, you need to provide a set of files used to render the module:
@@ -72,24 +80,24 @@ Next, you need to provide a set of files used to render the module:
 
 Create a service for fetching the images by adding `images.service.js` to `assets/js/image-tab/services/`:
 
-```js
-[[= include_file('code_samples/back_office/udw/assets/js/image-tab/services/images.service.js') =]]
+``` js
+[[= include_code('code_samples/back_office/udw/assets/js/image-tab/services/images.service.js') =]]
 ```
 
 ### `images.list.js`
 
 Next, create an image list by adding an `images.list.js` to `assets/js/image-tab/components/`:
 
-```js
-[[= include_file('code_samples/back_office/udw/assets/js/image-tab/components/images.list.js') =]]
+``` js
+[[= include_code('code_samples/back_office/udw/assets/js/image-tab/components/images.list.js') =]]
 ```
 
 ### `image.js`
 
 Finally, create an image view by adding an `image.js` to `assets/js/image-tab/components/`:
 
-```js
-[[= include_file('code_samples/back_office/udw/assets/js/image-tab/components/image.js') =]]
+``` js
+[[= include_code('code_samples/back_office/udw/assets/js/image-tab/components/image.js') =]]
 ```
 
 ## Add styles
@@ -98,14 +106,14 @@ Ensure that the new tab is styled by adding the following files to `assets/css/`
 
 ### `images.list.css`
 
-```css
-[[= include_file('code_samples/back_office/udw/assets/css/image.list.css') =]]
+``` css
+[[= include_code('code_samples/back_office/udw/assets/css/image.list.css') =]]
 ```
 
 ### `image.css`
 
-```css
-[[= include_file('code_samples/back_office/udw/assets/css/image.css') =]]
+``` css
+[[= include_code('code_samples/back_office/udw/assets/css/image.css') =]]
 ```
 
 ### Add CSS to webpack