Repository navigation
Embedding ReactPy via Template Tags #653
Description
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.
Activity
[-]IDOM embed shortcuts for all supported frameworks[/-][+]Improve IDOM Embed ease of use[/+][-]Improve IDOM Embed ease of use[/-][+]Make embedding IDOM easier[/+]Archmonger commentedon Feb 10, 2022
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.
[-]Make embedding IDOM easier[/-][+]Embedding IDOM via Template Tags[/+]rmorshea commentedon Nov 5, 2022
Let's move this to v2 for now.
[-]Embedding IDOM via Template Tags[/-][+]Embedding ReactPy via Template Tags[/+]