Example hooks + React mounter for LiveView application

1_hooks.ts

export const SpaceLayoutEditor = {
  mounted() {
    // I use webpack chunks to reduce LiveView entry file size
    import(/* webpackChunkName: "space-layout-editor-lv" */ '../entry/space-layout-editor-lv').then((mounter) => {
      this.unmountComponent = mounter.default(this.el.id, {
        editorOpts: this.editorOpts()
      })
    }).catch(console.error)
  },

  destroyed() {
    if (!this.unmountComponent) {
      console.error('SpaceLayoutEditor unmountComponent not set')
      return
    }

    this.unmountComponent(this.el)
  },
}

2_mounter.ts

import { unmountComponentAtNode } from 'react-dom'

import { AppOpts } from '../space_editor/App'
import mountEditor from '../space_editor/mount'

export default function mount(id: string, opts: AppOpts) {
  mountEditor(id, opts)

  return (el: Element) => {
    if (!unmountComponentAtNode(el)) {
      console.warn('unmount failed', el)
    }
  }
}

3_App.tsx

import React from 'react'
import { render } from 'react-dom'

// This is just illustrating that you can include additional CSS in your App, just like you normally would
// Again, the application is self-contained as much as possible
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'

// It doesn't really matter what this App is. It's a plain ol' React component
import App from './App'

export default function mount(id: string, opts: any) {
  const rootElement = document.getElementById(id)

  render(
    <App {...opts} />,
    rootElement
  )
}