New Asset Build Tool

[Skrypt]

Some extra work for me on Christmas holidays.🎅🏼

Assets Build Tool

Created by @jptissot

Based on Concurrently and Parcel but can also run Vite (experimental) and probably Webpack too (untested). This is a non-opiniated build tool which allows to be extended for any asset compiler/bundler that someone may require.

This build tool essentially uses Concurrently instead of Gulp.
Concurrently, is a concurrent shell runner which allows to trigger any possible shell command. It allows to trigger Parcel, Vite, Gulp or any other command that we need for building assets. Everything is written as ES6 modules (.mjs files).

Kind of needed for Vue 3 migration because it needs to use either Vite or Parcel to build as ES6 modules.

Old assets are not compiled as ES6 modules so they don't need these bundlers. For that matter I kept the old gulpfile.js which will be now triggered by Concurrently.

What needs to be done over time is to migrate these javascript files to ES6 modules (.mjs files or .ts files) so that we can compile them as modules. But that's a migration that will happen over time.

Features

• Build everything: yarn build
• Build module by name: yarn build -n module-name
• Watch module by name: yarn watch -n module-name. "parcel" and "sass" actions only.
• Build with gulp: yarn build -g
• Rebuild with gulp: yarn build -gr
• Makes uses of latest yarn version 4.6.0. OC is currently on version 1.something
• Makes use of yarn workspaces which allows to import files from different locations in the app for sharing ES6 modules.
• VS Code launcher debug option added as "Asset Bundler Tool Debug"
• Build assets by tag: yarn build -t tagname
• Gulp pipeline still using GulpAssets.json file
• New Assets.json file definitions for building with new tool.
• Concurrently will retry building up to 3 times making CI more consistent.
• Moving package.json files to Assets folder of modules and themes. This will remove these files from the compiled C# .dll files.
• Removes unnecessary package-lock.json files as we now rely on a single yarn.lock file.

Update

Finally, I'm keeping the old gulp pipeline because there is nothing wrong with it. Also, for backward compatibility with older modules that requires it. I'm using GulpAssets.json for the Gulp build tool and using Assets.json for the new one. This way, no need to migrate to the new build tool. I'm simply triggering gulp rebuild with Concurrently in the new asset build tool. Because that's what it is essentially, a concurrent shell runner. This way, it is going to be a softer migration for those who already have modules that are built with the old gulp pipeline.

Of course, this PR needs to be accepted by community first.

TODO

• Migrate assets compilation to new tool where we can.

Modules to migrate:

• OrchardCore.Resources (Almost everything worked except (Monaco and Trumbowyg RTL)
• OrchardCore.Media (Not a great idea to waste time on migrating this as we are refactoring to Vue 3)
• OrchardCore.Liquid (Monaco Editor Intellisense)
• TheAdmin (Needs some work to migrate all scripts to Typescript) --> scripts are tied to OrchardCore.Themes scripts, they are similar, we need to move common code to Frontend folder.

@jptissot @deanmarcussen @aderderian

Fixes #14169. Related to #15740.

[Piedone]

You've been sneakily working on this since April ;).

Fixes #15740 #14169 #6762?

[github-actions]

This pull request has merge conflicts. Please resolve those before requesting a review.

[Skrypt]

@sebastienros answers from last meeting.

Why not using Parcel for transpiling SASS assets?

The reason is that Parcel is built so that it can compile assets either in "Production" or "Development" mode by either setting an environment variable or by passing it through API config. When in "Development" mode ; doing "yarn watch" will create the minified .css file and .map file for debugging purposes. Though, when doing "yarn build" in "Production" mode "as it will do on CI", it will create the minified .css file only.

Now, since in OC we always transpile both .css and .min.css files I had no choice to create a custom action for it. More on that on side thoughts.

Also, it was easier for me to create a SASS action that actually uses the same library than Parcel uses internally (lightningcss). The only thing that was missing is a watcher. I added chokidar so that it watches at the file built and also parsing that file for import paths to add watchers on these too. I did not made it recursive yet though ; but it works pretty well so far.

Also, Parcel optimizes .js files by obfuscating it at the same time making smaller sized files.

Side thoughts

From what I understand, there is no need to provide the unminified asset in production unless you would want to debug it. But it is then equivalent than providing the .map file with the minified .css file. So while our ResourceManager and StyleTagHelper allows to provide an asp-src and debug-src attribute I wanted to have both.

Maybe, future enhancement would be to simply always compile the minified asset and provide better configurations for .map files.

So, also, Parcel reacts differently as it is a bundler. If you import a .scss file inside a .ts file for example ; it will create both a .js and .css file when building.