StoryBook and Rollup

Posted on October 2, 2021
Tags: javascript

storybook is bulky, just do this

https://github.com/lambdaJasonYang/colocatedReact

1 Storybook

npx storybook init
npm run storybook
  this[kHandle] = new _Hash(algorithm, xofLen);
Error: error:0308010C:digital envelope routines::unsupported
export NODE_OPTIONS=--openssl-legacy-provider

If for some reason a story dont work,

export const Primary: StoryFn = (): HTMLElement => {
    const dummyElement = document.createElement('div');

    window.onload = () => {
        let mycanvas = document.createElement("canvas") 
        dummyElement.parentNode?.insertBefore(mycanvas,dummyElement);
        mycanvas.width = 400
        mycanvas.height = 400
        dostuff(mycanvas); // <-- this only works after canvas element is fully loaded
    }
    return dummyElement
}
//`document.addEventListener("load",..)` doesnt work for Storybook idk why

2 rollup

npm i -D rollup
npm i -D @rollup/plugin-typescript
npm install rollup-plugin-terser --save-dev
import typescript from '@rollup/plugin-typescript'
import { terser } from 'rollup-plugin-terser';
const devMode = (process.env.NODE_ENV === 'development');
console.log(`${ devMode ? 'development' : 'production' } mode bundle`);
export default{
    input: 'src/index.ts',
    output: [{
                dir: 'dist',
                format: 'esm',
                sourcemap: devMode ? 'inline' : false,
            }
    ],
    plugins: [
        typescript({
            tsconfig: "./tsconfig.json"
        }),
        terser({
          ecma: 2020,
          mangle: { toplevel: true },
          compress: {
            module: true,
            toplevel: true,
            unsafe_arrows: true,
            drop_console: !devMode,
            drop_debugger: !devMode
          },
          output: { quote_style: 1 }
        })
    ]
}