mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-08-17 20:50:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
django-components/0.112/reference/django_components/dependencies/index.html

236 lines
No EOL
72 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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://emilstenstrom.github.io/django-components/latest/reference/django_components/dependencies/ rel=canonical><link href=../context/ rel=prev><link href=../expression/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.5.43"><title>dependencies - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.0253249f.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><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="<code class=" doc-symbol doc-symbol-nav doc-symbol-module&quot;></code> dependencies - Django-Components" > <meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/reference/django_components/dependencies/index.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://emilstenstrom.github.io/django-components/latest/reference/django_components/dependencies/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="<code class=" doc-symbol doc-symbol-nav doc-symbol-module&quot;></code> dependencies - Django-Components" > <meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/reference/django_components/dependencies/index.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=#django_components.dependencies class=md-skip> Skip to content </a> </div> <div data-md-component=announce> <aside class=md-banner> <div class="md-banner__inner md-grid md-typeset"> 🚨The documentation is still a work in progress. 🚨 </div> </aside> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class="md-header md-header--shadow" 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> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dependencies </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/EmilStenstrom/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.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 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> EmilStenstrom/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <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" 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/EmilStenstrom/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.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 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> EmilStenstrom/django-components </div> </a> </div> <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_1> <div class="md-nav__link md-nav__container"> <a href=../../.. class="md-nav__link "> <span class=md-ellipsis> README </span> </a> <label class="md-nav__link " for=__nav_1 id=__nav_1_label tabindex> <span class="md-nav__icon md-icon"></span> </label> </div> <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> README </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../CHANGELOG/ class=md-nav__link> <span class=md-ellipsis> Changelog </span> </a> </li> <li class=md-nav__item> <a href=../../../CODE_OF_CONDUCT/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../license/ class=md-nav__link> <span class=md-ellipsis> License </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_2 checked> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex> <span class=md-ellipsis> Reference </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=true> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1 checked> <label class=md-nav__link for=__nav_2_1 id=__nav_2_1_label tabindex=0> <span class=md-ellipsis> API Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1> <span class="md-nav__icon md-icon"></span> API Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_1_1 checked> <div class="md-nav__link md-nav__container"> <a href=../ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </span> </a> <label class="md-nav__link " for=__nav_2_1_1 id=__nav_2_1_1_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_2_1_1_label aria-expanded=true> <label class=md-nav__title for=__nav_2_1_1> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../app_settings/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> app_settings </span> </a> </li> <li class=md-nav__item> <a href=../apps/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> apps </span> </a> </li> <li class=md-nav__item> <a href=../attributes/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> attributes </span> </a> </li> <li class=md-nav__item> <a href=../autodiscovery/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> autodiscovery </span> </a> </li> <li class=md-nav__item> <a href=../component/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component </span> </a> </li> <li class=md-nav__item> <a href=../component_media/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_media </span> </a> </li> <li class=md-nav__item> <a href=../component_registry/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_registry </span> </a> </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_1_1_9> <div class="md-nav__link md-nav__container"> <a href=../components/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> components </span> </a> <label class="md-nav__link " for=__nav_2_1_1_9 id=__nav_2_1_1_9_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_9_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_9> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> components </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../components/dynamic/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dynamic </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../context/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context </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> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dependencies </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> dependencies </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=#django_components.dependencies.ComponentDependencyMiddleware class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentDependencyMiddleware </span> </a> </li> <li class=md-nav__item> <a href=#django_components.dependencies.render_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;render_dependencies </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../expression/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression </span> </a> </li> <li class=md-nav__item> <a href=../finders/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> finders </span> </a> </li> <li class=md-nav__item> <a href=../library/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> library </span> </a> </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_1_1_15> <div class="md-nav__link md-nav__container"> <a href=../management/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </span> </a> <label class="md-nav__link " for=__nav_2_1_1_15 id=__nav_2_1_1_15_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_15_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_15> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> management </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_2_1_1_15_2> <div class="md-nav__link md-nav__container"> <a href=../management/commands/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </span> </a> <label class="md-nav__link " for=__nav_2_1_1_15_2 id=__nav_2_1_1_15_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=5 aria-labelledby=__nav_2_1_1_15_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_15_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> commands </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../management/commands/startcomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> startcomponent </span> </a> </li> <li class=md-nav__item> <a href=../management/commands/upgradecomponent/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> upgradecomponent </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../middleware/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> middleware </span> </a> </li> <li class=md-nav__item> <a href=../node/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> node </span> </a> </li> <li class=md-nav__item> <a href=../provide/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> provide </span> </a> </li> <li class=md-nav__item> <a href=../slots/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> slots </span> </a> </li> <li class=md-nav__item> <a href=../tag_formatter/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> tag_formatter </span> </a> </li> <li class=md-nav__item> <a href=../template/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template </span> </a> </li> <li class=md-nav__item> <a href=../template_loader/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_loader </span> </a> </li> <li class=md-nav__item> <a href=../template_parser/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> template_parser </span> </a> </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_1_1_24> <div class="md-nav__link md-nav__container"> <a href=../templatetags/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </span> </a> <label class="md-nav__link " for=__nav_2_1_1_24 id=__nav_2_1_1_24_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_24_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_24> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> templatetags </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../templatetags/component_tags/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> component_tags </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../types/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> types </span> </a> </li> <li class=md-nav__item> <a href=../urls/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> urls </span> </a> </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_1_1_27> <div class="md-nav__link md-nav__container"> <a href=../util/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> util </span> </a> <label class="md-nav__link " for=__nav_2_1_1_27 id=__nav_2_1_1_27_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_1_27_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_1_27> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> util </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../util/cache/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> cache </span> </a> </li> <li class=md-nav__item> <a href=../util/html/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> html </span> </a> </li> <li class=md-nav__item> <a href=../util/loader/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> loader </span> </a> </li> <li class=md-nav__item> <a href=../util/logger/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> logger </span> </a> </li> <li class=md-nav__item> <a href=../util/misc/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> misc </span> </a> </li> <li class=md-nav__item> <a href=../util/nanoid/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> nanoid </span> </a> </li> <li class=md-nav__item> <a href=../util/tag_parser/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> tag_parser </span> </a> </li> <li class=md-nav__item> <a href=../util/types/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> types </span> </a> </li> <li class=md-nav__item> <a href=../util/validation/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> validation </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_2_1_2> <div class="md-nav__link md-nav__container"> <a href=../../django_components_js/build/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components_js </span> </a> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_2_1_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> django_components_js </label> <ul class=md-nav__list data-md-scrollfix> </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_1_3> <div class="md-nav__link md-nav__container"> <a href=../../docs/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> docs </span> </a> <label class="md-nav__link " for=__nav_2_1_3 id=__nav_2_1_3_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=3 aria-labelledby=__nav_2_1_3_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_3> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> docs </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_2_1_3_2> <div class="md-nav__link md-nav__container"> <a href=../../docs/scripts/ class="md-nav__link "> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> scripts </span> </a> <label class="md-nav__link " for=__nav_2_1_3_2 id=__nav_2_1_3_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=4 aria-labelledby=__nav_2_1_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1_3_2> <span class="md-nav__icon md-icon"></span> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> scripts </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../docs/scripts/reference/ class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> reference </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </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=#django_components.dependencies.ComponentDependencyMiddleware class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-class"></code>&nbsp;ComponentDependencyMiddleware </span> </a> </li> <li class=md-nav__item> <a href=#django_components.dependencies.render_dependencies class=md-nav__link> <span class=md-ellipsis> <code class="doc-symbol doc-symbol-toc doc-symbol-function"></code>&nbsp;render_dependencies </span> </a> </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/EmilStenstrom/django-components/edit/master/src/src/django_components/dependencies.py 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/EmilStenstrom/django-components/raw/master/src/src/django_components/dependencies.py 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> <div class="doc doc-object doc-module"> <h1 id=django_components.dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">dependencies</span> <a href=#django_components.dependencies class=headerlink title="Permanent link">¤</a></h1> <div class="doc doc-contents first"> <p>All code related to management of component dependencies (JS and CSS scripts)</p> <p><span class=doc-section-title>Modules:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.dependencies.types href=../#django_components.types>types</a></code></b> – <div class=doc-md-description> <p>Helper types for IDEs.</p> </div> </li> </ul> <p><span class=doc-section-title>Classes:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.dependencies.ComponentDependencyMiddleware href=../#django_components.dependencies.ComponentDependencyMiddleware>ComponentDependencyMiddleware</a></code></b> – <div class=doc-md-description> <p>Middleware that inserts CSS/JS dependencies for all rendered</p> </div> </li> </ul> <p><span class=doc-section-title>Functions:</span></p> <ul> <li class="doc-section-item field-body"> <b><code><a class="autorefs autorefs-internal" title=django_components.dependencies.render_dependencies href=../#django_components.dependencies.render_dependencies>render_dependencies</a></code></b> – <div class=doc-md-description> <p>Given a string that contains parts that were rendered by components,</p> </div> </li> </ul> <div class="doc doc-children"> <div class="doc doc-object doc-class"> <h2 id=django_components.dependencies.ComponentDependencyMiddleware class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-class"></code> <span class="doc doc-object-name doc-class-name">ComponentDependencyMiddleware</span> <a href=#django_components.dependencies.ComponentDependencyMiddleware class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>ComponentDependencyMiddleware</span><span class=p>(</span><span class=n>get_response</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" title=typing.Callable href=https://docs.python.org/3.12/library/typing.html#typing.Callable>Callable</a></span><span class=p>[[</span><span class=n><a class="autorefs autorefs-external" title=django.http.HttpRequest href=https://docs.djangoproject.com/en/5.0/ref/request-response/#django.http.HttpRequest>HttpRequest</a></span><span class=p>],</span> <span class=n><a class="autorefs autorefs-external" title=django.http.HttpResponse href=https://docs.djangoproject.com/en/5.0/ref/request-response/#django.http.HttpResponse>HttpResponse</a></span><span class=p>])</span>
</code></pre></div> <div class="doc doc-contents "> <p>Middleware that inserts CSS/JS dependencies for all rendered components at points marked with template tags.</p> <details class=quote> <summary>Source code in <code>src/django_components/dependencies.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-766>766</a></span>
<span class=normal><a href=#__codelineno-0-767>767</a></span>
<span class=normal><a href=#__codelineno-0-768>768</a></span>
<span class=normal><a href=#__codelineno-0-769>769</a></span>
<span class=normal><a href=#__codelineno-0-770>770</a></span>
<span class=normal><a href=#__codelineno-0-771>771</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-766 name=__codelineno-0-766></a><span class=k>def</span> <span class=fm>__init__</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>get_response</span><span class=p>:</span> <span class=s2>&quot;Callable[[HttpRequest], HttpResponse]&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-0-767 name=__codelineno-0-767></a> <span class=bp>self</span><span class=o>.</span><span class=n>get_response</span> <span class=o>=</span> <span class=n>get_response</span>
<a id=__codelineno-0-768 name=__codelineno-0-768></a>
<a id=__codelineno-0-769 name=__codelineno-0-769></a> <span class=c1># NOTE: Required to work with async</span>
<a id=__codelineno-0-770 name=__codelineno-0-770></a> <span class=k>if</span> <span class=n>iscoroutinefunction</span><span class=p>(</span><span class=bp>self</span><span class=o>.</span><span class=n>get_response</span><span class=p>):</span>
<a id=__codelineno-0-771 name=__codelineno-0-771></a> <span class=n>markcoroutinefunction</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span>
</code></pre></div></td></tr></table></div> </details> <div class="doc doc-children"> </div> </div> </div> <div class="doc doc-object doc-function"> <h2 id=django_components.dependencies.render_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">render_dependencies</span> <a href=#django_components.dependencies.render_dependencies class=headerlink title="Permanent link">¤</a></h2> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=nf>render_dependencies</span><span class=p>(</span><span class=n>content</span><span class=p>:</span> <span class=n><span title=django_components.dependencies.TContent>TContent</span></span><span class=p>,</span> <span class=nb>type</span><span class=p>:</span> <span class=n><span title=django_components.dependencies.RenderType>RenderType</span></span> <span class=o>=</span> <span class=s1>&#39;document&#39;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django_components.dependencies.TContent>TContent</span></span>
</code></pre></div> <div class="doc doc-contents "> <p>Given a string that contains parts that were rendered by components, this function inserts all used JS and CSS.</p> <p>By default, the string is parsed as an HTML and: - CSS is inserted at the end of <code>&lt;head&gt;</code> (if present) - JS is inserted at the end of <code>&lt;body&gt;</code> (if present)</p> <p>If you used <code>{% component_js_dependencies %}</code> or <code>{% component_css_dependencies %}</code>, then the JS and CSS will be inserted only at these locations.</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=k>def</span> <span class=nf>my_view</span><span class=p>(</span><span class=n>request</span><span class=p>):</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=n>template</span> <span class=o>=</span> <span class=n>Template</span><span class=p>(</span><span class=s1>&#39;&#39;&#39;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=s1> {</span><span class=si>% lo</span><span class=s1>ad components %}</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a><span class=s1> &lt;!doctype html&gt;</span>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=s1> &lt;html&gt;</span>
<a id=__codelineno-0-6 name=__codelineno-0-6 href=#__codelineno-0-6></a><span class=s1> &lt;head&gt;&lt;/head&gt;</span>
<a id=__codelineno-0-7 name=__codelineno-0-7 href=#__codelineno-0-7></a><span class=s1> &lt;body&gt;</span>
<a id=__codelineno-0-8 name=__codelineno-0-8 href=#__codelineno-0-8></a><span class=s1> &lt;h1&gt;{{ table_name }}&lt;/h1&gt;</span>
<a id=__codelineno-0-9 name=__codelineno-0-9 href=#__codelineno-0-9></a><span class=s1> {</span><span class=si>% c</span><span class=s1>omponent &quot;table&quot; name=table_name / %}</span>
<a id=__codelineno-0-10 name=__codelineno-0-10 href=#__codelineno-0-10></a><span class=s1> &lt;/body&gt;</span>
<a id=__codelineno-0-11 name=__codelineno-0-11 href=#__codelineno-0-11></a><span class=s1> &lt;/html&gt;</span>
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a><span class=s1> &#39;&#39;&#39;</span><span class=p>)</span>
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a>
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> <span class=n>html</span> <span class=o>=</span> <span class=n>template</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-0-15 name=__codelineno-0-15 href=#__codelineno-0-15></a> <span class=n>Context</span><span class=p>({</span>
<a id=__codelineno-0-16 name=__codelineno-0-16 href=#__codelineno-0-16></a> <span class=s2>&quot;table_name&quot;</span><span class=p>:</span> <span class=n>request</span><span class=o>.</span><span class=n>GET</span><span class=p>[</span><span class=s2>&quot;name&quot;</span><span class=p>],</span>
<a id=__codelineno-0-17 name=__codelineno-0-17 href=#__codelineno-0-17></a> <span class=p>})</span>
<a id=__codelineno-0-18 name=__codelineno-0-18 href=#__codelineno-0-18></a> <span class=p>)</span>
<a id=__codelineno-0-19 name=__codelineno-0-19 href=#__codelineno-0-19></a>
<a id=__codelineno-0-20 name=__codelineno-0-20 href=#__codelineno-0-20></a> <span class=c1># This inserts components&#39; JS and CSS</span>
<a id=__codelineno-0-21 name=__codelineno-0-21 href=#__codelineno-0-21></a> <span class=n>processed_html</span> <span class=o>=</span> <span class=n>render_dependencies</span><span class=p>(</span><span class=n>html</span><span class=p>)</span>
<a id=__codelineno-0-22 name=__codelineno-0-22 href=#__codelineno-0-22></a>
<a id=__codelineno-0-23 name=__codelineno-0-23 href=#__codelineno-0-23></a> <span class=k>return</span> <span class=n>HttpResponse</span><span class=p>(</span><span class=n>processed_html</span><span class=p>)</span>
</code></pre></div></p> <details class=quote> <summary>Source code in <code>src/django_components/dependencies.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-289>289</a></span>
<span class=normal><a href=#__codelineno-0-290>290</a></span>
<span class=normal><a href=#__codelineno-0-291>291</a></span>
<span class=normal><a href=#__codelineno-0-292>292</a></span>
<span class=normal><a href=#__codelineno-0-293>293</a></span>
<span class=normal><a href=#__codelineno-0-294>294</a></span>
<span class=normal><a href=#__codelineno-0-295>295</a></span>
<span class=normal><a href=#__codelineno-0-296>296</a></span>
<span class=normal><a href=#__codelineno-0-297>297</a></span>
<span class=normal><a href=#__codelineno-0-298>298</a></span>
<span class=normal><a href=#__codelineno-0-299>299</a></span>
<span class=normal><a href=#__codelineno-0-300>300</a></span>
<span class=normal><a href=#__codelineno-0-301>301</a></span>
<span class=normal><a href=#__codelineno-0-302>302</a></span>
<span class=normal><a href=#__codelineno-0-303>303</a></span>
<span class=normal><a href=#__codelineno-0-304>304</a></span>
<span class=normal><a href=#__codelineno-0-305>305</a></span>
<span class=normal><a href=#__codelineno-0-306>306</a></span>
<span class=normal><a href=#__codelineno-0-307>307</a></span>
<span class=normal><a href=#__codelineno-0-308>308</a></span>
<span class=normal><a href=#__codelineno-0-309>309</a></span>
<span class=normal><a href=#__codelineno-0-310>310</a></span>
<span class=normal><a href=#__codelineno-0-311>311</a></span>
<span class=normal><a href=#__codelineno-0-312>312</a></span>
<span class=normal><a href=#__codelineno-0-313>313</a></span>
<span class=normal><a href=#__codelineno-0-314>314</a></span>
<span class=normal><a href=#__codelineno-0-315>315</a></span>
<span class=normal><a href=#__codelineno-0-316>316</a></span>
<span class=normal><a href=#__codelineno-0-317>317</a></span>
<span class=normal><a href=#__codelineno-0-318>318</a></span>
<span class=normal><a href=#__codelineno-0-319>319</a></span>
<span class=normal><a href=#__codelineno-0-320>320</a></span>
<span class=normal><a href=#__codelineno-0-321>321</a></span>
<span class=normal><a href=#__codelineno-0-322>322</a></span>
<span class=normal><a href=#__codelineno-0-323>323</a></span>
<span class=normal><a href=#__codelineno-0-324>324</a></span>
<span class=normal><a href=#__codelineno-0-325>325</a></span>
<span class=normal><a href=#__codelineno-0-326>326</a></span>
<span class=normal><a href=#__codelineno-0-327>327</a></span>
<span class=normal><a href=#__codelineno-0-328>328</a></span>
<span class=normal><a href=#__codelineno-0-329>329</a></span>
<span class=normal><a href=#__codelineno-0-330>330</a></span>
<span class=normal><a href=#__codelineno-0-331>331</a></span>
<span class=normal><a href=#__codelineno-0-332>332</a></span>
<span class=normal><a href=#__codelineno-0-333>333</a></span>
<span class=normal><a href=#__codelineno-0-334>334</a></span>
<span class=normal><a href=#__codelineno-0-335>335</a></span>
<span class=normal><a href=#__codelineno-0-336>336</a></span>
<span class=normal><a href=#__codelineno-0-337>337</a></span>
<span class=normal><a href=#__codelineno-0-338>338</a></span>
<span class=normal><a href=#__codelineno-0-339>339</a></span>
<span class=normal><a href=#__codelineno-0-340>340</a></span>
<span class=normal><a href=#__codelineno-0-341>341</a></span>
<span class=normal><a href=#__codelineno-0-342>342</a></span>
<span class=normal><a href=#__codelineno-0-343>343</a></span>
<span class=normal><a href=#__codelineno-0-344>344</a></span>
<span class=normal><a href=#__codelineno-0-345>345</a></span>
<span class=normal><a href=#__codelineno-0-346>346</a></span>
<span class=normal><a href=#__codelineno-0-347>347</a></span>
<span class=normal><a href=#__codelineno-0-348>348</a></span>
<span class=normal><a href=#__codelineno-0-349>349</a></span>
<span class=normal><a href=#__codelineno-0-350>350</a></span>
<span class=normal><a href=#__codelineno-0-351>351</a></span>
<span class=normal><a href=#__codelineno-0-352>352</a></span>
<span class=normal><a href=#__codelineno-0-353>353</a></span>
<span class=normal><a href=#__codelineno-0-354>354</a></span>
<span class=normal><a href=#__codelineno-0-355>355</a></span>
<span class=normal><a href=#__codelineno-0-356>356</a></span>
<span class=normal><a href=#__codelineno-0-357>357</a></span>
<span class=normal><a href=#__codelineno-0-358>358</a></span>
<span class=normal><a href=#__codelineno-0-359>359</a></span>
<span class=normal><a href=#__codelineno-0-360>360</a></span>
<span class=normal><a href=#__codelineno-0-361>361</a></span>
<span class=normal><a href=#__codelineno-0-362>362</a></span>
<span class=normal><a href=#__codelineno-0-363>363</a></span>
<span class=normal><a href=#__codelineno-0-364>364</a></span>
<span class=normal><a href=#__codelineno-0-365>365</a></span>
<span class=normal><a href=#__codelineno-0-366>366</a></span>
<span class=normal><a href=#__codelineno-0-367>367</a></span>
<span class=normal><a href=#__codelineno-0-368>368</a></span>
<span class=normal><a href=#__codelineno-0-369>369</a></span>
<span class=normal><a href=#__codelineno-0-370>370</a></span>
<span class=normal><a href=#__codelineno-0-371>371</a></span>
<span class=normal><a href=#__codelineno-0-372>372</a></span>
<span class=normal><a href=#__codelineno-0-373>373</a></span>
<span class=normal><a href=#__codelineno-0-374>374</a></span>
<span class=normal><a href=#__codelineno-0-375>375</a></span>
<span class=normal><a href=#__codelineno-0-376>376</a></span>
<span class=normal><a href=#__codelineno-0-377>377</a></span>
<span class=normal><a href=#__codelineno-0-378>378</a></span>
<span class=normal><a href=#__codelineno-0-379>379</a></span>
<span class=normal><a href=#__codelineno-0-380>380</a></span>
<span class=normal><a href=#__codelineno-0-381>381</a></span>
<span class=normal><a href=#__codelineno-0-382>382</a></span>
<span class=normal><a href=#__codelineno-0-383>383</a></span>
<span class=normal><a href=#__codelineno-0-384>384</a></span>
<span class=normal><a href=#__codelineno-0-385>385</a></span>
<span class=normal><a href=#__codelineno-0-386>386</a></span>
<span class=normal><a href=#__codelineno-0-387>387</a></span>
<span class=normal><a href=#__codelineno-0-388>388</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-289 name=__codelineno-0-289></a><span class=k>def</span> <span class=nf>render_dependencies</span><span class=p>(</span><span class=n>content</span><span class=p>:</span> <span class=n>TContent</span><span class=p>,</span> <span class=nb>type</span><span class=p>:</span> <span class=n>RenderType</span> <span class=o>=</span> <span class=s2>&quot;document&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>TContent</span><span class=p>:</span>
<a id=__codelineno-0-290 name=__codelineno-0-290></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-291 name=__codelineno-0-291></a><span class=sd> Given a string that contains parts that were rendered by components,</span>
<a id=__codelineno-0-292 name=__codelineno-0-292></a><span class=sd> this function inserts all used JS and CSS.</span>
<a id=__codelineno-0-293 name=__codelineno-0-293></a>
<a id=__codelineno-0-294 name=__codelineno-0-294></a><span class=sd> By default, the string is parsed as an HTML and:</span>
<a id=__codelineno-0-295 name=__codelineno-0-295></a><span class=sd> - CSS is inserted at the end of `&lt;head&gt;` (if present)</span>
<a id=__codelineno-0-296 name=__codelineno-0-296></a><span class=sd> - JS is inserted at the end of `&lt;body&gt;` (if present)</span>
<a id=__codelineno-0-297 name=__codelineno-0-297></a>
<a id=__codelineno-0-298 name=__codelineno-0-298></a><span class=sd> If you used `{% component_js_dependencies %}` or `{% component_css_dependencies %}`,</span>
<a id=__codelineno-0-299 name=__codelineno-0-299></a><span class=sd> then the JS and CSS will be inserted only at these locations.</span>
<a id=__codelineno-0-300 name=__codelineno-0-300></a>
<a id=__codelineno-0-301 name=__codelineno-0-301></a><span class=sd> Example:</span>
<a id=__codelineno-0-302 name=__codelineno-0-302></a><span class=sd> ```python</span>
<a id=__codelineno-0-303 name=__codelineno-0-303></a><span class=sd> def my_view(request):</span>
<a id=__codelineno-0-304 name=__codelineno-0-304></a><span class=sd> template = Template(&#39;&#39;&#39;</span>
<a id=__codelineno-0-305 name=__codelineno-0-305></a><span class=sd> {% load components %}</span>
<a id=__codelineno-0-306 name=__codelineno-0-306></a><span class=sd> &lt;!doctype html&gt;</span>
<a id=__codelineno-0-307 name=__codelineno-0-307></a><span class=sd> &lt;html&gt;</span>
<a id=__codelineno-0-308 name=__codelineno-0-308></a><span class=sd> &lt;head&gt;&lt;/head&gt;</span>
<a id=__codelineno-0-309 name=__codelineno-0-309></a><span class=sd> &lt;body&gt;</span>
<a id=__codelineno-0-310 name=__codelineno-0-310></a><span class=sd> &lt;h1&gt;{{ table_name }}&lt;/h1&gt;</span>
<a id=__codelineno-0-311 name=__codelineno-0-311></a><span class=sd> {% component &quot;table&quot; name=table_name / %}</span>
<a id=__codelineno-0-312 name=__codelineno-0-312></a><span class=sd> &lt;/body&gt;</span>
<a id=__codelineno-0-313 name=__codelineno-0-313></a><span class=sd> &lt;/html&gt;</span>
<a id=__codelineno-0-314 name=__codelineno-0-314></a><span class=sd> &#39;&#39;&#39;)</span>
<a id=__codelineno-0-315 name=__codelineno-0-315></a>
<a id=__codelineno-0-316 name=__codelineno-0-316></a><span class=sd> html = template.render(</span>
<a id=__codelineno-0-317 name=__codelineno-0-317></a><span class=sd> Context({</span>
<a id=__codelineno-0-318 name=__codelineno-0-318></a><span class=sd> &quot;table_name&quot;: request.GET[&quot;name&quot;],</span>
<a id=__codelineno-0-319 name=__codelineno-0-319></a><span class=sd> })</span>
<a id=__codelineno-0-320 name=__codelineno-0-320></a><span class=sd> )</span>
<a id=__codelineno-0-321 name=__codelineno-0-321></a>
<a id=__codelineno-0-322 name=__codelineno-0-322></a><span class=sd> # This inserts components&#39; JS and CSS</span>
<a id=__codelineno-0-323 name=__codelineno-0-323></a><span class=sd> processed_html = render_dependencies(html)</span>
<a id=__codelineno-0-324 name=__codelineno-0-324></a>
<a id=__codelineno-0-325 name=__codelineno-0-325></a><span class=sd> return HttpResponse(processed_html)</span>
<a id=__codelineno-0-326 name=__codelineno-0-326></a><span class=sd> ```</span>
<a id=__codelineno-0-327 name=__codelineno-0-327></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-328 name=__codelineno-0-328></a> <span class=n>is_safestring</span> <span class=o>=</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>content</span><span class=p>,</span> <span class=n>SafeString</span><span class=p>)</span>
<a id=__codelineno-0-329 name=__codelineno-0-329></a>
<a id=__codelineno-0-330 name=__codelineno-0-330></a> <span class=k>if</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>content</span><span class=p>,</span> <span class=nb>str</span><span class=p>):</span>
<a id=__codelineno-0-331 name=__codelineno-0-331></a> <span class=n>content_</span> <span class=o>=</span> <span class=n>content</span><span class=o>.</span><span class=n>encode</span><span class=p>()</span>
<a id=__codelineno-0-332 name=__codelineno-0-332></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-333 name=__codelineno-0-333></a> <span class=n>content_</span> <span class=o>=</span> <span class=n>cast</span><span class=p>(</span><span class=nb>bytes</span><span class=p>,</span> <span class=n>content</span><span class=p>)</span>
<a id=__codelineno-0-334 name=__codelineno-0-334></a>
<a id=__codelineno-0-335 name=__codelineno-0-335></a> <span class=n>content_</span><span class=p>,</span> <span class=n>js_dependencies</span><span class=p>,</span> <span class=n>css_dependencies</span> <span class=o>=</span> <span class=n>_process_dep_declarations</span><span class=p>(</span><span class=n>content_</span><span class=p>,</span> <span class=nb>type</span><span class=p>)</span>
<a id=__codelineno-0-336 name=__codelineno-0-336></a>
<a id=__codelineno-0-337 name=__codelineno-0-337></a> <span class=c1># Replace the placeholders with the actual content</span>
<a id=__codelineno-0-338 name=__codelineno-0-338></a> <span class=n>did_find_js_placeholder</span> <span class=o>=</span> <span class=kc>False</span>
<a id=__codelineno-0-339 name=__codelineno-0-339></a> <span class=n>did_find_css_placeholder</span> <span class=o>=</span> <span class=kc>False</span>
<a id=__codelineno-0-340 name=__codelineno-0-340></a>
<a id=__codelineno-0-341 name=__codelineno-0-341></a> <span class=k>def</span> <span class=nf>on_replace_match</span><span class=p>(</span><span class=n>match</span><span class=p>:</span> <span class=s2>&quot;re.Match[bytes]&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=nb>bytes</span><span class=p>:</span>
<a id=__codelineno-0-342 name=__codelineno-0-342></a> <span class=k>nonlocal</span> <span class=n>did_find_css_placeholder</span>
<a id=__codelineno-0-343 name=__codelineno-0-343></a> <span class=k>nonlocal</span> <span class=n>did_find_js_placeholder</span>
<a id=__codelineno-0-344 name=__codelineno-0-344></a>
<a id=__codelineno-0-345 name=__codelineno-0-345></a> <span class=k>if</span> <span class=n>match</span><span class=p>[</span><span class=mi>0</span><span class=p>]</span> <span class=o>==</span> <span class=n>CSS_PLACEHOLDER_BYTES</span><span class=p>:</span>
<a id=__codelineno-0-346 name=__codelineno-0-346></a> <span class=n>replacement</span> <span class=o>=</span> <span class=n>css_dependencies</span>
<a id=__codelineno-0-347 name=__codelineno-0-347></a> <span class=n>did_find_css_placeholder</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-0-348 name=__codelineno-0-348></a> <span class=k>elif</span> <span class=n>match</span><span class=p>[</span><span class=mi>0</span><span class=p>]</span> <span class=o>==</span> <span class=n>JS_PLACEHOLDER_BYTES</span><span class=p>:</span>
<a id=__codelineno-0-349 name=__codelineno-0-349></a> <span class=n>replacement</span> <span class=o>=</span> <span class=n>js_dependencies</span>
<a id=__codelineno-0-350 name=__codelineno-0-350></a> <span class=n>did_find_js_placeholder</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-0-351 name=__codelineno-0-351></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-352 name=__codelineno-0-352></a> <span class=k>raise</span> <span class=ne>RuntimeError</span><span class=p>(</span>
<a id=__codelineno-0-353 name=__codelineno-0-353></a> <span class=s2>&quot;Unexpected error: Regex for component dependencies processing&quot;</span>
<a id=__codelineno-0-354 name=__codelineno-0-354></a> <span class=sa>f</span><span class=s2>&quot; matched unknown string &#39;</span><span class=si>{</span><span class=n>match</span><span class=p>[</span><span class=mi>0</span><span class=p>]</span><span class=o>.</span><span class=n>decode</span><span class=p>()</span><span class=si>}</span><span class=s2>&#39;&quot;</span>
<a id=__codelineno-0-355 name=__codelineno-0-355></a> <span class=p>)</span>
<a id=__codelineno-0-356 name=__codelineno-0-356></a> <span class=k>return</span> <span class=n>replacement</span>
<a id=__codelineno-0-357 name=__codelineno-0-357></a>
<a id=__codelineno-0-358 name=__codelineno-0-358></a> <span class=n>content_</span> <span class=o>=</span> <span class=n>PLACEHOLDER_REGEX</span><span class=o>.</span><span class=n>sub</span><span class=p>(</span><span class=n>on_replace_match</span><span class=p>,</span> <span class=n>content_</span><span class=p>)</span>
<a id=__codelineno-0-359 name=__codelineno-0-359></a>
<a id=__codelineno-0-360 name=__codelineno-0-360></a> <span class=c1># By default, if user didn&#39;t specify any `{% component_dependencies %}`,</span>
<a id=__codelineno-0-361 name=__codelineno-0-361></a> <span class=c1># then try to insert the JS scripts at the end of &lt;body&gt; and CSS sheets at the end</span>
<a id=__codelineno-0-362 name=__codelineno-0-362></a> <span class=c1># of &lt;head&gt;</span>
<a id=__codelineno-0-363 name=__codelineno-0-363></a> <span class=k>if</span> <span class=nb>type</span> <span class=o>==</span> <span class=s2>&quot;document&quot;</span> <span class=ow>and</span> <span class=p>(</span><span class=ow>not</span> <span class=n>did_find_js_placeholder</span> <span class=ow>or</span> <span class=ow>not</span> <span class=n>did_find_css_placeholder</span><span class=p>):</span>
<a id=__codelineno-0-364 name=__codelineno-0-364></a> <span class=n>tree</span> <span class=o>=</span> <span class=n>parse_document_or_nodes</span><span class=p>(</span><span class=n>content_</span><span class=o>.</span><span class=n>decode</span><span class=p>())</span>
<a id=__codelineno-0-365 name=__codelineno-0-365></a>
<a id=__codelineno-0-366 name=__codelineno-0-366></a> <span class=k>if</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>tree</span><span class=p>,</span> <span class=n>LexborHTMLParser</span><span class=p>):</span>
<a id=__codelineno-0-367 name=__codelineno-0-367></a> <span class=n>did_modify_html</span> <span class=o>=</span> <span class=kc>False</span>
<a id=__codelineno-0-368 name=__codelineno-0-368></a>
<a id=__codelineno-0-369 name=__codelineno-0-369></a> <span class=k>if</span> <span class=ow>not</span> <span class=n>did_find_css_placeholder</span> <span class=ow>and</span> <span class=n>tree</span><span class=o>.</span><span class=n>head</span><span class=p>:</span>
<a id=__codelineno-0-370 name=__codelineno-0-370></a> <span class=n>css_elems</span> <span class=o>=</span> <span class=n>parse_multiroot_html</span><span class=p>(</span><span class=n>css_dependencies</span><span class=o>.</span><span class=n>decode</span><span class=p>())</span>
<a id=__codelineno-0-371 name=__codelineno-0-371></a> <span class=k>for</span> <span class=n>css_elem</span> <span class=ow>in</span> <span class=n>css_elems</span><span class=p>:</span>
<a id=__codelineno-0-372 name=__codelineno-0-372></a> <span class=n>tree</span><span class=o>.</span><span class=n>head</span><span class=o>.</span><span class=n>insert_child</span><span class=p>(</span><span class=n>css_elem</span><span class=p>)</span> <span class=c1># type: ignore # TODO: Update to selectolax 0.3.25</span>
<a id=__codelineno-0-373 name=__codelineno-0-373></a> <span class=n>did_modify_html</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-0-374 name=__codelineno-0-374></a>
<a id=__codelineno-0-375 name=__codelineno-0-375></a> <span class=k>if</span> <span class=ow>not</span> <span class=n>did_find_js_placeholder</span> <span class=ow>and</span> <span class=n>tree</span><span class=o>.</span><span class=n>body</span><span class=p>:</span>
<a id=__codelineno-0-376 name=__codelineno-0-376></a> <span class=n>js_elems</span> <span class=o>=</span> <span class=n>parse_multiroot_html</span><span class=p>(</span><span class=n>js_dependencies</span><span class=o>.</span><span class=n>decode</span><span class=p>())</span>
<a id=__codelineno-0-377 name=__codelineno-0-377></a> <span class=k>for</span> <span class=n>js_elem</span> <span class=ow>in</span> <span class=n>js_elems</span><span class=p>:</span>
<a id=__codelineno-0-378 name=__codelineno-0-378></a> <span class=n>tree</span><span class=o>.</span><span class=n>body</span><span class=o>.</span><span class=n>insert_child</span><span class=p>(</span><span class=n>js_elem</span><span class=p>)</span> <span class=c1># type: ignore # TODO: Update to selectolax 0.3.25</span>
<a id=__codelineno-0-379 name=__codelineno-0-379></a> <span class=n>did_modify_html</span> <span class=o>=</span> <span class=kc>True</span>
<a id=__codelineno-0-380 name=__codelineno-0-380></a>
<a id=__codelineno-0-381 name=__codelineno-0-381></a> <span class=n>transformed</span> <span class=o>=</span> <span class=n>cast</span><span class=p>(</span><span class=nb>str</span><span class=p>,</span> <span class=n>tree</span><span class=o>.</span><span class=n>html</span><span class=p>)</span>
<a id=__codelineno-0-382 name=__codelineno-0-382></a> <span class=k>if</span> <span class=n>did_modify_html</span><span class=p>:</span>
<a id=__codelineno-0-383 name=__codelineno-0-383></a> <span class=n>content_</span> <span class=o>=</span> <span class=n>transformed</span><span class=o>.</span><span class=n>encode</span><span class=p>()</span>
<a id=__codelineno-0-384 name=__codelineno-0-384></a>
<a id=__codelineno-0-385 name=__codelineno-0-385></a> <span class=c1># Return the same type as we were given</span>
<a id=__codelineno-0-386 name=__codelineno-0-386></a> <span class=n>output</span> <span class=o>=</span> <span class=n>content_</span><span class=o>.</span><span class=n>decode</span><span class=p>()</span> <span class=k>if</span> <span class=nb>isinstance</span><span class=p>(</span><span class=n>content</span><span class=p>,</span> <span class=nb>str</span><span class=p>)</span> <span class=k>else</span> <span class=n>content_</span>
<a id=__codelineno-0-387 name=__codelineno-0-387></a> <span class=n>output</span> <span class=o>=</span> <span class=n>mark_safe</span><span class=p>(</span><span class=n>output</span><span class=p>)</span> <span class=k>if</span> <span class=n>is_safestring</span> <span class=k>else</span> <span class=n>output</span>
<a id=__codelineno-0-388 name=__codelineno-0-388></a> <span class=k>return</span> <span class=n>cast</span><span class=p>(</span><span class=n>TContent</span><span class=p>,</span> <span class=n>output</span><span class=p>)</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> </div> </div> </div> </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=../context/ class="md-footer__link md-footer__link--prev" aria-label='Previous: <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context'> <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> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> context </div> </div> </a> <a href=../expression/ class="md-footer__link md-footer__link--next" aria-label='Next: <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression'> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> <code class="doc-symbol doc-symbol-nav doc-symbol-module"></code> expression </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/EmilStenstrom/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.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 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.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 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.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.6ce7567c.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.83f73b43.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>
Reference in a new issue View git blame Copy permalink