mirror of
https://github.com/django-components/django-components.git
synced 2025-09-19 12:19:44 +00:00
360 lines
No EOL
134 KiB
HTML
360 lines
No EOL
134 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/concepts/advanced/extensions/ rel=canonical><link href=../tag_formatter/ rel=prev><link href=../testing/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.6.9"><title>Extensions - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.4af4bdda.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="Extensions - 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/concepts/advanced/extensions.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/concepts/advanced/extensions/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Extensions - 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/concepts/advanced/extensions.png></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=#setting-up-extensions 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> Extensions </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 496 512"><!-- Font Awesome Free 6.7.2 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 2024 Fonticons, Inc.--><path d="M165.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.9M244.8 8C106.1 8 0 113.3 0 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.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.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/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <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/your_first_component/ class=md-tabs__link> Getting Started </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../../fundamentals/single_file_components/ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <a href=../../../guides/setup/syntax_highlight/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../../reference/api/ class=md-tabs__link> API Documentation </a> </li> <li class=md-tabs__item> <a href=../../../release_notes/ class=md-tabs__link> Release Notes </a> </li> </ul> </div> </nav> <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 496 512"><!-- Font Awesome Free 6.7.2 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 2024 Fonticons, Inc.--><path d="M165.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.9M244.8 8C106.1 8 0 113.3 0 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.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.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/django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <label class=md-nav__link for=__nav_1 id=__nav_1_label tabindex=0> <span class=md-ellipsis> Overview </span> <span class="md-nav__icon md-icon"></span> </label> <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> <li class=md-nav__item> <a href=../../../overview/welcome/ class=md-nav__link> <span class=md-ellipsis> Welcome to Django Components </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/compatibility/ class=md-nav__link> <span class=md-ellipsis> Compatibility </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/installation/ class=md-nav__link> <span class=md-ellipsis> Installation </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/security_notes/ class=md-nav__link> <span class=md-ellipsis> Security notes 🚨 </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/community/ class=md-nav__link> <span class=md-ellipsis> Community </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/contributing/ class=md-nav__link> <span class=md-ellipsis> Contributing </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/development/ class=md-nav__link> <span class=md-ellipsis> Development </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/performance/ class=md-nav__link> <span class=md-ellipsis> Performance </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/code_of_conduct/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <span class=md-ellipsis> Getting Started </span> <span class="md-nav__icon md-icon"></span> </label> <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> <li class=md-nav__item> <a href=../../../getting_started/your_first_component/ class=md-nav__link> <span class=md-ellipsis> Create your first component </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/adding_js_and_css/ class=md-nav__link> <span class=md-ellipsis> Adding JS and CSS </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/components_in_templates/ class=md-nav__link> <span class=md-ellipsis> Components in templates </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/parametrising_components/ class=md-nav__link> <span class=md-ellipsis> Parametrising components </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/adding_slots/ class=md-nav__link> <span class=md-ellipsis> Adding slots </span> </a> </li> <li class=md-nav__item> <a href=../../../getting_started/rendering_components/ class=md-nav__link> <span class=md-ellipsis> Rendering components </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3 checked> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex> <span class=md-ellipsis> Concepts </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=true> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Concepts </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_1> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex> <span class=md-ellipsis> Fundamentals </span> <span class="md-nav__icon md-icon"></span> </label> <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> <li class=md-nav__item> <a href=../../fundamentals/single_file_components/ class=md-nav__link> <span class=md-ellipsis> Single-file components </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/components_in_python/ class=md-nav__link> <span class=md-ellipsis> Components in Python </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/access_component_input/ class=md-nav__link> <span class=md-ellipsis> Accessing component inputs </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/component_defaults/ class=md-nav__link> <span class=md-ellipsis> Component defaults </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/component_context_scope/ class=md-nav__link> <span class=md-ellipsis> Component context and scope </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/template_tag_syntax/ class=md-nav__link> <span class=md-ellipsis> Template tag syntax </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/slots/ class=md-nav__link> <span class=md-ellipsis> Slots </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/html_attributes/ class=md-nav__link> <span class=md-ellipsis> HTML attributes </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/defining_js_css_html_files/ class=md-nav__link> <span class=md-ellipsis> Defining HTML / JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/autodiscovery/ class=md-nav__link> <span class=md-ellipsis> Autodiscovery </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/components_as_views/ class=md-nav__link> <span class=md-ellipsis> Components as views </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/http_request/ class=md-nav__link> <span class=md-ellipsis> HTTP Request </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/subclassing_components/ class=md-nav__link> <span class=md-ellipsis> Subclassing components </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3_2 checked> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex> <span class=md-ellipsis> Advanced </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_2_label aria-expanded=true> <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> <li class=md-nav__item> <a href=../rendering_js_css/ class=md-nav__link> <span class=md-ellipsis> Rendering JS / CSS </span> </a> </li> <li class=md-nav__item> <a href=../html_fragments/ class=md-nav__link> <span class=md-ellipsis> HTML fragments </span> </a> </li> <li class=md-nav__item> <a href=../provide_inject/ class=md-nav__link> <span class=md-ellipsis> Prop drilling and provide / inject </span> </a> </li> <li class=md-nav__item> <a href=../hooks/ class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </span> </a> </li> <li class=md-nav__item> <a href=../component_registry/ class=md-nav__link> <span class=md-ellipsis> Registering components </span> </a> </li> <li class=md-nav__item> <a href=../typing_and_validation/ class=md-nav__link> <span class=md-ellipsis> Typing and validation </span> </a> </li> <li class=md-nav__item> <a href=../template_tags/ class=md-nav__link> <span class=md-ellipsis> Custom template tags </span> </a> </li> <li class=md-nav__item> <a href=../tag_formatter/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> Extensions </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Extensions </span> </a> <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=#setting-up-extensions class=md-nav__link> <span class=md-ellipsis> Setting up extensions </span> </a> </li> <li class=md-nav__item> <a href=#lifecycle-hooks class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </span> </a> </li> <li class=md-nav__item> <a href=#configuring-extensions-per-component class=md-nav__link> <span class=md-ellipsis> Configuring extensions per component </span> </a> <nav class=md-nav aria-label="Configuring extensions per component"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#example-component-as-view class=md-nav__link> <span class=md-ellipsis> Example: Component as View </span> </a> </li> <li class=md-nav__item> <a href=#example-storybook-integration class=md-nav__link> <span class=md-ellipsis> Example: Storybook integration </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#accessing-extensions-in-components class=md-nav__link> <span class=md-ellipsis> Accessing extensions in components </span> </a> </li> <li class=md-nav__item> <a href=#writing-extensions class=md-nav__link> <span class=md-ellipsis> Writing extensions </span> </a> <nav class=md-nav aria-label="Writing extensions"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#defining-an-extension class=md-nav__link> <span class=md-ellipsis> Defining an extension </span> </a> </li> <li class=md-nav__item> <a href=#defining-the-extension-class class=md-nav__link> <span class=md-ellipsis> Defining the extension class </span> </a> </li> <li class=md-nav__item> <a href=#registering-extensions class=md-nav__link> <span class=md-ellipsis> Registering extensions </span> </a> </li> <li class=md-nav__item> <a href=#full-example-custom-logging-extension class=md-nav__link> <span class=md-ellipsis> Full example: Custom logging extension </span> </a> </li> <li class=md-nav__item> <a href=#utility-functions class=md-nav__link> <span class=md-ellipsis> Utility functions </span> </a> </li> <li class=md-nav__item> <a href=#accessing-the-component-class-from-within-an-extension class=md-nav__link> <span class=md-ellipsis> Accessing the component class from within an extension </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#extension-commands class=md-nav__link> <span class=md-ellipsis> Extension Commands </span> </a> <nav class=md-nav aria-label="Extension Commands"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#defining-commands class=md-nav__link> <span class=md-ellipsis> Defining Commands </span> </a> </li> <li class=md-nav__item> <a href=#defining-command-arguments-and-options class=md-nav__link> <span class=md-ellipsis> Defining Command Arguments and Options </span> </a> </li> <li class=md-nav__item> <a href=#grouping-arguments class=md-nav__link> <span class=md-ellipsis> Grouping Arguments </span> </a> </li> <li class=md-nav__item> <a href=#subcommands class=md-nav__link> <span class=md-ellipsis> Subcommands </span> </a> </li> <li class=md-nav__item> <a href=#print-command-help class=md-nav__link> <span class=md-ellipsis> Print command help </span> </a> </li> <li class=md-nav__item> <a href=#testing-commands class=md-nav__link> <span class=md-ellipsis> Testing Commands </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#extension-urls class=md-nav__link> <span class=md-ellipsis> Extension URLs </span> </a> <nav class=md-nav aria-label="Extension URLs"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#accessing-extension-urls class=md-nav__link> <span class=md-ellipsis> Accessing Extension URLs </span> </a> </li> <li class=md-nav__item> <a href=#nested-urls class=md-nav__link> <span class=md-ellipsis> Nested URLs </span> </a> </li> <li class=md-nav__item> <a href=#passing-kwargs-and-other-extra-fields-to-url-routes class=md-nav__link> <span class=md-ellipsis> Passing kwargs and other extra fields to URL routes </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../testing/ class=md-nav__link> <span class=md-ellipsis> Testing </span> </a> </li> <li class=md-nav__item> <a href=../authoring_component_libraries/ class=md-nav__link> <span class=md-ellipsis> Authoring component libraries </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> Guides </span> <span class="md-nav__icon md-icon"></span> </label> <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> Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_1> <label class=md-nav__link for=__nav_4_1 id=__nav_4_1_label tabindex=0> <span class=md-ellipsis> Setup </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_1_label aria-expanded=false> <label class=md-nav__title for=__nav_4_1> <span class="md-nav__icon md-icon"></span> Setup </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/setup/syntax_highlight/ class=md-nav__link> <span class=md-ellipsis> Syntax highlighting </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/caching/ class=md-nav__link> <span class=md-ellipsis> Caching </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/development_server/ class=md-nav__link> <span class=md-ellipsis> Development server </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_2> <label class=md-nav__link for=__nav_4_2 id=__nav_4_2_label tabindex=0> <span class=md-ellipsis> Other </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_2_label aria-expanded=false> <label class=md-nav__title for=__nav_4_2> <span class="md-nav__icon md-icon"></span> Other </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/other/troubleshooting/ class=md-nav__link> <span class=md-ellipsis> Troubleshooting </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4_3> <label class=md-nav__link for=__nav_4_3 id=__nav_4_3_label tabindex=0> <span class=md-ellipsis> Dev Guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_3_label aria-expanded=false> <label class=md-nav__title for=__nav_4_3> <span class="md-nav__icon md-icon"></span> Dev Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/devguides/dependency_mgmt/ class=md-nav__link> <span class=md-ellipsis> JS and CSS rendering </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/devguides/slot_rendering/ class=md-nav__link> <span class=md-ellipsis> Slot rendering </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/devguides/slots_and_blocks/ class=md-nav__link> <span class=md-ellipsis> Using slot and block tags </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5> <label class=md-nav__link for=__nav_5 id=__nav_5_label tabindex=0> <span class=md-ellipsis> API Documentation </span> <span class="md-nav__icon md-icon"></span> </label> <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> API Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/api/ class=md-nav__link> <span class=md-ellipsis> API </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/commands/ class=md-nav__link> <span class=md-ellipsis> Commands </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/components/ class=md-nav__link> <span class=md-ellipsis> Components </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/exceptions/ class=md-nav__link> <span class=md-ellipsis> Exceptions </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/extension_hooks/ class=md-nav__link> <span class=md-ellipsis> Extension hooks </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/middlewares/ class=md-nav__link> <span class=md-ellipsis> Middlewares </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/settings/ class=md-nav__link> <span class=md-ellipsis> Settings </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/signals/ class=md-nav__link> <span class=md-ellipsis> Signals </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_tags/ class=md-nav__link> <span class=md-ellipsis> Template tags </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_vars/ class=md-nav__link> <span class=md-ellipsis> Template vars </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/urls/ class=md-nav__link> <span class=md-ellipsis> URLs </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/testing_api/ class=md-nav__link> <span class=md-ellipsis> Testing API </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../release_notes/ class=md-nav__link> <span class=md-ellipsis> Release Notes </span> </a> </li> </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=#setting-up-extensions class=md-nav__link> <span class=md-ellipsis> Setting up extensions </span> </a> </li> <li class=md-nav__item> <a href=#lifecycle-hooks class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </span> </a> </li> <li class=md-nav__item> <a href=#configuring-extensions-per-component class=md-nav__link> <span class=md-ellipsis> Configuring extensions per component </span> </a> <nav class=md-nav aria-label="Configuring extensions per component"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#example-component-as-view class=md-nav__link> <span class=md-ellipsis> Example: Component as View </span> </a> </li> <li class=md-nav__item> <a href=#example-storybook-integration class=md-nav__link> <span class=md-ellipsis> Example: Storybook integration </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#accessing-extensions-in-components class=md-nav__link> <span class=md-ellipsis> Accessing extensions in components </span> </a> </li> <li class=md-nav__item> <a href=#writing-extensions class=md-nav__link> <span class=md-ellipsis> Writing extensions </span> </a> <nav class=md-nav aria-label="Writing extensions"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#defining-an-extension class=md-nav__link> <span class=md-ellipsis> Defining an extension </span> </a> </li> <li class=md-nav__item> <a href=#defining-the-extension-class class=md-nav__link> <span class=md-ellipsis> Defining the extension class </span> </a> </li> <li class=md-nav__item> <a href=#registering-extensions class=md-nav__link> <span class=md-ellipsis> Registering extensions </span> </a> </li> <li class=md-nav__item> <a href=#full-example-custom-logging-extension class=md-nav__link> <span class=md-ellipsis> Full example: Custom logging extension </span> </a> </li> <li class=md-nav__item> <a href=#utility-functions class=md-nav__link> <span class=md-ellipsis> Utility functions </span> </a> </li> <li class=md-nav__item> <a href=#accessing-the-component-class-from-within-an-extension class=md-nav__link> <span class=md-ellipsis> Accessing the component class from within an extension </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#extension-commands class=md-nav__link> <span class=md-ellipsis> Extension Commands </span> </a> <nav class=md-nav aria-label="Extension Commands"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#defining-commands class=md-nav__link> <span class=md-ellipsis> Defining Commands </span> </a> </li> <li class=md-nav__item> <a href=#defining-command-arguments-and-options class=md-nav__link> <span class=md-ellipsis> Defining Command Arguments and Options </span> </a> </li> <li class=md-nav__item> <a href=#grouping-arguments class=md-nav__link> <span class=md-ellipsis> Grouping Arguments </span> </a> </li> <li class=md-nav__item> <a href=#subcommands class=md-nav__link> <span class=md-ellipsis> Subcommands </span> </a> </li> <li class=md-nav__item> <a href=#print-command-help class=md-nav__link> <span class=md-ellipsis> Print command help </span> </a> </li> <li class=md-nav__item> <a href=#testing-commands class=md-nav__link> <span class=md-ellipsis> Testing Commands </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#extension-urls class=md-nav__link> <span class=md-ellipsis> Extension URLs </span> </a> <nav class=md-nav aria-label="Extension URLs"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#accessing-extension-urls class=md-nav__link> <span class=md-ellipsis> Accessing Extension URLs </span> </a> </li> <li class=md-nav__item> <a href=#nested-urls class=md-nav__link> <span class=md-ellipsis> Nested URLs </span> </a> </li> <li class=md-nav__item> <a href=#passing-kwargs-and-other-extra-fields-to-url-routes class=md-nav__link> <span class=md-ellipsis> Passing kwargs and other extra fields to URL routes </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/django-components/django-components/edit/master/docs/concepts/advanced/extensions.md title="Edit this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg> </a> <a href=https://github.com/django-components/django-components/raw/master/docs/concepts/advanced/extensions.md title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> </a> <h1>Extensions</h1> <p><em>New in version 0.131</em></p> <p>Django-components functionality can be extended with "extensions". Extensions allow for powerful customization and integrations. They can:</p> <ul> <li>Tap into lifecycle events, such as when a component is created, deleted, registered, or unregistered.</li> <li>Add new attributes and methods to the components under an extension-specific nested class.</li> <li>Define custom commands that can be executed via the Django management command interface.</li> </ul> <h2 id=setting-up-extensions>Setting up extensions<a class=headerlink href=#setting-up-extensions title="Permanent link">¤</a></h2> <p>Extensions are configured in the Django settings under <a href=../../../reference/settings#django_components.app_settings.ComponentsSettings.extensions><code>COMPONENTS.extensions</code></a>.</p> <p>Extensions can be set by either as an import string or by passing in a class:</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># settings.py</span>
|
|
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a>
|
|
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-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-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"my_extension"</span>
|
|
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a>
|
|
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></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-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a> <span class=o>...</span>
|
|
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a>
|
|
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
|
|
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a> <span class=n>extensions</span><span class=o>=</span><span class=p>[</span>
|
|
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a> <span class=n>MyExtension</span><span class=p>,</span>
|
|
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> <span class=s2>"another_app.extensions.AnotherExtension"</span><span class=p>,</span>
|
|
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> <span class=s2>"my_app.extensions.ThirdExtension"</span><span class=p>,</span>
|
|
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=p>],</span>
|
|
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a><span class=p>)</span>
|
|
</code></pre></div> <h2 id=lifecycle-hooks>Lifecycle hooks<a class=headerlink href=#lifecycle-hooks title="Permanent link">¤</a></h2> <p>Extensions can define methods to hook into lifecycle events, such as:</p> <ul> <li>Component creation or deletion</li> <li>Un/registering a component</li> <li>Creating or deleting a registry</li> <li>Pre-processing data passed to a component on render</li> <li>Post-processing data returned from <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> and others.</li> </ul> <p>See the full list in <a href=../../../reference/extension_hooks>Extension Hooks Reference</a>.</p> <h2 id=configuring-extensions-per-component>Configuring extensions per component<a class=headerlink href=#configuring-extensions-per-component title="Permanent link">¤</a></h2> <p>Each extension has a corresponding nested class within the <a href=../../../reference/api#django_components.Component><code>Component</code></a> class. These allow to configure the extensions on a per-component basis.</p> <div class="admonition note"> <p class=admonition-title>Note</p> <p><strong>Accessing the component instance from inside the nested classes:</strong></p> <p>Each method of the nested classes has access to the <code>component</code> attribute, which points to the component instance.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></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-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
|
|
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></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-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a> <span class=c1># `self.component` points to the instance of `MyTable` Component.</span>
|
|
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></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>get</span><span class=p>(</span><span class=n>request</span><span class=p>)</span>
|
|
</code></pre></div> </div> <h3 id=example-component-as-view>Example: Component as View<a class=headerlink href=#example-component-as-view title="Permanent link">¤</a></h3> <p>The <a href=../../fundamentals/components_as_views>Components as Views</a> feature is actually implemented as an extension that is configured by a <code>View</code> nested class.</p> <p>You can override the <code>get</code>, <code>post</code>, etc methods to customize the behavior of the component as a view:</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>MyTable</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>View</span><span class=p>:</span>
|
|
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></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-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></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>get</span><span class=p>(</span><span class=n>request</span><span class=p>)</span>
|
|
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a>
|
|
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>def</span><span class=w> </span><span class=nf>post</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-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></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>post</span><span class=p>(</span><span class=n>request</span><span class=p>)</span>
|
|
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a>
|
|
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=o>...</span>
|
|
</code></pre></div> <h3 id=example-storybook-integration>Example: Storybook integration<a class=headerlink href=#example-storybook-integration title="Permanent link">¤</a></h3> <p>The Storybook integration (work in progress) is an extension that is configured by a <code>Storybook</code> nested class.</p> <p>You can override methods such as <code>title</code>, <code>parameters</code>, etc, to customize how to generate a Storybook JSON file from the component.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></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-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>class</span><span class=w> </span><span class=nc>Storybook</span><span class=p>:</span>
|
|
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=k>def</span><span class=w> </span><span class=nf>title</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
|
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></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=vm>__class__</span><span class=o>.</span><span class=vm>__name__</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=k>def</span><span class=w> </span><span class=nf>parameters</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-></span> <span class=n>Parameters</span><span class=p>:</span>
|
|
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> <span class=s2>"server"</span><span class=p>:</span> <span class=p>{</span>
|
|
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=s2>"id"</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>component</span><span class=o>.</span><span class=vm>__class__</span><span class=o>.</span><span class=vm>__name__</span><span class=p>,</span>
|
|
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> <span class=p>}</span>
|
|
<a id=__codelineno-3-11 name=__codelineno-3-11 href=#__codelineno-3-11></a> <span class=p>}</span>
|
|
<a id=__codelineno-3-12 name=__codelineno-3-12 href=#__codelineno-3-12></a>
|
|
<a id=__codelineno-3-13 name=__codelineno-3-13 href=#__codelineno-3-13></a> <span class=k>def</span><span class=w> </span><span class=nf>stories</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-></span> <span class=n>List</span><span class=p>[</span><span class=n>StoryAnnotations</span><span class=p>]:</span>
|
|
<a id=__codelineno-3-14 name=__codelineno-3-14 href=#__codelineno-3-14></a> <span class=k>return</span> <span class=p>[]</span>
|
|
<a id=__codelineno-3-15 name=__codelineno-3-15 href=#__codelineno-3-15></a>
|
|
<a id=__codelineno-3-16 name=__codelineno-3-16 href=#__codelineno-3-16></a> <span class=o>...</span>
|
|
</code></pre></div> <h2 id=accessing-extensions-in-components>Accessing extensions in components<a class=headerlink href=#accessing-extensions-in-components title="Permanent link">¤</a></h2> <p>Above, we've configured extensions <code>View</code> and <code>Storybook</code> for the <code>MyTable</code> component.</p> <p>You can access the instances of these extension classes in the component instance.</p> <p>For example, the View extension is available as <code>self.view</code>:</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>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-4-2 name=__codelineno-4-2 href=#__codelineno-4-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=n>request</span><span class=p>):</span>
|
|
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=c1># `self.view` points to the instance of `View` extension.</span>
|
|
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a> <span class=s2>"view"</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>view</span><span class=p>,</span>
|
|
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a> <span class=p>}</span>
|
|
</code></pre></div> <p>And the Storybook extension is available as <code>self.storybook</code>:</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>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-5-2 name=__codelineno-5-2 href=#__codelineno-5-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=n>request</span><span class=p>):</span>
|
|
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=c1># `self.storybook` points to the instance of `Storybook` extension.</span>
|
|
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a> <span class=k>return</span> <span class=p>{</span>
|
|
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=s2>"title"</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>storybook</span><span class=o>.</span><span class=n>title</span><span class=p>(),</span>
|
|
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <span class=p>}</span>
|
|
</code></pre></div> <p>Thus, you can use extensions to add methods or attributes that will be available to all components in their component context.</p> <h2 id=writing-extensions>Writing extensions<a class=headerlink href=#writing-extensions title="Permanent link">¤</a></h2> <p>Creating extensions in django-components involves defining a class that inherits from <a href=../../../reference/api/#django_components.ComponentExtension><code>ComponentExtension</code></a>. This class can implement various lifecycle hooks and define new attributes or methods to be added to components.</p> <h3 id=defining-an-extension>Defining an extension<a class=headerlink href=#defining-an-extension title="Permanent link">¤</a></h3> <p>To create an extension, define a class that inherits from <a href=../../../reference/api/#django_components.ComponentExtension><code>ComponentExtension</code></a> and implement the desired hooks.</p> <ul> <li>Each extension MUST have a <code>name</code> attribute. The name MUST be a valid Python identifier.</li> <li>The extension MAY implement any of the <a href=../../../reference/extension_hooks>hook methods</a>.</li> <li>Each hook method receives a context object with relevant data.</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components.extension</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>OnComponentClassCreatedContext</span>
|
|
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a>
|
|
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-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-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"my_extension"</span>
|
|
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a>
|
|
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_class_created</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>OnComponentClassCreatedContext</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=c1># Custom logic for when a component class is created</span>
|
|
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=n>my_attr</span> <span class=o>=</span> <span class=s2>"my_value"</span>
|
|
</code></pre></div> <h3 id=defining-the-extension-class>Defining the extension class<a class=headerlink href=#defining-the-extension-class title="Permanent link">¤</a></h3> <p>In previous sections we've seen the <code>View</code> and <code>Storybook</code> extensions classes that were nested within the <code>Component</code> class:</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>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-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
|
|
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a> <span class=o>...</span>
|
|
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a>
|
|
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a> <span class=k>class</span><span class=w> </span><span class=nc>Storybook</span><span class=p>:</span>
|
|
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=o>...</span>
|
|
</code></pre></div> <p>These can be understood as component-specific overrides or configuration.</p> <p>The nested extension classes like <code>View</code> or <code>Storybook</code> will actually subclass from a base extension class as defined on the <a href=../../../reference/api/#django_components.ComponentExtension.ExtensionClass><code>ComponentExtension.ExtensionClass</code></a>.</p> <p>This is how extensions define the "default" behavior of their nested extension classes.</p> <p>For example, the <code>View</code> base extension class defines the handlers for GET, POST, etc:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components.extension</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span>
|
|
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a>
|
|
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=k>class</span><span class=w> </span><span class=nc>ViewExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"view"</span>
|
|
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a>
|
|
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=c1># The default behavior of the `View` extension class.</span>
|
|
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></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-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></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-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></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>get</span><span class=p>(</span><span class=n>request</span><span class=p>)</span>
|
|
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a>
|
|
<a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=k>def</span><span class=w> </span><span class=nf>post</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-8-12 name=__codelineno-8-12 href=#__codelineno-8-12></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>post</span><span class=p>(</span><span class=n>request</span><span class=p>)</span>
|
|
<a id=__codelineno-8-13 name=__codelineno-8-13 href=#__codelineno-8-13></a>
|
|
<a id=__codelineno-8-14 name=__codelineno-8-14 href=#__codelineno-8-14></a> <span class=o>...</span>
|
|
</code></pre></div> <p>In any component that then defines a nested <code>View</code> extension class, the <code>View</code> extension class will actually subclass from the <code>ViewExtension.ExtensionClass</code> class.</p> <p>In other words, when you define a component like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></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-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a> <span class=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>:</span>
|
|
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></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-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=c1># Do something</span>
|
|
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> <span class=o>...</span>
|
|
</code></pre></div> <p>It will actually be implemented as if the <code>View</code> class subclassed from base class <code>ViewExtension.ExtensionClass</code>:</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>MyTable</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=k>class</span><span class=w> </span><span class=nc>View</span><span class=p>(</span><span class=n>ViewExtension</span><span class=o>.</span><span class=n>ExtensionClass</span><span class=p>):</span>
|
|
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></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-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <span class=c1># Do something</span>
|
|
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a> <span class=o>...</span>
|
|
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>When writing an extension, the <code>ExtensionClass</code> MUST subclass the base class <a href=../../../reference/api/#django_components.ComponentExtension.ExtensionClass><code>ComponentExtension.ExtensionClass</code></a>.</p> <p>This base class ensures that the extension class will have access to the component instance.</p> </div> <h3 id=registering-extensions>Registering extensions<a class=headerlink href=#registering-extensions title="Permanent link">¤</a></h3> <p>Once the extension is defined, it needs to be registered in the Django settings to be used by the application.</p> <p>Extensions can be given either as an extension class, or its import 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=c1># settings.py</span>
|
|
<a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
|
|
<a id=__codelineno-11-3 name=__codelineno-11-3 href=#__codelineno-11-3></a> <span class=s2>"extensions"</span><span class=p>:</span> <span class=p>[</span>
|
|
<a id=__codelineno-11-4 name=__codelineno-11-4 href=#__codelineno-11-4></a> <span class=s2>"my_app.extensions.MyExtension"</span><span class=p>,</span>
|
|
<a id=__codelineno-11-5 name=__codelineno-11-5 href=#__codelineno-11-5></a> <span class=p>],</span>
|
|
<a id=__codelineno-11-6 name=__codelineno-11-6 href=#__codelineno-11-6></a><span class=p>}</span>
|
|
</code></pre></div> <p>Or by reference:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a><span class=c1># settings.py</span>
|
|
<a id=__codelineno-12-2 name=__codelineno-12-2 href=#__codelineno-12-2></a><span class=kn>from</span><span class=w> </span><span class=nn>my_app.extensions</span><span class=w> </span><span class=kn>import</span> <span class=n>MyExtension</span>
|
|
<a id=__codelineno-12-3 name=__codelineno-12-3 href=#__codelineno-12-3></a>
|
|
<a id=__codelineno-12-4 name=__codelineno-12-4 href=#__codelineno-12-4></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
|
|
<a id=__codelineno-12-5 name=__codelineno-12-5 href=#__codelineno-12-5></a> <span class=s2>"extensions"</span><span class=p>:</span> <span class=p>[</span>
|
|
<a id=__codelineno-12-6 name=__codelineno-12-6 href=#__codelineno-12-6></a> <span class=n>MyExtension</span><span class=p>,</span>
|
|
<a id=__codelineno-12-7 name=__codelineno-12-7 href=#__codelineno-12-7></a> <span class=p>],</span>
|
|
<a id=__codelineno-12-8 name=__codelineno-12-8 href=#__codelineno-12-8></a><span class=p>}</span>
|
|
</code></pre></div> <h3 id=full-example-custom-logging-extension>Full example: Custom logging extension<a class=headerlink href=#full-example-custom-logging-extension title="Permanent link">¤</a></h3> <p>To tie it all together, here's an example of a custom logging extension that logs when components are created, deleted, or rendered:</p> <ul> <li>Each component can specify which color to use for the logging by setting <code>Component.ColorLogger.color</code>.</li> <li>The extension will log the component name and color when the component is created, deleted, or rendered.</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-13-1 name=__codelineno-13-1 href=#__codelineno-13-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components.extension</span><span class=w> </span><span class=kn>import</span> <span class=p>(</span>
|
|
<a id=__codelineno-13-2 name=__codelineno-13-2 href=#__codelineno-13-2></a> <span class=n>ComponentExtension</span><span class=p>,</span>
|
|
<a id=__codelineno-13-3 name=__codelineno-13-3 href=#__codelineno-13-3></a> <span class=n>OnComponentClassCreatedContext</span><span class=p>,</span>
|
|
<a id=__codelineno-13-4 name=__codelineno-13-4 href=#__codelineno-13-4></a> <span class=n>OnComponentClassDeletedContext</span><span class=p>,</span>
|
|
<a id=__codelineno-13-5 name=__codelineno-13-5 href=#__codelineno-13-5></a> <span class=n>OnComponentInputContext</span><span class=p>,</span>
|
|
<a id=__codelineno-13-6 name=__codelineno-13-6 href=#__codelineno-13-6></a><span class=p>)</span>
|
|
<a id=__codelineno-13-7 name=__codelineno-13-7 href=#__codelineno-13-7></a>
|
|
<a id=__codelineno-13-8 name=__codelineno-13-8 href=#__codelineno-13-8></a><span class=k>class</span><span class=w> </span><span class=nc>ColorLoggerExtensionClass</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-13-9 name=__codelineno-13-9 href=#__codelineno-13-9></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-13-10 name=__codelineno-13-10 href=#__codelineno-13-10></a>
|
|
<a id=__codelineno-13-11 name=__codelineno-13-11 href=#__codelineno-13-11></a>
|
|
<a id=__codelineno-13-12 name=__codelineno-13-12 href=#__codelineno-13-12></a><span class=k>class</span><span class=w> </span><span class=nc>ColorLoggerExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-13-13 name=__codelineno-13-13 href=#__codelineno-13-13></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"color_logger"</span>
|
|
<a id=__codelineno-13-14 name=__codelineno-13-14 href=#__codelineno-13-14></a>
|
|
<a id=__codelineno-13-15 name=__codelineno-13-15 href=#__codelineno-13-15></a> <span class=c1># All `Component.ColorLogger` classes will inherit from this class.</span>
|
|
<a id=__codelineno-13-16 name=__codelineno-13-16 href=#__codelineno-13-16></a> <span class=n>ExtensionClass</span> <span class=o>=</span> <span class=n>ColorLoggerExtensionClass</span>
|
|
<a id=__codelineno-13-17 name=__codelineno-13-17 href=#__codelineno-13-17></a>
|
|
<a id=__codelineno-13-18 name=__codelineno-13-18 href=#__codelineno-13-18></a> <span class=c1># These hooks don't have access to the Component instance, only to the Component class,</span>
|
|
<a id=__codelineno-13-19 name=__codelineno-13-19 href=#__codelineno-13-19></a> <span class=c1># so we access the color as `Component.ColorLogger.color`.</span>
|
|
<a id=__codelineno-13-20 name=__codelineno-13-20 href=#__codelineno-13-20></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_class_created</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>OnComponentClassCreatedContext</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-13-21 name=__codelineno-13-21 href=#__codelineno-13-21></a> <span class=n>log</span><span class=o>.</span><span class=n>info</span><span class=p>(</span>
|
|
<a id=__codelineno-13-22 name=__codelineno-13-22 href=#__codelineno-13-22></a> <span class=sa>f</span><span class=s2>"Component </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=si>}</span><span class=s2> created."</span><span class=p>,</span>
|
|
<a id=__codelineno-13-23 name=__codelineno-13-23 href=#__codelineno-13-23></a> <span class=n>color</span><span class=o>=</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=n>ColorLogger</span><span class=o>.</span><span class=n>color</span><span class=p>,</span>
|
|
<a id=__codelineno-13-24 name=__codelineno-13-24 href=#__codelineno-13-24></a> <span class=p>)</span>
|
|
<a id=__codelineno-13-25 name=__codelineno-13-25 href=#__codelineno-13-25></a>
|
|
<a id=__codelineno-13-26 name=__codelineno-13-26 href=#__codelineno-13-26></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_class_deleted</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>OnComponentClassDeletedContext</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-13-27 name=__codelineno-13-27 href=#__codelineno-13-27></a> <span class=n>log</span><span class=o>.</span><span class=n>info</span><span class=p>(</span>
|
|
<a id=__codelineno-13-28 name=__codelineno-13-28 href=#__codelineno-13-28></a> <span class=sa>f</span><span class=s2>"Component </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=si>}</span><span class=s2> deleted."</span><span class=p>,</span>
|
|
<a id=__codelineno-13-29 name=__codelineno-13-29 href=#__codelineno-13-29></a> <span class=n>color</span><span class=o>=</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=o>.</span><span class=n>ColorLogger</span><span class=o>.</span><span class=n>color</span><span class=p>,</span>
|
|
<a id=__codelineno-13-30 name=__codelineno-13-30 href=#__codelineno-13-30></a> <span class=p>)</span>
|
|
<a id=__codelineno-13-31 name=__codelineno-13-31 href=#__codelineno-13-31></a>
|
|
<a id=__codelineno-13-32 name=__codelineno-13-32 href=#__codelineno-13-32></a> <span class=c1># This hook has access to the Component instance, so we access the color</span>
|
|
<a id=__codelineno-13-33 name=__codelineno-13-33 href=#__codelineno-13-33></a> <span class=c1># as `self.component.color_logger.color`.</span>
|
|
<a id=__codelineno-13-34 name=__codelineno-13-34 href=#__codelineno-13-34></a> <span class=k>def</span><span class=w> </span><span class=nf>on_component_input</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>OnComponentInputContext</span><span class=p>)</span> <span class=o>-></span> <span class=kc>None</span><span class=p>:</span>
|
|
<a id=__codelineno-13-35 name=__codelineno-13-35 href=#__codelineno-13-35></a> <span class=n>log</span><span class=o>.</span><span class=n>info</span><span class=p>(</span>
|
|
<a id=__codelineno-13-36 name=__codelineno-13-36 href=#__codelineno-13-36></a> <span class=sa>f</span><span class=s2>"Rendering component </span><span class=si>{</span><span class=n>ctx</span><span class=o>.</span><span class=n>component_cls</span><span class=si>}</span><span class=s2>."</span><span class=p>,</span>
|
|
<a id=__codelineno-13-37 name=__codelineno-13-37 href=#__codelineno-13-37></a> <span class=n>color</span><span class=o>=</span><span class=n>ctx</span><span class=o>.</span><span class=n>component</span><span class=o>.</span><span class=n>color_logger</span><span class=o>.</span><span class=n>color</span><span class=p>,</span>
|
|
<a id=__codelineno-13-38 name=__codelineno-13-38 href=#__codelineno-13-38></a> <span class=p>)</span>
|
|
</code></pre></div> <p>To use the <code>ColorLoggerExtension</code>, add it to your settings:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-14-1 name=__codelineno-14-1 href=#__codelineno-14-1></a><span class=c1># settings.py</span>
|
|
<a id=__codelineno-14-2 name=__codelineno-14-2 href=#__codelineno-14-2></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=p>{</span>
|
|
<a id=__codelineno-14-3 name=__codelineno-14-3 href=#__codelineno-14-3></a> <span class=s2>"extensions"</span><span class=p>:</span> <span class=p>[</span>
|
|
<a id=__codelineno-14-4 name=__codelineno-14-4 href=#__codelineno-14-4></a> <span class=n>ColorLoggerExtension</span><span class=p>,</span>
|
|
<a id=__codelineno-14-5 name=__codelineno-14-5 href=#__codelineno-14-5></a> <span class=p>],</span>
|
|
<a id=__codelineno-14-6 name=__codelineno-14-6 href=#__codelineno-14-6></a><span class=p>}</span>
|
|
</code></pre></div> <p>Once registered, in any component, you can define a <code>ColorLogger</code> attribute:</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>MyComponent</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=k>class</span><span class=w> </span><span class=nc>ColorLogger</span><span class=p>:</span>
|
|
<a id=__codelineno-15-3 name=__codelineno-15-3 href=#__codelineno-15-3></a> <span class=n>color</span> <span class=o>=</span> <span class=s2>"red"</span>
|
|
</code></pre></div> <p>This will log the component name and color when the component is created, deleted, or rendered.</p> <h3 id=utility-functions>Utility functions<a class=headerlink href=#utility-functions title="Permanent link">¤</a></h3> <p>django-components provides a few utility functions to help with writing extensions:</p> <ul> <li><a href=../../../reference/api#django_components.all_components><code>all_components()</code></a> - returns a list of all created component classes.</li> <li><a href=../../../reference/api#django_components.all_registries><code>all_registries()</code></a> - returns a list of all created registry instances.</li> </ul> <h3 id=accessing-the-component-class-from-within-an-extension>Accessing the component class from within an extension<a class=headerlink href=#accessing-the-component-class-from-within-an-extension title="Permanent link">¤</a></h3> <p>When you are writing the extension class that will be nested inside a Component class, e.g.</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>MyTable</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>MyExtension</span><span class=p>:</span>
|
|
<a id=__codelineno-16-3 name=__codelineno-16-3 href=#__codelineno-16-3></a> <span class=k>def</span><span class=w> </span><span class=nf>some_method</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
|
<a id=__codelineno-16-4 name=__codelineno-16-4 href=#__codelineno-16-4></a> <span class=o>...</span>
|
|
</code></pre></div> <p>You can access the owner Component class (<code>MyTable</code>) from within methods of the extension class (<code>MyExtension</code>) by using the <code>component_class</code> attribute:</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>MyTable</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>MyExtension</span><span class=p>:</span>
|
|
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a> <span class=k>def</span><span class=w> </span><span class=nf>some_method</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
|
<a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a> <span class=nb>print</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>component_class</span><span class=p>)</span>
|
|
</code></pre></div> <p>Here is how the <code>component_class</code> attribute may be used with our <code>ColorLogger</code> extension shown above:</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>class</span><span class=w> </span><span class=nc>ColorLoggerExtensionClass</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-18-2 name=__codelineno-18-2 href=#__codelineno-18-2></a> <span class=n>color</span><span class=p>:</span> <span class=nb>str</span>
|
|
<a id=__codelineno-18-3 name=__codelineno-18-3 href=#__codelineno-18-3></a>
|
|
<a id=__codelineno-18-4 name=__codelineno-18-4 href=#__codelineno-18-4></a> <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>
|
|
<a id=__codelineno-18-5 name=__codelineno-18-5 href=#__codelineno-18-5></a> <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=n>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>
|
|
<a id=__codelineno-18-6 name=__codelineno-18-6 href=#__codelineno-18-6></a>
|
|
<a id=__codelineno-18-7 name=__codelineno-18-7 href=#__codelineno-18-7></a>
|
|
<a id=__codelineno-18-8 name=__codelineno-18-8 href=#__codelineno-18-8></a><span class=k>class</span><span class=w> </span><span class=nc>ColorLoggerExtension</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-18-9 name=__codelineno-18-9 href=#__codelineno-18-9></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"color_logger"</span>
|
|
<a id=__codelineno-18-10 name=__codelineno-18-10 href=#__codelineno-18-10></a>
|
|
<a id=__codelineno-18-11 name=__codelineno-18-11 href=#__codelineno-18-11></a> <span class=c1># All `Component.ColorLogger` classes will inherit from this class.</span>
|
|
<a id=__codelineno-18-12 name=__codelineno-18-12 href=#__codelineno-18-12></a> <span class=n>ExtensionClass</span> <span class=o>=</span> <span class=n>ColorLoggerExtensionClass</span>
|
|
</code></pre></div> <h2 id=extension-commands>Extension Commands<a class=headerlink href=#extension-commands title="Permanent link">¤</a></h2> <p>Extensions in django-components can define custom commands that can be executed via the Django management command interface. This allows for powerful automation and customization capabilities.</p> <p>For example, if you have an extension that defines a command that prints "Hello world", you can run the command with:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-19-1 name=__codelineno-19-1 href=#__codelineno-19-1></a>python<span class=w> </span>manage.py<span class=w> </span>components<span class=w> </span>ext<span class=w> </span>run<span class=w> </span>my_ext<span class=w> </span>hello
|
|
</code></pre></div> <p>Where:</p> <ul> <li><code>python manage.py components</code> - is the Django entrypoint</li> <li><code>ext run</code> - is the subcommand to run extension commands</li> <li><code>my_ext</code> - is the extension name</li> <li><code>hello</code> - is the command name</li> </ul> <h3 id=defining-commands>Defining Commands<a class=headerlink href=#defining-commands title="Permanent link">¤</a></h3> <p>To define a command, subclass from <a href=../../../reference/api#django_components.ComponentCommand><code>ComponentCommand</code></a>. This subclass should define:</p> <ul> <li><code>name</code> - the command's name</li> <li><code>help</code> - the command's help text</li> <li><code>handle</code> - the logic to execute when the command is run</li> </ul> <div class=highlight><pre><span></span><code><a id=__codelineno-20-1 name=__codelineno-20-1 href=#__codelineno-20-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>ComponentCommand</span><span class=p>,</span> <span class=n>ComponentExtension</span>
|
|
<a id=__codelineno-20-2 name=__codelineno-20-2 href=#__codelineno-20-2></a>
|
|
<a id=__codelineno-20-3 name=__codelineno-20-3 href=#__codelineno-20-3></a><span class=k>class</span><span class=w> </span><span class=nc>HelloCommand</span><span class=p>(</span><span class=n>ComponentCommand</span><span class=p>):</span>
|
|
<a id=__codelineno-20-4 name=__codelineno-20-4 href=#__codelineno-20-4></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"hello"</span>
|
|
<a id=__codelineno-20-5 name=__codelineno-20-5 href=#__codelineno-20-5></a> <span class=n>help</span> <span class=o>=</span> <span class=s2>"Say hello"</span>
|
|
<a id=__codelineno-20-6 name=__codelineno-20-6 href=#__codelineno-20-6></a>
|
|
<a id=__codelineno-20-7 name=__codelineno-20-7 href=#__codelineno-20-7></a> <span class=k>def</span><span class=w> </span><span class=nf>handle</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-20-8 name=__codelineno-20-8 href=#__codelineno-20-8></a> <span class=nb>print</span><span class=p>(</span><span class=s2>"Hello, world!"</span><span class=p>)</span>
|
|
<a id=__codelineno-20-9 name=__codelineno-20-9 href=#__codelineno-20-9></a>
|
|
<a id=__codelineno-20-10 name=__codelineno-20-10 href=#__codelineno-20-10></a><span class=k>class</span><span class=w> </span><span class=nc>MyExt</span><span class=p>(</span><span class=n>ComponentExtension</span><span class=p>):</span>
|
|
<a id=__codelineno-20-11 name=__codelineno-20-11 href=#__codelineno-20-11></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"my_ext"</span>
|
|
<a id=__codelineno-20-12 name=__codelineno-20-12 href=#__codelineno-20-12></a> <span class=n>commands</span> <span class=o>=</span> <span class=p>[</span><span class=n>HelloCommand</span><span class=p>]</span>
|
|
</code></pre></div> <h3 id=defining-command-arguments-and-options>Defining Command Arguments and Options<a class=headerlink href=#defining-command-arguments-and-options title="Permanent link">¤</a></h3> <p>Commands can accept positional arguments and options (e.g. <code>--foo</code>), which are defined using the <a href=../../../reference/api#django_components.ComponentCommand.arguments><code>arguments</code></a> attribute of the <a href=../../../reference/api#django_components.ComponentCommand><code>ComponentCommand</code></a> class.</p> <p>The arguments are parsed with <a href=https://docs.python.org/3/library/argparse.html><code>argparse</code></a> into a dictionary of arguments and options. These are then available as keyword arguments to the <a href=../../../reference/api#django_components.ComponentCommand.handle><code>handle</code></a> method of the command.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-21-1 name=__codelineno-21-1 href=#__codelineno-21-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>CommandArg</span><span class=p>,</span> <span class=n>ComponentCommand</span><span class=p>,</span> <span class=n>ComponentExtension</span>
|
|
<a id=__codelineno-21-2 name=__codelineno-21-2 href=#__codelineno-21-2></a>
|
|
<a id=__codelineno-21-3 name=__codelineno-21-3 href=#__codelineno-21-3></a><span class=k>class</span><span class=w> </span><span class=nc>HelloCommand</span><span class=p>(</span><span class=n>ComponentCommand</span><span class=p>):</span>
|
|
<a id=__codelineno-21-4 name=__codelineno-21-4 href=#__codelineno-21-4></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"hello"</span>
|
|
<a id=__codelineno-21-5 name=__codelineno-21-5 href=#__codelineno-21-5></a> <span class=n>help</span> <span class=o>=</span> <span class=s2>"Say hello"</span>
|
|
<a id=__codelineno-21-6 name=__codelineno-21-6 href=#__codelineno-21-6></a>
|
|
<a id=__codelineno-21-7 name=__codelineno-21-7 href=#__codelineno-21-7></a> <span class=n>arguments</span> <span class=o>=</span> <span class=p>[</span>
|
|
<a id=__codelineno-21-8 name=__codelineno-21-8 href=#__codelineno-21-8></a> <span class=c1># Positional argument</span>
|
|
<a id=__codelineno-21-9 name=__codelineno-21-9 href=#__codelineno-21-9></a> <span class=n>CommandArg</span><span class=p>(</span>
|
|
<a id=__codelineno-21-10 name=__codelineno-21-10 href=#__codelineno-21-10></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=s2>"name"</span><span class=p>,</span>
|
|
<a id=__codelineno-21-11 name=__codelineno-21-11 href=#__codelineno-21-11></a> <span class=n>help</span><span class=o>=</span><span class=s2>"The name to say hello to"</span><span class=p>,</span>
|
|
<a id=__codelineno-21-12 name=__codelineno-21-12 href=#__codelineno-21-12></a> <span class=p>),</span>
|
|
<a id=__codelineno-21-13 name=__codelineno-21-13 href=#__codelineno-21-13></a> <span class=c1># Optional argument</span>
|
|
<a id=__codelineno-21-14 name=__codelineno-21-14 href=#__codelineno-21-14></a> <span class=n>CommandArg</span><span class=p>(</span>
|
|
<a id=__codelineno-21-15 name=__codelineno-21-15 href=#__codelineno-21-15></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=p>[</span><span class=s2>"--shout"</span><span class=p>,</span> <span class=s2>"-s"</span><span class=p>],</span>
|
|
<a id=__codelineno-21-16 name=__codelineno-21-16 href=#__codelineno-21-16></a> <span class=n>action</span><span class=o>=</span><span class=s2>"store_true"</span><span class=p>,</span>
|
|
<a id=__codelineno-21-17 name=__codelineno-21-17 href=#__codelineno-21-17></a> <span class=n>help</span><span class=o>=</span><span class=s2>"Shout the hello"</span><span class=p>,</span>
|
|
<a id=__codelineno-21-18 name=__codelineno-21-18 href=#__codelineno-21-18></a> <span class=p>),</span>
|
|
<a id=__codelineno-21-19 name=__codelineno-21-19 href=#__codelineno-21-19></a> <span class=p>]</span>
|
|
<a id=__codelineno-21-20 name=__codelineno-21-20 href=#__codelineno-21-20></a>
|
|
<a id=__codelineno-21-21 name=__codelineno-21-21 href=#__codelineno-21-21></a> <span class=k>def</span><span class=w> </span><span class=nf>handle</span><span class=p>(</span><span class=bp>self</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>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
|
|
<a id=__codelineno-21-22 name=__codelineno-21-22 href=#__codelineno-21-22></a> <span class=n>shout</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>"shout"</span><span class=p>,</span> <span class=kc>False</span><span class=p>)</span>
|
|
<a id=__codelineno-21-23 name=__codelineno-21-23 href=#__codelineno-21-23></a> <span class=n>msg</span> <span class=o>=</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>
|
|
<a id=__codelineno-21-24 name=__codelineno-21-24 href=#__codelineno-21-24></a> <span class=k>if</span> <span class=n>shout</span><span class=p>:</span>
|
|
<a id=__codelineno-21-25 name=__codelineno-21-25 href=#__codelineno-21-25></a> <span class=n>msg</span> <span class=o>=</span> <span class=n>msg</span><span class=o>.</span><span class=n>upper</span><span class=p>()</span>
|
|
<a id=__codelineno-21-26 name=__codelineno-21-26 href=#__codelineno-21-26></a> <span class=nb>print</span><span class=p>(</span><span class=n>msg</span><span class=p>)</span>
|
|
</code></pre></div> <p>You can run the command with arguments and options:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a>python<span class=w> </span>manage.py<span class=w> </span>components<span class=w> </span>ext<span class=w> </span>run<span class=w> </span>my_ext<span class=w> </span>hello<span class=w> </span>John<span class=w> </span>--shout
|
|
<a id=__codelineno-22-2 name=__codelineno-22-2 href=#__codelineno-22-2></a>>>><span class=w> </span>HELLO,<span class=w> </span>JOHN!
|
|
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>Command definitions are parsed with <code>argparse</code>, so you can use all the features of <code>argparse</code> to define your arguments and options.</p> <p>See the <a href=https://docs.python.org/3/library/argparse.html>argparse documentation</a> for more information.</p> <p>django-components defines types as <a href=../../../reference/api#django_components.CommandArg><code>CommandArg</code></a>, <a href=../../../reference/api#django_components.CommandArgGroup><code>CommandArgGroup</code></a>, <a href=../../../reference/api#django_components.CommandSubcommand><code>CommandSubcommand</code></a>, and <a href=../../../reference/api#django_components.CommandParserInput><code>CommandParserInput</code></a> to help with type checking.</p> </div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>If a command doesn't have the <a href=../../../reference/api#django_components.ComponentCommand.handle><code>handle</code></a> method defined, the command will print a help message and exit.</p> </div> <h3 id=grouping-arguments>Grouping Arguments<a class=headerlink href=#grouping-arguments title="Permanent link">¤</a></h3> <p>Arguments can be grouped using <a href=../../../reference/api#django_components.CommandArgGroup><code>CommandArgGroup</code></a> to provide better organization and help messages.</p> <p>Read more on <a href=https://docs.python.org/3/library/argparse.html#argument-groups>argparse argument groups</a>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-23-1 name=__codelineno-23-1 href=#__codelineno-23-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>CommandArg</span><span class=p>,</span> <span class=n>CommandArgGroup</span><span class=p>,</span> <span class=n>ComponentCommand</span><span class=p>,</span> <span class=n>ComponentExtension</span>
|
|
<a id=__codelineno-23-2 name=__codelineno-23-2 href=#__codelineno-23-2></a>
|
|
<a id=__codelineno-23-3 name=__codelineno-23-3 href=#__codelineno-23-3></a><span class=k>class</span><span class=w> </span><span class=nc>HelloCommand</span><span class=p>(</span><span class=n>ComponentCommand</span><span class=p>):</span>
|
|
<a id=__codelineno-23-4 name=__codelineno-23-4 href=#__codelineno-23-4></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"hello"</span>
|
|
<a id=__codelineno-23-5 name=__codelineno-23-5 href=#__codelineno-23-5></a> <span class=n>help</span> <span class=o>=</span> <span class=s2>"Say hello"</span>
|
|
<a id=__codelineno-23-6 name=__codelineno-23-6 href=#__codelineno-23-6></a>
|
|
<a id=__codelineno-23-7 name=__codelineno-23-7 href=#__codelineno-23-7></a> <span class=c1># Argument parsing is managed by `argparse`.</span>
|
|
<a id=__codelineno-23-8 name=__codelineno-23-8 href=#__codelineno-23-8></a> <span class=n>arguments</span> <span class=o>=</span> <span class=p>[</span>
|
|
<a id=__codelineno-23-9 name=__codelineno-23-9 href=#__codelineno-23-9></a> <span class=c1># Positional argument</span>
|
|
<a id=__codelineno-23-10 name=__codelineno-23-10 href=#__codelineno-23-10></a> <span class=n>CommandArg</span><span class=p>(</span>
|
|
<a id=__codelineno-23-11 name=__codelineno-23-11 href=#__codelineno-23-11></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=s2>"name"</span><span class=p>,</span>
|
|
<a id=__codelineno-23-12 name=__codelineno-23-12 href=#__codelineno-23-12></a> <span class=n>help</span><span class=o>=</span><span class=s2>"The name to say hello to"</span><span class=p>,</span>
|
|
<a id=__codelineno-23-13 name=__codelineno-23-13 href=#__codelineno-23-13></a> <span class=p>),</span>
|
|
<a id=__codelineno-23-14 name=__codelineno-23-14 href=#__codelineno-23-14></a> <span class=c1># Optional argument</span>
|
|
<a id=__codelineno-23-15 name=__codelineno-23-15 href=#__codelineno-23-15></a> <span class=n>CommandArg</span><span class=p>(</span>
|
|
<a id=__codelineno-23-16 name=__codelineno-23-16 href=#__codelineno-23-16></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=p>[</span><span class=s2>"--shout"</span><span class=p>,</span> <span class=s2>"-s"</span><span class=p>],</span>
|
|
<a id=__codelineno-23-17 name=__codelineno-23-17 href=#__codelineno-23-17></a> <span class=n>action</span><span class=o>=</span><span class=s2>"store_true"</span><span class=p>,</span>
|
|
<a id=__codelineno-23-18 name=__codelineno-23-18 href=#__codelineno-23-18></a> <span class=n>help</span><span class=o>=</span><span class=s2>"Shout the hello"</span><span class=p>,</span>
|
|
<a id=__codelineno-23-19 name=__codelineno-23-19 href=#__codelineno-23-19></a> <span class=p>),</span>
|
|
<a id=__codelineno-23-20 name=__codelineno-23-20 href=#__codelineno-23-20></a> <span class=c1># When printing the command help message, `--bar` and `--baz`</span>
|
|
<a id=__codelineno-23-21 name=__codelineno-23-21 href=#__codelineno-23-21></a> <span class=c1># will be grouped under "group bar".</span>
|
|
<a id=__codelineno-23-22 name=__codelineno-23-22 href=#__codelineno-23-22></a> <span class=n>CommandArgGroup</span><span class=p>(</span>
|
|
<a id=__codelineno-23-23 name=__codelineno-23-23 href=#__codelineno-23-23></a> <span class=n>title</span><span class=o>=</span><span class=s2>"group bar"</span><span class=p>,</span>
|
|
<a id=__codelineno-23-24 name=__codelineno-23-24 href=#__codelineno-23-24></a> <span class=n>description</span><span class=o>=</span><span class=s2>"Group description."</span><span class=p>,</span>
|
|
<a id=__codelineno-23-25 name=__codelineno-23-25 href=#__codelineno-23-25></a> <span class=n>arguments</span><span class=o>=</span><span class=p>[</span>
|
|
<a id=__codelineno-23-26 name=__codelineno-23-26 href=#__codelineno-23-26></a> <span class=n>CommandArg</span><span class=p>(</span>
|
|
<a id=__codelineno-23-27 name=__codelineno-23-27 href=#__codelineno-23-27></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=s2>"--bar"</span><span class=p>,</span>
|
|
<a id=__codelineno-23-28 name=__codelineno-23-28 href=#__codelineno-23-28></a> <span class=n>help</span><span class=o>=</span><span class=s2>"Bar description."</span><span class=p>,</span>
|
|
<a id=__codelineno-23-29 name=__codelineno-23-29 href=#__codelineno-23-29></a> <span class=p>),</span>
|
|
<a id=__codelineno-23-30 name=__codelineno-23-30 href=#__codelineno-23-30></a> <span class=n>CommandArg</span><span class=p>(</span>
|
|
<a id=__codelineno-23-31 name=__codelineno-23-31 href=#__codelineno-23-31></a> <span class=n>name_or_flags</span><span class=o>=</span><span class=s2>"--baz"</span><span class=p>,</span>
|
|
<a id=__codelineno-23-32 name=__codelineno-23-32 href=#__codelineno-23-32></a> <span class=n>help</span><span class=o>=</span><span class=s2>"Baz description."</span><span class=p>,</span>
|
|
<a id=__codelineno-23-33 name=__codelineno-23-33 href=#__codelineno-23-33></a> <span class=p>),</span>
|
|
<a id=__codelineno-23-34 name=__codelineno-23-34 href=#__codelineno-23-34></a> <span class=p>],</span>
|
|
<a id=__codelineno-23-35 name=__codelineno-23-35 href=#__codelineno-23-35></a> <span class=p>),</span>
|
|
<a id=__codelineno-23-36 name=__codelineno-23-36 href=#__codelineno-23-36></a> <span class=p>]</span>
|
|
<a id=__codelineno-23-37 name=__codelineno-23-37 href=#__codelineno-23-37></a>
|
|
<a id=__codelineno-23-38 name=__codelineno-23-38 href=#__codelineno-23-38></a> <span class=k>def</span><span class=w> </span><span class=nf>handle</span><span class=p>(</span><span class=bp>self</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>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
|
|
<a id=__codelineno-23-39 name=__codelineno-23-39 href=#__codelineno-23-39></a> <span class=n>shout</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>"shout"</span><span class=p>,</span> <span class=kc>False</span><span class=p>)</span>
|
|
<a id=__codelineno-23-40 name=__codelineno-23-40 href=#__codelineno-23-40></a> <span class=n>msg</span> <span class=o>=</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>
|
|
<a id=__codelineno-23-41 name=__codelineno-23-41 href=#__codelineno-23-41></a> <span class=k>if</span> <span class=n>shout</span><span class=p>:</span>
|
|
<a id=__codelineno-23-42 name=__codelineno-23-42 href=#__codelineno-23-42></a> <span class=n>msg</span> <span class=o>=</span> <span class=n>msg</span><span class=o>.</span><span class=n>upper</span><span class=p>()</span>
|
|
<a id=__codelineno-23-43 name=__codelineno-23-43 href=#__codelineno-23-43></a> <span class=nb>print</span><span class=p>(</span><span class=n>msg</span><span class=p>)</span>
|
|
</code></pre></div> <h3 id=subcommands>Subcommands<a class=headerlink href=#subcommands title="Permanent link">¤</a></h3> <p>Extensions can define subcommands, allowing for more complex command structures.</p> <p>Subcommands are defined similarly to root commands, as subclasses of <a href=../../../reference/api#django_components.ComponentCommand><code>ComponentCommand</code></a> class.</p> <p>However, instead of defining the subcommands in the <a href=../../../reference/api#django_components.ComponentExtension.commands><code>commands</code></a> attribute of the extension, you define them in the <a href=../../../reference/api#django_components.ComponentCommand.subcommands><code>subcommands</code></a> attribute of the parent command:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-24-1 name=__codelineno-24-1 href=#__codelineno-24-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>CommandArg</span><span class=p>,</span> <span class=n>CommandArgGroup</span><span class=p>,</span> <span class=n>ComponentCommand</span><span class=p>,</span> <span class=n>ComponentExtension</span>
|
|
<a id=__codelineno-24-2 name=__codelineno-24-2 href=#__codelineno-24-2></a>
|
|
<a id=__codelineno-24-3 name=__codelineno-24-3 href=#__codelineno-24-3></a><span class=k>class</span><span class=w> </span><span class=nc>ChildCommand</span><span class=p>(</span><span class=n>ComponentCommand</span><span class=p>):</span>
|
|
<a id=__codelineno-24-4 name=__codelineno-24-4 href=#__codelineno-24-4></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"child"</span>
|
|
<a id=__codelineno-24-5 name=__codelineno-24-5 href=#__codelineno-24-5></a> <span class=n>help</span> <span class=o>=</span> <span class=s2>"Child command"</span>
|
|
<a id=__codelineno-24-6 name=__codelineno-24-6 href=#__codelineno-24-6></a>
|
|
<a id=__codelineno-24-7 name=__codelineno-24-7 href=#__codelineno-24-7></a> <span class=k>def</span><span class=w> </span><span class=nf>handle</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-24-8 name=__codelineno-24-8 href=#__codelineno-24-8></a> <span class=nb>print</span><span class=p>(</span><span class=s2>"Child command"</span><span class=p>)</span>
|
|
<a id=__codelineno-24-9 name=__codelineno-24-9 href=#__codelineno-24-9></a>
|
|
<a id=__codelineno-24-10 name=__codelineno-24-10 href=#__codelineno-24-10></a><span class=k>class</span><span class=w> </span><span class=nc>ParentCommand</span><span class=p>(</span><span class=n>ComponentCommand</span><span class=p>):</span>
|
|
<a id=__codelineno-24-11 name=__codelineno-24-11 href=#__codelineno-24-11></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"parent"</span>
|
|
<a id=__codelineno-24-12 name=__codelineno-24-12 href=#__codelineno-24-12></a> <span class=n>help</span> <span class=o>=</span> <span class=s2>"Parent command"</span>
|
|
<a id=__codelineno-24-13 name=__codelineno-24-13 href=#__codelineno-24-13></a> <span class=n>subcommands</span> <span class=o>=</span> <span class=p>[</span>
|
|
<a id=__codelineno-24-14 name=__codelineno-24-14 href=#__codelineno-24-14></a> <span class=n>ChildCommand</span><span class=p>,</span>
|
|
<a id=__codelineno-24-15 name=__codelineno-24-15 href=#__codelineno-24-15></a> <span class=p>]</span>
|
|
<a id=__codelineno-24-16 name=__codelineno-24-16 href=#__codelineno-24-16></a>
|
|
<a id=__codelineno-24-17 name=__codelineno-24-17 href=#__codelineno-24-17></a> <span class=k>def</span><span class=w> </span><span class=nf>handle</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-24-18 name=__codelineno-24-18 href=#__codelineno-24-18></a> <span class=nb>print</span><span class=p>(</span><span class=s2>"Parent command"</span><span class=p>)</span>
|
|
</code></pre></div> <p>In this example, we can run two commands.</p> <p>Either the parent command:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-25-1 name=__codelineno-25-1 href=#__codelineno-25-1></a>python<span class=w> </span>manage.py<span class=w> </span>components<span class=w> </span>ext<span class=w> </span>run<span class=w> </span>parent
|
|
<a id=__codelineno-25-2 name=__codelineno-25-2 href=#__codelineno-25-2></a>>>><span class=w> </span>Parent<span class=w> </span><span class=nb>command</span>
|
|
</code></pre></div> <p>Or the child command:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-26-1 name=__codelineno-26-1 href=#__codelineno-26-1></a>python<span class=w> </span>manage.py<span class=w> </span>components<span class=w> </span>ext<span class=w> </span>run<span class=w> </span>parent<span class=w> </span>child
|
|
<a id=__codelineno-26-2 name=__codelineno-26-2 href=#__codelineno-26-2></a>>>><span class=w> </span>Child<span class=w> </span><span class=nb>command</span>
|
|
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Subcommands are independent of the parent command. When a subcommand runs, the parent command is NOT executed.</p> <p>As such, if you want to pass arguments to both the parent and child commands, e.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></a>python<span class=w> </span>manage.py<span class=w> </span>components<span class=w> </span>ext<span class=w> </span>run<span class=w> </span>parent<span class=w> </span>--foo<span class=w> </span>child<span class=w> </span>--bar
|
|
</code></pre></div> <p>You should instead pass all the arguments to the subcommand:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-28-1 name=__codelineno-28-1 href=#__codelineno-28-1></a>python<span class=w> </span>manage.py<span class=w> </span>components<span class=w> </span>ext<span class=w> </span>run<span class=w> </span>parent<span class=w> </span>child<span class=w> </span>--foo<span class=w> </span>--bar
|
|
</code></pre></div> </div> <h3 id=print-command-help>Print command help<a class=headerlink href=#print-command-help title="Permanent link">¤</a></h3> <p>By default, all commands will print their help message when run with the <code>--help</code> / <code>-h</code> flag.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-29-1 name=__codelineno-29-1 href=#__codelineno-29-1></a>python<span class=w> </span>manage.py<span class=w> </span>components<span class=w> </span>ext<span class=w> </span>run<span class=w> </span>my_ext<span class=w> </span>--help
|
|
</code></pre></div> <p>The help message prints out all the arguments and options available for the command, as well as any subcommands.</p> <h3 id=testing-commands>Testing Commands<a class=headerlink href=#testing-commands title="Permanent link">¤</a></h3> <p>Commands can be tested using Django's <a href=https://docs.djangoproject.com/en/5.1/ref/django-admin/#running-management-commands-from-your-code><code>call_command()</code></a> function, which allows you to simulate running the command in tests.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-30-1 name=__codelineno-30-1 href=#__codelineno-30-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.core.management</span><span class=w> </span><span class=kn>import</span> <span class=n>call_command</span>
|
|
<a id=__codelineno-30-2 name=__codelineno-30-2 href=#__codelineno-30-2></a>
|
|
<a id=__codelineno-30-3 name=__codelineno-30-3 href=#__codelineno-30-3></a><span class=n>call_command</span><span class=p>(</span><span class=s1>'components'</span><span class=p>,</span> <span class=s1>'ext'</span><span class=p>,</span> <span class=s1>'run'</span><span class=p>,</span> <span class=s1>'my_ext'</span><span class=p>,</span> <span class=s1>'hello'</span><span class=p>,</span> <span class=s1>'--name'</span><span class=p>,</span> <span class=s1>'John'</span><span class=p>)</span>
|
|
</code></pre></div> <p>To capture the output of the command, you can use the <a href=https://docs.python.org/3/library/io.html#io.StringIO><code>StringIO</code></a> module to redirect the output to a string:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-31-1 name=__codelineno-31-1 href=#__codelineno-31-1></a><span class=kn>from</span><span class=w> </span><span class=nn>io</span><span class=w> </span><span class=kn>import</span> <span class=n>StringIO</span>
|
|
<a id=__codelineno-31-2 name=__codelineno-31-2 href=#__codelineno-31-2></a>
|
|
<a id=__codelineno-31-3 name=__codelineno-31-3 href=#__codelineno-31-3></a><span class=n>out</span> <span class=o>=</span> <span class=n>StringIO</span><span class=p>()</span>
|
|
<a id=__codelineno-31-4 name=__codelineno-31-4 href=#__codelineno-31-4></a><span class=k>with</span> <span class=n>patch</span><span class=p>(</span><span class=s2>"sys.stdout"</span><span class=p>,</span> <span class=n>new</span><span class=o>=</span><span class=n>out</span><span class=p>):</span>
|
|
<a id=__codelineno-31-5 name=__codelineno-31-5 href=#__codelineno-31-5></a> <span class=n>call_command</span><span class=p>(</span><span class=s1>'components'</span><span class=p>,</span> <span class=s1>'ext'</span><span class=p>,</span> <span class=s1>'run'</span><span class=p>,</span> <span class=s1>'my_ext'</span><span class=p>,</span> <span class=s1>'hello'</span><span class=p>,</span> <span class=s1>'--name'</span><span class=p>,</span> <span class=s1>'John'</span><span class=p>)</span>
|
|
<a id=__codelineno-31-6 name=__codelineno-31-6 href=#__codelineno-31-6></a><span class=n>output</span> <span class=o>=</span> <span class=n>out</span><span class=o>.</span><span class=n>getvalue</span><span class=p>()</span>
|
|
</code></pre></div> <p>And to temporarily set the extensions, you can use the <a href=../../../reference/testing_api#djc_test><code>@djc_test</code></a> decorator.</p> <p>Thus, a full test example can then look like this:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-32-1 name=__codelineno-32-1 href=#__codelineno-32-1></a><span class=kn>from</span><span class=w> </span><span class=nn>io</span><span class=w> </span><span class=kn>import</span> <span class=n>StringIO</span>
|
|
<a id=__codelineno-32-2 name=__codelineno-32-2 href=#__codelineno-32-2></a><span class=kn>from</span><span class=w> </span><span class=nn>unittest.mock</span><span class=w> </span><span class=kn>import</span> <span class=n>patch</span>
|
|
<a id=__codelineno-32-3 name=__codelineno-32-3 href=#__codelineno-32-3></a>
|
|
<a id=__codelineno-32-4 name=__codelineno-32-4 href=#__codelineno-32-4></a><span class=kn>from</span><span class=w> </span><span class=nn>django.core.management</span><span class=w> </span><span class=kn>import</span> <span class=n>call_command</span>
|
|
<a id=__codelineno-32-5 name=__codelineno-32-5 href=#__codelineno-32-5></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components.testing</span><span class=w> </span><span class=kn>import</span> <span class=n>djc_test</span>
|
|
<a id=__codelineno-32-6 name=__codelineno-32-6 href=#__codelineno-32-6></a>
|
|
<a id=__codelineno-32-7 name=__codelineno-32-7 href=#__codelineno-32-7></a><span class=nd>@djc_test</span><span class=p>(</span>
|
|
<a id=__codelineno-32-8 name=__codelineno-32-8 href=#__codelineno-32-8></a> <span class=n>components_settings</span><span class=o>=</span><span class=p>{</span>
|
|
<a id=__codelineno-32-9 name=__codelineno-32-9 href=#__codelineno-32-9></a> <span class=s2>"extensions"</span><span class=p>:</span> <span class=p>[</span>
|
|
<a id=__codelineno-32-10 name=__codelineno-32-10 href=#__codelineno-32-10></a> <span class=s2>"my_app.extensions.MyExtension"</span><span class=p>,</span>
|
|
<a id=__codelineno-32-11 name=__codelineno-32-11 href=#__codelineno-32-11></a> <span class=p>],</span>
|
|
<a id=__codelineno-32-12 name=__codelineno-32-12 href=#__codelineno-32-12></a> <span class=p>},</span>
|
|
<a id=__codelineno-32-13 name=__codelineno-32-13 href=#__codelineno-32-13></a><span class=p>)</span>
|
|
<a id=__codelineno-32-14 name=__codelineno-32-14 href=#__codelineno-32-14></a><span class=k>def</span><span class=w> </span><span class=nf>test_hello_command</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
|
|
<a id=__codelineno-32-15 name=__codelineno-32-15 href=#__codelineno-32-15></a> <span class=n>out</span> <span class=o>=</span> <span class=n>StringIO</span><span class=p>()</span>
|
|
<a id=__codelineno-32-16 name=__codelineno-32-16 href=#__codelineno-32-16></a> <span class=k>with</span> <span class=n>patch</span><span class=p>(</span><span class=s2>"sys.stdout"</span><span class=p>,</span> <span class=n>new</span><span class=o>=</span><span class=n>out</span><span class=p>):</span>
|
|
<a id=__codelineno-32-17 name=__codelineno-32-17 href=#__codelineno-32-17></a> <span class=n>call_command</span><span class=p>(</span><span class=s1>'components'</span><span class=p>,</span> <span class=s1>'ext'</span><span class=p>,</span> <span class=s1>'run'</span><span class=p>,</span> <span class=s1>'my_ext'</span><span class=p>,</span> <span class=s1>'hello'</span><span class=p>,</span> <span class=s1>'--name'</span><span class=p>,</span> <span class=s1>'John'</span><span class=p>)</span>
|
|
<a id=__codelineno-32-18 name=__codelineno-32-18 href=#__codelineno-32-18></a> <span class=n>output</span> <span class=o>=</span> <span class=n>out</span><span class=o>.</span><span class=n>getvalue</span><span class=p>()</span>
|
|
<a id=__codelineno-32-19 name=__codelineno-32-19 href=#__codelineno-32-19></a> <span class=k>assert</span> <span class=n>output</span> <span class=o>==</span> <span class=s2>"Hello, John!</span><span class=se>\n</span><span class=s2>"</span>
|
|
</code></pre></div> <h2 id=extension-urls>Extension URLs<a class=headerlink href=#extension-urls title="Permanent link">¤</a></h2> <p>Extensions can define custom views and endpoints that can be accessed through the Django application.</p> <p>To define URLs for an extension, set them in the <a href=../../../reference/api#django_components.ComponentExtension.urls><code>urls</code></a> attribute of your <a href=../../../reference/api#django_components.ComponentExtension><code>ComponentExtension</code></a> class. Each URL is defined using the <a href=../../../reference/api#django_components.URLRoute><code>URLRoute</code></a> class, which specifies the path, handler, and optional name for the route.</p> <p>Here's an example of how to define URLs within an extension:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-33-1 name=__codelineno-33-1 href=#__codelineno-33-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components.extension</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentExtension</span><span class=p>,</span> <span class=n>URLRoute</span>
|
|
<a id=__codelineno-33-2 name=__codelineno-33-2 href=#__codelineno-33-2></a><span class=kn>from</span><span class=w> </span><span class=nn>django.http</span><span class=w> </span><span class=kn>import</span> <span class=n>HttpResponse</span>
|
|
<a id=__codelineno-33-3 name=__codelineno-33-3 href=#__codelineno-33-3></a>
|
|
<a id=__codelineno-33-4 name=__codelineno-33-4 href=#__codelineno-33-4></a><span class=k>def</span><span class=w> </span><span class=nf>my_view</span><span class=p>(</span><span class=n>request</span><span class=p>):</span>
|
|
<a id=__codelineno-33-5 name=__codelineno-33-5 href=#__codelineno-33-5></a> <span class=k>return</span> <span class=n>HttpResponse</span><span class=p>(</span><span class=s2>"Hello from my extension!"</span><span class=p>)</span>
|
|
<a id=__codelineno-33-6 name=__codelineno-33-6 href=#__codelineno-33-6></a>
|
|
<a id=__codelineno-33-7 name=__codelineno-33-7 href=#__codelineno-33-7></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-33-8 name=__codelineno-33-8 href=#__codelineno-33-8></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"my_extension"</span>
|
|
<a id=__codelineno-33-9 name=__codelineno-33-9 href=#__codelineno-33-9></a>
|
|
<a id=__codelineno-33-10 name=__codelineno-33-10 href=#__codelineno-33-10></a> <span class=n>urls</span> <span class=o>=</span> <span class=p>[</span>
|
|
<a id=__codelineno-33-11 name=__codelineno-33-11 href=#__codelineno-33-11></a> <span class=n>URLRoute</span><span class=p>(</span><span class=n>path</span><span class=o>=</span><span class=s2>"my-view/"</span><span class=p>,</span> <span class=n>handler</span><span class=o>=</span><span class=n>my_view</span><span class=p>,</span> <span class=n>name</span><span class=o>=</span><span class=s2>"my_view"</span><span class=p>),</span>
|
|
<a id=__codelineno-33-12 name=__codelineno-33-12 href=#__codelineno-33-12></a> <span class=n>URLRoute</span><span class=p>(</span><span class=n>path</span><span class=o>=</span><span class=s2>"another-view/<int:id>/"</span><span class=p>,</span> <span class=n>handler</span><span class=o>=</span><span class=n>my_view</span><span class=p>,</span> <span class=n>name</span><span class=o>=</span><span class=s2>"another_view"</span><span class=p>),</span>
|
|
<a id=__codelineno-33-13 name=__codelineno-33-13 href=#__codelineno-33-13></a> <span class=p>]</span>
|
|
</code></pre></div> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>The <a href=../../../reference/api#django_components.URLRoute><code>URLRoute</code></a> objects are different from objects created with Django's <a href=https://docs.djangoproject.com/en/5.1/ref/urls/#path><code>django.urls.path()</code></a>. Do NOT use <code>URLRoute</code> objects in Django's <a href=https://docs.djangoproject.com/en/5.1/topics/http/urls/#example><code>urlpatterns</code></a> and vice versa!</p> <p>django-components uses a custom <a href=../../../reference/api#django_components.URLRoute><code>URLRoute</code></a> class to define framework-agnostic routing rules.</p> <p>As of v0.131, <code>URLRoute</code> objects are directly converted to Django's <code>URLPattern</code> and <code>URLResolver</code> objects.</p> </div> <h3 id=accessing-extension-urls>Accessing Extension URLs<a class=headerlink href=#accessing-extension-urls title="Permanent link">¤</a></h3> <p>The URLs defined in an extension are available under the path</p> <div class=highlight><pre><span></span><code><a id=__codelineno-34-1 name=__codelineno-34-1 href=#__codelineno-34-1></a>/components/ext/<extension_name>/
|
|
</code></pre></div> <p>For example, if you have defined a URL with the path <code>my-view/<str:name>/</code> in an extension named <code>my_extension</code>, it can be accessed at:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-35-1 name=__codelineno-35-1 href=#__codelineno-35-1></a>/components/ext/my_extension/my-view/john/
|
|
</code></pre></div> <h3 id=nested-urls>Nested URLs<a class=headerlink href=#nested-urls title="Permanent link">¤</a></h3> <p>Extensions can also define nested URLs to allow for more complex routing structures.</p> <p>To define nested URLs, set the <a href=../../../reference/api#django_components.URLRoute.children><code>children</code></a> attribute of the <a href=../../../reference/api#django_components.URLRoute><code>URLRoute</code></a> object to a list of child <a href=../../../reference/api#django_components.URLRoute><code>URLRoute</code></a> objects:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-36-1 name=__codelineno-36-1 href=#__codelineno-36-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-36-2 name=__codelineno-36-2 href=#__codelineno-36-2></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>"my_extension"</span>
|
|
<a id=__codelineno-36-3 name=__codelineno-36-3 href=#__codelineno-36-3></a>
|
|
<a id=__codelineno-36-4 name=__codelineno-36-4 href=#__codelineno-36-4></a> <span class=n>urls</span> <span class=o>=</span> <span class=p>[</span>
|
|
<a id=__codelineno-36-5 name=__codelineno-36-5 href=#__codelineno-36-5></a> <span class=n>URLRoute</span><span class=p>(</span>
|
|
<a id=__codelineno-36-6 name=__codelineno-36-6 href=#__codelineno-36-6></a> <span class=n>path</span><span class=o>=</span><span class=s2>"parent/"</span><span class=p>,</span>
|
|
<a id=__codelineno-36-7 name=__codelineno-36-7 href=#__codelineno-36-7></a> <span class=n>name</span><span class=o>=</span><span class=s2>"parent_view"</span><span class=p>,</span>
|
|
<a id=__codelineno-36-8 name=__codelineno-36-8 href=#__codelineno-36-8></a> <span class=n>children</span><span class=o>=</span><span class=p>[</span>
|
|
<a id=__codelineno-36-9 name=__codelineno-36-9 href=#__codelineno-36-9></a> <span class=n>URLRoute</span><span class=p>(</span><span class=n>path</span><span class=o>=</span><span class=s2>"child/<str:name>/"</span><span class=p>,</span> <span class=n>handler</span><span class=o>=</span><span class=n>my_view</span><span class=p>,</span> <span class=n>name</span><span class=o>=</span><span class=s2>"child_view"</span><span class=p>),</span>
|
|
<a id=__codelineno-36-10 name=__codelineno-36-10 href=#__codelineno-36-10></a> <span class=p>],</span>
|
|
<a id=__codelineno-36-11 name=__codelineno-36-11 href=#__codelineno-36-11></a> <span class=p>),</span>
|
|
<a id=__codelineno-36-12 name=__codelineno-36-12 href=#__codelineno-36-12></a> <span class=p>]</span>
|
|
</code></pre></div> <p>In this example, the URL</p> <div class=highlight><pre><span></span><code><a id=__codelineno-37-1 name=__codelineno-37-1 href=#__codelineno-37-1></a>/components/ext/my_extension/parent/child/john/
|
|
</code></pre></div> <p>would call the <code>my_view</code> handler with the parameter <code>name</code> set to <code>"John"</code>.</p> <h3 id=passing-kwargs-and-other-extra-fields-to-url-routes>Passing kwargs and other extra fields to URL routes<a class=headerlink href=#passing-kwargs-and-other-extra-fields-to-url-routes title="Permanent link">¤</a></h3> <p>The <a href=../../../reference/api#django_components.URLRoute><code>URLRoute</code></a> class is framework-agnostic, so that extensions could be used with non-Django frameworks in the future.</p> <p>However, that means that there may be some extra fields that Django's <a href=https://docs.djangoproject.com/en/5.1/ref/urls/#path><code>django.urls.path()</code></a> accepts, but which are not defined on the <code>URLRoute</code> object.</p> <p>To address this, the <a href=../../../reference/api#django_components.URLRoute><code>URLRoute</code></a> object has an <a href=../../../reference/api#django_components.URLRoute.extra><code>extra</code></a> attribute, which is a dictionary that can be used to pass any extra kwargs to <code>django.urls.path()</code>:</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>URLRoute</span><span class=p>(</span>
|
|
<a id=__codelineno-38-2 name=__codelineno-38-2 href=#__codelineno-38-2></a> <span class=n>path</span><span class=o>=</span><span class=s2>"my-view/<str:name>/"</span><span class=p>,</span>
|
|
<a id=__codelineno-38-3 name=__codelineno-38-3 href=#__codelineno-38-3></a> <span class=n>handler</span><span class=o>=</span><span class=n>my_view</span><span class=p>,</span>
|
|
<a id=__codelineno-38-4 name=__codelineno-38-4 href=#__codelineno-38-4></a> <span class=n>name</span><span class=o>=</span><span class=s2>"my_view"</span><span class=p>,</span>
|
|
<a id=__codelineno-38-5 name=__codelineno-38-5 href=#__codelineno-38-5></a> <span class=n>extra</span><span class=o>=</span><span class=p>{</span><span class=s2>"kwargs"</span><span class=p>:</span> <span class=p>{</span><span class=s2>"foo"</span><span class=p>:</span> <span class=s2>"bar"</span><span class=p>}</span> <span class=p>},</span>
|
|
<a id=__codelineno-38-6 name=__codelineno-38-6 href=#__codelineno-38-6></a><span class=p>)</span>
|
|
</code></pre></div> <p>Is the same as:</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>django</span><span class=o>.</span><span class=n>urls</span><span class=o>.</span><span class=n>path</span><span class=p>(</span>
|
|
<a id=__codelineno-39-2 name=__codelineno-39-2 href=#__codelineno-39-2></a> <span class=s2>"my-view/<str:name>/"</span><span class=p>,</span>
|
|
<a id=__codelineno-39-3 name=__codelineno-39-3 href=#__codelineno-39-3></a> <span class=n>view</span><span class=o>=</span><span class=n>my_view</span><span class=p>,</span>
|
|
<a id=__codelineno-39-4 name=__codelineno-39-4 href=#__codelineno-39-4></a> <span class=n>name</span><span class=o>=</span><span class=s2>"my_view"</span><span class=p>,</span>
|
|
<a id=__codelineno-39-5 name=__codelineno-39-5 href=#__codelineno-39-5></a> <span class=n>kwargs</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-39-6 name=__codelineno-39-6 href=#__codelineno-39-6></a><span class=p>)</span>
|
|
</code></pre></div> <p>because <code>URLRoute</code> is converted to Django's route like so:</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>django</span><span class=o>.</span><span class=n>urls</span><span class=o>.</span><span class=n>path</span><span class=p>(</span>
|
|
<a id=__codelineno-40-2 name=__codelineno-40-2 href=#__codelineno-40-2></a> <span class=n>route</span><span class=o>.</span><span class=n>path</span><span class=p>,</span>
|
|
<a id=__codelineno-40-3 name=__codelineno-40-3 href=#__codelineno-40-3></a> <span class=n>view</span><span class=o>=</span><span class=n>route</span><span class=o>.</span><span class=n>handler</span><span class=p>,</span>
|
|
<a id=__codelineno-40-4 name=__codelineno-40-4 href=#__codelineno-40-4></a> <span class=n>name</span><span class=o>=</span><span class=n>route</span><span class=o>.</span><span class=n>name</span><span class=p>,</span>
|
|
<a id=__codelineno-40-5 name=__codelineno-40-5 href=#__codelineno-40-5></a> <span class=o>**</span><span class=n>route</span><span class=o>.</span><span class=n>extra</span><span class=p>,</span>
|
|
<a id=__codelineno-40-6 name=__codelineno-40-6 href=#__codelineno-40-6></a><span class=p>)</span>
|
|
</code></pre></div> <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="March 19, 2025 08:38:25"><span class=timeago datetime=2025-03-19T08:38:25+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="March 19, 2025 08:38:25">2025-03-19</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 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg> </span> <nav> <a href=mailto:juraj.oravec.josefson@gmail.com>Juro Oravec</a> </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=../tag_formatter/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Tag formatters"> <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> Tag formatters </div> </div> </a> <a href=../testing/ class="md-footer__link md-footer__link--next" aria-label="Next: Testing"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Testing </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 496 512"><!-- Font Awesome Free 6.7.2 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 2024 Fonticons, Inc.--><path d="M165.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.9M244.8 8C106.1 8 0 113.3 0 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.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.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 6.7.2 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 2024 Fonticons, Inc.--><path 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 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3M167.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.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3"/></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.f8cc74c7.min.js", "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.c8b220af.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> |