Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FEATURE: esbuild #3200

Merged
merged 79 commits into from
Nov 24, 2022
Merged

FEATURE: esbuild #3200

merged 79 commits into from
Nov 24, 2022

Conversation

JamesAlias
Copy link
Contributor

@JamesAlias JamesAlias commented Oct 6, 2022 •
edited by mhsdesign
Loading

TODO

  • make watch
  • remove added todos in code ...
  • revert adding fonts to git
  • fix esbuild build path
  • run typescript check (not done by esbuild)
  • drag and drop not working FEATURE: esbuild #3200 (comment)
  • markdown help messages not working FEATURE: esbuild #3200 (comment)
  • EmailAddressValidator not working FEATURE: esbuild #3200 (comment)
  • !!! more node dependencies not working? (i fear only testing helps ... i dont have a way to check for that ... we can only encounter them at runtime ...) FEATURE: esbuild #3200 (comment)
  • some list styles are still broken (missing normalize.css?)
  • .vanilla-css is missing (test with html nodetype -> codemirror)
  • include ck-editor css? -> not necessary!
  • Check extensibility (do custom plugins still work?)
  • MOVED Check @neos-project/react-ui-components build-standalone-esm
  • Remove old build setup stuff (webpack, babel, etc)
  • fix e2e tests -> via keepNames: true
  • fix jest tests -> WIP: Feature esbuild jest tests #3254
  • storybook
  • finalize polyfill removal Remove Internet Explorer 11 Support #2855 - anything left? ./polyfills.js was removed
  • side by side screenshot comparison -> currently the icons are a few pixel smaller? -> would break screenshot based testing if done by ourselfs or others. (maybe use postcss calc again instead of css calc)
  • What is our browser target (esbuild target) and do we still need postcss autoprefixer - remove root package.jsons browserslist
  • MOVED re add main fields and build subpackages command for npm subsplits
  • MOVED check if neos-ui-extensiblity still works (bable stuff) did we update babel?
  • MOVED fix scss files in lib esm build of react-ui-components
  • build size comparison (css gets bigger with @include vs composes ?)
    • OLD: Host.css: 135 KB (23,8 KB gzipped)
    • OLD: Host.js: 5,6 MB (1,5 MB gzipped) + Vendor.js (with polyfills): 284 KB (90,1 KB gzipped)
    • NEW: Host.css: 118 KB (20,7 KB gzipped ❤️ )
    • NEW: Host.js: 3,7 MB (1,2 MB gzipped ❤️ )
  • build speed (M1 Max Macbook Pro)
    • OLD:

Screenshot 2022-10-07 at 4 54 56 PM

- NEW:

Screenshot 2022-10-07 at 4 51 56 PM

optional todos:

  • MOVED replace style.css to style.module.pcss when used as module FEATURE: esbuild #3200 (comment)
  • MOVED use pnp FEATURE: Use Yarn pnp mode #3192
  • split 'Neos.Neos.UI:Vendor' ? no rather not ...
  • dont use unsafe eval but new Function
  • find out why Vendor.js was used in iframe -> probably because it contained the ./polyfills.js
  • move build files in Javascript and Styles folder :: no FEATURE: esbuild #3200 (comment)
  • compare build files count - fonts etc with webpack
  • MOVED remove esbuild from yarn cache? -> as there would be linux-x64, darwin ... and many other builds for each system
  • what about make build-subpackes? -> we dont need it anymore, expect for distributing
  • todo do we still use tslib -> i think we can remove that
  • yarn dedupe -> doesnt do much in terms of build size -> probably only dev dependencies affected
  • find out why we have a dependency that uses nodes path?!
  • MOVED use postcss composes again instead of scss @extends FEATURE: esbuild #3200 (comment)
  • MOVED Remove PostCSS css var generation from build step (on ice for this pr FEATURE: esbuild #3200 (comment))
  • rollback css var rename (and not using postcss var replace?) only for this pr so it becomes easier to review FEATURE: esbuild #3200 (comment)
  • dont use buildsubpackages atrtefacts (dist) in the main bundle
  • MOVED -> cleanup ../dist/ in neos-ui-extensibility needed for Feature: Provide second extensibility build package with esbuild. #3215
  • MOVED no need for postcss-import as esbuild does it itself
  • MOVED do we still need postcss-hexrgba -> esbuild minifies a lot -> so it may not even be preserved. What is the usecase?
  • what about the Host.js.LICENSE splitting in Resources/Public/JavaScript (now inside js ...)
  • what about the fonts in Resources/Public/Fonts -> shouldnt they be build artefacts in the "ui build" package?
  • MOVED analyze bundle with https://bundle-buddy.com/
  • MOVED replace ./Build/createVersionFile.sh with esbuild define - but test would fails if not defined in jest
  • revert e2e changes FEATURE: esbuild #3200 (comment)
  • MOVED extract webpack neos-ui-extensiblity adapter outside of workspaces (so we dont need babel installed anymore :P)
  • only use keepNames: true for e2e build make build-testing
  • remove bable.rc in every folder (probably because of jest and babel)
  • MOVED improve unit tests https://github.com/folke/esbuild-runner

WIP!
What WE did
Replace web pack with esbuild.

THANK YOU SO MUCH @NicoleNitschke and @mhsdesign ❤️

How WE did it
blood. sweat. tears.

How to verify it
tba

@JamesAlias JamesAlias linked an issue Oct 6, 2022 that may be closed by this pull request
Evaluate replacing webpack & babel with esbuild. #3113
Closed
@markusguenther
Copy link
Member

Thanks for all the effort @JamesAlias 💙

The build_flow_app step can be solved with a rebase to get the latest changes in 8.2 :)

