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

Deployed 39cff5a to dev with MkDocs 1.5.3 and mike 2.0.0

Browse source
This commit is contained in:
github-actions 2024-08-25 10:55:02 +00:00
parent a020fe2630
commit aa0e8dbc39
9 changed files with 1410 additions and 1418 deletions
Download patch file Download diff file Expand all files Collapse all files

380
dev/CHANGELOG/index.html
View file

File diff suppressed because one or more lines are too long

720
dev/index.html
View file

File diff suppressed because one or more lines are too long

306
dev/reference/django_components/expression/index.html
View file

File diff suppressed because one or more lines are too long

676
dev/reference/django_components/index.html
View file

@ -1365,159 +1365,159 @@
</code></pre></div></p> <p>then, if <code>attrs</code> is: <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span><span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;text-red pa-4&quot;</span><span class=p>,</span> <span class=s2>&quot;@click&quot;</span><span class=p>:</span> <span class=s2>&quot;dispatch(&#39;my_event&#39;, 123)&quot;</span><span class=p>}</span> </code></pre></div></p> <p>then, if <code>attrs</code> is: <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=p>{</span><span class=s2>&quot;class&quot;</span><span class=p>:</span> <span class=s2>&quot;text-red pa-4&quot;</span><span class=p>,</span> <span class=s2>&quot;@click&quot;</span><span class=p>:</span> <span class=s2>&quot;dispatch(&#39;my_event&#39;, 123)&quot;</span><span class=p>}</span>
</code></pre></div></p> <p>and the component template is: <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=x>&lt;div </span><span class=cp>{%</span> <span class=k>html_attrs</span> <span class=nv>attrs</span> <span class=nv>add</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;extra-class&quot;</span> <span class=cp>%}</span><span class=x>&gt;&lt;/div&gt;</span> </code></pre></div></p> <p>and the component template is: <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=x>&lt;div </span><span class=cp>{%</span> <span class=k>html_attrs</span> <span class=nv>attrs</span> <span class=nv>add</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;extra-class&quot;</span> <span class=cp>%}</span><span class=x>&gt;&lt;/div&gt;</span>
</code></pre></div></p> <p>Then this renders: <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;text-red pa-4 extra-class&quot;</span> <span class=err>@</span><span class=na>click</span><span class=o>=</span><span class=s>&quot;dispatch(&#39;my_event&#39;, 123)&quot;</span> <span class=p>&gt;&lt;/</span><span class=nt>div</span><span class=p>&gt;</span> </code></pre></div></p> <p>Then this renders: <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&quot;text-red pa-4 extra-class&quot;</span> <span class=err>@</span><span class=na>click</span><span class=o>=</span><span class=s>&quot;dispatch(&#39;my_event&#39;, 123)&quot;</span> <span class=p>&gt;&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div></p> <p>However, this way it is difficult for the component user to define the <code>attrs</code> variable, especially if they want to combine static and dynamic values. Because they will need to pre-process the <code>attrs</code> dict.</p> <p>So, instead, we allow to "aggregate" props into a dict. So all props that start with <code>attrs:</code>, like <code>attrs:class="text-red"</code>, will be collected into a dict at key <code>attrs</code>.</p> <p>This provides sufficient flexiblity to make it easy for component users to provide "fallthrough attributes", and sufficiently easy for component authors to process that input while still being able to provide their own keys.</p> <details class=quote> <summary>Source code in <code>src/django_components/expression.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-137>137</a></span> </code></pre></div></p> <p>However, this way it is difficult for the component user to define the <code>attrs</code> variable, especially if they want to combine static and dynamic values. Because they will need to pre-process the <code>attrs</code> dict.</p> <p>So, instead, we allow to "aggregate" props into a dict. So all props that start with <code>attrs:</code>, like <code>attrs:class="text-red"</code>, will be collected into a dict at key <code>attrs</code>.</p> <p>This provides sufficient flexiblity to make it easy for component users to provide "fallthrough attributes", and sufficiently easy for component authors to process that input while still being able to provide their own keys.</p> <details class=quote> <summary>Source code in <code>src/django_components/expression.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-235>235</a></span>
<span class=normal><a href=#__codelineno-0-138>138</a></span> <span class=normal><a href=#__codelineno-0-236>236</a></span>
<span class=normal><a href=#__codelineno-0-139>139</a></span> <span class=normal><a href=#__codelineno-0-237>237</a></span>
<span class=normal><a href=#__codelineno-0-140>140</a></span> <span class=normal><a href=#__codelineno-0-238>238</a></span>
<span class=normal><a href=#__codelineno-0-141>141</a></span> <span class=normal><a href=#__codelineno-0-239>239</a></span>
<span class=normal><a href=#__codelineno-0-142>142</a></span> <span class=normal><a href=#__codelineno-0-240>240</a></span>
<span class=normal><a href=#__codelineno-0-143>143</a></span> <span class=normal><a href=#__codelineno-0-241>241</a></span>
<span class=normal><a href=#__codelineno-0-144>144</a></span> <span class=normal><a href=#__codelineno-0-242>242</a></span>
<span class=normal><a href=#__codelineno-0-145>145</a></span> <span class=normal><a href=#__codelineno-0-243>243</a></span>
<span class=normal><a href=#__codelineno-0-146>146</a></span> <span class=normal><a href=#__codelineno-0-244>244</a></span>
<span class=normal><a href=#__codelineno-0-147>147</a></span> <span class=normal><a href=#__codelineno-0-245>245</a></span>
<span class=normal><a href=#__codelineno-0-148>148</a></span> <span class=normal><a href=#__codelineno-0-246>246</a></span>
<span class=normal><a href=#__codelineno-0-149>149</a></span> <span class=normal><a href=#__codelineno-0-247>247</a></span>
<span class=normal><a href=#__codelineno-0-150>150</a></span> <span class=normal><a href=#__codelineno-0-248>248</a></span>
<span class=normal><a href=#__codelineno-0-151>151</a></span> <span class=normal><a href=#__codelineno-0-249>249</a></span>
<span class=normal><a href=#__codelineno-0-152>152</a></span> <span class=normal><a href=#__codelineno-0-250>250</a></span>
<span class=normal><a href=#__codelineno-0-153>153</a></span> <span class=normal><a href=#__codelineno-0-251>251</a></span>
<span class=normal><a href=#__codelineno-0-154>154</a></span> <span class=normal><a href=#__codelineno-0-252>252</a></span>
<span class=normal><a href=#__codelineno-0-155>155</a></span> <span class=normal><a href=#__codelineno-0-253>253</a></span>
<span class=normal><a href=#__codelineno-0-156>156</a></span> <span class=normal><a href=#__codelineno-0-254>254</a></span>
<span class=normal><a href=#__codelineno-0-157>157</a></span> <span class=normal><a href=#__codelineno-0-255>255</a></span>
<span class=normal><a href=#__codelineno-0-158>158</a></span> <span class=normal><a href=#__codelineno-0-256>256</a></span>
<span class=normal><a href=#__codelineno-0-159>159</a></span> <span class=normal><a href=#__codelineno-0-257>257</a></span>
<span class=normal><a href=#__codelineno-0-160>160</a></span> <span class=normal><a href=#__codelineno-0-258>258</a></span>
<span class=normal><a href=#__codelineno-0-161>161</a></span> <span class=normal><a href=#__codelineno-0-259>259</a></span>
<span class=normal><a href=#__codelineno-0-162>162</a></span> <span class=normal><a href=#__codelineno-0-260>260</a></span>
<span class=normal><a href=#__codelineno-0-163>163</a></span> <span class=normal><a href=#__codelineno-0-261>261</a></span>
<span class=normal><a href=#__codelineno-0-164>164</a></span> <span class=normal><a href=#__codelineno-0-262>262</a></span>
<span class=normal><a href=#__codelineno-0-165>165</a></span> <span class=normal><a href=#__codelineno-0-263>263</a></span>
<span class=normal><a href=#__codelineno-0-166>166</a></span> <span class=normal><a href=#__codelineno-0-264>264</a></span>
<span class=normal><a href=#__codelineno-0-167>167</a></span> <span class=normal><a href=#__codelineno-0-265>265</a></span>
<span class=normal><a href=#__codelineno-0-168>168</a></span> <span class=normal><a href=#__codelineno-0-266>266</a></span>
<span class=normal><a href=#__codelineno-0-169>169</a></span> <span class=normal><a href=#__codelineno-0-267>267</a></span>
<span class=normal><a href=#__codelineno-0-170>170</a></span> <span class=normal><a href=#__codelineno-0-268>268</a></span>
<span class=normal><a href=#__codelineno-0-171>171</a></span> <span class=normal><a href=#__codelineno-0-269>269</a></span>
<span class=normal><a href=#__codelineno-0-172>172</a></span> <span class=normal><a href=#__codelineno-0-270>270</a></span>
<span class=normal><a href=#__codelineno-0-173>173</a></span> <span class=normal><a href=#__codelineno-0-271>271</a></span>
<span class=normal><a href=#__codelineno-0-174>174</a></span> <span class=normal><a href=#__codelineno-0-272>272</a></span>
<span class=normal><a href=#__codelineno-0-175>175</a></span> <span class=normal><a href=#__codelineno-0-273>273</a></span>
<span class=normal><a href=#__codelineno-0-176>176</a></span> <span class=normal><a href=#__codelineno-0-274>274</a></span>
<span class=normal><a href=#__codelineno-0-177>177</a></span> <span class=normal><a href=#__codelineno-0-275>275</a></span>
<span class=normal><a href=#__codelineno-0-178>178</a></span> <span class=normal><a href=#__codelineno-0-276>276</a></span>
<span class=normal><a href=#__codelineno-0-179>179</a></span> <span class=normal><a href=#__codelineno-0-277>277</a></span>
<span class=normal><a href=#__codelineno-0-180>180</a></span> <span class=normal><a href=#__codelineno-0-278>278</a></span>
<span class=normal><a href=#__codelineno-0-181>181</a></span> <span class=normal><a href=#__codelineno-0-279>279</a></span>
<span class=normal><a href=#__codelineno-0-182>182</a></span> <span class=normal><a href=#__codelineno-0-280>280</a></span>
<span class=normal><a href=#__codelineno-0-183>183</a></span> <span class=normal><a href=#__codelineno-0-281>281</a></span>
<span class=normal><a href=#__codelineno-0-184>184</a></span> <span class=normal><a href=#__codelineno-0-282>282</a></span>
<span class=normal><a href=#__codelineno-0-185>185</a></span> <span class=normal><a href=#__codelineno-0-283>283</a></span>
<span class=normal><a href=#__codelineno-0-186>186</a></span> <span class=normal><a href=#__codelineno-0-284>284</a></span>
<span class=normal><a href=#__codelineno-0-187>187</a></span> <span class=normal><a href=#__codelineno-0-285>285</a></span>
<span class=normal><a href=#__codelineno-0-188>188</a></span> <span class=normal><a href=#__codelineno-0-286>286</a></span>
<span class=normal><a href=#__codelineno-0-189>189</a></span> <span class=normal><a href=#__codelineno-0-287>287</a></span>
<span class=normal><a href=#__codelineno-0-190>190</a></span> <span class=normal><a href=#__codelineno-0-288>288</a></span>
<span class=normal><a href=#__codelineno-0-191>191</a></span> <span class=normal><a href=#__codelineno-0-289>289</a></span>
<span class=normal><a href=#__codelineno-0-192>192</a></span> <span class=normal><a href=#__codelineno-0-290>290</a></span>
<span class=normal><a href=#__codelineno-0-193>193</a></span> <span class=normal><a href=#__codelineno-0-291>291</a></span>
<span class=normal><a href=#__codelineno-0-194>194</a></span> <span class=normal><a href=#__codelineno-0-292>292</a></span>
<span class=normal><a href=#__codelineno-0-195>195</a></span> <span class=normal><a href=#__codelineno-0-293>293</a></span>
<span class=normal><a href=#__codelineno-0-196>196</a></span> <span class=normal><a href=#__codelineno-0-294>294</a></span>
<span class=normal><a href=#__codelineno-0-197>197</a></span> <span class=normal><a href=#__codelineno-0-295>295</a></span>
<span class=normal><a href=#__codelineno-0-198>198</a></span> <span class=normal><a href=#__codelineno-0-296>296</a></span>
<span class=normal><a href=#__codelineno-0-199>199</a></span> <span class=normal><a href=#__codelineno-0-297>297</a></span>
<span class=normal><a href=#__codelineno-0-200>200</a></span> <span class=normal><a href=#__codelineno-0-298>298</a></span>
<span class=normal><a href=#__codelineno-0-201>201</a></span> <span class=normal><a href=#__codelineno-0-299>299</a></span>
<span class=normal><a href=#__codelineno-0-202>202</a></span> <span class=normal><a href=#__codelineno-0-300>300</a></span>
<span class=normal><a href=#__codelineno-0-203>203</a></span> <span class=normal><a href=#__codelineno-0-301>301</a></span>
<span class=normal><a href=#__codelineno-0-204>204</a></span> <span class=normal><a href=#__codelineno-0-302>302</a></span>
<span class=normal><a href=#__codelineno-0-205>205</a></span> <span class=normal><a href=#__codelineno-0-303>303</a></span>
<span class=normal><a href=#__codelineno-0-206>206</a></span> <span class=normal><a href=#__codelineno-0-304>304</a></span>
<span class=normal><a href=#__codelineno-0-207>207</a></span> <span class=normal><a href=#__codelineno-0-305>305</a></span>
<span class=normal><a href=#__codelineno-0-208>208</a></span> <span class=normal><a href=#__codelineno-0-306>306</a></span>
<span class=normal><a href=#__codelineno-0-209>209</a></span> <span class=normal><a href=#__codelineno-0-307>307</a></span>
<span class=normal><a href=#__codelineno-0-210>210</a></span> <span class=normal><a href=#__codelineno-0-308>308</a></span>
<span class=normal><a href=#__codelineno-0-211>211</a></span> <span class=normal><a href=#__codelineno-0-309>309</a></span>
<span class=normal><a href=#__codelineno-0-212>212</a></span> <span class=normal><a href=#__codelineno-0-310>310</a></span>
<span class=normal><a href=#__codelineno-0-213>213</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-137 name=__codelineno-0-137></a><span class=k>def</span> <span class=nf>process_aggregate_kwargs</span><span class=p>(</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Mapping</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>]:</span> <span class=normal><a href=#__codelineno-0-311>311</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-235 name=__codelineno-0-235></a><span class=k>def</span> <span class=nf>process_aggregate_kwargs</span><span class=p>(</span><span class=n>kwargs</span><span class=p>:</span> <span class=n>Mapping</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>])</span> <span class=o>-&gt;</span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>]:</span>
<a id=__codelineno-0-138 name=__codelineno-0-138></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span> <a id=__codelineno-0-236 name=__codelineno-0-236></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-139 name=__codelineno-0-139></a><span class=sd> This function aggregates &quot;prefixed&quot; kwargs into dicts. &quot;Prefixed&quot; kwargs</span> <a id=__codelineno-0-237 name=__codelineno-0-237></a><span class=sd> This function aggregates &quot;prefixed&quot; kwargs into dicts. &quot;Prefixed&quot; kwargs</span>
<a id=__codelineno-0-140 name=__codelineno-0-140></a><span class=sd> start with some prefix delimited with `:` (e.g. `attrs:`).</span> <a id=__codelineno-0-238 name=__codelineno-0-238></a><span class=sd> start with some prefix delimited with `:` (e.g. `attrs:`).</span>
<a id=__codelineno-0-141 name=__codelineno-0-141></a> <a id=__codelineno-0-239 name=__codelineno-0-239></a>
<a id=__codelineno-0-142 name=__codelineno-0-142></a><span class=sd> Example:</span> <a id=__codelineno-0-240 name=__codelineno-0-240></a><span class=sd> Example:</span>
<a id=__codelineno-0-143 name=__codelineno-0-143></a><span class=sd> ```py</span> <a id=__codelineno-0-241 name=__codelineno-0-241></a><span class=sd> ```py</span>
<a id=__codelineno-0-144 name=__codelineno-0-144></a><span class=sd> process_component_kwargs({&quot;abc:one&quot;: 1, &quot;abc:two&quot;: 2, &quot;def:three&quot;: 3, &quot;four&quot;: 4})</span> <a id=__codelineno-0-242 name=__codelineno-0-242></a><span class=sd> process_component_kwargs({&quot;abc:one&quot;: 1, &quot;abc:two&quot;: 2, &quot;def:three&quot;: 3, &quot;four&quot;: 4})</span>
<a id=__codelineno-0-145 name=__codelineno-0-145></a><span class=sd> # {&quot;abc&quot;: {&quot;one&quot;: 1, &quot;two&quot;: 2}, &quot;def&quot;: {&quot;three&quot;: 3}, &quot;four&quot;: 4}</span> <a id=__codelineno-0-243 name=__codelineno-0-243></a><span class=sd> # {&quot;abc&quot;: {&quot;one&quot;: 1, &quot;two&quot;: 2}, &quot;def&quot;: {&quot;three&quot;: 3}, &quot;four&quot;: 4}</span>
<a id=__codelineno-0-146 name=__codelineno-0-146></a><span class=sd> ```</span> <a id=__codelineno-0-244 name=__codelineno-0-244></a><span class=sd> ```</span>
<a id=__codelineno-0-147 name=__codelineno-0-147></a> <a id=__codelineno-0-245 name=__codelineno-0-245></a>
<a id=__codelineno-0-148 name=__codelineno-0-148></a><span class=sd> ---</span> <a id=__codelineno-0-246 name=__codelineno-0-246></a><span class=sd> ---</span>
<a id=__codelineno-0-149 name=__codelineno-0-149></a> <a id=__codelineno-0-247 name=__codelineno-0-247></a>
<a id=__codelineno-0-150 name=__codelineno-0-150></a><span class=sd> We want to support a use case similar to Vue&#39;s fallthrough attributes.</span> <a id=__codelineno-0-248 name=__codelineno-0-248></a><span class=sd> We want to support a use case similar to Vue&#39;s fallthrough attributes.</span>
<a id=__codelineno-0-151 name=__codelineno-0-151></a><span class=sd> In other words, where a component author can designate a prop (input)</span> <a id=__codelineno-0-249 name=__codelineno-0-249></a><span class=sd> In other words, where a component author can designate a prop (input)</span>
<a id=__codelineno-0-152 name=__codelineno-0-152></a><span class=sd> which is a dict and which will be rendered as HTML attributes.</span> <a id=__codelineno-0-250 name=__codelineno-0-250></a><span class=sd> which is a dict and which will be rendered as HTML attributes.</span>
<a id=__codelineno-0-153 name=__codelineno-0-153></a> <a id=__codelineno-0-251 name=__codelineno-0-251></a>
<a id=__codelineno-0-154 name=__codelineno-0-154></a><span class=sd> This is useful for allowing component users to tweak styling or add</span> <a id=__codelineno-0-252 name=__codelineno-0-252></a><span class=sd> This is useful for allowing component users to tweak styling or add</span>
<a id=__codelineno-0-155 name=__codelineno-0-155></a><span class=sd> event handling to the underlying HTML. E.g.:</span> <a id=__codelineno-0-253 name=__codelineno-0-253></a><span class=sd> event handling to the underlying HTML. E.g.:</span>
<a id=__codelineno-0-156 name=__codelineno-0-156></a> <a id=__codelineno-0-254 name=__codelineno-0-254></a>
<a id=__codelineno-0-157 name=__codelineno-0-157></a><span class=sd> `class=&quot;pa-4 d-flex text-black&quot;` or `@click.stop=&quot;alert(&#39;clicked!&#39;)&quot;`</span> <a id=__codelineno-0-255 name=__codelineno-0-255></a><span class=sd> `class=&quot;pa-4 d-flex text-black&quot;` or `@click.stop=&quot;alert(&#39;clicked!&#39;)&quot;`</span>
<a id=__codelineno-0-158 name=__codelineno-0-158></a> <a id=__codelineno-0-256 name=__codelineno-0-256></a>
<a id=__codelineno-0-159 name=__codelineno-0-159></a><span class=sd> So if the prop is `attrs`, and the component is called like so:</span> <a id=__codelineno-0-257 name=__codelineno-0-257></a><span class=sd> So if the prop is `attrs`, and the component is called like so:</span>
<a id=__codelineno-0-160 name=__codelineno-0-160></a><span class=sd> ```django</span> <a id=__codelineno-0-258 name=__codelineno-0-258></a><span class=sd> ```django</span>
<a id=__codelineno-0-161 name=__codelineno-0-161></a><span class=sd> {% component &quot;my_comp&quot; attrs=attrs %}</span> <a id=__codelineno-0-259 name=__codelineno-0-259></a><span class=sd> {% component &quot;my_comp&quot; attrs=attrs %}</span>
<a id=__codelineno-0-162 name=__codelineno-0-162></a><span class=sd> ```</span> <a id=__codelineno-0-260 name=__codelineno-0-260></a><span class=sd> ```</span>
<a id=__codelineno-0-163 name=__codelineno-0-163></a> <a id=__codelineno-0-261 name=__codelineno-0-261></a>
<a id=__codelineno-0-164 name=__codelineno-0-164></a><span class=sd> then, if `attrs` is:</span> <a id=__codelineno-0-262 name=__codelineno-0-262></a><span class=sd> then, if `attrs` is:</span>
<a id=__codelineno-0-165 name=__codelineno-0-165></a><span class=sd> ```py</span> <a id=__codelineno-0-263 name=__codelineno-0-263></a><span class=sd> ```py</span>
<a id=__codelineno-0-166 name=__codelineno-0-166></a><span class=sd> {&quot;class&quot;: &quot;text-red pa-4&quot;, &quot;@click&quot;: &quot;dispatch(&#39;my_event&#39;, 123)&quot;}</span> <a id=__codelineno-0-264 name=__codelineno-0-264></a><span class=sd> {&quot;class&quot;: &quot;text-red pa-4&quot;, &quot;@click&quot;: &quot;dispatch(&#39;my_event&#39;, 123)&quot;}</span>
<a id=__codelineno-0-167 name=__codelineno-0-167></a><span class=sd> ```</span> <a id=__codelineno-0-265 name=__codelineno-0-265></a><span class=sd> ```</span>
<a id=__codelineno-0-168 name=__codelineno-0-168></a> <a id=__codelineno-0-266 name=__codelineno-0-266></a>
<a id=__codelineno-0-169 name=__codelineno-0-169></a><span class=sd> and the component template is:</span> <a id=__codelineno-0-267 name=__codelineno-0-267></a><span class=sd> and the component template is:</span>
<a id=__codelineno-0-170 name=__codelineno-0-170></a><span class=sd> ```django</span> <a id=__codelineno-0-268 name=__codelineno-0-268></a><span class=sd> ```django</span>
<a id=__codelineno-0-171 name=__codelineno-0-171></a><span class=sd> &lt;div {% html_attrs attrs add:class=&quot;extra-class&quot; %}&gt;&lt;/div&gt;</span> <a id=__codelineno-0-269 name=__codelineno-0-269></a><span class=sd> &lt;div {% html_attrs attrs add:class=&quot;extra-class&quot; %}&gt;&lt;/div&gt;</span>
<a id=__codelineno-0-172 name=__codelineno-0-172></a><span class=sd> ```</span> <a id=__codelineno-0-270 name=__codelineno-0-270></a><span class=sd> ```</span>
<a id=__codelineno-0-173 name=__codelineno-0-173></a> <a id=__codelineno-0-271 name=__codelineno-0-271></a>
<a id=__codelineno-0-174 name=__codelineno-0-174></a><span class=sd> Then this renders:</span> <a id=__codelineno-0-272 name=__codelineno-0-272></a><span class=sd> Then this renders:</span>
<a id=__codelineno-0-175 name=__codelineno-0-175></a><span class=sd> ```html</span> <a id=__codelineno-0-273 name=__codelineno-0-273></a><span class=sd> ```html</span>
<a id=__codelineno-0-176 name=__codelineno-0-176></a><span class=sd> &lt;div class=&quot;text-red pa-4 extra-class&quot; @click=&quot;dispatch(&#39;my_event&#39;, 123)&quot; &gt;&lt;/div&gt;</span> <a id=__codelineno-0-274 name=__codelineno-0-274></a><span class=sd> &lt;div class=&quot;text-red pa-4 extra-class&quot; @click=&quot;dispatch(&#39;my_event&#39;, 123)&quot; &gt;&lt;/div&gt;</span>
<a id=__codelineno-0-177 name=__codelineno-0-177></a><span class=sd> ```</span> <a id=__codelineno-0-275 name=__codelineno-0-275></a><span class=sd> ```</span>
<a id=__codelineno-0-178 name=__codelineno-0-178></a> <a id=__codelineno-0-276 name=__codelineno-0-276></a>
<a id=__codelineno-0-179 name=__codelineno-0-179></a><span class=sd> However, this way it is difficult for the component user to define the `attrs`</span> <a id=__codelineno-0-277 name=__codelineno-0-277></a><span class=sd> However, this way it is difficult for the component user to define the `attrs`</span>
<a id=__codelineno-0-180 name=__codelineno-0-180></a><span class=sd> variable, especially if they want to combine static and dynamic values. Because</span> <a id=__codelineno-0-278 name=__codelineno-0-278></a><span class=sd> variable, especially if they want to combine static and dynamic values. Because</span>
<a id=__codelineno-0-181 name=__codelineno-0-181></a><span class=sd> they will need to pre-process the `attrs` dict.</span> <a id=__codelineno-0-279 name=__codelineno-0-279></a><span class=sd> they will need to pre-process the `attrs` dict.</span>
<a id=__codelineno-0-182 name=__codelineno-0-182></a> <a id=__codelineno-0-280 name=__codelineno-0-280></a>
<a id=__codelineno-0-183 name=__codelineno-0-183></a><span class=sd> So, instead, we allow to &quot;aggregate&quot; props into a dict. So all props that start</span> <a id=__codelineno-0-281 name=__codelineno-0-281></a><span class=sd> So, instead, we allow to &quot;aggregate&quot; props into a dict. So all props that start</span>
<a id=__codelineno-0-184 name=__codelineno-0-184></a><span class=sd> with `attrs:`, like `attrs:class=&quot;text-red&quot;`, will be collected into a dict</span> <a id=__codelineno-0-282 name=__codelineno-0-282></a><span class=sd> with `attrs:`, like `attrs:class=&quot;text-red&quot;`, will be collected into a dict</span>
<a id=__codelineno-0-185 name=__codelineno-0-185></a><span class=sd> at key `attrs`.</span> <a id=__codelineno-0-283 name=__codelineno-0-283></a><span class=sd> at key `attrs`.</span>
<a id=__codelineno-0-186 name=__codelineno-0-186></a> <a id=__codelineno-0-284 name=__codelineno-0-284></a>
<a id=__codelineno-0-187 name=__codelineno-0-187></a><span class=sd> This provides sufficient flexiblity to make it easy for component users to provide</span> <a id=__codelineno-0-285 name=__codelineno-0-285></a><span class=sd> This provides sufficient flexiblity to make it easy for component users to provide</span>
<a id=__codelineno-0-188 name=__codelineno-0-188></a><span class=sd> &quot;fallthrough attributes&quot;, and sufficiently easy for component authors to process</span> <a id=__codelineno-0-286 name=__codelineno-0-286></a><span class=sd> &quot;fallthrough attributes&quot;, and sufficiently easy for component authors to process</span>
<a id=__codelineno-0-189 name=__codelineno-0-189></a><span class=sd> that input while still being able to provide their own keys.</span> <a id=__codelineno-0-287 name=__codelineno-0-287></a><span class=sd> that input while still being able to provide their own keys.</span>
<a id=__codelineno-0-190 name=__codelineno-0-190></a><span class=sd> &quot;&quot;&quot;</span> <a id=__codelineno-0-288 name=__codelineno-0-288></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-191 name=__codelineno-0-191></a> <span class=n>processed_kwargs</span> <span class=o>=</span> <span class=p>{}</span> <a id=__codelineno-0-289 name=__codelineno-0-289></a> <span class=n>processed_kwargs</span> <span class=o>=</span> <span class=p>{}</span>
<a id=__codelineno-0-192 name=__codelineno-0-192></a> <span class=n>nested_kwargs</span><span class=p>:</span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>]]</span> <span class=o>=</span> <span class=p>{}</span> <a id=__codelineno-0-290 name=__codelineno-0-290></a> <span class=n>nested_kwargs</span><span class=p>:</span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Dict</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>]]</span> <span class=o>=</span> <span class=p>{}</span>
<a id=__codelineno-0-193 name=__codelineno-0-193></a> <span class=k>for</span> <span class=n>key</span><span class=p>,</span> <span class=n>val</span> <span class=ow>in</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>items</span><span class=p>():</span> <a id=__codelineno-0-291 name=__codelineno-0-291></a> <span class=k>for</span> <span class=n>key</span><span class=p>,</span> <span class=n>val</span> <span class=ow>in</span> <span class=n>kwargs</span><span class=o>.</span><span class=n>items</span><span class=p>():</span>
<a id=__codelineno-0-194 name=__codelineno-0-194></a> <span class=k>if</span> <span class=ow>not</span> <span class=n>is_aggregate_key</span><span class=p>(</span><span class=n>key</span><span class=p>):</span> <a id=__codelineno-0-292 name=__codelineno-0-292></a> <span class=k>if</span> <span class=ow>not</span> <span class=n>is_aggregate_key</span><span class=p>(</span><span class=n>key</span><span class=p>):</span>
<a id=__codelineno-0-195 name=__codelineno-0-195></a> <span class=n>processed_kwargs</span><span class=p>[</span><span class=n>key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span> <a id=__codelineno-0-293 name=__codelineno-0-293></a> <span class=n>processed_kwargs</span><span class=p>[</span><span class=n>key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span>
<a id=__codelineno-0-196 name=__codelineno-0-196></a> <span class=k>continue</span> <a id=__codelineno-0-294 name=__codelineno-0-294></a> <span class=k>continue</span>
<a id=__codelineno-0-197 name=__codelineno-0-197></a> <a id=__codelineno-0-295 name=__codelineno-0-295></a>
<a id=__codelineno-0-198 name=__codelineno-0-198></a> <span class=c1># NOTE: Trim off the prefix from keys</span> <a id=__codelineno-0-296 name=__codelineno-0-296></a> <span class=c1># NOTE: Trim off the prefix from keys</span>
<a id=__codelineno-0-199 name=__codelineno-0-199></a> <span class=n>prefix</span><span class=p>,</span> <span class=n>sub_key</span> <span class=o>=</span> <span class=n>key</span><span class=o>.</span><span class=n>split</span><span class=p>(</span><span class=s2>&quot;:&quot;</span><span class=p>,</span> <span class=mi>1</span><span class=p>)</span> <a id=__codelineno-0-297 name=__codelineno-0-297></a> <span class=n>prefix</span><span class=p>,</span> <span class=n>sub_key</span> <span class=o>=</span> <span class=n>key</span><span class=o>.</span><span class=n>split</span><span class=p>(</span><span class=s2>&quot;:&quot;</span><span class=p>,</span> <span class=mi>1</span><span class=p>)</span>
<a id=__codelineno-0-200 name=__codelineno-0-200></a> <span class=k>if</span> <span class=n>prefix</span> <span class=ow>not</span> <span class=ow>in</span> <span class=n>nested_kwargs</span><span class=p>:</span> <a id=__codelineno-0-298 name=__codelineno-0-298></a> <span class=k>if</span> <span class=n>prefix</span> <span class=ow>not</span> <span class=ow>in</span> <span class=n>nested_kwargs</span><span class=p>:</span>
<a id=__codelineno-0-201 name=__codelineno-0-201></a> <span class=n>nested_kwargs</span><span class=p>[</span><span class=n>prefix</span><span class=p>]</span> <span class=o>=</span> <span class=p>{}</span> <a id=__codelineno-0-299 name=__codelineno-0-299></a> <span class=n>nested_kwargs</span><span class=p>[</span><span class=n>prefix</span><span class=p>]</span> <span class=o>=</span> <span class=p>{}</span>
<a id=__codelineno-0-202 name=__codelineno-0-202></a> <span class=n>nested_kwargs</span><span class=p>[</span><span class=n>prefix</span><span class=p>][</span><span class=n>sub_key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span> <a id=__codelineno-0-300 name=__codelineno-0-300></a> <span class=n>nested_kwargs</span><span class=p>[</span><span class=n>prefix</span><span class=p>][</span><span class=n>sub_key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span>
<a id=__codelineno-0-203 name=__codelineno-0-203></a> <a id=__codelineno-0-301 name=__codelineno-0-301></a>
<a id=__codelineno-0-204 name=__codelineno-0-204></a> <span class=c1># Assign aggregated values into normal input</span> <a id=__codelineno-0-302 name=__codelineno-0-302></a> <span class=c1># Assign aggregated values into normal input</span>
<a id=__codelineno-0-205 name=__codelineno-0-205></a> <span class=k>for</span> <span class=n>key</span><span class=p>,</span> <span class=n>val</span> <span class=ow>in</span> <span class=n>nested_kwargs</span><span class=o>.</span><span class=n>items</span><span class=p>():</span> <a id=__codelineno-0-303 name=__codelineno-0-303></a> <span class=k>for</span> <span class=n>key</span><span class=p>,</span> <span class=n>val</span> <span class=ow>in</span> <span class=n>nested_kwargs</span><span class=o>.</span><span class=n>items</span><span class=p>():</span>
<a id=__codelineno-0-206 name=__codelineno-0-206></a> <span class=k>if</span> <span class=n>key</span> <span class=ow>in</span> <span class=n>processed_kwargs</span><span class=p>:</span> <a id=__codelineno-0-304 name=__codelineno-0-304></a> <span class=k>if</span> <span class=n>key</span> <span class=ow>in</span> <span class=n>processed_kwargs</span><span class=p>:</span>
<a id=__codelineno-0-207 name=__codelineno-0-207></a> <span class=k>raise</span> <span class=n>TemplateSyntaxError</span><span class=p>(</span> <a id=__codelineno-0-305 name=__codelineno-0-305></a> <span class=k>raise</span> <span class=n>TemplateSyntaxError</span><span class=p>(</span>
<a id=__codelineno-0-208 name=__codelineno-0-208></a> <span class=sa>f</span><span class=s2>&quot;Received argument &#39;</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>&#39; both as a regular input (</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>=...)&quot;</span> <a id=__codelineno-0-306 name=__codelineno-0-306></a> <span class=sa>f</span><span class=s2>&quot;Received argument &#39;</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>&#39; both as a regular input (</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>=...)&quot;</span>
<a id=__codelineno-0-209 name=__codelineno-0-209></a> <span class=sa>f</span><span class=s2>&quot; and as an aggregate dict (&#39;</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>:key=...&#39;). Must be only one of the two&quot;</span> <a id=__codelineno-0-307 name=__codelineno-0-307></a> <span class=sa>f</span><span class=s2>&quot; and as an aggregate dict (&#39;</span><span class=si>{</span><span class=n>key</span><span class=si>}</span><span class=s2>:key=...&#39;). Must be only one of the two&quot;</span>
<a id=__codelineno-0-210 name=__codelineno-0-210></a> <span class=p>)</span> <a id=__codelineno-0-308 name=__codelineno-0-308></a> <span class=p>)</span>
<a id=__codelineno-0-211 name=__codelineno-0-211></a> <span class=n>processed_kwargs</span><span class=p>[</span><span class=n>key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span> <a id=__codelineno-0-309 name=__codelineno-0-309></a> <span class=n>processed_kwargs</span><span class=p>[</span><span class=n>key</span><span class=p>]</span> <span class=o>=</span> <span class=n>val</span>
<a id=__codelineno-0-212 name=__codelineno-0-212></a> <a id=__codelineno-0-310 name=__codelineno-0-310></a>
<a id=__codelineno-0-213 name=__codelineno-0-213></a> <span class=k>return</span> <span class=n>processed_kwargs</span> <a id=__codelineno-0-311 name=__codelineno-0-311></a> <span class=k>return</span> <span class=n>processed_kwargs</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> </div> </div> </div> <div class="doc doc-object doc-module"> <h2 id=django_components.library class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">library</span> <a href=#django_components.library class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents "> <p>Module for interfacing with Django's Library (<code>django.template.library</code>)</p> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.library.PROTECTED_TAGS class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">PROTECTED_TAGS</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.library.PROTECTED_TAGS class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>PROTECTED_TAGS</span> <span class=o>=</span> <span class=p>[</span> </code></pre></div></td></tr></table></div> </details> </div> </div> </div> </div> </div> <div class="doc doc-object doc-module"> <h2 id=django_components.library class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">library</span> <a href=#django_components.library class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents "> <p>Module for interfacing with Django's Library (<code>django.template.library</code>)</p> <div class="doc doc-children"> <div class="doc doc-object doc-attribute"> <h3 id=django_components.library.PROTECTED_TAGS class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-attribute"></code> <span class="doc doc-object-name doc-attribute-name">PROTECTED_TAGS</span> <span class="doc doc-labels"> <small class="doc doc-label doc-label-module-attribute"><code>module-attribute</code></small> </span> <a href=#django_components.library.PROTECTED_TAGS class=headerlink title="Permanent link">¤</a></h3> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>PROTECTED_TAGS</span> <span class=o>=</span> <span class=p>[</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=s2>&quot;component_dependencies&quot;</span><span class=p>,</span> <a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a> <span class=s2>&quot;component_dependencies&quot;</span><span class=p>,</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=s2>&quot;component_css_dependencies&quot;</span><span class=p>,</span> <a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a> <span class=s2>&quot;component_css_dependencies&quot;</span><span class=p>,</span>
@ -2717,8 +2717,7 @@
<a id=__codelineno-0-151 name=__codelineno-0-151></a> <span class=k>del</span> <span class=n>bits</span><span class=p>[:</span><span class=mi>1</span><span class=p>]</span> <a id=__codelineno-0-151 name=__codelineno-0-151></a> <span class=k>del</span> <span class=n>bits</span><span class=p>[:</span><span class=mi>1</span><span class=p>]</span>
<a id=__codelineno-0-152 name=__codelineno-0-152></a> <span class=k>return</span> <span class=n>kwargs</span> <a id=__codelineno-0-152 name=__codelineno-0-152></a> <span class=k>return</span> <span class=n>kwargs</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> </div> </div> </div> <div class="doc doc-object doc-module"> <h2 id=django_components.templatetags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">templatetags</span> <a href=#django_components.templatetags class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents "> <div class="doc doc-children"> <div class="doc doc-object doc-module"> <h3 id=django_components.templatetags.component_tags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">component_tags</span> <a href=#django_components.templatetags.component_tags class=headerlink title="Permanent link">¤</a></h3> <div class="doc doc-contents "> <div class="doc doc-children"> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">component</span> <a href=#django_components.templatetags.component_tags.component class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>,</span> <span class=n>tag_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.component.ComponentNode href=component/#django_components.component.ComponentNode>ComponentNode</a></span> </code></pre></div></td></tr></table></div> </details> </div> </div> </div> </div> </div> <div class="doc doc-object doc-module"> <h2 id=django_components.templatetags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">templatetags</span> <a href=#django_components.templatetags class=headerlink title="Permanent link">¤</a></h2> <div class="doc doc-contents "> <div class="doc doc-children"> <div class="doc doc-object doc-module"> <h3 id=django_components.templatetags.component_tags class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-module"></code> <span class="doc doc-object-name doc-module-name">component_tags</span> <a href=#django_components.templatetags.component_tags class=headerlink title="Permanent link">¤</a></h3> <div class="doc doc-contents "> <div class="doc doc-children"> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.component class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">component</span> <a href=#django_components.templatetags.component_tags.component class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>,</span> <span class=n>tag_name</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.component.ComponentNode href=component/#django_components.component.ComponentNode>ComponentNode</a></span>
</code></pre></div> <div class="doc doc-contents "> <details class=to-give-the-component-access-to-the-template-context open> <summary>To give the component access to the template context</summary> <p><code class=highlight><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;name&quot;</span> <span class=nv>positional_arg</span> <span class=nv>keyword_arg</span><span class=o>=</span><span class=nv>value</span> <span class=p>...</span> <span class=cp>%}</span></code></p> </details> <details class=to-render-the-component-in-an-isolated-context open> <summary>To render the component in an isolated context</summary> <p><code class=highlight><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;name&quot;</span> <span class=nv>positional_arg</span> <span class=nv>keyword_arg</span><span class=o>=</span><span class=nv>value</span> <span class=p>...</span> <span class=nv>only</span> <span class=cp>%}</span></code></p> </details> <p>Positional and keyword arguments can be literals or template variables. The component name must be a single- or double-quotes string and must be either the first positional argument or, if there are no positional arguments, passed as 'name'.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-200>200</a></span> </code></pre></div> <div class="doc doc-contents "> <details class=to-give-the-component-access-to-the-template-context open> <summary>To give the component access to the template context</summary> <p><code class=highlight><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;name&quot;</span> <span class=nv>positional_arg</span> <span class=nv>keyword_arg</span><span class=o>=</span><span class=nv>value</span> <span class=p>...</span> <span class=cp>%}</span></code></p> </details> <details class=to-render-the-component-in-an-isolated-context open> <summary>To render the component in an isolated context</summary> <p><code class=highlight><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;name&quot;</span> <span class=nv>positional_arg</span> <span class=nv>keyword_arg</span><span class=o>=</span><span class=nv>value</span> <span class=p>...</span> <span class=nv>only</span> <span class=cp>%}</span></code></p> </details> <p>Positional and keyword arguments can be literals or template variables. The component name must be a single- or double-quotes string and must be either the first positional argument or, if there are no positional arguments, passed as 'name'.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-201>201</a></span>
<span class=normal><a href=#__codelineno-0-201>201</a></span>
<span class=normal><a href=#__codelineno-0-202>202</a></span> <span class=normal><a href=#__codelineno-0-202>202</a></span>
<span class=normal><a href=#__codelineno-0-203>203</a></span> <span class=normal><a href=#__codelineno-0-203>203</a></span>
<span class=normal><a href=#__codelineno-0-204>204</a></span> <span class=normal><a href=#__codelineno-0-204>204</a></span>
@ -2774,69 +2773,71 @@
<span class=normal><a href=#__codelineno-0-254>254</a></span> <span class=normal><a href=#__codelineno-0-254>254</a></span>
<span class=normal><a href=#__codelineno-0-255>255</a></span> <span class=normal><a href=#__codelineno-0-255>255</a></span>
<span class=normal><a href=#__codelineno-0-256>256</a></span> <span class=normal><a href=#__codelineno-0-256>256</a></span>
<span class=normal><a href=#__codelineno-0-257>257</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-200 name=__codelineno-0-200></a><span class=k>def</span> <span class=nf>component</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n>Parser</span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n>Token</span><span class=p>,</span> <span class=n>tag_name</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>ComponentNode</span><span class=p>:</span> <span class=normal><a href=#__codelineno-0-257>257</a></span>
<a id=__codelineno-0-201 name=__codelineno-0-201></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span> <span class=normal><a href=#__codelineno-0-258>258</a></span>
<a id=__codelineno-0-202 name=__codelineno-0-202></a><span class=sd> To give the component access to the template context:</span> <span class=normal><a href=#__codelineno-0-259>259</a></span>
<a id=__codelineno-0-203 name=__codelineno-0-203></a><span class=sd> ```#!htmldjango {% component &quot;name&quot; positional_arg keyword_arg=value ... %}```</span> <span class=normal><a href=#__codelineno-0-260>260</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-201 name=__codelineno-0-201></a><span class=k>def</span> <span class=nf>component</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n>Parser</span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n>Token</span><span class=p>,</span> <span class=n>tag_name</span><span class=p>:</span> <span class=nb>str</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>ComponentNode</span><span class=p>:</span>
<a id=__codelineno-0-204 name=__codelineno-0-204></a> <a id=__codelineno-0-202 name=__codelineno-0-202></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-205 name=__codelineno-0-205></a><span class=sd> To render the component in an isolated context:</span> <a id=__codelineno-0-203 name=__codelineno-0-203></a><span class=sd> To give the component access to the template context:</span>
<a id=__codelineno-0-206 name=__codelineno-0-206></a><span class=sd> ```#!htmldjango {% component &quot;name&quot; positional_arg keyword_arg=value ... only %}```</span> <a id=__codelineno-0-204 name=__codelineno-0-204></a><span class=sd> ```#!htmldjango {% component &quot;name&quot; positional_arg keyword_arg=value ... %}```</span>
<a id=__codelineno-0-207 name=__codelineno-0-207></a> <a id=__codelineno-0-205 name=__codelineno-0-205></a>
<a id=__codelineno-0-208 name=__codelineno-0-208></a><span class=sd> Positional and keyword arguments can be literals or template variables.</span> <a id=__codelineno-0-206 name=__codelineno-0-206></a><span class=sd> To render the component in an isolated context:</span>
<a id=__codelineno-0-209 name=__codelineno-0-209></a><span class=sd> The component name must be a single- or double-quotes string and must</span> <a id=__codelineno-0-207 name=__codelineno-0-207></a><span class=sd> ```#!htmldjango {% component &quot;name&quot; positional_arg keyword_arg=value ... only %}```</span>
<a id=__codelineno-0-210 name=__codelineno-0-210></a><span class=sd> be either the first positional argument or, if there are no positional</span> <a id=__codelineno-0-208 name=__codelineno-0-208></a>
<a id=__codelineno-0-211 name=__codelineno-0-211></a><span class=sd> arguments, passed as &#39;name&#39;.</span> <a id=__codelineno-0-209 name=__codelineno-0-209></a><span class=sd> Positional and keyword arguments can be literals or template variables.</span>
<a id=__codelineno-0-212 name=__codelineno-0-212></a><span class=sd> &quot;&quot;&quot;</span> <a id=__codelineno-0-210 name=__codelineno-0-210></a><span class=sd> The component name must be a single- or double-quotes string and must</span>
<a id=__codelineno-0-213 name=__codelineno-0-213></a> <span class=n>bits</span> <span class=o>=</span> <span class=n>token</span><span class=o>.</span><span class=n>split_contents</span><span class=p>()</span> <a id=__codelineno-0-211 name=__codelineno-0-211></a><span class=sd> be either the first positional argument or, if there are no positional</span>
<a id=__codelineno-0-214 name=__codelineno-0-214></a> <a id=__codelineno-0-212 name=__codelineno-0-212></a><span class=sd> arguments, passed as &#39;name&#39;.</span>
<a id=__codelineno-0-215 name=__codelineno-0-215></a> <span class=c1># Let the TagFormatter pre-process the tokens</span> <a id=__codelineno-0-213 name=__codelineno-0-213></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-216 name=__codelineno-0-216></a> <span class=n>formatter</span> <span class=o>=</span> <span class=n>get_tag_formatter</span><span class=p>()</span> <a id=__codelineno-0-214 name=__codelineno-0-214></a> <span class=n>_fix_nested_tags</span><span class=p>(</span><span class=n>parser</span><span class=p>,</span> <span class=n>token</span><span class=p>)</span>
<a id=__codelineno-0-217 name=__codelineno-0-217></a> <span class=n>result</span> <span class=o>=</span> <span class=n>formatter</span><span class=o>.</span><span class=n>parse</span><span class=p>([</span><span class=o>*</span><span class=n>bits</span><span class=p>])</span> <a id=__codelineno-0-215 name=__codelineno-0-215></a> <span class=n>bits</span> <span class=o>=</span> <span class=n>token</span><span class=o>.</span><span class=n>split_contents</span><span class=p>()</span>
<a id=__codelineno-0-218 name=__codelineno-0-218></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=n>formatter</span><span class=o>.</span><span class=n>end_tag</span><span class=p>(</span><span class=n>result</span><span class=o>.</span><span class=n>component_name</span><span class=p>)</span> <a id=__codelineno-0-216 name=__codelineno-0-216></a>
<a id=__codelineno-0-219 name=__codelineno-0-219></a> <a id=__codelineno-0-217 name=__codelineno-0-217></a> <span class=c1># Let the TagFormatter pre-process the tokens</span>
<a id=__codelineno-0-220 name=__codelineno-0-220></a> <span class=c1># NOTE: The tokens returned from TagFormatter.parse do NOT include the tag itself</span> <a id=__codelineno-0-218 name=__codelineno-0-218></a> <span class=n>formatter</span> <span class=o>=</span> <span class=n>get_tag_formatter</span><span class=p>()</span>
<a id=__codelineno-0-221 name=__codelineno-0-221></a> <span class=n>bits</span> <span class=o>=</span> <span class=p>[</span><span class=n>bits</span><span class=p>[</span><span class=mi>0</span><span class=p>],</span> <span class=o>*</span><span class=n>result</span><span class=o>.</span><span class=n>tokens</span><span class=p>]</span> <a id=__codelineno-0-219 name=__codelineno-0-219></a> <span class=n>result</span> <span class=o>=</span> <span class=n>formatter</span><span class=o>.</span><span class=n>parse</span><span class=p>([</span><span class=o>*</span><span class=n>bits</span><span class=p>])</span>
<a id=__codelineno-0-222 name=__codelineno-0-222></a> <a id=__codelineno-0-220 name=__codelineno-0-220></a> <span class=n>end_tag</span> <span class=o>=</span> <span class=n>formatter</span><span class=o>.</span><span class=n>end_tag</span><span class=p>(</span><span class=n>result</span><span class=o>.</span><span class=n>component_name</span><span class=p>)</span>
<a id=__codelineno-0-223 name=__codelineno-0-223></a> <span class=n>tag</span> <span class=o>=</span> <span class=n>_parse_tag</span><span class=p>(</span> <a id=__codelineno-0-221 name=__codelineno-0-221></a>
<a id=__codelineno-0-224 name=__codelineno-0-224></a> <span class=n>tag_name</span><span class=p>,</span> <a id=__codelineno-0-222 name=__codelineno-0-222></a> <span class=c1># NOTE: The tokens returned from TagFormatter.parse do NOT include the tag itself</span>
<a id=__codelineno-0-225 name=__codelineno-0-225></a> <span class=n>parser</span><span class=p>,</span> <a id=__codelineno-0-223 name=__codelineno-0-223></a> <span class=n>bits</span> <span class=o>=</span> <span class=p>[</span><span class=n>bits</span><span class=p>[</span><span class=mi>0</span><span class=p>],</span> <span class=o>*</span><span class=n>result</span><span class=o>.</span><span class=n>tokens</span><span class=p>]</span>
<a id=__codelineno-0-226 name=__codelineno-0-226></a> <span class=n>bits</span><span class=p>,</span> <a id=__codelineno-0-224 name=__codelineno-0-224></a> <span class=n>token</span><span class=o>.</span><span class=n>contents</span> <span class=o>=</span> <span class=s2>&quot; &quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>bits</span><span class=p>)</span>
<a id=__codelineno-0-227 name=__codelineno-0-227></a> <span class=n>params</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span> <span class=c1># Allow many args</span> <a id=__codelineno-0-225 name=__codelineno-0-225></a>
<a id=__codelineno-0-228 name=__codelineno-0-228></a> <span class=n>flags</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;only&quot;</span><span class=p>],</span> <a id=__codelineno-0-226 name=__codelineno-0-226></a> <span class=n>tag</span> <span class=o>=</span> <span class=n>_parse_tag</span><span class=p>(</span>
<a id=__codelineno-0-229 name=__codelineno-0-229></a> <span class=n>keywordonly_kwargs</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span> <a id=__codelineno-0-227 name=__codelineno-0-227></a> <span class=n>tag_name</span><span class=p>,</span>
<a id=__codelineno-0-230 name=__codelineno-0-230></a> <span class=n>repeatable_kwargs</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span> <a id=__codelineno-0-228 name=__codelineno-0-228></a> <span class=n>parser</span><span class=p>,</span>
<a id=__codelineno-0-231 name=__codelineno-0-231></a> <span class=n>end_tag</span><span class=o>=</span><span class=n>end_tag</span><span class=p>,</span> <a id=__codelineno-0-229 name=__codelineno-0-229></a> <span class=n>token</span><span class=p>,</span>
<a id=__codelineno-0-232 name=__codelineno-0-232></a> <span class=p>)</span> <a id=__codelineno-0-230 name=__codelineno-0-230></a> <span class=n>params</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span> <span class=c1># Allow many args</span>
<a id=__codelineno-0-233 name=__codelineno-0-233></a> <a id=__codelineno-0-231 name=__codelineno-0-231></a> <span class=n>flags</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;only&quot;</span><span class=p>],</span>
<a id=__codelineno-0-234 name=__codelineno-0-234></a> <span class=c1># Check for isolated context keyword</span> <a id=__codelineno-0-232 name=__codelineno-0-232></a> <span class=n>keywordonly_kwargs</span><span class=o>=</span><span class=kc>True</span><span class=p>,</span>
<a id=__codelineno-0-235 name=__codelineno-0-235></a> <span class=n>isolated_context</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>flags</span><span class=p>[</span><span class=s2>&quot;only&quot;</span><span class=p>]</span> <span class=ow>or</span> <span class=n>app_settings</span><span class=o>.</span><span class=n>CONTEXT_BEHAVIOR</span> <span class=o>==</span> <span class=n>ContextBehavior</span><span class=o>.</span><span class=n>ISOLATED</span> <a id=__codelineno-0-233 name=__codelineno-0-233></a> <span class=n>repeatable_kwargs</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-234 name=__codelineno-0-234></a> <span class=n>end_tag</span><span class=o>=</span><span class=n>end_tag</span><span class=p>,</span>
<a id=__codelineno-0-235 name=__codelineno-0-235></a> <span class=p>)</span>
<a id=__codelineno-0-236 name=__codelineno-0-236></a> <a id=__codelineno-0-236 name=__codelineno-0-236></a>
<a id=__codelineno-0-237 name=__codelineno-0-237></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;PARSE&quot;</span><span class=p>,</span> <span class=s2>&quot;COMP&quot;</span><span class=p>,</span> <span class=n>result</span><span class=o>.</span><span class=n>component_name</span><span class=p>,</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>)</span> <a id=__codelineno-0-237 name=__codelineno-0-237></a> <span class=c1># Check for isolated context keyword</span>
<a id=__codelineno-0-238 name=__codelineno-0-238></a> <a id=__codelineno-0-238 name=__codelineno-0-238></a> <span class=n>isolated_context</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>flags</span><span class=p>[</span><span class=s2>&quot;only&quot;</span><span class=p>]</span> <span class=ow>or</span> <span class=n>app_settings</span><span class=o>.</span><span class=n>CONTEXT_BEHAVIOR</span> <span class=o>==</span> <span class=n>ContextBehavior</span><span class=o>.</span><span class=n>ISOLATED</span>
<a id=__codelineno-0-239 name=__codelineno-0-239></a> <span class=n>body</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>parse_body</span><span class=p>()</span> <a id=__codelineno-0-239 name=__codelineno-0-239></a>
<a id=__codelineno-0-240 name=__codelineno-0-240></a> <span class=n>fill_nodes</span> <span class=o>=</span> <span class=n>parse_slot_fill_nodes_from_component_nodelist</span><span class=p>(</span><span class=n>body</span><span class=p>,</span> <span class=n>ComponentNode</span><span class=p>)</span> <a id=__codelineno-0-240 name=__codelineno-0-240></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;PARSE&quot;</span><span class=p>,</span> <span class=s2>&quot;COMP&quot;</span><span class=p>,</span> <span class=n>result</span><span class=o>.</span><span class=n>component_name</span><span class=p>,</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>)</span>
<a id=__codelineno-0-241 name=__codelineno-0-241></a> <a id=__codelineno-0-241 name=__codelineno-0-241></a>
<a id=__codelineno-0-242 name=__codelineno-0-242></a> <span class=c1># Tag all fill nodes as children of this particular component instance</span> <a id=__codelineno-0-242 name=__codelineno-0-242></a> <span class=n>body</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>parse_body</span><span class=p>()</span>
<a id=__codelineno-0-243 name=__codelineno-0-243></a> <span class=k>for</span> <span class=n>node</span> <span class=ow>in</span> <span class=n>fill_nodes</span><span class=p>:</span> <a id=__codelineno-0-243 name=__codelineno-0-243></a> <span class=n>fill_nodes</span> <span class=o>=</span> <span class=n>parse_slot_fill_nodes_from_component_nodelist</span><span class=p>(</span><span class=n>body</span><span class=p>,</span> <span class=n>ComponentNode</span><span class=p>)</span>
<a id=__codelineno-0-244 name=__codelineno-0-244></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;ASSOC&quot;</span><span class=p>,</span> <span class=s2>&quot;FILL&quot;</span><span class=p>,</span> <span class=n>node</span><span class=o>.</span><span class=n>name</span><span class=p>,</span> <span class=n>node</span><span class=o>.</span><span class=n>node_id</span><span class=p>,</span> <span class=n>component_id</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>)</span> <a id=__codelineno-0-244 name=__codelineno-0-244></a>
<a id=__codelineno-0-245 name=__codelineno-0-245></a> <span class=n>node</span><span class=o>.</span><span class=n>component_id</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span> <a id=__codelineno-0-245 name=__codelineno-0-245></a> <span class=c1># Tag all fill nodes as children of this particular component instance</span>
<a id=__codelineno-0-246 name=__codelineno-0-246></a> <a id=__codelineno-0-246 name=__codelineno-0-246></a> <span class=k>for</span> <span class=n>node</span> <span class=ow>in</span> <span class=n>fill_nodes</span><span class=p>:</span>
<a id=__codelineno-0-247 name=__codelineno-0-247></a> <span class=n>component_node</span> <span class=o>=</span> <span class=n>ComponentNode</span><span class=p>(</span> <a id=__codelineno-0-247 name=__codelineno-0-247></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;ASSOC&quot;</span><span class=p>,</span> <span class=s2>&quot;FILL&quot;</span><span class=p>,</span> <span class=n>node</span><span class=o>.</span><span class=n>name</span><span class=p>,</span> <span class=n>node</span><span class=o>.</span><span class=n>node_id</span><span class=p>,</span> <span class=n>component_id</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>)</span>
<a id=__codelineno-0-248 name=__codelineno-0-248></a> <span class=n>name</span><span class=o>=</span><span class=n>result</span><span class=o>.</span><span class=n>component_name</span><span class=p>,</span> <a id=__codelineno-0-248 name=__codelineno-0-248></a> <span class=n>node</span><span class=o>.</span><span class=n>component_id</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span>
<a id=__codelineno-0-249 name=__codelineno-0-249></a> <span class=n>args</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>args</span><span class=p>,</span> <a id=__codelineno-0-249 name=__codelineno-0-249></a>
<a id=__codelineno-0-250 name=__codelineno-0-250></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>kwargs</span><span class=p>,</span> <a id=__codelineno-0-250 name=__codelineno-0-250></a> <span class=n>component_node</span> <span class=o>=</span> <span class=n>ComponentNode</span><span class=p>(</span>
<a id=__codelineno-0-251 name=__codelineno-0-251></a> <span class=n>isolated_context</span><span class=o>=</span><span class=n>isolated_context</span><span class=p>,</span> <a id=__codelineno-0-251 name=__codelineno-0-251></a> <span class=n>name</span><span class=o>=</span><span class=n>result</span><span class=o>.</span><span class=n>component_name</span><span class=p>,</span>
<a id=__codelineno-0-252 name=__codelineno-0-252></a> <span class=n>fill_nodes</span><span class=o>=</span><span class=n>fill_nodes</span><span class=p>,</span> <a id=__codelineno-0-252 name=__codelineno-0-252></a> <span class=n>args</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>args</span><span class=p>,</span>
<a id=__codelineno-0-253 name=__codelineno-0-253></a> <span class=n>node_id</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>,</span> <a id=__codelineno-0-253 name=__codelineno-0-253></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>kwargs</span><span class=p>,</span>
<a id=__codelineno-0-254 name=__codelineno-0-254></a> <span class=p>)</span> <a id=__codelineno-0-254 name=__codelineno-0-254></a> <span class=n>isolated_context</span><span class=o>=</span><span class=n>isolated_context</span><span class=p>,</span>
<a id=__codelineno-0-255 name=__codelineno-0-255></a> <a id=__codelineno-0-255 name=__codelineno-0-255></a> <span class=n>fill_nodes</span><span class=o>=</span><span class=n>fill_nodes</span><span class=p>,</span>
<a id=__codelineno-0-256 name=__codelineno-0-256></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;PARSE&quot;</span><span class=p>,</span> <span class=s2>&quot;COMP&quot;</span><span class=p>,</span> <span class=n>result</span><span class=o>.</span><span class=n>component_name</span><span class=p>,</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>,</span> <span class=s2>&quot;...Done!&quot;</span><span class=p>)</span> <a id=__codelineno-0-256 name=__codelineno-0-256></a> <span class=n>node_id</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>,</span>
<a id=__codelineno-0-257 name=__codelineno-0-257></a> <span class=k>return</span> <span class=n>component_node</span> <a id=__codelineno-0-257 name=__codelineno-0-257></a> <span class=p>)</span>
<a id=__codelineno-0-258 name=__codelineno-0-258></a>
<a id=__codelineno-0-259 name=__codelineno-0-259></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;PARSE&quot;</span><span class=p>,</span> <span class=s2>&quot;COMP&quot;</span><span class=p>,</span> <span class=n>result</span><span class=o>.</span><span class=n>component_name</span><span class=p>,</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>,</span> <span class=s2>&quot;...Done!&quot;</span><span class=p>)</span>
<a id=__codelineno-0-260 name=__codelineno-0-260></a> <span class=k>return</span> <span class=n>component_node</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.component_css_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">component_css_dependencies</span> <a href=#django_components.templatetags.component_tags.component_css_dependencies class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_css_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=s1>&#39;&#39;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django.utils.safestring.SafeString>SafeString</span></span> </code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.component_css_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">component_css_dependencies</span> <a href=#django_components.templatetags.component_tags.component_css_dependencies class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_css_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=s1>&#39;&#39;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django.utils.safestring.SafeString>SafeString</span></span>
</code></pre></div> <div class="doc doc-contents "> <p>Marks location where CSS link tags should be rendered.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-99> 99</a></span> </code></pre></div> <div class="doc doc-contents "> <p>Marks location where CSS link tags should be rendered.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-102>102</a></span>
<span class=normal><a href=#__codelineno-0-100>100</a></span>
<span class=normal><a href=#__codelineno-0-101>101</a></span>
<span class=normal><a href=#__codelineno-0-102>102</a></span>
<span class=normal><a href=#__codelineno-0-103>103</a></span> <span class=normal><a href=#__codelineno-0-103>103</a></span>
<span class=normal><a href=#__codelineno-0-104>104</a></span> <span class=normal><a href=#__codelineno-0-104>104</a></span>
<span class=normal><a href=#__codelineno-0-105>105</a></span> <span class=normal><a href=#__codelineno-0-105>105</a></span>
@ -2847,26 +2848,26 @@
<span class=normal><a href=#__codelineno-0-110>110</a></span> <span class=normal><a href=#__codelineno-0-110>110</a></span>
<span class=normal><a href=#__codelineno-0-111>111</a></span> <span class=normal><a href=#__codelineno-0-111>111</a></span>
<span class=normal><a href=#__codelineno-0-112>112</a></span> <span class=normal><a href=#__codelineno-0-112>112</a></span>
<span class=normal><a href=#__codelineno-0-113>113</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-99 name=__codelineno-0-99></a><span class=nd>@register</span><span class=o>.</span><span class=n>simple_tag</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;component_css_dependencies&quot;</span><span class=p>)</span> <span class=normal><a href=#__codelineno-0-113>113</a></span>
<a id=__codelineno-0-100 name=__codelineno-0-100></a><span class=k>def</span> <span class=nf>component_css_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=nb>str</span> <span class=o>=</span> <span class=s2>&quot;&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span> <span class=normal><a href=#__codelineno-0-114>114</a></span>
<a id=__codelineno-0-101 name=__codelineno-0-101></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Marks location where CSS link tags should be rendered.&quot;&quot;&quot;</span> <span class=normal><a href=#__codelineno-0-115>115</a></span>
<a id=__codelineno-0-102 name=__codelineno-0-102></a> <span class=normal><a href=#__codelineno-0-116>116</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-102 name=__codelineno-0-102></a><span class=nd>@register</span><span class=o>.</span><span class=n>simple_tag</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;component_css_dependencies&quot;</span><span class=p>)</span>
<a id=__codelineno-0-103 name=__codelineno-0-103></a> <span class=k>if</span> <span class=n>is_dependency_middleware_active</span><span class=p>():</span> <a id=__codelineno-0-103 name=__codelineno-0-103></a><span class=k>def</span> <span class=nf>component_css_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=nb>str</span> <span class=o>=</span> <span class=s2>&quot;&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span>
<a id=__codelineno-0-104 name=__codelineno-0-104></a> <span class=n>preloaded_dependencies</span> <span class=o>=</span> <span class=p>[]</span> <a id=__codelineno-0-104 name=__codelineno-0-104></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Marks location where CSS link tags should be rendered.&quot;&quot;&quot;</span>
<a id=__codelineno-0-105 name=__codelineno-0-105></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_preload_str</span><span class=p>(</span><span class=n>preload</span><span class=p>):</span> <a id=__codelineno-0-105 name=__codelineno-0-105></a>
<a id=__codelineno-0-106 name=__codelineno-0-106></a> <span class=n>preloaded_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>RENDERED_COMMENT_TEMPLATE</span><span class=o>.</span><span class=n>format</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=n>component</span><span class=o>.</span><span class=n>registered_name</span><span class=p>))</span> <a id=__codelineno-0-106 name=__codelineno-0-106></a> <span class=k>if</span> <span class=n>is_dependency_middleware_active</span><span class=p>():</span>
<a id=__codelineno-0-107 name=__codelineno-0-107></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>preloaded_dependencies</span><span class=p>)</span> <span class=o>+</span> <span class=n>CSS_DEPENDENCY_PLACEHOLDER</span><span class=p>)</span> <a id=__codelineno-0-107 name=__codelineno-0-107></a> <span class=n>preloaded_dependencies</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-0-108 name=__codelineno-0-108></a> <span class=k>else</span><span class=p>:</span> <a id=__codelineno-0-108 name=__codelineno-0-108></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_preload_str</span><span class=p>(</span><span class=n>preload</span><span class=p>):</span>
<a id=__codelineno-0-109 name=__codelineno-0-109></a> <span class=n>rendered_dependencies</span> <span class=o>=</span> <span class=p>[]</span> <a id=__codelineno-0-109 name=__codelineno-0-109></a> <span class=n>preloaded_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>RENDERED_COMMENT_TEMPLATE</span><span class=o>.</span><span class=n>format</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=n>component</span><span class=o>.</span><span class=n>registered_name</span><span class=p>))</span>
<a id=__codelineno-0-110 name=__codelineno-0-110></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_registry</span><span class=p>(</span><span class=n>component_registry</span><span class=p>):</span> <a id=__codelineno-0-110 name=__codelineno-0-110></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>preloaded_dependencies</span><span class=p>)</span> <span class=o>+</span> <span class=n>CSS_DEPENDENCY_PLACEHOLDER</span><span class=p>)</span>
<a id=__codelineno-0-111 name=__codelineno-0-111></a> <span class=n>rendered_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>component</span><span class=o>.</span><span class=n>render_css_dependencies</span><span class=p>())</span> <a id=__codelineno-0-111 name=__codelineno-0-111></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-112 name=__codelineno-0-112></a> <a id=__codelineno-0-112 name=__codelineno-0-112></a> <span class=n>rendered_dependencies</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-0-113 name=__codelineno-0-113></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>rendered_dependencies</span><span class=p>))</span> <a id=__codelineno-0-113 name=__codelineno-0-113></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_registry</span><span class=p>(</span><span class=n>component_registry</span><span class=p>):</span>
<a id=__codelineno-0-114 name=__codelineno-0-114></a> <span class=n>rendered_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>component</span><span class=o>.</span><span class=n>render_css_dependencies</span><span class=p>())</span>
<a id=__codelineno-0-115 name=__codelineno-0-115></a>
<a id=__codelineno-0-116 name=__codelineno-0-116></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>rendered_dependencies</span><span class=p>))</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.component_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">component_dependencies</span> <a href=#django_components.templatetags.component_tags.component_dependencies class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=s1>&#39;&#39;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django.utils.safestring.SafeString>SafeString</span></span> </code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.component_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">component_dependencies</span> <a href=#django_components.templatetags.component_tags.component_dependencies class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=s1>&#39;&#39;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django.utils.safestring.SafeString>SafeString</span></span>
</code></pre></div> <div class="doc doc-contents "> <p>Marks location where CSS link and JS script tags should be rendered.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-82>82</a></span> </code></pre></div> <div class="doc doc-contents "> <p>Marks location where CSS link and JS script tags should be rendered.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-85>85</a></span>
<span class=normal><a href=#__codelineno-0-83>83</a></span>
<span class=normal><a href=#__codelineno-0-84>84</a></span>
<span class=normal><a href=#__codelineno-0-85>85</a></span>
<span class=normal><a href=#__codelineno-0-86>86</a></span> <span class=normal><a href=#__codelineno-0-86>86</a></span>
<span class=normal><a href=#__codelineno-0-87>87</a></span> <span class=normal><a href=#__codelineno-0-87>87</a></span>
<span class=normal><a href=#__codelineno-0-88>88</a></span> <span class=normal><a href=#__codelineno-0-88>88</a></span>
@ -2877,26 +2878,26 @@
<span class=normal><a href=#__codelineno-0-93>93</a></span> <span class=normal><a href=#__codelineno-0-93>93</a></span>
<span class=normal><a href=#__codelineno-0-94>94</a></span> <span class=normal><a href=#__codelineno-0-94>94</a></span>
<span class=normal><a href=#__codelineno-0-95>95</a></span> <span class=normal><a href=#__codelineno-0-95>95</a></span>
<span class=normal><a href=#__codelineno-0-96>96</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-82 name=__codelineno-0-82></a><span class=nd>@register</span><span class=o>.</span><span class=n>simple_tag</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;component_dependencies&quot;</span><span class=p>)</span> <span class=normal><a href=#__codelineno-0-96>96</a></span>
<a id=__codelineno-0-83 name=__codelineno-0-83></a><span class=k>def</span> <span class=nf>component_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=nb>str</span> <span class=o>=</span> <span class=s2>&quot;&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span> <span class=normal><a href=#__codelineno-0-97>97</a></span>
<a id=__codelineno-0-84 name=__codelineno-0-84></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Marks location where CSS link and JS script tags should be rendered.&quot;&quot;&quot;</span> <span class=normal><a href=#__codelineno-0-98>98</a></span>
<a id=__codelineno-0-85 name=__codelineno-0-85></a> <span class=normal><a href=#__codelineno-0-99>99</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-85 name=__codelineno-0-85></a><span class=nd>@register</span><span class=o>.</span><span class=n>simple_tag</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;component_dependencies&quot;</span><span class=p>)</span>
<a id=__codelineno-0-86 name=__codelineno-0-86></a> <span class=k>if</span> <span class=n>is_dependency_middleware_active</span><span class=p>():</span> <a id=__codelineno-0-86 name=__codelineno-0-86></a><span class=k>def</span> <span class=nf>component_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=nb>str</span> <span class=o>=</span> <span class=s2>&quot;&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span>
<a id=__codelineno-0-87 name=__codelineno-0-87></a> <span class=n>preloaded_dependencies</span> <span class=o>=</span> <span class=p>[]</span> <a id=__codelineno-0-87 name=__codelineno-0-87></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Marks location where CSS link and JS script tags should be rendered.&quot;&quot;&quot;</span>
<a id=__codelineno-0-88 name=__codelineno-0-88></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_preload_str</span><span class=p>(</span><span class=n>preload</span><span class=p>):</span> <a id=__codelineno-0-88 name=__codelineno-0-88></a>
<a id=__codelineno-0-89 name=__codelineno-0-89></a> <span class=n>preloaded_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>RENDERED_COMMENT_TEMPLATE</span><span class=o>.</span><span class=n>format</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=n>component</span><span class=o>.</span><span class=n>registered_name</span><span class=p>))</span> <a id=__codelineno-0-89 name=__codelineno-0-89></a> <span class=k>if</span> <span class=n>is_dependency_middleware_active</span><span class=p>():</span>
<a id=__codelineno-0-90 name=__codelineno-0-90></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>preloaded_dependencies</span><span class=p>)</span> <span class=o>+</span> <span class=n>CSS_DEPENDENCY_PLACEHOLDER</span> <span class=o>+</span> <span class=n>JS_DEPENDENCY_PLACEHOLDER</span><span class=p>)</span> <a id=__codelineno-0-90 name=__codelineno-0-90></a> <span class=n>preloaded_dependencies</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-0-91 name=__codelineno-0-91></a> <span class=k>else</span><span class=p>:</span> <a id=__codelineno-0-91 name=__codelineno-0-91></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_preload_str</span><span class=p>(</span><span class=n>preload</span><span class=p>):</span>
<a id=__codelineno-0-92 name=__codelineno-0-92></a> <span class=n>rendered_dependencies</span> <span class=o>=</span> <span class=p>[]</span> <a id=__codelineno-0-92 name=__codelineno-0-92></a> <span class=n>preloaded_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>RENDERED_COMMENT_TEMPLATE</span><span class=o>.</span><span class=n>format</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=n>component</span><span class=o>.</span><span class=n>registered_name</span><span class=p>))</span>
<a id=__codelineno-0-93 name=__codelineno-0-93></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_registry</span><span class=p>(</span><span class=n>component_registry</span><span class=p>):</span> <a id=__codelineno-0-93 name=__codelineno-0-93></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>preloaded_dependencies</span><span class=p>)</span> <span class=o>+</span> <span class=n>CSS_DEPENDENCY_PLACEHOLDER</span> <span class=o>+</span> <span class=n>JS_DEPENDENCY_PLACEHOLDER</span><span class=p>)</span>
<a id=__codelineno-0-94 name=__codelineno-0-94></a> <span class=n>rendered_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>component</span><span class=o>.</span><span class=n>render_dependencies</span><span class=p>())</span> <a id=__codelineno-0-94 name=__codelineno-0-94></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-95 name=__codelineno-0-95></a> <a id=__codelineno-0-95 name=__codelineno-0-95></a> <span class=n>rendered_dependencies</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-0-96 name=__codelineno-0-96></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>rendered_dependencies</span><span class=p>))</span> <a id=__codelineno-0-96 name=__codelineno-0-96></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_registry</span><span class=p>(</span><span class=n>component_registry</span><span class=p>):</span>
<a id=__codelineno-0-97 name=__codelineno-0-97></a> <span class=n>rendered_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>component</span><span class=o>.</span><span class=n>render_dependencies</span><span class=p>())</span>
<a id=__codelineno-0-98 name=__codelineno-0-98></a>
<a id=__codelineno-0-99 name=__codelineno-0-99></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>rendered_dependencies</span><span class=p>))</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.component_js_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">component_js_dependencies</span> <a href=#django_components.templatetags.component_tags.component_js_dependencies class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_js_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=s1>&#39;&#39;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django.utils.safestring.SafeString>SafeString</span></span> </code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.component_js_dependencies class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">component_js_dependencies</span> <a href=#django_components.templatetags.component_tags.component_js_dependencies class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>component_js_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=n><a class="autorefs autorefs-external" href=https://docs.python.org/3.12/library/stdtypes.html#str>str</a></span> <span class=o>=</span> <span class=s1>&#39;&#39;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django.utils.safestring.SafeString>SafeString</span></span>
</code></pre></div> <div class="doc doc-contents "> <p>Marks location where JS script tags should be rendered.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-116>116</a></span> </code></pre></div> <div class="doc doc-contents "> <p>Marks location where JS script tags should be rendered.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-119>119</a></span>
<span class=normal><a href=#__codelineno-0-117>117</a></span>
<span class=normal><a href=#__codelineno-0-118>118</a></span>
<span class=normal><a href=#__codelineno-0-119>119</a></span>
<span class=normal><a href=#__codelineno-0-120>120</a></span> <span class=normal><a href=#__codelineno-0-120>120</a></span>
<span class=normal><a href=#__codelineno-0-121>121</a></span> <span class=normal><a href=#__codelineno-0-121>121</a></span>
<span class=normal><a href=#__codelineno-0-122>122</a></span> <span class=normal><a href=#__codelineno-0-122>122</a></span>
@ -2907,25 +2908,26 @@
<span class=normal><a href=#__codelineno-0-127>127</a></span> <span class=normal><a href=#__codelineno-0-127>127</a></span>
<span class=normal><a href=#__codelineno-0-128>128</a></span> <span class=normal><a href=#__codelineno-0-128>128</a></span>
<span class=normal><a href=#__codelineno-0-129>129</a></span> <span class=normal><a href=#__codelineno-0-129>129</a></span>
<span class=normal><a href=#__codelineno-0-130>130</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-116 name=__codelineno-0-116></a><span class=nd>@register</span><span class=o>.</span><span class=n>simple_tag</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;component_js_dependencies&quot;</span><span class=p>)</span> <span class=normal><a href=#__codelineno-0-130>130</a></span>
<a id=__codelineno-0-117 name=__codelineno-0-117></a><span class=k>def</span> <span class=nf>component_js_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=nb>str</span> <span class=o>=</span> <span class=s2>&quot;&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span> <span class=normal><a href=#__codelineno-0-131>131</a></span>
<a id=__codelineno-0-118 name=__codelineno-0-118></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Marks location where JS script tags should be rendered.&quot;&quot;&quot;</span> <span class=normal><a href=#__codelineno-0-132>132</a></span>
<a id=__codelineno-0-119 name=__codelineno-0-119></a> <span class=normal><a href=#__codelineno-0-133>133</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-119 name=__codelineno-0-119></a><span class=nd>@register</span><span class=o>.</span><span class=n>simple_tag</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=s2>&quot;component_js_dependencies&quot;</span><span class=p>)</span>
<a id=__codelineno-0-120 name=__codelineno-0-120></a> <span class=k>if</span> <span class=n>is_dependency_middleware_active</span><span class=p>():</span> <a id=__codelineno-0-120 name=__codelineno-0-120></a><span class=k>def</span> <span class=nf>component_js_dependencies</span><span class=p>(</span><span class=n>preload</span><span class=p>:</span> <span class=nb>str</span> <span class=o>=</span> <span class=s2>&quot;&quot;</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>SafeString</span><span class=p>:</span>
<a id=__codelineno-0-121 name=__codelineno-0-121></a> <span class=n>preloaded_dependencies</span> <span class=o>=</span> <span class=p>[]</span> <a id=__codelineno-0-121 name=__codelineno-0-121></a><span class=w> </span><span class=sd>&quot;&quot;&quot;Marks location where JS script tags should be rendered.&quot;&quot;&quot;</span>
<a id=__codelineno-0-122 name=__codelineno-0-122></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_preload_str</span><span class=p>(</span><span class=n>preload</span><span class=p>):</span> <a id=__codelineno-0-122 name=__codelineno-0-122></a>
<a id=__codelineno-0-123 name=__codelineno-0-123></a> <span class=n>preloaded_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>RENDERED_COMMENT_TEMPLATE</span><span class=o>.</span><span class=n>format</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=n>component</span><span class=o>.</span><span class=n>registered_name</span><span class=p>))</span> <a id=__codelineno-0-123 name=__codelineno-0-123></a> <span class=k>if</span> <span class=n>is_dependency_middleware_active</span><span class=p>():</span>
<a id=__codelineno-0-124 name=__codelineno-0-124></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>preloaded_dependencies</span><span class=p>)</span> <span class=o>+</span> <span class=n>JS_DEPENDENCY_PLACEHOLDER</span><span class=p>)</span> <a id=__codelineno-0-124 name=__codelineno-0-124></a> <span class=n>preloaded_dependencies</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-0-125 name=__codelineno-0-125></a> <span class=k>else</span><span class=p>:</span> <a id=__codelineno-0-125 name=__codelineno-0-125></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_preload_str</span><span class=p>(</span><span class=n>preload</span><span class=p>):</span>
<a id=__codelineno-0-126 name=__codelineno-0-126></a> <span class=n>rendered_dependencies</span> <span class=o>=</span> <span class=p>[]</span> <a id=__codelineno-0-126 name=__codelineno-0-126></a> <span class=n>preloaded_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>RENDERED_COMMENT_TEMPLATE</span><span class=o>.</span><span class=n>format</span><span class=p>(</span><span class=n>name</span><span class=o>=</span><span class=n>component</span><span class=o>.</span><span class=n>registered_name</span><span class=p>))</span>
<a id=__codelineno-0-127 name=__codelineno-0-127></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_registry</span><span class=p>(</span><span class=n>component_registry</span><span class=p>):</span> <a id=__codelineno-0-127 name=__codelineno-0-127></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>preloaded_dependencies</span><span class=p>)</span> <span class=o>+</span> <span class=n>JS_DEPENDENCY_PLACEHOLDER</span><span class=p>)</span>
<a id=__codelineno-0-128 name=__codelineno-0-128></a> <span class=n>rendered_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>component</span><span class=o>.</span><span class=n>render_js_dependencies</span><span class=p>())</span> <a id=__codelineno-0-128 name=__codelineno-0-128></a> <span class=k>else</span><span class=p>:</span>
<a id=__codelineno-0-129 name=__codelineno-0-129></a> <a id=__codelineno-0-129 name=__codelineno-0-129></a> <span class=n>rendered_dependencies</span> <span class=o>=</span> <span class=p>[]</span>
<a id=__codelineno-0-130 name=__codelineno-0-130></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>rendered_dependencies</span><span class=p>))</span> <a id=__codelineno-0-130 name=__codelineno-0-130></a> <span class=k>for</span> <span class=n>component</span> <span class=ow>in</span> <span class=n>_get_components_from_registry</span><span class=p>(</span><span class=n>component_registry</span><span class=p>):</span>
<a id=__codelineno-0-131 name=__codelineno-0-131></a> <span class=n>rendered_dependencies</span><span class=o>.</span><span class=n>append</span><span class=p>(</span><span class=n>component</span><span class=o>.</span><span class=n>render_js_dependencies</span><span class=p>())</span>
<a id=__codelineno-0-132 name=__codelineno-0-132></a>
<a id=__codelineno-0-133 name=__codelineno-0-133></a> <span class=k>return</span> <span class=n>mark_safe</span><span class=p>(</span><span class=s2>&quot;</span><span class=se>\n</span><span class=s2>&quot;</span><span class=o>.</span><span class=n>join</span><span class=p>(</span><span class=n>rendered_dependencies</span><span class=p>))</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.fill class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">fill</span> <a href=#django_components.templatetags.component_tags.fill class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>fill</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.slots.FillNode href=slots/#django_components.slots.FillNode>FillNode</a></span> </code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.fill class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">fill</span> <a href=#django_components.templatetags.component_tags.fill class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>fill</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><a class="autorefs autorefs-internal" title=django_components.slots.FillNode href=slots/#django_components.slots.FillNode>FillNode</a></span>
</code></pre></div> <div class="doc doc-contents "> <p>Block tag whose contents 'fill' (are inserted into) an identically named 'slot'-block in the component template referred to by a parent component. It exists to make component nesting easier.</p> <p>This tag is available only within a {% component %}..{% endcomponent %} block. Runtime checks should prohibit other usages.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-164>164</a></span> </code></pre></div> <div class="doc doc-contents "> <p>Block tag whose contents 'fill' (are inserted into) an identically named 'slot'-block in the component template referred to by a parent component. It exists to make component nesting easier.</p> <p>This tag is available only within a {% component %}..{% endcomponent %} block. Runtime checks should prohibit other usages.</p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-166>166</a></span>
<span class=normal><a href=#__codelineno-0-165>165</a></span>
<span class=normal><a href=#__codelineno-0-166>166</a></span>
<span class=normal><a href=#__codelineno-0-167>167</a></span> <span class=normal><a href=#__codelineno-0-167>167</a></span>
<span class=normal><a href=#__codelineno-0-168>168</a></span> <span class=normal><a href=#__codelineno-0-168>168</a></span>
<span class=normal><a href=#__codelineno-0-169>169</a></span> <span class=normal><a href=#__codelineno-0-169>169</a></span>
@ -2956,45 +2958,43 @@
<span class=normal><a href=#__codelineno-0-194>194</a></span> <span class=normal><a href=#__codelineno-0-194>194</a></span>
<span class=normal><a href=#__codelineno-0-195>195</a></span> <span class=normal><a href=#__codelineno-0-195>195</a></span>
<span class=normal><a href=#__codelineno-0-196>196</a></span> <span class=normal><a href=#__codelineno-0-196>196</a></span>
<span class=normal><a href=#__codelineno-0-197>197</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-164 name=__codelineno-0-164></a><span class=nd>@register</span><span class=o>.</span><span class=n>tag</span><span class=p>(</span><span class=s2>&quot;fill&quot;</span><span class=p>)</span> <span class=normal><a href=#__codelineno-0-197>197</a></span>
<a id=__codelineno-0-165 name=__codelineno-0-165></a><span class=k>def</span> <span class=nf>fill</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n>Parser</span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n>Token</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>FillNode</span><span class=p>:</span> <span class=normal><a href=#__codelineno-0-198>198</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-166 name=__codelineno-0-166></a><span class=nd>@register</span><span class=o>.</span><span class=n>tag</span><span class=p>(</span><span class=s2>&quot;fill&quot;</span><span class=p>)</span>
<a id=__codelineno-0-166 name=__codelineno-0-166></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span> <a id=__codelineno-0-167 name=__codelineno-0-167></a><span class=k>def</span> <span class=nf>fill</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n>Parser</span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n>Token</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>FillNode</span><span class=p>:</span>
<a id=__codelineno-0-167 name=__codelineno-0-167></a><span class=sd> Block tag whose contents &#39;fill&#39; (are inserted into) an identically named</span> <a id=__codelineno-0-168 name=__codelineno-0-168></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-168 name=__codelineno-0-168></a><span class=sd> &#39;slot&#39;-block in the component template referred to by a parent component.</span> <a id=__codelineno-0-169 name=__codelineno-0-169></a><span class=sd> Block tag whose contents &#39;fill&#39; (are inserted into) an identically named</span>
<a id=__codelineno-0-169 name=__codelineno-0-169></a><span class=sd> It exists to make component nesting easier.</span> <a id=__codelineno-0-170 name=__codelineno-0-170></a><span class=sd> &#39;slot&#39;-block in the component template referred to by a parent component.</span>
<a id=__codelineno-0-170 name=__codelineno-0-170></a> <a id=__codelineno-0-171 name=__codelineno-0-171></a><span class=sd> It exists to make component nesting easier.</span>
<a id=__codelineno-0-171 name=__codelineno-0-171></a><span class=sd> This tag is available only within a {% component %}..{% endcomponent %} block.</span> <a id=__codelineno-0-172 name=__codelineno-0-172></a>
<a id=__codelineno-0-172 name=__codelineno-0-172></a><span class=sd> Runtime checks should prohibit other usages.</span> <a id=__codelineno-0-173 name=__codelineno-0-173></a><span class=sd> This tag is available only within a {% component %}..{% endcomponent %} block.</span>
<a id=__codelineno-0-173 name=__codelineno-0-173></a><span class=sd> &quot;&quot;&quot;</span> <a id=__codelineno-0-174 name=__codelineno-0-174></a><span class=sd> Runtime checks should prohibit other usages.</span>
<a id=__codelineno-0-174 name=__codelineno-0-174></a> <span class=n>bits</span> <span class=o>=</span> <span class=n>token</span><span class=o>.</span><span class=n>split_contents</span><span class=p>()</span> <a id=__codelineno-0-175 name=__codelineno-0-175></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-175 name=__codelineno-0-175></a> <span class=n>tag</span> <span class=o>=</span> <span class=n>_parse_tag</span><span class=p>(</span> <a id=__codelineno-0-176 name=__codelineno-0-176></a> <span class=n>tag</span> <span class=o>=</span> <span class=n>_parse_tag</span><span class=p>(</span>
<a id=__codelineno-0-176 name=__codelineno-0-176></a> <span class=s2>&quot;fill&quot;</span><span class=p>,</span> <a id=__codelineno-0-177 name=__codelineno-0-177></a> <span class=s2>&quot;fill&quot;</span><span class=p>,</span>
<a id=__codelineno-0-177 name=__codelineno-0-177></a> <span class=n>parser</span><span class=p>,</span> <a id=__codelineno-0-178 name=__codelineno-0-178></a> <span class=n>parser</span><span class=p>,</span>
<a id=__codelineno-0-178 name=__codelineno-0-178></a> <span class=n>bits</span><span class=p>,</span> <a id=__codelineno-0-179 name=__codelineno-0-179></a> <span class=n>token</span><span class=p>,</span>
<a id=__codelineno-0-179 name=__codelineno-0-179></a> <span class=n>params</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;name&quot;</span><span class=p>],</span> <a id=__codelineno-0-180 name=__codelineno-0-180></a> <span class=n>params</span><span class=o>=</span><span class=p>[</span><span class=s2>&quot;name&quot;</span><span class=p>],</span>
<a id=__codelineno-0-180 name=__codelineno-0-180></a> <span class=n>keywordonly_kwargs</span><span class=o>=</span><span class=p>[</span><span class=n>SLOT_DATA_KWARG</span><span class=p>,</span> <span class=n>SLOT_DEFAULT_KWARG</span><span class=p>],</span> <a id=__codelineno-0-181 name=__codelineno-0-181></a> <span class=n>keywordonly_kwargs</span><span class=o>=</span><span class=p>[</span><span class=n>SLOT_DATA_KWARG</span><span class=p>,</span> <span class=n>SLOT_DEFAULT_KWARG</span><span class=p>],</span>
<a id=__codelineno-0-181 name=__codelineno-0-181></a> <span class=n>repeatable_kwargs</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span> <a id=__codelineno-0-182 name=__codelineno-0-182></a> <span class=n>repeatable_kwargs</span><span class=o>=</span><span class=kc>False</span><span class=p>,</span>
<a id=__codelineno-0-182 name=__codelineno-0-182></a> <span class=n>end_tag</span><span class=o>=</span><span class=s2>&quot;endfill&quot;</span><span class=p>,</span> <a id=__codelineno-0-183 name=__codelineno-0-183></a> <span class=n>end_tag</span><span class=o>=</span><span class=s2>&quot;endfill&quot;</span><span class=p>,</span>
<a id=__codelineno-0-183 name=__codelineno-0-183></a> <span class=p>)</span> <a id=__codelineno-0-184 name=__codelineno-0-184></a> <span class=p>)</span>
<a id=__codelineno-0-184 name=__codelineno-0-184></a> <span class=n>slot_name</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>named_args</span><span class=p>[</span><span class=s2>&quot;name&quot;</span><span class=p>]</span> <a id=__codelineno-0-185 name=__codelineno-0-185></a> <span class=n>slot_name</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>named_args</span><span class=p>[</span><span class=s2>&quot;name&quot;</span><span class=p>]</span>
<a id=__codelineno-0-185 name=__codelineno-0-185></a> <a id=__codelineno-0-186 name=__codelineno-0-186></a>
<a id=__codelineno-0-186 name=__codelineno-0-186></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;PARSE&quot;</span><span class=p>,</span> <span class=s2>&quot;FILL&quot;</span><span class=p>,</span> <span class=nb>str</span><span class=p>(</span><span class=n>slot_name</span><span class=p>),</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>)</span> <a id=__codelineno-0-187 name=__codelineno-0-187></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;PARSE&quot;</span><span class=p>,</span> <span class=s2>&quot;FILL&quot;</span><span class=p>,</span> <span class=nb>str</span><span class=p>(</span><span class=n>slot_name</span><span class=p>),</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>)</span>
<a id=__codelineno-0-187 name=__codelineno-0-187></a> <a id=__codelineno-0-188 name=__codelineno-0-188></a>
<a id=__codelineno-0-188 name=__codelineno-0-188></a> <span class=n>body</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>parse_body</span><span class=p>()</span> <a id=__codelineno-0-189 name=__codelineno-0-189></a> <span class=n>body</span> <span class=o>=</span> <span class=n>tag</span><span class=o>.</span><span class=n>parse_body</span><span class=p>()</span>
<a id=__codelineno-0-189 name=__codelineno-0-189></a> <span class=n>fill_node</span> <span class=o>=</span> <span class=n>FillNode</span><span class=p>(</span> <a id=__codelineno-0-190 name=__codelineno-0-190></a> <span class=n>fill_node</span> <span class=o>=</span> <span class=n>FillNode</span><span class=p>(</span>
<a id=__codelineno-0-190 name=__codelineno-0-190></a> <span class=n>nodelist</span><span class=o>=</span><span class=n>body</span><span class=p>,</span> <a id=__codelineno-0-191 name=__codelineno-0-191></a> <span class=n>nodelist</span><span class=o>=</span><span class=n>body</span><span class=p>,</span>
<a id=__codelineno-0-191 name=__codelineno-0-191></a> <span class=n>name</span><span class=o>=</span><span class=n>slot_name</span><span class=p>,</span> <a id=__codelineno-0-192 name=__codelineno-0-192></a> <span class=n>name</span><span class=o>=</span><span class=n>slot_name</span><span class=p>,</span>
<a id=__codelineno-0-192 name=__codelineno-0-192></a> <span class=n>node_id</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>,</span> <a id=__codelineno-0-193 name=__codelineno-0-193></a> <span class=n>node_id</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>,</span>
<a id=__codelineno-0-193 name=__codelineno-0-193></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>kwargs</span><span class=p>,</span> <a id=__codelineno-0-194 name=__codelineno-0-194></a> <span class=n>kwargs</span><span class=o>=</span><span class=n>tag</span><span class=o>.</span><span class=n>kwargs</span><span class=p>,</span>
<a id=__codelineno-0-194 name=__codelineno-0-194></a> <span class=p>)</span> <a id=__codelineno-0-195 name=__codelineno-0-195></a> <span class=p>)</span>
<a id=__codelineno-0-195 name=__codelineno-0-195></a> <a id=__codelineno-0-196 name=__codelineno-0-196></a>
<a id=__codelineno-0-196 name=__codelineno-0-196></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;PARSE&quot;</span><span class=p>,</span> <span class=s2>&quot;FILL&quot;</span><span class=p>,</span> <span class=nb>str</span><span class=p>(</span><span class=n>slot_name</span><span class=p>),</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>,</span> <span class=s2>&quot;...Done!&quot;</span><span class=p>)</span> <a id=__codelineno-0-197 name=__codelineno-0-197></a> <span class=n>trace_msg</span><span class=p>(</span><span class=s2>&quot;PARSE&quot;</span><span class=p>,</span> <span class=s2>&quot;FILL&quot;</span><span class=p>,</span> <span class=nb>str</span><span class=p>(</span><span class=n>slot_name</span><span class=p>),</span> <span class=n>tag</span><span class=o>.</span><span class=n>id</span><span class=p>,</span> <span class=s2>&quot;...Done!&quot;</span><span class=p>)</span>
<a id=__codelineno-0-197 name=__codelineno-0-197></a> <span class=k>return</span> <span class=n>fill_node</span> <a id=__codelineno-0-198 name=__codelineno-0-198></a> <span class=k>return</span> <span class=n>fill_node</span>
</code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.html_attrs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">html_attrs</span> <a href=#django_components.templatetags.component_tags.html_attrs class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>html_attrs</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django_components.attributes.HtmlAttrsNode>HtmlAttrsNode</span></span> </code></pre></div></td></tr></table></div> </details> </div> </div> <div class="doc doc-object doc-function"> <h4 id=django_components.templatetags.component_tags.html_attrs class="doc doc-heading"> <code class="doc-symbol doc-symbol-heading doc-symbol-function"></code> <span class="doc doc-object-name doc-function-name">html_attrs</span> <a href=#django_components.templatetags.component_tags.html_attrs class=headerlink title="Permanent link">¤</a></h4> <div class="doc-signature highlight"><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=n>html_attrs</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n><span title=django.template.base.Parser>Parser</span></span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n><span title=django.template.base.Token>Token</span></span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n><span title=django_components.attributes.HtmlAttrsNode>HtmlAttrsNode</span></span>
</code></pre></div> <div class="doc doc-contents "> <p>This tag takes: - Optional dictionary of attributes (<code>attrs</code>) - Optional dictionary of defaults (<code>defaults</code>) - Additional kwargs that are appended to the former two</p> <p>The inputs are merged and resulting dict is rendered as HTML attributes (<code>key="value"</code>).</p> <p>Rules: 1. Both <code>attrs</code> and <code>defaults</code> can be passed as positional args or as kwargs 2. Both <code>attrs</code> and <code>defaults</code> are optional (can be omitted) 3. Both <code>attrs</code> and <code>defaults</code> are dictionaries, and we can define them the same way we define dictionaries for the <code>component</code> tag. So either as <code>attrs=attrs</code> or <code>attrs:key=value</code>. 4. All other kwargs (<code>key=value</code>) are appended and can be repeated.</p> <p>Normal kwargs (<code>key=value</code>) are concatenated to existing keys. So if e.g. key "class" is supplied with value "my-class", then adding <code>class="extra-class"</code> will result in `class="my-class extra-class".</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>html_attrs</span> <span class=nv>attrs</span> <span class=nv>defaults</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;default-class&quot;</span> <span class=nv>class</span><span class=o>=</span><span class=s2>&quot;extra-class&quot;</span> <span class=nv>data-id</span><span class=o>=</span><span class=s2>&quot;123&quot;</span> <span class=cp>%}</span> </code></pre></div> <div class="doc doc-contents "> <p>This tag takes: - Optional dictionary of attributes (<code>attrs</code>) - Optional dictionary of defaults (<code>defaults</code>) - Additional kwargs that are appended to the former two</p> <p>The inputs are merged and resulting dict is rendered as HTML attributes (<code>key="value"</code>).</p> <p>Rules: 1. Both <code>attrs</code> and <code>defaults</code> can be passed as positional args or as kwargs 2. Both <code>attrs</code> and <code>defaults</code> are optional (can be omitted) 3. Both <code>attrs</code> and <code>defaults</code> are dictionaries, and we can define them the same way we define dictionaries for the <code>component</code> tag. So either as <code>attrs=attrs</code> or <code>attrs:key=value</code>. 4. All other kwargs (<code>key=value</code>) are appended and can be repeated.</p> <p>Normal kwargs (<code>key=value</code>) are concatenated to existing keys. So if e.g. key "class" is supplied with value "my-class", then adding <code>class="extra-class"</code> will result in `class="my-class extra-class".</p> <p>Example: <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>html_attrs</span> <span class=nv>attrs</span> <span class=nv>defaults</span><span class=o>:</span><span class=nv>class</span><span class=o>=</span><span class=s2>&quot;default-class&quot;</span> <span class=nv>class</span><span class=o>=</span><span class=s2>&quot;extra-class&quot;</span> <span class=nv>data-id</span><span class=o>=</span><span class=s2>&quot;123&quot;</span> <span class=cp>%}</span>
</code></pre></div></p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-290>290</a></span> </code></pre></div></p> <details class=quote> <summary>Source code in <code>src/django_components/templatetags/component_tags.py</code></summary> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-292>292</a></span>
<span class=normal><a href=#__codelineno-0-291>291</a></span>
<span class=normal><a href=#__codelineno-0-292>292</a></span>
<span class=normal><a href=#__codelineno-0-293>293</a></span> <span class=normal><a href=#__codelineno-0-293>293</a></span>
<span class=normal><a href=#__codelineno-0-294>294</a></span> <span class=normal><a href=#__codelineno-0-294>294</a></span>
<span class=normal><a href=#__codelineno-0-295>295</a></span> <span class=normal><a href=#__codelineno-0-295>295</a></span>
@ -3036,40 +3036,38 @@
<span class=normal><a href=#__codelineno-0-331>331</a></span> <span class=normal><a href=#__codelineno-0-331>331</a></span>
<span class=normal><a href=#__codelineno-0-332>332</a></span> <span class=normal><a href=#__codelineno-0-332>332</a></span>
<span class=normal><a href=#__codelineno-0-333>333</a></span> <span class=normal><a href=#__codelineno-0-333>333</a></span>
<span class=normal><a href=#__codelineno-0-334>334</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-290 name=__codelineno-0-290></a><span class=nd>@register</span><span class=o>.</span><span class=n>tag</span><span class=p>(</span><span class=s2>&quot;html_attrs&quot;</span><span class=p>)</span> <span class=normal><a href=#__codelineno-0-334>334</a></span></pre></div></td><td class=code><div><pre><span></span><code><a id=__codelineno-0-292 name=__codelineno-0-292></a><span class=nd>@register</span><span class=o>.</span><span class=n>tag</span><span class=p>(</span><span class=s2>&quot;html_attrs&quot;</span><span class=p>)</span>
<a id=__codelineno-0-291 name=__codelineno-0-291></a><span class=k>def</span> <span class=nf>html_attrs</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n>Parser</span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n>Token</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>HtmlAttrsNode</span><span class=p>:</span> <a id=__codelineno-0-293 name=__codelineno-0-293></a><span class=k>def</span> <span class=nf>html_attrs</span><span class=p>(</span><span class=n>parser</span><span class=p>:</span> <span class=n>Parser</span><span class=p>,</span> <span class=n>token</span><span class=p>:</span> <span class=n>Token</span><span class=p>)</span> <span class=o>-&gt;</span> <span class=n>HtmlAttrsNode</span><span class=p>:</span>
<a id=__codelineno-0-292 name=__codelineno-0-292></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span> <a id=__codelineno-0-294 name=__codelineno-0-294></a><span class=w> </span><span class=sd>&quot;&quot;&quot;</span>
<a id=__codelineno-0-293 name=__codelineno-0-293></a><span class=sd> This tag takes:</span> <a id=__codelineno-0-295 name=__codelineno-0-295></a><span class=sd> This tag takes:</span>
<a id=__codelineno-0-294 name=__codelineno-0-294></a><span class=sd> - Optional dictionary of attributes (`attrs`)</span> <a id=__codelineno-0-296 name=__codelineno-0-296></a><span class=sd> - Optional dictionary of attributes (`attrs`)</span>
<a id=__codelineno-0-295 name=__codelineno-0-295></a><span class=sd> - Optional dictionary of defaults (`defaults`)</span> <a id=__codelineno-0-297 name=__codelineno-0-297></a><span class=sd> - Optional dictionary of defaults (`defaults`)</span>
<a id=__codelineno-0-296 name=__codelineno-0-296></a><span class=sd> - Additional kwargs that are appended to the former two</span> <a id=__codelineno-0-298 name=__codelineno-0-298></a><span class=sd> - Additional kwargs that are appended to the former two</span>
<a id=__codelineno-0-297 name=__codelineno-0-297></a> <a id=__codelineno-0-299 name=__codelineno-0-299></a>
<a id=__codelineno-0-298 name=__codelineno-0-298></a><span class=sd> The inputs are merged and resulting dict is rendered as HTML attributes</span> <a id=__codelineno-0-300 name=__codelineno-0-300></a><span class=sd> The inputs are merged and resulting dict is rendered as HTML attributes</span>
<a id=__codelineno-0-299 name=__codelineno-0-299></a><span class=sd> (`key=&quot;value&quot;`).</span> <a id=__codelineno-0-301 name=__codelineno-0-301></a><span class=sd> (`key=&quot;value&quot;`).</span>
<a id=__codelineno-0-300 name=__codelineno-0-300></a> <a id=__codelineno-0-302 name=__codelineno-0-302></a>
<a id=__codelineno-0-301 name=__codelineno-0-301></a><span class=sd> Rules:</span> <a id=__codelineno-0-303 name=__codelineno-0-303></a><span class=sd> Rules:</span>
<a id=__codelineno-0-302 name=__codelineno-0-302></a><span class=sd> 1. Both `attrs` and `defaults` can be passed as positional args or as kwargs</span> <a id=__codelineno-0-304 name=__codelineno-0-304></a><span class=sd> 1. Both `attrs` and `defaults` can be passed as positional args or as kwargs</span>
<a id=__codelineno-0-303 name=__codelineno-0-303></a><span class=sd> 2. Both `attrs` and `defaults` are optional (can be omitted)</span> <a id=__codelineno-0-305 name=__codelineno-0-305></a><span class=sd> 2. Both `attrs` and `defaults` are optional (can be omitted)</span>
<a id=__codelineno-0-304 name=__codelineno-0-304></a><span class=sd> 3. Both `attrs` and `defaults` are dictionaries, and we can define them the same way</span> <a id=__codelineno-0-306 name=__codelineno-0-306></a><span class=sd> 3. Both `attrs` and `defaults` are dictionaries, and we can define them the same way</span>
<a id=__codelineno-0-305 name=__codelineno-0-305></a><span class=sd> we define dictionaries for the `component` tag. So either as `attrs=attrs` or</span> <a id=__codelineno-0-307 name=__codelineno-0-307></a><span class=sd> we define dictionaries for the `component` tag. So either as `attrs=attrs` or</span>
<a id=__codelineno-0-306 name=__codelineno-0-306></a><span class=sd> `attrs:key=value`.</span> <a id=__codelineno-0-308 name=__codelineno-0-308></a><span class=sd> `attrs:key=value`.</span>
<a id=__codelineno-0-307 name=__codelineno-0-307></a><span class=sd> 4. All other kwargs (`key=value`) are appended and can be repeated.</span> <a id=__codelineno-0-309 name=__codelineno-0-309></a><span class=sd> 4. All other kwargs (`key=value`) are appended and can be repeated.</span>
<a id=__codelineno-0-308 name=__codelineno-0-308></a> <a id=__codelineno-0-310 name=__codelineno-0-310></a>
<a id=__codelineno-0-309 name=__codelineno-0-309></a><span class=sd> Normal kwargs (`key=value`) are concatenated to existing keys. So if e.g. key</span> <a id=__codelineno-0-311 name=__codelineno-0-311></a><span class=sd> Normal kwargs (`key=value`) are concatenated to existing keys. So if e.g. key</span>
<a id=__codelineno-0-310 name=__codelineno-0-310></a><span class=sd> &quot;class&quot; is supplied with value &quot;my-class&quot;, then adding `class=&quot;extra-class&quot;`</span> <a id=__codelineno-0-312 name=__codelineno-0-312></a><span class=sd> &quot;class&quot; is supplied with value &quot;my-class&quot;, then adding `class=&quot;extra-class&quot;`</span>
<a id=__codelineno-0-311 name=__codelineno-0-311></a><span class=sd> will result in `class=&quot;my-class extra-class&quot;.</span> <a id=__codelineno-0-313 name=__codelineno-0-313></a><span class=sd> will result in `class=&quot;my-class extra-class&quot;.</span>
<a id=__codelineno-0-312 name=__codelineno-0-312></a> <a id=__codelineno-0-314 name=__codelineno-0-314></a>
<a id=__codelineno-0-313 name=__codelineno-0-313></a><span class=sd> Example:</span> <a id=__codelineno-0-315 name=__codelineno-0-315></a><span class=sd> Example:</span>
<a id=__codelineno-0-314 name=__codelineno-0-314></a><span class=sd> ```htmldjango</span> <a id=__codelineno-0-316 name=__codelineno-0-316></a><span class=sd> ```htmldjango</span>
<a id=__codelineno-0-315 name=__codelineno-0-315></a><span class=sd> {% html_attrs attrs defaults:class=&quot;default-class&quot; class=&quot;extra-class&quot; data-id=&quot;123&quot; %}</span> <a id=__codelineno-0-317 name=__codelineno-0-317></a><span class=sd> {% html_attrs attrs defaults:class=&quot;default-class&quot; class=&quot;extra-class&quot; data-id=&quot;123&quot; %}</span>
<a id=__codelineno-0-316 name=__codelineno-0-316></a><span class=sd> ```</span> <a id=__codelineno-0-318 name=__codelineno-0-318></a><span class=sd> ```</span>
<a id=__codelineno-0-317 name=__codelineno-0-317></a><span class=sd> &quot;&quot;&quot;</span> <a id=__codelineno-0-319 name=__codelineno-0-319></a><span class=sd> &quot;&quot;&quot;</span>
<a id=__codelineno-0-318 name=__codelineno-0-318></a> <span class=n>bits</span> <span class=o>=</span> <span class=n>token</span><span class=o>.</span><span class=n>split_contents</span><span class=p>()</span>
<a id=__codelineno-0-319 name=__codelineno-0-319></a>
<a id=__codelineno-0-320 name=__codelineno-0-320></a> <span class=n>tag</span> <span class=o>=</span> <span class=n>_parse_tag</span><span class=p>(</span> <a id=__codelineno-0-320 name=__codelineno-0-320></a> <span class=n>tag</span> <span class=o>=</span> <span class=n>_parse_tag</span><span class=p>(</span>
<a id=__codelineno-0-321 name=__codelineno-0-321></a> <span class=s2>&quot;html_attrs&quot;</span><span class=p>,</span> <a id=__codelineno-0-321 name=__codelineno-0-321></a> <span class=s2>&quot;html_attrs&quot;</span><span class=p>,</span>
<a id=__codelineno-0-322 name=__codelineno-0-322></a> <span class=n>parser</span><span class=p>,</span> <a id=__codelineno-0-322 name=__codelineno-0-322></a> <span class=n>parser</span><span class=p>,</span>
<a id=__codelineno-0-323 name=__codelineno-0-323></a> <span class=n>bits</span><span class=p>,</span> <a id=__codelineno-0-323 name=__codelineno-0-323></a> <span class=n>token</span><span class=p>,</span>
<a id=__codelineno-0-324 name=__codelineno-0-324></a> <span class=n>params</span><span class=o>=</span><span class=p>[</span><span class=n>HTML_ATTRS_ATTRS_KEY</span><span class=p>,</span> <span class=n>HTML_ATTRS_DEFAULTS_KEY</span><span class=p>],</span> <a id=__codelineno-0-324 name=__codelineno-0-324></a> <span class=n>params</span><span class=o>=</span><span class=p>[</span><span class=n>HTML_ATTRS_ATTRS_KEY</span><span class=p>,</span> <span class=n>HTML_ATTRS_DEFAULTS_KEY</span><span class=p>],</span>
<a id=__codelineno-0-325 name=__codelineno-0-325></a> <span class=n>optional_params</span><span class=o>=</span><span class=p>[</span><span class=n>HTML_ATTRS_ATTRS_KEY</span><span class=p>,</span> <span class=n>HTML_ATTRS_DEFAULTS_KEY</span><span class=p>],</span> <a id=__codelineno-0-325 name=__codelineno-0-325></a> <span class=n>optional_params</span><span class=o>=</span><span class=p>[</span><span class=n>HTML_ATTRS_ATTRS_KEY</span><span class=p>,</span> <span class=n>HTML_ATTRS_DEFAULTS_KEY</span><span class=p>],</span>
<a id=__codelineno-0-326 name=__codelineno-0-326></a> <span class=n>flags</span><span class=o>=</span><span class=p>[],</span> <a id=__codelineno-0-326 name=__codelineno-0-326></a> <span class=n>flags</span><span class=o>=</span><span class=p>[],</span>

370
dev/reference/django_components/templatetags/component_tags/index.html
View file

File diff suppressed because one or more lines are too long

370
dev/reference/django_components/templatetags/index.html
View file

File diff suppressed because one or more lines are too long

2
dev/search/search_index.json
View file

File diff suppressed because one or more lines are too long

BIN
dev/sitemap.xml.gz
View file

Binary file not shown.

2
versions.json
View file

@ -6,7 +6,7 @@
}, },
{ {
"version": "dev", "version": "dev",
"title": "dev (fc5ea78)", "title": "dev (39cff5a)",
"aliases": [] "aliases": []
}, },
{ {