Plugins: Bump SystemJS to 6.14.2 (#70068)

* chore(plugins): bump systemjs to latest version * refactor(plugins): switch runtime over to use latest systemjs, add typings * refactor(plugins): use latest systemjs APIs for runtime dependency resolution * refactor(plugins): return valid urls from backend for latest systemjs import to work * revert(plugins): remove cfg from assetpath in favour of relative paths * fix(plugins): useDefault for systemjs deps to solve undefined errors * feat(plugins): add basic support for loading plugins via CDN * fix(plugins): load nested plugins with latest systemjs * feat(plugins): add back ability to transform plugin src for cdns * feat(plugins): get caching for module.js working, clean up * refactor(plugin_loader): create buildImportMap fn and more clean up * refactor(angularapp): use buildImportMap for dependencies and clean up * test(plugin_loader): fix failing test due to systemjs update * test(jest): mock systemjs amd extra in tests to prevent it breaking tests * chore(plugins): remove systemjs module-types extra, already included with system * fix(plugins): update key for invalidating cached plugins * fix: move systemjs amd define to another global so monaco can load * refactor(plugins): clean up cache buster and tests * chore(plugins): remove debug * refactor(plugins): move systemjs define to keep global cleaner * fix(plugins): set useDefault so system modules lodash references dont fail * feat(plugins): hook systemjs onload so stylesheets are applied to the dom * refactor(plugins): wrap amd formatted plugins in iife to prevent define collision * feat(plugins): support system module format for legacy plugins * test(plugincachebuster): update tests to match latest implementation * test(plugins-loader): fix up tests post module property change * fix test * Update pkg/plugins/manager/loader/assetpath/assetpath.go Co-authored-by: Will Browne <wbrowne@users.noreply.github.com> * chore(plugin_loader): remove stray import from merge conflict * Revert "Update pkg/plugins/manager/loader/assetpath/assetpath.go" This reverts commit 0df57d1cf20f49c22c93369001c70aae46a97c42. * fix(plugin_loader): set use default for shared plugin dependencies * refactor(plugins): use leading slash for Module and BaseUrl * fix(plugins): fix resolve appending extension to cache query param * refactor(plugins): align baseurl and module paths * refactor(plugins): update builtInPlugins keys to match naming convention * refactor(plugins): minor loader clean up, fix up types * test(plugins): fix failing tests * refactor(plugins): rename cache buster systemjs plugin to cache * refactor(plugins): separate plugin_loader into smaller files * chore(plugins): clean up plugin_loader types * chore(plugin_sandbox): fix typescript error * chore(npm): remove unplug debug and pin systemjs to 6.14.1 * refactor(plugins-cdn): update loaders to use absolute module url from backend * fix(plugins): escape period in systemjs module regex * chore(plugins): delete redundant systemjs plugins * refactor(plugin_loader): move hooks into own file, add types * test(plugins): add tests for systemjs loader hooks * chore(plugins): rename systemjshooks file * chore(plugins): remove redundant systemjs cdn backend code * fix(plugins): handle loading with config.appSubUrl * chore(plugins): delete redundant plugin-cdn angular code * test(plugins): fix failing systemjs test missing pluginsCDNBaseUrl * refactor(plugins): backend provides base and module properties with AppSubUrl * fix(plugins): consider AppSubUrl for plugin logos * fix(plugins): use isHostedOnCDN util when checking for cdn hosted plugins * add new appSubURL field to config * refactor relative URL func * fix path for core app * refactor asset path input * fix(plugins): catch errors in loadPluginCss * feat(plugins-cdn): selectively transform sourceMapURL * re-add deleted test case * chore(plugins): bump to latest systemjs@6.14.2 * feat(plugins): add systemjs-cjs-extra for loading commonjs plugins --------- Co-authored-by: Will Browne <will.browne@grafana.com> Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>
2025-08-06 03:19:30 +08:00 · 2023-08-31 15:45:44 +02:00
parent b2f7476bb4
commit 62821c69b3
49 changed files with 1155 additions and 887 deletions
--- a/public/app/features/plugins/loader/systemjsHooks.ts
+++ b/public/app/features/plugins/loader/systemjsHooks.ts
@ -0,0 +1,96 @@
+import { config, SystemJS } from '@grafana/runtime';
+
+import { transformPluginSourceForCDN } from '../cdn/utils';
+
+import { resolveWithCache } from './cache';
+import {
+  LOAD_PLUGIN_CSS_REGEX,
+  JS_CONTENT_TYPE_REGEX,
+  IS_SYSTEM_MODULE_REGEX,
+  SHARED_DEPENDENCY_PREFIX,
+  ENDS_WITH_FILE_EXTENSION_REGEX,
+} from './constants';
+import { SystemJSWithLoaderHooks } from './types';
+import { isHostedOnCDN } from './utils';
+
+export async function decorateSystemJSFetch(
+  systemJSFetch: SystemJSWithLoaderHooks['fetch'],
+  url: string,
+  options?: Record<string, unknown>
+) {
+  const res = await systemJSFetch(url, options);
+  const contentType = res.headers.get('content-type') || '';
+
+  if (JS_CONTENT_TYPE_REGEX.test(contentType)) {
+    const source = await res.text();
+    let transformedSrc = source;
+    if (!IS_SYSTEM_MODULE_REGEX.test(transformedSrc)) {
+      transformedSrc = preventAMDLoaderCollision(source);
+    }
+
+    // JS files on the CDN need their asset paths transformed in the source
+    if (isHostedOnCDN(res.url)) {
+      const cdnTransformedSrc = transformPluginSourceForCDN({ url: res.url, source: transformedSrc });
+      return new Response(new Blob([cdnTransformedSrc], { type: 'text/javascript' }));
+    }
+
+    return new Response(new Blob([transformedSrc], { type: 'text/javascript' }));
+  }
+  return res;
+}
+
+export function decorateSystemJSResolve(
+  this: SystemJSWithLoaderHooks,
+  originalResolve: SystemJSWithLoaderHooks['resolve'],
+  id: string,
+  parentUrl?: string
+) {
+  const isFileSystemModule = id.endsWith('module.js') && !isHostedOnCDN(id);
+
+  try {
+    const url = originalResolve.apply(this, [id, parentUrl]);
+    const cleanedUrl = getBackWardsCompatibleUrl(url);
+    // Add a cache query param for filesystem module.js requests
+    // CDN hosted plugins contain the version in the path so skip
+    return isFileSystemModule ? resolveWithCache(cleanedUrl) : cleanedUrl;
+  } catch (err) {
+    // Provide fallback for old plugins that use `loadPluginCss` to load theme styles
+    // Only affect plugins on the filesystem.
+    if (LOAD_PLUGIN_CSS_REGEX.test(id)) {
+      return `${config.appSubUrl ?? ''}/public/${id}`;
+    }
+    console.log(`SystemJS: failed to resolve '${id}'`);
+    return id;
+  }
+}
+
+export function decorateSystemJsOnload(err: unknown, id: string) {
+  if (id.endsWith('.css') && !err) {
+    const module = SystemJS.get(id);
+    const styles = module?.default;
+    if (styles) {
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
+    }
+  }
+}
+
+// This function handles the following legacy SystemJS functionality:
+// - strips legacy loader wildcard from urls
+// - support config.defaultExtension for System.register deps that lack an extension (e.g. './my_ctrl')
+function getBackWardsCompatibleUrl(url: string) {
+  if (url.endsWith('!')) {
+    url = url.slice(0, -1);
+  }
+  const shouldAddDefaultExtension =
+    !url.startsWith(`${SHARED_DEPENDENCY_PREFIX}:`) && !ENDS_WITH_FILE_EXTENSION_REGEX.test(url);
+
+  return shouldAddDefaultExtension ? url + '.js' : url;
+}
+
+// This transform prevents a conflict between systemjs and requirejs which Monaco Editor
+// depends on. See packages/grafana-runtime/src/utils/plugin.ts for more.
+function preventAMDLoaderCollision(source: string) {
+  return `(function(define) {
+  ${source}
+})(window.__grafana_amd_define);`;
+}