Deployed 27e8ef0 to develop with MkDocs 1.6.1 and mike 2.1.3

Author: github-actions

develop/about/changelog/index.html

@@ -16,7 +16,7 @@
 <span class=normal>3</span>
 <span class=normal>4</span>
 <span class=normal>5</span>
-<span class=normal>6</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>include</span><span class=p>,</span> <span class=n>path</span>
+<span class=normal>6</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>include</span><span class=p>,</span> <span class=n>path</span>
 
 <span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
     <span class=o>...</span><span class=p>,</span>
@@ -40,9 +40,9 @@
 <span class=normal>16</span>
 <span class=normal>17</span>
 <span class=normal>18</span>
-<span class=normal>19</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>import</span> <span class=nn>os</span>
+<span class=normal>19</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>import</span><span class=w> </span><span class=nn>os</span>
 
-<span class=kn>from</span> <span class=nn>django.core.asgi</span> <span class=kn>import</span> <span class=n>get_asgi_application</span>
+<span class=kn>from</span><span class=w> </span><span class=nn>django.core.asgi</span><span class=w> </span><span class=kn>import</span> <span class=n>get_asgi_application</span>
 
 <span class=c1># Ensure DJANGO_SETTINGS_MODULE is set properly based on your project name!</span>
 <span class=n>os</span><span class=o>.</span><span class=n>environ</span><span class=o>.</span><span class=n>setdefault</span><span class=p>(</span><span class=s2>&quot;DJANGO_SETTINGS_MODULE&quot;</span><span class=p>,</span> <span class=s2>&quot;example_project.settings&quot;</span><span class=p>)</span>
@@ -51,15 +51,15 @@
 <span class=n>django_asgi_app</span> <span class=o>=</span> <span class=n>get_asgi_application</span><span class=p>()</span>
 
 
-<span class=kn>from</span> <span class=nn>channels.routing</span> <span class=kn>import</span> <span class=n>ProtocolTypeRouter</span><span class=p>,</span> <span class=n>URLRouter</span>  <span class=c1># noqa: E402</span>
+<span class=kn>from</span><span class=w> </span><span class=nn>channels.routing</span><span class=w> </span><span class=kn>import</span> <span class=n>ProtocolTypeRouter</span><span class=p>,</span> <span class=n>URLRouter</span>  <span class=c1># noqa: E402</span>
 
