ES-Module Plugin cant be loaded *

[mhsdesign]

* unless brute forced via AOP in StyleAndJavascriptInclusionService

Description

Imagine you have a nice ESM Plugin and try to inject it via:

Neos.Neos.Ui.resources.javascript.'My.EsmPlugin':
  resource: 'foo/bar.js'

now we get an error about import cannot be used because the script tag doesnt tell its an esm.

the problem is, that no attributes for the script tag are allowed except defer

Neos.Neos.Ui.resources.javascript.'My.EsmPlugin':
  resource: 'foo/bar.js'
  defer: true # works
  type: 'module' # doesnt work

Steps to Reproduce

write
Neos.Neos.Ui.resources.javascript.'My.Plugin'.type: 'module'

Expected behavior

a script tag with <script type="module"> is rendered analog to the defer option

Actual behavior

the option is ignored

Affected Versions

UI: since ever

Solution

we would need to not only look out for the defer key but also for the key type

neos-ui/Classes/Domain/Service/StyleAndJavascriptInclusionService.php

Line 100 in 6ce2774

$defer = key_exists('defer', $element) && $element['defer'] ? 'defer ' : '';

also we could consider having an actual future proof attributes array which will be just rendered like in Neos.Fusion:Tag
i implemented this in https://github.com/mhsdesign/MhsDesign.ProposalNeosUiEsmPluginLoader

[mhsdesign]

Fair enough if you ask, where did you forge an es module neos ui plugin? Via esbuild.
https://github.com/mhsdesign/esbuild-neos-ui-extensibility

[mhsdesign]

I made a proposal package: https://github.com/mhsdesign/MhsDesign.ProposalNeosUiEsmPluginLoader

[mhsdesign]

I would rather suggest to use native esm dynamic imports (supported with es2020 and neos 8.2 with esbuild 🎉)