import { Meta, Props } from '@storybook/addon-docs/blocks';

<Meta title="APIs|AppRegistry" />

# AppRegistry

AppRegistry is the control point for registering, running, prerendering, and
unmounting all apps. App root components should register themselves with
`AppRegistry.registerComponent`. Apps can be run by invoking
`AppRegistry.runApplication`.

## Methods

### getAppKeys()

Returns an array of all registered app keys

```js
const appKeys = AppRegistry.getAppKeys();
```

### getApplication(appKey, appParams)

A web-only method for server-side rendering to HTML and CSS. It returns an
object containing the given application's element and a function to get styles
once the element is rendered.

Additional props can be passed to the `getStyleElement` function, e.g., your CSP
policy may require a `nonce` to be set on style elements.

```js
const appKey = 'MyApp';
const appParams = { ... };
const { element, getStyleElement } = AppRegistry.getApplication(appKey, appParams);
```

### registerComponent(appKey, getComponent)

Register a component provider under the given appKey.

```js
const appKey = 'MyApp';
const getComponent = () => App;
AppRegistry.registerComponent(appKey, getComponent)
```

### registerConfig(config)

Register multiple applications. AppConfig type is:

```js
type AppConfig = {
  appKey: string;
  component: ComponentProvider;
  run?: function
}

const config = [{
  appKey: 'FirstApp',
  component: () => FirstApp
}, {
  appKey: 'SecondApp',
  component: () => SecondApp
}];
AppRegistry.registerConfig(config)
```

### registerRunnable(appKey, run)

Register a custom render function for an application. The function will receive
the `appParameters` passed to `runApplication`.

```js
AppRegistry.registerRunnable('MyApp', (appParams) => { ... });
```

### runApplication(appKey, appParams)

Runs the application that was registered under `appKey`. The `appParameters`
must include the `rootTag` into which the application is rendered, and
optionally any `initialProps` or render callback. If the client should hydrate
server-rendered HTML, set `hydrate` to `true`.

```js
AppRegistry.runApplication('MyApp', {
  callback: () => { console.log('React rendering has finished') },
  hydrate: true,
  initialProps: {},
  rootTag: document.getElementById('react-root'),
})
```

### setComponentProviderInstrumentationHook(componentProvider)

```js
type setComponentProviderInstrumentationHook = (componentProvider: func) => Component;
```

### setWrapperComponentProvider(appParams)

```js
type setWrapperComponentProvider = (appParameters: object) => Component;
```

### unmountApplicationComponentAtRootTag(rootTag)

To "stop" an application when a view should be destroyed, call
`AppRegistry.unmountApplicationComponentAtRootTag` with the `rootTag` that was passed
into `runApplication`.
