Deployed 1e4b556 to dev with MkDocs 1.6.1 and mike 2.1.3

This commit is contained in:
github-actions 2025-01-07 18:35:28 +00:00
parent d527e10af5
commit 952396ba51
41 changed files with 482 additions and 465 deletions

View file

@ -12,8 +12,8 @@
<a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> |-- templatetags/ <a id=__codelineno-0-12 name=__codelineno-0-12 href=#__codelineno-0-12></a> |-- templatetags/
<a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> |-- __init__.py <a id=__codelineno-0-13 name=__codelineno-0-13 href=#__codelineno-0-13></a> |-- __init__.py
<a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> |-- mytags.py <a id=__codelineno-0-14 name=__codelineno-0-14 href=#__codelineno-0-14></a> |-- mytags.py
</code></pre></div> </li> <li> <p>Create custom <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> and <a href=django_components.component_registry.ComponentRegistry><code>ComponentRegistry</code></a> instances in <code>mytags.py</code></p> <p>This will be the entrypoint for using the components inside Django templates.</p> <p>Remember that Django requires the <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> instance to be accessible under the <code>register</code> variable (<a href=https://docs.djangoproject.com/en/dev/howto/custom-template-tags>See Django docs</a>):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span> <span class=nn>django.template</span> <span class=kn>import</span> <span class=n>Library</span> </code></pre></div> </li> <li> <p>Create custom <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> and <a href=django_components.component_registry.ComponentRegistry><code>ComponentRegistry</code></a> instances in <code>mytags.py</code></p> <p>This will be the entrypoint for using the components inside Django templates.</p> <p>Remember that Django requires the <a href=https://docs.djangoproject.com/en/5.1/howto/custom-template-tags/#how-to-create-custom-template-tags-and-filters><code>Library</code></a> instance to be accessible under the <code>register</code> variable (<a href=https://docs.djangoproject.com/en/dev/howto/custom-template-tags>See Django docs</a>):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.template</span><span class=w> </span><span class=kn>import</span> <span class=n>Library</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>ComponentRegistry</span><span class=p>,</span> <span class=n>RegistrySettings</span> <a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></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>ComponentRegistry</span><span class=p>,</span> <span class=n>RegistrySettings</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=n>register</span> <span class=o>=</span> <span class=n>library</span> <span class=o>=</span> <span class=n>django</span><span class=o>.</span><span class=n>template</span><span class=o>.</span><span class=n>Library</span><span class=p>()</span> <a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=n>register</span> <span class=o>=</span> <span class=n>library</span> <span class=o>=</span> <span class=n>django</span><span class=o>.</span><span class=n>template</span><span class=o>.</span><span class=n>Library</span><span class=p>()</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=n>comp_registry</span> <span class=o>=</span> <span class=n>ComponentRegistry</span><span class=p>(</span> <a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=n>comp_registry</span> <span class=o>=</span> <span class=n>ComponentRegistry</span><span class=p>(</span>
@ -36,22 +36,22 @@
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a><span class=c>{# User-created components using the default settings #}</span> <a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a><span class=c>{# User-created components using the default settings #}</span>
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>title</span><span class=o>=</span><span class=s2>&quot;Abc...&quot;</span> <span class=cp>%}</span> <a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;my_comp&quot;</span> <span class=nv>title</span><span class=o>=</span><span class=s2>&quot;Abc...&quot;</span> <span class=cp>%}</span>
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span> <a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> </li> <li> <p>Write your components and register them with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a></p> <p>There's one difference when you are writing components that are to be shared, and that's that the components must be explicitly registered with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a> from the previous step.</p> <p>For better user experience, you can also define the types for the args, kwargs, slots and data.</p> <p>It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix <code>my_</code> / <code>My</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=kn>from</span> <span class=nn>typing</span> <span class=kn>import</span> <span class=n>Dict</span><span class=p>,</span> <span class=n>NotRequired</span><span class=p>,</span> <span class=n>Optional</span><span class=p>,</span> <span class=n>Tuple</span><span class=p>,</span> <span class=n>TypedDict</span> </code></pre></div> </li> <li> <p>Write your components and register them with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a></p> <p>There's one difference when you are writing components that are to be shared, and that's that the components must be explicitly registered with your instance of <a href=../../reference/api#ComponentRegistry><code>ComponentRegistry</code></a> from the previous step.</p> <p>For better user experience, you can also define the types for the args, kwargs, slots and data.</p> <p>It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix <code>my_</code> / <code>My</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=kn>from</span><span class=w> </span><span class=nn>typing</span><span class=w> </span><span class=kn>import</span> <span class=n>Dict</span><span class=p>,</span> <span class=n>NotRequired</span><span class=p>,</span> <span class=n>Optional</span><span class=p>,</span> <span class=n>Tuple</span><span class=p>,</span> <span class=n>TypedDict</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a> <a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotFunc</span><span class=p>,</span> <span class=n>register</span><span class=p>,</span> <span class=n>types</span> <a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>SlotFunc</span><span class=p>,</span> <span class=n>register</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a> <a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=kn>from</span> <span class=nn>myapp.templatetags.mytags</span> <span class=kn>import</span> <span class=n>comp_registry</span> <a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=kn>from</span><span class=w> </span><span class=nn>myapp.templatetags.mytags</span><span class=w> </span><span class=kn>import</span> <span class=n>comp_registry</span>
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a>
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a><span class=c1># Define the types</span> <a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a><span class=c1># Define the types</span>
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a><span class=k>class</span> <span class=nc>EmptyDict</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span> <a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a><span class=k>class</span><span class=w> </span><span class=nc>EmptyDict</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
<a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=k>pass</span> <a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=k>pass</span>
<a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a> <a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a>
<a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a><span class=nb>type</span> <span class=n>MyMenuArgs</span> <span class=o>=</span> <span class=n>Tuple</span><span class=p>[</span><span class=nb>int</span><span class=p>,</span> <span class=nb>str</span><span class=p>]</span> <a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a><span class=nb>type</span> <span class=n>MyMenuArgs</span> <span class=o>=</span> <span class=n>Tuple</span><span class=p>[</span><span class=nb>int</span><span class=p>,</span> <span class=nb>str</span><span class=p>]</span>
<a id=__codelineno-5-12 name=__codelineno-5-12 href=#__codelineno-5-12></a> <a id=__codelineno-5-12 name=__codelineno-5-12 href=#__codelineno-5-12></a>
<a id=__codelineno-5-13 name=__codelineno-5-13 href=#__codelineno-5-13></a><span class=k>class</span> <span class=nc>MyMenuSlots</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span> <a id=__codelineno-5-13 name=__codelineno-5-13 href=#__codelineno-5-13></a><span class=k>class</span><span class=w> </span><span class=nc>MyMenuSlots</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
<a id=__codelineno-5-14 name=__codelineno-5-14 href=#__codelineno-5-14></a> <span class=n>default</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=n>Optional</span><span class=p>[</span><span class=n>SlotFunc</span><span class=p>[</span><span class=n>EmptyDict</span><span class=p>]]]</span> <a id=__codelineno-5-14 name=__codelineno-5-14 href=#__codelineno-5-14></a> <span class=n>default</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=n>Optional</span><span class=p>[</span><span class=n>SlotFunc</span><span class=p>[</span><span class=n>EmptyDict</span><span class=p>]]]</span>
<a id=__codelineno-5-15 name=__codelineno-5-15 href=#__codelineno-5-15></a> <a id=__codelineno-5-15 name=__codelineno-5-15 href=#__codelineno-5-15></a>
<a id=__codelineno-5-16 name=__codelineno-5-16 href=#__codelineno-5-16></a><span class=k>class</span> <span class=nc>MyMenuProps</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span> <a id=__codelineno-5-16 name=__codelineno-5-16 href=#__codelineno-5-16></a><span class=k>class</span><span class=w> </span><span class=nc>MyMenuProps</span><span class=p>(</span><span class=n>TypedDict</span><span class=p>):</span>
<a id=__codelineno-5-17 name=__codelineno-5-17 href=#__codelineno-5-17></a> <span class=n>vertical</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>bool</span><span class=p>]</span> <a id=__codelineno-5-17 name=__codelineno-5-17 href=#__codelineno-5-17></a> <span class=n>vertical</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>bool</span><span class=p>]</span>
<a id=__codelineno-5-18 name=__codelineno-5-18 href=#__codelineno-5-18></a> <span class=n>klass</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <a id=__codelineno-5-18 name=__codelineno-5-18 href=#__codelineno-5-18></a> <span class=n>klass</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span>
<a id=__codelineno-5-19 name=__codelineno-5-19 href=#__codelineno-5-19></a> <span class=n>style</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span> <a id=__codelineno-5-19 name=__codelineno-5-19 href=#__codelineno-5-19></a> <span class=n>style</span><span class=p>:</span> <span class=n>NotRequired</span><span class=p>[</span><span class=nb>str</span><span class=p>]</span>
@ -59,8 +59,8 @@
<a id=__codelineno-5-21 name=__codelineno-5-21 href=#__codelineno-5-21></a><span class=c1># Define the component</span> <a id=__codelineno-5-21 name=__codelineno-5-21 href=#__codelineno-5-21></a><span class=c1># Define the component</span>
<a id=__codelineno-5-22 name=__codelineno-5-22 href=#__codelineno-5-22></a><span class=c1># NOTE: Don&#39;t forget to set the `registry`!</span> <a id=__codelineno-5-22 name=__codelineno-5-22 href=#__codelineno-5-22></a><span class=c1># NOTE: Don&#39;t forget to set the `registry`!</span>
<a id=__codelineno-5-23 name=__codelineno-5-23 href=#__codelineno-5-23></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_menu&quot;</span><span class=p>,</span> <span class=n>registry</span><span class=o>=</span><span class=n>comp_registry</span><span class=p>)</span> <a id=__codelineno-5-23 name=__codelineno-5-23 href=#__codelineno-5-23></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_menu&quot;</span><span class=p>,</span> <span class=n>registry</span><span class=o>=</span><span class=n>comp_registry</span><span class=p>)</span>
<a id=__codelineno-5-24 name=__codelineno-5-24 href=#__codelineno-5-24></a><span class=k>class</span> <span class=nc>MyMenu</span><span class=p>(</span><span class=n>Component</span><span class=p>[</span><span class=n>MyMenuArgs</span><span class=p>,</span> <span class=n>MyMenuProps</span><span class=p>,</span> <span class=n>MyMenuSlots</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>]):</span> <a id=__codelineno-5-24 name=__codelineno-5-24 href=#__codelineno-5-24></a><span class=k>class</span><span class=w> </span><span class=nc>MyMenu</span><span class=p>(</span><span class=n>Component</span><span class=p>[</span><span class=n>MyMenuArgs</span><span class=p>,</span> <span class=n>MyMenuProps</span><span class=p>,</span> <span class=n>MyMenuSlots</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>,</span> <span class=n>Any</span><span class=p>]):</span>
<a id=__codelineno-5-25 name=__codelineno-5-25 href=#__codelineno-5-25></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span> <a id=__codelineno-5-25 name=__codelineno-5-25 href=#__codelineno-5-25></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span>
<a id=__codelineno-5-26 name=__codelineno-5-26 href=#__codelineno-5-26></a> <span class=bp>self</span><span class=p>,</span> <a id=__codelineno-5-26 name=__codelineno-5-26 href=#__codelineno-5-26></a> <span class=bp>self</span><span class=p>,</span>
<a id=__codelineno-5-27 name=__codelineno-5-27 href=#__codelineno-5-27></a> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <a id=__codelineno-5-27 name=__codelineno-5-27 href=#__codelineno-5-27></a> <span class=o>*</span><span class=n>args</span><span class=p>,</span>
<a id=__codelineno-5-28 name=__codelineno-5-28 href=#__codelineno-5-28></a> <span class=n>attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span> <a id=__codelineno-5-28 name=__codelineno-5-28 href=#__codelineno-5-28></a> <span class=n>attrs</span><span class=p>:</span> <span class=n>Optional</span><span class=p>[</span><span class=n>Dict</span><span class=p>]</span> <span class=o>=</span> <span class=kc>None</span><span class=p>,</span>
@ -79,18 +79,18 @@
<a id=__codelineno-5-41 name=__codelineno-5-41 href=#__codelineno-5-41></a><span class=s2> &lt;/div&gt;</span> <a id=__codelineno-5-41 name=__codelineno-5-41 href=#__codelineno-5-41></a><span class=s2> &lt;/div&gt;</span>
<a id=__codelineno-5-42 name=__codelineno-5-42 href=#__codelineno-5-42></a><span class=s2> &lt;/div&gt;</span> <a id=__codelineno-5-42 name=__codelineno-5-42 href=#__codelineno-5-42></a><span class=s2> &lt;/div&gt;</span>
<a id=__codelineno-5-43 name=__codelineno-5-43 href=#__codelineno-5-43></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-5-43 name=__codelineno-5-43 href=#__codelineno-5-43></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> </li> <li> <p>Import the components in <code>apps.py</code></p> <p>Normally, users rely on <a href=../../concepts/autodiscovery>autodiscovery</a> and <a href=../../reference/settings#dirs><code>COMPONENTS.dirs</code></a> to load the component files.</p> <p>Since you, as the library author, are not in control of the file system, it is recommended to load the components manually.</p> <p>We recommend doing this in the <a href=https://docs.djangoproject.com/en/5.1/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code></a> hook of your <code>apps.py</code>:</p> <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=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span> </code></pre></div> </li> <li> <p>Import the components in <code>apps.py</code></p> <p>Normally, users rely on <a href=../../concepts/autodiscovery>autodiscovery</a> and <a href=../../reference/settings#dirs><code>COMPONENTS.dirs</code></a> to load the component files.</p> <p>Since you, as the library author, are not in control of the file system, it is recommended to load the components manually.</p> <p>We recommend doing this in the <a href=https://docs.djangoproject.com/en/5.1/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code></a> hook of your <code>apps.py</code>:</p> <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.apps</span><span class=w> </span><span class=kn>import</span> <span class=n>AppConfig</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <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=nc>MyAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span> <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>MyAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=n>default_auto_field</span> <span class=o>=</span> <span class=s2>&quot;django.db.models.BigAutoField&quot;</span> <a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=n>default_auto_field</span> <span class=o>=</span> <span class=s2>&quot;django.db.models.BigAutoField&quot;</span>
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>&quot;myapp&quot;</span> <a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=n>name</span> <span class=o>=</span> <span class=s2>&quot;myapp&quot;</span>
<a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a> <a id=__codelineno-6-6 name=__codelineno-6-6 href=#__codelineno-6-6></a>
<a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a> <span class=c1># This is the code that gets run when user adds myapp</span> <a id=__codelineno-6-7 name=__codelineno-6-7 href=#__codelineno-6-7></a> <span class=c1># This is the code that gets run when user adds myapp</span>
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=c1># to Django&#39;s INSTALLED_APPS</span> <a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=c1># to Django&#39;s INSTALLED_APPS</span>
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=k>def</span> <span class=nf>ready</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span> <a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=k>def</span><span class=w> </span><span class=nf>ready</span><span class=p>(</span><span class=bp>self</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a> <span class=c1># Import the components that you want to make available</span> <a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a> <span class=c1># Import the components that you want to make available</span>
<a id=__codelineno-6-11 name=__codelineno-6-11 href=#__codelineno-6-11></a> <span class=c1># inside the templates.</span> <a id=__codelineno-6-11 name=__codelineno-6-11 href=#__codelineno-6-11></a> <span class=c1># inside the templates.</span>
<a id=__codelineno-6-12 name=__codelineno-6-12 href=#__codelineno-6-12></a> <span class=kn>from</span> <span class=nn>myapp.templates</span> <span class=kn>import</span> <span class=p>(</span> <a id=__codelineno-6-12 name=__codelineno-6-12 href=#__codelineno-6-12></a> <span class=kn>from</span><span class=w> </span><span class=nn>myapp.templates</span><span class=w> </span><span class=kn>import</span> <span class=p>(</span>
<a id=__codelineno-6-13 name=__codelineno-6-13 href=#__codelineno-6-13></a> <span class=n>menu</span><span class=p>,</span> <a id=__codelineno-6-13 name=__codelineno-6-13 href=#__codelineno-6-13></a> <span class=n>menu</span><span class=p>,</span>
<a id=__codelineno-6-14 name=__codelineno-6-14 href=#__codelineno-6-14></a> <span class=n>table</span><span class=p>,</span> <a id=__codelineno-6-14 name=__codelineno-6-14 href=#__codelineno-6-14></a> <span class=n>table</span><span class=p>,</span>
<a id=__codelineno-6-15 name=__codelineno-6-15 href=#__codelineno-6-15></a> <span class=p>)</span> <a id=__codelineno-6-15 name=__codelineno-6-15 href=#__codelineno-6-15></a> <span class=p>)</span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -12,11 +12,11 @@
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=o>...</span><span class=p>},</span> <a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span><span class=o>...</span><span class=p>},</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=nb>type</span><span class=o>=</span><span class=s2>&quot;fragment&quot;</span><span class=p>,</span> <a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=nb>type</span><span class=o>=</span><span class=s2>&quot;fragment&quot;</span><span class=p>,</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=p>)</span> <a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=p>)</span>
</code></pre></div> <h2 id=live-examples>Live examples<a class=headerlink href=#live-examples title="Permanent link">¤</a></h2> <p>For live interactive examples, <a href=../../../overview/development/#developing-against-live-django-app>start our demo project</a> (<code>sampleproject</code>).</p> <p>Then navigate to these URLs:</p> <ul> <li><code>/fragment/base/alpine</code></li> <li><code>/fragment/base/htmx</code></li> <li><code>/fragment/base/js</code></li> </ul> <h2 id=example-htmx>Example - HTMX<a class=headerlink href=#example-htmx title="Permanent link">¤</a></h2> <h3 id=1-define-document-html>1. Define document HTML<a class=headerlink href=#1-define-document-html title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span> </code></pre></div> <h2 id=live-examples>Live examples<a class=headerlink href=#live-examples title="Permanent link">¤</a></h2> <p>For live interactive examples, <a href=../../../overview/development/#developing-against-live-django-app>start our demo project</a> (<code>sampleproject</code>).</p> <p>Then navigate to these URLs:</p> <ul> <li><code>/fragment/base/alpine</code></li> <li><code>/fragment/base/htmx</code></li> <li><code>/fragment/base/js</code></li> </ul> <h2 id=example-htmx>Example - HTMX<a class=headerlink href=#example-htmx title="Permanent link">¤</a></h2> <h3 id=1-define-document-html>1. Define document HTML<a class=headerlink href=#1-define-document-html title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=c1># HTML into which a fragment will be loaded using HTMX</span> <a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=c1># HTML into which a fragment will be loaded using HTMX</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=k>class</span> <span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=k>def</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-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span> <a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
<a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
@ -42,8 +42,8 @@
<a id=__codelineno-2-28 name=__codelineno-2-28 href=#__codelineno-2-28></a><span class=s2> &lt;/body&gt;</span> <a id=__codelineno-2-28 name=__codelineno-2-28 href=#__codelineno-2-28></a><span class=s2> &lt;/body&gt;</span>
<a id=__codelineno-2-29 name=__codelineno-2-29 href=#__codelineno-2-29></a><span class=s2> &lt;/html&gt;</span> <a id=__codelineno-2-29 name=__codelineno-2-29 href=#__codelineno-2-29></a><span class=s2> &lt;/html&gt;</span>
<a id=__codelineno-2-30 name=__codelineno-2-30 href=#__codelineno-2-30></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-2-30 name=__codelineno-2-30 href=#__codelineno-2-30></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> <h3 id=2-define-fragment-html>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><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=nc>Frag</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <h3 id=2-define-fragment-html>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><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>Frag</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>def</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-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span> <a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=c1># IMPORTANT: Don&#39;t forget `type=&quot;fragment&quot;`</span> <a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=c1># IMPORTANT: Don&#39;t forget `type=&quot;fragment&quot;`</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>&quot;fragment&quot;</span><span class=p>,</span> <a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>&quot;fragment&quot;</span><span class=p>,</span>
@ -65,19 +65,19 @@
<a id=__codelineno-3-21 name=__codelineno-3-21 href=#__codelineno-3-21></a><span class=s2> background: blue;</span> <a id=__codelineno-3-21 name=__codelineno-3-21 href=#__codelineno-3-21></a><span class=s2> background: blue;</span>
<a id=__codelineno-3-22 name=__codelineno-3-22 href=#__codelineno-3-22></a><span class=s2> }</span> <a id=__codelineno-3-22 name=__codelineno-3-22 href=#__codelineno-3-22></a><span class=s2> }</span>
<a id=__codelineno-3-23 name=__codelineno-3-23 href=#__codelineno-3-23></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-3-23 name=__codelineno-3-23 href=#__codelineno-3-23></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> <h3 id=3-create-view-and-urls>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span> </code></pre></div> <h3 id=3-create-view-and-urls>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>path</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a> <a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=kn>from</span> <span class=nn>components.demo</span> <span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span> <a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a><span class=kn>from</span><span class=w> </span><span class=nn>components.demo</span><span class=w> </span><span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span> <a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/&quot;</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span> <a id=__codelineno-4-6 name=__codelineno-4-6 href=#__codelineno-4-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/&quot;</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span>
<a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/frag&quot;</span><span class=p>,</span> <span class=n>Frag</span><span class=o>.</span><span class=n>as_view</span><span class=p>()),</span> <a id=__codelineno-4-7 name=__codelineno-4-7 href=#__codelineno-4-7></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/frag&quot;</span><span class=p>,</span> <span class=n>Frag</span><span class=o>.</span><span class=n>as_view</span><span class=p>()),</span>
<a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=p>]</span> <a id=__codelineno-4-8 name=__codelineno-4-8 href=#__codelineno-4-8></a><span class=p>]</span>
</code></pre></div> <h2 id=example-alpinejs>Example - AlpineJS<a class=headerlink href=#example-alpinejs title="Permanent link">¤</a></h2> <h3 id=1-define-document-html_1>1. Define document HTML<a class=headerlink href=#1-define-document-html_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span> </code></pre></div> <h2 id=example-alpinejs>Example - AlpineJS<a class=headerlink href=#example-alpinejs title="Permanent link">¤</a></h2> <h3 id=1-define-document-html_1>1. Define document HTML<a class=headerlink href=#1-define-document-html_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a> <a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=c1># HTML into which a fragment will be loaded using AlpineJS</span> <a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a><span class=c1># HTML into which a fragment will be loaded using AlpineJS</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=k>class</span> <span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=k>def</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-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span> <a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a> <a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a>
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
@ -109,8 +109,8 @@
<a id=__codelineno-5-34 name=__codelineno-5-34 href=#__codelineno-5-34></a><span class=s2> &lt;/body&gt;</span> <a id=__codelineno-5-34 name=__codelineno-5-34 href=#__codelineno-5-34></a><span class=s2> &lt;/body&gt;</span>
<a id=__codelineno-5-35 name=__codelineno-5-35 href=#__codelineno-5-35></a><span class=s2> &lt;/html&gt;</span> <a id=__codelineno-5-35 name=__codelineno-5-35 href=#__codelineno-5-35></a><span class=s2> &lt;/html&gt;</span>
<a id=__codelineno-5-36 name=__codelineno-5-36 href=#__codelineno-5-36></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-5-36 name=__codelineno-5-36 href=#__codelineno-5-36></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> <h3 id=2-define-fragment-html_1>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=k>class</span> <span class=nc>Frag</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <h3 id=2-define-fragment-html_1>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=k>class</span><span class=w> </span><span class=nc>Frag</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=k>def</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-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=c1># IMPORTANT: Don&#39;t forget `type=&quot;fragment&quot;`</span> <a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=c1># IMPORTANT: Don&#39;t forget `type=&quot;fragment&quot;`</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span> <a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
<a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>&quot;fragment&quot;</span><span class=p>,</span> <a id=__codelineno-6-5 name=__codelineno-6-5 href=#__codelineno-6-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>&quot;fragment&quot;</span><span class=p>,</span>
@ -145,19 +145,19 @@
<a id=__codelineno-6-34 name=__codelineno-6-34 href=#__codelineno-6-34></a><span class=s2> background: blue;</span> <a id=__codelineno-6-34 name=__codelineno-6-34 href=#__codelineno-6-34></a><span class=s2> background: blue;</span>
<a id=__codelineno-6-35 name=__codelineno-6-35 href=#__codelineno-6-35></a><span class=s2> }</span> <a id=__codelineno-6-35 name=__codelineno-6-35 href=#__codelineno-6-35></a><span class=s2> }</span>
<a id=__codelineno-6-36 name=__codelineno-6-36 href=#__codelineno-6-36></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-6-36 name=__codelineno-6-36 href=#__codelineno-6-36></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> <h3 id=3-create-view-and-urls_1>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span> </code></pre></div> <h3 id=3-create-view-and-urls_1>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls_1 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>path</span>
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a>
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=kn>from</span> <span class=nn>components.demo</span> <span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span> <a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=kn>from</span><span class=w> </span><span class=nn>components.demo</span><span class=w> </span><span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a> <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=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span> <a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/&quot;</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span> <a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/&quot;</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span>
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/frag&quot;</span><span class=p>,</span> <span class=n>Frag</span><span class=o>.</span><span class=n>as_view</span><span class=p>()),</span> <a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/frag&quot;</span><span class=p>,</span> <span class=n>Frag</span><span class=o>.</span><span class=n>as_view</span><span class=p>()),</span>
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a><span class=p>]</span> <a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a><span class=p>]</span>
</code></pre></div> <h2 id=example-vanilla-js>Example - Vanilla JS<a class=headerlink href=#example-vanilla-js title="Permanent link">¤</a></h2> <h3 id=1-define-document-html_2>1. Define document HTML<a class=headerlink href=#1-define-document-html_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><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=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span> </code></pre></div> <h2 id=example-vanilla-js>Example - Vanilla JS<a class=headerlink href=#example-vanilla-js title="Permanent link">¤</a></h2> <h3 id=1-define-document-html_2>1. Define document HTML<a class=headerlink href=#1-define-document-html_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><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</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>types</span>
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a> <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=c1># HTML into which a fragment will be loaded using JS</span> <a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=c1># HTML into which a fragment will be loaded using JS</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=k>class</span> <span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=k>class</span><span class=w> </span><span class=nc>MyPage</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=k>def</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-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span> <a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>()</span>
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a> <a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a>
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
@ -188,8 +188,8 @@
<a id=__codelineno-8-33 name=__codelineno-8-33 href=#__codelineno-8-33></a><span class=s2> &lt;/body&gt;</span> <a id=__codelineno-8-33 name=__codelineno-8-33 href=#__codelineno-8-33></a><span class=s2> &lt;/body&gt;</span>
<a id=__codelineno-8-34 name=__codelineno-8-34 href=#__codelineno-8-34></a><span class=s2> &lt;/html&gt;</span> <a id=__codelineno-8-34 name=__codelineno-8-34 href=#__codelineno-8-34></a><span class=s2> &lt;/html&gt;</span>
<a id=__codelineno-8-35 name=__codelineno-8-35 href=#__codelineno-8-35></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-8-35 name=__codelineno-8-35 href=#__codelineno-8-35></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> <h3 id=2-define-fragment-html_2>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><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=nc>Frag</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <h3 id=2-define-fragment-html_2>2. Define fragment HTML<a class=headerlink href=#2-define-fragment-html_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[root]/components/demo.py</span><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>Frag</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>def</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-2 name=__codelineno-9-2 href=#__codelineno-9-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>request</span><span class=p>):</span>
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span> <a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=k>return</span> <span class=bp>self</span><span class=o>.</span><span class=n>render_to_response</span><span class=p>(</span>
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=c1># IMPORTANT: Don&#39;t forget `type=&quot;fragment&quot;`</span> <a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=c1># IMPORTANT: Don&#39;t forget `type=&quot;fragment&quot;`</span>
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>&quot;fragment&quot;</span><span class=p>,</span> <a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> <span class=nb>type</span><span class=o>=</span><span class=s2>&quot;fragment&quot;</span><span class=p>,</span>
@ -211,9 +211,9 @@
<a id=__codelineno-9-21 name=__codelineno-9-21 href=#__codelineno-9-21></a><span class=s2> background: blue;</span> <a id=__codelineno-9-21 name=__codelineno-9-21 href=#__codelineno-9-21></a><span class=s2> background: blue;</span>
<a id=__codelineno-9-22 name=__codelineno-9-22 href=#__codelineno-9-22></a><span class=s2> }</span> <a id=__codelineno-9-22 name=__codelineno-9-22 href=#__codelineno-9-22></a><span class=s2> }</span>
<a id=__codelineno-9-23 name=__codelineno-9-23 href=#__codelineno-9-23></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-9-23 name=__codelineno-9-23 href=#__codelineno-9-23></a><span class=s2> &quot;&quot;&quot;</span>
</code></pre></div> <h3 id=3-create-view-and-urls_2>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span> </code></pre></div> <h3 id=3-create-view-and-urls_2>3. Create view and URLs<a class=headerlink href=#3-create-view-and-urls_2 title="Permanent link">¤</a></h3> <div class=highlight><span class=filename>[app]/urls.py</span><pre><span></span><code><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>path</span>
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a>
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a><span class=kn>from</span> <span class=nn>components.demo</span> <span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span> <a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a><span class=kn>from</span><span class=w> </span><span class=nn>components.demo</span><span class=w> </span><span class=kn>import</span> <span class=n>MyPage</span><span class=p>,</span> <span class=n>Frag</span>
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a>
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span> <a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-10-6 name=__codelineno-10-6 href=#__codelineno-10-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/&quot;</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span> <a id=__codelineno-10-6 name=__codelineno-10-6 href=#__codelineno-10-6></a> <span class=n>path</span><span class=p>(</span><span class=s2>&quot;mypage/&quot;</span><span class=p>,</span> <span class=n>MyPage</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span>

View file

@ -10,25 +10,25 @@
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> ...</span> <a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> ...</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=cp>{%</span> <span class=k>provide</span> <span class=cp>%}</span> <a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=cp>{%</span> <span class=k>provide</span> <span class=cp>%}</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=x>&lt;/table&gt;</span> <a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=x>&lt;/table&gt;</span>
</code></pre></div> <h2 id=using-inject-method>Using <code>inject()</code> method<a class=headerlink href=#using-inject-method title="Permanent link">¤</a></h2> <p>To "inject" (access) the data defined on the <code>provide</code> tag, you can use the <code>inject()</code> method inside of <code>get_context_data()</code>.</p> <p>For a component to be able to "inject" some data, the component (<code>{% component %}</code> tag) must be nested inside the <code>{% provide %}</code> tag.</p> <p>In the example from previous section, we've defined two kwargs: <code>key="hi" another=123</code>. That means that if we now inject <code>"my_data"</code>, we get an object with 2 attributes - <code>key</code> and <code>another</code>.</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=nc>ChildComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <h2 id=using-inject-method>Using <code>inject()</code> method<a class=headerlink href=#using-inject-method title="Permanent link">¤</a></h2> <p>To "inject" (access) the data defined on the <code>provide</code> tag, you can use the <code>inject()</code> method inside of <code>get_context_data()</code>.</p> <p>For a component to be able to "inject" some data, the component (<code>{% component %}</code> tag) must be nested inside the <code>{% provide %}</code> tag.</p> <p>In the example from previous section, we've defined two kwargs: <code>key="hi" another=123</code>. That means that if we now inject <code>"my_data"</code>, we get an object with 2 attributes - <code>key</code> and <code>another</code>.</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>ChildComponent</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>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span> <a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-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>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;my_data&quot;</span><span class=p>)</span> <a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;my_data&quot;</span><span class=p>)</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=nb>print</span><span class=p>(</span><span class=n>my_data</span><span class=o>.</span><span class=n>key</span><span class=p>)</span> <span class=c1># hi</span> <a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=nb>print</span><span class=p>(</span><span class=n>my_data</span><span class=o>.</span><span class=n>key</span><span class=p>)</span> <span class=c1># hi</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=nb>print</span><span class=p>(</span><span class=n>my_data</span><span class=o>.</span><span class=n>another</span><span class=p>)</span> <span class=c1># 123</span> <a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=nb>print</span><span class=p>(</span><span class=n>my_data</span><span class=o>.</span><span class=n>another</span><span class=p>)</span> <span class=c1># 123</span>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>return</span> <span class=p>{}</span> <a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>return</span> <span class=p>{}</span>
</code></pre></div> <p>First argument to <code>inject</code> is the <em>key</em> (or <em>name</em>) of the provided data. This must match the string that you used in the <code>provide</code> tag. If no provider with given key is found, <code>inject</code> raises a <code>KeyError</code>.</p> <p>To avoid the error, you can pass a second argument to <code>inject</code> to which will act as a default value, similar to <code>dict.get(key, default)</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=nc>ChildComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <p>First argument to <code>inject</code> is the <em>key</em> (or <em>name</em>) of the provided data. This must match the string that you used in the <code>provide</code> tag. If no provider with given key is found, <code>inject</code> raises a <code>KeyError</code>.</p> <p>To avoid the error, you can pass a second argument to <code>inject</code> to which will act as a default value, similar to <code>dict.get(key, default)</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>ChildComponent</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=nf>get_context_data</span><span class=p>(</span><span class=bp>self</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>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;invalid_key&quot;</span><span class=p>,</span> <span class=n>DEFAULT_DATA</span><span class=p>)</span> <a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;invalid_key&quot;</span><span class=p>,</span> <span class=n>DEFAULT_DATA</span><span class=p>)</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <span class=k>assert</span> <span class=n>my_data</span> <span class=o>==</span> <span class=n>DEFAUKT_DATA</span> <a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <span class=k>assert</span> <span class=n>my_data</span> <span class=o>==</span> <span class=n>DEFAUKT_DATA</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></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=k>return</span> <span class=p>{}</span>
</code></pre></div> <p>The instance returned from <code>inject()</code> is a subclass of <code>NamedTuple</code>, so the instance is immutable. This ensures that the data returned from <code>inject</code> will always have all the keys that were passed to the <code>provide</code> tag.</p> <blockquote> <p>NOTE: <code>inject()</code> works strictly only in <code>get_context_data</code>. If you try to call it from elsewhere, it will raise an error.</p> </blockquote> <h2 id=full-example>Full example<a class=headerlink href=#full-example title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;child&quot;</span><span class=p>)</span> </code></pre></div> <p>The instance returned from <code>inject()</code> is a subclass of <code>NamedTuple</code>, so the instance is immutable. This ensures that the data returned from <code>inject</code> will always have all the keys that were passed to the <code>provide</code> tag.</p> <blockquote> <p>NOTE: <code>inject()</code> works strictly only in <code>get_context_data</code>. If you try to call it from elsewhere, it will raise an error.</p> </blockquote> <h2 id=full-example>Full example<a class=headerlink href=#full-example title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;child&quot;</span><span class=p>)</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=k>class</span> <span class=nc>ChildComponent</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>class</span><span class=w> </span><span class=nc>ChildComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=s2> &lt;div&gt; {{ my_data.key }} &lt;/div&gt;</span> <a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=s2> &lt;div&gt; {{ my_data.key }} &lt;/div&gt;</span>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=s2> &lt;div&gt; {{ my_data.another }} &lt;/div&gt;</span> <a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=s2> &lt;div&gt; {{ my_data.another }} &lt;/div&gt;</span>
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a> <a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a>
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span> <a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></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>
<a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;my_data&quot;</span><span class=p>,</span> <span class=s2>&quot;default&quot;</span><span class=p>)</span> <a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;my_data&quot;</span><span class=p>,</span> <span class=s2>&quot;default&quot;</span><span class=p>)</span>
<a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;my_data&quot;</span><span class=p>:</span> <span class=n>my_data</span><span class=p>}</span> <a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;my_data&quot;</span><span class=p>:</span> <span class=n>my_data</span><span class=p>}</span>
<a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a> <a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a>

