Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 16 18:33

    github-actions[bot] on gh-pages

    Deploying to gh-pages from @ 0… (compare)

  • May 16 18:32

    sjrd on main

    Fix release workflow to fetch t… Merge pull request #426 from pt… (compare)

  • May 16 18:32
    sjrd closed #426
  • May 16 18:29

    github-actions[bot] on gh-pages

    Deploying to gh-pages from @ 2… (compare)

  • May 16 18:27

    sjrd on main

    Drop AppVeyor, run GitHub CI Ac… Merge pull request #422 from pt… (compare)

  • May 16 18:27
    sjrd closed #422
  • May 16 16:23
    ptrdom synchronize #422
  • May 16 15:28
    ptrdom commented #422
  • May 16 15:28
    ptrdom synchronize #422
  • May 16 15:25
    ptrdom synchronize #426
  • May 16 15:22
    ptrdom commented #420
  • May 16 09:19
    sjrd commented #422
  • May 15 16:58
    ptrdom synchronize #420
  • May 15 08:08
    ptrdom commented #422
  • May 15 07:33
    ptrdom synchronize #422
  • May 15 07:23
    ptrdom commented #422
  • May 15 07:21
    ptrdom commented #422
  • May 15 07:20
    ptrdom commented #422
  • May 15 07:17
    ptrdom commented #426
  • May 15 07:17
    ptrdom commented #424
Mark de Jong
@Fristi
@julienrf notistack-frontend-opt.js is 823kb
Julien Richard-Foy
@julienrf
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
Mark de Jong
@Fristi
Thanks! :) It seems the most of the bundle size is ruled by tailwind.. all css is bundled. They are using purgecss to clean it up, there is a webpack plugin for that. Figuring out how to configure it in conjuction with scala js
Mark de Jong
@Fristi
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();
        }
    })
  ]
};
Mark de Jong
@Fristi
The downside, is that it will not work when you use dynamic className inside your scala code
Mathieu
@mathieuleclaire
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.
Julien Richard-Foy
@julienrf
Do you know how this problem would be solved in plain JS+Webpack?
Mathieu
@mathieuleclaire
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"
Julien Richard-Foy
@julienrf
I guess you tried the solution I suggested in my last comment? With @JSImport
Mathieu
@mathieuleclaire
This solution means I need to choose in my facade what theme or mode I want. Or I need to JsImport all modes and themes provided by ace ?
Julien Richard-Foy
@julienrf
Ah sorry, I thought you didn’t need dynamic module loading
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.
Mathieu
@mathieuleclaire
Does it mean, that all js mode would be packed in my js file ?
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
Julien Richard-Foy
@julienrf
I don’t follow. On the one hand I understand that you say that you only need a couple of modes and themes, and on the other hand I understand that you say that the resulting bundle could be huge.
Mathieu
@mathieuleclaire
If I use a the dynamic strategy I mean.
Julien Richard-Foy
@julienrf
With dynamic module loading, the dynamically loaded modules would not be part of the bundle, so the bundle wouldn’t be huge
But I’ve never tried to do that in Scala.js, so I can’t really help :-/
Mathieu
@mathieuleclaire
OK, but the dynamic loaded module is used if you want to have all syntax highlighting potentially for all languages, which is not my case.
I tried with extra JSImport but the output js remains the same
but I guess my syntax is wrong
Julien Richard-Foy
@julienrf
Do you also refer to the JSImported module in your program entry point?
Mathieu
@mathieuleclaire
No. And that was the key.
Mathieu
@mathieuleclaire
So this works: in my facade:
@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 ?
Julien Richard-Foy
@julienrf
Yes, Webpack only includes modules that are “used”, in the resulting bundle
Do you mind updating the related issue?
Mathieu
@mathieuleclaire
Yes, sure. Thanks for helping !
Julien Richard-Foy
@julienrf
Thanks for your patience!
Mathieu
@mathieuleclaire
Same compliment for you !
the version currently used for webpack 4 has several deprecations
[info] Updating NPM dependencies
[error] npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[error] npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
[error] npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
[error] npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
[error] npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
[error] npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
Russ White
@russwyte

I tried this:

   npmDevDependencies in Compile ++= Seq(
      "source-map-loader" -> "2.0.1"
    ),

but that results in this error:

[error] npm ERR! notarget No matching version found for source-map-loader@2.0.1 0.2.3.
Russ White
@russwyte
It looks like version 1.1.3 should work for webpack 4 - but I am not sure I have a good way to specify that.
It seems to me that if that library is already in npmDevDependencies - then that version should be used instead of the hard coded version.
Milan Satala
@msatala
Hi guys, I'm pretty sure it was asked and answered before but I'm not able to find it. Is it possible to use Scala.js 1.3+ module splitting in combination with scalajs-bundler?
Sébastien Doeraene
@sjrd
No, it's not possible yet.
We are proposing a project to implement that at GSoC this year (assuming our org gets accepted).
Milan Satala
@msatala
@sjrd Thank you for answering.
On a project where we don't have scalajs-bundler nor module splitting yet we will go the module splitting route since we deploy often and the JS output is quite large.
Sébastien Doeraene
@sjrd
Let us know how it goes. Module splitting is fairly new, and we're eager to hear from practical experiences using it.
Milan Satala
@msatala
Will do. We have 108k lines of scala.js code. My idea is to use module splitting to have a single large js file which contains all "static code" (std lib + other libs) and another file containing our code that changes often.
Milan Satala
@msatala
Looking at dynamic imports compatibility https://caniuse.com/es6-module-dynamic-import we might even go that route and load pages dynamically.
Sébastien Doeraene
@sjrd
For dynamic imports, we have something built-in since 1.4.0 with js.dynamicImport.
Milan Satala
@msatala
Yup, that's what I meant.
Russ White
@russwyte

If I get some time today I plan to PR this change so that developers can override versions of concat-with-sourcemaps and source-map-loader:

    val devDependencies =
      npmDevDependencies ++ (
        if (currentConfiguration == Compile) npmManifestDependencies.compileDevDependencies
        else npmManifestDependencies.testDevDependencies
      ) ++ webpackPackages ++ Seq(
        "webpack-dev-server" -> webpackDevServerVersion,
      ) ++ (
        if (npmDevDependencies.exists{case (name, _) => name == "source-map-loader"}) Seq.empty 
        else Seq("source-map-loader" -> sourceMapLoaderVersion)
      ) ++ (
        if (npmDevDependencies.exists{case (name, _) => name == "concat-with-sourcemaps"}) Seq.empty
        else Seq("concat-with-sourcemaps" -> "1.0.7")
      )

Any thoughts? Is there a more preferred solution? Maybe the same way webpackDevServerVersion is handled?

Carlos Quiroz
@cquiroz
@russwyte Please note that there is a PR to get webpack 5 and that changes the use of source-map-loader etc