Make browser usage more clear/compatible

[kewisch]

There are some breaking changes w.r.t. imports and browsers in 2.0.0. You can't simply <script src> import it there, you'll need

<script type="module">
import ICAL from "https://unpkg.com/ical.js";

// ...
</script>

It isn't currently possible to simply global import ICAL, even with the es5 version. Tasks here:

1. Update README with a section on browser use
2. Update es5 version to work like before where there is an ICAL global object.

[kewisch]

I looked into this a bit and would appreciate some help. Based on the rollup config, the cjs version adds module.exports = ICALmodule; to the end, which will fail when included in the browser. I can't switch to a custom IIFE version because of an error message where wrapping might break.

How do I get a joint es5 version that will work both as a script tag inclusion with ICAL as a global symbol, and as a cjs node module?

[mschroeder]

What about using good old UMD? I may be wrong, because I just checked if rollup runs with the config and produces something that looks acceptable:

{
  file: 'dist/ical.umd.js',
  exports: "default",
  name: 'ICAL',
  format: 'umd'
}

[kewisch]

Ah yes UMD might work quite well, thank you. I tried a bit today, but I can't get this to work in combination with babel. My goal is to have an es5 compatible version that doesn't use anything fancy.

[!] (plugin babel) Error: Using Babel on the generated chunks is strongly discouraged for formats other than "esm" or "cjs" as it can easily break wrapper code and lead to accidentally created global variables. Instead, you should set "output.format" to "esm" and use Babel to transform to another format, e.g. by adding "presets: [['@babel/env', { modules: 'umd' }]]" to your Babel options. If you still want to proceed, add "allowAllFormats: true" to your plugin options. 

Which gives me

[!] (plugin babel) Error: [BABEL] unknown file: Using removed Babel 5 option: .modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules

From there I tried a few other things, but couldn't get it to dial back its features.

[mschroeder]

How about using Babel on the input and not as an output plugin then, which should stop the error from happening:

{
  file: 'dist/ical.umd.js',
  exports: "default",
  name: 'ICAL',
  format: 'umd',
  plugins: [
    babel({ babelHelpers: 'bundled', presets: ['@babel/preset-env'] })
  ]
}

[kewisch]

Ah this gave me the right hints. I tried this before, but the plugin location was wrong, so it tried to load babel as an output plugin even though it was not. Here is a config that seems to work:

import { babel } from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default [{
  input: 'lib/ical/module.js',
  output: [
    { file: 'dist/ical.js',  format: 'es', exports: 'default' },
    {
      file: 'dist/ical.min.js',
      format: 'es',
      exports: 'default',
      plugins: [terser()]
    }
  ]
},{
  input: 'lib/ical/module.js',
  output: [
    {
      file: 'dist/ical.es5.cjs',
      exports: 'default',
      name: 'ICAL',
      format: 'umd',
    },
    {
      file: 'dist/ical.es5.min.cjs',
      exports: 'default',
      name: 'ICAL',
      format: 'umd',
      plugins: [terser()]
    }
  ],
  plugins: [
    babel({ babelHelpers: 'bundled', presets: ['@babel/preset-env'] })
  ]
}];

Does that look right?

[mschroeder]

Does that look right?

It does to me, and the output is similar to what it was before, despite the added wrapper function, how the babel helpers are included and stripped license comments.

[kewisch]

Thanks! I'll look into the missing license header for this one and check the others. We should have at least one at the top.

[mschroeder]

There is at least one right before the included module.js near the end of the generated file. 😉