Direflow v3.5 Release Notes

Direflow v3.5 has been released, and we introduced some great new improvements 🎉

We also deprecated a couple of features, so be sure to migrate to the new APIs.
See migration guide in the bottom of this article.

New features

• Introducing direflow-config.json
• Ability to include additional static files from build
• Support for serialized data via attributes
• Parsing boolean values from attributes

Changed

• A new custom datatype DireflowPromiseAlike is returned from DireflowComponent.create instead of a regular Promise.

Deprecated

• Passing { filename, chunkFilename, react, reactDOM } to webpack configuration
• Using --split and --vendor as CLI arguments
• The polyfill-loader plugin is deprecated entirely

Introducing direflow-config.json

Instead of having configuration spread around in the Direflow setup, all you need to consider is the file direflow-config.json

{
  "build": {
    "componentPath": "direflow-component",
    "filename": "direflowBundle.js",
    "chunkFilename": "chunk.js",
    "emitSourceMap": true,
    "emitIndexHTML": true,
    "emitAll": true,
    "split": true,
    "vendor": true
  },
  "modules": {
    "react": "https://your-custom-cdn.com/react.js",
    "reactDOM": "https://your-custom-cdn.com/react-dom.js"
  },
  "polyfills": {
    "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"
  }
}

This allows you to customize various behaviors from Direflow.
You can read more about what each property means on our documentation page: https://direflow.io/configuration

Support for serialized data via attributes

When passing down attributes on JSON format, the value will automatically be interpreted and parsed.

<my-component sampleList='["item-1", "item-2", "item-3"]'>
</my-component>

Parsing boolean values from attributes

When passing attributes with boolean values (true / false), the attributes will automatically be casted into a boolean.

<my-component showList="true"></my-component>

For true-values, you can also omit the value assigning part.

<my-component showList></my-component>

Do note, that as opposed to the HTML standard, the string value “false” will be cast into a boolean with the value false.

// showList will be false
<my-component showList="false"></my-component>

New custom datatype: DireflowPromiseAlike

Historically, the DireflowComponent.create returned a Promise which would resolve a reference to the DOM Node of the Custom Element once loaded into the DOM.

The problem with a Promise is, that it can only be resolved once.

Consider the case where you have the same Custom Element appear multiple times in the DOM:

<my-button></my-button>
<my-button></my-button>
<my-button></my-button>

Only a single Promise would be resolved here, with a reference to the first DOM Node.

To solve this problem, we introduced custom datatype DireflowPromiseAlike which allow us to call then over and over when needed.

Be aware: it also means that there’s no catch method and that ‘async/await’ cannot be used.

Deprecations

Since all configuration is now collected in direflow-config.json, we have effectively deprecated the polyfill-loader plugin, thus configurations set from various other places in Direflow.

You can still use them — but they will be removed in upcoming versions, so be sure to migrate when you get the chance.

Migrating from 3.4 or below

Start by creating a new file in the root of your project: direflow-config.json

Remove your webpackConfig options

If you are passing additional options to your webpackConfig in direflow-webpack.js, remove it.

module.exports = (config, env) => ({
  ...webpackConfig(
   config,
   env,
   // Remove the below options
   { filename: 'myBundle.js', chunkFilename: 'thirdParty.js' });
});

Instead, put them in the direflow-config.json file:

{
  "build": {
    "filename": "myBundle.js",
    "chunkFilename": "thirdParty.js",
  }
}

Similarly, if you are passing options for react and reactDOM modules, remove them as well.

module.exports = (config, env) => ({
  ...webpackConfig(config, env,
 
   // Remove the below options
   {
    react: 'https://your-custom-cdn.com/react.js',
    reactDOM: 'https://your-custom-cdn.com/react-dom.js',
  })
});

Instead, put them in the direflow-config.json file:

{
  "build": {
    "filename": "myBundle.js",
    "chunkFilename": "thirdParty.js",
  },
  "modules": {
    "react": "https://your-custom-cdn.com/react.js",
    "reactDOM": "https://your-custom-cdn.com/react-dom.js"
  }
}

Don’t use --split or --vendor

If you have been using the --split or --vendor CLI arguments, you can safely stop doing it now.

Instead, put them in the direflow-config.json file:

{
  "build": {
    "filename": "myBundle.js",
    "chunkFilename": "thirdParty.js",
    "split": true,
    "vendor": true
  },
  "modules": {
    "react": "https://your-custom-cdn.com/react.js",
    "reactDOM": "https://your-custom-cdn.com/react-dom.js"
  }
}

Ditch the polyfill-loader plugin

If you’ve been using the polyfill-loader plugin, you can now safely remove it from your Direflow Components configuration.

Instead, put them in the direflow-config.json file:

{
  "build": {
    "filename": "myBundle.js",
    "chunkFilename": "thirdParty.js",
    "split": true,
    "vendor": true
  },
  "modules": {
    "react": "https://your-custom-cdn.com/react.js",
    "reactDOM": "https://your-custom-cdn.com/react-dom.js"
  },
  "polyfills": {
    "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"
  }
}

Thank you to the community

Recently, Direflow has welcomed new collaborators, and we have received more contributions and community PRs.

THANK YOU!! 👏👏👏

The time and effort that is put into this, thus the diversity of multiple developers from all across the world is what makes Direflow progress! 🚀

Get started with Direflow

You can read all about how to get started using Direflow on our official webpage: https://direflow.io/

Your help is wanted!

If you find a bug or have a nice idea or a suggestion:
Please create an issue on Direflow’s GitHub page.

If you have improved Direflow in any way, please create a Pull Request.
It is greatly appreciated 💜

Please let us know if you build something cool with Direflow!
It would be awesome to showcase it on our webpage 🤙