-<span class=kn>from</span> <span class=nn>reactpy_django</span> <span class=kn>import</span> <span class=n>REACTPY_WEBSOCKET_ROUTE</span>  <span class=c1># noqa: E402</span>
+<span class=kn>from</span><span class=w> </span><span class=nn>reactpy_django</span><span class=w> </span><span class=kn>import</span> <span class=n>REACTPY_WEBSOCKET_ROUTE</span>  <span class=c1># noqa: E402</span>
 
 <span class=n>application</span> <span class=o>=</span> <span class=n>ProtocolTypeRouter</span><span class=p>({</span>
     <span class=s2>&quot;http&quot;</span><span class=p>:</span> <span class=n>django_asgi_app</span><span class=p>,</span>
     <span class=s2>&quot;websocket&quot;</span><span class=p>:</span> <span class=n>URLRouter</span><span class=p>([</span><span class=n>REACTPY_WEBSOCKET_ROUTE</span><span class=p>]),</span>
 <span class=p>})</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=info> <summary>Add <code class=highlight><span class=n>AuthMiddlewareStack</span></code> (Optional)</summary> <p>There are many situations where you need to access the Django <code class=highlight><span class=n>User</span></code> or <code class=highlight><span class=n>Session</span></code> objects within ReactPy components. For example, if you want to:</p> <ol> <li>Access the <code class=highlight><span class=n>User</span></code> that is currently logged in</li> <li>Access Django's <code class=highlight><span class=n>Session</span></code> object</li> <li>Login or logout the current <code class=highlight><span class=n>User</span></code></li> </ol> <p>In these situations will need to ensure you are using <code class=highlight><span class=n>AuthMiddlewareStack</span></code>.</p> <div class=highlight><pre><span></span><code><span class=kn>from</span> <span class=nn>channels.auth</span> <span class=kn>import</span> <span class=n>AuthMiddlewareStack</span>  <span class=c1># noqa: E402</span>
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=info> <summary>Add <code class=highlight><span class=n>AuthMiddlewareStack</span></code> (Optional)</summary> <p>There are many situations where you need to access the Django <code class=highlight><span class=n>User</span></code> or <code class=highlight><span class=n>Session</span></code> objects within ReactPy components. For example, if you want to:</p> <ol> <li>Access the <code class=highlight><span class=n>User</span></code> that is currently logged in</li> <li>Access Django's <code class=highlight><span class=n>Session</span></code> object</li> <li>Login or logout the current <code class=highlight><span class=n>User</span></code></li> </ol> <p>In these situations will need to ensure you are using <code class=highlight><span class=n>AuthMiddlewareStack</span></code>.</p> <div class=highlight><pre><span></span><code><span class=kn>from</span><span class=w> </span><span class=nn>channels.auth</span><span class=w> </span><span class=kn>import</span> <span class=n>AuthMiddlewareStack</span>  <span class=c1># noqa: E402</span>
 
 <span class=n>application</span> <span class=o>=</span> <span class=n>ProtocolTypeRouter</span><span class=p>({</span>
     <span class=s2>&quot;http&quot;</span><span class=p>:</span> <span class=n>django_asgi_app</span><span class=p>,</span>
@@ -71,10 +71,10 @@
 <span class=normal>2</span>
 <span class=normal>3</span>
 <span class=normal>4</span>
-<span class=normal>5</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>5</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span><span class=w> </span><span class=nn>reactpy</span><span class=w> </span><span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
 <span class=nd>@component</span>
-<span class=k>def</span> <span class=nf>hello_world</span><span class=p>(</span><span class=n>recipient</span><span class=p>:</span> <span class=nb>str</span><span class=p>):</span>
+<span class=k>def</span><span class=w> </span><span class=nf>hello_world</span><span class=p>(</span><span class=n>recipient</span><span class=p>:</span> <span class=nb>str</span><span class=p>):</span>
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>h1</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Hello </span><span class=si>{</span><span class=n>recipient</span><span class=si>}</span><span class=s2>!&quot;</span><span class=p>)</span>
 </code></pre></div></td></tr></table></div> <hr> <p><font size=5><strong><code>my_app/templates/my_template.html</code></strong></font></p> <p>In your <strong>Django app</strong>'s HTML template, you can now embed your ReactPy component using the <code>component</code> template tag. Within this tag, you will need to type in the dotted path to the component.</p> <p>Additionally, you can pass in <code>args</code> and <code>kwargs</code> into your component function. After reading the code below, pay attention to how the function definition for <code>hello_world</code> (<em>from the previous example</em>) accepts a <code>recipient</code> argument.</p> <!--html-code-start--> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
 <span class=normal>2</span>

develop/learn/add-reactpy-to-a-django-project/index.html

@@ -2,10 +2,10 @@
 <span class=normal>2</span>
 <span class=normal>3</span>
 <span class=normal>4</span>
-<span class=normal>5</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>5</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span><span class=w> </span><span class=nn>reactpy</span><span class=w> </span><span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
 <span class=nd>@component</span>
-<span class=k>def</span> <span class=nf>hello_world</span><span class=p>(</span><span class=n>recipient</span><span class=p>:</span> <span class=nb>str</span><span class=p>):</span>
+<span class=k>def</span><span class=w> </span><span class=nf>hello_world</span><span class=p>(</span><span class=n>recipient</span><span class=p>:</span> <span class=nb>str</span><span class=p>):</span>
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>h1</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Hello </span><span class=si>{</span><span class=n>recipient</span><span class=si>}</span><span class=s2>!&quot;</span><span class=p>)</span>
 </code></pre></div></td></tr></table></div> </div> </div> </div> <details class=question> <summary>What should I name my ReactPy files and functions?</summary> <p>You have full freedom in naming/placement of your files and functions.</p> <p>We recommend creating a <code>components.py</code> for small <strong>Django apps</strong>. If your app has a lot of components, you should consider breaking them apart into individual modules such as <code>components/navbar.py</code>.</p> <p>Ultimately, components are referenced by Python dotted path in <code>my_template.html</code> (<a href=#embedding-in-a-template><em>see next step</em></a>). This dotted path must be valid to Python's <code class=highlight><span class=n>importlib</span></code>.</p> </details> <details class=question> <summary>What does the decorator actually do?</summary> <p>While not all components need to be decorated, there are a few features this decorator adds to your components.</p> <ol> <li>The ability to be used as a root component.<ul> <li>The decorator is required for any component that you want to reference in your Django templates (<a href=#embedding-in-a-template><em>see next step</em></a>).</li> </ul> </li> <li>The ability to use <a href=../../reference/hooks/ >hooks</a>.<ul> <li>The decorator is required on any component where hooks are defined.</li> </ul> </li> <li>Scoped failures.<ul> <li>If a decorated component generates an exception, then only that one component will fail to render.</li> </ul> </li> </ol> </details> <h2 id=embedding-in-a-template>Embedding in a template<a class=headerlink href=#embedding-in-a-template title="Permanent link">&para;</a></h2> <p>In your <strong>Django app</strong>'s HTML template, you can now embed your ReactPy component using the <code class=highlight><span class=cp>{%</span> <span class=k>component</span> <span class=cp>%}</span></code> template tag. Within this tag, you will need to type in the dotted path to the component.</p> <p>Additionally, you can pass in <code class=highlight><span class=n>args</span></code> and <code class=highlight><span class=n>kwargs</span></code> into your component function. After reading the code below, pay attention to how the function definition for <code class=highlight><span class=n>hello_world</span></code> (<a href=#defining-a-component><em>from the previous step</em></a>) accepts a <code class=highlight><span class=n>recipient</span></code> argument.</p> <div class="tabbed-set tabbed-alternate" data-tabs=2:1><input checked=checked id=__tabbed_2_1 name=__tabbed_2 type=radio><div class=tabbed-labels><label for=__tabbed_2_1>my_template.html</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
 <span class=normal>2</span>
@@ -37,10 +37,10 @@
 <span class=normal>6</span>
 <span class=normal>7</span>
 <span class=normal>8</span>
-<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.shortcuts</span> <span class=kn>import</span> <span class=n>render</span>
+<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span><span class=w> </span><span class=nn>django.shortcuts</span><span class=w> </span><span class=kn>import</span> <span class=n>render</span>
 
 
-<span class=k>def</span> <span class=nf>example_view</span><span class=p>(</span><span class=n>request</span><span class=p>):</span>
+<span class=k>def</span><span class=w> </span><span class=nf>example_view</span><span class=p>(</span><span class=n>request</span><span class=p>):</span>
     <span class=k>return</span> <span class=n>render</span><span class=p>(</span>
         <span class=n>request</span><span class=p>,</span>
         <span class=s2>&quot;my_template.html&quot;</span><span class=p>,</span>
@@ -67,20 +67,20 @@
 <span class=normal>2</span>
 <span class=normal>3</span>
 <span class=normal>4</span>
-<span class=normal>5</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.shortcuts</span> <span class=kn>import</span> <span class=n>render</span>
+<span class=normal>5</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span><span class=w> </span><span class=nn>django.shortcuts</span><span class=w> </span><span class=kn>import</span> <span class=n>render</span>
 
 
-<span class=k>def</span> <span class=nf>index</span><span class=p>(</span><span class=n>request</span><span class=p>):</span>
+<span class=k>def</span><span class=w> </span><span class=nf>index</span><span class=p>(</span><span class=n>request</span><span class=p>):</span>
     <span class=k>return</span> <span class=n>render</span><span class=p>(</span><span class=n>request</span><span class=p>,</span> <span class=s2>&quot;my_template.html&quot;</span><span class=p>)</span>
 </code></pre></div></td></tr></table></div> </div> </div> </div> <p>We will add this new view into your <a href=https://docs.djangoproject.com/en/stable/intro/tutorial01/#write-your-first-view><code>urls.py</code></a> and define what URL it should be accessible at.</p> <div class="tabbed-set tabbed-alternate" data-tabs=6:1><input checked=checked id=__tabbed_6_1 name=__tabbed_6 type=radio><div class=tabbed-labels><label for=__tabbed_6_1>urls.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
 <span class=normal>2</span>
 <span class=normal>3</span>
 <span class=normal>4</span>
 <span class=normal>5</span>
 <span class=normal>6</span>
-<span class=normal>7</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span>
+<span class=normal>7</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span><span class=w> </span><span class=nn>django.urls</span><span class=w> </span><span class=kn>import</span> <span class=n>path</span>
 
-<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span><span class=w> </span><span class=nn>example</span><span class=w> </span><span class=kn>import</span> <span class=n>views</span>
 
 <span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
     <span class=n>path</span><span class=p>(</span><span class=s2>&quot;example/&quot;</span><span class=p>,</span> <span class=n>views</span><span class=o>.</span><span class=n>index</span><span class=p>),</span>