File diff suppressed because one or more lines are too long

View file

@ -30,13 +30,13 @@
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a> <span class=n>tokens</span><span class=o>=</span><span class=p>[</span><span class=s1>&#39;href=&quot;...&quot;&#39;</span><span class=p>,</span> <span class=s1>&#39;disabled&#39;</span><span class=p>]</span> <a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a> <span class=n>tokens</span><span class=o>=</span><span class=p>[</span><span class=s1>&#39;href=&quot;...&quot;&#39;</span><span class=p>,</span> <span class=s1>&#39;disabled&#39;</span><span class=p>]</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=p>)</span> <a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a><span class=p>)</span>
</code></pre></div> <ol> <li>The tag handler resumes, using the tokens returned from <code>TagFormatter</code>.</li> </ol> <p>So, continuing the example, at this point the tag handler practically behaves as if you rendered:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=nv>href</span><span class=o>=</span><span class=s2>&quot;...&quot;</span> <span class=nv>disabled</span> <span class=cp>%}</span> </code></pre></div> <ol> <li>The tag handler resumes, using the tokens returned from <code>TagFormatter</code>.</li> </ol> <p>So, continuing the example, at this point the tag handler practically behaves as if you rendered:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=nv>href</span><span class=o>=</span><span class=s2>&quot;...&quot;</span> <span class=nv>disabled</span> <span class=cp>%}</span>
</code></pre></div> <ol> <li>Tag handler looks up the component <code>button</code>, and passes the args, kwargs, and slots to it.</li> </ol> <h3 id=tagformatter>TagFormatter<a class=headerlink href=#tagformatter title="Permanent link">¤</a></h3> <p><code>TagFormatter</code> handles following parts of the process above:</p> <ul> <li> <p>Generates start/end tags, given a component. This is what you then call from within your template as <code>{% component %}</code>.</p> </li> <li> <p>When you <code>{% component %}</code>, tag formatter pre-processes the tag contents, so it can link back the custom template tag to the right component.</p> </li> </ul> <p>To do so, subclass from <code>TagFormatterABC</code> and implement following method:</p> <ul> <li><code>start_tag</code></li> <li><code>end_tag</code></li> <li><code>parse</code></li> </ul> <p>For example, this is the implementation of <a href=#available-tagformatters><code>ShorthandComponentFormatter</code></a></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=nc>ShorthandComponentFormatter</span><span class=p>(</span><span class=n>TagFormatterABC</span><span class=p>):</span> </code></pre></div> <ol> <li>Tag handler looks up the component <code>button</code>, and passes the args, kwargs, and slots to it.</li> </ol> <h3 id=tagformatter>TagFormatter<a class=headerlink href=#tagformatter title="Permanent link">¤</a></h3> <p><code>TagFormatter</code> handles following parts of the process above:</p> <ul> <li> <p>Generates start/end tags, given a component. This is what you then call from within your template as <code>{% component %}</code>.</p> </li> <li> <p>When you <code>{% component %}</code>, tag formatter pre-processes the tag contents, so it can link back the custom template tag to the right component.</p> </li> </ul> <p>To do so, subclass from <code>TagFormatterABC</code> and implement following method:</p> <ul> <li><code>start_tag</code></li> <li><code>end_tag</code></li> <li><code>parse</code></li> </ul> <p>For example, this is the implementation of <a href=#available-tagformatters><code>ShorthandComponentFormatter</code></a></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>ShorthandComponentFormatter</span><span class=p>(</span><span class=n>TagFormatterABC</span><span class=p>):</span>
<a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <span class=c1># Given a component name, generate the start template tag</span> <a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <span class=c1># Given a component name, generate the start template tag</span>
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=k>def</span> <span class=nf>start_tag</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>-&gt;</span> <span class=nb>str</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>start_tag</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>-&gt;</span> <span class=nb>str</span><span class=p>:</span>
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <span class=k>return</span> <span class=n>name</span> <span class=c1># e.g. &#39;button&#39;</span> <a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <span class=k>return</span> <span class=n>name</span> <span class=c1># e.g. &#39;button&#39;</span>
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a> <a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a>
<a id=__codelineno-10-6 name=__codelineno-10-6 href=#__codelineno-10-6></a> <span class=c1># Given a component name, generate the start template tag</span> <a id=__codelineno-10-6 name=__codelineno-10-6 href=#__codelineno-10-6></a> <span class=c1># Given a component name, generate the start template tag</span>
<a id=__codelineno-10-7 name=__codelineno-10-7 href=#__codelineno-10-7></a> <span class=k>def</span> <span class=nf>end_tag</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>-&gt;</span> <span class=nb>str</span><span class=p>:</span> <a id=__codelineno-10-7 name=__codelineno-10-7 href=#__codelineno-10-7></a> <span class=k>def</span><span class=w> </span><span class=nf>end_tag</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>-&gt;</span> <span class=nb>str</span><span class=p>:</span>
<a id=__codelineno-10-8 name=__codelineno-10-8 href=#__codelineno-10-8></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;end</span><span class=si>{</span><span class=n>name</span><span class=si>}</span><span class=s2>&quot;</span> <span class=c1># e.g. &#39;endbutton&#39;</span> <a id=__codelineno-10-8 name=__codelineno-10-8 href=#__codelineno-10-8></a> <span class=k>return</span> <span class=sa>f</span><span class=s2>&quot;end</span><span class=si>{</span><span class=n>name</span><span class=si>}</span><span class=s2>&quot;</span> <span class=c1># e.g. &#39;endbutton&#39;</span>
<a id=__codelineno-10-9 name=__codelineno-10-9 href=#__codelineno-10-9></a> <a id=__codelineno-10-9 name=__codelineno-10-9 href=#__codelineno-10-9></a>
<a id=__codelineno-10-10 name=__codelineno-10-10 href=#__codelineno-10-10></a> <span class=c1># Given a tag, e.g.</span> <a id=__codelineno-10-10 name=__codelineno-10-10 href=#__codelineno-10-10></a> <span class=c1># Given a tag, e.g.</span>
@ -44,7 +44,7 @@
<a id=__codelineno-10-12 name=__codelineno-10-12 href=#__codelineno-10-12></a> <span class=c1>#</span> <a id=__codelineno-10-12 name=__codelineno-10-12 href=#__codelineno-10-12></a> <span class=c1>#</span>
<a id=__codelineno-10-13 name=__codelineno-10-13 href=#__codelineno-10-13></a> <span class=c1># The parser receives:</span> <a id=__codelineno-10-13 name=__codelineno-10-13 href=#__codelineno-10-13></a> <span class=c1># The parser receives:</span>
<a id=__codelineno-10-14 name=__codelineno-10-14 href=#__codelineno-10-14></a> <span class=c1># `[&#39;button&#39;, &#39;href=&quot;...&quot;&#39;, &#39;disabled&#39;]`</span> <a id=__codelineno-10-14 name=__codelineno-10-14 href=#__codelineno-10-14></a> <span class=c1># `[&#39;button&#39;, &#39;href=&quot;...&quot;&#39;, &#39;disabled&#39;]`</span>
<a id=__codelineno-10-15 name=__codelineno-10-15 href=#__codelineno-10-15></a> <span class=k>def</span> <span class=nf>parse</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>tokens</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=nb>str</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n>TagResult</span><span class=p>:</span> <a id=__codelineno-10-15 name=__codelineno-10-15 href=#__codelineno-10-15></a> <span class=k>def</span><span class=w> </span><span class=nf>parse</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>tokens</span><span class=p>:</span> <span class=n>List</span><span class=p>[</span><span class=nb>str</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n>TagResult</span><span class=p>:</span>
<a id=__codelineno-10-16 name=__codelineno-10-16 href=#__codelineno-10-16></a> <span class=n>tokens</span> <span class=o>=</span> <span class=p>[</span><span class=o>*</span><span class=n>tokens</span><span class=p>]</span> <a id=__codelineno-10-16 name=__codelineno-10-16 href=#__codelineno-10-16></a> <span class=n>tokens</span> <span class=o>=</span> <span class=p>[</span><span class=o>*</span><span class=n>tokens</span><span class=p>]</span>
<a id=__codelineno-10-17 name=__codelineno-10-17 href=#__codelineno-10-17></a> <span class=n>name</span> <span class=o>=</span> <span class=n>tokens</span><span class=o>.</span><span class=n>pop</span><span class=p>(</span><span class=mi>0</span><span class=p>)</span> <a id=__codelineno-10-17 name=__codelineno-10-17 href=#__codelineno-10-17></a> <span class=n>name</span> <span class=o>=</span> <span class=n>tokens</span><span class=o>.</span><span class=n>pop</span><span class=p>(</span><span class=mi>0</span><span class=p>)</span>
<a id=__codelineno-10-18 name=__codelineno-10-18 href=#__codelineno-10-18></a> <span class=k>return</span> <span class=n>TagResult</span><span class=p>(</span> <a id=__codelineno-10-18 name=__codelineno-10-18 href=#__codelineno-10-18></a> <span class=k>return</span> <span class=n>TagResult</span><span class=p>(</span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -2,16 +2,16 @@
</code></pre></div> <p>NOTE: <code>{% csrf_token %}</code> tags need access to the top-level context, and they will not function properly if they are rendered in a component that is called with the <code>only</code> modifier.</p> <p>If you find yourself using the <code>only</code> modifier often, you can set the <a href=#context-behavior>context_behavior</a> option to <code>"isolated"</code>, which automatically applies the <code>only</code> modifier. This is useful if you want to make sure that components don't accidentally access the outer context.</p> <p>Components can also access the outer context in their context methods like <code>get_context_data</code> by accessing the property <code>self.outer_context</code>.</p> <h2 id=example-of-accessing-outer-context>Example of Accessing Outer Context<a class=headerlink href=#example-of-accessing-outer-context title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=x>&lt;div&gt;</span> </code></pre></div> <p>NOTE: <code>{% csrf_token %}</code> tags need access to the top-level context, and they will not function properly if they are rendered in a component that is called with the <code>only</code> modifier.</p> <p>If you find yourself using the <code>only</code> modifier often, you can set the <a href=#context-behavior>context_behavior</a> option to <code>"isolated"</code>, which automatically applies the <code>only</code> modifier. This is useful if you want to make sure that components don't accidentally access the outer context.</p> <p>Components can also access the outer context in their context methods like <code>get_context_data</code> by accessing the property <code>self.outer_context</code>.</p> <h2 id=example-of-accessing-outer-context>Example of Accessing Outer Context<a class=headerlink href=#example-of-accessing-outer-context title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=x>&lt;div&gt;</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calender&quot;</span> <span class=o>/</span> <span class=cp>%}</span> <a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calender&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x>&lt;/div&gt;</span> <a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x>&lt;/div&gt;</span>
</code></pre></div> <p>Assuming that the rendering context has variables such as <code>date</code>, you can use <code>self.outer_context</code> to access them from within <code>get_context_data</code>. Here's how you might implement it:</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=nc>Calender</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <p>Assuming that the rendering context has variables such as <code>date</code>, you can use <code>self.outer_context</code> to access them from within <code>get_context_data</code>. Here's how you might implement it:</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>Calender</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> <a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=o>...</span> <a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a> <span class=o>...</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a>
<a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span> <a id=__codelineno-2-5 name=__codelineno-2-5 href=#__codelineno-2-5></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>
<a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=n>outer_field</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>outer_context</span><span class=p>[</span><span class=s2>&quot;date&quot;</span><span class=p>]</span> <a id=__codelineno-2-6 name=__codelineno-2-6 href=#__codelineno-2-6></a> <span class=n>outer_field</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>outer_context</span><span class=p>[</span><span class=s2>&quot;date&quot;</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=p>{</span> <a id=__codelineno-2-7 name=__codelineno-2-7 href=#__codelineno-2-7></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>outer_fields</span><span class=p>,</span> <a id=__codelineno-2-8 name=__codelineno-2-8 href=#__codelineno-2-8></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>outer_fields</span><span class=p>,</span>
<a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=p>}</span> <a id=__codelineno-2-9 name=__codelineno-2-9 href=#__codelineno-2-9></a> <span class=p>}</span>
</code></pre></div> <p>However, as a best practice, its recommended not to rely on accessing the outer context directly through <code>self.outer_context</code>. Instead, explicitly pass the variables to the component. For instance, continue passing the variables in the component tag as shown in the previous examples.</p> <h2 id=context-behavior>Context behavior<a class=headerlink href=#context-behavior title="Permanent link">¤</a></h2> <p>django_components supports both Django and Vue-like behavior when it comes to passing data to and through components. This can be configured in <a href=../../../reference/settings#context_behavior>context_behavior</a>.</p> <p>This has two modes:</p> <ul> <li> <p><code>"django"</code></p> <p>The default Django template behavior.</p> <p>Inside the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, the context variables you can access are a union of:</p> <ul> <li>All the variables that were OUTSIDE the fill tag, including any\ <a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#with><code>{% with %}</code></a> tags.</li> <li>Any loops (<a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#cycle><code>{% for ... %}</code></a>) that the <code>{% fill %}</code> tag is part of.</li> <li>Data returned from <a href=../../../reference/api#django_components.Component.get_context_data><code>Component.get_context_data()</code></a> of the component that owns the fill tag.</li> </ul> </li> <li> <p><code>"isolated"</code></p> <p>Similar behavior to <a href=https://vuejs.org/guide/components/slots.html#render-scope>Vue</a> or React, this is useful if you want to make sure that components don't accidentally access variables defined outside of the component.</p> <p>Inside the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, you can ONLY access variables from 2 places:</p> <ul> <li>Any loops (<a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#cycle><code>{% for ... %}</code></a>) that the <code>{% fill %}</code> tag is part of.</li> <li><a href=../../../reference/api#django_components.Component.get_context_data><code>Component.get_context_data()</code></a> of the component which defined the template (AKA the "root" component).</li> </ul> </li> </ul> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Notice that the component whose <code>get_context_data()</code> we use inside <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> is NOT the same across the two modes!</p> <p>Consider this example:</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=nc>Outer</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <p>However, as a best practice, its recommended not to rely on accessing the outer context directly through <code>self.outer_context</code>. Instead, explicitly pass the variables to the component. For instance, continue passing the variables in the component tag as shown in the previous examples.</p> <h2 id=context-behavior>Context behavior<a class=headerlink href=#context-behavior title="Permanent link">¤</a></h2> <p>django_components supports both Django and Vue-like behavior when it comes to passing data to and through components. This can be configured in <a href=../../../reference/settings#context_behavior>context_behavior</a>.</p> <p>This has two modes:</p> <ul> <li> <p><code>"django"</code></p> <p>The default Django template behavior.</p> <p>Inside the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, the context variables you can access are a union of:</p> <ul> <li>All the variables that were OUTSIDE the fill tag, including any\ <a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#with><code>{% with %}</code></a> tags.</li> <li>Any loops (<a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#cycle><code>{% for ... %}</code></a>) that the <code>{% fill %}</code> tag is part of.</li> <li>Data returned from <a href=../../../reference/api#django_components.Component.get_context_data><code>Component.get_context_data()</code></a> of the component that owns the fill tag.</li> </ul> </li> <li> <p><code>"isolated"</code></p> <p>Similar behavior to <a href=https://vuejs.org/guide/components/slots.html#render-scope>Vue</a> or React, this is useful if you want to make sure that components don't accidentally access variables defined outside of the component.</p> <p>Inside the <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> tag, you can ONLY access variables from 2 places:</p> <ul> <li>Any loops (<a href=https://docs.djangoproject.com/en/5.1/ref/templates/builtins/#cycle><code>{% for ... %}</code></a>) that the <code>{% fill %}</code> tag is part of.</li> <li><a href=../../../reference/api#django_components.Component.get_context_data><code>Component.get_context_data()</code></a> of the component which defined the template (AKA the "root" component).</li> </ul> </li> </ul> <div class="admonition warning"> <p class=admonition-title>Warning</p> <p>Notice that the component whose <code>get_context_data()</code> we use inside <a href=../../../reference/template_tags#fill><code>{% fill %}</code></a> is NOT the same across the two modes!</p> <p>Consider this example:</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>Outer</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=n>template</span> <span class=o>=</span> \<span class=s2>&quot;</span><span class=se>\&quot;\&quot;</span> <a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=n>template</span> <span class=o>=</span> \<span class=s2>&quot;</span><span class=se>\&quot;\&quot;</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=o>&lt;</span><span class=n>div</span><span class=o>&gt;</span> <a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=o>&lt;</span><span class=n>div</span><span class=o>&gt;</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=p>{</span><span class=o>%</span> <span class=n>component</span> <span class=s2>&quot;inner&quot;</span> <span class=o>%</span><span class=p>}</span> <a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=p>{</span><span class=o>%</span> <span class=n>component</span> <span class=s2>&quot;inner&quot;</span> <span class=o>%</span><span class=p>}</span>
@ -22,7 +22,7 @@
<a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=o>&lt;/</span><span class=n>div</span><span class=o>&gt;</span> <a id=__codelineno-3-9 name=__codelineno-3-9 href=#__codelineno-3-9></a> <span class=o>&lt;/</span><span class=n>div</span><span class=o>&gt;</span>
<a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> \<span class=s2>&quot;</span><span class=se>\&quot;\&quot;</span> <a id=__codelineno-3-10 name=__codelineno-3-10 href=#__codelineno-3-10></a> \<span class=s2>&quot;</span><span class=se>\&quot;\&quot;</span>
</code></pre></div> <ul> <li> <p><code>"django"</code> - <code>my_var</code> has access to data from <code>get_context_data()</code> of both <code>Inner</code> and <code>Outer</code>. If there are variables defined in both, then <code>Inner</code> overshadows <code>Outer</code>.</p> </li> <li> <p><code>"isolated"</code> - <code>my_var</code> has access to data from <code>get_context_data()</code> of ONLY <code>Outer</code>.</p> </li> </ul> </div> <h3 id=example-django>Example "django"<a class=headerlink href=#example-django title="Permanent link">¤</a></h3> <p>Given this template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;root_comp&quot;</span><span class=p>)</span> </code></pre></div> <ul> <li> <p><code>"django"</code> - <code>my_var</code> has access to data from <code>get_context_data()</code> of both <code>Inner</code> and <code>Outer</code>. If there are variables defined in both, then <code>Inner</code> overshadows <code>Outer</code>.</p> </li> <li> <p><code>"isolated"</code> - <code>my_var</code> has access to data from <code>get_context_data()</code> of ONLY <code>Outer</code>.</p> </li> </ul> </div> <h3 id=example-django>Example "django"<a class=headerlink href=#example-django title="Permanent link">¤</a></h3> <p>Given this template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;root_comp&quot;</span><span class=p>)</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a><span class=k>class</span> <span class=nc>RootComp</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>class</span><span class=w> </span><span class=nc>RootComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=s2> {% with cheese=&quot;feta&quot; %}</span> <a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a><span class=s2> {% with cheese=&quot;feta&quot; %}</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &#39;my_comp&#39; %}</span> <a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &#39;my_comp&#39; %}</span>
@ -32,12 +32,12 @@
<a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndwith %}</span> <a id=__codelineno-4-9 name=__codelineno-4-9 href=#__codelineno-4-9></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndwith %}</span>
<a id=__codelineno-4-10 name=__codelineno-4-10 href=#__codelineno-4-10></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-4-10 name=__codelineno-4-10 href=#__codelineno-4-10></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-4-11 name=__codelineno-4-11 href=#__codelineno-4-11></a> <a id=__codelineno-4-11 name=__codelineno-4-11 href=#__codelineno-4-11></a>
<a id=__codelineno-4-12 name=__codelineno-4-12 href=#__codelineno-4-12></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span> <a id=__codelineno-4-12 name=__codelineno-4-12 href=#__codelineno-4-12></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>
<a id=__codelineno-4-13 name=__codelineno-4-13 href=#__codelineno-4-13></a> <span class=k>return</span> <span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>123</span> <span class=p>}</span> <a id=__codelineno-4-13 name=__codelineno-4-13 href=#__codelineno-4-13></a> <span class=k>return</span> <span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>123</span> <span class=p>}</span>
</code></pre></div> <p>Then if <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> of the component <code>"my_comp"</code> returns following data:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>456</span> <span class=p>}</span> </code></pre></div> <p>Then if <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> of the component <code>"my_comp"</code> returns following data:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>456</span> <span class=p>}</span>
</code></pre></div> <p>Then the template will be rendered as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=x>456 # my_var</span> </code></pre></div> <p>Then the template will be rendered as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=x>456 # my_var</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a><span class=x>feta # cheese</span> <a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a><span class=x>feta # cheese</span>
</code></pre></div> <p>Because <code>"my_comp"</code> overshadows the outer variable <code>"my_var"</code>, so <code>{{ my_var }}</code> equals <code>456</code>.</p> <p>And variable <code>"cheese"</code> equals <code>feta</code>, because the fill CAN access all the data defined in the outer layers, like the <code>{% with %}</code> tag.</p> <h3 id=example-isolated>Example "isolated"<a class=headerlink href=#example-isolated title="Permanent link">¤</a></h3> <p>Given this template:</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=nc>RootComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <p>Because <code>"my_comp"</code> overshadows the outer variable <code>"my_var"</code>, so <code>{{ my_var }}</code> equals <code>456</code>.</p> <p>And variable <code>"cheese"</code> equals <code>feta</code>, because the fill CAN access all the data defined in the outer layers, like the <code>{% with %}</code> tag.</p> <h3 id=example-isolated>Example "isolated"<a class=headerlink href=#example-isolated title="Permanent link">¤</a></h3> <p>Given this template:</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>RootComp</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=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=s2> {% with cheese=&quot;feta&quot; %}</span> <a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=s2> {% with cheese=&quot;feta&quot; %}</span>
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &#39;my_comp&#39; %}</span> <a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &#39;my_comp&#39; %}</span>
@ -47,7 +47,7 @@
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndwith %}</span> <a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndwith %}</span>
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a> <a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a>
<a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span> <a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></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>
<a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a> <span class=k>return</span> <span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>123</span> <span class=p>}</span> <a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a> <span class=k>return</span> <span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>123</span> <span class=p>}</span>
</code></pre></div> <p>Then if <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> of the component <code>"my_comp"</code> returns following data:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>456</span> <span class=p>}</span> </code></pre></div> <p>Then if <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> of the component <code>"my_comp"</code> returns following data:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=p>{</span> <span class=s2>&quot;my_var&quot;</span><span class=p>:</span> <span class=mi>456</span> <span class=p>}</span>
</code></pre></div> <p>Then the template will be rendered as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=x>123 # my_var</span> </code></pre></div> <p>Then the template will be rendered as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=x>123 # my_var</span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -49,7 +49,7 @@
<a id=__codelineno-16-10 name=__codelineno-16-10 href=#__codelineno-16-10></a> <span class=s2>&quot;role&quot;</span><span class=p>:</span> <span class=s2>&quot;button&quot;</span><span class=p>,</span> <a id=__codelineno-16-10 name=__codelineno-16-10 href=#__codelineno-16-10></a> <span class=s2>&quot;role&quot;</span><span class=p>:</span> <span class=s2>&quot;button&quot;</span><span class=p>,</span>
<a id=__codelineno-16-11 name=__codelineno-16-11 href=#__codelineno-16-11></a><span class=p>}</span> <a id=__codelineno-16-11 name=__codelineno-16-11 href=#__codelineno-16-11></a><span class=p>}</span>
</code></pre></div> <p>Then:</p> <ul> <li>Empty tag <br> <code>{% html_attr %}</code></li> </ul> <p>renders (empty string): <br> <code></code></p> <ul> <li>Only kwargs <br> <code>{% html_attr class="some-class" class=class_from_var data-id="123" %}</code></li> </ul> <p>renders: <br> <code>class="some-class from-var" data-id="123"</code></p> <ul> <li>Only attrs <br> <code>{% html_attr attrs %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Attrs as kwarg <br> <code>{% html_attr attrs=attrs %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Only defaults (as kwarg) <br> <code>{% html_attr defaults=defaults %}</code></li> </ul> <p>renders: <br> <code>class="from-defaults" role="button"</code></p> <ul> <li>Attrs using the <code>prefix:key=value</code> construct <br> <code>{% html_attr attrs:class="from-attrs" attrs:type="submit" %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Defaults using the <code>prefix:key=value</code> construct <br> <code>{% html_attr defaults:class="from-defaults" %}</code></li> </ul> <p>renders: <br> <code>class="from-defaults" role="button"</code></p> <ul> <li>All together (1) - attrs and defaults as positional args: <br> <code>{% html_attrs attrs defaults class="added_class" class=class_from_var data-id=123 %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" role="button" data-id=123</code></p> <ul> <li>All together (2) - attrs and defaults as kwargs args: <br> <code>{% html_attrs class="added_class" class=class_from_var data-id=123 attrs=attrs defaults=defaults %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" role="button" data-id=123</code></p> <ul> <li>All together (3) - mixed: <br> <code>{% html_attrs attrs defaults:class="default-class" class="added_class" class=class_from_var data-id=123 %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" data-id=123</code></p> <h2 id=full-example-for-html_attrs>Full example for <code>html_attrs</code><a class=headerlink href=#full-example-for-html_attrs title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span> </code></pre></div> <p>Then:</p> <ul> <li>Empty tag <br> <code>{% html_attr %}</code></li> </ul> <p>renders (empty string): <br> <code></code></p> <ul> <li>Only kwargs <br> <code>{% html_attr class="some-class" class=class_from_var data-id="123" %}</code></li> </ul> <p>renders: <br> <code>class="some-class from-var" data-id="123"</code></p> <ul> <li>Only attrs <br> <code>{% html_attr attrs %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Attrs as kwarg <br> <code>{% html_attr attrs=attrs %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Only defaults (as kwarg) <br> <code>{% html_attr defaults=defaults %}</code></li> </ul> <p>renders: <br> <code>class="from-defaults" role="button"</code></p> <ul> <li>Attrs using the <code>prefix:key=value</code> construct <br> <code>{% html_attr attrs:class="from-attrs" attrs:type="submit" %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs" type="submit"</code></p> <ul> <li>Defaults using the <code>prefix:key=value</code> construct <br> <code>{% html_attr defaults:class="from-defaults" %}</code></li> </ul> <p>renders: <br> <code>class="from-defaults" role="button"</code></p> <ul> <li>All together (1) - attrs and defaults as positional args: <br> <code>{% html_attrs attrs defaults class="added_class" class=class_from_var data-id=123 %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" role="button" data-id=123</code></p> <ul> <li>All together (2) - attrs and defaults as kwargs args: <br> <code>{% html_attrs class="added_class" class=class_from_var data-id=123 attrs=attrs defaults=defaults %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" role="button" data-id=123</code></p> <ul> <li>All together (3) - mixed: <br> <code>{% html_attrs attrs defaults:class="default-class" class="added_class" class=class_from_var data-id=123 %}</code></li> </ul> <p>renders: <br> <code>class="from-attrs added_class from-var" type="submit" data-id=123</code></p> <h2 id=full-example-for-html_attrs>Full example for <code>html_attrs</code><a class=headerlink href=#full-example-for-html_attrs title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</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=nc>MyComp</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>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a> <span class=n>template</span><span class=p>:</span> <span class=n>t</span><span class=o>.</span><span class=n>django_html</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a> <span class=n>template</span><span class=p>:</span> <span class=n>t</span><span class=o>.</span><span class=n>django_html</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=s2> &lt;div</span> <a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=s2> &lt;div</span>
<a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a><span class=s2> {% html_attrs attrs</span> <a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a><span class=s2> {% html_attrs attrs</span>
@ -63,7 +63,7 @@
<a id=__codelineno-17-13 name=__codelineno-17-13 href=#__codelineno-17-13></a><span class=s2> &lt;/div&gt;</span> <a id=__codelineno-17-13 name=__codelineno-17-13 href=#__codelineno-17-13></a><span class=s2> &lt;/div&gt;</span>
<a id=__codelineno-17-14 name=__codelineno-17-14 href=#__codelineno-17-14></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-17-14 name=__codelineno-17-14 href=#__codelineno-17-14></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-17-15 name=__codelineno-17-15 href=#__codelineno-17-15></a> <a id=__codelineno-17-15 name=__codelineno-17-15 href=#__codelineno-17-15></a>
<a id=__codelineno-17-16 name=__codelineno-17-16 href=#__codelineno-17-16></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>Date</span><span class=p>,</span> <span class=n>attrs</span><span class=p>:</span> <span class=nb>dict</span><span class=p>):</span> <a id=__codelineno-17-16 name=__codelineno-17-16 href=#__codelineno-17-16></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>date</span><span class=p>:</span> <span class=n>Date</span><span class=p>,</span> <span class=n>attrs</span><span class=p>:</span> <span class=nb>dict</span><span class=p>):</span>
<a id=__codelineno-17-17 name=__codelineno-17-17 href=#__codelineno-17-17></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-17-17 name=__codelineno-17-17 href=#__codelineno-17-17></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-17-18 name=__codelineno-17-18 href=#__codelineno-17-18></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>date</span><span class=p>,</span> <a id=__codelineno-17-18 name=__codelineno-17-18 href=#__codelineno-17-18></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>date</span><span class=p>,</span>
<a id=__codelineno-17-19 name=__codelineno-17-19 href=#__codelineno-17-19></a> <span class=s2>&quot;attrs&quot;</span><span class=p>:</span> <span class=n>attrs</span><span class=p>,</span> <a id=__codelineno-17-19 name=__codelineno-17-19 href=#__codelineno-17-19></a> <span class=s2>&quot;attrs&quot;</span><span class=p>:</span> <span class=n>attrs</span><span class=p>,</span>
@ -71,7 +71,7 @@
<a id=__codelineno-17-21 name=__codelineno-17-21 href=#__codelineno-17-21></a> <span class=p>}</span> <a id=__codelineno-17-21 name=__codelineno-17-21 href=#__codelineno-17-21></a> <span class=p>}</span>
<a id=__codelineno-17-22 name=__codelineno-17-22 href=#__codelineno-17-22></a> <a id=__codelineno-17-22 name=__codelineno-17-22 href=#__codelineno-17-22></a>
<a id=__codelineno-17-23 name=__codelineno-17-23 href=#__codelineno-17-23></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;parent&quot;</span><span class=p>)</span> <a id=__codelineno-17-23 name=__codelineno-17-23 href=#__codelineno-17-23></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;parent&quot;</span><span class=p>)</span>
<a id=__codelineno-17-24 name=__codelineno-17-24 href=#__codelineno-17-24></a><span class=k>class</span> <span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-17-24 name=__codelineno-17-24 href=#__codelineno-17-24></a><span class=k>class</span><span class=w> </span><span class=nc>Parent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-17-25 name=__codelineno-17-25 href=#__codelineno-17-25></a> <span class=n>template</span><span class=p>:</span> <span class=n>t</span><span class=o>.</span><span class=n>django_html</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-17-25 name=__codelineno-17-25 href=#__codelineno-17-25></a> <span class=n>template</span><span class=p>:</span> <span class=n>t</span><span class=o>.</span><span class=n>django_html</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-17-26 name=__codelineno-17-26 href=#__codelineno-17-26></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &quot;my_comp&quot;</span> <a id=__codelineno-17-26 name=__codelineno-17-26 href=#__codelineno-17-26></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &quot;my_comp&quot;</span>
<a id=__codelineno-17-27 name=__codelineno-17-27 href=#__codelineno-17-27></a><span class=s2> date=date</span> <a id=__codelineno-17-27 name=__codelineno-17-27 href=#__codelineno-17-27></a><span class=s2> date=date</span>
@ -81,7 +81,7 @@
<a id=__codelineno-17-31 name=__codelineno-17-31 href=#__codelineno-17-31></a><span class=s2> / %}</span> <a id=__codelineno-17-31 name=__codelineno-17-31 href=#__codelineno-17-31></a><span class=s2> / %}</span>
<a id=__codelineno-17-32 name=__codelineno-17-32 href=#__codelineno-17-32></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-17-32 name=__codelineno-17-32 href=#__codelineno-17-32></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-17-33 name=__codelineno-17-33 href=#__codelineno-17-33></a> <a id=__codelineno-17-33 name=__codelineno-17-33 href=#__codelineno-17-33></a>
<a id=__codelineno-17-34 name=__codelineno-17-34 href=#__codelineno-17-34></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>Date</span><span class=p>):</span> <a id=__codelineno-17-34 name=__codelineno-17-34 href=#__codelineno-17-34></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>date</span><span class=p>:</span> <span class=n>Date</span><span class=p>):</span>
<a id=__codelineno-17-35 name=__codelineno-17-35 href=#__codelineno-17-35></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-17-35 name=__codelineno-17-35 href=#__codelineno-17-35></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-17-36 name=__codelineno-17-36 href=#__codelineno-17-36></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>datetime</span><span class=o>.</span><span class=n>now</span><span class=p>(),</span> <a id=__codelineno-17-36 name=__codelineno-17-36 href=#__codelineno-17-36></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>datetime</span><span class=o>.</span><span class=n>now</span><span class=p>(),</span>
<a id=__codelineno-17-37 name=__codelineno-17-37 href=#__codelineno-17-37></a> <span class=s2>&quot;json_data&quot;</span><span class=p>:</span> <span class=n>json</span><span class=o>.</span><span class=n>dumps</span><span class=p>({</span><span class=s2>&quot;value&quot;</span><span class=p>:</span> <span class=mi>456</span><span class=p>})</span> <a id=__codelineno-17-37 name=__codelineno-17-37 href=#__codelineno-17-37></a> <span class=s2>&quot;json_data&quot;</span><span class=p>:</span> <span class=n>json</span><span class=o>.</span><span class=n>dumps</span><span class=p>({</span><span class=s2>&quot;value&quot;</span><span class=p>:</span> <span class=mi>456</span><span class=p>})</span>
@ -103,7 +103,7 @@
<a id=__codelineno-21-6 name=__codelineno-21-6 href=#__codelineno-21-6></a><span class=p>&gt;</span> <a id=__codelineno-21-6 name=__codelineno-21-6 href=#__codelineno-21-6></a><span class=p>&gt;</span>
<a id=__codelineno-21-7 name=__codelineno-21-7 href=#__codelineno-21-7></a> ... <a id=__codelineno-21-7 name=__codelineno-21-7 href=#__codelineno-21-7></a> ...
<a id=__codelineno-21-8 name=__codelineno-21-8 href=#__codelineno-21-8></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span> <a id=__codelineno-21-8 name=__codelineno-21-8 href=#__codelineno-21-8></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <h2 id=rendering-html-attributes-outside-of-templates>Rendering HTML attributes outside of templates<a class=headerlink href=#rendering-html-attributes-outside-of-templates title="Permanent link">¤</a></h2> <p>If you need to use serialize HTML attributes outside of Django template and the <code>html_attrs</code> tag, you can use <code>attributes_to_string</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a><span class=kn>from</span> <span class=nn>django_components.attributes</span> <span class=kn>import</span> <span class=n>attributes_to_string</span> </code></pre></div> <h2 id=rendering-html-attributes-outside-of-templates>Rendering HTML attributes outside of templates<a class=headerlink href=#rendering-html-attributes-outside-of-templates title="Permanent link">¤</a></h2> <p>If you need to use serialize HTML attributes outside of Django template and the <code>html_attrs</code> tag, you can use <code>attributes_to_string</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-22-1 name=__codelineno-22-1 href=#__codelineno-22-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components.attributes</span><span class=w> </span><span class=kn>import</span> <span class=n>attributes_to_string</span>
<a id=__codelineno-22-2 name=__codelineno-22-2 href=#__codelineno-22-2></a> <a id=__codelineno-22-2 name=__codelineno-22-2 href=#__codelineno-22-2></a>
<a id=__codelineno-22-3 name=__codelineno-22-3 href=#__codelineno-22-3></a><span class=n>attrs</span> <span class=o>=</span> <span class=p>{</span> <a id=__codelineno-22-3 name=__codelineno-22-3 href=#__codelineno-22-3></a><span class=n>attrs</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-22-4 name=__codelineno-22-4 href=#__codelineno-22-4></a> <span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;my-class text-red pa-4&quot;</span><span class=p>,</span> <a id=__codelineno-22-4 name=__codelineno-22-4 href=#__codelineno-22-4></a> <span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;my-class text-red pa-4&quot;</span><span class=p>,</span>

File diff suppressed because one or more lines are too long

View file

@ -67,8 +67,8 @@
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> Can you believe it&#39;s already <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>?? <a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> Can you believe it&#39;s already <span class=p>&lt;</span><span class=nt>span</span><span class=p>&gt;</span><span class=cp>{{</span> <span class=nv>date</span> <span class=cp>}}</span><span class=p>&lt;/</span><span class=nt>span</span><span class=p>&gt;</span>??
<a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span> <a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a> <span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-9-7 name=__codelineno-9-7 href=#__codelineno-9-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span> <a id=__codelineno-9-7 name=__codelineno-9-7 href=#__codelineno-9-7></a><span class=cp>{%</span> <span class=k>endcomponent</span> <span class=cp>%}</span>
</code></pre></div> <p>NOTE: If you doubly-fill a slot, that is, that both <code>{% fill "default" %}</code> and <code>{% fill "header" %}</code> would point to the same slot, this will raise an error when rendered.</p> <h4 id=accessing-default-slot-in-python>Accessing default slot in Python<a class=headerlink href=#accessing-default-slot-in-python title="Permanent link">¤</a></h4> <p>Since the default slot is stored under the slot name <code>default</code>, you can access the default slot like so:</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=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <p>NOTE: If you doubly-fill a slot, that is, that both <code>{% fill "default" %}</code> and <code>{% fill "header" %}</code> would point to the same slot, this will raise an error when rendered.</p> <h4 id=accessing-default-slot-in-python>Accessing default slot in Python<a class=headerlink href=#accessing-default-slot-in-python title="Permanent link">¤</a></h4> <p>Since the default slot is stored under the slot name <code>default</code>, you can access the default slot like so:</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>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span> <a id=__codelineno-10-2 name=__codelineno-10-2 href=#__codelineno-10-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
<a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=n>default_slot</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>slots</span><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>]</span> <a id=__codelineno-10-3 name=__codelineno-10-3 href=#__codelineno-10-3></a> <span class=n>default_slot</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>slots</span><span class=p>[</span><span class=s2>&quot;default&quot;</span><span class=p>]</span>
<a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-10-4 name=__codelineno-10-4 href=#__codelineno-10-4></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a> <span class=s2>&quot;default_slot&quot;</span><span class=p>:</span> <span class=n>default_slot</span><span class=p>,</span> <a id=__codelineno-10-5 name=__codelineno-10-5 href=#__codelineno-10-5></a> <span class=s2>&quot;default_slot&quot;</span><span class=p>:</span> <span class=n>default_slot</span><span class=p>,</span>
@ -186,8 +186,8 @@
<a id=__codelineno-26-3 name=__codelineno-26-3 href=#__codelineno-26-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;subtitle&quot;</span> <span class=o>/</span> <span class=cp>%}</span> <a id=__codelineno-26-3 name=__codelineno-26-3 href=#__codelineno-26-3></a> <span class=cp>{%</span> <span class=k>slot</span> <span class=s2>&quot;subtitle&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-26-4 name=__codelineno-26-4 href=#__codelineno-26-4></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span> <a id=__codelineno-26-4 name=__codelineno-26-4 href=#__codelineno-26-4></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-26-5 name=__codelineno-26-5 href=#__codelineno-26-5></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span> <a id=__codelineno-26-5 name=__codelineno-26-5 href=#__codelineno-26-5></a><span class=cp>{%</span> <span class=k>endif</span> <span class=cp>%}</span>
</code></pre></div> <h4 id=accessing-is_filled-of-slot-names-with-special-characters>Accessing <code>is_filled</code> of slot names with special characters<a class=headerlink href=#accessing-is_filled-of-slot-names-with-special-characters title="Permanent link">¤</a></h4> <p>To be able to access a slot name via <code>component_vars.is_filled</code>, the slot name needs to be composed of only alphanumeric characters and underscores (e.g. <code>this__isvalid_123</code>).</p> <p>However, you can still define slots with other special characters. In such case, the slot name in <code>component_vars.is_filled</code> is modified to replace all invalid characters into <code>_</code>.</p> <p>So a slot named <code>"my super-slot :)"</code> will be available as <code>component_vars.is_filled.my_super_slot___</code>.</p> <p>Same applies when you are accessing <code>is_filled</code> from within the Python, e.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></a><span class=k>class</span> <span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <h4 id=accessing-is_filled-of-slot-names-with-special-characters>Accessing <code>is_filled</code> of slot names with special characters<a class=headerlink href=#accessing-is_filled-of-slot-names-with-special-characters title="Permanent link">¤</a></h4> <p>To be able to access a slot name via <code>component_vars.is_filled</code>, the slot name needs to be composed of only alphanumeric characters and underscores (e.g. <code>this__isvalid_123</code>).</p> <p>However, you can still define slots with other special characters. In such case, the slot name in <code>component_vars.is_filled</code> is modified to replace all invalid characters into <code>_</code>.</p> <p>So a slot named <code>"my super-slot :)"</code> will be available as <code>component_vars.is_filled.my_super_slot___</code>.</p> <p>Same applies when you are accessing <code>is_filled</code> from within the Python, e.g.:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-27-1 name=__codelineno-27-1 href=#__codelineno-27-1></a><span class=k>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-27-2 name=__codelineno-27-2 href=#__codelineno-27-2></a> <span class=k>def</span> <span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span> <a id=__codelineno-27-2 name=__codelineno-27-2 href=#__codelineno-27-2></a> <span class=k>def</span><span class=w> </span><span class=nf>on_render_before</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>context</span><span class=p>,</span> <span class=n>template</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=kc>None</span><span class=p>:</span>
<a id=__codelineno-27-3 name=__codelineno-27-3 href=#__codelineno-27-3></a> <span class=c1># ✅ Works</span> <a id=__codelineno-27-3 name=__codelineno-27-3 href=#__codelineno-27-3></a> <span class=c1># ✅ Works</span>
<a id=__codelineno-27-4 name=__codelineno-27-4 href=#__codelineno-27-4></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>is_filled</span><span class=p>[</span><span class=s2>&quot;my_super_slot___&quot;</span><span class=p>]:</span> <a id=__codelineno-27-4 name=__codelineno-27-4 href=#__codelineno-27-4></a> <span class=k>if</span> <span class=bp>self</span><span class=o>.</span><span class=n>is_filled</span><span class=p>[</span><span class=s2>&quot;my_super_slot___&quot;</span><span class=p>]:</span>
<a id=__codelineno-27-5 name=__codelineno-27-5 href=#__codelineno-27-5></a> <span class=c1># Do something</span> <a id=__codelineno-27-5 name=__codelineno-27-5 href=#__codelineno-27-5></a> <span class=c1># Do something</span>
@ -213,7 +213,7 @@
<a id=__codelineno-29-9 name=__codelineno-29-9 href=#__codelineno-29-9></a> {% endfor %} <a id=__codelineno-29-9 name=__codelineno-29-9 href=#__codelineno-29-9></a> {% endfor %}
<a id=__codelineno-29-10 name=__codelineno-29-10 href=#__codelineno-29-10></a>{% endcomponent %} <a id=__codelineno-29-10 name=__codelineno-29-10 href=#__codelineno-29-10></a>{% endcomponent %}
</code></pre></div> <h3 id=scoped-slots>Scoped slots<a class=headerlink href=#scoped-slots title="Permanent link">¤</a></h3> <p><em>Added in version 0.76</em>:</p> <p>Consider a component with slot(s). This component may do some processing on the inputs, and then use the processed variable in the slot's default template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-30-1 name=__codelineno-30-1 href=#__codelineno-30-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span> </code></pre></div> <h3 id=scoped-slots>Scoped slots<a class=headerlink href=#scoped-slots title="Permanent link">¤</a></h3> <p><em>Added in version 0.76</em>:</p> <p>Consider a component with slot(s). This component may do some processing on the inputs, and then use the processed variable in the slot's default template:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-30-1 name=__codelineno-30-1 href=#__codelineno-30-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span>
<a id=__codelineno-30-2 name=__codelineno-30-2 href=#__codelineno-30-2></a><span class=k>class</span> <span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-30-2 name=__codelineno-30-2 href=#__codelineno-30-2></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-30-3 name=__codelineno-30-3 href=#__codelineno-30-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-30-3 name=__codelineno-30-3 href=#__codelineno-30-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-30-4 name=__codelineno-30-4 href=#__codelineno-30-4></a><span class=s2> &lt;div&gt;</span> <a id=__codelineno-30-4 name=__codelineno-30-4 href=#__codelineno-30-4></a><span class=s2> &lt;div&gt;</span>
<a id=__codelineno-30-5 name=__codelineno-30-5 href=#__codelineno-30-5></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot &quot;content&quot; default %}</span> <a id=__codelineno-30-5 name=__codelineno-30-5 href=#__codelineno-30-5></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot &quot;content&quot; default %}</span>
@ -222,11 +222,11 @@
<a id=__codelineno-30-8 name=__codelineno-30-8 href=#__codelineno-30-8></a><span class=s2> &lt;/div&gt;</span> <a id=__codelineno-30-8 name=__codelineno-30-8 href=#__codelineno-30-8></a><span class=s2> &lt;/div&gt;</span>
<a id=__codelineno-30-9 name=__codelineno-30-9 href=#__codelineno-30-9></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-30-9 name=__codelineno-30-9 href=#__codelineno-30-9></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-30-10 name=__codelineno-30-10 href=#__codelineno-30-10></a> <a id=__codelineno-30-10 name=__codelineno-30-10 href=#__codelineno-30-10></a>
<a id=__codelineno-30-11 name=__codelineno-30-11 href=#__codelineno-30-11></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=nb>input</span><span class=p>):</span> <a id=__codelineno-30-11 name=__codelineno-30-11 href=#__codelineno-30-11></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=nb>input</span><span class=p>):</span>
<a id=__codelineno-30-12 name=__codelineno-30-12 href=#__codelineno-30-12></a> <span class=n>processed_input</span> <span class=o>=</span> <span class=n>do_something</span><span class=p>(</span><span class=nb>input</span><span class=p>)</span> <a id=__codelineno-30-12 name=__codelineno-30-12 href=#__codelineno-30-12></a> <span class=n>processed_input</span> <span class=o>=</span> <span class=n>do_something</span><span class=p>(</span><span class=nb>input</span><span class=p>)</span>
<a id=__codelineno-30-13 name=__codelineno-30-13 href=#__codelineno-30-13></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;input&quot;</span><span class=p>:</span> <span class=n>processed_input</span><span class=p>}</span> <a id=__codelineno-30-13 name=__codelineno-30-13 href=#__codelineno-30-13></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;input&quot;</span><span class=p>:</span> <span class=n>processed_input</span><span class=p>}</span>
</code></pre></div> <p>You may want to design a component so that users of your component can still access the <code>input</code> variable, so they don't have to recompute it.</p> <p>This behavior is called "scoped slots". This is inspired by <a href=https://vuejs.org/guide/components/slots.html#scoped-slots>Vue scoped slots</a> and <a href="https://github.com/Xzya/django-web-components/tree/master?tab=readme-ov-file#scoped-slots">scoped slots of django-web-components</a>.</p> <p>Using scoped slots consists of two steps:</p> <ol> <li>Passing data to <code>slot</code> tag</li> <li>Accessing data in <code>fill</code> tag</li> </ol> <h4 id=passing-data-to-slots>Passing data to slots<a class=headerlink href=#passing-data-to-slots title="Permanent link">¤</a></h4> <p>To pass the data to the <code>slot</code> tag, simply pass them as keyword attributes (<code>key=value</code>):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-31-1 name=__codelineno-31-1 href=#__codelineno-31-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span> </code></pre></div> <p>You may want to design a component so that users of your component can still access the <code>input</code> variable, so they don't have to recompute it.</p> <p>This behavior is called "scoped slots". This is inspired by <a href=https://vuejs.org/guide/components/slots.html#scoped-slots>Vue scoped slots</a> and <a href="https://github.com/Xzya/django-web-components/tree/master?tab=readme-ov-file#scoped-slots">scoped slots of django-web-components</a>.</p> <p>Using scoped slots consists of two steps:</p> <ol> <li>Passing data to <code>slot</code> tag</li> <li>Accessing data in <code>fill</code> tag</li> </ol> <h4 id=passing-data-to-slots>Passing data to slots<a class=headerlink href=#passing-data-to-slots title="Permanent link">¤</a></h4> <p>To pass the data to the <code>slot</code> tag, simply pass them as keyword attributes (<code>key=value</code>):</p> <div class=highlight><pre><span></span><code><a id=__codelineno-31-1 name=__codelineno-31-1 href=#__codelineno-31-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span>
<a id=__codelineno-31-2 name=__codelineno-31-2 href=#__codelineno-31-2></a><span class=k>class</span> <span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-31-2 name=__codelineno-31-2 href=#__codelineno-31-2></a><span class=k>class</span><span class=w> </span><span class=nc>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-31-3 name=__codelineno-31-3 href=#__codelineno-31-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-31-3 name=__codelineno-31-3 href=#__codelineno-31-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-31-4 name=__codelineno-31-4 href=#__codelineno-31-4></a><span class=s2> &lt;div&gt;</span> <a id=__codelineno-31-4 name=__codelineno-31-4 href=#__codelineno-31-4></a><span class=s2> &lt;div&gt;</span>
<a id=__codelineno-31-5 name=__codelineno-31-5 href=#__codelineno-31-5></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot &quot;content&quot; default input=input %}</span> <a id=__codelineno-31-5 name=__codelineno-31-5 href=#__codelineno-31-5></a><span class=s2> {</span><span class=si>% s</span><span class=s2>lot &quot;content&quot; default input=input %}</span>
@ -235,7 +235,7 @@
<a id=__codelineno-31-8 name=__codelineno-31-8 href=#__codelineno-31-8></a><span class=s2> &lt;/div&gt;</span> <a id=__codelineno-31-8 name=__codelineno-31-8 href=#__codelineno-31-8></a><span class=s2> &lt;/div&gt;</span>
<a id=__codelineno-31-9 name=__codelineno-31-9 href=#__codelineno-31-9></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-31-9 name=__codelineno-31-9 href=#__codelineno-31-9></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-31-10 name=__codelineno-31-10 href=#__codelineno-31-10></a> <a id=__codelineno-31-10 name=__codelineno-31-10 href=#__codelineno-31-10></a>
<a id=__codelineno-31-11 name=__codelineno-31-11 href=#__codelineno-31-11></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=nb>input</span><span class=p>):</span> <a id=__codelineno-31-11 name=__codelineno-31-11 href=#__codelineno-31-11></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=nb>input</span><span class=p>):</span>
<a id=__codelineno-31-12 name=__codelineno-31-12 href=#__codelineno-31-12></a> <span class=n>processed_input</span> <span class=o>=</span> <span class=n>do_something</span><span class=p>(</span><span class=nb>input</span><span class=p>)</span> <a id=__codelineno-31-12 name=__codelineno-31-12 href=#__codelineno-31-12></a> <span class=n>processed_input</span> <span class=o>=</span> <span class=n>do_something</span><span class=p>(</span><span class=nb>input</span><span class=p>)</span>
<a id=__codelineno-31-13 name=__codelineno-31-13 href=#__codelineno-31-13></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-31-13 name=__codelineno-31-13 href=#__codelineno-31-13></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-31-14 name=__codelineno-31-14 href=#__codelineno-31-14></a> <span class=s2>&quot;input&quot;</span><span class=p>:</span> <span class=n>processed_input</span><span class=p>,</span> <a id=__codelineno-31-14 name=__codelineno-31-14 href=#__codelineno-31-14></a> <span class=s2>&quot;input&quot;</span><span class=p>:</span> <span class=n>processed_input</span><span class=p>,</span>
@ -290,8 +290,8 @@
</code></pre></div> <p>is the same as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-42-1 name=__codelineno-42-1 href=#__codelineno-42-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;content&quot;</span> <span class=o>/</span> <span class=cp>%}</span> </code></pre></div> <p>is the same as:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-42-1 name=__codelineno-42-1 href=#__codelineno-42-1></a><span class=cp>{%</span> <span class=k>slot</span> <span class=nv>name</span><span class=o>=</span><span class=s2>&quot;content&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>So it's possible to define a <code>name</code> key on a dictionary, and then spread that onto the slot tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-43-1 name=__codelineno-43-1 href=#__codelineno-43-1></a><span class=c>{# slot_props = {&quot;name&quot;: &quot;content&quot;} #}</span> </code></pre></div> <p>So it's possible to define a <code>name</code> key on a dictionary, and then spread that onto the slot tag:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-43-1 name=__codelineno-43-1 href=#__codelineno-43-1></a><span class=c>{# slot_props = {&quot;name&quot;: &quot;content&quot;} #}</span>
<a id=__codelineno-43-2 name=__codelineno-43-2 href=#__codelineno-43-2></a><span class=cp>{%</span> <span class=k>slot</span> <span class=p>..</span><span class=nv>.slot_props</span> <span class=o>/</span> <span class=cp>%}</span> <a id=__codelineno-43-2 name=__codelineno-43-2 href=#__codelineno-43-2></a><span class=cp>{%</span> <span class=k>slot</span> <span class=p>..</span><span class=nv>.slot_props</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <h3 id=pass-through-all-the-slots>Pass through all the slots<a class=headerlink href=#pass-through-all-the-slots title="Permanent link">¤</a></h3> <p>You can dynamically pass all slots to a child component. This is similar to <a href=https://vue-land.github.io/faq/forwarding-slots#passing-all-slots>passing all slots in Vue</a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-44-1 name=__codelineno-44-1 href=#__codelineno-44-1></a><span class=k>class</span> <span class=nc>MyTable</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> </code></pre></div> <h3 id=pass-through-all-the-slots>Pass through all the slots<a class=headerlink href=#pass-through-all-the-slots title="Permanent link">¤</a></h3> <p>You can dynamically pass all slots to a child component. This is similar to <a href=https://vue-land.github.io/faq/forwarding-slots#passing-all-slots>passing all slots in Vue</a>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-44-1 name=__codelineno-44-1 href=#__codelineno-44-1></a><span class=k>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-44-2 name=__codelineno-44-2 href=#__codelineno-44-2></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span> <a id=__codelineno-44-2 name=__codelineno-44-2 href=#__codelineno-44-2></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>*</span><span class=n>args</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
<a id=__codelineno-44-3 name=__codelineno-44-3 href=#__codelineno-44-3></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-44-3 name=__codelineno-44-3 href=#__codelineno-44-3></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-44-4 name=__codelineno-44-4 href=#__codelineno-44-4></a> <span class=s2>&quot;slots&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>slots</span><span class=p>,</span> <a id=__codelineno-44-4 name=__codelineno-44-4 href=#__codelineno-44-4></a> <span class=s2>&quot;slots&quot;</span><span class=p>:</span> <span class=bp>self</span><span class=o>.</span><span class=n>input</span><span class=o>.</span><span class=n>slots</span><span class=p>,</span>
<a id=__codelineno-44-5 name=__codelineno-44-5 href=#__codelineno-44-5></a> <span class=p>}</span> <a id=__codelineno-44-5 name=__codelineno-44-5 href=#__codelineno-44-5></a> <span class=p>}</span>

View file

@ -4,10 +4,10 @@
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>my-date</span><span class=o>=</span><span class=s2>&quot;2015-06-19&quot;</span> <span class=p>@</span><span class=nv>click.native</span><span class=o>=</span><span class=nv>do_something</span> <span class=p>#</span><span class=nv>some_id</span><span class=o>=</span><span class=kp>True</span> <span class=o>/</span> <span class=cp>%}</span> <a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=nv>my-date</span><span class=o>=</span><span class=s2>&quot;2015-06-19&quot;</span> <span class=p>@</span><span class=nv>click.native</span><span class=o>=</span><span class=nv>do_something</span> <span class=p>#</span><span class=nv>some_id</span><span class=o>=</span><span class=kp>True</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=x>&lt;/body&gt;</span> <a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=x>&lt;/body&gt;</span>
</code></pre></div> <p>These can then be accessed inside <code>get_context_data</code> so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span> </code></pre></div> <p>These can then be accessed inside <code>get_context_data</code> so:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</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=nc>Calendar</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>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=c1># Since # . @ - are not valid identifiers, we have to</span> <a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=c1># Since # . @ - are not valid identifiers, we have to</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=c1># use `**kwargs` so the method can accept these args.</span> <a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=c1># use `**kwargs` so the method can accept these args.</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span> <a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=k>def</span><span class=w> </span><span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=o>**</span><span class=n>kwargs</span><span class=p>):</span>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;my-date&quot;</span><span class=p>],</span> <a id=__codelineno-3-7 name=__codelineno-3-7 href=#__codelineno-3-7></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;my-date&quot;</span><span class=p>],</span>
<a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> <span class=s2>&quot;id&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;#some_id&quot;</span><span class=p>],</span> <a id=__codelineno-3-8 name=__codelineno-3-8 href=#__codelineno-3-8></a> <span class=s2>&quot;id&quot;</span><span class=p>:</span> <span class=n>kwargs</span><span class=p>[</span><span class=s2>&quot;#some_id&quot;</span><span class=p>],</span>
@ -22,8 +22,8 @@
</code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=p>..</span><span class=nv>.post_data</span> <span class=o>/</span> <span class=cp>%}</span> </code></pre></div> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=p>..</span><span class=nv>.post_data</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>This behaves similar to <a href=https://kevinyckim33.medium.com/jsx-spread-operator-component-props-meaning-3c9bcadd2493>JSX's spread operator</a> or <a href=https://vuejs.org/api/built-in-directives.html#v-bind>Vue's <code>v-bind</code></a>.</p> <p>Spread operators are treated as keyword arguments, which means that:</p> <ol> <li>Spread operators must come after positional arguments.</li> <li>You cannot use spread operators for <a href=https://martinxpn.medium.com/positional-only-and-keyword-only-arguments-in-python-37-100-days-of-python-310c311657b0>positional-only arguments</a>.</li> </ol> <p>Other than that, you can use spread operators multiple times, and even put keyword arguments in-between or after them:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=p>..</span><span class=nv>.post_data</span> <span class=nv>id</span><span class=o>=</span><span class=nv>post.id</span> <span class=p>..</span><span class=nv>.extra</span> <span class=o>/</span> <span class=cp>%}</span> </code></pre></div> <p>This behaves similar to <a href=https://kevinyckim33.medium.com/jsx-spread-operator-component-props-meaning-3c9bcadd2493>JSX's spread operator</a> or <a href=https://vuejs.org/api/built-in-directives.html#v-bind>Vue's <code>v-bind</code></a>.</p> <p>Spread operators are treated as keyword arguments, which means that:</p> <ol> <li>Spread operators must come after positional arguments.</li> <li>You cannot use spread operators for <a href=https://martinxpn.medium.com/positional-only-and-keyword-only-arguments-in-python-37-100-days-of-python-310c311657b0>positional-only arguments</a>.</li> </ol> <p>Other than that, you can use spread operators multiple times, and even put keyword arguments in-between or after them:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=p>..</span><span class=nv>.post_data</span> <span class=nv>id</span><span class=o>=</span><span class=nv>post.id</span> <span class=p>..</span><span class=nv>.extra</span> <span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <p>In a case of conflicts, the values added later (right-most) overwrite previous values.</p> <h2 id=use-template-tags-inside-component-inputs>Use template tags inside component inputs<a class=headerlink href=#use-template-tags-inside-component-inputs title="Permanent link">¤</a></h2> <p><em>New in version 0.93</em></p> <p>When passing data around, sometimes you may need to do light transformations, like negating booleans or filtering lists.</p> <p>Normally, what you would have to do is to define ALL the variables inside <code>get_context_data()</code>. But this can get messy if your components contain a lot of logic.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span> </code></pre></div> <p>In a case of conflicts, the values added later (right-most) overwrite previous values.</p> <h2 id=use-template-tags-inside-component-inputs>Use template tags inside component inputs<a class=headerlink href=#use-template-tags-inside-component-inputs title="Permanent link">¤</a></h2> <p><em>New in version 0.93</em></p> <p>When passing data around, sometimes you may need to do light transformations, like negating booleans or filtering lists.</p> <p>Normally, what you would have to do is to define ALL the variables inside <code>get_context_data()</code>. But this can get messy if your components contain a lot of logic.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-8-1 name=__codelineno-8-1 href=#__codelineno-8-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a><span class=k>class</span> <span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=nb>id</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span> <span class=n>editable</span><span class=p>:</span> <span class=nb>bool</span><span class=p>):</span> <a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></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=nb>id</span><span class=p>:</span> <span class=nb>str</span><span class=p>,</span> <span class=n>editable</span><span class=p>:</span> <span class=nb>bool</span><span class=p>):</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=s2>&quot;editable&quot;</span><span class=p>:</span> <span class=n>editable</span><span class=p>,</span> <a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=s2>&quot;editable&quot;</span><span class=p>:</span> <span class=n>editable</span><span class=p>,</span>
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=s2>&quot;readonly&quot;</span><span class=p>:</span> <span class=ow>not</span> <span class=n>editable</span><span class=p>,</span> <a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=s2>&quot;readonly&quot;</span><span class=p>:</span> <span class=ow>not</span> <span class=n>editable</span><span class=p>,</span>
@ -47,12 +47,12 @@
<a id=__codelineno-15-2 name=__codelineno-15-2 href=#__codelineno-15-2></a> <span class=nv>value</span><span class=o>=</span><span class=s2>&quot;{% expr &#39;input_value if is_enabled else None&#39; %}&quot;</span> <a id=__codelineno-15-2 name=__codelineno-15-2 href=#__codelineno-15-2></a> <span class=nv>value</span><span class=o>=</span><span class=s2>&quot;{% expr &#39;input_value if is_enabled else None&#39; %}&quot;</span>
<a id=__codelineno-15-3 name=__codelineno-15-3 href=#__codelineno-15-3></a><span class=o>/</span> <span class=cp>%}</span> <a id=__codelineno-15-3 name=__codelineno-15-3 href=#__codelineno-15-3></a><span class=o>/</span> <span class=cp>%}</span>
</code></pre></div> <blockquote> <p>Note: Never use this feature to mix business logic and template logic. Business logic should still be in the view!</p> </blockquote> <h2 id=pass-dictonary-by-its-key-value-pairs>Pass dictonary by its key-value pairs<a class=headerlink href=#pass-dictonary-by-its-key-value-pairs title="Permanent link">¤</a></h2> <p><em>New in version 0.74</em>:</p> <p>Sometimes, a component may expect a dictionary as one of its inputs.</p> <p>Most commonly, this happens when a component accepts a dictionary of HTML attributes (usually called <code>attrs</code>) to pass to the underlying template.</p> <p>In such cases, we may want to define some HTML attributes statically, and other dynamically. But for that, we need to define this dictionary on Python side:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-16-1 name=__codelineno-16-1 href=#__codelineno-16-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span> </code></pre></div> <blockquote> <p>Note: Never use this feature to mix business logic and template logic. Business logic should still be in the view!</p> </blockquote> <h2 id=pass-dictonary-by-its-key-value-pairs>Pass dictonary by its key-value pairs<a class=headerlink href=#pass-dictonary-by-its-key-value-pairs title="Permanent link">¤</a></h2> <p><em>New in version 0.74</em>:</p> <p>Sometimes, a component may expect a dictionary as one of its inputs.</p> <p>Most commonly, this happens when a component accepts a dictionary of HTML attributes (usually called <code>attrs</code>) to pass to the underlying template.</p> <p>In such cases, we may want to define some HTML attributes statically, and other dynamically. But for that, we need to define this dictionary on Python side:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-16-1 name=__codelineno-16-1 href=#__codelineno-16-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</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=nc>MyComp</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>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-16-3 name=__codelineno-16-3 href=#__codelineno-16-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-16-3 name=__codelineno-16-3 href=#__codelineno-16-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-16-4 name=__codelineno-16-4 href=#__codelineno-16-4></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &quot;other&quot; attrs=attrs / %}</span> <a id=__codelineno-16-4 name=__codelineno-16-4 href=#__codelineno-16-4></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &quot;other&quot; attrs=attrs / %}</span>
<a id=__codelineno-16-5 name=__codelineno-16-5 href=#__codelineno-16-5></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-16-5 name=__codelineno-16-5 href=#__codelineno-16-5></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-16-6 name=__codelineno-16-6 href=#__codelineno-16-6></a> <a id=__codelineno-16-6 name=__codelineno-16-6 href=#__codelineno-16-6></a>
<a id=__codelineno-16-7 name=__codelineno-16-7 href=#__codelineno-16-7></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>some_id</span><span class=p>:</span> <span class=nb>str</span><span class=p>):</span> <a id=__codelineno-16-7 name=__codelineno-16-7 href=#__codelineno-16-7></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>some_id</span><span class=p>:</span> <span class=nb>str</span><span class=p>):</span>
<a id=__codelineno-16-8 name=__codelineno-16-8 href=#__codelineno-16-8></a> <span class=n>attrs</span> <span class=o>=</span> <span class=p>{</span> <a id=__codelineno-16-8 name=__codelineno-16-8 href=#__codelineno-16-8></a> <span class=n>attrs</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-16-9 name=__codelineno-16-9 href=#__codelineno-16-9></a> <span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;pa-4 flex&quot;</span><span class=p>,</span> <a id=__codelineno-16-9 name=__codelineno-16-9 href=#__codelineno-16-9></a> <span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;pa-4 flex&quot;</span><span class=p>,</span>
<a id=__codelineno-16-10 name=__codelineno-16-10 href=#__codelineno-16-10></a> <span class=s2>&quot;data-some-id&quot;</span><span class=p>:</span> <span class=n>some_id</span><span class=p>,</span> <a id=__codelineno-16-10 name=__codelineno-16-10 href=#__codelineno-16-10></a> <span class=s2>&quot;data-some-id&quot;</span><span class=p>:</span> <span class=n>some_id</span><span class=p>,</span>
@ -60,7 +60,7 @@
<a id=__codelineno-16-12 name=__codelineno-16-12 href=#__codelineno-16-12></a> <span class=p>}</span> <a id=__codelineno-16-12 name=__codelineno-16-12 href=#__codelineno-16-12></a> <span class=p>}</span>
<a id=__codelineno-16-13 name=__codelineno-16-13 href=#__codelineno-16-13></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;attrs&quot;</span><span class=p>:</span> <span class=n>attrs</span><span class=p>}</span> <a id=__codelineno-16-13 name=__codelineno-16-13 href=#__codelineno-16-13></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;attrs&quot;</span><span class=p>:</span> <span class=n>attrs</span><span class=p>}</span>
</code></pre></div> <p>But as you can see in the case above, the event handler <code>@click.stop</code> and styling <code>pa-4 flex</code> are disconnected from the template. If the component grew in size and we moved the HTML to a separate file, we would have hard time reasoning about the component's template.</p> <p>Luckily, there's a better way.</p> <p>When we want to pass a dictionary to a component, we can define individual key-value pairs as component kwargs, so we can keep all the relevant information in the template. For that, we prefix the key with the name of the dict and <code>:</code>. So key <code>class</code> of input <code>attrs</code> becomes <code>attrs:class</code>. And our example becomes:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</span><span class=p>)</span> </code></pre></div> <p>But as you can see in the case above, the event handler <code>@click.stop</code> and styling <code>pa-4 flex</code> are disconnected from the template. If the component grew in size and we moved the HTML to a separate file, we would have hard time reasoning about the component's template.</p> <p>Luckily, there's a better way.</p> <p>When we want to pass a dictionary to a component, we can define individual key-value pairs as component kwargs, so we can keep all the relevant information in the template. For that, we prefix the key with the name of the dict and <code>:</code>. So key <code>class</code> of input <code>attrs</code> becomes <code>attrs:class</code>. And our example becomes:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-17-1 name=__codelineno-17-1 href=#__codelineno-17-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;my_comp&quot;</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=nc>MyComp</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>MyComp</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span> <a id=__codelineno-17-3 name=__codelineno-17-3 href=#__codelineno-17-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &quot;other&quot;</span> <a id=__codelineno-17-4 name=__codelineno-17-4 href=#__codelineno-17-4></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &quot;other&quot;</span>
<a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a><span class=s2> attrs:class=&quot;pa-4 flex&quot;</span> <a id=__codelineno-17-5 name=__codelineno-17-5 href=#__codelineno-17-5></a><span class=s2> attrs:class=&quot;pa-4 flex&quot;</span>
@ -69,7 +69,7 @@
<a id=__codelineno-17-8 name=__codelineno-17-8 href=#__codelineno-17-8></a><span class=s2> / %}</span> <a id=__codelineno-17-8 name=__codelineno-17-8 href=#__codelineno-17-8></a><span class=s2> / %}</span>
<a id=__codelineno-17-9 name=__codelineno-17-9 href=#__codelineno-17-9></a><span class=s2> &quot;&quot;&quot;</span> <a id=__codelineno-17-9 name=__codelineno-17-9 href=#__codelineno-17-9></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-17-10 name=__codelineno-17-10 href=#__codelineno-17-10></a> <a id=__codelineno-17-10 name=__codelineno-17-10 href=#__codelineno-17-10></a>
<a id=__codelineno-17-11 name=__codelineno-17-11 href=#__codelineno-17-11></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>some_id</span><span class=p>:</span> <span class=nb>str</span><span class=p>):</span> <a id=__codelineno-17-11 name=__codelineno-17-11 href=#__codelineno-17-11></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>some_id</span><span class=p>:</span> <span class=nb>str</span><span class=p>):</span>
<a id=__codelineno-17-12 name=__codelineno-17-12 href=#__codelineno-17-12></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;some_id&quot;</span><span class=p>:</span> <span class=n>some_id</span><span class=p>}</span> <a id=__codelineno-17-12 name=__codelineno-17-12 href=#__codelineno-17-12></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;some_id&quot;</span><span class=p>:</span> <span class=n>some_id</span><span class=p>}</span>
</code></pre></div> <p>Sweet! Now all the relevant HTML is inside the template, and we can move it to a separate file with confidence:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-18-1 name=__codelineno-18-1 href=#__codelineno-18-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;other&quot;</span> </code></pre></div> <p>Sweet! Now all the relevant HTML is inside the template, and we can move it to a separate file with confidence:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-18-1 name=__codelineno-18-1 href=#__codelineno-18-1></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;other&quot;</span>
<a id=__codelineno-18-2 name=__codelineno-18-2 href=#__codelineno-18-2></a> <span class=nv>attrs</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;pa-4 flex&quot;</span> <a id=__codelineno-18-2 name=__codelineno-18-2 href=#__codelineno-18-2></a> <span class=nv>attrs</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;pa-4 flex&quot;</span>

View file

@ -72,14 +72,14 @@
<a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=o>/</span> <span class=cp>%}</span> <a id=__codelineno-6-8 name=__codelineno-6-8 href=#__codelineno-6-8></a> <span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;calendar&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=p>&lt;/</span><span class=nt>body</span><span class=p>&gt;</span> <a id=__codelineno-6-9 name=__codelineno-6-9 href=#__codelineno-6-9></a> <span class=p>&lt;/</span><span class=nt>body</span><span class=p>&gt;</span>
<a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a><span class=p>&lt;/</span><span class=nt>html</span><span class=p>&gt;</span> <a id=__codelineno-6-10 name=__codelineno-6-10 href=#__codelineno-6-10></a><span class=p>&lt;/</span><span class=nt>html</span><span class=p>&gt;</span>
</code></pre></div> </li> </ol> <h3 id=4-link-js-and-css-to-a-component>4. Link JS and CSS to a component<a class=headerlink href=#4-link-js-and-css-to-a-component title="Permanent link">¤</a></h3> <p>Finally, we return to our Python component in <code>calendar.py</code> to tie this together.</p> <p>To link JS and CSS defined in other files, use <a href=../../../reference/api#django_components.Component.js_file><code>js_file</code></a> and <a href=../../../reference/api#django_components.Component.css_file><code>css_file</code></a> attributes:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span> </code></pre></div> </li> </ol> <h3 id=4-link-js-and-css-to-a-component>4. Link JS and CSS to a component<a class=headerlink href=#4-link-js-and-css-to-a-component title="Permanent link">¤</a></h3> <p>Finally, we return to our Python component in <code>calendar.py</code> to tie this together.</p> <p>To link JS and CSS defined in other files, use <a href=../../../reference/api#django_components.Component.js_file><code>js_file</code></a> and <a href=../../../reference/api#django_components.Component.css_file><code>css_file</code></a> attributes:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a>
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=k>class</span> <span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.html&quot;</span> <a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.html&quot;</span>
<a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.js&quot;</span> <span class=c1># &lt;--- new</span> <a id=__codelineno-7-5 name=__codelineno-7-5 href=#__codelineno-7-5></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.js&quot;</span> <span class=c1># &lt;--- new</span>
<a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.css&quot;</span> <span class=c1># &lt;--- new</span> <a id=__codelineno-7-6 name=__codelineno-7-6 href=#__codelineno-7-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.css&quot;</span> <span class=c1># &lt;--- new</span>
<a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a> <a id=__codelineno-7-7 name=__codelineno-7-7 href=#__codelineno-7-7></a>
<a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span> <a id=__codelineno-7-8 name=__codelineno-7-8 href=#__codelineno-7-8></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>
<a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-7-9 name=__codelineno-7-9 href=#__codelineno-7-9></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=s2>&quot;1970-01-01&quot;</span><span class=p>,</span> <a id=__codelineno-7-10 name=__codelineno-7-10 href=#__codelineno-7-10></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=s2>&quot;1970-01-01&quot;</span><span class=p>,</span>
<a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a> <span class=p>}</span> <a id=__codelineno-7-11 name=__codelineno-7-11 href=#__codelineno-7-11></a> <span class=p>}</span>
@ -97,14 +97,14 @@
a component is rendered on the page. a component is rendered on the page.
This is not true for JS and CSS defined in `Media.js/css`, where the linked JS / CSS are rendered as is. This is not true for JS and CSS defined in `Media.js/css`, where the linked JS / CSS are rendered as is.
--> <h3 id=5-link-additional-js-and-css-to-a-component>5. Link additional JS and CSS to a component<a class=headerlink href=#5-link-additional-js-and-css-to-a-component title="Permanent link">¤</a></h3> <p>Your components may depend on third-party packages or styling, or other shared logic. To load these additional dependencies, you can use a nested <a href=../../../reference/api#django_components.Component.Media><code>Media</code> class</a>.</p> <p>This <code>Media</code> class behaves similarly to <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/#assets-as-a-static-definition>Django's Media class</a>, with a few differences:</p> <ol> <li>Our Media class accepts various formats for the JS and CSS files: either a single file, a list, or (CSS-only) a dictonary (see below).</li> <li>Individual JS / CSS files can be any of <code>str</code>, <code>bytes</code>, <code>Path</code>, <a href=https://dev.to/doridoro/django-safestring-afj><code>SafeString</code></a>, or a function.</li> <li>Our Media class does NOT support <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/#extend>Django's <code>extend</code> keyword</a>.</li> </ol> <p><a href=../../fundamentals/defining_js_css_html_files/ >Learn more</a> about using Media.</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><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=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span> --> <h3 id=5-link-additional-js-and-css-to-a-component>5. Link additional JS and CSS to a component<a class=headerlink href=#5-link-additional-js-and-css-to-a-component title="Permanent link">¤</a></h3> <p>Your components may depend on third-party packages or styling, or other shared logic. To load these additional dependencies, you can use a nested <a href=../../../reference/api#django_components.Component.Media><code>Media</code> class</a>.</p> <p>This <code>Media</code> class behaves similarly to <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/#assets-as-a-static-definition>Django's Media class</a>, with a few differences:</p> <ol> <li>Our Media class accepts various formats for the JS and CSS files: either a single file, a list, or (CSS-only) a dictonary (see below).</li> <li>Individual JS / CSS files can be any of <code>str</code>, <code>bytes</code>, <code>Path</code>, <a href=https://dev.to/doridoro/django-safestring-afj><code>SafeString</code></a>, or a function.</li> <li>Our Media class does NOT support <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/#extend>Django's <code>extend</code> keyword</a>.</li> </ol> <p><a href=../../fundamentals/defining_js_css_html_files/ >Learn more</a> about using Media.</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><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</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span>
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a> <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=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <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>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.html&quot;</span> <a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.html&quot;</span>
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.js&quot;</span> <a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a> <span class=n>js_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.js&quot;</span>
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.css&quot;</span> <a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a> <span class=n>css_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.css&quot;</span>
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a> <a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a>
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=k>class</span> <span class=nc>Media</span><span class=p>:</span> <span class=c1># &lt;--- new</span> <a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span> <span class=c1># &lt;--- new</span>
<a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span> <a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a> <span class=s2>&quot;path/to/shared.js&quot;</span><span class=p>,</span> <a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a> <span class=s2>&quot;path/to/shared.js&quot;</span><span class=p>,</span>
<a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=s2>&quot;https://unpkg.com/alpinejs@3.14.7/dist/cdn.min.js&quot;</span><span class=p>,</span> <span class=c1># AlpineJS</span> <a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=s2>&quot;https://unpkg.com/alpinejs@3.14.7/dist/cdn.min.js&quot;</span><span class=p>,</span> <span class=c1># AlpineJS</span>
@ -114,22 +114,22 @@
<a id=__codelineno-8-15 name=__codelineno-8-15 href=#__codelineno-8-15></a> <span class=s2>&quot;https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css&quot;</span><span class=p>,</span> <span class=c1># Tailwind</span> <a id=__codelineno-8-15 name=__codelineno-8-15 href=#__codelineno-8-15></a> <span class=s2>&quot;https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css&quot;</span><span class=p>,</span> <span class=c1># Tailwind</span>
<a id=__codelineno-8-16 name=__codelineno-8-16 href=#__codelineno-8-16></a> <span class=p>]</span> <a id=__codelineno-8-16 name=__codelineno-8-16 href=#__codelineno-8-16></a> <span class=p>]</span>
<a id=__codelineno-8-17 name=__codelineno-8-17 href=#__codelineno-8-17></a> <a id=__codelineno-8-17 name=__codelineno-8-17 href=#__codelineno-8-17></a>
<a id=__codelineno-8-18 name=__codelineno-8-18 href=#__codelineno-8-18></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span> <a id=__codelineno-8-18 name=__codelineno-8-18 href=#__codelineno-8-18></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>
<a id=__codelineno-8-19 name=__codelineno-8-19 href=#__codelineno-8-19></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-8-19 name=__codelineno-8-19 href=#__codelineno-8-19></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-8-20 name=__codelineno-8-20 href=#__codelineno-8-20></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=s2>&quot;1970-01-01&quot;</span><span class=p>,</span> <a id=__codelineno-8-20 name=__codelineno-8-20 href=#__codelineno-8-20></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=s2>&quot;1970-01-01&quot;</span><span class=p>,</span>
<a id=__codelineno-8-21 name=__codelineno-8-21 href=#__codelineno-8-21></a> <span class=p>}</span> <a id=__codelineno-8-21 name=__codelineno-8-21 href=#__codelineno-8-21></a> <span class=p>}</span>
</code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>Same as with the "primary" JS and CSS, the file paths files can be either:</p> <ol> <li>Relative to the Python component file (as seen above),</li> <li>Relative to any of the component directories as defined by <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> and/or <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> (e.g. <code>[your apps]/components</code> dir and <code>[project root]/components</code>)</li> </ol> </div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>The <code>Media</code> nested class is shaped based on <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/ >Django's Media class</a>.</p> <p>As such, django-components allows multiple formats to define the nested Media class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=c1># Single files</span> </code></pre></div> <div class="admonition note"> <p class=admonition-title>Note</p> <p>Same as with the "primary" JS and CSS, the file paths files can be either:</p> <ol> <li>Relative to the Python component file (as seen above),</li> <li>Relative to any of the component directories as defined by <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> and/or <a href=../../../reference/settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> (e.g. <code>[your apps]/components</code> dir and <code>[project root]/components</code>)</li> </ol> </div> <div class="admonition info"> <p class=admonition-title>Info</p> <p>The <code>Media</code> nested class is shaped based on <a href=https://docs.djangoproject.com/en/5.1/topics/forms/media/ >Django's Media class</a>.</p> <p>As such, django-components allows multiple formats to define the nested Media class:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-9-1 name=__codelineno-9-1 href=#__codelineno-9-1></a><span class=c1># Single files</span>
<a id=__codelineno-9-2 name=__codelineno-9-2 href=#__codelineno-9-2></a><span class=k>class</span> <span class=nc>Media</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>Media</span><span class=p>:</span>
<a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>&quot;calendar.js&quot;</span> <a id=__codelineno-9-3 name=__codelineno-9-3 href=#__codelineno-9-3></a> <span class=n>js</span> <span class=o>=</span> <span class=s2>&quot;calendar.js&quot;</span>
<a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;calendar.css&quot;</span> <a id=__codelineno-9-4 name=__codelineno-9-4 href=#__codelineno-9-4></a> <span class=n>css</span> <span class=o>=</span> <span class=s2>&quot;calendar.css&quot;</span>
<a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a> <a id=__codelineno-9-5 name=__codelineno-9-5 href=#__codelineno-9-5></a>
<a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a><span class=c1># Lists of files</span> <a id=__codelineno-9-6 name=__codelineno-9-6 href=#__codelineno-9-6></a><span class=c1># Lists of files</span>
<a id=__codelineno-9-7 name=__codelineno-9-7 href=#__codelineno-9-7></a><span class=k>class</span> <span class=nc>Media</span><span class=p>:</span> <a id=__codelineno-9-7 name=__codelineno-9-7 href=#__codelineno-9-7></a><span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-9-8 name=__codelineno-9-8 href=#__codelineno-9-8></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;calendar.js&quot;</span><span class=p>,</span> <span class=s2>&quot;calendar2.js&quot;</span><span class=p>]</span> <a id=__codelineno-9-8 name=__codelineno-9-8 href=#__codelineno-9-8></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;calendar.js&quot;</span><span class=p>,</span> <span class=s2>&quot;calendar2.js&quot;</span><span class=p>]</span>
<a id=__codelineno-9-9 name=__codelineno-9-9 href=#__codelineno-9-9></a> <span class=n>css</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;calendar.css&quot;</span><span class=p>,</span> <span class=s2>&quot;calendar2.css&quot;</span><span class=p>]</span> <a id=__codelineno-9-9 name=__codelineno-9-9 href=#__codelineno-9-9></a> <span class=n>css</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;calendar.css&quot;</span><span class=p>,</span> <span class=s2>&quot;calendar2.css&quot;</span><span class=p>]</span>
<a id=__codelineno-9-10 name=__codelineno-9-10 href=#__codelineno-9-10></a> <a id=__codelineno-9-10 name=__codelineno-9-10 href=#__codelineno-9-10></a>
<a id=__codelineno-9-11 name=__codelineno-9-11 href=#__codelineno-9-11></a><span class=c1># Dictionary of media types for CSS</span> <a id=__codelineno-9-11 name=__codelineno-9-11 href=#__codelineno-9-11></a><span class=c1># Dictionary of media types for CSS</span>
<a id=__codelineno-9-12 name=__codelineno-9-12 href=#__codelineno-9-12></a><span class=k>class</span> <span class=nc>Media</span><span class=p>:</span> <a id=__codelineno-9-12 name=__codelineno-9-12 href=#__codelineno-9-12></a><span class=k>class</span><span class=w> </span><span class=nc>Media</span><span class=p>:</span>
<a id=__codelineno-9-13 name=__codelineno-9-13 href=#__codelineno-9-13></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;calendar.js&quot;</span><span class=p>,</span> <span class=s2>&quot;calendar2.js&quot;</span><span class=p>]</span> <a id=__codelineno-9-13 name=__codelineno-9-13 href=#__codelineno-9-13></a> <span class=n>js</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;calendar.js&quot;</span><span class=p>,</span> <span class=s2>&quot;calendar2.js&quot;</span><span class=p>]</span>
<a id=__codelineno-9-14 name=__codelineno-9-14 href=#__codelineno-9-14></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span> <a id=__codelineno-9-14 name=__codelineno-9-14 href=#__codelineno-9-14></a> <span class=n>css</span> <span class=o>=</span> <span class=p>{</span>
<a id=__codelineno-9-15 name=__codelineno-9-15 href=#__codelineno-9-15></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;calendar.css&quot;</span><span class=p>,</span> <span class=s2>&quot;calendar2.css&quot;</span><span class=p>],</span> <a id=__codelineno-9-15 name=__codelineno-9-15 href=#__codelineno-9-15></a> <span class=s2>&quot;all&quot;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&quot;calendar.css&quot;</span><span class=p>,</span> <span class=s2>&quot;calendar2.css&quot;</span><span class=p>],</span>

View file

@ -60,19 +60,19 @@
<a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span> <a id=__codelineno-7-12 name=__codelineno-7-12 href=#__codelineno-7-12></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;calendar&quot;</span><span class=p>&gt;</span>
<a id=__codelineno-7-13 name=__codelineno-7-13 href=#__codelineno-7-13></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span>2024-12-14<span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span> <a id=__codelineno-7-13 name=__codelineno-7-13 href=#__codelineno-7-13></a> Today&#39;s date is <span class=p>&lt;</span><span class=nt>i</span><span class=p>&gt;</span>2024-12-14<span class=p>&lt;/</span><span class=nt>i</span><span class=p>&gt;</span>
<a id=__codelineno-7-14 name=__codelineno-7-14 href=#__codelineno-7-14></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span> <a id=__codelineno-7-14 name=__codelineno-7-14 href=#__codelineno-7-14></a><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <p>The first instance rendered <code>2024-12-16</code>, while the rest rendered <code>2024-12-14</code>!</p> <p>Why? Remember that in the <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> method of our Calendar component, we pre-process the date. If the date falls on Saturday or Sunday, we shift it to next Monday:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><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=nn>datetime</span> <span class=kn>import</span> <span class=n>date</span> </code></pre></div> <p>The first instance rendered <code>2024-12-16</code>, while the rest rendered <code>2024-12-14</code>!</p> <p>Why? Remember that in the <a href=../../../reference/api#django_components.Component.get_context_data><code>get_context_data()</code></a> method of our Calendar component, we pre-process the date. If the date falls on Saturday or Sunday, we shift it to next Monday:</p> <div class=highlight><span class=filename>[project root]/components/calendar/calendar.py</span><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>datetime</span><span class=w> </span><span class=kn>import</span> <span class=n>date</span>
<a id=__codelineno-8-2 name=__codelineno-8-2 href=#__codelineno-8-2></a> <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=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span> <a id=__codelineno-8-3 name=__codelineno-8-3 href=#__codelineno-8-3></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>Component</span><span class=p>,</span> <span class=n>register</span>
<a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a> <a id=__codelineno-8-4 name=__codelineno-8-4 href=#__codelineno-8-4></a>
<a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a><span class=c1># If date is Sat or Sun, shift it to next Mon, so the date is always workweek.</span> <a id=__codelineno-8-5 name=__codelineno-8-5 href=#__codelineno-8-5></a><span class=c1># If date is Sat or Sun, shift it to next Mon, so the date is always workweek.</span>
<a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a><span class=k>def</span> <span class=nf>to_workweek_date</span><span class=p>(</span><span class=n>d</span><span class=p>:</span> <span class=n>date</span><span class=p>):</span> <a id=__codelineno-8-6 name=__codelineno-8-6 href=#__codelineno-8-6></a><span class=k>def</span><span class=w> </span><span class=nf>to_workweek_date</span><span class=p>(</span><span class=n>d</span><span class=p>:</span> <span class=n>date</span><span class=p>):</span>
<a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a> <span class=o>...</span> <a id=__codelineno-8-7 name=__codelineno-8-7 href=#__codelineno-8-7></a> <span class=o>...</span>
<a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a> <a id=__codelineno-8-8 name=__codelineno-8-8 href=#__codelineno-8-8></a>
<a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span> <a id=__codelineno-8-9 name=__codelineno-8-9 href=#__codelineno-8-9></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;calendar&quot;</span><span class=p>)</span>
<a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a><span class=k>class</span> <span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span> <a id=__codelineno-8-10 name=__codelineno-8-10 href=#__codelineno-8-10></a><span class=k>class</span><span class=w> </span><span class=nc>Calendar</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.html&quot;</span> <a id=__codelineno-8-11 name=__codelineno-8-11 href=#__codelineno-8-11></a> <span class=n>template_file</span> <span class=o>=</span> <span class=s2>&quot;calendar.html&quot;</span>
<a id=__codelineno-8-12 name=__codelineno-8-12 href=#__codelineno-8-12></a> <span class=o>...</span> <a id=__codelineno-8-12 name=__codelineno-8-12 href=#__codelineno-8-12></a> <span class=o>...</span>
<a id=__codelineno-8-13 name=__codelineno-8-13 href=#__codelineno-8-13></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>,</span> <span class=n>date</span><span class=p>:</span> <span class=n>date</span><span class=p>,</span> <span class=n>extra_class</span><span class=p>:</span> <span class=nb>str</span> <span class=o>|</span> <span class=kc>None</span> <span class=o>=</span> <span class=kc>None</span><span class=p>):</span> <a id=__codelineno-8-13 name=__codelineno-8-13 href=#__codelineno-8-13></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>date</span><span class=p>:</span> <span class=n>date</span><span class=p>,</span> <span class=n>extra_class</span><span class=p>:</span> <span class=nb>str</span> <span class=o>|</span> <span class=kc>None</span> <span class=o>=</span> <span class=kc>None</span><span class=p>):</span>
<a id=__codelineno-8-14 name=__codelineno-8-14 href=#__codelineno-8-14></a> <span class=n>workweek_date</span> <span class=o>=</span> <span class=n>to_workweek_date</span><span class=p>(</span><span class=n>date</span><span class=p>)</span> <a id=__codelineno-8-14 name=__codelineno-8-14 href=#__codelineno-8-14></a> <span class=n>workweek_date</span> <span class=o>=</span> <span class=n>to_workweek_date</span><span class=p>(</span><span class=n>date</span><span class=p>)</span>
<a id=__codelineno-8-15 name=__codelineno-8-15 href=#__codelineno-8-15></a> <span class=k>return</span> <span class=p>{</span> <a id=__codelineno-8-15 name=__codelineno-8-15 href=#__codelineno-8-15></a> <span class=k>return</span> <span class=p>{</span>
<a id=__codelineno-8-16 name=__codelineno-8-16 href=#__codelineno-8-16></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>workweek_date</span><span class=p>,</span> <a id=__codelineno-8-16 name=__codelineno-8-16 href=#__codelineno-8-16></a> <span class=s2>&quot;date&quot;</span><span class=p>:</span> <span class=n>workweek_date</span><span class=p>,</span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -3,10 +3,10 @@
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=o>...</span><span class=p>,</span> <a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a> <span class=o>...</span><span class=p>,</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=s1>&#39;django_components&#39;</span><span class=p>,</span> <a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a> <span class=s1>&#39;django_components&#39;</span><span class=p>,</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=p>]</span> <a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=p>]</span>
</code></pre></div> </li> <li> <p><code>BASE_DIR</code> setting is required. Ensure that it is defined:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span> <span class=nn>pathlib</span> <span class=kn>import</span> <span class=n>Path</span> </code></pre></div> </li> <li> <p><code>BASE_DIR</code> setting is required. Ensure that it is defined:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span><span class=w> </span><span class=nn>pathlib</span><span class=w> </span><span class=kn>import</span> <span class=n>Path</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=n>BASE_DIR</span> <span class=o>=</span> <span class=n>Path</span><span class=p>(</span><span class=vm>__file__</span><span class=p>)</span><span class=o>.</span><span class=n>resolve</span><span class=p>()</span><span class=o>.</span><span class=n>parent</span><span class=o>.</span><span class=n>parent</span> <a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=n>BASE_DIR</span> <span class=o>=</span> <span class=n>Path</span><span class=p>(</span><span class=vm>__file__</span><span class=p>)</span><span class=o>.</span><span class=n>resolve</span><span class=p>()</span><span class=o>.</span><span class=n>parent</span><span class=o>.</span><span class=n>parent</span>
</code></pre></div> </li> <li> <p>Set <a href=../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> and/or <a href=../../reference/settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> so django_components knows where to find component HTML, JS and CSS files:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>ComponentsSettings</span> </code></pre></div> </li> <li> <p>Set <a href=../../reference/settings/#django_components.app_settings.ComponentsSettings.dirs><code>COMPONENTS.dirs</code></a> and/or <a href=../../reference/settings/#django_components.app_settings.ComponentsSettings.app_dirs><code>COMPONENTS.app_dirs</code></a> so django_components knows where to find component HTML, JS and CSS files:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django_components</span><span class=w> </span><span class=kn>import</span> <span class=n>ComponentsSettings</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span> <a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a><span class=n>COMPONENTS</span> <span class=o>=</span> <span class=n>ComponentsSettings</span><span class=p>(</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=n>dirs</span><span class=o>=</span><span class=p>[</span> <a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=n>dirs</span><span class=o>=</span><span class=p>[</span>
@ -42,7 +42,7 @@
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=o>...</span> <a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a> <span class=o>...</span>
<a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=s2>&quot;django_components.middleware.ComponentDependencyMiddleware&quot;</span><span class=p>,</span> <a id=__codelineno-6-3 name=__codelineno-6-3 href=#__codelineno-6-3></a> <span class=s2>&quot;django_components.middleware.ComponentDependencyMiddleware&quot;</span><span class=p>,</span>
<a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a><span class=p>]</span> <a id=__codelineno-6-4 name=__codelineno-6-4 href=#__codelineno-6-4></a><span class=p>]</span>
</code></pre></div> <p>Read more in <a href=../../concepts/advanced/rendering_js_css/ >Rendering JS/CSS dependencies</a>.</p> </li> <li> <p>Add django-component's URL paths to your <code>urlpatterns</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>include</span><span class=p>,</span> <span class=n>path</span> </code></pre></div> <p>Read more in <a href=../../concepts/advanced/rendering_js_css/ >Rendering JS/CSS dependencies</a>.</p> </li> <li> <p>Add django-component's URL paths to your <code>urlpatterns</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-7-1 name=__codelineno-7-1 href=#__codelineno-7-1></a><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>include</span><span class=p>,</span> <span class=n>path</span>
<a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a> <a id=__codelineno-7-2 name=__codelineno-7-2 href=#__codelineno-7-2></a>
<a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span> <a id=__codelineno-7-3 name=__codelineno-7-3 href=#__codelineno-7-3></a><span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a> <span class=o>...</span> <a id=__codelineno-7-4 name=__codelineno-7-4 href=#__codelineno-7-4></a> <span class=o>...</span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -8,7 +8,7 @@
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;pagination&quot;</span> <span class=o>/</span> <span class=cp>%}</span> <a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;pagination&quot;</span> <span class=o>/</span> <span class=cp>%}</span>
<a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span> <a id=__codelineno-1-4 name=__codelineno-1-4 href=#__codelineno-1-4></a><span class=x> </span><span class=cp>{%</span> <span class=k>endfill</span> <span class=cp>%}</span>
<a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=cp>{%</span> <span class=k>enddynamic</span> <span class=cp>%}</span> <a id=__codelineno-1-5 name=__codelineno-1-5 href=#__codelineno-1-5></a><span class=cp>{%</span> <span class=k>enddynamic</span> <span class=cp>%}</span>
</code></pre></div> <p>Python <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=kn>from</span> <span class=nn>django_components</span> <span class=kn>import</span> <span class=n>DynamicComponent</span> </code></pre></div> <p>Python <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-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>DynamicComponent</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a> <a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=n>DynamicComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span> <a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=n>DynamicComponent</span><span class=o>.</span><span class=n>render</span><span class=p>(</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span> <a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a> <span class=n>kwargs</span><span class=o>=</span><span class=p>{</span>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -551,6 +551,22 @@ def gen_reference_templatevars():
f.write(f"::: {ComponentVars.__module__}.{ComponentVars.__name__}.{field}\n\n") f.write(f"::: {ComponentVars.__module__}.{ComponentVars.__name__}.{field}\n\n")
# NOTE: Unlike other references, the API of Signals is not yet codified (AKA source of truth defined
# as Python code). Instead, we manually list all signals that are sent by django-components.
def gen_reference_signals():
"""
Generate documentation for all [Django Signals](https://docs.djangoproject.com/en/5.1/ref/signals) that are
send by or during the use of django-components.
"""
preface = "<!-- Autogenerated by reference.py -->\n\n"
preface += (root / "docs/templates/reference_signals.md").read_text()
out_file = root / "docs/reference/signals.md"
out_file.parent.mkdir(parents=True, exist_ok=True)
with out_file.open("w", encoding="utf-8") as f:
f.write(preface + "\n\n")
def _list_urls(urlpatterns: Sequence[Union[URLPattern, URLResolver]], prefix=""): def _list_urls(urlpatterns: Sequence[Union[URLPattern, URLResolver]], prefix=""):
"""Recursively extract all URLs and their associated views from Django's urlpatterns""" """Recursively extract all URLs and their associated views from Django's urlpatterns"""
urls: List[str] = [] urls: List[str] = []
@ -732,6 +748,7 @@ def gen_reference():
gen_reference_commands() gen_reference_commands()
gen_reference_templatetags() gen_reference_templatetags()
gen_reference_templatevars() gen_reference_templatevars()
gen_reference_signals()
# This is run when `gen-files` plugin is run in mkdocs.yml # This is run when `gen-files` plugin is run in mkdocs.yml

File diff suppressed because one or more lines are too long

View file

@ -2,210 +2,210 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/SUMMARY/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/SUMMARY/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/migrating_from_safer_staticfiles/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/migrating_from_safer_staticfiles/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/release_notes/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/release_notes/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/authoring_component_libraries/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/authoring_component_libraries/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/component_registry/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/component_registry/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/hooks/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/hooks/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/html_tragments/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/html_tragments/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/provide_inject/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/provide_inject/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/rendering_js_css/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/rendering_js_css/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/tag_formatter/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/tag_formatter/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/typing_and_validation/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/advanced/typing_and_validation/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/access_component_input/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/access_component_input/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/autodiscovery/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/autodiscovery/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/component_context_scope/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/component_context_scope/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/components_as_views/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/components_as_views/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/components_in_python/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/components_in_python/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/defining_js_css_html_files/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/defining_js_css_html_files/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/html_attributes/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/html_attributes/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/single_file_components/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/single_file_components/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/slots/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/slots/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/fundamentals/template_tag_syntax/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/adding_js_and_css/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/adding_js_and_css/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/adding_slots/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/adding_slots/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/components_in_templates/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/components_in_templates/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/parametrising_components/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/parametrising_components/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/your_first_component/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/concepts/getting_started/your_first_component/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/guides/devguides/dependency_mgmt/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/guides/devguides/dependency_mgmt/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/guides/devguides/slot_rendering/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/guides/devguides/slot_rendering/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/guides/devguides/slots_and_blocks/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/guides/devguides/slots_and_blocks/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/guides/setup/dev_server_setup/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/guides/setup/dev_server_setup/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/guides/setup/logging_and_debugging/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/guides/setup/logging_and_debugging/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/guides/setup/syntax_highlight/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/guides/setup/syntax_highlight/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/code_of_conduct/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/code_of_conduct/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/community/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/community/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/compatibility/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/compatibility/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/contributing/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/contributing/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/development/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/development/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/installation/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/installation/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/license/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/license/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/security_notes/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/security_notes/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/overview/welcome/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/overview/welcome/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/api/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/api/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/commands/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/commands/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/components/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/components/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/exceptions/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/exceptions/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/middlewares/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/middlewares/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/settings/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/settings/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/tag_formatters/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/tag_formatters/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/template_tags/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/template_tags/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/template_vars/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/template_vars/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
<url> <url>
<loc>https://emilstenstrom.github.io/django-components/latest/reference/urls/</loc> <loc>https://emilstenstrom.github.io/django-components/latest/reference/urls/</loc>
<lastmod>2025-01-01</lastmod> <lastmod>2025-01-07</lastmod>
</url> </url>
</urlset> </urlset>

Binary file not shown.

View file

@ -1,7 +1,7 @@
[ [
{ {
"version": "dev", "version": "dev",
"title": "dev (d94a459)", "title": "dev (1e4b556)",
"aliases": [] "aliases": []
}, },
{ {