Direflow comes with a set of handy plugins, and more will be added in the future.
When we create a Direflow Component, we can provide a list of plugins in the configuration.
All plugins follow the format
font-loader plugin allows us to load fonts and use them in the Direflow Setup.
Now we can use these fonts directly in our stylesheets:
See Web Font Loader for different configurations.
external-loader plugin allows us to load external resources and include them in the Direflow Setup.
Paths must consist of either
js files, you can provide the option to load the script asynchronously.
You can override the default behavior of where the resource will be injected
by using the
ℹ️ Default behavior:
cssfiles will be injected into the shadow-root.
jsfiles will be injected into the
headtag of the host application.
As an addition to
external-loader, we can use the
useExternalSource hook, to hook
into the loading state of an external source.
useExternalSource returns a state with value
false, depending on whether the resource has fully loaded or not.
icon-loader plugin allows us to load icon-specific resources.
For instance, if we want to use the icon pack from material design.
⚠️ This plugin is deprecated and will be removed in an upcoming release.
polyfill-loader plugin allows us to take full control over the Web Components polyfills.
This will include the ce-bundle, but exclude the sd-bundle.
We can also specify your own source, if needed:
You can read more about the origin of this plugin in this issue.
styled-components plugin allows us to use the
styled-components module in the Web Components.
Now, just install
styled-components in your Direflow Setup, and you're ready to go.
material-ui plugin encapsulates material-ui styles into webcomponent's shadowRoot.
Now, just install
material-ui in your Direflow Setup, and you're ready to go.
See also our Tips for Material-UI