{"_id":"@ausuliv/frontend-components-config-utilities","name":"@ausuliv/frontend-components-config-utilities","dist-tags":{"latest":"3.0.5"},"versions":{"3.0.5":{"name":"@ausuliv/frontend-components-config-utilities","version":"3.0.5","description":"Utilities for shared config used in RedHat Cloud Services project.","main":"index.js","types":"index.d.ts","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/RedHatInsights/frontend-components.git"},"author":"","license":"Apache-2.0","bugs":{"url":"https://github.com/RedHatInsights/frontend-components/issues"},"homepage":"https://github.com/RedHatInsights/frontend-components#readme","scripts":{"build":"tsc"},"peerDependencies":{"webpack":"^5.0.0"},"dependencies":{"@openshift/dynamic-plugin-sdk-webpack":"^4.0.1","chalk":"^4.1.2","node-fetch":"2.6.7"},"devDependencies":{"@types/express":"^4.17.17","@types/http-server":"^0.12.1","@types/js-yaml":"^4.0.5","@types/jws":"^3.2.5","@types/node-fetch":"^2.6.4","glob":"10.3.3"},"_id":"@ausuliv/frontend-components-config-utilities@3.0.5","gitHead":"aafe63f5615d6af2f54b40b4035f093ff53d7264","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-+wn6sALp/a2t6SG9Q8JxhLWbhac6A9DO7a7Y7uisPuouE8uWtCeNxTAEoYdcMsaPOJZl+j8xQxLr/Cr8Q/VBUA==","shasum":"ece6450928aa7c0a388adb684e099b44d8f43159","tarball":"https://registry.npmjs.org/@ausuliv/frontend-components-config-utilities/-/frontend-components-config-utilities-3.0.5.tgz","fileCount":81,"unpackedSize":372373,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8vkBBq7209866B2TElShRkZJfw9GocToTn0pO3d8UVAiEAuTxZuVU+mI6LXSXlO8Nyoh11K+AzEVk01GnoNjMnaKw="}]},"_npmUser":{"name":"ausuliv","email":"ausulliv@redhat.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/frontend-components-config-utilities_3.0.5_1719515915501_0.7347957695516181"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-27T19:18:35.423Z","3.0.5":"2024-06-27T19:18:35.673Z","modified":"2024-06-27T19:18:35.942Z"},"maintainers":[{"name":"ausuliv","email":"ausulliv@redhat.com"}],"description":"Utilities for shared config used in RedHat Cloud Services project.","homepage":"https://github.com/RedHatInsights/frontend-components#readme","repository":{"type":"git","url":"git+https://github.com/RedHatInsights/frontend-components.git"},"bugs":{"url":"https://github.com/RedHatInsights/frontend-components/issues"},"license":"Apache-2.0","readme":"# RedHat Cloud Services frontend components - webpack config utilities\n\n[![npm version](https://badge.fury.io/js/%40redhat-cloud-services%2Ffrontend-components-config-utilities.svg)](https://badge.fury.io/js/%40redhat-cloud-services%2Ffrontend-components-config-utilities)\n\n- [RedHat Cloud Services frontend components - webpack config utilities](#redhat-cloud-services-frontend-components---webpack-config-utilities)\n  - [Chrome render loader](#chrome-render-loader)\n    - [Disable chrome 2](#disable-chrome-2)\n  - [Chunk mapper](#chunk-mapper)\n  - [Federated modules](#federated-modules)\n    - [Override container ports](#override-container-ports)\n      - [List of shared deps](#list-of-shared-deps)\n  - [Extensions plugin](#extensions-plugin)\n    - [Arguments](#arguments)\n    - [`pluginConfig`](#pluginconfig)\n      - [extension object](#extension-object)\n\n## Chrome render loader\n\nWhen using chrome 2 and user refreshes a page on your application you may end up with 2 instances of your application in virtual DOM. This loader prevents it by wrapping your app in condition to check if chrome 2 config is enabled.\n\nThe appName should be same as is `insights.appname` in your `package.json`.\n\n```JS\n{\n  module: {\n    rules: [{\n      test: new RegExp(appEntry),\n      loader: path.resolve(__dirname, './chrome-render-loader.js'),\n      options: {\n        appName: 'name-of-your-app',\n      }\n    }]\n}\n}\n```\n\n### Disable chrome 2\n\nWhen migrating application to chrome 2 you may want to disable this for some time, otherwise you'll have to sync pushes to all branches with [CSC](https://github.com/RedHatInsights/cloud-services-config).\n\n```JS\n{\n  module: {\n    rules: [{\n      test: new RegExp(appEntry),\n      loader: '@ausuliv/frontend-components-config-utilities/chrome-render-loader',\n      options: {\n        appName: 'name-of-your-app',\n        skipChrome2: true\n      }\n    }]\n  }\n}\n```\n\n## Chunk mapper\n\nTo properly load files in chrome 2 you have to generate mapper to each exported chunk. This webpack plugin will do that for you.\n\n```JS\nconst ChunkMapper = require('@ausuliv/frontend-components-config-utilities/chunk-mapper');\n\n{\n  plugins: [\n    new ChunkMapper({\n      // prefix: '/some-path/', // optional - defaults to output.publicPath\n      modules: [], //required\n    })\n  ]\n}\n```\n\n* `prefix` - if you have your federated modules files located under some different path than `output.publicPath`\n* `modules` - either string or an array of strings to indicate which generated files should be picked up (generally your `insights.appname` - if you have dashes in your name replace them with cammel case)\n\n## Federated modules\nIf you don't want to dig trough  webpack's [module-federation/](https://webpack.js.org/concepts/module-federation/) and write custom generator you can use this wrapper.\n\n```JS\nplugins.push(\n    require('@redhat-cloud-services/frontend-components-config/federated-modules')({\n        root: resolve(__dirname, '../'),\n        // exposes: { './RootApp': './src/AppEntry.js' },\n        // shared: [{ react: { singleton: true, requiredVersion: 17.0.0 } }],\n        // debug: true,\n        // moduleName: 'someAppName',\n        // useFileHash: false,\n        // exclude: ['react']\n    })\n);\n```\n\nWe've aimed for easy plug and play, but feel free to override any fed mods partials with these arguments:\n\n* `root` - root of you application (to find out `package.json`)\n* `exposes` - which files and modules should be exposed\n* `shared` - federated modules allow for sharing of dependencies, we've added some general dependencies, but feel free to expand them via this prop\n* `debug` - to see full output what is going to be used\n* `moduleName` - used to generate the file under this name (generally your `insights.appname` - if you have dashes in your name replace them with cammel case)\n* `useFileHash` - in order to prevent caching we are using file hashes, you might want to turn this off in your dev env\n* `exclude` - if you want to exclude any shared module you can do it trough here (even for general dependencies added by us)\n* `eager` - if set to `true`, turns eager fetch for shared modules on\n\n### Override container ports\nThe default ports for the RBAC server(**4012**) and/or the Keycloak server(**4001**) can be overridden using a corresponding variable in the environment. \n\n  Bash examples:\n\n      export KEYCLOAK_PORT=4020\n      export RBAC_PORT=5000\n\n\n#### List of shared deps\n\nThis packages exposes these federated shared dependencies\n* `lodash` - version taken from your `package.json`\n* `axios` - version taken from your `package.json`\n* `redux` - version taken from your `package.json`\n* `react` - version taken from your `package.json`, treated as singleton\n* `react-dom` - version taken from your `package.json`, treated as singleton\n* `react-router-dom` - version taken from your `package.json`\n* `react-redux` - version taken from your `package.json`\n* `redux-promise-middleware` - version taken from your `package.json`\n* `@patternfly/react-table` - version taken from your `package.json`\n* `@patternfly/react-core` - version taken from your `package.json`\n* `@patternfly/react-icons` - version taken from your `package.json`\n* `@patternfly/react-tokens` - version taken from your `package.json`\n* `@redhat-cloud-services/frontend-components` - version taken from your `package.json`\n* `@ausuliv/frontend-components-utilities` - version taken from your `package.json`\n* `@redhat-cloud-services/frontend-components-notifications` - version taken from your `package.json`\n\n## Extensions plugin\n\nIn order to share some code into extension points or to add new extension point we can use `ExtensionsPlugin`\n\nSimply import it in your webpack config and add it to your plugins\n\n```JS\nconst { resolve } = require('path');\nconst config = require('@redhat-cloud-services/frontend-components-config');\nconst ExtensionsPlugin = require('@redhat-cloud-services/frontend-components-config/extensions-plugin');\n\nconst { config: webpackConfig, plugins } = config({\n  rootFolder: resolve(__dirname, '../'),\n  ...(process.env.BETA && { deployment: 'beta/apps' }),\n});\n\nplugins.push(\n  require('@redhat-cloud-services/frontend-components-config/federated-modules')({\n    root: resolve(__dirname, '../'),\n  }),\n  new ExtensionsPlugin({})\n);\n\nmodule.exports = {\n  ...webpackConfig,\n  plugins\n}\n```\n\n### Arguments\n\nThere are three arguments `ExtensionsPlugin` constructor accepts:\n* `pluginConfig`\n* `fedModuleConfig`\n* `options`\n\n### `pluginConfig`\n\nThis config contains information about extensions, plugin requirements, its name and description. Most of it (name, description and version) is calculated from your root `package.json`. But you can override these values:\n\n* `name` - plugin name (pulled from `package.json`)\n* `version` - version of the plugin\n* `displayName` - display name of the plugin\n* `description` - description of the plugin (pulled from `package.json`)\n* `dependencies` - object of dependencies which will be passed down to module federation (no need to list general react dependencies)\n* `disableStaticPlugins` - list of static plugins this plugin disables on load\n* `extensions` - list of extension objects.\n\n#### extension object\n\nEach extension object requires a `type` and `properties`. The type can be either custom extension or one of predefined:\n\n* `console.navigation/section` - a section in navigation (identifies secondary nav)\n  * `properties`\n    * `id` - id of the section\n    * `name` - name of the section, this will be shown in the UI\n* `console.page/route` - route passed to react-router\n  * `properties` - in theory any react-router path prop can be used here\n    * `path` - (string, or array) path on which the component will be rendered\n    * `component`\n      * `$codeRef` - federated module used to render on the route\n* `console.navigation/href` - navigation href, used to render leafs of navigation\n  * `properties`\n    * `id` - id of the href\n    * `section` - (optional) used to group nav items under section (omit for flat nav)\n    * `name` - name of the href, thiw will be shown in the UI\n    * `href` - used to mutate the URL\n","readmeFilename":"README.md"}