From 3c359376e149d8382962e71d0af5a2887b02c9ea Mon Sep 17 00:00:00 2001 From: Jack Westbrook Date: Thu, 21 Mar 2024 09:22:35 +0100 Subject: [PATCH] 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 | 2 ++ packages/grafana-runtime/package.json | 2 -- packages/grafana-runtime/src/index.ts | 8 +------- packages/grafana-runtime/src/utils/plugin.ts | 13 +------------ public/app/angular/AngularApp.ts | 3 ++- public/app/features/plugins/loader/systemjs.ts | 7 +++++++ .../features/plugins/loader/systemjsHooks.test.ts | 3 ++- public/app/features/plugins/loader/systemjsHooks.ts | 3 ++- public/app/features/plugins/loader/utils.ts | 3 ++- public/app/features/plugins/plugin_loader.ts | 5 ++++- .../features/plugins/tests/plugin_loader.test.ts | 2 +- yarn.lock | 4 ++-- 12 files changed, 26 insertions(+), 29 deletions(-) create mode 100644 public/app/features/plugins/loader/systemjs.ts diff --git a/package.json b/package.json index 1ad6228405f..c1532f0a8dc 100644 --- a/package.json +++ b/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", diff --git a/packages/grafana-runtime/package.json b/packages/grafana-runtime/package.json index e3dc5034d64..4b40aa7e34b 100644 --- a/packages/grafana-runtime/package.json +++ b/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": { diff --git a/packages/grafana-runtime/src/index.ts b/packages/grafana-runtime/src/index.ts index fe98d4ab619..4061ac76f2f 100644 --- a/packages/grafana-runtime/src/index.ts +++ b/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'; diff --git a/packages/grafana-runtime/src/utils/plugin.ts b/packages/grafana-runtime/src/utils/plugin.ts index 9a368e84968..e3ff8ff026a 100644 --- a/packages/grafana-runtime/src/utils/plugin.ts +++ b/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 { 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); } diff --git a/public/app/angular/AngularApp.ts b/public/app/angular/AngularApp.ts index 264a891fb1b..d0f2bcff4d8 100644 --- a/public/app/angular/AngularApp.ts +++ b/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'; diff --git a/public/app/features/plugins/loader/systemjs.ts b/public/app/features/plugins/loader/systemjs.ts new file mode 100644 index 00000000000..8b9c40fe749 --- /dev/null +++ b/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; diff --git a/public/app/features/plugins/loader/systemjsHooks.test.ts b/public/app/features/plugins/loader/systemjsHooks.test.ts index a0da31252ab..da9653661e4 100644 --- a/public/app/features/plugins/loader/systemjsHooks.test.ts +++ b/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'; diff --git a/public/app/features/plugins/loader/systemjsHooks.ts b/public/app/features/plugins/loader/systemjsHooks.ts index fd8ac2e10ee..9a994c19ce6 100644 --- a/public/app/features/plugins/loader/systemjsHooks.ts +++ b/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'; diff --git a/public/app/features/plugins/loader/utils.ts b/public/app/features/plugins/loader/utils.ts index bfc44bd44d8..ddff73cab09 100644 --- a/public/app/features/plugins/loader/utils.ts +++ b/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) { return Object.keys(importMap).reduce>((acc, key) => { diff --git a/public/app/features/plugins/plugin_loader.ts b/public/app/features/plugins/plugin_loader.ts index 0a2172f0b9d..0593d1e3eea 100644 --- a/public/app/features/plugins/plugin_loader.ts +++ b/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; diff --git a/public/app/features/plugins/tests/plugin_loader.test.ts b/public/app/features/plugins/tests/plugin_loader.test.ts index a5800883dca..e81e833966a 100644 --- a/public/app/features/plugins/tests/plugin_loader.test.ts +++ b/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 { diff --git a/yarn.lock b/yarn.lock index 5eae58eacf5..cce1ba0e1d4 100644 --- a/yarn.lock +++ b/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"