mirror of
https://github.com/django-components/django-components.git
synced 2025-09-20 12:49:45 +00:00
611 lines
No EOL
258 KiB
HTML
611 lines
No EOL
258 KiB
HTML
<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A way to create simple reusable template components in Django."><link href=https://django-components.github.io/django-components/latest/releases/v0.140.0/ rel=canonical><link href=../v0.140.1/ rel=prev><link href=../v0.139.1/ rel=next><link rel=icon href=../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.19"><title>v0.140.0 🚨📢 - Django-Components</title><link rel=stylesheet href=../../assets/stylesheets/main.7e37652d.min.css><link rel=stylesheet href=../../assets/stylesheets/palette.06af60db.min.css><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../assets/_markdown_exec_pyodide.css><link rel=stylesheet href=../../assets/_mkdocstrings.css><link rel=stylesheet href=../../css/timeago.css><link rel=stylesheet href=../../css/style.css><script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><meta property=og:type content=website><meta property=og:title content="v0.140.0 🚨📢 - Django-Components"><meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://django-components.github.io/django-components/latest/assets/images/social/releases/v0.140.0.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://django-components.github.io/django-components/latest/releases/v0.140.0/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="v0.140.0 🚨📢 - Django-Components"><meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://django-components.github.io/django-components/latest/assets/images/social/releases/v0.140.0.png><meta name=google-site-verification content=vQA3d50F2ByQxG0eB6b0YoPnYW9gZo8xnd6HKhCyuys></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#v01400 class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class=md-header data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> v0.140.0 🚨📢 </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <!-- Navigation tabs --> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../../overview/welcome/ class=md-tabs__link> Overview </a> </li> <li class=md-tabs__item> <a href=../../getting_started/installation/ class=md-tabs__link> Getting Started </a> </li> <!-- Determine classes --> <li class=md-tabs__item data-tab-group=Documentation> <a href=# class=md-tabs__link style="cursor: pointer;"> Documentation </a> </li> <li class=md-tabs__item> <a href=../../plugins/ class=md-tabs__link> Plugins </a> </li> <li class=md-tabs__item> <a href=../../examples/overview/ class=md-tabs__link> Examples </a> </li> <li class=md-tabs__item> <a href=../../community/help/ class=md-tabs__link> Community </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../ class=md-tabs__link> Release Notes </a> </li> </ul> <ul class="md-tabs__list tabs-hidden" data-tab-group=Documentation> <li class=md-tabs__item> <a href=../../concepts/fundamentals/single_file_components/ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <a href=../../reference/api/ class=md-tabs__link> API Reference </a> </li> <li class=md-tabs__item> <a href=../../guides/setup/caching/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../upgrading/v0/ class=md-tabs__link> Upgrading </a> </li> </ul> </div> </nav> <script>
|
|
// Set up event listeners, so that, if user clicks on a top-level tab group,
|
|
// then we will show the sub-tabs for that group only.
|
|
(() => {
|
|
const topLevelTabGroups = document.querySelectorAll('li[data-tab-group]');
|
|
topLevelTabGroups.forEach(li => {
|
|
li._tabGroupHoverTimeout = null;
|
|
const linkGroup = li.dataset.tabGroup;
|
|
|
|
// Allow to permanently open/close the tab group by clicking.
|
|
li.addEventListener('click', () => {
|
|
li._tabGroupIsOpen ? selectTabGroup(null) : selectTabGroup(linkGroup);
|
|
li._tabGroupIsOpen = !li._tabGroupIsOpen;
|
|
|
|
if (li._tabGroupIsOpen && li._tabGroupHoverTimeout) {
|
|
clearTimeout(li._tabGroupHoverTimeout);
|
|
li._tabGroupHoverTimeout = null;
|
|
}
|
|
});
|
|
|
|
// Allow to temporarily open the tab group by hovering over it.
|
|
li.addEventListener('mouseenter', () => {
|
|
if (li._tabGroupHoverTimeout) {
|
|
clearTimeout(li._tabGroupHoverTimeout);
|
|
li._tabGroupHoverTimeout = null;
|
|
}
|
|
|
|
if (li._tabGroupIsOpen) return;
|
|
|
|
selectTabGroup(linkGroup);
|
|
});
|
|
li.addEventListener('mouseleave', () => {
|
|
if (li._tabGroupIsOpen) return;
|
|
|
|
delayedCloseTabGroup(li);
|
|
});
|
|
});
|
|
|
|
// Also add listeners to the sub-tabs container, so that if user moves
|
|
// cursor from the top-level group to sub-tabs, then the container will remain open.
|
|
const subTabsContainers = document.querySelectorAll('ul[data-tab-group]');
|
|
subTabsContainers.forEach(ul => {
|
|
ul.addEventListener('mouseenter', () => {
|
|
const tabGroup = ul.dataset.tabGroup;
|
|
const toggle = document.querySelector(`li[data-tab-group="${tabGroup}"]`);
|
|
|
|
if (toggle._tabGroupIsOpen || toggle._tabGroupHoverTimeout === null) return;
|
|
|
|
clearTimeout(toggle._tabGroupHoverTimeout);
|
|
toggle._tabGroupHoverTimeout = null;
|
|
});
|
|
|
|
ul.addEventListener('mouseleave', () => {
|
|
const tabGroup = ul.dataset.tabGroup;
|
|
const toggle = document.querySelector(`li[data-tab-group="${tabGroup}"]`);
|
|
|
|
if (toggle._tabGroupIsOpen) return;
|
|
|
|
delayedCloseTabGroup(toggle);
|
|
});
|
|
});
|
|
|
|
function selectTabGroup(groupName) {
|
|
const tabGroups = document.querySelectorAll('ul[data-tab-group]');
|
|
for (const tabGroupEl of tabGroups) {
|
|
const tabGroup = tabGroupEl.dataset.tabGroup;
|
|
if (tabGroup === groupName) {
|
|
tabGroupEl.classList.remove('tabs-hidden');
|
|
} else {
|
|
tabGroupEl.classList.add('tabs-hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
function delayedCloseTabGroup(toggle) {
|
|
toggle._tabGroupHoverTimeout = setTimeout(() => {
|
|
if (toggle._tabGroupIsOpen || toggle._tabGroupHoverTimeout === null) {
|
|
toggle._tabGroupHoverTimeout = null;
|
|
return;
|
|
};
|
|
|
|
toggle._tabGroupHoverTimeout = null;
|
|
selectTabGroup(null);
|
|
}, 100);
|
|
}
|
|
})();
|
|
</script> <style>
|
|
/* Styles for animated tabs visibility */
|
|
.md-tabs__list {
|
|
transition: max-height 0.3s ease-in-out;
|
|
overflow: hidden;
|
|
max-height: 100px;
|
|
}
|
|
|
|
/* Collapse the tabs when the attribute is present */
|
|
.md-tabs__list.tabs-hidden {
|
|
max-height: 0;
|
|
}
|
|
|
|
/* Custom styling for the sub-tabs */
|
|
.md-tabs__list[data-tab-group] {
|
|
position: absolute;
|
|
width: 100%;
|
|
max-width: 61rem;
|
|
background-color: var(--md-primary-fg-color);
|
|
border-top: 1px var(--md-primary-fg-color--dark) solid;
|
|
}
|
|
.md-tabs__list[data-tab-group] .md-tabs__item {
|
|
height: 2.1rem;
|
|
}
|
|
.md-tabs__list[data-tab-group] .md-tabs__link {
|
|
font-size: 0.63rem;
|
|
margin-top: 0.7rem;
|
|
}
|
|
</style> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../.. title=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/django-components/django-components title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_1 id=__nav_1_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Overview <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_1_label aria-expanded=false> <label class=md-nav__title for=__nav_1> <span class="md-nav__icon md-icon"></span> Overview </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/welcome/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Welcome to Django Components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/compatibility/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Compatibility <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/security_notes/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Security notes 🚨 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/performance/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Performance <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../overview/license/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> License <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Getting Started <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Getting Started </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/installation/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Installation <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/your_first_component/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Create your first component <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/adding_js_and_css/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Adding JS and CSS <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/components_in_templates/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Components in templates <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/parametrising_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Parametrising components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/adding_slots/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Adding slots <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../getting_started/rendering_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Rendering components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>Concepts <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=false> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Documentation: Concepts </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_1> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Fundamentals <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_1_label aria-expanded=false> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/single_file_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Single-file components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_js_css_files/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML / JS / CSS files <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_js_css_variables/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML / JS / CSS variables <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/secondary_js_css_files/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Secondary JS / CSS files <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/component_defaults/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component defaults <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/render_api/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Render API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/rendering_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Rendering components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/slots/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Slots <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/template_tag_syntax/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Template tag syntax <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/html_attributes/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML attributes <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/component_views_urls/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component views and URLs <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/http_request/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTTP Request <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/typing_and_validation/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Typing and validation <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/subclassing_components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Subclassing components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/fundamentals/autodiscovery/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Autodiscovery <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_2> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Advanced <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_3_2> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/rendering_js_css/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Rendering JS / CSS <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/html_fragments/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> HTML fragments <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/provide_inject/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Prop drilling and provide / inject <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/hooks/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Lifecycle hooks <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_registry/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Registering components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_caching/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component caching <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_context_scope/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component context and scope <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/template_tags/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Custom template tags <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/tag_formatters/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Tag formatters <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/extensions/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extensions <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/testing/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Testing <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../concepts/advanced/component_libraries/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Component libraries <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>API Reference <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=false> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> Documentation: API Reference </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/api/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/commands/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> CLI commands <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/components/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Components <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/exceptions/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Exceptions <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/extension_hooks/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extension hooks <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/extension_commands/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extension commands API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/extension_urls/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Extension URLs API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/settings/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Settings <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/signals/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Signals <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/tag_formatters/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Tag formatters <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/template_tags/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Template tags <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/template_variables/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Template variables <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/urls/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> URLs <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../reference/testing_api/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Testing API <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_5 id=__nav_5_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>Guides <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_5_label aria-expanded=false> <label class=md-nav__title for=__nav_5> <span class="md-nav__icon md-icon"></span> Documentation: Guides </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5_1> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_5_1 id=__nav_5_1_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Setup <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_5_1_label aria-expanded=false> <label class=md-nav__title for=__nav_5_1> <span class="md-nav__icon md-icon"></span> Setup </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../guides/setup/caching/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Caching <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../guides/setup/development_server/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Development server <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5_2> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_5_2 id=__nav_5_2_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Other <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_5_2_label aria-expanded=false> <label class=md-nav__title for=__nav_5_2> <span class="md-nav__icon md-icon"></span> Other </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../guides/other/troubleshooting/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Troubleshooting <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_6> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_6 id=__nav_6_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Documentation:<br>Upgrading <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_6_label aria-expanded=false> <label class=md-nav__title for=__nav_6> <span class="md-nav__icon md-icon"></span> Documentation: Upgrading </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../upgrading/v0/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Upgrading in pre-v1.0 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_7> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../../plugins/ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Plugins <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> <!-- Only render toggle if there's at least one more page --> </div> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_7_label aria-expanded=false> <label class=md-nav__title for=__nav_7> <span class="md-nav__icon md-icon"></span> Plugins </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_8> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_8 id=__nav_8_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Examples <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_8_label aria-expanded=false> <label class=md-nav__title for=__nav_8> <span class="md-nav__icon md-icon"></span> Examples </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../examples/overview/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Examples <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_9> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_9 id=__nav_9_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Community <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_9_label aria-expanded=false> <label class=md-nav__title for=__nav_9> <span class="md-nav__icon md-icon"></span> Community </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/help/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Questions & Help <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/contributing/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Contributing <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/development/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Development <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/code_of_conduct/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Code of Conduct <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_9_5> <!-- Toggle to expand nested items --> <label class=md-nav__link for=__nav_9_5 id=__nav_9_5_label tabindex=0> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Dev Guides <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <!-- Toggle to expand nested items with link to index page --> <!-- Nested navigation --> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_9_5_label aria-expanded=false> <label class=md-nav__title for=__nav_9_5> <span class="md-nav__icon md-icon"></span> Dev Guides </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/devguides/dependency_mgmt/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> JS and CSS rendering <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/devguides/slot_rendering/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Slot rendering <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../../community/devguides/slots_and_blocks/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Using slot and block tags <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <!-- Determine all nested items that are index pages --> <!-- Navigation tabs --> <!-- Render 1st level active item as section --> <!-- Navigation tabs + sections --> <!-- Render 2nd level items with nested items as sections --> <!-- Navigation sections --> <!-- Navigation pruning --> <!-- Nested navigation item --> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <!-- Determine checked and indeterminate state --> <!-- Active checkbox expands items contained within nested section --> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_10 checked> <!-- Toggle to expand nested items --> <div class="md-nav__link md-nav__container"> <a href=../ class="md-nav__link "> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> Release Notes <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> <!-- Only render toggle if there's at least one more page --> <label class="md-nav__link " for=__nav_10 id=__nav_10_label tabindex> <span class="md-nav__icon md-icon"></span> </label> </div> <!-- Nested navigation --> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_10_label aria-expanded=true> <label class=md-nav__title for=__nav_10> <span class="md-nav__icon md-icon"></span> Release Notes </label> <ul class=md-nav__list data-md-scrollfix> <!-- Nested navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.141.5/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.5 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.141.4/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.4 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.141.3/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.3 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.141.2/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.2 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.141.1/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.1 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.141.0/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.141.0 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.140.1/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.140.1 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class="md-nav__item md-nav__item--active"> <!-- State toggle --> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <!-- Hack: see partials/toc.html for more information --> <!-- Navigation link to table of contents --> <label class="md-nav__link md-nav__link--active" for=__toc> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.140.0 🚨📢 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.140.0 🚨📢 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> <!-- Table of contents --> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#breaking-changes class=md-nav__link> <span class=md-ellipsis> BREAKING CHANGES 🚨📢 </span> </a> </li> <li class=md-nav__item> <a href=#deprecation class=md-nav__link> <span class=md-ellipsis> Deprecation 🚨📢 </span> </a> </li> <li class=md-nav__item> <a href=#feat class=md-nav__link> <span class=md-ellipsis> Feat </span> </a> </li> <li class=md-nav__item> <a href=#refactor class=md-nav__link> <span class=md-ellipsis> Refactor </span> </a> </li> <li class=md-nav__item> <a href=#fix class=md-nav__link> <span class=md-ellipsis> Fix </span> </a> </li> </ul> </nav> </li> <!-- Navigation item --> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.139.1/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.139.1 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.139.0/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.139.0 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.138/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.138 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.137/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.137 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.136/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.136 🚨📢 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.135/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.135 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.134/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.134 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.133/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.133 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.132/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.132 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.131/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.131 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.130/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.130 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.129/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.129 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.128/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.128 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.127/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.127 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.126/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.126 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.125/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.125 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.124/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.124 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.123/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.123 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.122/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.122 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.121/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.121 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.120/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.120 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.119/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.119 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.118/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.118 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.117/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.117 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.116/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.116 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.115/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.115 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.114/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.114 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.113/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.113 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.112/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.112 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.111/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.111 <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.110/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.110 🚨📢 (2024-11-25) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.100/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.100 🚨📢 (2024-09-11) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.97/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.97 (2024-09-06) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.96/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.96 (2024-09-04) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.95/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.95 (2024-08-29) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.94/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.94 (2024-08-28) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.93/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.93 (2024-08-27) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.92/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.92 🚨📢 (2024-08-22) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.90/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.90 (2024-08-18) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.85/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.85 🚨📢 (2024-07-29) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.81/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.81 🚨📢 (2024-06-12) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.80/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.80 (2024-06-01) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.79/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.79 🚨📢 (2024-06-01) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.77/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.77 🚨📢 (2024-05-23) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.74/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.74 (2024-05-12) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.70/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.70 🚨📢 (2024-05-01) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.67/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.67 (2024-04-17) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.50/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.50 🚨📢 (2024-02-26) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.34/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.34 (2024-01-27) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.28/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.28 (2023-05-18) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.27/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.27 (2023-04-11) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.26/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.26 🚨📢 (2023-03-14) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.22/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.22 (2022-07-26) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> <!-- Determine classes --> <!-- Determine active page for paginated views --> <!-- Navigation item with nested items --> <li class=md-nav__item> <a href=../v0.17/ class=md-nav__link> <!-- Navigation link icon --> <!-- ==================== OUR CHANGES START ==================== --> <!-- ==================== OUR CHANGES END ==================== --> <!-- Navigation link title --> <span class=md-ellipsis> v0.17 (2021-09-10) <!-- Navigation link subtitle --> </span> <!-- Navigation link status --> </a> </li> </ul> </nav> <!-- Pruned navigation item --> </li> <!-- Currently active page --> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#breaking-changes class=md-nav__link> <span class=md-ellipsis> BREAKING CHANGES 🚨📢 </span> </a> </li> <li class=md-nav__item> <a href=#deprecation class=md-nav__link> <span class=md-ellipsis> Deprecation 🚨📢 </span> </a> </li> <li class=md-nav__item> <a href=#feat class=md-nav__link> <span class=md-ellipsis> Feat </span> </a> </li> <li class=md-nav__item> <a href=#refactor class=md-nav__link> <span class=md-ellipsis> Refactor </span> </a> </li> <li class=md-nav__item> <a href=#fix class=md-nav__link> <span class=md-ellipsis> Fix </span> </a> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <h1 id=v01400>v0.140.0 🚨📢<a class=headerlink href=#v01400 title="Permanent link">¤</a></h1> <p>⚠️ Major release ⚠️ - Please test thoroughly before / after upgrading.</p> <p>This is the biggest step towards v1. While this version introduces many small API changes, we don't expect to make further changes to the affected parts before v1.</p> <p>For more details see <a href=https://github.com/django-components/django-components/issues/433>#433</a>.</p> <p>Summary:</p> <ul> <li>Overhauled typing system</li> <li>Middleware removed, no longer needed</li> <li><code>get_template_data()</code> is the new canonical way to define template data. <code>get_context_data()</code> is now deprecated but will remain until v2.</li> <li>Slots API polished and prepared for v1.</li> <li>Merged <code>Component.Url</code> with <code>Component.View</code></li> <li>Added <code>Component.args</code>, <code>Component.kwargs</code>, <code>Component.slots</code>, <code>Component.context</code></li> <li>Added <code>{{ component_vars.args }}</code>, <code>{{ component_vars.kwargs }}</code>, <code>{{ component_vars.slots }}</code></li> <li>You should no longer instantiate <code>Component</code> instances. Instead, call <code>Component.render()</code> or <code>Component.render_to_response()</code> directly.</li> <li>Component caching can now consider slots (opt-in)</li> <li>And lot more...</li> </ul> <h4 id=breaking-changes>BREAKING CHANGES 🚨📢<a class=headerlink href=#breaking-changes title="Permanent link">¤</a></h4> <p><strong>Middleware</strong></p> <ul> <li> <p>The middleware <code>ComponentDependencyMiddleware</code> was removed as it is no longer needed.</p> <p>The middleware served one purpose - to render the JS and CSS dependencies of components when you rendered templates with <code>Template.render()</code> or <code>django.shortcuts.render()</code> and those templates contained <code>{% component %}</code> tags.</p> <ul> <li>NOTE: If you rendered HTML with <code>Component.render()</code> or <code>Component.render_to_response()</code>, the JS and CSS were already rendered.</li> </ul> <p>Now, the JS and CSS dependencies of components are automatically rendered, even when you render Templates with <code>Template.render()</code> or <code>django.shortcuts.render()</code>.</p> <p>To disable this behavior, set the <code>DJC_DEPS_STRATEGY</code> context key to <code>"ignore"</code> when rendering the template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=c1># With `Template.render()`:</span>
|
|
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=n>template</span> <span class=o>=</span> <span class=n>Template</span><span class=p>(</span><span class=n>template_str</span><span class=p>)</span>
|
|
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=n>rendered</span> <span class=o>=</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>Context</span><span class=p>({</span><span class=s2>"DJC_DEPS_STRATEGY"</span><span class=p>:</span> <span class=s2>"ignore"</span><span class=p>}))</span>
|
|
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
|
|
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=c1># Or with django.shortcuts.render():</span>
|
|
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=kn>from</span><span class=w> </span><span class=nn>django.shortcuts</span><span class=w> </span><span class=kn>import</span> <span class=n>render</span>
|
|
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=n>rendered</span> <span class=o>=</span> <span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a> <span class=n>request</span><span class=p>,</span>
|
|
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a> <span class=s2>"my_template.html"</span><span class=p>,</span>
|
|
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>context</span><span class=o>=</span><span class=p>{</span><span class=s2>"DJC_DEPS_STRATEGY"</span><span class=p>:</span> <span class=s2>"ignore"</span><span class=p>},</span>
|
|
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=p>)</span>
|
|
</code></pre></div> <p>In fact, you can set the <code>DJC_DEPS_STRATEGY</code> context key to any of the strategies:</p> <ul> <li><code>"document"</code></li> <li><code>"fragment"</code></li> <li><code>"simple"</code></li> <li><code>"prepend"</code></li> <li><code>"append"</code></li> <li><code>"ignore"</code></li> </ul> <p>See <a href=https://django-components.github.io/django-components/0.140.1/concepts/advanced/rendering_js_css/ >Dependencies rendering</a> for more info.</p> </li> </ul> <p><strong>Typing</strong></p> <ul> <li> <p>Component typing no longer uses generics. Instead, the types are now defined as class attributes of the component class.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=n>Args</span> <span class=o>=</span> <span class=n>Tuple</span><span class=p>[</span><span class=nb>float</span><span class=p>,</span> <span class=nb>str</span><span class=p>]</span>
|
|
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a>
|
|
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>[</span><span class=n>Args</span><span class=p>]):</span>
|
|
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=k>pass</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=n>size</span><span class=p>:</span> <span class=nb>float</span>
|
|
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=n>text</span><span class=p>:</span> <span class=nb>str</span>
|
|
</code></pre></div> <p>See <a href=https://django-components.github.io/django-components/0.140.1/concepts/fundamentals/typing_and_validation/#migrating-from-generics-to-class-attributes>Migrating from generics to class attributes</a> for more info. - Removed <code>EmptyTuple</code> and <code>EmptyDict</code> types. Instead, there is now a single <code>Empty</code> type.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>Empty</span>
|
|
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a>
|
|
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"Hello"</span>
|
|
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a>
|
|
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=n>Args</span> <span class=o>=</span> <span class=n>Empty</span>
|
|
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=n>Kwargs</span> <span class=o>=</span> <span class=n>Empty</span>
|
|
</code></pre></div> </li> </ul> <p><strong>Component API</strong></p> <ul> <li> <p>The interface of the not-yet-released <code>get_js_data()</code> and <code>get_css_data()</code> methods has changed to match <code>get_template_data()</code>.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=k>def</span><span class=w> </span><span class=nf>get_js_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
|
|
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=k>def</span><span class=w> </span><span class=nf>get_css_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=k>def</span><span class=w> </span><span class=nf>get_js_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=k>def</span><span class=w> </span><span class=nf>get_css_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
</code></pre></div> </li> <li> <p>Arguments in <code>Component.render_to_response()</code> have changed to match that of <code>Component.render()</code>.</p> <p>Please ensure that you pass the parameters as kwargs, not as positional arguments, to avoid breaking changes.</p> <p>The signature changed, moving the <code>args</code> and <code>kwargs</code> parameters to 2nd and 3rd position.</p> <p>Next, the <code>render_dependencies</code> parameter was added to match <code>Component.render()</code>.</p> <p>Lastly:</p> <ul> <li>Previously, any extra ARGS and KWARGS were passed to the <code>response_class</code>.</li> <li>Now, only extra KWARGS will be passed to the <code>response_class</code>.</li> </ul> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a> <span class=k>def</span><span class=w> </span><span class=nf>render_to_response</span><span class=p>(</span>
|
|
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=bp>cls</span><span class=p>,</span>
|
|
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=n>context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Union</span><span class=p>[</span><span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>],</span> <span class=n>Context</span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=n>slots</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>SlotsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=n>escape_slots_content</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span>
|
|
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a> <span class=n>args</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ArgsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>KwargsType</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=n>deps_strategy</span><span class=p>:</span> <span class=n>DependenciesStrategy</span> <span class=o>=</span> <span class=s2>"document"</span><span class=p>,</span>
|
|
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=n>request</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>HttpRequest</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a> <span class=o>*</span><span class=n>response_args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span>
|
|
<a id=__codelineno-6-11 name=__codelineno-6-11 href=#__codelineno-6-11></a> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span>
|
|
<a id=__codelineno-6-12 name=__codelineno-6-12 href=#__codelineno-6-12></a> <span class=p>)</span> <span class=o>-></span> <span class=n>HttpResponse</span><span class=p>:</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=k>def</span><span class=w> </span><span class=nf>render_to_response</span><span class=p>(</span>
|
|
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <span class=n>context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Union</span><span class=p>[</span><span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>],</span> <span class=n>Context</span><span class=p>]]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a> <span class=n>args</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Any</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Any</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a> <span class=n>slots</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Any</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=n>deps_strategy</span><span class=p>:</span> <span class=n>DependenciesStrategy</span> <span class=o>=</span> <span class=s2>"document"</span><span class=p>,</span>
|
|
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> <span class=nb>type</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>DependenciesStrategy</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <span class=c1># Deprecated, use `deps_strategy`</span>
|
|
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a> <span class=n>render_dependencies</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>True</span><span class=p>,</span> <span class=c1># Deprecated, use `deps_strategy="ignore"`</span>
|
|
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a> <span class=n>outer_context</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Context</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a> <span class=n>request</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>HttpRequest</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a> <span class=n>registry</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ComponentRegistry</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a> <span class=n>registered_name</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-13 name=__codelineno-7-13 href=#__codelineno-7-13></a> <span class=n>node</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ComponentNode</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
|
|
<a id=__codelineno-7-14 name=__codelineno-7-14 href=#__codelineno-7-14></a> <span class=o>**</span><span class=n>response_kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span>
|
|
<a id=__codelineno-7-15 name=__codelineno-7-15 href=#__codelineno-7-15></a><span class=p>)</span> <span class=o>-></span> <span class=n>HttpResponse</span><span class=p>:</span>
|
|
</code></pre></div> </li> <li> <p><code>Component.render()</code> and <code>Component.render_to_response()</code> NO LONGER accept <code>escape_slots_content</code> kwarg.</p> <p>Instead, slots are now always escaped.</p> <p>To disable escaping, wrap the result of <code>slots</code> in <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.mark_safe><code>mark_safe()</code></a>.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=n>html</span> <span class=o>=</span> <span class=n>component</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span><span class=s2>"my_slot"</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>},</span>
|
|
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a> <span class=n>escape_slots_content</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
|
|
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=p>)</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=n>html</span> <span class=o>=</span> <span class=n>component</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span><span class=s2>"my_slot"</span><span class=p>:</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>"CONTENT"</span><span class=p>)}</span>
|
|
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a><span class=p>)</span>
|
|
</code></pre></div> </li> <li> <p><code>Component.template</code> no longer accepts a Template instance, only plain string.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <span class=n>template</span> <span class=o>=</span> <span class=n>Template</span><span class=p>(</span><span class=s2>"{{ my_var }}"</span><span class=p>)</span>
|
|
</code></pre></div> <p>Instead, either:</p> <ol> <li> <p>Set <code>Component.template</code> to a plain string.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"{{ my_var }}"</span>
|
|
</code></pre></div> </li> <li> <p>Move the template to it's own HTML file and set <code>Component.template_file</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-12-2 name=__codelineno-12-2 href=#__codelineno-12-2></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"my_template.html"</span>
|
|
</code></pre></div> </li> <li> <p>Or, if you dynamically created the template, render the template inside <code>Component.on_render()</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-13-1 name=__codelineno-13-1 href=#__codelineno-13-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-13-2 name=__codelineno-13-2 href=#__codelineno-13-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
|
|
<a id=__codelineno-13-3 name=__codelineno-13-3 href=#__codelineno-13-3></a> <span class=n>dynamic_template</span> <span class=o>=</span> <span class=n>do_something_dynamic</span><span class=p>()</span>
|
|
<a id=__codelineno-13-4 name=__codelineno-13-4 href=#__codelineno-13-4></a> <span class=k>return</span> <span class=n>dynamic_template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
|
|
</code></pre></div> </li> </ol> </li> <li> <p>Subclassing of components with <code>None</code> values has changed:</p> <p>Previously, when a child component's template / JS / CSS attributes were set to <code>None</code>, the child component still inherited the parent's template / JS / CSS.</p> <p>Now, the child component will not inherit the parent's template / JS / CSS if it sets the attribute to <code>None</code>.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-14-1 name=__codelineno-14-1 href=#__codelineno-14-1></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-14-2 name=__codelineno-14-2 href=#__codelineno-14-2></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"parent.html"</span>
|
|
<a id=__codelineno-14-3 name=__codelineno-14-3 href=#__codelineno-14-3></a>
|
|
<a id=__codelineno-14-4 name=__codelineno-14-4 href=#__codelineno-14-4></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Parent</span><span class=p>):</span>
|
|
<a id=__codelineno-14-5 name=__codelineno-14-5 href=#__codelineno-14-5></a> <span class=n>template</span> <span class=o>=</span> <span class=kc>None</span>
|
|
<a id=__codelineno-14-6 name=__codelineno-14-6 href=#__codelineno-14-6></a>
|
|
<a id=__codelineno-14-7 name=__codelineno-14-7 href=#__codelineno-14-7></a><span class=c1># Child still inherited parent's template</span>
|
|
<a id=__codelineno-14-8 name=__codelineno-14-8 href=#__codelineno-14-8></a><span class=k>assert</span> <span class=n>Child</span><span class=o>.</span><span class=n>template</span> <span class=o>==</span> <span class=n>Parent</span><span class=o>.</span><span class=n>template</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-15-1 name=__codelineno-15-1 href=#__codelineno-15-1></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-15-2 name=__codelineno-15-2 href=#__codelineno-15-2></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>"parent.html"</span>
|
|
<a id=__codelineno-15-3 name=__codelineno-15-3 href=#__codelineno-15-3></a>
|
|
<a id=__codelineno-15-4 name=__codelineno-15-4 href=#__codelineno-15-4></a><span class=k>class</span><span class=w> </span><span class=nc>Child</span><span class=p>(</span><span class=n>Parent</span><span class=p>):</span>
|
|
<a id=__codelineno-15-5 name=__codelineno-15-5 href=#__codelineno-15-5></a> <span class=n>template</span> <span class=o>=</span> <span class=kc>None</span>
|
|
<a id=__codelineno-15-6 name=__codelineno-15-6 href=#__codelineno-15-6></a>
|
|
<a id=__codelineno-15-7 name=__codelineno-15-7 href=#__codelineno-15-7></a><span class=c1># Child does not inherit parent's template</span>
|
|
<a id=__codelineno-15-8 name=__codelineno-15-8 href=#__codelineno-15-8></a><span class=k>assert</span> <span class=n>Child</span><span class=o>.</span><span class=n>template</span> <span class=ow>is</span> <span class=kc>None</span>
|
|
</code></pre></div> </li> <li> <p>The <code>Component.Url</code> class was merged with <code>Component.View</code>.</p> <p>Instead of <code>Component.Url.public</code>, use <code>Component.View.public</code>.</p> <p>If you imported <code>ComponentUrl</code> from <code>django_components</code>, you need to update your import to <code>ComponentView</code>.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-16-1 name=__codelineno-16-1 href=#__codelineno-16-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-16-2 name=__codelineno-16-2 href=#__codelineno-16-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Url</span><span class=p>:</span>
|
|
<a id=__codelineno-16-3 name=__codelineno-16-3 href=#__codelineno-16-3></a> <span class=n>public</span> <span class=o>=</span> <span class=kc>True</span>
|
|
<a id=__codelineno-16-4 name=__codelineno-16-4 href=#__codelineno-16-4></a>
|
|
<a id=__codelineno-16-5 name=__codelineno-16-5 href=#__codelineno-16-5></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
|
|
<a id=__codelineno-16-6 name=__codelineno-16-6 href=#__codelineno-16-6></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
|
<a id=__codelineno-16-7 name=__codelineno-16-7 href=#__codelineno-16-7></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-17-2 name=__codelineno-17-2 href=#__codelineno-17-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
|
|
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a> <span class=n>public</span> <span class=o>=</span> <span class=kc>True</span>
|
|
<a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a>
|
|
<a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
|
<a id=__codelineno-17-6 name=__codelineno-17-6 href=#__codelineno-17-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
|
|
</code></pre></div> </li> <li> <p>Caching - The function signatures of <code>Component.Cache.get_cache_key()</code> and <code>Component.Cache.hash()</code> have changed to enable passing slots.</p> <p>Args and kwargs are no longer spread, but passed as a list and a dict, respectively.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-18-1 name=__codelineno-18-1 href=#__codelineno-18-1></a><span class=k>def</span><span class=w> </span><span class=nf>get_cache_key</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
|
<a id=__codelineno-18-2 name=__codelineno-18-2 href=#__codelineno-18-2></a>
|
|
<a id=__codelineno-18-3 name=__codelineno-18-3 href=#__codelineno-18-3></a><span class=k>def</span><span class=w> </span><span class=nf>hash</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-19-1 name=__codelineno-19-1 href=#__codelineno-19-1></a><span class=k>def</span><span class=w> </span><span class=nf>get_cache_key</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span> <span class=n>slots</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
|
<a id=__codelineno-19-2 name=__codelineno-19-2 href=#__codelineno-19-2></a>
|
|
<a id=__codelineno-19-3 name=__codelineno-19-3 href=#__codelineno-19-3></a><span class=k>def</span><span class=w> </span><span class=nf>hash</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n>Any</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Any</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
|
</code></pre></div> </li> </ul> <p><strong>Template tags</strong></p> <ul> <li> <p>Component name in the <code>{% component %}</code> tag can no longer be set as a kwarg.</p> <p>Instead, the component name MUST be the first POSITIONAL argument only.</p> <p>Before, it was possible to set the component name as a kwarg and put it anywhere in the <code>{% component %}</code> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-20-1 name=__codelineno-20-1 href=#__codelineno-20-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"my_table"</span> <span class=p>...</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Now, the component name MUST be the first POSITIONAL argument:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-21-1 name=__codelineno-21-1 href=#__codelineno-21-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_table"</span> <span class=nv>rows</span><span class=o>=</span><span class=nv>rows</span> <span class=nv>headers</span><span class=o>=</span><span class=nv>headers</span> <span class=p>...</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Thus, the <code>name</code> kwarg can now be used as a regular input.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"profile"</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=nv>job</span><span class=o>=</span><span class=s2>"Developer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
</code></pre></div> </li> </ul> <p><strong>Slots</strong></p> <ul> <li> <p>If you instantiated <code>Slot</code> class with kwargs, you should now use <code>contents</code> instead of <code>content_func</code>.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-23-1 name=__codelineno-23-1 href=#__codelineno-23-1></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=n>content_func</span><span class=o>=</span><span class=k>lambda</span> <span class=o>*</span><span class=n>a</span><span class=p>,</span> <span class=o>**</span><span class=n>kw</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>)</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-24-1 name=__codelineno-24-1 href=#__codelineno-24-1></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=n>contents</span><span class=o>=</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>)</span>
|
|
</code></pre></div> <p>Alternatively, pass the function / content as first positional argument:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-25-1 name=__codelineno-25-1 href=#__codelineno-25-1></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>)</span>
|
|
</code></pre></div> </li> <li> <p>The undocumented <code>Slot.escaped</code> attribute was removed.</p> <p>Instead, slots are now always escaped.</p> <p>To disable escaping, wrap the result of <code>slots</code> in <a href=https://docs.djangoproject.com/en/5.2/ref/utils/#django.utils.safestring.mark_safe><code>mark_safe()</code></a>.</p> </li> <li> <p>Slot functions behavior has changed. See the new <a href=https://django-components.github.io/django-components/latest/concepts/fundamentals/slots/ >Slots</a> docs for more info.</p> <ul> <li> <p>Function signature:</p> <ol> <li> <p>All parameters are now passed under a single <code>ctx</code> argument.</p> <p>You can still access all the same parameters via <code>ctx.context</code>, <code>ctx.data</code>, and <code>ctx.fallback</code>.</p> </li> <li> <p><code>context</code> and <code>fallback</code> now may be <code>None</code> if the slot function was called outside of <code>{% slot %}</code> tag.</p> </li> </ol> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-26-1 name=__codelineno-26-1 href=#__codelineno-26-1></a><span class=k>def</span><span class=w> </span><span class=nf>slot_fn</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>data</span><span class=p>:</span> <span class=n>Dict</span><span class=p>,</span> <span class=n>slot_ref</span><span class=p>:</span> <span class=n>SlotRef</span><span class=p>):</span>
|
|
<a id=__codelineno-26-2 name=__codelineno-26-2 href=#__codelineno-26-2></a> <span class=nb>isinstance</span><span class=p>(</span><span class=n>context</span><span class=p>,</span> <span class=n>Context</span><span class=p>)</span>
|
|
<a id=__codelineno-26-3 name=__codelineno-26-3 href=#__codelineno-26-3></a> <span class=nb>isinstance</span><span class=p>(</span><span class=n>data</span><span class=p>,</span> <span class=n>Dict</span><span class=p>)</span>
|
|
<a id=__codelineno-26-4 name=__codelineno-26-4 href=#__codelineno-26-4></a> <span class=nb>isinstance</span><span class=p>(</span><span class=n>slot_ref</span><span class=p>,</span> <span class=n>SlotRef</span><span class=p>)</span>
|
|
<a id=__codelineno-26-5 name=__codelineno-26-5 href=#__codelineno-26-5></a>
|
|
<a id=__codelineno-26-6 name=__codelineno-26-6 href=#__codelineno-26-6></a> <span class=k>return</span> <span class=s2>"CONTENT"</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></a><span class=k>def</span><span class=w> </span><span class=nf>slot_fn</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>):</span>
|
|
<a id=__codelineno-27-2 name=__codelineno-27-2 href=#__codelineno-27-2></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>ctx</span><span class=o>.</span><span class=n>context</span><span class=p>,</span> <span class=n>Context</span><span class=p>)</span> <span class=c1># May be None</span>
|
|
<a id=__codelineno-27-3 name=__codelineno-27-3 href=#__codelineno-27-3></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>ctx</span><span class=o>.</span><span class=n>data</span><span class=p>,</span> <span class=n>Dict</span><span class=p>)</span>
|
|
<a id=__codelineno-27-4 name=__codelineno-27-4 href=#__codelineno-27-4></a> <span class=k>assert</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>ctx</span><span class=o>.</span><span class=n>fallback</span><span class=p>,</span> <span class=n>SlotFallback</span><span class=p>)</span> <span class=c1># May be None</span>
|
|
<a id=__codelineno-27-5 name=__codelineno-27-5 href=#__codelineno-27-5></a>
|
|
<a id=__codelineno-27-6 name=__codelineno-27-6 href=#__codelineno-27-6></a> <span class=k>return</span> <span class=s2>"CONTENT"</span>
|
|
</code></pre></div> </li> <li> <p>Calling slot functions:</p> <ol> <li> <p>Rather than calling the slot functions directly, you should now call the <code>Slot</code> instances.</p> </li> <li> <p>All parameters are now optional.</p> </li> <li> <p>The order of parameters has changed.</p> </li> </ol> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-28-1 name=__codelineno-28-1 href=#__codelineno-28-1></a><span class=k>def</span><span class=w> </span><span class=nf>slot_fn</span><span class=p>(</span><span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>data</span><span class=p>:</span> <span class=n>Dict</span><span class=p>,</span> <span class=n>slot_ref</span><span class=p>:</span> <span class=n>SlotRef</span><span class=p>):</span>
|
|
<a id=__codelineno-28-2 name=__codelineno-28-2 href=#__codelineno-28-2></a> <span class=k>return</span> <span class=s2>"CONTENT"</span>
|
|
<a id=__codelineno-28-3 name=__codelineno-28-3 href=#__codelineno-28-3></a>
|
|
<a id=__codelineno-28-4 name=__codelineno-28-4 href=#__codelineno-28-4></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot_fn</span><span class=p>(</span><span class=n>context</span><span class=p>,</span> <span class=n>data</span><span class=p>,</span> <span class=n>slot_ref</span><span class=p>)</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-29-1 name=__codelineno-29-1 href=#__codelineno-29-1></a><span class=k>def</span><span class=w> </span><span class=nf>slot_fn</span><span class=p>(</span><span class=n>ctx</span><span class=p>:</span> <span class=n>SlotContext</span><span class=p>):</span>
|
|
<a id=__codelineno-29-2 name=__codelineno-29-2 href=#__codelineno-29-2></a> <span class=k>return</span> <span class=s2>"CONTENT"</span>
|
|
<a id=__codelineno-29-3 name=__codelineno-29-3 href=#__codelineno-29-3></a>
|
|
<a id=__codelineno-29-4 name=__codelineno-29-4 href=#__codelineno-29-4></a><span class=n>slot</span> <span class=o>=</span> <span class=n>Slot</span><span class=p>(</span><span class=n>slot_fn</span><span class=p>)</span>
|
|
<a id=__codelineno-29-5 name=__codelineno-29-5 href=#__codelineno-29-5></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>()</span>
|
|
<a id=__codelineno-29-6 name=__codelineno-29-6 href=#__codelineno-29-6></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>({</span><span class=s2>"data1"</span><span class=p>:</span> <span class=s2>"abc"</span><span class=p>,</span> <span class=s2>"data2"</span><span class=p>:</span> <span class=s2>"hello"</span><span class=p>})</span>
|
|
<a id=__codelineno-29-7 name=__codelineno-29-7 href=#__codelineno-29-7></a><span class=n>html</span> <span class=o>=</span> <span class=n>slot</span><span class=p>({</span><span class=s2>"data1"</span><span class=p>:</span> <span class=s2>"abc"</span><span class=p>,</span> <span class=s2>"data2"</span><span class=p>:</span> <span class=s2>"hello"</span><span class=p>},</span> <span class=n>fallback</span><span class=o>=</span><span class=s2>"FALLBACK"</span><span class=p>)</span>
|
|
</code></pre></div> </li> <li> <p>Usage in components:</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-30-1 name=__codelineno-30-1 href=#__codelineno-30-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-30-2 name=__codelineno-30-2 href=#__codelineno-30-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
|
|
<a id=__codelineno-30-3 name=__codelineno-30-3 href=#__codelineno-30-3></a> <span class=n>slots</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>slots</span>
|
|
<a id=__codelineno-30-4 name=__codelineno-30-4 href=#__codelineno-30-4></a> <span class=n>slot_fn</span> <span class=o>=</span> <span class=n>slots</span><span class=p>[</span><span class=s2>"my_slot"</span><span class=p>]</span>
|
|
<a id=__codelineno-30-5 name=__codelineno-30-5 href=#__codelineno-30-5></a> <span class=n>html</span> <span class=o>=</span> <span class=n>slot_fn</span><span class=p>(</span><span class=n>context</span><span class=p>,</span> <span class=n>data</span><span class=p>,</span> <span class=n>slot_ref</span><span class=p>)</span>
|
|
<a id=__codelineno-30-6 name=__codelineno-30-6 href=#__codelineno-30-6></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-30-7 name=__codelineno-30-7 href=#__codelineno-30-7></a> <span class=s2>"html"</span><span class=p>:</span> <span class=n>html</span><span class=p>,</span>
|
|
<a id=__codelineno-30-8 name=__codelineno-30-8 href=#__codelineno-30-8></a> <span class=p>}</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-31-1 name=__codelineno-31-1 href=#__codelineno-31-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-31-2 name=__codelineno-31-2 href=#__codelineno-31-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-31-3 name=__codelineno-31-3 href=#__codelineno-31-3></a> <span class=n>slot_fn</span> <span class=o>=</span> <span class=n>slots</span><span class=p>[</span><span class=s2>"my_slot"</span><span class=p>]</span>
|
|
<a id=__codelineno-31-4 name=__codelineno-31-4 href=#__codelineno-31-4></a> <span class=n>html</span> <span class=o>=</span> <span class=n>slot_fn</span><span class=p>(</span><span class=n>data</span><span class=p>)</span>
|
|
<a id=__codelineno-31-5 name=__codelineno-31-5 href=#__codelineno-31-5></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-31-6 name=__codelineno-31-6 href=#__codelineno-31-6></a> <span class=s2>"html"</span><span class=p>:</span> <span class=n>html</span><span class=p>,</span>
|
|
<a id=__codelineno-31-7 name=__codelineno-31-7 href=#__codelineno-31-7></a> <span class=p>}</span>
|
|
</code></pre></div> </li> </ul> </li> </ul> <p><strong>Miscellaneous</strong></p> <ul> <li> <p>The second argument to <code>render_dependencies()</code> is now <code>strategy</code> instead of <code>type</code>.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-32-1 name=__codelineno-32-1 href=#__codelineno-32-1></a><span class=n>render_dependencies</span><span class=p>(</span><span class=n>content</span><span class=p>,</span> <span class=nb>type</span><span class=o>=</span><span class=s2>"document"</span><span class=p>)</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-33-1 name=__codelineno-33-1 href=#__codelineno-33-1></a><span class=n>render_dependencies</span><span class=p>(</span><span class=n>content</span><span class=p>,</span> <span class=n>strategy</span><span class=o>=</span><span class=s2>"document"</span><span class=p>)</span>
|
|
</code></pre></div> </li> </ul> <h4 id=deprecation>Deprecation 🚨📢<a class=headerlink href=#deprecation title="Permanent link">¤</a></h4> <p><strong>Component API</strong></p> <ul> <li> <p><code>Component.get_context_data()</code> is now deprecated. Use <code>Component.get_template_data()</code> instead.</p> <p><code>get_template_data()</code> behaves the same way, but has a different function signature to accept also slots and context.</p> <p>Since <code>get_context_data()</code> is widely used, it will remain available until v2.</p> </li> <li> <p><code>Component.get_template_name()</code> and <code>Component.get_template()</code> are now deprecated. Use <code>Component.template</code>, <code>Component.template_file</code> or <code>Component.on_render()</code> instead.</p> <p><code>Component.get_template_name()</code> and <code>Component.get_template()</code> will be removed in v1.</p> <p>In v1, each Component will have at most one static template. This is needed to enable support for Markdown, Pug, or other pre-processing of templates by extensions.</p> <p>If you are using the deprecated methods to point to different templates, there's 2 ways to migrate:</p> <ol> <li> <p>Split the single Component into multiple Components, each with its own template. Then switch between them in <code>Component.on_render()</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-34-1 name=__codelineno-34-1 href=#__codelineno-34-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponentA</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-34-2 name=__codelineno-34-2 href=#__codelineno-34-2></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"a.html"</span>
|
|
<a id=__codelineno-34-3 name=__codelineno-34-3 href=#__codelineno-34-3></a>
|
|
<a id=__codelineno-34-4 name=__codelineno-34-4 href=#__codelineno-34-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponentB</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-34-5 name=__codelineno-34-5 href=#__codelineno-34-5></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"b.html"</span>
|
|
<a id=__codelineno-34-6 name=__codelineno-34-6 href=#__codelineno-34-6></a>
|
|
<a id=__codelineno-34-7 name=__codelineno-34-7 href=#__codelineno-34-7></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-34-8 name=__codelineno-34-8 href=#__codelineno-34-8></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
|
|
<a id=__codelineno-34-9 name=__codelineno-34-9 href=#__codelineno-34-9></a> <span class=k>if</span> <span class=n>context</span><span class=p>[</span><span class=s2>"a"</span><span class=p>]:</span>
|
|
<a id=__codelineno-34-10 name=__codelineno-34-10 href=#__codelineno-34-10></a> <span class=k>return</span> <span class=n>MyComponentA</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
|
|
<a id=__codelineno-34-11 name=__codelineno-34-11 href=#__codelineno-34-11></a> <span class=k>else</span><span class=p>:</span>
|
|
<a id=__codelineno-34-12 name=__codelineno-34-12 href=#__codelineno-34-12></a> <span class=k>return</span> <span class=n>MyComponentB</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
|
|
</code></pre></div> </li> <li> <p>Alternatively, use <code>Component.on_render()</code> with Django's <code>get_template()</code> to dynamically render different templates:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-35-1 name=__codelineno-35-1 href=#__codelineno-35-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template.loader</span><span class=w> </span><span class=kn>import</span> <span class=n>get_template</span>
|
|
<a id=__codelineno-35-2 name=__codelineno-35-2 href=#__codelineno-35-2></a>
|
|
<a id=__codelineno-35-3 name=__codelineno-35-3 href=#__codelineno-35-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-35-4 name=__codelineno-35-4 href=#__codelineno-35-4></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
|
|
<a id=__codelineno-35-5 name=__codelineno-35-5 href=#__codelineno-35-5></a> <span class=k>if</span> <span class=n>context</span><span class=p>[</span><span class=s2>"a"</span><span class=p>]:</span>
|
|
<a id=__codelineno-35-6 name=__codelineno-35-6 href=#__codelineno-35-6></a> <span class=n>template_name</span> <span class=o>=</span> <span class=s2>"a.html"</span>
|
|
<a id=__codelineno-35-7 name=__codelineno-35-7 href=#__codelineno-35-7></a> <span class=k>else</span><span class=p>:</span>
|
|
<a id=__codelineno-35-8 name=__codelineno-35-8 href=#__codelineno-35-8></a> <span class=n>template_name</span> <span class=o>=</span> <span class=s2>"b.html"</span>
|
|
<a id=__codelineno-35-9 name=__codelineno-35-9 href=#__codelineno-35-9></a>
|
|
<a id=__codelineno-35-10 name=__codelineno-35-10 href=#__codelineno-35-10></a> <span class=n>actual_template</span> <span class=o>=</span> <span class=n>get_template</span><span class=p>(</span><span class=n>template_name</span><span class=p>)</span>
|
|
<a id=__codelineno-35-11 name=__codelineno-35-11 href=#__codelineno-35-11></a> <span class=k>return</span> <span class=n>actual_template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>context</span><span class=p>)</span>
|
|
</code></pre></div> </li> </ol> <p>Read more in <a href=https://github.com/django-components/django-components/discussions/1204>django-components#1204</a>.</p> </li> <li> <p>The <code>type</code> kwarg in <code>Component.render()</code> and <code>Component.render_to_response()</code> is now deprecated. Use <code>deps_strategy</code> instead. The <code>type</code> kwarg will be removed in v1.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-36-1 name=__codelineno-36-1 href=#__codelineno-36-1></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=nb>type</span><span class=o>=</span><span class=s2>"fragment"</span><span class=p>)</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-37-1 name=__codelineno-37-1 href=#__codelineno-37-1></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=n>deps_strategy</span><span class=o>=</span><span class=s2>"fragment"</span><span class=p>)</span>
|
|
</code></pre></div> </li> <li> <p>The <code>render_dependencies</code> kwarg in <code>Component.render()</code> and <code>Component.render_to_response()</code> is now deprecated. Use <code>deps_strategy="ignore"</code> instead. The <code>render_dependencies</code> kwarg will be removed in v1.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-38-1 name=__codelineno-38-1 href=#__codelineno-38-1></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=n>render_dependencies</span><span class=o>=</span><span class=kc>False</span><span class=p>)</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-39-1 name=__codelineno-39-1 href=#__codelineno-39-1></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=n>deps_strategy</span><span class=o>=</span><span class=s2>"ignore"</span><span class=p>)</span>
|
|
</code></pre></div> </li> <li> <p>Support for <code>Component</code> constructor kwargs <code>registered_name</code>, <code>outer_context</code>, and <code>registry</code> is deprecated, and will be removed in v1.</p> <p>Before, you could instantiate a standalone component, and then call <code>render()</code> on the instance:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-40-1 name=__codelineno-40-1 href=#__codelineno-40-1></a><span class=n>comp</span> <span class=o>=</span> <span class=n>MyComponent</span><span class=p>(</span>
|
|
<a id=__codelineno-40-2 name=__codelineno-40-2 href=#__codelineno-40-2></a> <span class=n>registered_name</span><span class=o>=</span><span class=s2>"my_component"</span><span class=p>,</span>
|
|
<a id=__codelineno-40-3 name=__codelineno-40-3 href=#__codelineno-40-3></a> <span class=n>outer_context</span><span class=o>=</span><span class=n>my_context</span><span class=p>,</span>
|
|
<a id=__codelineno-40-4 name=__codelineno-40-4 href=#__codelineno-40-4></a> <span class=n>registry</span><span class=o>=</span><span class=n>my_registry</span><span class=p>,</span>
|
|
<a id=__codelineno-40-5 name=__codelineno-40-5 href=#__codelineno-40-5></a><span class=p>)</span>
|
|
<a id=__codelineno-40-6 name=__codelineno-40-6 href=#__codelineno-40-6></a><span class=n>comp</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-40-7 name=__codelineno-40-7 href=#__codelineno-40-7></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=mi>2</span><span class=p>,</span> <span class=mi>3</span><span class=p>],</span>
|
|
<a id=__codelineno-40-8 name=__codelineno-40-8 href=#__codelineno-40-8></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=s2>"a"</span><span class=p>:</span> <span class=mi>1</span><span class=p>,</span> <span class=s2>"b"</span><span class=p>:</span> <span class=mi>2</span><span class=p>},</span>
|
|
<a id=__codelineno-40-9 name=__codelineno-40-9 href=#__codelineno-40-9></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span><span class=s2>"my_slot"</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>},</span>
|
|
<a id=__codelineno-40-10 name=__codelineno-40-10 href=#__codelineno-40-10></a><span class=p>)</span>
|
|
</code></pre></div> <p>Now you should instead pass all that data to <code>Component.render()</code> / <code>Component.render_to_response()</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-41-1 name=__codelineno-41-1 href=#__codelineno-41-1></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-41-2 name=__codelineno-41-2 href=#__codelineno-41-2></a> <span class=n>args</span><span class=o>=</span><span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=mi>2</span><span class=p>,</span> <span class=mi>3</span><span class=p>],</span>
|
|
<a id=__codelineno-41-3 name=__codelineno-41-3 href=#__codelineno-41-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=s2>"a"</span><span class=p>:</span> <span class=mi>1</span><span class=p>,</span> <span class=s2>"b"</span><span class=p>:</span> <span class=mi>2</span><span class=p>},</span>
|
|
<a id=__codelineno-41-4 name=__codelineno-41-4 href=#__codelineno-41-4></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span><span class=s2>"my_slot"</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>},</span>
|
|
<a id=__codelineno-41-5 name=__codelineno-41-5 href=#__codelineno-41-5></a> <span class=c1># NEW</span>
|
|
<a id=__codelineno-41-6 name=__codelineno-41-6 href=#__codelineno-41-6></a> <span class=n>registered_name</span><span class=o>=</span><span class=s2>"my_component"</span><span class=p>,</span>
|
|
<a id=__codelineno-41-7 name=__codelineno-41-7 href=#__codelineno-41-7></a> <span class=n>outer_context</span><span class=o>=</span><span class=n>my_context</span><span class=p>,</span>
|
|
<a id=__codelineno-41-8 name=__codelineno-41-8 href=#__codelineno-41-8></a> <span class=n>registry</span><span class=o>=</span><span class=n>my_registry</span><span class=p>,</span>
|
|
<a id=__codelineno-41-9 name=__codelineno-41-9 href=#__codelineno-41-9></a><span class=p>)</span>
|
|
</code></pre></div> </li> <li> <p><code>Component.input</code> (and its type <code>ComponentInput</code>) is now deprecated. The <code>input</code> property will be removed in v1.</p> <p>Instead, use attributes directly on the Component instance.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-42-1 name=__codelineno-42-1 href=#__codelineno-42-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-42-2 name=__codelineno-42-2 href=#__codelineno-42-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
|
|
<a id=__codelineno-42-3 name=__codelineno-42-3 href=#__codelineno-42-3></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>args</span> <span class=o>==</span> <span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=mi>2</span><span class=p>,</span> <span class=mi>3</span><span class=p>]</span>
|
|
<a id=__codelineno-42-4 name=__codelineno-42-4 href=#__codelineno-42-4></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>kwargs</span> <span class=o>==</span> <span class=p>{</span><span class=s2>"a"</span><span class=p>:</span> <span class=mi>1</span><span class=p>,</span> <span class=s2>"b"</span><span class=p>:</span> <span class=mi>2</span><span class=p>}</span>
|
|
<a id=__codelineno-42-5 name=__codelineno-42-5 href=#__codelineno-42-5></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>slots</span> <span class=o>==</span> <span class=p>{</span><span class=s2>"my_slot"</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>}</span>
|
|
<a id=__codelineno-42-6 name=__codelineno-42-6 href=#__codelineno-42-6></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>context</span> <span class=o>==</span> <span class=p>{</span><span class=s2>"my_slot"</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>}</span>
|
|
<a id=__codelineno-42-7 name=__codelineno-42-7 href=#__codelineno-42-7></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>deps_strategy</span> <span class=o>==</span> <span class=s2>"document"</span>
|
|
<a id=__codelineno-42-8 name=__codelineno-42-8 href=#__codelineno-42-8></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>type</span> <span class=o>==</span> <span class=s2>"document"</span>
|
|
<a id=__codelineno-42-9 name=__codelineno-42-9 href=#__codelineno-42-9></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>render_dependencies</span> <span class=o>==</span> <span class=kc>True</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-43-1 name=__codelineno-43-1 href=#__codelineno-43-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-43-2 name=__codelineno-43-2 href=#__codelineno-43-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
|
|
<a id=__codelineno-43-3 name=__codelineno-43-3 href=#__codelineno-43-3></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>args</span> <span class=o>==</span> <span class=p>[</span><span class=mi>1</span><span class=p>,</span> <span class=mi>2</span><span class=p>,</span> <span class=mi>3</span><span class=p>]</span>
|
|
<a id=__codelineno-43-4 name=__codelineno-43-4 href=#__codelineno-43-4></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span> <span class=o>==</span> <span class=p>{</span><span class=s2>"a"</span><span class=p>:</span> <span class=mi>1</span><span class=p>,</span> <span class=s2>"b"</span><span class=p>:</span> <span class=mi>2</span><span class=p>}</span>
|
|
<a id=__codelineno-43-5 name=__codelineno-43-5 href=#__codelineno-43-5></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>slots</span> <span class=o>==</span> <span class=p>{</span><span class=s2>"my_slot"</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>}</span>
|
|
<a id=__codelineno-43-6 name=__codelineno-43-6 href=#__codelineno-43-6></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>context</span> <span class=o>==</span> <span class=p>{</span><span class=s2>"my_slot"</span><span class=p>:</span> <span class=s2>"CONTENT"</span><span class=p>}</span>
|
|
<a id=__codelineno-43-7 name=__codelineno-43-7 href=#__codelineno-43-7></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>deps_strategy</span> <span class=o>==</span> <span class=s2>"document"</span>
|
|
<a id=__codelineno-43-8 name=__codelineno-43-8 href=#__codelineno-43-8></a> <span class=k>assert</span> <span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>deps_strategy</span> <span class=o>!=</span> <span class=s2>"ignore"</span><span class=p>)</span> <span class=ow>is</span> <span class=kc>True</span>
|
|
</code></pre></div> </li> <li> <p>Component method <code>on_render_after</code> was updated to receive also <code>error</code> field.</p> <p>For backwards compatibility, the <code>error</code> field can be omitted until v1.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-44-1 name=__codelineno-44-1 href=#__codelineno-44-1></a><span class=k>def</span><span class=w> </span><span class=nf>on_render_after</span><span class=p>(</span>
|
|
<a id=__codelineno-44-2 name=__codelineno-44-2 href=#__codelineno-44-2></a> <span class=bp>self</span><span class=p>,</span>
|
|
<a id=__codelineno-44-3 name=__codelineno-44-3 href=#__codelineno-44-3></a> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span>
|
|
<a id=__codelineno-44-4 name=__codelineno-44-4 href=#__codelineno-44-4></a> <span class=n>template</span><span class=p>:</span> <span class=n>Template</span><span class=p>,</span>
|
|
<a id=__codelineno-44-5 name=__codelineno-44-5 href=#__codelineno-44-5></a> <span class=n>html</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span>
|
|
<a id=__codelineno-44-6 name=__codelineno-44-6 href=#__codelineno-44-6></a><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-44-7 name=__codelineno-44-7 href=#__codelineno-44-7></a> <span class=k>pass</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-45-1 name=__codelineno-45-1 href=#__codelineno-45-1></a><span class=k>def</span><span class=w> </span><span class=nf>on_render_after</span><span class=p>(</span>
|
|
<a id=__codelineno-45-2 name=__codelineno-45-2 href=#__codelineno-45-2></a> <span class=bp>self</span><span class=p>,</span>
|
|
<a id=__codelineno-45-3 name=__codelineno-45-3 href=#__codelineno-45-3></a> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span>
|
|
<a id=__codelineno-45-4 name=__codelineno-45-4 href=#__codelineno-45-4></a> <span class=n>template</span><span class=p>:</span> <span class=n>Template</span><span class=p>,</span>
|
|
<a id=__codelineno-45-5 name=__codelineno-45-5 href=#__codelineno-45-5></a> <span class=n>html</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>],</span>
|
|
<a id=__codelineno-45-6 name=__codelineno-45-6 href=#__codelineno-45-6></a> <span class=n>error</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=ne>Exception</span><span class=p>],</span>
|
|
<a id=__codelineno-45-7 name=__codelineno-45-7 href=#__codelineno-45-7></a><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-45-8 name=__codelineno-45-8 href=#__codelineno-45-8></a> <span class=k>pass</span>
|
|
</code></pre></div> </li> <li> <p>If you are using the Components as views, the way to access the component class is now different.</p> <p>Instead of <code>self.component</code>, use <code>self.component_cls</code>. <code>self.component</code> will be removed in v1.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-46-1 name=__codelineno-46-1 href=#__codelineno-46-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyView</span><span class=p>(</span><span class=n>View</span><span class=p>):</span>
|
|
<a id=__codelineno-46-2 name=__codelineno-46-2 href=#__codelineno-46-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
|
<a id=__codelineno-46-3 name=__codelineno-46-3 href=#__codelineno-46-3></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>component</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=n>request</span><span class=o>=</span><span class=n>request</span><span class=p>)</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-47-1 name=__codelineno-47-1 href=#__codelineno-47-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyView</span><span class=p>(</span><span class=n>View</span><span class=p>):</span>
|
|
<a id=__codelineno-47-2 name=__codelineno-47-2 href=#__codelineno-47-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
|
|
<a id=__codelineno-47-3 name=__codelineno-47-3 href=#__codelineno-47-3></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span><span class=n>request</span><span class=o>=</span><span class=n>request</span><span class=p>)</span>
|
|
</code></pre></div> </li> </ul> <p><strong>Extensions</strong></p> <ul> <li> <p>In the <code>on_component_data()</code> extension hook, the <code>context_data</code> field of the context object was superseded by <code>template_data</code>.</p> <p>The <code>context_data</code> field will be removed in v1.0.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-48-1 name=__codelineno-48-1 href=#__codelineno-48-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-48-2 name=__codelineno-48-2 href=#__codelineno-48-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentDataContext</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-48-3 name=__codelineno-48-3 href=#__codelineno-48-3></a> <span class=n>ctx</span><span class=o>.</span><span class=n>context_data</span><span class=p>[</span><span class=s2>"my_template_var"</span><span class=p>]</span> <span class=o>=</span> <span class=s2>"my_value"</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-49-1 name=__codelineno-49-1 href=#__codelineno-49-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-49-2 name=__codelineno-49-2 href=#__codelineno-49-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnComponentDataContext</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-49-3 name=__codelineno-49-3 href=#__codelineno-49-3></a> <span class=n>ctx</span><span class=o>.</span><span class=n>template_data</span><span class=p>[</span><span class=s2>"my_template_var"</span><span class=p>]</span> <span class=o>=</span> <span class=s2>"my_value"</span>
|
|
</code></pre></div> </li> <li> <p>When creating extensions, the <code>ComponentExtension.ExtensionClass</code> attribute was renamed to <code>ComponentConfig</code>.</p> <p>The old name is deprecated and will be removed in v1.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-50-1 name=__codelineno-50-1 href=#__codelineno-50-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span>
|
|
<a id=__codelineno-50-2 name=__codelineno-50-2 href=#__codelineno-50-2></a>
|
|
<a id=__codelineno-50-3 name=__codelineno-50-3 href=#__codelineno-50-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-50-4 name=__codelineno-50-4 href=#__codelineno-50-4></a> <span class=k>class</span><span class=w> </span><span class=nc>ExtensionClass</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=o>.</span><span class=n>ExtensionClass</span><span class=p>):</span>
|
|
<a id=__codelineno-50-5 name=__codelineno-50-5 href=#__codelineno-50-5></a> <span class=k>pass</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-51-1 name=__codelineno-51-1 href=#__codelineno-51-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>ExtensionComponentConfig</span>
|
|
<a id=__codelineno-51-2 name=__codelineno-51-2 href=#__codelineno-51-2></a>
|
|
<a id=__codelineno-51-3 name=__codelineno-51-3 href=#__codelineno-51-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-51-4 name=__codelineno-51-4 href=#__codelineno-51-4></a> <span class=k>class</span><span class=w> </span><span class=nc>ComponentConfig</span><span class=p>(</span><span class=n>ExtensionComponentConfig</span><span class=p>):</span>
|
|
<a id=__codelineno-51-5 name=__codelineno-51-5 href=#__codelineno-51-5></a> <span class=k>pass</span>
|
|
</code></pre></div> </li> <li> <p>When creating extensions, to access the Component class from within the methods of the extension nested classes, use <code>component_cls</code>.</p> <p>Previously this field was named <code>component_class</code>. The old name is deprecated and will be removed in v1.</p> </li> </ul> <p><code>ComponentExtension.ExtensionClass</code> attribute was renamed to <code>ComponentConfig</code>.</p> <div class=codehilite><pre><span></span><code><span class=n>The</span> <span class=n>old</span> <span class=n>name</span> <span class=ow>is</span> <span class=n>deprecated</span> <span class=ow>and</span> <span class=n>will</span> <span class=n>be</span> <span class=n>removed</span> <span class=ow>in</span> <span class=n>v1</span><span class=o>.</span>
|
|
|
|
<span class=n>Before</span><span class=p>:</span>
|
|
|
|
<span class=err>```</span><span class=n>py</span>
|
|
<span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>ExtensionComponentConfig</span>
|
|
|
|
<span class=k>class</span><span class=w> </span><span class=nc>LoggerExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<span class=n>name</span> <span class=o>=</span> <span class=s2>"logger"</span>
|
|
|
|
<span class=k>class</span><span class=w> </span><span class=nc>ComponentConfig</span><span class=p>(</span><span class=n>ExtensionComponentConfig</span><span class=p>):</span>
|
|
<span class=k>def</span><span class=w> </span><span class=nf>log</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>msg</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>"</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>component_class</span><span class=o>.</span><span class=vm>__name__</span><span class=si>}</span><span class=s2>: </span><span class=si>{</span><span class=n>msg</span><span class=si>}</span><span class=s2>"</span><span class=p>)</span>
|
|
<span class=err>```</span>
|
|
|
|
<span class=n>After</span><span class=p>:</span>
|
|
|
|
<span class=err>```</span><span class=n>py</span>
|
|
<span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>ExtensionComponentConfig</span>
|
|
|
|
<span class=k>class</span><span class=w> </span><span class=nc>LoggerExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<span class=n>name</span> <span class=o>=</span> <span class=s2>"logger"</span>
|
|
|
|
<span class=k>class</span><span class=w> </span><span class=nc>ComponentConfig</span><span class=p>(</span><span class=n>ExtensionComponentConfig</span><span class=p>):</span>
|
|
<span class=k>def</span><span class=w> </span><span class=nf>log</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>msg</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<span class=nb>print</span><span class=p>(</span><span class=sa>f</span><span class=s2>"</span><span class=si>{</span><span class=bp>self</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=vm>__name__</span><span class=si>}</span><span class=s2>: </span><span class=si>{</span><span class=n>msg</span><span class=si>}</span><span class=s2>"</span><span class=p>)</span>
|
|
<span class=err>```</span>
|
|
</code></pre></div> <p><strong>Slots</strong></p> <ul> <li> <p><code>SlotContent</code> was renamed to <code>SlotInput</code>. The old name is deprecated and will be removed in v1.</p> </li> <li> <p><code>SlotRef</code> was renamed to <code>SlotFallback</code>. The old name is deprecated and will be removed in v1.</p> </li> <li> <p>The <code>default</code> kwarg in <code>{% fill %}</code> tag was renamed to <code>fallback</code>. The old name is deprecated and will be removed in v1.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-54-1 name=__codelineno-54-1 href=#__codelineno-54-1></a><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"footer"</span> <span class=nv>default</span><span class=o>=</span><span class=s2>"footer"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-54-2 name=__codelineno-54-2 href=#__codelineno-54-2></a><span class=x> </span><span class=cp>{{</span> <span class=nv>footer</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-54-3 name=__codelineno-54-3 href=#__codelineno-54-3></a><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-55-1 name=__codelineno-55-1 href=#__codelineno-55-1></a><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"footer"</span> <span class=nv>fallback</span><span class=o>=</span><span class=s2>"footer"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-55-2 name=__codelineno-55-2 href=#__codelineno-55-2></a><span class=x> </span><span class=cp>{{</span> <span class=nv>footer</span> <span class=cp>}}</span>
|
|
<a id=__codelineno-55-3 name=__codelineno-55-3 href=#__codelineno-55-3></a><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
|
|
</code></pre></div> </li> <li> <p>The template variable <code>{{ component_vars.is_filled }}</code> is now deprecated. Will be removed in v1. Use <code>{{ component_vars.slots }}</code> instead.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-56-1 name=__codelineno-56-1 href=#__codelineno-56-1></a><span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.is_filled.footer</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-2 name=__codelineno-56-2 href=#__codelineno-56-2></a><span class=x> <div></span>
|
|
<a id=__codelineno-56-3 name=__codelineno-56-3 href=#__codelineno-56-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"footer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-56-4 name=__codelineno-56-4 href=#__codelineno-56-4></a><span class=x> </div></span>
|
|
<a id=__codelineno-56-5 name=__codelineno-56-5 href=#__codelineno-56-5></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-57-1 name=__codelineno-57-1 href=#__codelineno-57-1></a><span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.slots.footer</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-57-2 name=__codelineno-57-2 href=#__codelineno-57-2></a><span class=x> <div></span>
|
|
<a id=__codelineno-57-3 name=__codelineno-57-3 href=#__codelineno-57-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"footer"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-57-4 name=__codelineno-57-4 href=#__codelineno-57-4></a><span class=x> </div></span>
|
|
<a id=__codelineno-57-5 name=__codelineno-57-5 href=#__codelineno-57-5></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>NOTE: <code>component_vars.is_filled</code> automatically escaped slot names, so that even slot names that are not valid python identifiers could be set as slot names. <code>component_vars.slots</code> no longer does that.</p> </li> <li> <p>Component attribute <code>Component.is_filled</code> is now deprecated. Will be removed in v1. Use <code>Component.slots</code> instead.</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-58-1 name=__codelineno-58-1 href=#__codelineno-58-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-58-2 name=__codelineno-58-2 href=#__codelineno-58-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-58-3 name=__codelineno-58-3 href=#__codelineno-58-3></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>is_filled</span><span class=o>.</span><span class=n>footer</span><span class=p>:</span>
|
|
<a id=__codelineno-58-4 name=__codelineno-58-4 href=#__codelineno-58-4></a> <span class=n>color</span> <span class=o>=</span> <span class=s2>"red"</span>
|
|
<a id=__codelineno-58-5 name=__codelineno-58-5 href=#__codelineno-58-5></a> <span class=k>else</span><span class=p>:</span>
|
|
<a id=__codelineno-58-6 name=__codelineno-58-6 href=#__codelineno-58-6></a> <span class=n>color</span> <span class=o>=</span> <span class=s2>"blue"</span>
|
|
<a id=__codelineno-58-7 name=__codelineno-58-7 href=#__codelineno-58-7></a>
|
|
<a id=__codelineno-58-8 name=__codelineno-58-8 href=#__codelineno-58-8></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-58-9 name=__codelineno-58-9 href=#__codelineno-58-9></a> <span class=s2>"color"</span><span class=p>:</span> <span class=n>color</span><span class=p>,</span>
|
|
<a id=__codelineno-58-10 name=__codelineno-58-10 href=#__codelineno-58-10></a> <span class=p>}</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-59-1 name=__codelineno-59-1 href=#__codelineno-59-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-59-2 name=__codelineno-59-2 href=#__codelineno-59-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-59-3 name=__codelineno-59-3 href=#__codelineno-59-3></a> <span class=k>if</span> <span class=s2>"footer"</span> <span class=ow>in</span> <span class=n>slots</span><span class=p>:</span>
|
|
<a id=__codelineno-59-4 name=__codelineno-59-4 href=#__codelineno-59-4></a> <span class=n>color</span> <span class=o>=</span> <span class=s2>"red"</span>
|
|
<a id=__codelineno-59-5 name=__codelineno-59-5 href=#__codelineno-59-5></a> <span class=k>else</span><span class=p>:</span>
|
|
<a id=__codelineno-59-6 name=__codelineno-59-6 href=#__codelineno-59-6></a> <span class=n>color</span> <span class=o>=</span> <span class=s2>"blue"</span>
|
|
<a id=__codelineno-59-7 name=__codelineno-59-7 href=#__codelineno-59-7></a>
|
|
<a id=__codelineno-59-8 name=__codelineno-59-8 href=#__codelineno-59-8></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-59-9 name=__codelineno-59-9 href=#__codelineno-59-9></a> <span class=s2>"color"</span><span class=p>:</span> <span class=n>color</span><span class=p>,</span>
|
|
<a id=__codelineno-59-10 name=__codelineno-59-10 href=#__codelineno-59-10></a> <span class=p>}</span>
|
|
</code></pre></div> <p>NOTE: <code>Component.is_filled</code> automatically escaped slot names, so that even slot names that are not valid python identifiers could be set as slot names. <code>Component.slots</code> no longer does that.</p> </li> </ul> <p><strong>Miscellaneous</strong></p> <ul> <li> <p>Template caching with <code>cached_template()</code> helper and <code>template_cache_size</code> setting is deprecated. These will be removed in v1.</p> <p>This feature made sense if you were dynamically generating templates for components using <code>Component.get_template_string()</code> and <code>Component.get_template()</code>.</p> <p>However, in v1, each Component will have at most one static template. This static template is cached internally per component class, and reused across renders.</p> <p>This makes the template caching feature obsolete.</p> <p>If you relied on <code>cached_template()</code>, you should either:</p> <ol> <li>Wrap the templates as Components.</li> <li>Manage the cache of Templates yourself.</li> </ol> </li> <li> <p>The <code>debug_highlight_components</code> and <code>debug_highlight_slots</code> settings are deprecated. These will be removed in v1.</p> <p>The debug highlighting feature was re-implemented as an extension. As such, the recommended way for enabling it has changed:</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-60-1 name=__codelineno-60-1 href=#__codelineno-60-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
|
|
<a id=__codelineno-60-2 name=__codelineno-60-2 href=#__codelineno-60-2></a> <span class=n>debug_highlight_components</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span>
|
|
<a id=__codelineno-60-3 name=__codelineno-60-3 href=#__codelineno-60-3></a> <span class=n>debug_highlight_slots</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span>
|
|
<a id=__codelineno-60-4 name=__codelineno-60-4 href=#__codelineno-60-4></a><span class=p>)</span>
|
|
</code></pre></div> <p>After:</p> <p>Set <code>extensions_defaults</code> in your <code>settings.py</code> file.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-61-1 name=__codelineno-61-1 href=#__codelineno-61-1></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
|
|
<a id=__codelineno-61-2 name=__codelineno-61-2 href=#__codelineno-61-2></a> <span class=n>extensions_defaults</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-61-3 name=__codelineno-61-3 href=#__codelineno-61-3></a> <span class=s2>"debug_highlight"</span><span class=p>:</span> <span class=p>{</span>
|
|
<a id=__codelineno-61-4 name=__codelineno-61-4 href=#__codelineno-61-4></a> <span class=s2>"highlight_components"</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
|
|
<a id=__codelineno-61-5 name=__codelineno-61-5 href=#__codelineno-61-5></a> <span class=s2>"highlight_slots"</span><span class=p>:</span> <span class=kc>True</span><span class=p>,</span>
|
|
<a id=__codelineno-61-6 name=__codelineno-61-6 href=#__codelineno-61-6></a> <span class=p>},</span>
|
|
<a id=__codelineno-61-7 name=__codelineno-61-7 href=#__codelineno-61-7></a> <span class=p>},</span>
|
|
<a id=__codelineno-61-8 name=__codelineno-61-8 href=#__codelineno-61-8></a><span class=p>)</span>
|
|
</code></pre></div> <p>Alternatively, you can enable highlighting for specific components by setting <code>Component.DebugHighlight.highlight_components</code> to <code>True</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-62-1 name=__codelineno-62-1 href=#__codelineno-62-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-62-2 name=__codelineno-62-2 href=#__codelineno-62-2></a> <span class=k>class</span><span class=w> </span><span class=nc>DebugHighlight</span><span class=p>:</span>
|
|
<a id=__codelineno-62-3 name=__codelineno-62-3 href=#__codelineno-62-3></a> <span class=n>highlight_components</span> <span class=o>=</span> <span class=kc>True</span>
|
|
<a id=__codelineno-62-4 name=__codelineno-62-4 href=#__codelineno-62-4></a> <span class=n>highlight_slots</span> <span class=o>=</span> <span class=kc>True</span>
|
|
</code></pre></div> </li> </ul> <h4 id=feat>Feat<a class=headerlink href=#feat title="Permanent link">¤</a></h4> <ul> <li> <p>New method to render template variables - <code>get_template_data()</code></p> <p><code>get_template_data()</code> behaves the same way as <code>get_context_data()</code>, but has a different function signature to accept also slots and context.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-63-1 name=__codelineno-63-1 href=#__codelineno-63-1></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-63-2 name=__codelineno-63-2 href=#__codelineno-63-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-63-3 name=__codelineno-63-3 href=#__codelineno-63-3></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-63-4 name=__codelineno-63-4 href=#__codelineno-63-4></a> <span class=s2>"val1"</span><span class=p>:</span> <span class=n>args</span><span class=p>[</span><span class=mi>0</span><span class=p>],</span>
|
|
<a id=__codelineno-63-5 name=__codelineno-63-5 href=#__codelineno-63-5></a> <span class=s2>"val2"</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>"field"</span><span class=p>],</span>
|
|
<a id=__codelineno-63-6 name=__codelineno-63-6 href=#__codelineno-63-6></a> <span class=p>}</span>
|
|
</code></pre></div> <p>If you define <code>Component.Args</code>, <code>Component.Kwargs</code>, <code>Component.Slots</code>, then the <code>args</code>, <code>kwargs</code>, <code>slots</code> arguments will be instances of these classes:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-64-1 name=__codelineno-64-1 href=#__codelineno-64-1></a><span class=k>class</span><span class=w> </span><span class=nc>Button</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-64-2 name=__codelineno-64-2 href=#__codelineno-64-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-64-3 name=__codelineno-64-3 href=#__codelineno-64-3></a> <span class=n>field1</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-64-4 name=__codelineno-64-4 href=#__codelineno-64-4></a>
|
|
<a id=__codelineno-64-5 name=__codelineno-64-5 href=#__codelineno-64-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-64-6 name=__codelineno-64-6 href=#__codelineno-64-6></a> <span class=n>field2</span><span class=p>:</span> <span class=nb>int</span>
|
|
<a id=__codelineno-64-7 name=__codelineno-64-7 href=#__codelineno-64-7></a>
|
|
<a id=__codelineno-64-8 name=__codelineno-64-8 href=#__codelineno-64-8></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>:</span> <span class=n>Args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>:</span> <span class=n>Kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-64-9 name=__codelineno-64-9 href=#__codelineno-64-9></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-64-10 name=__codelineno-64-10 href=#__codelineno-64-10></a> <span class=s2>"val1"</span><span class=p>:</span> <span class=n>args</span><span class=o>.</span><span class=n>field1</span><span class=p>,</span>
|
|
<a id=__codelineno-64-11 name=__codelineno-64-11 href=#__codelineno-64-11></a> <span class=s2>"val2"</span><span class=p>:</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>field2</span><span class=p>,</span>
|
|
<a id=__codelineno-64-12 name=__codelineno-64-12 href=#__codelineno-64-12></a> <span class=p>}</span>
|
|
</code></pre></div> </li> <li> <p>Input validation is now part of the render process.</p> <p>When you specify the input types (such as <code>Component.Args</code>, <code>Component.Kwargs</code>, etc), the actual inputs to data methods (<code>Component.get_template_data()</code>, etc) will be instances of the types you specified.</p> <p>This practically brings back input validation, because the instantiation of the types will raise an error if the inputs are not valid.</p> <p>Read more on <a href=https://django-components.github.io/django-components/latest/concepts/fundamentals/typing_and_validation/ >Typing and validation</a></p> </li> <li> <p>Render emails or other non-browser HTML with new "dependencies strategies"</p> <p>When rendering a component with <code>Component.render()</code> or <code>Component.render_to_response()</code>, the <code>deps_strategy</code> kwarg (previously <code>type</code>) now accepts additional options:</p> <ul> <li><code>"simple"</code></li> <li><code>"prepend"</code></li> <li><code>"append"</code></li> <li><code>"ignore"</code></li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-65-1 name=__codelineno-65-1 href=#__codelineno-65-1></a><span class=n>Calendar</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
|
|
<a id=__codelineno-65-2 name=__codelineno-65-2 href=#__codelineno-65-2></a> <span class=n>request</span><span class=o>=</span><span class=n>request</span><span class=p>,</span>
|
|
<a id=__codelineno-65-3 name=__codelineno-65-3 href=#__codelineno-65-3></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-65-4 name=__codelineno-65-4 href=#__codelineno-65-4></a> <span class=s2>"date"</span><span class=p>:</span> <span class=n>request</span><span class=o>.</span><span class=n>GET</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>"date"</span><span class=p>,</span> <span class=s2>""</span><span class=p>),</span>
|
|
<a id=__codelineno-65-5 name=__codelineno-65-5 href=#__codelineno-65-5></a> <span class=p>},</span>
|
|
<a id=__codelineno-65-6 name=__codelineno-65-6 href=#__codelineno-65-6></a> <span class=n>deps_strategy</span><span class=o>=</span><span class=s2>"append"</span><span class=p>,</span>
|
|
<a id=__codelineno-65-7 name=__codelineno-65-7 href=#__codelineno-65-7></a><span class=p>)</span>
|
|
</code></pre></div> <p>Comparison of dependencies render strategies:</p> <ul> <li><code>"document"</code><ul> <li>Smartly inserts JS / CSS into placeholders or into <code><head></code> and <code><body></code> tags.</li> <li>Inserts extra script to allow <code>fragment</code> strategy to work.</li> <li>Assumes the HTML will be rendered in a JS-enabled browser.</li> </ul> </li> <li><code>"fragment"</code><ul> <li>A lightweight HTML fragment to be inserted into a document with AJAX.</li> <li>Ignores placeholders and any <code><head></code> / <code><body></code> tags.</li> <li>No JS / CSS included.</li> </ul> </li> <li><code>"simple"</code><ul> <li>Smartly insert JS / CSS into placeholders or into <code><head></code> and <code><body></code> tags.</li> <li>No extra script loaded.</li> </ul> </li> <li><code>"prepend"</code><ul> <li>Insert JS / CSS before the rendered HTML.</li> <li>Ignores placeholders and any <code><head></code> / <code><body></code> tags.</li> <li>No extra script loaded.</li> </ul> </li> <li><code>"append"</code><ul> <li>Insert JS / CSS after the rendered HTML.</li> <li>Ignores placeholders and any <code><head></code> / <code><body></code> tags.</li> <li>No extra script loaded.</li> </ul> </li> <li><code>"ignore"</code><ul> <li>Rendered HTML is left as-is. You can still process it with a different strategy later with <code>render_dependencies()</code>.</li> <li>Used for inserting rendered HTML into other components.</li> </ul> </li> </ul> <p>See <a href=https://django-components.github.io/django-components/0.140.1/concepts/advanced/rendering_js_css/ >Dependencies rendering</a> for more info.</p> </li> <li> <p>New <code>Component.args</code>, <code>Component.kwargs</code>, <code>Component.slots</code> attributes available on the component class itself.</p> <p>These attributes are the same as the ones available in <code>Component.get_template_data()</code>.</p> <p>You can use these in other methods like <code>Component.on_render_before()</code> or <code>Component.on_render_after()</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-66-1 name=__codelineno-66-1 href=#__codelineno-66-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotInput</span>
|
|
<a id=__codelineno-66-2 name=__codelineno-66-2 href=#__codelineno-66-2></a>
|
|
<a id=__codelineno-66-3 name=__codelineno-66-3 href=#__codelineno-66-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-66-4 name=__codelineno-66-4 href=#__codelineno-66-4></a> <span class=k>class</span><span class=w> </span><span class=nc>Args</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-66-5 name=__codelineno-66-5 href=#__codelineno-66-5></a> <span class=n>page</span><span class=p>:</span> <span class=nb>int</span>
|
|
<a id=__codelineno-66-6 name=__codelineno-66-6 href=#__codelineno-66-6></a>
|
|
<a id=__codelineno-66-7 name=__codelineno-66-7 href=#__codelineno-66-7></a> <span class=k>class</span><span class=w> </span><span class=nc>Kwargs</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-66-8 name=__codelineno-66-8 href=#__codelineno-66-8></a> <span class=n>per_page</span><span class=p>:</span> <span class=nb>int</span>
|
|
<a id=__codelineno-66-9 name=__codelineno-66-9 href=#__codelineno-66-9></a>
|
|
<a id=__codelineno-66-10 name=__codelineno-66-10 href=#__codelineno-66-10></a> <span class=k>class</span><span class=w> </span><span class=nc>Slots</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-66-11 name=__codelineno-66-11 href=#__codelineno-66-11></a> <span class=n>content</span><span class=p>:</span> <span class=n>SlotInput</span>
|
|
<a id=__codelineno-66-12 name=__codelineno-66-12 href=#__codelineno-66-12></a>
|
|
<a id=__codelineno-66-13 name=__codelineno-66-13 href=#__codelineno-66-13></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>template</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Template</span><span class=p>])</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-66-14 name=__codelineno-66-14 href=#__codelineno-66-14></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>args</span><span class=o>.</span><span class=n>page</span> <span class=o>==</span> <span class=mi>123</span>
|
|
<a id=__codelineno-66-15 name=__codelineno-66-15 href=#__codelineno-66-15></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span><span class=o>.</span><span class=n>per_page</span> <span class=o>==</span> <span class=mi>10</span>
|
|
<a id=__codelineno-66-16 name=__codelineno-66-16 href=#__codelineno-66-16></a> <span class=n>content_html</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=o>.</span><span class=n>content</span><span class=p>()</span>
|
|
</code></pre></div> <p>Same as with the parameters in <code>Component.get_template_data()</code>, they will be instances of the <code>Args</code>, <code>Kwargs</code>, <code>Slots</code> classes if defined, or plain lists / dictionaries otherwise.</p> </li> <li> <p>4 attributes that were previously available only under the <code>Component.input</code> attribute are now available directly on the Component instance:</p> <ul> <li><code>Component.raw_args</code></li> <li><code>Component.raw_kwargs</code></li> <li><code>Component.raw_slots</code></li> <li><code>Component.deps_strategy</code></li> </ul> <p>The first 3 attributes are the same as the deprecated <code>Component.input.args</code>, <code>Component.input.kwargs</code>, <code>Component.input.slots</code> properties.</p> <p>Compared to the <code>Component.args</code> / <code>Component.kwargs</code> / <code>Component.slots</code> attributes, these "raw" attributes are not typed and will remain as plain lists / dictionaries even if you define the <code>Args</code>, <code>Kwargs</code>, <code>Slots</code> classes.</p> <p>The <code>Component.deps_strategy</code> attribute is the same as the deprecated <code>Component.input.deps_strategy</code> property.</p> </li> <li> <p>New template variables <code>{{ component_vars.args }}</code>, <code>{{ component_vars.kwargs }}</code>, <code>{{ component_vars.slots }}</code></p> <p>These attributes are the same as the ones available in <code>Component.get_template_data()</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-67-1 name=__codelineno-67-1 href=#__codelineno-67-1></a><span class=c>{# Typed #}</span>
|
|
<a id=__codelineno-67-2 name=__codelineno-67-2 href=#__codelineno-67-2></a><span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.args.page</span> <span class=o>==</span> <span class=m>123</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-67-3 name=__codelineno-67-3 href=#__codelineno-67-3></a><span class=x> <div></span>
|
|
<a id=__codelineno-67-4 name=__codelineno-67-4 href=#__codelineno-67-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"content"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-67-5 name=__codelineno-67-5 href=#__codelineno-67-5></a><span class=x> </div></span>
|
|
<a id=__codelineno-67-6 name=__codelineno-67-6 href=#__codelineno-67-6></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-67-7 name=__codelineno-67-7 href=#__codelineno-67-7></a>
|
|
<a id=__codelineno-67-8 name=__codelineno-67-8 href=#__codelineno-67-8></a><span class=c>{# Untyped #}</span>
|
|
<a id=__codelineno-67-9 name=__codelineno-67-9 href=#__codelineno-67-9></a><span class=cp>{%</span> <span class=k>if</span> <span class=nv>component_vars.args.0</span> <span class=o>==</span> <span class=m>123</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-67-10 name=__codelineno-67-10 href=#__codelineno-67-10></a><span class=x> <div></span>
|
|
<a id=__codelineno-67-11 name=__codelineno-67-11 href=#__codelineno-67-11></a><span class=x> </span><span class=cp>{%</span> <span class=k>slot</span> <span class=s2>"content"</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-67-12 name=__codelineno-67-12 href=#__codelineno-67-12></a><span class=x> </div></span>
|
|
<a id=__codelineno-67-13 name=__codelineno-67-13 href=#__codelineno-67-13></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Same as with the parameters in <code>Component.get_template_data()</code>, they will be instances of the <code>Args</code>, <code>Kwargs</code>, <code>Slots</code> classes if defined, or plain lists / dictionaries otherwise.</p> </li> <li> <p>New component lifecycle hook <code>Component.on_render()</code>.</p> <p>This hook is called when the component is being rendered.</p> <p>You can override this method to:</p> <ul> <li>Change what template gets rendered</li> <li>Modify the context</li> <li>Modify the rendered output after it has been rendered</li> <li>Handle errors</li> </ul> <p>See <a href=https://django-components.github.io/django-components/0.140.1/concepts/advanced/hooks/#on_render>on_render</a> for more info.</p> </li> <li> <p><code>get_component_url()</code> now optionally accepts <code>query</code> and <code>fragment</code> arguments.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-68-1 name=__codelineno-68-1 href=#__codelineno-68-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>get_component_url</span>
|
|
<a id=__codelineno-68-2 name=__codelineno-68-2 href=#__codelineno-68-2></a>
|
|
<a id=__codelineno-68-3 name=__codelineno-68-3 href=#__codelineno-68-3></a><span class=n>url</span> <span class=o>=</span> <span class=n>get_component_url</span><span class=p>(</span>
|
|
<a id=__codelineno-68-4 name=__codelineno-68-4 href=#__codelineno-68-4></a> <span class=n>MyComponent</span><span class=p>,</span>
|
|
<a id=__codelineno-68-5 name=__codelineno-68-5 href=#__codelineno-68-5></a> <span class=n>query</span><span class=o>=</span><span class=p>{</span><span class=s2>"foo"</span><span class=p>:</span> <span class=s2>"bar"</span><span class=p>},</span>
|
|
<a id=__codelineno-68-6 name=__codelineno-68-6 href=#__codelineno-68-6></a> <span class=n>fragment</span><span class=o>=</span><span class=s2>"baz"</span><span class=p>,</span>
|
|
<a id=__codelineno-68-7 name=__codelineno-68-7 href=#__codelineno-68-7></a><span class=p>)</span>
|
|
<a id=__codelineno-68-8 name=__codelineno-68-8 href=#__codelineno-68-8></a><span class=c1># /components/ext/view/components/c1ab2c3?foo=bar#baz</span>
|
|
</code></pre></div> </li> <li> <p>The <code>BaseNode</code> class has a new <code>contents</code> attribute, which contains the raw contents (string) of the tag body.</p> <p>This is relevant when you define custom template tags with <code>@template_tag</code> decorator or <code>BaseNode</code> class.</p> <p>When you define a custom template tag like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-69-1 name=__codelineno-69-1 href=#__codelineno-69-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>BaseNode</span><span class=p>,</span> <span class=n>template_tag</span>
|
|
<a id=__codelineno-69-2 name=__codelineno-69-2 href=#__codelineno-69-2></a>
|
|
<a id=__codelineno-69-3 name=__codelineno-69-3 href=#__codelineno-69-3></a><span class=nd>@template_tag</span><span class=p>(</span>
|
|
<a id=__codelineno-69-4 name=__codelineno-69-4 href=#__codelineno-69-4></a> <span class=n>library</span><span class=p>,</span>
|
|
<a id=__codelineno-69-5 name=__codelineno-69-5 href=#__codelineno-69-5></a> <span class=n>tag</span><span class=o>=</span><span class=s2>"mytag"</span><span class=p>,</span>
|
|
<a id=__codelineno-69-6 name=__codelineno-69-6 href=#__codelineno-69-6></a> <span class=n>end_tag</span><span class=o>=</span><span class=s2>"endmytag"</span><span class=p>,</span>
|
|
<a id=__codelineno-69-7 name=__codelineno-69-7 href=#__codelineno-69-7></a> <span class=n>allowed_flags</span><span class=o>=</span><span class=p>[</span><span class=s2>"required"</span><span class=p>]</span>
|
|
<a id=__codelineno-69-8 name=__codelineno-69-8 href=#__codelineno-69-8></a><span class=p>)</span>
|
|
<a id=__codelineno-69-9 name=__codelineno-69-9 href=#__codelineno-69-9></a><span class=k>def</span><span class=w> </span><span class=nf>mytag</span><span class=p>(</span><span class=n>node</span><span class=p>:</span> <span class=n>BaseNode</span><span class=p>,</span> <span class=n>context</span><span class=p>:</span> <span class=n>Context</span><span class=p>,</span> <span class=n>name</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>)</span> <span class=o>-></span> <span class=nb>str</span><span class=p>:</span>
|
|
<a id=__codelineno-69-10 name=__codelineno-69-10 href=#__codelineno-69-10></a> <span class=nb>print</span><span class=p>(</span><span class=n>node</span><span class=o>.</span><span class=n>contents</span><span class=p>)</span>
|
|
<a id=__codelineno-69-11 name=__codelineno-69-11 href=#__codelineno-69-11></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>"Hello, </span><span class=si>{</span><span class=n>name</span><span class=si>}</span><span class=s2>!"</span>
|
|
</code></pre></div> <p>And render it like so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-70-1 name=__codelineno-70-1 href=#__codelineno-70-1></a><span class=cp>{%</span> <span class=k>mytag</span> <span class=nv>name</span><span class=o>=</span><span class=s2>"John"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-70-2 name=__codelineno-70-2 href=#__codelineno-70-2></a><span class=x> Hello, world!</span>
|
|
<a id=__codelineno-70-3 name=__codelineno-70-3 href=#__codelineno-70-3></a><span class=cp>{%</span> <span class=k>endmytag</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Then, the <code>contents</code> attribute of the <code>BaseNode</code> instance will contain the string <code>"Hello, world!"</code>.</p> </li> <li> <p>The <code>BaseNode</code> class also has two new metadata attributes:</p> <ul> <li><code>template_name</code> - the name of the template that rendered the node.</li> <li><code>template_component</code> - the component class that the template belongs to.</li> </ul> <p>This is useful for debugging purposes.</p> </li> <li> <p><code>Slot</code> class now has 3 new metadata fields:</p> <ol> <li> <p><code>Slot.contents</code> attribute contains the original contents:</p> <ul> <li>If <code>Slot</code> was created from <code>{% fill %}</code> tag, <code>Slot.contents</code> will contain the body of the <code>{% fill %}</code> tag.</li> <li>If <code>Slot</code> was created from string via <code>Slot("...")</code>, <code>Slot.contents</code> will contain that string.</li> <li>If <code>Slot</code> was created from a function, <code>Slot.contents</code> will contain that function.</li> </ul> </li> <li> <p><code>Slot.extra</code> attribute where you can put arbitrary metadata about the slot.</p> </li> <li> <p><code>Slot.fill_node</code> attribute tells where the slot comes from:</p> <ul> <li><code>FillNode</code> instance if the slot was created from <code>{% fill %}</code> tag.</li> <li><code>ComponentNode</code> instance if the slot was created as a default slot from a <code>{% component %}</code> tag.</li> <li><code>None</code> if the slot was created from a string, function, or <code>Slot</code> instance.</li> </ul> </li> </ol> <p>See <a href=https://django-components.github.io/django-components/0.140.1/concepts/fundamentals/slots/#slot-metadata>Slot metadata</a>.</p> </li> <li> <p><code>{% fill %}</code> tag now accepts <code>body</code> kwarg to pass a Slot instance to fill.</p> <p>First pass a <code>Slot</code> instance to the template with the <code>get_template_data()</code> method:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-71-1 name=__codelineno-71-1 href=#__codelineno-71-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>Slot</span>
|
|
<a id=__codelineno-71-2 name=__codelineno-71-2 href=#__codelineno-71-2></a>
|
|
<a id=__codelineno-71-3 name=__codelineno-71-3 href=#__codelineno-71-3></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-71-4 name=__codelineno-71-4 href=#__codelineno-71-4></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-71-5 name=__codelineno-71-5 href=#__codelineno-71-5></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-71-6 name=__codelineno-71-6 href=#__codelineno-71-6></a> <span class=s2>"my_slot"</span><span class=p>:</span> <span class=n>Slot</span><span class=p>(</span><span class=k>lambda</span> <span class=n>ctx</span><span class=p>:</span> <span class=s2>"Hello, world!"</span><span class=p>),</span>
|
|
<a id=__codelineno-71-7 name=__codelineno-71-7 href=#__codelineno-71-7></a> <span class=p>}</span>
|
|
</code></pre></div> <p>Then pass the slot to the <code>{% fill %}</code> tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-72-1 name=__codelineno-72-1 href=#__codelineno-72-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"table"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-72-2 name=__codelineno-72-2 href=#__codelineno-72-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>fill</span> <span class=s2>"pagination"</span> <span class=nv>body</span><span class=o>=</span><span class=nv>my_slot</span> <span class=o>/</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-72-3 name=__codelineno-72-3 href=#__codelineno-72-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> </li> <li> <p>You can now access the <code>{% component %}</code> tag (<code>ComponentNode</code> instance) from which a Component was created. Use <code>Component.node</code> to access it.</p> <p>This is mostly useful for extensions, which can use this to detect if the given Component comes from a <code>{% component %}</code> tag or from a different source (such as <code>Component.render()</code>).</p> <p><code>Component.node</code> is <code>None</code> if the component is created by <code>Component.render()</code> (but you can pass in the <code>node</code> kwarg yourself).</p> <div class=highlight><pre><span></span><code><a id=__codelineno-73-1 name=__codelineno-73-1 href=#__codelineno-73-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-73-2 name=__codelineno-73-2 href=#__codelineno-73-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
|
|
<a id=__codelineno-73-3 name=__codelineno-73-3 href=#__codelineno-73-3></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>node</span> <span class=ow>is</span> <span class=ow>not</span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-73-4 name=__codelineno-73-4 href=#__codelineno-73-4></a> <span class=k>assert</span> <span class=bp>self</span><span class=o>.</span><span class=n>node</span><span class=o>.</span><span class=n>name</span> <span class=o>==</span> <span class=s2>"my_component"</span>
|
|
</code></pre></div> </li> <li> <p>Node classes <code>ComponentNode</code>, <code>FillNode</code>, <code>ProvideNode</code>, and <code>SlotNode</code> are part of the public API.</p> <p>These classes are what is instantiated when you use <code>{% component %}</code>, <code>{% fill %}</code>, <code>{% provide %}</code>, and <code>{% slot %}</code> tags.</p> <p>You can for example use these for type hints:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-74-1 name=__codelineno-74-1 href=#__codelineno-74-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>ComponentNode</span>
|
|
<a id=__codelineno-74-2 name=__codelineno-74-2 href=#__codelineno-74-2></a>
|
|
<a id=__codelineno-74-3 name=__codelineno-74-3 href=#__codelineno-74-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-74-4 name=__codelineno-74-4 href=#__codelineno-74-4></a> <span class=k>def</span><span class=w> </span><span class=nf>get_template_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=p>,</span> <span class=n>context</span><span class=p>):</span>
|
|
<a id=__codelineno-74-5 name=__codelineno-74-5 href=#__codelineno-74-5></a> <span class=k>if</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>"show_owner"</span><span class=p>):</span>
|
|
<a id=__codelineno-74-6 name=__codelineno-74-6 href=#__codelineno-74-6></a> <span class=n>node</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>ComponentNode</span><span class=p>]</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>node</span>
|
|
<a id=__codelineno-74-7 name=__codelineno-74-7 href=#__codelineno-74-7></a> <span class=n>owner</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Component</span><span class=p>]</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>node</span><span class=o>.</span><span class=n>template_component</span>
|
|
<a id=__codelineno-74-8 name=__codelineno-74-8 href=#__codelineno-74-8></a> <span class=k>else</span><span class=p>:</span>
|
|
<a id=__codelineno-74-9 name=__codelineno-74-9 href=#__codelineno-74-9></a> <span class=n>node</span> <span class=o>=</span> <span class=kc>None</span>
|
|
<a id=__codelineno-74-10 name=__codelineno-74-10 href=#__codelineno-74-10></a> <span class=n>owner</span> <span class=o>=</span> <span class=kc>None</span>
|
|
<a id=__codelineno-74-11 name=__codelineno-74-11 href=#__codelineno-74-11></a>
|
|
<a id=__codelineno-74-12 name=__codelineno-74-12 href=#__codelineno-74-12></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-74-13 name=__codelineno-74-13 href=#__codelineno-74-13></a> <span class=s2>"owner"</span><span class=p>:</span> <span class=n>owner</span><span class=p>,</span>
|
|
<a id=__codelineno-74-14 name=__codelineno-74-14 href=#__codelineno-74-14></a> <span class=s2>"node"</span><span class=p>:</span> <span class=n>node</span><span class=p>,</span>
|
|
<a id=__codelineno-74-15 name=__codelineno-74-15 href=#__codelineno-74-15></a> <span class=p>}</span>
|
|
</code></pre></div> </li> <li> <p>Component caching can now take slots into account, by setting <code>Component.Cache.include_slots</code> to <code>True</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-75-1 name=__codelineno-75-1 href=#__codelineno-75-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-75-2 name=__codelineno-75-2 href=#__codelineno-75-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Cache</span><span class=p>:</span>
|
|
<a id=__codelineno-75-3 name=__codelineno-75-3 href=#__codelineno-75-3></a> <span class=n>enabled</span> <span class=o>=</span> <span class=kc>True</span>
|
|
<a id=__codelineno-75-4 name=__codelineno-75-4 href=#__codelineno-75-4></a> <span class=n>include_slots</span> <span class=o>=</span> <span class=kc>True</span>
|
|
</code></pre></div> <p>In which case the following two calls will generate separate cache entries:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-76-1 name=__codelineno-76-1 href=#__codelineno-76-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_component"</span> <span class=nv>position</span><span class=o>=</span><span class=s2>"left"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-76-2 name=__codelineno-76-2 href=#__codelineno-76-2></a><span class=x> Hello, Alice</span>
|
|
<a id=__codelineno-76-3 name=__codelineno-76-3 href=#__codelineno-76-3></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-76-4 name=__codelineno-76-4 href=#__codelineno-76-4></a>
|
|
<a id=__codelineno-76-5 name=__codelineno-76-5 href=#__codelineno-76-5></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>"my_component"</span> <span class=nv>position</span><span class=o>=</span><span class=s2>"left"</span> <span class=cp>%}</span>
|
|
<a id=__codelineno-76-6 name=__codelineno-76-6 href=#__codelineno-76-6></a><span class=x> Hello, Bob</span>
|
|
<a id=__codelineno-76-7 name=__codelineno-76-7 href=#__codelineno-76-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
|
|
</code></pre></div> <p>Same applies to <code>Component.render()</code> with string slots:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-77-1 name=__codelineno-77-1 href=#__codelineno-77-1></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-77-2 name=__codelineno-77-2 href=#__codelineno-77-2></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=s2>"position"</span><span class=p>:</span> <span class=s2>"left"</span><span class=p>},</span>
|
|
<a id=__codelineno-77-3 name=__codelineno-77-3 href=#__codelineno-77-3></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span><span class=s2>"content"</span><span class=p>:</span> <span class=s2>"Hello, Alice"</span><span class=p>}</span>
|
|
<a id=__codelineno-77-4 name=__codelineno-77-4 href=#__codelineno-77-4></a><span class=p>)</span>
|
|
<a id=__codelineno-77-5 name=__codelineno-77-5 href=#__codelineno-77-5></a><span class=n>MyComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
|
|
<a id=__codelineno-77-6 name=__codelineno-77-6 href=#__codelineno-77-6></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=s2>"position"</span><span class=p>:</span> <span class=s2>"left"</span><span class=p>},</span>
|
|
<a id=__codelineno-77-7 name=__codelineno-77-7 href=#__codelineno-77-7></a> <span class=n>slots</span><span class=o>=</span><span class=p>{</span><span class=s2>"content"</span><span class=p>:</span> <span class=s2>"Hello, Bob"</span><span class=p>}</span>
|
|
<a id=__codelineno-77-8 name=__codelineno-77-8 href=#__codelineno-77-8></a><span class=p>)</span>
|
|
</code></pre></div> <p>Read more on <a href=https://django-components.github.io/django-components/0.140.1/concepts/advanced/component_caching/ >Component caching</a>.</p> </li> <li> <p>New extension hook <code>on_slot_rendered()</code></p> <p>This hook is called when a slot is rendered, and allows you to access and/or modify the rendered result.</p> <p>This is used by the <a href=https://django-components.github.io/django-components/0.140.1/guides/other/troubleshooting/#component-and-slot-highlighting>"debug highlight" feature</a>.</p> <p>To modify the rendered result, return the new value:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-78-1 name=__codelineno-78-1 href=#__codelineno-78-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-78-2 name=__codelineno-78-2 href=#__codelineno-78-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_slot_rendered</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>ctx</span><span class=p>:</span> <span class=n>OnSlotRenderedContext</span><span class=p>)</span> <span class=o>-></span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]:</span>
|
|
<a id=__codelineno-78-3 name=__codelineno-78-3 href=#__codelineno-78-3></a> <span class=k>return</span> <span class=n>ctx</span><span class=o>.</span><span class=n>result</span> <span class=o>+</span> <span class=s2>"<!-- Hello, world! -->"</span>
|
|
</code></pre></div> <p>If you don't want to modify the rendered result, return <code>None</code>.</p> <p>See all <a href=https://django-components.github.io/django-components/0.140.1/reference/extension_hooks/ >Extension hooks</a>.</p> </li> <li> <p>When creating extensions, the previous syntax with <code>ComponentExtension.ExtensionClass</code> was causing Mypy errors, because Mypy doesn't allow using class attributes as bases:</p> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-79-1 name=__codelineno-79-1 href=#__codelineno-79-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span>
|
|
<a id=__codelineno-79-2 name=__codelineno-79-2 href=#__codelineno-79-2></a>
|
|
<a id=__codelineno-79-3 name=__codelineno-79-3 href=#__codelineno-79-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-79-4 name=__codelineno-79-4 href=#__codelineno-79-4></a> <span class=k>class</span><span class=w> </span><span class=nc>ExtensionClass</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=o>.</span><span class=n>ExtensionClass</span><span class=p>):</span> <span class=c1># Error!</span>
|
|
<a id=__codelineno-79-5 name=__codelineno-79-5 href=#__codelineno-79-5></a> <span class=k>pass</span>
|
|
</code></pre></div> <p>Instead, you can import <code>ExtensionComponentConfig</code> directly:</p> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-80-1 name=__codelineno-80-1 href=#__codelineno-80-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>ExtensionComponentConfig</span>
|
|
<a id=__codelineno-80-2 name=__codelineno-80-2 href=#__codelineno-80-2></a>
|
|
<a id=__codelineno-80-3 name=__codelineno-80-3 href=#__codelineno-80-3></a><span class=k>class</span><span class=w> </span><span class=nc>MyExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-80-4 name=__codelineno-80-4 href=#__codelineno-80-4></a> <span class=k>class</span><span class=w> </span><span class=nc>ComponentConfig</span><span class=p>(</span><span class=n>ExtensionComponentConfig</span><span class=p>):</span>
|
|
<a id=__codelineno-80-5 name=__codelineno-80-5 href=#__codelineno-80-5></a> <span class=k>pass</span>
|
|
</code></pre></div> </li> </ul> <h4 id=refactor>Refactor<a class=headerlink href=#refactor title="Permanent link">¤</a></h4> <ul> <li> <p>When a component is being rendered, a proper <code>Component</code> instance is now created.</p> <p>Previously, the <code>Component</code> state was managed as half-instance, half-stack.</p> </li> <li> <p>Component's "Render API" (args, kwargs, slots, context, inputs, request, context data, etc) can now be accessed also outside of the render call. So now its possible to take the component instance out of <code>get_template_data()</code> (although this is not recommended).</p> </li> <li> <p>Components can now be defined without a template.</p> <p>Previously, the following would raise an error:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-81-1 name=__codelineno-81-1 href=#__codelineno-81-1></a><span class=k>class</span><span class=w> </span><span class=nc>MyComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-81-2 name=__codelineno-81-2 href=#__codelineno-81-2></a> <span class=k>pass</span>
|
|
</code></pre></div> <p>"Template-less" components can be used together with <code>Component.on_render()</code> to dynamically pick what to render:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-82-1 name=__codelineno-82-1 href=#__codelineno-82-1></a><span class=k>class</span><span class=w> </span><span class=nc>TableNew</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-82-2 name=__codelineno-82-2 href=#__codelineno-82-2></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"table_new.html"</span>
|
|
<a id=__codelineno-82-3 name=__codelineno-82-3 href=#__codelineno-82-3></a>
|
|
<a id=__codelineno-82-4 name=__codelineno-82-4 href=#__codelineno-82-4></a><span class=k>class</span><span class=w> </span><span class=nc>TableOld</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-82-5 name=__codelineno-82-5 href=#__codelineno-82-5></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>"table_old.html"</span>
|
|
<a id=__codelineno-82-6 name=__codelineno-82-6 href=#__codelineno-82-6></a>
|
|
<a id=__codelineno-82-7 name=__codelineno-82-7 href=#__codelineno-82-7></a><span class=k>class</span><span class=w> </span><span class=nc>Table</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
|
|
<a id=__codelineno-82-8 name=__codelineno-82-8 href=#__codelineno-82-8></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>):</span>
|
|
<a id=__codelineno-82-9 name=__codelineno-82-9 href=#__codelineno-82-9></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span><span class=o>.</span><span class=n>get</span><span class=p>(</span><span class=s2>"feat_table_new_ui"</span><span class=p>):</span>
|
|
<a id=__codelineno-82-10 name=__codelineno-82-10 href=#__codelineno-82-10></a> <span class=k>return</span> <span class=n>TableNew</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>args</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=p>)</span>
|
|
<a id=__codelineno-82-11 name=__codelineno-82-11 href=#__codelineno-82-11></a> <span class=k>else</span><span class=p>:</span>
|
|
<a id=__codelineno-82-12 name=__codelineno-82-12 href=#__codelineno-82-12></a> <span class=k>return</span> <span class=n>TableOld</span><span class=o>.</span><span class=n>render</span><span class=p>(</span><span class=n>args</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>args</span><span class=p>,</span> <span class=n>kwargs</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>kwargs</span><span class=p>,</span> <span class=n>slots</span><span class=o>=</span><span class=bp>self</span><span class=o>.</span><span class=n>slots</span><span class=p>)</span>
|
|
</code></pre></div> <p>"Template-less" components can be also used as a base class for other components, or as mixins.</p> </li> <li> <p>Passing <code>Slot</code> instance to <code>Slot</code> constructor raises an error.</p> </li> <li> <p>Extension hook <code>on_component_rendered</code> now receives <code>error</code> field.</p> <p><code>on_component_rendered</code> now behaves similar to <code>Component.on_render_after</code>:</p> <ul> <li>Raising error in this hook overrides what error will be returned from <code>Component.render()</code>.</li> <li>Returning new string overrides what will be returned from <code>Component.render()</code>.</li> </ul> <p>Before:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-83-1 name=__codelineno-83-1 href=#__codelineno-83-1></a><span class=k>class</span><span class=w> </span><span class=nc>OnComponentRenderedContext</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-83-2 name=__codelineno-83-2 href=#__codelineno-83-2></a> <span class=n>component</span><span class=p>:</span> <span class=s2>"Component"</span>
|
|
<a id=__codelineno-83-3 name=__codelineno-83-3 href=#__codelineno-83-3></a> <span class=n>component_cls</span><span class=p>:</span> <span class=n>Type</span><span class=p>[</span><span class=s2>"Component"</span><span class=p>]</span>
|
|
<a id=__codelineno-83-4 name=__codelineno-83-4 href=#__codelineno-83-4></a> <span class=n>component_id</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-83-5 name=__codelineno-83-5 href=#__codelineno-83-5></a> <span class=n>result</span><span class=p>:</span> <span class=nb>str</span>
|
|
</code></pre></div> <p>After:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-84-1 name=__codelineno-84-1 href=#__codelineno-84-1></a><span class=k>class</span><span class=w> </span><span class=nc>OnComponentRenderedContext</span><span class=p>(</span><span class=n>NamedTuple</span><span class=p>):</span>
|
|
<a id=__codelineno-84-2 name=__codelineno-84-2 href=#__codelineno-84-2></a> <span class=n>component</span><span class=p>:</span> <span class=s2>"Component"</span>
|
|
<a id=__codelineno-84-3 name=__codelineno-84-3 href=#__codelineno-84-3></a> <span class=n>component_cls</span><span class=p>:</span> <span class=n>Type</span><span class=p>[</span><span class=s2>"Component"</span><span class=p>]</span>
|
|
<a id=__codelineno-84-4 name=__codelineno-84-4 href=#__codelineno-84-4></a> <span class=n>component_id</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-84-5 name=__codelineno-84-5 href=#__codelineno-84-5></a> <span class=n>result</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span>
|
|
<a id=__codelineno-84-6 name=__codelineno-84-6 href=#__codelineno-84-6></a> <span class=n>error</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=ne>Exception</span><span class=p>]</span>
|
|
</code></pre></div> </li> </ul> <h4 id=fix>Fix<a class=headerlink href=#fix title="Permanent link">¤</a></h4> <ul> <li> <p>Fix bug: Context processors data was being generated anew for each component. Now the data is correctly created once and reused across components with the same request (<a href=https://github.com/django-components/django-components/issues/1165>#1165</a>).</p> </li> <li> <p>Fix KeyError on <code>component_context_cache</code> when slots are rendered outside of the component's render context. (<a href=https://github.com/django-components/django-components/issues/1189>#1189</a>)</p> </li> <li> <p>Component classes now have <code>do_not_call_in_templates=True</code> to prevent them from being called as functions in templates.</p> </li> </ul> <aside class=md-source-file> <span class=md-source-file__fact> <span class=md-icon title="Last update"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago" title="September 18, 2025 21:02:50 UTC"><span class=timeago datetime=2025-09-18T21:02:50+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="September 18, 2025 21:02:50 UTC">2025-09-18</span> </span> <span class=md-source-file__fact> <span class=md-icon title=Contributors> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9 3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3 3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3 3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65 2.56.34 4.45 1.51 4.45 2.9z"/></svg> </span> <nav> </nav> </span> </aside> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../v0.140.1/ class="md-footer__link md-footer__link--prev" aria-label="Previous: v0.140.1"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> v0.140.1 </div> </div> </a> <a href=../v0.139.1/ class="md-footer__link md-footer__link--next" aria-label="Next: v0.139.1"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> v0.139.1 </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/django-components/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href=https://pypi.org/project/django-components/ target=_blank rel=noopener title=pypi.org class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6M286.2 444.7a20.4 20.4 0 1 1 0-40.7 20.4 20.4 0 1 1 0 40.7M167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4m-6.6-183.4a20.4 20.4 0 1 1 0 40.8 20.4 20.4 0 1 1 0-40.8"/></svg> </a> <a href=https://discord.gg/NaQ8QPyHtD target=_blank rel=noopener title=discord.gg class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 576 512"><!-- Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill=currentColor d="M492.5 69.8c-.2-.3-.4-.6-.8-.7-38.1-17.5-78.4-30-119.7-37.1-.4-.1-.8 0-1.1.1s-.6.4-.8.8c-5.5 9.9-10.5 20.2-14.9 30.6-44.6-6.8-89.9-6.8-134.4 0-4.5-10.5-9.5-20.7-15.1-30.6-.2-.3-.5-.6-.8-.8s-.7-.2-1.1-.2C162.5 39 122.2 51.5 84.1 69c-.3.1-.6.4-.8.7C7.1 183.5-13.8 294.6-3.6 404.2c0 .3.1.5.2.8s.3.4.5.6c44.4 32.9 94 58 146.8 74.2.4.1.8.1 1.1 0s.7-.4.9-.7c11.3-15.4 21.4-31.8 30-48.8.1-.2.2-.5.2-.8s0-.5-.1-.8-.2-.5-.4-.6-.4-.3-.7-.4c-15.8-6.1-31.2-13.4-45.9-21.9-.3-.2-.5-.4-.7-.6s-.3-.6-.3-.9 0-.6.2-.9.3-.5.6-.7c3.1-2.3 6.2-4.7 9.1-7.1.3-.2.6-.4.9-.4s.7 0 1 .1c96.2 43.9 200.4 43.9 295.5 0 .3-.1.7-.2 1-.2s.7.2.9.4c2.9 2.4 6 4.9 9.1 7.2.2.2.4.4.6.7s.2.6.2.9-.1.6-.3.9-.4.5-.6.6c-14.7 8.6-30 15.9-45.9 21.8-.2.1-.5.2-.7.4s-.3.4-.4.7-.1.5-.1.8.1.5.2.8c8.8 17 18.8 33.3 30 48.8.2.3.6.6.9.7s.8.1 1.1 0c52.9-16.2 102.6-41.3 147.1-74.2.2-.2.4-.4.5-.6s.2-.5.2-.8c12.3-126.8-20.5-236.9-86.9-334.5zm-302 267.7c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.4 59.2-52.8 59.2m195.4 0c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.2 59.2-52.8 59.2"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../assets/javascripts/workers/search.973d3a69.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"alias": true, "default": ["dev"], "provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.92b07e13.min.js></script> <script src=../../assets/_markdown_exec_pyodide.js></script> <script src=../../js/timeago.min.js></script> <script src=../../js/timeago_mkdocs_material.js></script> </body> </html> |