Feature/dependencies update #500 #503

edenizk · 2021-07-15T19:57:12Z

Updated packages + I made changes for the new version of webpack and webpack plugins.

conventional-changelog ^3.1.21 → ^3.1.24 eslint ^7.2.0 → ^7.29.0 execa ^4.0.2 → ^5.1.1 expect-puppeteer ^4.4.0 → ^5.0.4 fs-extra ^9.0.1 → ^10.0.0 globby ^11.0.1 → ^11.0.4 jest ^26.1.0 → ^27.0.5 jest-environment-puppeteer ^4.4.0 → ^5.0.4 lerna ^3.22.0 → ^4.0.0 prettier ^2.0.5 → ^2.3.1 supertest ^4.0.2 → ^6.1.3 puppeteer ^5.2.1 → ^10.0.0

@babel/core ^7.10.2 → ^7.14.6 @babel/plugin-transform-react-jsx ^7.10.1 → ^7.14.5 @babel/plugin-transform-runtime ^7.10.1 → ^7.14.5 @babel/preset-env ^7.10.2 → ^7.14.7 @babel/preset-react ^7.10.1 → ^7.14.5 @babel/runtime ^7.10.2 → ^7.14.6

eslint 6.8.0 → 7.29.0 eslint-import-resolver-webpack ^0.12.1 → ^0.13.1 eslint-plugin-import ^2.22.0 → ^2.23.4 fs-extra ^9.0.1 → ^10.0.0 globby ^11.0.1 → ^11.0.4 husky ^4.2.5 → ^6.0.0 lint-staged ^10.2.11 → ^11.0.0 prettier ^2.0.5 → ^2.3.1 stylelint ^13.6.0 → ^13.13.1 webpack ^4.43.0 → ^5.40.0

copy-webpack-plugin ^6.0.3 → ^6.4.1 (over version 8.1.1 has a compatibility issue) fs-extra ^9.0.1 → ^10.0.0 globby ^11.0.1 → ^11.0.4 hexo-front-matter ^1.0.0 → ^2.0.0 html-webpack-plugin ^4.3.0 → ^4.5.0 (over version 5 is only works with webpack 5) htmlhint ^0.14.1 → ^0.15.1 js-beautify ^1.11.0 → ^1.14.0 lodash ^4.17.19 → ^4.17.21 marked ^1.1.0 → ^2.1.2 nedb-promises ^4.0.3 → ^5.0.0 prettier ^2.0.5 → ^2.3.1 twig ^1.15.1 → ^1.15.4 webpack ^4.43.0 → ^4.43.0 (will come back to this later its more complicated) webpack-dev-server ^3.11.0 → ^3.11.2

stylelint-config-prettier ^8.0.1 → ^8.0.2 stylelint-config-standard ^20.0.0 → ^22.0.0 stylelint-prettier ^1.1.2 → ^1.2.0 stylelint-scss ^3.17.2 → ^3.19.0

* Change babel-eslint to @babel/eslint-parser eslint-config-airbnb ^18.1.0 → ^18.2.1 eslint-config-prettier ^6.11.0 → ^8.3.0 eslint-plugin-import ^2.21.2 → ^2.23.4 eslint-plugin-jsx-a11y ^6.2.3 → ^6.4.1 eslint-plugin-prettier ^3.1.4 → ^3.4.0 eslint-plugin-react ^7.20.0 → ^7.24.0 eslint-plugin-react-hooks ^4.0.4 → ^4.2.0

axios ^0.19.2 → ^0.21.1 browser-sync ^2.26.7 → ^2.27.3 execa ^4.0.2 → ^5.1.1 fs-extra ^9.0.1 → ^10.0.0 inquirer ^7.1.0 → ^8.1.1 lodash ^4.17.15 → ^4.17.21

