import App from './App' ; import { Provider } from './plugin' ; import { PluginUtils } from './plugin/vendor/pluginUtils' ; import { PlaygroundPlugin } from './plugin/vendor/playground' ; const React = window . react ; const ReactDOM = window . reactDOM ; const ID = 'tsplay_short' ; const DISPLAY_NAME = 'Link Shortener' ; function makePlugin ( utils ) { const customPlugin = { id : ID , displayName : DISPLAY_NAME , didMount ( sandbox , container ) { const initialContainerObject = { ref : container , width : container . clientWidth , height : container . clientHeight , } ; ReactDOM . render ( < Provider sandbox = { sandbox } container = { initialContainerObject } utils = { utils } > < App /> < /Provider>, container); } , modelChanged ( _ , model ) { createCustomEvent ( 'modelChanged' , model ) ; } , modelChangedDebounce ( _ , model ) { createCustomEvent ( 'modelChangedDebounce' , model ) ; } , willUnmount ( _ , container ) { ReactDOM . unmountComponentAtNode ( container ) ; } , } ; function createCustomEvent ( name , model ) { const event = new CustomEvent ( name , { detail : { model } } ) ; window . dispatchEvent ( event ) ; } return customPlugin ; } export default makePlugin ;