This pull request prepare the infrastructure for a custom raw chart repository template, the changes i did will be reflected in the custom template repository.
Go in depth.
Remove .npmignore
The .npmignore simply tell npm which file should not be uploaded to the npm registry. This is so tedious for example if i add one file called hello.txt this bytes will be sent in the internet unless i will specify hello.txt in the .npmignore.
On the opposite specify the keyword "files" in the package.json tells npm: "Oh my friend npm include thees files / directories" (LICENSE, README and package.json are always included by default), so unless i added this files that file never be uploaded.
Bump webpack
Nothing particular simply bump webpack on last version, the 5 version, only little changes needed you can see it.
Minify umd
Use the good friend terser with the related rollup plugin to minify the umd build.
UMD builds are typically direct hosted on CDN or something similar so (in this case lol) small is better.
convertCSS on build time 😈
Ok, this is the really interesting parts of the show.
As you can see the final scope of this pull request is reduce the bundle size of a raw chart, this because if in the future you the source in your raw project ... again small is better.
One trick to reduce the bundle is to make convertCSS at build time ... explain. As you can see almost every chart import the base styles the base styles imports a css as a raw string and then use the convertCSS function to convert the css string into a javascript object. The problem is that first every user should spent time to run in his browser the convertCSS function and plus we need to send across the internet the convertCSS function and his related dependencies.
To avoid these problems i transform the convertCSS into a Webpack and a Rollup plugin so at build time the css file is converted to a javascript object.
I decided i want to discuss with you how to integrate this for now i added a special rule if you call a css .raw.css this file will be converted into an object.
// styleA will contain the css as string (as before)
import styleA from './style.css'
// styleB will contain the css as object the equivalent of convertCSS(styleString)
import styleB from './style.raw.css'
We can decide to change this rule or always import the converted css let me know.
Final notes
If we decide to merge this we can consider to take all the code under the bundler directory and make it a standalone npm package(s) to avoid to repeat them in the custom chart repo ... or add it in the core under a directory or ... another ideas ?
What the heck is this???
This pull request prepare the infrastructure for a custom raw chart repository template, the changes i did will be reflected in the custom template repository.
Go in depth.
Remove
.npmignoreThe
.npmignoresimply tell npm which file should not be uploaded to the npm registry. This is so tedious for example if i add one file called hello.txt this bytes will be sent in the internet unless i will specify hello.txt in the.npmignore. On the opposite specify the keyword"files"in thepackage.jsontells npm: "Oh my friend npm include thees files / directories" (LICENSE, README and package.json are always included by default), so unless i added this files that file never be uploaded.Bump webpack
Nothing particular simply bump webpack on last version, the 5 version, only little changes needed you can see it.
Minify umd
Use the good friend terser with the related rollup plugin to minify the umd build. UMD builds are typically direct hosted on CDN or something similar so (in this case lol) small is better.
convertCSSon build time 😈Ok, this is the really interesting parts of the show. As you can see the final scope of this pull request is reduce the bundle size of a raw chart, this because if in the future you the source in your raw project ... again small is better. One trick to reduce the bundle is to make
convertCSSat build time ... explain. As you can see almost every chart import the base styles the base styles imports a css as a raw string and then use theconvertCSSfunction to convert the css string into a javascript object. The problem is that first every user should spent time to run in his browser theconvertCSSfunction and plus we need to send across the internet theconvertCSSfunction and his related dependencies. To avoid these problems i transform theconvertCSSinto a Webpack and a Rollup plugin so at build time the css file is converted to a javascript object.I decidedi want to discuss with you how to integrate this for now i added a special rule if you call a css.raw.cssthis file will be converted into an object.We can decide to change this rule or always import the converted css let me know.
Final notes
If we decide to merge this we can consider to take all the code under the
bundlerdirectory and make it a standalone npm package(s) to avoid to repeat them in the custom chart repo ... or add it in the core under a directory or ... another ideas ?Cheers 🍺