@babel/core ^7.10.2 → ^7.14.6 babel-loader ^8.1.0 → ^8.2.2 case-sensitive-paths-webpack-plugin ^2.3.0 → ^2.4.0 cli-highlight ^2.1.4 → ^2.1.11 cliui ^6.0.0 → ^7.0.4 commander ^5.1.0 → ^8.0.0 css-loader ^3.5.3 → ^5.2.6 cssnano ^4.1.10 → ^5.0.6 file-loader ^6.0.0 → ^6.2.0 fs-extra ^9.0.1 → ^10.0.0 globby ^11.0.1 → ^11.0.4 lodash ^4.17.15 → ^4.17.21 mini-css-extract-plugin ^0.9.0 → ^1.6.1 mini-svg-data-uri ^1.2.3 → ^1.3.3 open ^7.0.4 → ^8.2.1 postcss-loader ^3.0.0 → ^6.1.0 sass ^1.26.7 → ^1.35.1 sass-loader ^8.0.2 → ^12.1.0 source-map-explorer ^2.4.2 → ^2.5.2 tapable ^1.1.3 → ^2.2.0 terser-webpack-plugin ^3.0.5 → ^5.1.4 unminified-webpack-plugin ^2.0.0 → ^3.0.0 url-loader ^4.1.0 → ^4.1.1

autoprefixer ^9.8.0 -> ^9.8.6 browserslist ^4.12.0 -> ^4.16.6

This reverts commit e430993.

Update existing packages Add postcss package

jakub300 · 2021-08-27T01:20:22Z

Hi, I had some time to test yesterday and today, few notes

General (both static and WP)

It looks like you don't have prettier enabled in you editor, please enable and reformat edited files.
css is not minified
dynamic public path is disabled right now async scripts seem to be forking in wp thanks to webpacks automatic dynamic path, not sure if we should use our or webpacks. I prepared fixed version for webpack 5 earlier and some other improvements 2afd660...6a371bb
It's listening on localhost by default so accessing over local network is not possible and when using some kind of proxy wps still has hardcoded url (not tested) so would not work

Static

serveDist is not working
skipHtmlExtension is not working
errors when tried async imports import('./modules/greeting')
~~I briefly tried react in static and got React is not defined errors~~ disregard that, we don't enable automatic runtime right now

WP

This is interesting browser sync and serve are listening on the same port but it seems to be working, not sure how. Do you have some understanding here, is that intentional or just happened by accident?

edenizk · 2021-09-05T17:34:44Z

Hi @jakub300, Thank you for reviewing my code, here is my update and some questions about some tasks:

General (both static and WP)

1- Thank you for letting me know I have enabled it and formatted it.
2- I've been looking today at the mini-css-extract-plugin, but couldn't find a problem. When you were checking have you seen any clue, why it might not be working?
3- I have added your solution, since webpack 5 is still changing maybe it's better if we have our solution. Thank you for preparing them 🙂. After adding your changes, watching stopped working tho. Does it work on your end?
4- For WP I see that it is working due to Browsersync. For the static, I have added a hook for setting the host with an external URL(I think I can simplify it tho since we are only using for static). The only issue unfortunately I couldn't find loopback support in the WPS, like in the WDS. If I will set the external URL, everything will work fine(HMR will work in external URL + in the local machine), but it won't be possible to view the page on localhost:3000. What would you suggest me to do?

Static

2- Solved
3-Solved
4-Would it be possible for you to send me the error message, and the code you are trying?
5- Is react problem continue? Because when I tested it was working fine on my end. If there is still a problem could you share with me your react setup? And what do you mean about the automatic runtime?

WP

It wasn't sth I have noticed from WPS documentation, but sth I have tried after noticing the WebSocket option from browser-sync. After turning off the WebSocket for the browser-sync they can be worked in the same port without interrupting each other 🙂

jakub300 · 2021-09-20T01:41:29Z

Great progress, I did a bit of testing, next round I'll look more into the code.

General (both static and WP)

2- I've been looking today at the mini-css-extract-plugin, but couldn't find a problem. When you were checking have you seen any clue, why it might not be working?

