Convert the React bootloader to TypeScript

[dem4ron]

This PR turns react-bootloader.jsx into react-bootloader.tsx in utils.

[dem4ron]

I couldn't find @types for turbo, so inferred this from its usage.

[dem4ron]

Once updated to React 18, hopefully I can get rid of the any here

[dem4ron]

changed all

 if (!parentElement) {
    parentElement = document.body
  }

to default parameters

[ErikSchierboom]

Isn't that changing the behavior though? Previously, these calls would end up with parentElement being set to document.body, but they won't anymore:

renderComponents(null, ...)
renderComponents(undefined, ...)

[ErikSchierboom]

@dem4ron Did you see this comment?

[dem4ron]

In our case this doesn't change the behaviour, because we don't pass in falsy values.
I made sure things wouldn't fail, by passing in a default parameter a level above too, which used to be simply undefined

- const renderThings = (parentElement) => {
+ const renderThings = (parentElement = document.body) => {
    renderComponents(parentElement, mappings)
    renderTooltips(parentElement, mappings)
  }

  // This adds rendering for all future turbo clicks
  document.addEventListener('turbo:load', () => {
    renderThings()
  })
  ...

Another place where renderComponents is used is in LazyTippy.tsx:

export const LazyTippy = (props: LazyTippyProps): JSX.Element => {
  const { renderReactComponents, ...tippyProps } = props
  const [mounted, setMounted] = React.useState(false)

  const lazyPlugin = {
    fn: () => ({
      onMount: () => setMounted(true),
      onHidden: () => setMounted(false),
      onAfterUpdate: (instance: Instance) => {
        if (renderReactComponents) {
          renderComponents(instance.popper, mappings)
        }
      },
    }),
  }

In the worst-case scenario here, the value would be undefined too

On the other hand - given how mission critical this code is - I'm leaning towards reverting these changes to the input validation approach, because that is significantly more robust.

[dem4ron]

But here:

  const renderThings = (parentElement = document.body) => {

    renderComponents(parentElement, mappings)
    renderTooltips(parentElement, mappings)
  }

I'd just pass in document.body:

 const renderThings = () => {

  renderComponents(document.body, mappings)
  renderTooltips(document.body, mappings)
}

export function initReact(mappings: Mappings): void {
const renderThings = () => {

  renderComponents(document.body, mappings)
  renderTooltips(document.body, mappings)
}

// This adds rendering for all future turbo clicks
document.addEventListener('turbo:load', () => {
  renderThings()
})

// This renders if turbo has already finished at the
// point at which this calls. See packs/core.tsx
if (window.turboLoaded) {
  renderThings()
}
}

[ErikSchierboom]

Isn't that changing the behavior though? Previously, these calls would end up with parentElement being set to document.body, but they won't anymore:

renderComponents(null, ...)
renderComponents(undefined, ...)

[dem4ron]

@ErikSchierboom here