Package: django-sft
Django Single File TemplatesDjango Single File Templates -- inspired by Vue's Single file
componentsMake your Django templates more organized by holding your HTML and all the related CSS and JavaScript in a sensible way.example.sft<template>{% extends 'example/base.sft' %}}
{% block main %}<h1>This is index page</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit eaque obcaecati maxime eos inventore tenetur, debitis atque quaerat modi, et illum id error quisquam consequatur reprehenderit, laboriosam exercitationem, provident aut.</p><h2id="time"></h2>{% endblock %}</template><script>document.getElementById('time').innerHTML=newDate();</script><style>p{width:50%;background-color:white;margin:auto;}</style>Disclaimer: This package serves as a proof of concept rather than a production-ready solution!MotivationFrom Vue's documentation:One important thing to note is that separation of concerns is not
equal to separation of file types. In modern UI development, we have
found that instead of dividing the codebase into three huge layers
that interweave with one another, it makes much more sense to divide
them into loosely-coupled components and compose them. Inside a
component, its template, logic and styles are inherently coupled, and
collocating them actually makes the component more cohesive and
maintainable.Similar logic could be applied to Django's templates. HTML, JavaScript
and CSS are inherently coupled so it makes sense to put them together.IntroducingDjango Single File Templates (SFT).QuickstartInstall Django Single File Templates:pip install django-sftAdd it to yourINSTALLED_APPS:INSTALLED_APPS=(...'django_sft',...)Add SFT Template loader (in your settings.py):TEMPLATES=[{...'OPTIONS':{'loaders':['django_sft.template.SFTLoader','django.template.loaders.filesystem.Loader','django.template.loaders.app_directories.Loader',],...}}]You can now start using Single file templates as your templates.UsageAdd a new SFT by adding a.sftfile to yourtemplatesfolder (either
in your apps or root templates folder). SFT should include at least HTML
(you can use Django's template language), but it can also include
script and style tags:<template>{% load static %}<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Example Website</title></head><body><header><nav><ahref="/">Home</a><ahref="/page"id="page">Page</a></nav></header>{% block main %}<h1>This is where the content will go</h1>{% endblock %}</body></html></template><script>constpage=document.getElementById('page');page.addEventListener('click',(ev)=>{ev.preventDefault();alert('You clicked the page');});</script><style>body{background-color:gray;}</style>In your views you can render this template directly and SFT Template
loader will get the right template for you.defview(request):returnrender('my-template.sft')Single file templates can also extend other STFs.<template>{% extends 'example/base.sft' %}}
{% block main %}<h1>This is index page</h1><h2>Update</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit eaque obcaecati maxime eos inventore tenetur, debitis atque quaerat modi, et illum id error quisquam consequatur reprehenderit, laboriosam exercitationem, provident aut.</p><h2id="time"></h2>{% endblock %}</template><script>document.getElementById('time').innerHTML=newDate();</script><style>p{width:50%;background-color:white;margin:auto;}</style>It can also include external scripts and styles (bootstrap example):<template>...</template><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script><script>constpage=document.getElementById('page');page.addEventListener('click',(ev)=>{ev.preventDefault();alert('You clicked the page');});</script><stylesrc="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"></style><style>body{background-color:gray;}</style>Single file templates will automatically be parsed and compiled when youmanage.py runserverifDEBUG = True. You can also runmanage.py compile_sftto compile manually.How does it work?When SFT is compiled (onrunserveror manually), django-sft will grab
the SFT file and produce appropriate.js,.cssand.htmlfiles.
They will be created insftdirectory (understaticandtemplatesdirectories respectively). The html files will be automatically injected
with references to the static files. When a view will try to render.sfttemplate, the SFT Template Loader will look for resulting.htmlfile instead and return that.The current implementation is quite simple and serves as a proof of
concept rather than a production-ready solution.Look for a working example undertests folder.FeaturesTODORunning TestsTODO: no tests written yetDoes the code actually work?source <YOURVIRTUALENV>/bin/activate
(myenv) $ pip install tox
(myenv) $ toxCreditsTools used in rendering this package:Cookiecuttercookiecutter-djangopackageHistory0.1.2 (2020-11-20)
++++++++++++++++++Enable external scripts and stylesEnable multiple scripts and styles per file0.1.1 (2020-11-16)
++++++++++++++++++Bug fixes0.1.0 (2020-11-12)
++++++++++++++++++First release on PyPI.