Sage "9.1": Please test

sage
27

What OS are you using? WSL 2 on Windows?
Are you using a recent node LTS?
Slow build times were reported for Tailwind, but you aren’t having any Tailwind dependencies, right?

28

Hi Strarsis,

Thanks for replying.

I’m using:

  • OS X 10.13.6
  • node v12.18.4
  • laravel valet for my dev environment

I don’t have any tailwind dependencies. Dependencies are:

“dependencies”: {
“@popperjs/core”: “^2.9.1”,
“bootstrap”: “^5.0.0-beta2”,
“buble”: “^0.20.0”,
“jquery”: “^3.3.1”
}

29

I tried Bootstrap 4 and removed buble. Now my yarn watch compile time ranges from 1.5 to 3 seconds. What sort of compile times are you getting?

Dependencies are:

“dependencies”: {
“bootstrap”: “^4.6.0”,
“jquery”: “^3.3.1”,
“popper.js”: “^1.16.1”
}

Buble adds ES5 support for IE11, is that correct?

30

Yes, it is also easily possible to replace Bubel with Babel instead.
Bubel is meant as a fast/lightweight Babel, their maintainers recommend to only use it when really needed (older Internet Explorer) (https://github.com/bublejs/buble).

The node version I used is v14.16.0, using nvm.

Without any dependencies (None) watch build times are very fast (1s maybe) before the updated CSS is emitted.

31

Without loading Bootstrap the compile is under 200ms. Is it just a reality that adding Bootstrap is going to add about 1-2 seconds and just have to accept that? I haven’t compared to using something esbuild which is meant to be blazingly fast.

I also set the “reloadDelay” to 0. A delay is only needed if you need to wait for file mirroring if using a VM. Is that correct?

Thank you for updating to Webpack 5 by the way. I just applied your changes to Sage 8.6.0 without any issues. Perhaps I should make that available as a fork.

32

For tailwind the devs apparently were able to solve the long build time by using a modified library (@tailwindcss/jit - npm).

https://discourse.roots.io/t/sage-10-browsersync-issue-with-reload/20314/26?u=strarsis

Node-sass has been deprecated in favor of Dart sass, which is now the reference implementation.
However, uncompiled, JavaScript Dart sass seems to be slower than a compiled binary (from what I read).
So maybe this is the underlying reason?

https://github.com/sass/dart-sass/issues/206
https://github.com/sass/dart-sass/issues/248
https://github.com/sass/dart-sass-embedded

33

Hey @strarsis
Thanks for all the hard work during this PR!
I’m currently migrating from Sage 9.0.9 to your PR and found that copy-webpack-plugin@7.0.0 was removed and v8.0.0 already released with some breaking changes.

I tested v8.0.0 on my end with an updated webpack config and it seems to work fine. Added a few suggestions there: https://github.com/roots/sage/pull/2607#pullrequestreview-615783459

Thanks again!

34

Hi Strarsis,

I’ve read up a little bit about dart-sass but still a little unclear. My understanding is using the Dart VM is much faster. Is that just a matter of installing Dart VM on my machine and then running webpack and it will be used for compiling instead of Dart-Sass JS, or will I need to make changes to the webpack config?

35

There is an issue for this in the sass repository:


It is closed now, but I wasn’t able to find a hint for setting this up.
36

Hi,

I’ve problem with background images in css and I’ve tried to install those version, but when I paste

composer create-project roots/sage your-theme-name dev-webpack5 --repository='{"type":"vcs","url":"https://github.com/strarsis/sage"}'

there is a problem:

    [Seld\JsonLint\ParsingException]  
      "" does not contain valid JSON    
      Parse error on line 1:
      {type:vcs,url:https:/
      ^
      Expected one of: 'STRING', '}'

Is any one know what came frome that issue?

1 Like
37

What composer version are you using? 2 or 1?
And besides the major release, have you self-updated composer?
I can’t reproduce this issue when just copying+pasting the install command.

Also there seems to be a bug with PHP 7.x, so updating PHP 7.x on your workstation (that is used for the CLI/composer) can also help.

38

Hi,

I am a webdev student and very new to composer git ect. I got everything working but I don’t really know how to safely get out of the git(hub) repo? Im scared that I will commit something to your GitHub by accident. Can someone help me?

Sorry if this was a silly question.

39

You can’t push to another GitHub repository without proper authorization/authentication. Nothing can happen except an error message, don’t worry.

You can create your own GitHub repository with your own GitHub user and push to it.

1 Like
41
  1. What node version are you using?
  2. What framework have you selected?
42
  1. Node version v15.3.0
  2. Bootstrap 4 on the old project and 5 on the new one and copied everything over and did the diff/merge.

It might be a problem with local flywheel. https://github.com/elegantthemes/create-divi-extension/issues/5 should I just disable addHotMiddleware?

43

So when this only happens with flywheel it seems to be caused by CORS/networking.
When you run the watch command, does the __webpack_hmr file actually exist in the http root?

44

How do I check if it exist? https://localhost:3000/__webpack_hmr doesn’t exist if that’s what you mean.

45

I’ve used this on a couple of projects now and it’s works a treat for me so thank you :slight_smile:

One thing I would like to add back in though is the visual laravel style error log on browser refresh.

How would I go about that?

46

I can add it if it helps with development.

Was this visual error log there in Sage 9 before?
Or is it from Sage 10?

47

After upgrading an existing sage 9 theme to this PR, ESlint is throwing errors for each single js file (using vscode):

Definition for rule 'no-async-promise-executor' was not found
Definition for rule 'no-dupe-else-if' was not found
Definition for rule 'no-import-assign' was not found
Definition for rule 'no-misleading-character-class' was not found
Definition for rule 'no-setter-return' was not found
Definition for rule 'no-useless-catch' was not found

Building works, but how do I fix these error messages?