Auto-generate typed stubs for render_component

[fbinz]

Now that an official render_component has landed in django-cotton, there might be a chance to improve DX quite a bit by auto-generating stubs.

I implemented a quick prototype of what I mean:

from pathlib import Path
import django_cotton
from django_cotton.templatetags._vars import CottonVarsNode
from django_cotton.cotton_loader import Loader as CottonLoader
from django.core.checks import register
from django import template
from django.conf import settings

import glob

pyi_header = """
from django.http import HttpRequest
from typing import overload, Literal
"""

pyi_render_component_template = """
@overload
def render_component(request: HttpRequest, component_name: Literal["{component_name}"], *, {component_kwargs}):
    ...
"""

pyi_render_component_base_case = """
def render_component(request, component_name, context=None, **kwargs):
    ...
"""


@register("django-cotton")
def check_c_vars_and_generate_stubs(app_configs, **kwargs):
    component_files = []

    component_files = glob.glob(
        str(settings.BASE_DIR) + "/**/cotton/**.html",
        recursive=True,
    )

    lines = [pyi_header.strip()]

    for filename in component_files:
        t = template.Template(
            CottonLoader(engine=None).cotton_compiler.process(open(filename).read())
        )
        if isinstance(t.nodelist[0], CottonVarsNode):
            var_dict = t.nodelist[0].var_dict
            all_var_dict = var_dict.copy()
            all_var_dict |= {name: "" for name in t.nodelist[0].empty_vars}

            component_name = Path(filename).stem

            lines.append(
                pyi_render_component_template.format(
                    component_name=component_name,
                    component_kwargs=", ".join(
                        f"{name}: str | None = None" for name in all_var_dict.keys()
                    ),
                ).strip()
            )

    lines.append(pyi_render_component_base_case.strip())
    pyi_contents = "\n\n".join(lines)

    pyi_file = Path(django_cotton.__file__).with_suffix(".pyi")
    open(pyi_file, "w").write(pyi_contents)

    return []

This (ab)uses the django system-check framework to generate typed stubs for all components it found in the current project.
Of course, this is just a proof of concept, but given

<!-- cotton/card.html -->
<c-vars name="" />
<p>
  Hello {{ name }}
</p>

and

<!-- cotton/test.html -->
<c-vars blub blab />

the following stub file is created:

from django.http import HttpRequest
from typing import overload, Literal

@overload
def render_component(request: HttpRequest, component_name: Literal["card"], *, name: str | None = None):
    ...

@overload
def render_component(request: HttpRequest, component_name: Literal["test"], *, blub: str | None = None, blab: str | None = None):
    ...

def render_component(request, component_name, context=None, **kwargs):
    ...

Since the stubs are generated into the django_cotton/__init__.pyi they get picked up automatically by language servers. You then get hints, as to which variables a component supports and errors, when you pass in variables that aren't declared on the components.

Of course, there are many things to discuss and improvements I could imagine. Anyways, I'd love to get your input on the idea.