[5.0] ESM importmap support

[Fedik]

Summary of Changes

This PR add support for <script type="importmap"> in to WebAsset manager.

The browser support is limited to only 2023 year version, but that should not stop us.
As for now, I have added a polyfill. helper method to work around browser support for "top level" imports.

What changed:

joomla.asset.json added next properties for "script" asset:
importmap boolean, whether the element should be added to "importmap";
importmapOnly boolean, whether the element should be ONLY in "importmap", and do not render it as <script>;
importmapName string, optional, custom module name, example when asset name foo, and module name is @foo;

Fallback for orlder browser

Uses es-module-shims polyfill.

Because of browser support I have added esm-map asset, wich provide joomlaESMap() function to resolve module to URL when "importmap" not supported.

Untill browser support will get better we should use the import as following:

PS: I know about polyfill, but I do not like how that works.

Testing Instructions

Apply path, run npm install.
Create 2 js file:
media/system/js/test-module.js with content:

const bla = {
  blabla: 1
}
export { bla }

media/system/js/test.js with content:

import { bla as bla1 } from '@test-module';
import { bla as bla2 } from 'system/test-module.js';

console.log(bla1, bla2);

Add them to media/system/joomla.asset.json:

{
      "name": "test-module",
      "type": "script",
      "uri": "system/test-module.js",
      "importmap": true,
      "importmapName": "@test-module",
},
{
      "name": "test-module2",
      "type": "script",
      "uri": "media/system/js/",
      "importmap": true,
      "importmapName": "system/",
},
{
      "name": "test",
      "type": "script",
      "uri": "system/test.js",
      "attributes": {
        "type": "module"
      },
      "dependencies": [
        "test-module", "test-module2"
      ]
}

In index.php of the template, enable this "testing asset" with $wa->useScript('test');

Open the site in browser, and look in browser console.
You should get console log of Object from "test-module".

Link

• Documentation link for docs.joomla.org: https://docs.joomla.org/J4.x:Web_Assets
• Pull Request link for manual.joomla.org: Add importmap info to WebAsset manual Manual#134
• Update schema for joomla.asset.json Update asset schema: importmap properties schemas#17

[dgrammatiko]

Hats off Fedir! This is the most important feature for j5 for the modern js…

[Fedik]

I have added es-module-shims polyfill. but it 30Kb minified :)

[dgrammatiko]

@Fedik Is it possible to use $wam->disable('es-module-shims'); as we were discussing with Harald? LGTM

[Fedik]

Yes, can be done onBeforeCompileHead event.

[HLeithner]

Still not sure why we need importmaponly parameter, maybe I have not enough understanding that someone needs both.

[Fedik]

Not allowing both will be an unneeded limitation.
There may be a reasons why need both, starting from simple "preload" to some fancy logic, when example the code init the script and doing export at same time (not like it is a good practice but it is a web).

That why I think that we need a way to have it both, without duplicating the asset declaration.

It can be other way around, when importmap will add the script only to the map.
And some extra option renderThisScript which also render it, or can check if "attribute type:module" is present then also render (but this can be a bit cryptic for developers).
I am fine with any.

[Fedik]

Hmhm, or maybe I will remove it. Duplicated asset with "cross dependency" also can work to allow both.
I will update PR sometime

[Fedik]

I have removed importmapOnly.
And updated description, with example of use of a directory in the importmap.

[HLeithner]

ok I would say we have a MVP here and can merge it do we have a test case for it which where we can use it in core? I think codemirror maybe too complicated as simple test suite?

@dgrammatiko @Fedik @laoneo

[dgrammatiko]

@HLeithner #41018 is a more realistic example

[Fedik]

Also probably can be Bootstrap js.

[HLeithner]

Also probably can be Bootstrap js.

Would be great, not sure if this is possible in a b/c way?

[dgrammatiko]

Would be great, not sure if this is possible in a b/c way?

it’s backward compatible. The only problem with switching to import maps is the extra polyfill cost and the fact that to get the es5 scripts there’s a need for some changes in the build tools. Assuming that the es5 will be dropped in v5 the only consideration is the polyfill cost.

btw is there a plan to merge the pr for the drop of es5?

[dgrammatiko]

Also probably can be Bootstrap js.

All the .es6.js that have an import can be switched to import maps: guided tours, keyboard short cuts, choices custom element, form validator, etc

Also it’s an easy task, change the import, add the module to be imported to the dependencies and add an entry to the assets json. Job done!

[HLeithner]

Would be great, not sure if this is possible in a b/c way?

it’s backward compatible. The only problem with switching to import maps is the extra polyfill cost and the fact that to get the es5 scripts there’s a need for some changes in the build tools. Assuming that the es5 will be dropped in v5 the only consideration is the polyfill cost.

btw is there a plan to merge the pr for the drop of es5?

yes is planned, wasn't able to test it personally yet

[HLeithner]

Thanks, I tested it and merged it for now and hope for more tests in alpha2, also I think we should remove the default polyfill

[Fedik]

PR for manual joomla/Manual#134
PR for Schema joomla/schemas#17

[dgrammatiko]

@Fedik the nonce attribute for the CSP is respected as far as I understand the renderAttributes function. Am I right?

Also shouldn't we disallow some other attributes there, ie async, defer, noscript, etc?

[Fedik]

Yeap CSP should be there for importmap inline script.

Also shouldn't we disallow some other attributes there, ie async, defer, noscript, etc?

For wich case? For script with importmap: true they will be ignored.