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::unsupportedexport NODE_OPTIONS=--openssl-legacy-providerIf for some reason a story dont work,
- wrapping it with
window.onload = () => {} - Append your demo HTML element as a sibling to the
dummyElement
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 why2 rollup
npm i -D rollup
npm i -D @rollup/plugin-typescript
npm install rollup-plugin-terser --save-devimport 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 }
})
]
}