Forgive me if this is documented somewhere, I've tried to search around. I'm upgrading a project from Scala 0.6.x to 1.3.1 and attempting to update all the various SBT plugins at the same time. So I've started using the scalajs-bundler but now the sourcemaps for the JS files are handled by webpack instead of getting packaged up with the Play assets. Is there a canonical way to make sourcemaps work with Play and scalajs-bundler?
I do get a sourcemap generated, but it points at a relative path like
../../../../src/main/scala/org/...
So the browser tries to resolve it at
http://localhost:9000/src/main/scala/org/...
@ekrich oh yeah things are working in general, just have this issue with the way the source maps are generated and not being processed by Play in the same way they used to be (run through digest pipeline and served under a hashed asset url). The example play project in the scalajs-bundler repo shows the same behavior when using the settings mentioned above. I want to use those aettings to avoid the long processing times running scalajs output through webpack in development.
It was snowpack but you can just scrollback a little bit to see the larger discussion - https://gitter.im/scala-js/scala-js
@kahliburke :point_up:
@ekrich Thanks for the reference, in this case I'm not really concerned with the way that the code is split. I'm happy with the external JS libraries being bundled to one file and the ScalaJS output to another. It's just the source map doesn't work out of the box, I'd need to add server routes for
http://host/src/* for the browser to resolve them. Which I'm somewhat OK doing as it's only for development purposes, I can disable that route for production. But since it worked "out of the box" previously before I switched to scalajs-bundler, I thought I'd see if there's a better solution first.
I will check out snowpack use too, although it would be nice to stick with something more SBT oriented.
Is there a write up about reducing the bundle size? Quickly scanning through this channel it's kind of a duplicate quesetion being asked... I've seen some docs Bundling mode, but I think there is more to it I think:
- Specific bundles which can be identified with maybe https://www.npmjs.com/package/webpack-bundle-analyzer ? I tried it, but couldn't make it work yet
- What scalajs libs contribute to a large size?
- Does tree shaking work? And what would be needed to enable it?
- Does code splitting work with this plugin? And what would be needed to enable it?
At the moment with fullOptJS::webpack my bundle size is 7,2 mb (using scalajs-react, circe, endpoints4s, droste (local build)).. I guess there are transitive dependencies and maybe code which is not being used?
@Fristi The Scala.js optimizer removes unused Scala code. Webpack won’t include dependencies that are not imported. So, the only thing I can think of is to make sure that your NPM dependencies are also minified (remember that
fullOptJS does minify the output of Scala.js, but it doesn’t process your dependencies).
Ah, it seems that your NPM dependencies bring the remaining 6 Mo. Make sure to compress them. See https://webpack.js.org/configuration/optimization/#optimizationminimize
Fixed it, if someone in any case want the same thing with purgecss:
const glob = require('glob');
const purgecss = require('@fullhuman/postcss-purgecss')
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
purgecss({
content: glob.sync('../../../../**/*.scala'),
defaultExtractor: content => {
const regex = /className := "(.*?)"/g;
const result = [...content.matchAll(regex)].map(match => match[1]) || [];
return result.map(x => x.split(' ')).flat();
}
})
]
};
Hi, I asked a question in the issues section on github, but perhap's it was not the appropriate place. Here is my issue (https://github.com/scalacenter/scalajs-bundler/issues/194#issuecomment-773490925). It should be something trivial to achieve with scalajs-bundler I guess.
This seems to be the way to solve it ij js+webpack: https://github.com/ajaxorg/ace/blob/master/demo/webpack/demo.js#L12. Note that I do not need the "dynamic" mode loading. I basically need one theme and 2 or 3 language mode. A webpack config is set in the demo repository: "https://github.com/ajaxorg/ace/tree/master/demo/webpack/webpack.config.js"
But yes, one solution would be to bundle all the possible modes and themes, but it might be impractical… So, maybe you want to resort to dynamic module loading.
It could possibly be huge
And you are right, I don't need dynamic loading, just a couple of identified modes and one or two themes
But I’ve never tried to do that in Scala.js, so I can’t really help :-/
I tried with extra
JSImport but the output js remains the same
but I guess my syntax is wrong
@js.native
@JSImport("ace-builds/src-noconflict/mode-scala.js", JSImport.Namespace)
object scalamode extends js.Object
and I need to call
scalamode in my program entry point
Is it the regular way to achieve this ?
Do you mind updating the related issue?
Is it possible for me to specify a version of
https://github.com/scalacenter/scalajs-bundler/blob/2c71d6ff364c619902dcf3613009c9cfc98b38f1/sbt-scalajs-bundler/src/main/scala/scalajsbundler/PackageJson.scala#L43
source-map-loader used here:https://github.com/scalacenter/scalajs-bundler/blob/2c71d6ff364c619902dcf3613009c9cfc98b38f1/sbt-scalajs-bundler/src/main/scala/scalajsbundler/PackageJson.scala#L43