grafana/runtime: Expose SystemJS from @grafana/runtime (#17927)

In 4281344 the loadPluginCss util was migrated to @grafana/runtime package. This made SystemJS to fail loading the css files for a plugin. Root cause was that core and runtime used different SystemJS instances.

To solve the issue, I am exposing SystemJS from @grafana/runtime package to make sure we are always using the same instance. Also, the SystemJS dependency was moved to runtime.

package.json

@@ -109,8 +109,6 @@
     "sass-loader": "7.1.0",
     "sinon": "1.17.6",
     "style-loader": "0.23.1",
-    "systemjs": "0.20.19",
-    "systemjs-plugin-css": "0.1.37",
     "terser-webpack-plugin": "1.2.3",
     "ts-jest": "24.0.2",
     "ts-loader": "5.3.3",

packages/grafana-runtime/package.json

@@ -16,7 +16,10 @@
   },
   "author": "Grafana Labs",
   "license": "Apache-2.0",
-  "dependencies": {},
+  "dependencies": {
+    "systemjs": "0.20.19",
+    "systemjs-plugin-css": "0.1.37"
+  },
   "devDependencies": {
     "@types/systemjs": "^0.20.6",
     "awesome-typescript-loader": "^5.2.1",

packages/grafana-runtime/src/index.ts

@@ -1,3 +1,3 @@
 export * from './services';
 export * from './config';
-export { loadPluginCss } from './utils/plugin';
+export { loadPluginCss, SystemJS } from './utils/plugin';

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

@@ -1,17 +1,19 @@
 import { config } from '../config';
 
-/* tslint:disable:import-blacklist */
-import System from 'systemjs';
+// @ts-ignore
+import System from 'systemjs/dist/system.js';
 
 export interface PluginCssOptions {
   light: string;
   dark: string;
 }
 
+export const SystemJS = System;
+
 export function loadPluginCss(options: PluginCssOptions) {
   if (config.bootData.user.lightTheme) {
-    System.import(options.light + '!css');
+    SystemJS.import(`${options.light}!css`);
   } else {
-    System.import(options.dark + '!css');
+    SystemJS.import(`${options.dark}!css`);
   }
 }

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

@@ -13,9 +13,7 @@ jest.mock('app/core/core', () => {
   };
 });
 
-/* tslint:disable:import-blacklist */
-import System from 'systemjs/dist/system.js';
-
+import { SystemJS } from '@grafana/runtime';
 import { AppPluginMeta, PluginMetaInfo, PluginType, PluginIncludeType, AppPlugin } from '@grafana/ui';
 import { importAppPlugin } from './plugin_loader';
 
@@ -34,11 +32,11 @@ describe('Load App', () => {
   const modulePath = 'my/custom/plugin/module';
 
   beforeAll(() => {
-    System.set(modulePath, System.newModule({ plugin: app }));
+    SystemJS.set(modulePath, SystemJS.newModule({ plugin: app }));
   });
 
   afterAll(() => {
-    System.delete(modulePath);
+    SystemJS.delete(modulePath);
   });
 
   it('should call init and set meta', async () => {
@@ -52,7 +50,7 @@ describe('Load App', () => {
     };
 
     // Check that we mocked the import OK
-    const m = await System.import(modulePath);
+    const m = await SystemJS.import(modulePath);
     expect(m.plugin).toBe(app);
 
     const loaded = await importAppPlugin(meta);
@@ -79,11 +77,11 @@ describe('Load Legacy App', () => {
   const modulePath = 'my/custom/legacy/plugin/module';
 
   beforeAll(() => {
-    System.set(modulePath, System.newModule(app));
+    SystemJS.set(modulePath, SystemJS.newModule(app));
   });
 
   afterAll(() => {
-    System.delete(modulePath);
+    SystemJS.delete(modulePath);
   });
 
   it('should call init and set meta for legacy app', async () => {

public/app/features/plugins/plugin_loader.ts

@@ -1,8 +1,7 @@
-/* tslint:disable:import-blacklist */
-import System from 'systemjs/dist/system.js';
 import _ from 'lodash';
 import * as sdk from 'app/plugins/sdk';
 import kbn from 'app/core/utils/kbn';
+// tslint:disable:import-blacklist
 import moment from 'moment';
 import angular from 'angular';
 import jquery from 'jquery';
@@ -31,7 +30,6 @@ import * as d3 from 'd3';
 import * as grafanaData from '@grafana/data';
 import * as grafanaUI from '@grafana/ui';
 import * as grafanaRuntime from '@grafana/runtime';
-export { loadPluginCss } from '@grafana/runtime';
 
 // rxjs
 import { Observable, Subject } from 'rxjs';
@@ -41,9 +39,9 @@ const bust = `?_cache=${Date.now()}`;
 function locate(load) {
   return load.address + bust;
 }
-System.registry.set('plugin-loader', System.newModule({ locate: locate }));
+grafanaRuntime.SystemJS.registry.set('plugin-loader', grafanaRuntime.SystemJS.newModule({ locate: locate }));
 
-System.config({
+grafanaRuntime.SystemJS.config({
   baseURL: 'public',
   defaultExtension: 'js',
   packages: {
@@ -65,7 +63,7 @@ System.config({
 });
 
 function exposeToPlugin(name: string, component: any) {
-  System.registerDynamic(name, [], true, (require, exports, module) => {
+  grafanaRuntime.SystemJS.registerDynamic(name, [], true, (require, exports, module) => {
     module.exports = component;
   });
 }
@@ -161,7 +159,7 @@ export function importPluginModule(path: string): Promise<any> {
   if (builtIn) {
     return Promise.resolve(builtIn);
   }
-  return System.import(path);
+  return grafanaRuntime.SystemJS.import(path);
 }
 
 export function importDataSourcePlugin(meta: DataSourcePluginMeta): Promise<DataSourcePlugin<any>> {