Replace jQuery dependency with ES6+/Typescript, Babel and bump Webpack to version 5

[jonascarlbaum]

Is your feature request related to a problem? Please describe. The Foundation project starts feeling a bit bloated generally. But first and foremost I feel jQuery is a preference that not everyone has, I'm one that don't like it at all. There should be no default preferences in the Foundation project, there should be best practices only! The first thing we have to do is remove and redo stuff.

Describe the solution you'd like The goal of the project should be to show the best practices, that can be the starting point without the need of removing and redo a lot of stuff, and I guess that is the goal.

The best practices should be:

• use ES6+ or Typescript, not jQuery! Everything in Foundation that is jQuery seems to be achievable in ES6+/Typescript.
• run the latest Webpack 5, since it's released and will be the de facto standard the coming years, it has some nice new features like default asset modules that replaces some of the old loaders.
• provide good defaults for Babel and its presets, to showcase how to add plugins to Babel, like a .babelrc or similar.

Asset Modules Asset Modules is a type of module that allows one to use asset files (fonts, icons, etc) without configuring additional loaders.

Prior to webpack 5 it was common to use:

• raw-loader to import a file as a string
• url-loader to inline a file into the bundle as a data URI
• file-loader to emit a file into the output directory

Asset Modules type replaces all of these loaders by adding 4 new module types:

• asset/resource emits a separate file and exports the URL. Previously achievable by using file-loader.
• asset/inline exports a data URI of the asset. Previously achievable by using url-loader.
• asset/source exports the source code of the asset. Previously achievable by using raw-loader.
• asset automatically chooses between exporting a data URI and emitting a separate file. Previously achievable by using url-loader with asset size limit.

[lunchin]

I agree this should happen as well. JQuery should not be required in modern projects and webpack 5 should be used. We would probably need some help validating this once there is a branch ready if you would be open to providing feedback.

[jonascarlbaum]

Sure @lunchin — I’ve might have some ideas that you might feel is interesting, on how to do some related stuff too, like cache-busting resources in webpack and add those in master-layout etc.

And generally, the jQuery show/hide stuff is easier to solve with classes or aria-attributes (like accessibility stuff on toggling menus, like if mega-menu is visible) and write css with transitions etc., it would be simpler javascript too, so the rewrite of jQuery and accessibility rework of markup could preferably be combined... 😉