#bootstrap

Used to start and mount App, usually without manual calls. This API is only required when using Custom App.

#Usage

import ReactDOM from 'react-dom/client';
import { bootstrap } from '@modern-js/runtime';

bootstrap(App, 'root', undefined, ReactDOM);

#Function Signature

type BootStrap<T = unknown> = (
  App: React.ComponentType,
  id: string | HTMLElement | RuntimeContext,
  root?: any,
  ReactDOM?: {
    render?: Renderer;
    hydrate?: Renderer;
    createRoot?: typeof createRoot;
    hydrateRoot?: typeof hydrateRoot;
  },
) => Promise<T>;

#Input

• AppComponent: reactElement instance created by createApp.
• rootId: DOM root element id to mount，like "root".
• root: ReactDOM.create the return value, which is used in the scenario where the root needs to destroy the component outside the bootstrap function.
• ReactDOM: ReactDOM object for distinguishing between React 18 and React 17 APIs.

#Example

import ReactDOM from 'react-dom/client';
import { createApp, bootstrap } from '@modern-js/runtime';

function App() {
  return <div>Hello Modern.js</div>;
}

const WrappedApp = createApp({
  // customized plugin
  plugins: [customPlugin()],
})(App);

bootstrap(WrappedApp, 'root', undefined, ReactDOM);

declare module '@modern-js/runtime/plugins';