[6.1] The build script for building scripts

[Fedik]

Summary of Changes

This time has come. After all this years we should stop using fancy compilers and code native JS/CSS as in good old days.
Just joking.

I updated the build script to be able to run it per extension, without rebuilding whole thing each time.
And fixed few bugs on the way.

Main changes:

• Each extension can be build on its own
• Move source files of com_media and com_workflow in to media_source/
• Move /build/media_source/ to /media_source. With this all relative includes will be the same now for both media/ and media_source/.
• Added description about media_source/ in to /media_source/README.md.

Problem with existing build

• Existing script is running for whole media_source.
• It is complicated to do and test small changes.
• Adding new script builder is a pain.

New builder

• Defined list of builders, one per extension/asset,
• Each asset can have own builder or fallback to default
• Each builder have a list of tasks to run (and it can be modified):
  • clear remove existing files in folder
  • copy copy files to /media
  • css compile css/scss files
  • js compile js files and modules
• Adding new script builder is still a pain but in different place.

Read more in /media_source/README.md for more detail.

Few examples

# build all
npm run build -- -a

# build only com_content assets
npm run build -- -n com_content

# build only admin template
npm run build -- -n templates/administrator/atum

# build only styles of the admin template
npm run build -- -n templates/administrator/atum -t css

# watch on asset
npm run watch -- -n com_content

npm run watch -- -n templates/administrator/atum

# watch on few assets
npm run watch -- -n com_content,com_categories

Testing Instructions

Run build.
All should work as before.

Link to documentations

Please select:

• Documentation link for guide.joomla.org:
• No documentation changes for guide.joomla.org needed
• Pull Request link for manual.joomla.org:
• No documentation changes for manual.joomla.org needed

[Fedik]

I updated the PR.
And fixed "min" version. Thanks for testing.

[Fedik]

hm, I think there still may be an old issue with removed copyright in CSS.
I totally forgot about that.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[Fedik]

For removed copyright we have to edit comments from /** to /*! parcel-bundler/lightningcss#43 (comment)

Can probably do it automatically, will look on it later.

[LadySolveig]

I thought today would be a good day to test, since the beta release is coming out and there probably shouldn't be so many merges, so that the test result is quite easy to evaluate.
I'll keep testing what I can and get back to you if I find anything.
For copyright issues, please let me know if you say I can test it. Until then, I will ignore this error.

[LadySolveig]

media/vendor/altcha/css/altcha.css is minified, but there is no min.css.
However, min.css did not exist before either, as the CSS was delivered only unminified before.
Would be cool to have both.

[LadySolveig]

missing version in js but min.js is ok: - media/vendor/bootstrap/js/alert.js - media/vendor/bootstrap/js/button.js - media/vendor/bootstrap/js/carousel.js - media/vendor/bootstrap/js/collapse.js - media/vendor/bootstrap/js/dropdown.js - media/vendor/bootstrap/js/modal.js - media/vendor/bootstrap/js/offcanvas.js - media/vendor/bootstrap/js/popover.js - media/vendor/bootstrap/js/scrollspy.js - media/vendor/bootstrap/js/tab.js - media/vendor/bootstrap/js/toast.js

[LadySolveig]

For my understanding, should the media_source folder still be present in the build package?

concerns assets for media manager and workflow graph.

[Fedik]

media/vendor/altcha/css/altcha.css is minified, but there is no min.css.

Yes, most of files from media/vendor/ comes from npm_modules, without modification.
altcha does not provide source for these file same for js file, there a few other vendors like that.
We can duplicate these file, but that does not really make sense.
I think it is fine as long as it works.

missing version in js but min.js is ok:

need to check

For my understanding, should the media_source folder still be present in the build package?

What do you mean?
com_media It just as any other asset, but with own builder.
and where from that screenshot?

[LadySolveig]

Yes, most of files from media/vendor/ comes from npm_modules, without modification.
altcha does not provide source for these file same for js file, there a few other vendors like that.
We can duplicate these file, but that does not really make sense.
I think it is fine as long as it works.

With the new build script now we have a altcha.css but it is minified, before we had only a altcha.css but it was not minified. So now, with the new script, it is no longer just copied, as it was before. Perhaps then the file should be not .css but min.css? But in the end, it's not important to me at all. I just wanted to report it because I noticed it. :D

What do you mean?
com_media It just as any other asset, but with own builder.
and where from that screenshot?

The screenshot is a direct comparison of the media assets with the previous build script and then with the new one. These are the media assets that we will deliver in the media folder in the installable package.

• media/com_media/js/media-manager.js
  same in
• media/com_workflow/js/workflow-graph.js

Until now, we have not included the source files under build/media_source in the installable package. I think this will remain the case, so media_source will not be included in the final package. But then the path doesn't fit here, because it leads to nowhere. Basically, this is tricky because moving the files means that the files for workflow-graph and mediamanager are now no longer included. Or am I mistaken?

[Fedik]

With the new build script now we have a altcha.css but it is minified, before we had only a altcha.css but it was not minified.

It maybe changed something on their side. The file is from node_modules and it is also minified
node_modules/altcha/dist_external/altcha.css on 6.1 branch. Just checked.

com_media

Now I see, it is some random Vue thing from its compiler, the file itself is not used.
All .vue files is compiled in to javascript. We can safely ignore that.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[Fedik]

@LadySolveig I fixed the stuff you found. The license comments and bootstrap version.

[LadySolveig]

• @charset "UTF-8"; at the beginning of the .css and .min.css files is removed.

• // eslint-disable-next-line no-undef on first line is removed in file media/vendor/jquery/js/jquery-noconflict.js

• different order in css min.css - but seems ok to me, as far as I have seen it is now correct (alphabetically)

• all copyrights and all comments now seem to be preserved, also on min.css and also the comments within the doucment

• formatting seems to be different in css files (do we use here a different configuration???)

  • selectors split across multiple lines instead of one
  • different spacing2 instead of 4 / sometime reverse 4 instead of 2

• media/system/html/noxml.html different

  • -moz-radial-gradientand -webkit-radial-gradient seems missing - not sure what else
  

[LadySolveig]

The .js files differ a lot, both in terms of formatting, but sometimes look completely different. :D

joomla.asset.json has a dfferent order, but we had this also before as far as I remember.

Thanks @Fedik ! 💚

[Fedik]

joomla.asset.json has a dfferent order,

The order should be the same for every build now. Or it still different?
However it will be different from what we currently have in main branch.

[Fedik]

@charset "UTF-8"; at the beginning of the .css and .min.css files is removed

Hm it should be there all the time, after last fix.
Any specific css for example?

// eslint-disable-next-line no-undef

That something useless now :)
jslint is fine

media/system/html/noxml.html

Before the PR css for the template files was not processed,
Now all CSS code uses same processing routine.

different order in

The compiler and its options is the same.
Well, should be fine :)

[LadySolveig]

joomla.asset.json has a dfferent order,

The order should be the same for every build now. Or it still different? However it will be different from what we currently have in main branch.

That's cool :) You are right only differs from the previous we have in the branch 👍🏼 But if a ran it now multiple times it stays the same.

[LadySolveig]

@charset "UTF-8"; at the beginning of the .css and .min.css files is removed

Hm it should be there all the time, after last fix. Any specific css for example?

Seems to be only the css and min.css files in the media/vendor folder,

[Fedik]

Seems to be only the css and min.css files in the media/vendor folder,

Can be, the vendor files copied as they are. With few exceptions.