django-page-components 1.0.0

django-page-components

“Page component” is a unit of a user interface (think ReactJS components). django-page-components provide a minimalistic framework for creating page components and using them in your Django views and templates.

To define a page component, you need to create a sub-class of page_components.PageComponent and implement render method like so:

import page_components
import django.utils.html


class AddToCartButton(page_components.PageComponent):

    def __init__(self, product):
        self.product = product

    class Media:
        js = (
            "add-to-cart.js",  # this is where addToCart is defined
        )
        css = {
            "all": (
                "add-to-cart.css"  # this is where `.add-to-card` styles are defined
            )
        }

    def render(self):
        return django.utils.html.format_html(
            """<button class="add-to-cart" onclick="addToCart({ product_id })">Add to cart</button>""",
            product_id=self.product.id
        )

You can also use a TemplatePageComponent base class to implement page components based on templates. In that case, you may want to implement get_context_data method:

class AddToCartButton(page_components.TemplatePageComponent):

    template_name = "add-to-cart-button.html"

    ...

    def get_context_data(self, **kwargs):
        kwargs["product_id"] = self.product_id
        return super(AddToCartButton, self).get_context_data(**kwargs)

Note that it’s up to you to decide how to implement the render method and what additional methods should be added to your page components. One general recommendation is to keep the __init__ method as lightweight as possible and do all the heavy lifting in the render method.

A proposed convention is to store your page components classes in page_components package/module inside your app:

myapp.page_components.AddToCartButton

Now, when we have some page components defined, it is time to use them in views:

import django.views.generic
import page_components

import myapp.models
import myapp.page_components

class ProductPage(
    page_components.PageComponentsView,
    django.views.generic.DetailView,
):

    model = myapp.models.Product
    template_name = "product.html"

    def get_page_components(self):
        return {
            "add_to_cart_button": myapp.page_components.AddToCartButton(self.object)
        }

and templates:

<html>
  <head>
    /* this will include CSS files for all page components on that page */
    {{ view.media.css.render }}
  </head>
  <body>
    <h1>{{ object.title }}</h1>
    {{ page_components.add_to_cart_button }}

    /* this will include JavaScript files for all page components on that page */
    {{ view.media.js.render }}
  </body>
</html>

Note that page components are placed to page_components namespace in template context by default. You can change that namespace on per-view basis by adding page_components_context_name attribute to a view class or globally with PAGE_COMPONENTS_CONTEXT_NAME setting. If you set page_components_context_name to None, it will disable the namespace entirely.

Changes