Update the JS pipeline - Githubissues

Soare-Robert-Daniel commented 9 months ago

Highlights

🚀 Babel is on the latest version, modern features like boo ?? foo and boo?.name can be used. 👮‍♂️ Eslint is on the latest version, and new warnings are now available to enforce best practices. 🔧 Format command has been added via Eslint --fix. 🔧 New Github job added to check for lining and dev build posting. 🔥 DevTools now available via inline-source-map 🔥 Webpack is on the latest version. 🖌️ SCSS lang now available 🔥 E2E Testing with Playwright for Free Version

Breakdown

The current state of the JS packages is unacceptable, especially the Babel version, which was very old, and many JS features needed to have the required support.

Upgrading the Babel version was a straight process; we removed some old packages and added new ones like core-js, which can provide polyfills for old browsers if needed.

Vue was updated to its latest version of supported 2.X. Related packages like vuex and vue-loader were also updated to the version that still supports Vue 2.X -- in the future, it is recommended to migrate to Vue 3 and Pina store (since it is a new officially recommended store). SASS lang can now be used.

After much refactoring to Webpack, the new version of Webpack has excellent features like --mode, which can easily control the build flow without the need for an env and additional lib like cross-env.

Also, the build result is now simplified. The old one created two types of files build.js and build.min.js, which were coordinated by a PHP var named ROP_DEBUG. Now, only build.js is created and loaded, and its content is determined by Webpack --mode.

ℹ️ On the published version of ROP on WordPress, you will see that both build.js and build.min.js were uploaded. Also, the build files were submitted via Git -- now the assets/js/build is excluded via .gitignore and the deploy job has been updated to run an npm run build before uploading the the version to WordPress.

DevTools are now in full force, inline-source-map is now available. Fixing bugs should now be a lot more easier.

The E2E setup is similar to the one from Gutenberg which allows us to use their utility function to deal with WordPress internals.

Testing

This is a pretty big update and we need to make sure that we did not introduce any regression. Please check each feature in the interface to ensure the components works as expected.