packages\chisel-scripts\lib\webpack-plugins\OptimizeCssnanoPlugin.js is responsible for minification. It's based on plugin linked at the top of the file with added filtering for .full files. Looks like it doesn't support Webpack 5, Internet suggests https://github.com/webpack-contrib/css-minimizer-webpack-plugin

3- I have added your solution, since webpack 5 is still changing maybe it's better if we have our solution. Thank you for preparing them 🙂. After adding your changes, watching stopped working tho. Does it work on your end?

Seems to be working, just tested on WP. Could you share more details?

4- For WP I see that it is working due to Browsersync. For the static, I have added a hook for setting the host with an external URL(I think I can simplify it tho since we are only using for static). The only issue unfortunately I couldn't find loopback support in the WPS, like in the WDS. If I will set the external URL, everything will work fine(HMR will work in external URL + in the local machine), but it won't be possible to view the page on localhost:3000. What would you suggest me to do?

I see, I guess it could be improved in WPS.

Static

4-Would it be possible for you to send me the error message, and the code you are trying?

In generated project replace app.js contents with:

import('./modules/greeting').then(({ default: greet }) => {
  greet('Worldddd');
});

WP

It wasn't sth I have noticed from WPS documentation, but sth I have tried after noticing the WebSocket option from browser-sync. After turning off the WebSocket for the browser-sync they can be worked in the same port without interrupting each other 🙂

This is weird, normally two different servers should not be able to listen on the same port at the same time. In CI I see (https://app.travis-ci.com/github/jakub300/generator-chisel/jobs/538291746#L879) it shows and error, are you able to test not on windows? because, this error makes more sense to me than what's happening on Windows.

edenizk · 2021-09-27T21:11:37Z

Hi @jakub300,

2- packages\chisel-scripts\lib\webpack-plugins\OptimizeCssnanoPlugin.js is responsible for minification. It's based on plugin linked at the top of the file with added filtering for .full files. Looks like it doesn't support Webpack 5, Internet suggests https://github.com/webpack-contrib/css-minimizer-webpack-plugin

I have replaced the cssnano with the CSS minimizer, everything looks fine now.

3- Seems to be working, just tested on WP. Could you share more details?

I have tested in FE only, when I've changed styling it didn't hot reload

4- I see, I guess it could be improved in WPS.

So I am keeping it with my last changes :)

Static

4- In generated project replace app.js contents with:
import('./modules/greeting').then(({ default: greet }) => {
greet('Worldddd');
});

It is due to the InjectRevisioned hook, I think because of the changes in a compilation. I have replaced it with the assets path from processAssets hook. But I want to be sure, is my changes what we want from this hook to do? Because this hook was a little bit unclear to me. It is generating sth like this { 'styles/main.css': 'styles/main.css' }

WP

