Python / Django

from django import template
from django.template.loader import render_to_string
from django.utils.safestring import mark_safe
import re
import uuid

register = template.Library()

@register.simple_tag
def component(name, **kwargs):
    # 1. Generate unique ID for scoping
    uid = f"{name}-{uuid.uuid4().hex[:6]}"
    kwargs['uid'] = uid
    
    # 2. Render the partial template
    rendered = render_to_string(f"components/{name}.html", kwargs)
    
    # 3. PulsePoint Compile Step
    # Replaces <script> with <script type="text/pp">
    compiled = re.sub(
        r'<script(?![^>]*\btype=)', 
        '<script type="text/pp"', 
        rendered
    )
    
    # Return as safe HTML so Django doesn't escape it
    return mark_safe(compiled)

{% load pp_tags %}

<h1>Django Dashboard</h1>

<!-- Use the custom tag -->
{% component "notification" msg="System OK" count=notifications.count %}


<!-- templates/components/notification.html -->
<div class="alert" pp-uid="{{ uid }}">
    <p>Status: {message}</p>
    <span>Unread: {count}</span>
    
    <button onclick="markRead()">Clear</button>

    <script>
        // Django context variables available here
        const [message] = pp.state("{{ msg }}");
        const [count, setCount] = pp.state({{ count }});
        
        function markRead() {
            setCount(0);
        }
    </script>
</div>