Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Embedding ReactPy via Template Tags #653

Copy link
Copy link
Closed
@Archmonger

Description

@Archmonger
Issue body actions

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    priority-3-lowMay be resolved one any timeline.May be resolved one any timeline.type-docsAbout changes and updates to documentationAbout changes and updates to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.