ECMAScript modules (ESM) for newer browsers

The ESM distribution target the latest browsers with support for ECMAScript modules introduced by ES6 introduced by ES6.

Compared with the Node.js version, this distribution bundles polyfills to run outside of the Node.js environment.

Addtionnal information are available in the project ECMAScript modules documentation.

Usage

The files can be manually imported. They dont require any external dependencies and they are located inside the packages/stream-transform/dist/esm folder.

When using NPM to manage and load your modules, for example within webpack, use:

import {transform} from 'stream-transform/browser/esm';
// Or
import {transform} from 'stream-transform/browser/esm/sync';

Vanilla JavaScript

A working demo is available in the project demo/browser directory.

• ./esm/transform.html
• ./esm/transform_sync.html

With Express, expose the files with:

const app = express();
app.use('/lib/transform/',
  express.static(`node_modules/stream-transform/dist/esm/`));
app.listen(3000);

The HTML code looks like:

<script type="module">
  import {transform} from '/lib/transform/index.js';
  transform(input, handler, options, (err, data) => {
    console.info(data)
  });
</script>

If you wish to use the sync API, use:

<script type="module">
  import {transform} from '/lib/transform/sync.js';
  const data = transform(input, handler, options);
</script>

Webpack module bundler

This distribution is compatible with webpack version 5. It comes with the Node.js polyfills. A working demo is shared on the project repository.

In your module, import the appropriate stream-transform module:

• ./transform.js:

  import {transform} from 'stream-transform/browser/esm';

• ./transform_sync.js:

  import {transform} from 'stream-transform/browser/esm/sync';

The relevant webpack configuration looks like:

  {
    entry: './src/transform.js',
    mode: 'development',
    output: {
      filename: 'transform.js',
      path: path.resolve(__dirname, 'dist'),
    }
  },
  {
    entry: './src/transform_sync.js',
    mode: 'development',
    output: {
      filename: 'transform_sync.js',
      path: path.resolve(__dirname, 'dist'),
    }
  },