Direflow
Get startedPropertiesEventsStylingPluginsfont-loaderexternal-loadericon-loaderpolyfill-loaderstyled-componentsmaterial-uiConfigurationAdditionalGuides & tipsContributingChangelog

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

{
  name: 'name-of-plugin',
  options: {
    // An optional options property
  }
}

font-loader

The font-loader plugin allows us to load fonts and use them in the Direflow Setup.

Example:

plugins: [
  {
    name: 'font-loader',
    options: {
      google: {
        families: ['PT Sans', 'Noto Sans JP'],
      },
    },
  }
]

Now we can use these fonts directly in our stylesheets:

font-family: 'PT Sans', sans-serif;

See Web Font Loader for different configurations.

external-loader

The external-loader plugin allows us to load external resources and include them in the Direflow Setup.
Paths must consist of either css or js files.

Example:

plugins: [
  {
    name: 'external-loader',
    options: {
      paths: [
        'https://code.jquery.com/jquery-3.3.1.slim.min.js',
        'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
      ],
    }
  }
]

For js files, you can provide the option to load the script asynchronously.

Example:

plugins: [
  {
    name: 'external-loader',
    options: {
      paths: [
        {
          src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
          async: true, // <- this js file will be loaded async
        },
        'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
      ],
    }
  }
];

You can override the default behavior of where the resource will be injected by using the useHead option.

ℹ️ Default behavior:
css files will be injected into the shadow-root.
js files will be injected into the head tag of the host application.

Example:

plugins: [
  {
    name: 'external-loader',
    options: {
      paths: [
        {
          src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
          useHead: false, // <-- js will be injected into the shadow-root
        },
        {
          src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
          useHead: true, // <- css will be added to 'head' of the host application
        },
      ],
    }
  }
];

useExternalSource hook

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 true or false, depending on whether the resource has fully loaded or not.

Example:

const App = (props) => {
  // Determine if the resource has loaded
  const hasLoaded = useExternalSource('https://code.jquery.com/jquery-3.3.1.slim.min.js');
  
  if (!hasLoaded) {
    return null;
  }


  return (
    ...
  );
}

icon-loader

The icon-loader plugin allows us to load icon-specific resources.
For instance, if we want to use the icon pack from material design.

Example

plugins: [
  {
    name: 'icon-loader',
    options: {
      packs: ['material-icons']
    }
  }
]

polyfill-loader

⚠️ This plugin is deprecated and will be removed in an upcoming release.

The polyfill-loader plugin allows us to take full control over the Web Components polyfills.

Example:

plugins: [
  {
    name: 'polyfill-loader',
    options: {
      use: {
        sd: false,
        ce: true,
      }
    }
  }
]

This will include the ce-bundle, but exclude the sd-bundle.

We can also specify your own source, if needed:

plugins: [
  {
    name: 'polyfill-loader',
    options: {
      use: {
        sd: 'https://cdn.your.own.source/webcomponents-sd.js',
        ce: 'https://cdn.your.own.source/webcomponents-ce.js',
        adapter: 'https://cdn.your.own.source/custom-elements-es5-adapter.js'
      }
    }
  }
]

You can read more about the origin of this plugin in this issue.

styled-components

The styled-components plugin allows us to use the styled-components module in the Web Components.

Example:

plugins: [
  {
    name: 'styled-components'
  }
]

Now, just install styled-components in your Direflow Setup, and you're ready to go.

npm install styled-components

material-ui

The material-ui plugin encapsulates material-ui styles into webcomponent's shadowRoot.

Example:

plugins: [
  {
    name: 'material-ui'
  }
]

Now, just install material-ui in your Direflow Setup, and you're ready to go.

npm install @material-ui/core

See also our Tips for Material-UI



→ Configuration