IBX-10173: Extract webpack files from root dir (#1)

Author: GrabowskiM

.github/workflows/backend-ci.yaml

@@ -0,0 +1,2 @@
+node_modules
+yarn.lock

.github/workflows/frontend-ci.yaml

@@ -1,5 +1,35 @@
-Ibexa DXP \<Package name\>
-====================
+# Ibexa DXP Frontend Config
+
+## Usage
+This JS package should be used only with Ibexa DXP from root directory - for proper functioning it requires specific files structure provided by Ibexa DXP.
+
+## Webpack
+### Ibexa config
+Usage:
+```
+const Encore = require('@symfony/webpack-encore');
+const getIbexaConfig = require('@ibexa/frontend-config/webpack-config');
+
+const bundles = require('./var/encore/ibexa.config.js');
+const managers = require('./var/encore/ibexa.config.manager.js');
+const setups = require('./var/encore/ibexa.config.setup.js');
+
+const ibexaConfig = getIbexaConfig(Encore, { bundles, managers, setups }, modifyEncoreConfig);
+```
+Optional arguments:
+
+`modifyEncoreConfig(Encore)`: function that takes Encore object and allows modifying its config, executes just before `Encore.getWebpackConfig()`;
+
+### Custom config
+Usage:
+```
+const Encore = require('@symfony/webpack-encore');
+const getCustomConfigs = require('@ibexa/frontend-config/webpack-config/custom');
+
+const customConfigsPaths = require('./var/encore/ibexa.webpack.custom.config.js');
+
+const customConfigs = getCustomConfigs(Encore, customConfigsPaths);
+```
 
 ## COPYRIGHT
 Copyright (C) 1999-2025 Ibexa AS (formerly eZ Systems AS). All rights reserved.

.gitignore

@@ -0,0 +1,60 @@
+const path = require('path');
+
+const ibexaConfigManager = require('./ibexa.webpack.config.manager.js');
+
+module.exports = (Encore, { bundles, managers, setups }, modifyEncoreConfig) => {
+    process.env.NODE_ENV ??= Encore.isProduction() ? 'production' : 'development';
+
+    Encore.setOutputPath('public/assets/ibexa/build')
+        .setPublicPath('/assets/ibexa/build')
+        .addExternals({
+            react: 'React',
+            'react-dom': 'ReactDOM',
+            moment: 'moment',
+            'popper.js': 'Popper',
+            alloyeditor: 'AlloyEditor',
+            'prop-types': 'PropTypes',
+        })
+        .enableSassLoader()
+        .enableTypeScriptLoader((tsConfig) => {
+            tsConfig.configFile = path.resolve('tsconfig.json');
+        })
+        .enableForkedTypeScriptTypesChecking((tsConfig) => {
+            tsConfig.async = true;
+        })
+        .enableReactPreset()
+        .enableSingleRuntimeChunk();
+
+    setups.forEach((configSetupPath) => {
+        const setupConfig = require(path.resolve(configSetupPath));
+
+        setupConfig(Encore);
+    });
+
+    bundles.forEach((configPath) => {
+        const addEntries = require(path.resolve(configPath));
+
+        addEntries(Encore);
+    });
+
+    if (typeof modifyEncoreConfig === 'function') {
+        modifyEncoreConfig(Encore);
+    }
+
+    const ibexaConfig = Encore.getWebpackConfig();
+
+    ibexaConfig.name = 'ibexa';
+
+    ibexaConfig.module.rules[4].oneOf[1].use[1].options.url = false;
+    ibexaConfig.module.rules[1].oneOf[1].use[1].options.url = false;
+
+    managers.forEach((configManagerPath) => {
+        const configManager = require(path.resolve(configManagerPath));
+
+        configManager(ibexaConfig, ibexaConfigManager);
+    });
+
+    Encore.reset();
+
+    return ibexaConfig;
+};

README.md

@@ -0,0 +1,38 @@
+const fs = require('fs');
+
+const findItems = (ibexaConfig, entryName) => {
+    const items = ibexaConfig.entry[entryName];
+
+    if (!items) {
+        throw new Error(`Couldn't find entry with name: "${entryName}". Please check if there is a typo in the name.`);
+    }
+
+    return items;
+};
+const replace = ({ ibexaConfig, entryName, itemToReplace, newItem }) => {
+    const items = findItems(ibexaConfig, entryName);
+    const indexToReplace = items.indexOf(fs.realpathSync(itemToReplace));
+
+    if (indexToReplace < 0) {
+        throw new Error(`Couldn't find item "${itemToReplace}" in entry "${entryName}". Please check if there is a typo in the name.`);
+    }
+
+    items[indexToReplace] = newItem;
+};
+const remove = ({ ibexaConfig, entryName, itemsToRemove }) => {
+    const items = findItems(ibexaConfig, entryName);
+    const realPathItemsToRemove = itemsToRemove.map((item) => fs.realpathSync(item));
+
+    ibexaConfig.entry[entryName] = items.filter((item) => !realPathItemsToRemove.includes(item));
+};
+const add = ({ ibexaConfig, entryName, newItems }) => {
+    const items = findItems(ibexaConfig, entryName);
+
+    ibexaConfig.entry[entryName] = [...items, ...newItems];
+};
+
+module.exports = {
+    replace,
+    remove,
+    add
+};

ibexa.webpack.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = (Encore, customConfigs) => customConfigs.reduce((configs, customConfigPath) => {
+    let customConfig = require(path.resolve(customConfigPath));
+
+    if (typeof customConfig === 'function') {
+        customConfig = customConfig(Encore);
+    }
+
+    if (!Array.isArray(customConfig)) {
+        customConfig = [customConfig];
+    }
+
+    return [ ...configs, ...customConfig ];
+}, []);

ibexa.webpack.config.manager.js

@@ -0,0 +1,11 @@
+{
+    "name": "@ibexa/frontend-config",
+    "packageManager": "yarn@1.22.22",
+    "version": "5.0.0-beta1",
+    "repository": "git@github.com:ibexa/frontend-config.git",
+    "exports": {
+        "./webpack-config": "./ibexa.webpack.config.js",
+        "./webpack-config/manager": "./ibexa.webpack.config.manager.js",
+        "./webpack-config/custom": "./ibexa.webpack.custom.configs.js"
+    }
+}