
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@ausuliv/frontend-components-config-utilities
Advanced tools
Utilities for shared config used in RedHat Cloud Services project.
When 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.
The appName should be same as is insights.appname
in your package.json
.
{
module: {
rules: [{
test: new RegExp(appEntry),
loader: path.resolve(__dirname, './chrome-render-loader.js'),
options: {
appName: 'name-of-your-app',
}
}]
}
}
When 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.
{
module: {
rules: [{
test: new RegExp(appEntry),
loader: '@ausuliv/frontend-components-config-utilities/chrome-render-loader',
options: {
appName: 'name-of-your-app',
skipChrome2: true
}
}]
}
}
To properly load files in chrome 2 you have to generate mapper to each exported chunk. This webpack plugin will do that for you.
const ChunkMapper = require('@ausuliv/frontend-components-config-utilities/chunk-mapper');
{
plugins: [
new ChunkMapper({
// prefix: '/some-path/', // optional - defaults to output.publicPath
modules: [], //required
})
]
}
prefix
- if you have your federated modules files located under some different path than output.publicPath
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)If you don't want to dig trough webpack's module-federation/ and write custom generator you can use this wrapper.
plugins.push(
require('@redhat-cloud-services/frontend-components-config/federated-modules')({
root: resolve(__dirname, '../'),
// exposes: { './RootApp': './src/AppEntry.js' },
// shared: [{ react: { singleton: true, requiredVersion: 17.0.0 } }],
// debug: true,
// moduleName: 'someAppName',
// useFileHash: false,
// exclude: ['react']
})
);
We've aimed for easy plug and play, but feel free to override any fed mods partials with these arguments:
root
- root of you application (to find out package.json
)exposes
- which files and modules should be exposedshared
- federated modules allow for sharing of dependencies, we've added some general dependencies, but feel free to expand them via this propdebug
- to see full output what is going to be usedmoduleName
- used to generate the file under this name (generally your insights.appname
- if you have dashes in your name replace them with cammel case)useFileHash
- in order to prevent caching we are using file hashes, you might want to turn this off in your dev envexclude
- if you want to exclude any shared module you can do it trough here (even for general dependencies added by us)eager
- if set to true
, turns eager fetch for shared modules onThe default ports for the RBAC server(4012) and/or the Keycloak server(4001) can be overridden using a corresponding variable in the environment.
Bash examples:
export KEYCLOAK_PORT=4020
export RBAC_PORT=5000
This packages exposes these federated shared dependencies
lodash
- version taken from your package.json
axios
- version taken from your package.json
redux
- version taken from your package.json
react
- version taken from your package.json
, treated as singletonreact-dom
- version taken from your package.json
, treated as singletonreact-router-dom
- version taken from your package.json
react-redux
- version taken from your package.json
redux-promise-middleware
- version taken from your package.json
@patternfly/react-table
- version taken from your package.json
@patternfly/react-core
- version taken from your package.json
@patternfly/react-icons
- version taken from your package.json
@patternfly/react-tokens
- version taken from your package.json
@redhat-cloud-services/frontend-components
- version taken from your package.json
@ausuliv/frontend-components-utilities
- version taken from your package.json
@redhat-cloud-services/frontend-components-notifications
- version taken from your package.json
In order to share some code into extension points or to add new extension point we can use ExtensionsPlugin
Simply import it in your webpack config and add it to your plugins
const { resolve } = require('path');
const config = require('@redhat-cloud-services/frontend-components-config');
const ExtensionsPlugin = require('@redhat-cloud-services/frontend-components-config/extensions-plugin');
const { config: webpackConfig, plugins } = config({
rootFolder: resolve(__dirname, '../'),
...(process.env.BETA && { deployment: 'beta/apps' }),
});
plugins.push(
require('@redhat-cloud-services/frontend-components-config/federated-modules')({
root: resolve(__dirname, '../'),
}),
new ExtensionsPlugin({})
);
module.exports = {
...webpackConfig,
plugins
}
There are three arguments ExtensionsPlugin
constructor accepts:
pluginConfig
fedModuleConfig
options
pluginConfig
This 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:
name
- plugin name (pulled from package.json
)version
- version of the plugindisplayName
- display name of the plugindescription
- description of the plugin (pulled from package.json
)dependencies
- object of dependencies which will be passed down to module federation (no need to list general react dependencies)disableStaticPlugins
- list of static plugins this plugin disables on loadextensions
- list of extension objects.Each extension object requires a type
and properties
. The type can be either custom extension or one of predefined:
console.navigation/section
- a section in navigation (identifies secondary nav)
properties
id
- id of the sectionname
- name of the section, this will be shown in the UIconsole.page/route
- route passed to react-router
properties
- in theory any react-router path prop can be used here
path
- (string, or array) path on which the component will be renderedcomponent
$codeRef
- federated module used to render on the routeconsole.navigation/href
- navigation href, used to render leafs of navigation
properties
id
- id of the hrefsection
- (optional) used to group nav items under section (omit for flat nav)name
- name of the href, thiw will be shown in the UIhref
- used to mutate the URLFAQs
Utilities for shared config used in RedHat Cloud Services project.
The npm package @ausuliv/frontend-components-config-utilities receives a total of 0 weekly downloads. As such, @ausuliv/frontend-components-config-utilities popularity was classified as not popular.
We found that @ausuliv/frontend-components-config-utilities demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.