Embedding ReactPy via Template Tags

[Archmonger]

Current Situation

Currently, users are expected to manually construct the component mount HTML needed to embed IDOM into their projects. This is results in poor usability, and even worse, it can very easily cause server/client version mismatches.

Proposed Actions

We need to increase the convenience embedding ReactPy into existing projects, and document this as the primary way of using IDOM

For any web framework that supports HTML templating, we really should use a system identical to that used on ReactPy-Django.

The template tag source code will look something like this

{% load static %}
<div id="{{ idom_mount_uuid }}" class="{{ class }}"></div>
<script type="module" crossorigin="anonymous">
  import { mountViewToElement } from "{% static 'django_idom/client.js' %}";
  const mountPoint = document.getElementById("{{ idom_mount_uuid }}");
  mountViewToElement(
    mountPoint,
    "{{ idom_websocket_url }}",
    "{{ idom_web_modules_url }}",
    "{{ idom_ws_max_reconnect_timeout }}",
    "{{ idom_component_id }}",
    "{{ idom_component_params }}"
  );
</script>

We will probably rely on the jinja2 simple tags library.

To be framework agnostic, the static URL will probably need to be set via ReactPy's python config.

[Archmonger]

Not really sure if this belongs in v1 or v2. Could go either way.

IDOM is technically usable without this, but only Django-IDOM feels convenient to develop in.

We did say v2 is for "niceities" though, so based on that logic this is a v2 task.