Tracking feasibility of unshipping assert contextual keyword in Chrome

[syg]

Chrome has landed use counters tracking the use of the deprecated assert contextual keyword in import attributes.

This will go to stable in 114, which is scheduled for May 30, 2023. We will need some time after the counter reaches the stable population to gather numbers.

• blink CL
• V8 CL

[nicolo-ribaudo]

Usage stats: https://chromestatus.com/metrics/feature/timeline/popularity/4528 (⚠️ as mentioned above, the number is so close to zero just because the counter is not in stable yet)

[nicolo-ribaudo]

I was exploring Chrome use counters, and I found counters for JSON modules (https://chromestatus.com/metrics/feature/timeline/popularity/3804 - 0.012% of page loads) and CSS modules (https://chromestatus.com/metrics/feature/timeline/popularity/3805 - 0.000061% of page loads). I don't think it's unreasonable to expect the usage of import assertions to roughly match the usage of JSON modules.

I manually checked some of the sample URLs, and all the usages I found (using the assert[:{ ] regexp on their code) are from https://github.com/guybedford/es-module-shims/blob/main/src/features.js, which try/catches around evaluating CSS/JSON modules with import assertions to detect if they are supported and thus if they need to be polyfilled. Removing support for assert would cause the polyfill to kick in, and to restore such support in websites that rely on it.

[guybedford]

Note that es-module-shims does not by default engage the JSON / CSS modules feature detection path at all in polyfill mode, unless it is explicitly enabled via https://github.com/guybedford/es-module-shims#pollyfill-enable-option, which I'd expect would be a very small percentage of es-module-shims users.

[nicolo-ribaudo]

Going back to #135 (comment) again, it looks like many of the usages of CSS/JSON modules are from v0.13.1 of es-modules-shims, that performs feature-detection even if then they are not used.

[syg]

There are now some URLs at the bottom of https://chromestatus.com/metrics/feature/timeline/popularity/4528 now, if you want to take a look again @nicolo-ribaudo.

[nicolo-ribaudo]

Thank you!

Some preliminary analysis of the the first websites listed there (I only checked the homepage), searching with the assert[ /{] regex:

• var.blog.jp — it uses CSS modules for syntax highlighting, I get no hightlighting on Firefox (it's a blog about JS)
• www .eurokosher.it — uses es-modules-shim v0.13.1 which has feature detection, but does not actually use assertions
• app.ulu.io/login — uses JSON modules with an assert static import to load localization data. They do something like this:

  <script type='module'>
  import locale from '/locale.json?locale=it' assert {type:'json'};
  window.I18n = locale;
  </script>
  <script>
  window.I18n = { /* ... hard-coded contents of locale.json?locale-it ... */ };
  </script>

  so that their localization also works in browsers without import assertions support. Actually, in browsers that do not have import assertions supports their website works the same but it avoids loading one additional 250k file 😛
• classlocator.live — the search at the top does not work if the assert syntax is not supported
• council.csie.ntu.edu.tw — the buttons to filter the people list do not work without assert support
• gewofit.de — they use a static JSON import in their index.js file to load some data for a library, but I cannot find any behavior difference between Chrome and Firefox (which does not support assert)
• labdash.net — they have a map that only loads if import assertions are supported, but even if they don't the rest of the website keeps working
• live.cartracker.nl — this is exactly the same code as in app.ulu.io. Maybe it's generated by some sort of framework that we could get to stop using assertions since it's just redundant for them.
• mijnomgeving.justlease.nl — same as app.ulu.io
• registrs.ur.gov.lv — they use it to show the website version in the footer. It's in a self-contained script tag, so the rest of the page works even with the syntax error.
• sanlam.ma/fr/professionnel/ has a contact form with autocompletion for cities that only loads suggestions if assert are supported
• secure.labdash.net — same as labdash.net
• shifthappens.site — uses es-modules-shim v0.13.1 which has feature detection, but does not actually use assertions
• shop.lepiantagionidelcaffe.com — they seem to use import assertions to load a list of regions, but their checkout form shows me the list of regions even in browsers without import assertions support. The rest of the JS still works. I couldn't find a behavioral difference.

Overall, it looks like most those website have been designed to fail gracefully in browsers without import assertions support, so that they keep working just with (sometimes) one specific feature unavailable.

[nicolo-ribaudo]

Looking good :)

[syg]

V8 has landed a CL that will warn on assert usage, recommending to use with instead. The plan is to remove assert support by 12.6, which will be stable by mid-June, 2024.

Edit: I should say the plan is, barring new data, like newly discovered incompat.