Bundling

Create a standalone bundle for your component

Rollup

Source: https://gist.github.com/danieldietrich/999abe1aaee11dcdf91d182807f7ee3f

1. Install the plugins for resolving 3rd party dependencies and typescript support:

   npm install @rollup/plugin-typescript @rollup/plugin-node-resolve --save-dev

2. At the bottom of your component's package.json, add the following two entries to upload the bundle to npmjs.com and tell unpkg.com which file to serve by default:

   "files": [
     "dist/bundle.js"
   ],
   "unpkg": "dist/bundle.js"

3. Create a new file rollup.config.js in the package root directory and add the following lines (replace <component> by the name of your component):

    import typescript from '@rollup/plugin-typescript';
    import { nodeResolve } from '@rollup/plugin-node-resolve';
   
   
    export default {
      input: 'src/biowc-<component>.ts',
      output: {
        file: 'dist/bundle.js',
        format: 'umd'
      },
      external: 'all',
      plugins: [typescript(), nodeResolve()]
    };
   

4. To the scripts section of your component's package.json add the following line:

   "bundle": "rollup -c",

5. Run npm run bundle to build the bundled package
6. Run npm version [major|minor|patch] to bump the package version
7. Run npm publish to publish the package on npmjs.com

Webpack (obsolete)

Source: https://webpack.js.org/guides/getting-started/, https://webpack.js.org/guides/typescript/

1. Install the webpack and webpack-cli:

   npm install --save-dev webpack webpack-cli ts-loader

2. To the scripts section of your component's package.json add the following line:

   "bundle": "webpack --mode production"

3. At the bottom of your package.json, add the following two entries to tell unpkg.com which file to serve by default:

   "files": [
     "dist/bundle.js"
   ],
   "unpkg": "dist/bundle.js"

4. Create a new file webpack.config.js in the package root directory and add the following lines (replace <component> by the name of your component):

    const path = require('path');
   
    module.exports = {
      entry: './src/biowc-<component>.ts',
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
          },
        ],
      },
      resolve: {
        extensions: ['.tsx', '.ts', '.js'],
      },
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
      }
    };

5. Run npm run bundle to build the bundled package
6. Run npm version [major|minor|patch] to bump the package version
7. Run npm publish to publish the package on npmjs.com

Using the bundle in vanilla javascript

You can now directly import the package in plain HTML:

    <biowc-scatter id="scatterplot">
       if you see this, the web component is not working :(
    </biowc-scatter>

    <script type="module">
      const biowcScatter = document.querySelector('#scatterplot');

      biowcScatter.idKey = 'Sample name';
      biowcScatter.valueKey = 'abundance';
      biowcScatter.xLabel = 'abundance Gene_X';
      biowcScatter.xValues = [
        { 'Sample name': 'sample1', abundance: 1 },
        { 'Sample name': 'sample2', abundance: 3 },
        { 'Sample name': 'sample4', abundance: 3 },
        { 'Sample name': 'sample5', abundance: 2 },
      ];
      biowcScatter.yLabel = 'abundance Gene_Y';
      biowcScatter.yValues = [
        { 'Sample name': 'sample1', abundance: 1 },
        { 'Sample name': 'sample2', abundance: 2 },
        { 'Sample name': 'sample4', abundance: 3 },
        { 'Sample name': 'sample5', abundance: -2.5 },
      ];
    </script>
    <script type="module" src="https://unpkg.com/biowc-scatter"></script> 

Note the type="module" attribute and the fact that you have to include the package after using the component.

Useful tools and documentation

• https://unpkg.com/
• https://webpack.js.org/concepts/
• Find out what dependencies are responsible for the bundle's size: https://chrisbateman.github.io/webpack-visualizer/