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,
- 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")
.parentNode?.insertBefore(mycanvas,dummyElement);
dummyElement.width = 400
mycanvas.height = 400
mycanvasdostuff(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 }
})
] }