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>

packages/grafana-runtime/package.json

@@ -44,7 +44,8 @@
     "history": "4.10.1",
     "lodash": "4.17.21",
     "rxjs": "7.8.1",
-    "systemjs": "0.20.19",
+    "systemjs": "6.14.2",
+    "systemjs-cjs-extra": "0.1.0",
     "tslib": "2.6.0"
   },
   "devDependencies": {
@@ -60,7 +61,7 @@
     "@types/lodash": "4.14.195",
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
-    "@types/systemjs": "^0.20.6",
+    "@types/systemjs": "6.13.1",
     "esbuild": "0.18.12",
     "lodash": "4.17.21",
     "react": "18.2.0",

packages/grafana-runtime/src/utils/plugin.ts

@@ -1,12 +1,13 @@
-// @ts-ignore
-import System from 'systemjs/dist/system.js';
+import 'systemjs/dist/system';
+// Add ability to load plugins bundled as AMD format
+import 'systemjs/dist/extras/amd';
+// Add ability to load plugins bundled as CJS format
+import 'systemjs-cjs-extra';
 
 import { PanelPlugin } from '@grafana/data';
 
 import { config } from '../config';
 
-// @ts-ignore
-
 /**
  * Option to specify a plugin css that should be applied for the dark
  * and the light theme.
@@ -21,7 +22,7 @@ export interface PluginCssOptions {
 /**
  * @internal
  */
-export const SystemJS = System;
+export const SystemJS = window.System;
 
 /**
  * Use this to load css for a Grafana plugin by specifying a {@link PluginCssOptions}
@@ -30,9 +31,13 @@ export const SystemJS = System;
  * @param options - plugin styling for light and dark theme.
  * @public
  */
-export function loadPluginCss(options: PluginCssOptions): Promise<any> {
-  const theme = config.bootData.user.lightTheme ? options.light : options.dark;
-  return SystemJS.import(`${theme}!css`);
+export async function loadPluginCss(options: PluginCssOptions): Promise<any> {
+  try {
+    const cssPath = config.bootData.user.theme === 'light' ? options.light : options.dark;
+    return await SystemJS.import(cssPath);
+  } catch (err) {
+    console.error(err);
+  }
 }
 
 interface PluginImportUtils {
@@ -57,3 +62,11 @@ export function getPluginImportUtils(): PluginImportUtils {
 
   return pluginImportUtils;
 }
+
+// Grafana relies on RequireJS for Monaco Editor to load.
+// The SystemJS AMD extra creates a global define which causes RequireJS to silently bail.
+// Here we move and reset global define so Monaco Editor loader script continues to work.
+// @ts-ignore
+window.__grafana_amd_define = window.define;
+// @ts-ignore
+window.define = undefined;