@crydotsnake crydotsnake changed the title Feature/esbuild FEATURE: esbuild Oct 7, 2022
JamesAlias and others added 17 commits October 7, 2022 14:46
@JamesAlias
wip
26c3176
@JamesAlias
wip
81ad03b
@JamesAlias
TASK: ignore intelliJ project settings file
ba89431
@JamesAlias
WIP: ESbuild with functioning JS, only postcss 'composes' does not work
2f7b36d
@JamesAlias
WIP: correctly load svg files
2210b1a
@JamesAlias
WIP: convert reset.css to normal css
34b767a
@mhsdesign @JamesAlias
WIP: Fix Build
8c36723 
- Iframe Host Styles
- HostOnlyStyles
- fortawesome string replace
@JamesAlias
WIP: use css standard css variables
f586f46
@JamesAlias
WIP: use standard css variables
7ca28b6
@JamesAlias
WIP: fix dropdown includes, add some docs
46cc58a
@JamesAlias
WIP: STYLES WORK
8a17fcd
@JamesAlias
TASK: fix reset styles import mixin
71a513b
@JamesAlias
WIP: Replace Webpack with esbuild in Makefile
db8e2fa
@mhsdesign @JamesAlias
WIP: ckeditor load svg as text
8fb108a
@JamesAlias
TASK: remove unwanted duplication
b5d2357
@mhsdesign @JamesAlias
WIP: exlude regex for stylePlugin::cssModulesMatch
413ebea
@JamesAlias
TASK: correctly import .vanilla-css and codemirror highlight js
6c5fb83
@markusguenther
Copy link
Member

Not sure, but the storybook is outdated, and I bet that no one uses that anymore. So maybe we can save some time and disable or remove the storybook. I did not use it for years now, can remember the sprint 2018 in Vienna... at some point it broke.

@JamesAlias JamesAlias self-assigned this Oct 7, 2022
@markusguenther
Copy link
Member

As we release the @neos-project/react-ui-components always as extra package ... we need to check what is wrong. But the most people I know seldom update the package version in the UI extension.

This was referenced Nov 24, 2022
Closed
Closed
@markusguenther
Copy link
Member

Wow, what a ride. I am so thankful for all the time that has been spent on this PR and the PRs before that were abandoned. Thanks to @mhsdesign @JamesAlias @Sebobo and @grebaldi for all the discussions and the endless time 🥇🥇🥇🥇

@markusguenther markusguenther merged commit 2cecfcf into 8.2 Nov 24, 2022
@markusguenther markusguenther deleted the feature/esbuild branch November 24, 2022 19:45
@markusguenther
Copy link
Member

@mhsdesign already created all the issues for the follow-ups 💙

@JamesAlias
Copy link
Contributor Author

OMG you guys are crazy awesome! ❤️😍

@markusguenther
Copy link
Member

Thanks for all the work... we are brave enough and will resolve all upcoming issues with the extensibility.
But the most people don't use the latest packages of the extensibility.

@mhsdesign
Copy link
Member

wow this is great!!! what a run. Thank you so much again @JamesAlias for the initial effort ;) And great that we pulled it of.

This was referenced Nov 24, 2022
Merged
Open
Closed
Closed
This was referenced Feb 17, 2023
Merged
Merged
@github-actions github-actions bot added the Feature Label to mark the change as feature label Mar 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mhsdesign mhsdesign mhsdesign left review comments

@Sebobo Sebobo Awaiting requested review from Sebobo

@markusguenther markusguenther Awaiting requested review from markusguenther

Assignees

@JamesAlias JamesAlias

@mhsdesign mhsdesign

Labels
8.2 Feature Label to mark the change as feature
Projects
No open projects
Neos & Flow 8.2 Release Board
Status: Done
Milestone
8.2
Development

Successfully merging this pull request may close these issues.

Evaluate replacing webpack & babel with esbuild.
4 participants
@JamesAlias @markusguenther @mhsdesign @Sebobo