fix(template): add import map for JS module entry points

Currently apps are broken if they have exports in the JS entry point,
because they then will import from the entry point but because they do
not know about the Nextcloud cache buster they will import without cache
buster.

This results in two problem:
1. The module might be outdated (old cached)
2. The module is duplicated, so the module will be loaded twice and will
   have two different - out of sync - states. This also means it will
   re-run sideeffects of the entry point.

To fix this we generate an import map which basically maps the plain
entry point script to the script with cache buster added.

For example:
```js
// entry.mjs
console.error('called')

async function onClick() {
  await import('./chunk.mjs')
}

export const name = 'foo'

// chunk.mjs
import { name } from './entry.mjs'

console.error(name)
```

When calling `onClick` without this fix the output will be:
> called
> called
> foo

With this fix:
> called
> foo

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

lib/private/Template/functions.php

@@ -61,10 +61,10 @@ function emit_script_tag(string $src, string $script_content = '', string $conte
 	$defer_str = ' defer';
 	$type = $content_type !== '' ? ' type="' . $content_type . '"' : '';
 
-	$s = '<script nonce="' . $nonceManager->getNonce() . '"';
+	$s = '<script nonce="' . $nonceManager->getNonce() . '"' . $type;
 	if (!empty($src)) {
 		// emit script tag for deferred loading from $src
-		$s .= $defer_str . ' src="' . $src . '"' . $type . '>';
+		$s .= $defer_str . ' src="' . $src . '">';
 	} elseif ($script_content !== '') {
 		// emit script tag for inline script from $script_content without defer (see MDN)
 		$s .= ">\n" . $script_content . "\n";
@@ -81,6 +81,8 @@ function emit_script_tag(string $src, string $script_content = '', string $conte
  * @param array $obj all the script information from template
  */
 function emit_script_loading_tags($obj): void {
+	emit_import_map($obj);
+
 	foreach ($obj['jsfiles'] as $jsfile) {
 		$fileName = explode('?', $jsfile, 2)[0];
 		$type = str_ends_with($fileName, '.mjs') ? 'module' : '';
@@ -91,6 +93,29 @@ function emit_script_loading_tags($obj): void {
 	}
 }
 
+/**
+ * Print the import map for the current JS modules.
+ * The import map is needed to ensure that an import of an entry point does not duplicate the state,
+ * but reuses the already loaded module. This is needed because Nextcloud will append a cache buster
+ * to the entry point URLs but the scripts does not know about that (both must match).
+ *
+ * @param array $obj all the script information from template
+ */
+function emit_import_map($obj): void {
+	$modules = [];
+	foreach ($obj['jsfiles'] as $jsfile) {
+		$fileName = explode('?', $jsfile, 2)[0];
+		if (str_ends_with($fileName, '.mjs') && $jsfile !== $fileName) {
+			// its a module and we have a cache buster available
+			$modules[$fileName] = $jsfile;
+		}
+	}
+	if (!empty($modules)) {
+		$json = json_encode(['imports' => $modules], JSON_UNESCAPED_SLASHES | JSON_FORCE_OBJECT);
+		emit_script_tag('', $json, 'importmap');
+	}
+}
+
 /**
  * Prints an unsanitized string - usage of this function may result into XSS.
  * Consider using p() instead.