Grafana/Runtime: Remove SystemJS export (#84561)

* feat(systemjs): move systemjs to grafana core and stop exporting from runtime

* feat(plugins): move systemjs to own file, update imports

* chore(plugins): call systemjs directly from window as ref can be undefined

* chore(plugins): make sure systemjs is imported before its shared dependencies

* chore(systemjs): move dependency to root package.json

package.json

@@ -401,6 +401,8 @@
     "slate-plain-serializer": "0.7.13",
     "slate-react": "0.22.10",
     "symbol-observable": "4.0.0",
+    "systemjs": "6.14.3",
+    "systemjs-cjs-extra": "0.2.0",
     "tether-drop": "https://github.com/torkelo/drop",
     "tinycolor2": "1.6.0",
     "tslib": "2.6.2",

packages/grafana-runtime/package.json

@@ -45,8 +45,6 @@
     "history": "4.10.1",
     "lodash": "4.17.21",
     "rxjs": "7.8.1",
-    "systemjs": "6.14.3",
-    "systemjs-cjs-extra": "0.2.0",
     "tslib": "2.6.2"
   },
   "devDependencies": {

packages/grafana-runtime/src/index.ts

@@ -6,13 +6,7 @@
 export * from './services';
 export * from './config';
 export * from './analytics/types';
-export {
-  loadPluginCss,
-  SystemJS,
-  type PluginCssOptions,
-  setPluginImportUtils,
-  getPluginImportUtils,
-} from './utils/plugin';
+export { loadPluginCss, type PluginCssOptions, setPluginImportUtils, getPluginImportUtils } from './utils/plugin';
 export { reportMetaAnalytics, reportInteraction, reportPageview, reportExperimentView } from './analytics/utils';
 export { featureEnabled } from './utils/licensing';
 export { logInfo, logDebug, logWarning, logError, createMonitoringLogger } from './utils/logging';

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

@@ -1,9 +1,3 @@
-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';
@@ -19,11 +13,6 @@ export interface PluginCssOptions {
   dark: string;
 }
 
-/**
- * @internal
- */
-export const SystemJS = window.System;
-
 /**
  * Use this to load css for a Grafana plugin by specifying a {@link PluginCssOptions}
  * containing styling for the dark and the light theme.
@@ -34,7 +23,7 @@ export const SystemJS = window.System;
 export async function loadPluginCss(options: PluginCssOptions): Promise<System.Module | void> {
   try {
     const cssPath = config.bootData.user.theme === 'light' ? options.light : options.dark;
-    return SystemJS.import(cssPath);
+    return window.System.import(cssPath);
   } catch (err) {
     console.error(err);
   }

public/app/angular/AngularApp.ts

@@ -6,7 +6,7 @@ import 'angular-bindonce';
 import angular from 'angular'; // eslint-disable-line no-duplicate-imports
 import { extend } from 'lodash';
 
-import { getTemplateSrv, SystemJS } from '@grafana/runtime';
+import { getTemplateSrv } from '@grafana/runtime';
 import { coreModule, angularModules } from 'app/angular/core_module';
 import appEvents from 'app/core/app_events';
 import { config } from 'app/core/config';
@@ -14,6 +14,7 @@ import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { setAngularPanelReactWrapper } from 'app/features/plugins/importPanelPlugin';
+import { SystemJS } from 'app/features/plugins/loader/systemjs';
 import { buildImportMap } from 'app/features/plugins/loader/utils';
 import * as sdk from 'app/plugins/sdk';
 

public/app/features/plugins/loader/systemjs.ts

@@ -0,0 +1,7 @@
+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';
+
+export const SystemJS = window.System;

public/app/features/plugins/loader/systemjsHooks.test.ts

@@ -1,13 +1,14 @@
 // mock fetch for SystemJS
 import 'whatwg-fetch';
 
-import { SystemJS, config } from '@grafana/runtime';
+import { config } from '@grafana/runtime';
 
 jest.mock('./cache', () => ({
   resolveWithCache: (url: string) => `${url}?_cache=1234`,
 }));
 
 import { server } from './pluginLoader.mock';
+import { SystemJS } from './systemjs';
 import { decorateSystemJSFetch, decorateSystemJSResolve } from './systemjsHooks';
 import { SystemJSWithLoaderHooks } from './types';
 

public/app/features/plugins/loader/systemjsHooks.ts

@@ -1,9 +1,10 @@
-import { config, SystemJS } from '@grafana/runtime';
+import { config } from '@grafana/runtime';
 
 import { transformPluginSourceForCDN } from '../cdn/utils';
 
 import { resolveWithCache } from './cache';
 import { LOAD_PLUGIN_CSS_REGEX, JS_CONTENT_TYPE_REGEX, SHARED_DEPENDENCY_PREFIX } from './constants';
+import { SystemJS } from './systemjs';
 import { SystemJSWithLoaderHooks } from './types';
 import { isHostedOnCDN } from './utils';
 

public/app/features/plugins/loader/utils.ts

@@ -1,9 +1,10 @@
-import { SystemJS, config } from '@grafana/runtime';
+import { config } from '@grafana/runtime';
 
 import { sandboxPluginDependencies } from '../sandbox/plugin_dependencies';
 
 import { SHARED_DEPENDENCY_PREFIX } from './constants';
 import { trackPackageUsage } from './packageMetrics';
+import { SystemJS } from './systemjs';
 
 export function buildImportMap(importMap: Record<string, System.Module>) {
   return Object.keys(importMap).reduce<Record<string, string>>((acc, key) => {

public/app/features/plugins/plugin_loader.ts

@@ -6,13 +6,15 @@ import {
   DataSourcePluginMeta,
   PluginMeta,
 } from '@grafana/data';
-import { SystemJS } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
 
 import { GenericDataSourcePlugin } from '../datasources/types';
 
 import builtInPlugins from './built_in_plugins';
 import { registerPluginInCache } from './loader/cache';
+// SystemJS has to be imported before the sharedDependenciesMap
+import { SystemJS } from './loader/systemjs';
+// eslint-disable-next-line import/order
 import { sharedDependenciesMap } from './loader/sharedDependencies';
 import { decorateSystemJSFetch, decorateSystemJSResolve, decorateSystemJsOnload } from './loader/systemjsHooks';
 import { SystemJSWithLoaderHooks } from './loader/types';
@@ -21,6 +23,7 @@ import { importPluginModuleInSandbox } from './sandbox/sandbox_plugin_loader';
 import { isFrontendSandboxSupported } from './sandbox/utils';
 
 const imports = buildImportMap(sharedDependenciesMap);
+
 SystemJS.addImportMap({ imports });
 
 const systemJSPrototype: SystemJSWithLoaderHooks = SystemJS.constructor.prototype;

public/app/features/plugins/tests/plugin_loader.test.ts

@@ -10,9 +10,9 @@ jest.mock('app/core/core', () => {
 });
 
 import { AppPluginMeta, PluginMetaInfo, PluginType, AppPlugin } from '@grafana/data';
-import { SystemJS } from '@grafana/runtime';
 
 // Loaded after the `unmock` above
+import { SystemJS } from '../loader/systemjs';
 import { importAppPlugin } from '../plugin_loader';
 
 class MyCustomApp extends AppPlugin {

yarn.lock

@@ -4086,8 +4086,6 @@ __metadata:
     rollup-plugin-node-externals: "npm:^5.0.0"
     rollup-plugin-sourcemaps: "npm:0.6.3"
     rxjs: "npm:7.8.1"
-    systemjs: "npm:6.14.3"
-    systemjs-cjs-extra: "npm:0.2.0"
     tslib: "npm:2.6.2"
     typescript: "npm:5.3.3"
   peerDependencies:
@@ -18828,6 +18826,8 @@ __metadata:
     stylelint: "npm:16.2.1"
     stylelint-config-sass-guidelines: "npm:11.0.0"
     symbol-observable: "npm:4.0.0"
+    systemjs: "npm:6.14.3"
+    systemjs-cjs-extra: "npm:0.2.0"
     terser-webpack-plugin: "npm:5.3.10"
     testing-library-selector: "npm:0.3.1"
     tether-drop: "https://github.com/torkelo/drop"