enh: Allow sharing JavaScript modules across apps and core

Initially `vue` and `@nextcloud/vue` are shared by server core.

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

core/Listener/BeforeTemplateRenderedListener.php

@@ -43,6 +43,10 @@ public function handle(Event $event): void {
  return;
  }
 
+ // Modules we share everywhere
+ Util::addSharedModule('core', 'shared-vue', 'vue');
+ Util::addSharedModule('core', 'shared-nextcloud-vue', '@nextcloud/vue');
+
  if ($event->getResponse()->getRenderAs() === TemplateResponse::RENDER_AS_USER) {
  // Making sure to inject just after core
  Util::addScript('core', 'unsupported-browser-redirect');

core/src/modules/nextcloud-vue.ts

@@ -0,0 +1 @@
+export * from '@nextcloud/vue'

core/src/modules/vue.ts

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+
+export * from 'vue'
+export default Vue

lib/private/TemplateLayout.php

@@ -274,6 +274,14 @@ public function __construct($renderAs, $appId = '') {
  $this->append('jsfiles', $web.'/'.$file . $this->getVersionHashSuffix());
  }
 
+ $jsModules = array_map(function (string $path) {
+ $info = end(self::findJavascriptFiles([$path]));
+ $web = $info[1];
+ $file = $info[2];
+ return $web . '/' . $file . $this->getVersionHashSuffix();
+ }, Util::getSharedModules());
+ $this->assign('jsmodules', $jsModules);
+
  try {
  $pathInfo = \OC::$server->getRequest()->getPathInfo();
  } catch (\Exception $e) {

lib/private/legacy/template/functions.php

@@ -80,10 +80,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";
@@ -100,11 +100,16 @@ 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) {
+ if (!empty($obj['jsmodules'])) {
+ emit_script_tag('', json_encode(['imports' => $obj['jsmodules']]), 'importmap');
+ }
+
  foreach ($obj['jsfiles'] as $jsfile) {
  $fileName = explode('?', $jsfile, 2)[0];
  $type = str_ends_with($fileName, '.mjs') ? 'module' : '';
  emit_script_tag($jsfile, '', $type);
  }
+
  if (!empty($obj['inline_ocjs'])) {
  emit_script_tag('', $obj['inline_ocjs']);
  }

lib/public/Util.php

@@ -63,6 +63,7 @@ class Util {
  private static array $scriptsInit = [];
  private static array $scripts = [];
  private static array $scriptDeps = [];
+ private static array $sharedModules = [];
 
  /**
  * get the current installed version of Nextcloud
@@ -206,6 +207,34 @@ public static function addScript(string $application, string $file = null, strin
  }
  }
 
+ /**
+ * Provide a shared JavaScript module
+ * Apps - if using this - should only provide their own API packages not external dependencies as this can conflict with server core.
+ *
+ * @param string $application The application where to look for the entry point (see `addScript`)
+ * @param string $file The JavaScript entry point file name (see `addScript`)
+ * @param string $module The modul name
+ * @since 29.0.0
+ */
+ public static function addSharedModule(string $application, string $file, string $module): void {
+ if (!empty($application)) {
+ $path = "$application/js/$file";
+ } else {
+ $path = "js/$file";
+ }
+
+ self::$sharedModules[$module] = $path;
+ }
+
+ /**
+ * Get all shared JavaScript modules
+ *
+ * @since 29.0.0
+ */
+ public static function getSharedModules(): array {
+ return self::$sharedModules;
+ }
+
  /**
  * Return the list of scripts injected to the page
  *

server.modules.mjs

@@ -23,7 +23,7 @@
 import { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
 
-const __dirname = import.meta.dirname ?? dirname(fileURLToPath(import.meta.url))
+const __dirname = globalThis?.__dirname ?? import.meta.dirname ?? dirname(fileURLToPath(import.meta.url))
 
 export default {
  comments: {
@@ -32,6 +32,8 @@ export default {
  init: join(__dirname, 'apps/comments/src', 'init.ts'),
  },
  core: {
+ 'shared-vue': join(__dirname, 'core/src', 'modules/vue.ts'),
+ 'shared-nextcloud-vue': join(__dirname, 'core/src', 'modules/nextcloud-vue.ts'),
  backgroundjobs: join(__dirname, 'core/src', 'cron.ts'),
  files_client: join(__dirname, 'core/src', 'files/client.js'),
  files_fileinfo: join(__dirname, 'core/src', 'files/fileinfo.js'),

vite.config.mjs

@@ -24,6 +24,7 @@ export default createAppConfig(
  build: {
  cssCodeSplit: false,
  rollupOptions: {
+ preserveEntrySignatures: 'allow-extension',
  output: {
  chunkFileNames: (info) => info.name.match(/core-common/) ? 'dist/core-common.mjs' : 'dist/chunks/[name]-[hash].mjs',
  entryFileNames: 'dist/[name].mjs',