[CoreRenderingService] Add dev docs (#218630)

## Summary

Epic: https://github.com/elastic/kibana-team/issues/1435

New Dev Docs for Core Rendering Service
<img width="902" alt="image"
src="https://github.com/user-attachments/assets/aa1b8bdb-751d-4ab1-a0e1-8bf62c1c8d96"
/>

---------

Co-authored-by: Anton Dosov <dosantappdev@gmail.com>
Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>
This commit is contained in:
Tim Sullivan 2025-04-23 15:08:38 -07:00 committed by GitHub
parent ce705f65ee
commit c764851f33
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 42 additions and 3 deletions

View file

@ -56,6 +56,11 @@ layout: landing
title: 'Kibana Page Template',
description: "Learn how to use Kibana Page Template for your app's page layout",
},
{
pageId: 'kibDevRenderingService',
title: 'Core Rendering Service',
description: 'Learn how to provide the Kibana global context in your React apps',
},
{
pageId: 'kibDevReactKibanaContext',
title: 'Kibana React Contexts',

View file

@ -0,0 +1,30 @@
---
id: kibDevRenderingService
slug: /kibana-dev-docs/rendering-service
title: Core Rendering Service
description: This a service provided by SharedUX which abstracts the dependencies needed for a fully-loaded React context.
tags: ['shared-ux', 'core', 'react', 'context']
date: 2025-04-25
---
## Description
### Custom React elements require global context
Kibana's browser-side architecture is an application composed of many different points where custom React elements can be mounted onto a DOM container. These elements have a self-contained component tree, this process is often described as an "ad-hoc" render. A self-contained component tree has no awareness of global context or stateful core services, such as i18n and theming which are often needed. That is why we use shared context providers.
### Adding the global context
The public contract Core Rendering Service offers a wrapper to add context to your React elements. The wrapper uses its own internal state to handle the dependencies needed for each internal context provider, so developers do not have to worry about passing many services from the CoreStart contract. There is only a single service to pass down, the Core Rendering Service, which is available in the CoreStart contract as `core.rendering`.
## Example
This React 16 example adds context from the Core Rendering Service to the `MyApplication` component, and then mounts it to the DOM.
```tsx
const renderApp = ({ core, targetDomElement }: { core: CoreStart; targetDomElement: HTMLElement; }) => {
ReactDOM.render(core.rendering.addContext(<MyApplication />), targetDomElement);
return () => ReactDOM.unmountComponentAtNode(targetDomElement);
};
```
## See Also
- <DocLink id="kibDevReactKibanaContext" />

View file

@ -7,15 +7,19 @@ tags: ['kibana', 'dev','shared-ux', 'react', 'context']
date: 2023-07-25
---
## Notes:
- This document describes the **legacy** React context providers that make available the common services needed for internal components.
- A replacement service is available from SharedUX that abstracts the dependencies needed for a fully-loaded React context: <DocLink id="kibDevRenderingService" />.
## Description
Kibana uses React Context to manage several global states. Those states have been divided into several reusable components in relevant packages.
![Architecture Diagram](./assets/diagram.png)
- `KibanaRootContextProvider` - A root context provider for Kibana. This is the top level context provider that wraps the entire application. It is responsible for initializing all of the other contexts and providing them to the application.
- `KibanaRenderContextProvider` - A render context provider for Kibana. This context is designed to be used with ad-hoc renders of React components, (usually with `ReactDOM.render`).
- `KibanaThemeContextProvider` - A theme context provider for Kibana. A corollary to EUI's `EuiThemeProvider`, it uses Kibana services to ensure the EUI Theme is customized correctly.
- <DocLink id="react/context/root" text="`KibanaRootContextProvider`" /> - A root context provider for Kibana. This is the top level context provider that wraps the entire application. It is responsible for initializing all of the other contexts and providing them to the application.
- <DocLink id="react/context/render" text="`KibanaRenderContextProvider`" /> - A render context provider for Kibana. This context is designed to be used with ad-hoc renders of React components, (usually with `ReactDOM.render`).
- <DocLink id="react/context/theme" text="`KibanaThemeContextProvider`" /> - A theme context provider for Kibana. A corollary to EUI's `EuiThemeProvider`, it uses Kibana services to ensure the EUI Theme is customized correctly.
## Deprecated Context Providers