This is weird, normally two different servers should not be able to listen on the same port at the same time. In CI I see (https://app.travis-ci.com/github/jakub300/generator-chisel/jobs/538291746#L879) it shows and error, are you able to test not on windows? because, this error makes more sense to me than what's happening on Windows.

After some more deep search, I think this flag https://lwn.net/Articles/542629/ is missing in the test machine. Unfortunately, currently I can only test on the Windows.

denizcrafton and others added 30 commits June 7, 2021 20:08

Fix Eslint import error (xfiveco#493)

5689b58

Merge branch 'xfiveco:rewrite-with-webpack' into rewrite-with-webpack

a7af3f9

Update styling-config-chisel packages (xfiveco#500)

a5d6e8d

stylelint-config-prettier ^8.0.1 → ^8.0.2 stylelint-config-standard ^20.0.0 → ^22.0.0 stylelint-prettier ^1.1.2 → ^1.2.0 stylelint-scss ^3.17.2 → ^3.19.0

Add peer dependency stylint to styling-config-chisel

29c8b22

Add peer dependency babel to eslint-config-chisel

551b36b

Update chisel-shared-utils packages (xfiveco#500)

a5ea047

Update chisel-plugin-wordpress packages (xfiveco#500)

557a98d

axios ^0.19.2 → ^0.21.1 browser-sync ^2.26.7 → ^2.27.3 execa ^4.0.2 → ^5.1.1 fs-extra ^9.0.1 → ^10.0.0 inquirer ^7.1.0 → ^8.1.1 lodash ^4.17.15 → ^4.17.21

Update chisel package (xfiveco#500)

18a797f

autoprefixer ^9.8.0 -> ^9.8.6 browserslist ^4.12.0 -> ^4.16.6

Update generator-chisel packages (xfiveco#500)

3a7ad86

tmp

48ca1cf

tests improvements

7f42b2d

Update tests

a9b86e1

bring all back

51ef219

Revert "Update chisel-scripts packages (xfiveco#500)"

9b9673e

This reverts commit e430993.

Update chisel-scripts xfiveco#500

a5f2b55

Fix webpack 5 for chisel-scripts

7630994

Fix chunk id

673f4e6

Update inject revisioned emit to webpack 5

d0d62af

Update optimize css nano plugin to webpack 5

d2df61c

Update wp dependencies & webpack manifest plugin

571034a

Update chisel plugin code style packages

b62726d

Update project packages

f9b934e

Update existing packages Add postcss package

Change webpack-fix-style-only-entries with webpack-remove-empty-scripts

4c10cc5

Fix public path in manifest plugin

f68603f

edenizk added 15 commits August 14, 2021 00:18

Update webpack

e84d71c

Add filter for the wps hmr files

e4d2256

Confiigure WPS

d2edcc0

Fix ws error

af4aec0

Add ws retry

65d76f9

Fix runtime.js path in head

ebc72c4

Clean wp dev

60cba11

Add remove files feature & silent ws to fe

6748946

Remove hot update output paths

8fe1381

Add reload on twig file change

49f2561

Revert old logic back with WPS

e7cc983

Fix runtime js for static chisel

a7d2b9f

Add hook for wps options

3df4543

Update snapshots

16d4b2f

Remove asset content hash for the development

47b2f7a

edenizk added 4 commits September 5, 2021 14:36

Add external host to static

a231543

Fix serverDist

d03367d

Add middleware for removing html extentions

e3256c2

Format with Prettier

25b5c8a

edenizk added 2 commits September 27, 2021 22:56

Change cssnano to css minimizer

262adf1

Fix promises

70217e9

jakub300 force-pushed the rewrite-with-webpack branch from 53090e8 to f1b9ea4 Compare September 29, 2021 22:25

edenizk and others added 3 commits October 5, 2021 19:30

Merge branch 'xfiveco:rewrite-with-webpack' into rewrite-with-webpack

dbd56f1

Merge commit 'rewrite-with-webpack' into feature/dependencies-update

9fe9cc6

Change postcss-normalize from 10.0.0 to 10.0.1

ca4cbf9

jakub300 marked this pull request as draft November 21, 2021 02:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/dependencies update #500 #503

Feature/dependencies update #500 #503

edenizk commented Jul 15, 2021

jakub300 commented Aug 27, 2021 •

edited

edenizk commented Sep 5, 2021 •

edited

jakub300 commented Sep 20, 2021

General (both static and WP)

Static

WP

edenizk commented Sep 27, 2021

Feature/dependencies update #500 #503

Are you sure you want to change the base?

Feature/dependencies update #500 #503

Conversation

edenizk commented Jul 15, 2021

jakub300 commented Aug 27, 2021 • edited

General (both static and WP)

Static

WP

edenizk commented Sep 5, 2021 • edited

General (both static and WP)

Static

WP

jakub300 commented Sep 20, 2021

General (both static and WP)

Static

WP

edenizk commented Sep 27, 2021

Static

WP

jakub300 commented Aug 27, 2021 •

edited

edenizk commented Sep 5, 2021 •

edited