diff --git a/package.json b/package.json index ffe32b14008..fb0b5330ba9 100644 --- a/package.json +++ b/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", diff --git a/packages/grafana-runtime/package.json b/packages/grafana-runtime/package.json index 9f329846da1..a811e9965aa 100644 --- a/packages/grafana-runtime/package.json +++ b/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", diff --git a/packages/grafana-runtime/src/index.ts b/packages/grafana-runtime/src/index.ts index 9ae0a899cec..10acfb3744e 100644 --- a/packages/grafana-runtime/src/index.ts +++ b/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'; diff --git a/packages/grafana-runtime/src/utils/plugin.ts b/packages/grafana-runtime/src/utils/plugin.ts index 8e1075dabb6..6e73829277a 100644 --- a/packages/grafana-runtime/src/utils/plugin.ts +++ b/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`); } } diff --git a/public/app/features/plugins/plugin_loader.test.ts b/public/app/features/plugins/plugin_loader.test.ts index b147e2b2801..e2abb5a5cb0 100644 --- a/public/app/features/plugins/plugin_loader.test.ts +++ b/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 () => { diff --git a/public/app/features/plugins/plugin_loader.ts b/public/app/features/plugins/plugin_loader.ts index c86c92077a1..fba6f71d061 100644 --- a/public/app/features/plugins/plugin_loader.ts +++ b/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 { if (builtIn) { return Promise.resolve(builtIn); } - return System.import(path); + return grafanaRuntime.SystemJS.import(path); } export function importDataSourcePlugin(meta: DataSourcePluginMeta): Promise> {