dependencies ¤

All code related to management of component dependencies (JS and CSS scripts)

Modules:

types –

Helper types for IDEs.

Classes:

ComponentDependencyMiddleware –

Middleware that inserts CSS/JS dependencies for all rendered

Functions:

render_dependencies –

Given a string that contains parts that were rendered by components,

ComponentDependencyMiddleware ¤

ComponentDependencyMiddleware(get_response: Callable[[HttpRequest], HttpResponse])

Middleware that inserts CSS/JS dependencies for all rendered components at points marked with template tags.

Source code in src/django_components/dependencies.py

def __init__(self, get_response: "Callable[[HttpRequest], HttpResponse]") -> None:
    self.get_response = get_response

    # NOTE: Required to work with async
    if iscoroutinefunction(self.get_response):
        markcoroutinefunction(self)

render_dependencies ¤

render_dependencies(content: TContent, type: RenderType = 'document') -> TContent

Given a string that contains parts that were rendered by components, this function inserts all used JS and CSS.

By default, the string is parsed as an HTML and: - CSS is inserted at the end of <head> (if present) - JS is inserted at the end of <body> (if present)

If you used {% component_js_dependencies %} or {% component_css_dependencies %}, then the JS and CSS will be inserted only at these locations.

Example:

def my_view(request):
    template = Template('''
        {% load components %}
        <!doctype html>
        <html>
            <head></head>
            <body>
                <h1>{{ table_name }}</h1>
                {% component "table" name=table_name / %}
            </body>
        </html>
    ''')

    html = template.render(
        Context({
            "table_name": request.GET["name"],
        })
    )

    # This inserts components' JS and CSS
    processed_html = render_dependencies(html)

    return HttpResponse(processed_html)

Source code in src/django_components/dependencies.py

def render_dependencies(content: TContent, type: RenderType = "document") -> TContent:
    """
    Given a string that contains parts that were rendered by components,
    this function inserts all used JS and CSS.

    By default, the string is parsed as an HTML and:
    - CSS is inserted at the end of `<head>` (if present)
    - JS is inserted at the end of `<body>` (if present)

    If you used `{% component_js_dependencies %}` or `{% component_css_dependencies %}`,
    then the JS and CSS will be inserted only at these locations.

    Example:
    ```python
    def my_view(request):
        template = Template('''
            {% load components %}
            <!doctype html>
            <html>
                <head></head>
                <body>
                    <h1>{{ table_name }}</h1>
                    {% component "table" name=table_name / %}
                </body>
            </html>
        ''')

        html = template.render(
            Context({
                "table_name": request.GET["name"],
            })
        )

        # This inserts components' JS and CSS
        processed_html = render_dependencies(html)

        return HttpResponse(processed_html)
    ```
    """
    is_safestring = isinstance(content, SafeString)

    if isinstance(content, str):
        content_ = content.encode()
    else:
        content_ = cast(bytes, content)

    content_, js_dependencies, css_dependencies = _process_dep_declarations(content_, type)

    # Replace the placeholders with the actual content
    did_find_js_placeholder = False
    did_find_css_placeholder = False

    def on_replace_match(match: "re.Match[bytes]") -> bytes:
        nonlocal did_find_css_placeholder
        nonlocal did_find_js_placeholder

        if match[0] == CSS_PLACEHOLDER_BYTES:
            replacement = css_dependencies
            did_find_css_placeholder = True
        elif match[0] == JS_PLACEHOLDER_BYTES:
            replacement = js_dependencies
            did_find_js_placeholder = True
        else:
            raise RuntimeError(
                "Unexpected error: Regex for component dependencies processing"
                f" matched unknown string '{match[0].decode()}'"
            )
        return replacement

    content_ = PLACEHOLDER_REGEX.sub(on_replace_match, content_)

    # By default, if user didn't specify any `{% component_dependencies %}`,
    # then try to insert the JS scripts at the end of <body> and CSS sheets at the end
    # of <head>
    if type == "document" and (not did_find_js_placeholder or not did_find_css_placeholder):
        tree = parse_document_or_nodes(content_.decode())

        if isinstance(tree, LexborHTMLParser):
            did_modify_html = False

            if not did_find_css_placeholder and tree.head:
                css_elems = parse_multiroot_html(css_dependencies.decode())
                for css_elem in css_elems:
                    tree.head.insert_child(css_elem)  # type: ignore # TODO: Update to selectolax 0.3.25
                did_modify_html = True

            if not did_find_js_placeholder and tree.body:
                js_elems = parse_multiroot_html(js_dependencies.decode())
                for js_elem in js_elems:
                    tree.body.insert_child(js_elem)  # type: ignore # TODO: Update to selectolax 0.3.25
                did_modify_html = True

            transformed = cast(str, tree.html)
            if did_modify_html:
                content_ = transformed.encode()

    # Return the same type as we were given
    output = content_.decode() if isinstance(content, str) else content_
    output = mark_safe(output) if is_safestring else output
    return cast(TContent, output)