import React from 'react'; import { CrossIframeDevTools } from './dev-tools'; import { MountPoint, fillMountPoint } from './mount-point'; import { popAssets, StoredAssets } from './stored-assets'; import { SsrStyles, removeSsrStyles } from './ssr-styles'; import { FullHeightStyle } from './full-height-style'; export const LOAD_EVENT = '_DOM_LOADED_'; export const ERROR_EVENT = '_ERROR_OCCURRED_'; export type Assets = Partial<{ /** page title */ title: string; /** js files to load */ js: string[]; /** css files to load */ css: string[]; /** raw css styles */ style: string[]; /** raw data to be stored in the dom. Use Html.popAssets to retrieve it from the dom */ json: Record; }>; export interface HtmlProps extends React.HtmlHTMLAttributes { withDevTools?: boolean; fullHeight?: boolean; assets?: Assets; ssr?: boolean; notifyParentOnLoad?: boolean; } const NotifyParentScript = () => ( ); /** html template for the main UI, when ssr is active */ export function Html({ assets = {}, withDevTools = false, fullHeight, ssr, children = , notifyParentOnLoad = true, ...rest }: HtmlProps) { return ( {assets.title || 'bit scope'} {ssr && } {fullHeight && } {withDevTools && } {assets.style?.map((x, idx) => )} {assets.css?.map((x, idx) => )} {notifyParentOnLoad && } {children} {assets.json && } {/* load scripts after showing the the whole html */} {assets.js?.map((x, idx) =>