diff --git a/docs/development/core/public/kibana-plugin-public.appmountparameters.appbasepath.md b/docs/development/core/public/kibana-plugin-public.appmountparameters.appbasepath.md index 31513bda2e879..a1544373ee698 100644 --- a/docs/development/core/public/kibana-plugin-public.appmountparameters.appbasepath.md +++ b/docs/development/core/public/kibana-plugin-public.appmountparameters.appbasepath.md @@ -22,9 +22,9 @@ export class MyPlugin implements Plugin { setup({ application }) { application.register({ id: 'my-app', - async mount(context, params) { + async mount(params) { const { renderApp } = await import('./application'); - return renderApp(context, params); + return renderApp(params); }, }); } @@ -38,7 +38,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter, Route } from 'react-router-dom'; -export renderApp = (context, { appBasePath, element }) => { +import { CoreStart, AppMountParams } from 'src/core/public'; +import { MyPluginDepsStart } from './plugin'; + +export renderApp = ({ appBasePath, element }: AppMountParams) => { ReactDOM.render( // pass `appBasePath` to `basename` diff --git a/src/core/CONVENTIONS.md b/src/core/CONVENTIONS.md index 786409614e6d9..18f82766bdbc1 100644 --- a/src/core/CONVENTIONS.md +++ b/src/core/CONVENTIONS.md @@ -130,16 +130,16 @@ leverage this pattern. import React from 'react'; import ReactDOM from 'react-dom'; -import { ApplicationMountContext } from '../../src/core/public'; +import { CoreStart, AppMountParams } from '../../src/core/public'; import { MyAppRoot } from './components/app.ts'; /** * This module will be loaded asynchronously to reduce the bundle size of your plugin's main bundle. */ -export const renderApp = (context: ApplicationMountContext, domElement: HTMLDivElement) => { - ReactDOM.render(, domElement); - return () => ReactDOM.unmountComponentAtNode(domElement); +export const renderApp = (core: CoreStart, deps: MyPluginDepsStart, { element, appBasePath }: AppMountParams) => { + ReactDOM.render(, element); + return () => ReactDOM.unmountComponentAtNode(element); } ``` @@ -152,10 +152,12 @@ export class MyPlugin implements Plugin { public setup(core) { core.application.register({ id: 'my-app', - async mount(context, domElement) { + async mount(params) { // Load application bundle const { renderApp } = await import('./application/my_app'); - return renderApp(context, domElement); + // Get start services + const [coreStart, depsStart] = core.getStartServices(); + return renderApp(coreStart, depsStart, params); } }); } diff --git a/src/core/public/application/types.ts b/src/core/public/application/types.ts index 72460b07900da..fd009066fc664 100644 --- a/src/core/public/application/types.ts +++ b/src/core/public/application/types.ts @@ -189,9 +189,9 @@ export interface AppMountParameters { * setup({ application }) { * application.register({ * id: 'my-app', - * async mount(context, params) { + * async mount(params) { * const { renderApp } = await import('./application'); - * return renderApp(context, params); + * return renderApp(params); * }, * }); * } @@ -204,7 +204,10 @@ export interface AppMountParameters { * import ReactDOM from 'react-dom'; * import { BrowserRouter, Route } from 'react-router-dom'; * - * export renderApp = (context, { appBasePath, element }) => { + * import { CoreStart, AppMountParams } from 'src/core/public'; + * import { MyPluginDepsStart } from './plugin'; + * + * export renderApp = ({ appBasePath, element }: AppMountParams) => { * ReactDOM.render( * // pass `appBasePath` to `basename` *