@webqit/webflo 0.20.1 → 0.20.2-next.1

package/site/.vitepress/dist/assets/docs_concepts_rendering.md.BWr5Lxgn.js

@@ -0,0 +1,24 @@
+import{_ as a,c as n,o as l,a2 as e}from"./chunks/framework.9Uv4PgnO.js";const y=JSON.parse('{"title":"Rendering","description":"","frontmatter":{},"headers":[],"relativePath":"docs/concepts/rendering.md","filePath":"docs/concepts/rendering.md"}'),t={name:"docs/concepts/rendering.md"};function o(p,s,r,c,i,D){return l(),n("div",null,[...s[0]||(s[0]=[e(`<h1 id="rendering" tabindex="-1">Rendering <a class="header-anchor" href="#rendering" aria-label="Permalink to &quot;Rendering&quot;">​</a></h1><p>Rendering in Webflo is about turning handler data into UI, both on the server (SSR) and in the browser (CSR).</p><h2 id="the-mental-model" tabindex="-1">The Mental Model <a class="header-anchor" href="#the-mental-model" aria-label="Permalink to &quot;The Mental Model&quot;">​</a></h2><ul><li>Your handler returns data (a plain object or Response).</li><li>Webflo makes this data available as <code>document.bindings.data</code> in your HTML.</li><li>Rendering can happen on the server, the client, or both—using the same mental model.</li></ul><h2 id="example-returning-data" tabindex="-1">Example: Returning Data <a class="header-anchor" href="#example-returning-data" aria-label="Permalink to &quot;Example: Returning Data&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app/handler.server.js</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#89DDFF;font-style:italic;"> default</span><span style="color:#C792EA;"> async</span><span style="color:#C792EA;"> function</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">event</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;font-style:italic;"> next</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;"> {</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">  if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">next</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">stepname</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#89DDFF;font-style:italic;"> await</span><span style="color:#82AAFF;"> next</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">  return</span><span style="color:#89DDFF;"> {</span><span style="color:#F07178;"> title</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;"> &#39;</span><span style="color:#C3E88D;">Home</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> greeting</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;"> &#39;</span><span style="color:#C3E88D;">Hello World!</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;"> };</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="accessing-data-in-html" tabindex="-1">Accessing Data in HTML <a class="header-anchor" href="#accessing-data-in-html" aria-label="Permalink to &quot;Accessing Data in HTML&quot;">​</a></h2><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- public/index.html --&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#C792EA;"> html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">  &lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;">My App</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#82AAFF;">      setTimeout</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;"> =&gt;</span><span style="color:#89DDFF;"> {</span></span>
+<span class="line"><span style="color:#BABED8;">        document</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">title</span><span style="color:#89DDFF;"> =</span><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">bindings</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">data</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">title</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">      },</span><span style="color:#F78C6C;"> 0</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">    &lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">  &lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">  &lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">h1</span><span style="color:#C792EA;"> id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">greeting</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#82AAFF;">      setTimeout</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;"> =&gt;</span><span style="color:#89DDFF;"> {</span></span>
+<span class="line"><span style="color:#BABED8;">        document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">greeting</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#89DDFF;"> =</span><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">bindings</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">data</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">greeting</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">      },</span><span style="color:#F78C6C;"> 0</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">    &lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">  &lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
+<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="ssr-csr" tabindex="-1">SSR &amp; CSR <a class="header-anchor" href="#ssr-csr" aria-label="Permalink to &quot;SSR &amp; CSR&quot;">​</a></h2><ul><li><strong>SSR:</strong> Data is rendered into HTML on the server for fast first paint and SEO.</li><li><strong>CSR:</strong> Data is updated in the browser for dynamic, interactive UIs.</li><li><strong>Hybrid:</strong> You can use both together for best results.</li></ul><h2 id="reactivity-oohtml" tabindex="-1">Reactivity &amp; OOHTML <a class="header-anchor" href="#reactivity-oohtml" aria-label="Permalink to &quot;Reactivity &amp; OOHTML&quot;">​</a></h2><ul><li>Use <a href="https://github.com/webqit/oohtml" target="_blank" rel="noreferrer">OOHTML</a> for reactive UI logic and templates.</li><li>OOHTML enables <code>&lt;script quantum&gt;</code> and <code>&lt;template&gt;</code> for declarative, reactive UIs.</li></ul><hr><ul><li><a href="./templates">See Templates →</a></li><li><a href="./lifecycle">See Lifecycle →</a></li></ul>`,14)])])}const d=a(t,[["render",o]]);export{y as __pageData,d as default};

package/site/.vitepress/dist/assets/docs_concepts_rendering.md.BWr5Lxgn.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as n,o as l,a2 as e}from"./chunks/framework.9Uv4PgnO.js";const y=JSON.parse('{"title":"Rendering","description":"","frontmatter":{},"headers":[],"relativePath":"docs/concepts/rendering.md","filePath":"docs/concepts/rendering.md"}'),t={name:"docs/concepts/rendering.md"};function o(p,s,r,c,i,D){return l(),n("div",null,[...s[0]||(s[0]=[e("",14)])])}const d=a(t,[["render",o]]);export{y as __pageData,d as default};

package/site/.vitepress/dist/assets/docs_concepts_request-response.md.DhplzNqt.js

@@ -0,0 +1,4 @@
+import{_ as a,c as t,o as s,a2 as o}from"./chunks/framework.9Uv4PgnO.js";const h=JSON.parse('{"title":"Request/Response Lifecycle","description":"","frontmatter":{},"headers":[],"relativePath":"docs/concepts/request-response.md","filePath":"docs/concepts/request-response.md"}'),n={name:"docs/concepts/request-response.md"};function l(r,e,i,c,p,d){return s(),t("div",null,[...e[0]||(e[0]=[o(`<h1 id="request-response-lifecycle" tabindex="-1">Request/Response Lifecycle <a class="header-anchor" href="#request-response-lifecycle" aria-label="Permalink to &quot;Request/Response Lifecycle&quot;">​</a></h1><p>This page explains how Webflo orchestrates each interaction from request to response, and how you can hook into various stages, including realtime.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><ol><li>A request is received and a route is resolved.</li><li>Matching handler(s) execute, optionally delegating via <code>next()</code> for nested routes.</li><li>A value is produced: data, <code>Response</code>, or <code>LiveResponse</code>.</li><li>The client renders data into the UI or consumes the response stream.</li><li>Optional realtime keeps the channel open for additional updates until closed.</li></ol><h2 id="the-httpevent" tabindex="-1">The HttpEvent <a class="header-anchor" href="#the-httpevent" aria-label="Permalink to &quot;The HttpEvent&quot;">​</a></h2><ul><li><code>event.request</code>, <code>event.url</code> — normalized request data.</li><li><code>event.cookies</code>, <code>event.session</code>, <code>event.user</code> — common state interfaces.</li><li><code>event.signal</code> — aborts when lifecycle completes or client aborts.</li><li><code>event.waitUntil(promise)</code> — extend lifecycle to await background work.</li><li><code>event.respondWith(value, optionsOrCallback)</code> — emit one or more responses.</li></ul><p>See also: <a href="/api/webflo-routing/HttpEvent">/api/webflo-routing/HttpEvent</a></p><h2 id="delegation-via-next" tabindex="-1">Delegation via next() <a class="header-anchor" href="#delegation-via-next" aria-label="Permalink to &quot;Delegation via next()&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#89DDFF;font-style:italic;"> default</span><span style="color:#C792EA;"> async</span><span style="color:#C792EA;"> function</span><span style="color:#89DDFF;"> (</span><span style="color:#BABED8;font-style:italic;">event</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;font-style:italic;"> next</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;"> {</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">  if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">next</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">stepname</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#82AAFF;"> next</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">  return</span><span style="color:#89DDFF;"> {</span><span style="color:#F07178;"> title</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;"> &#39;</span><span style="color:#C3E88D;">Home</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;"> };</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="returning-values" tabindex="-1">Returning Values <a class="header-anchor" href="#returning-values" aria-label="Permalink to &quot;Returning Values&quot;">​</a></h2><ul><li>Single value: <code>return {...}</code> or <code>return Response.json({...})</code></li><li>Multiple/progressive values: call <code>event.respondWith(...)</code> one or more times</li><li>Generators or live functions can yield multiple values naturally</li></ul><p>See: <a href="/api/webflo-routing/handler">/api/webflo-routing/handler</a></p><h2 id="realtime" tabindex="-1">Realtime <a class="header-anchor" href="#realtime" aria-label="Permalink to &quot;Realtime&quot;">​</a></h2><p>Realtime extends the lifecycle beyond a single response so server and client can exchange multiple messages.</p><p>Close conditions:</p><ul><li>Handler finishes and no more messages are expected</li><li><code>HttpEvent.signal</code> aborts (client navigated away or server closed)</li></ul><p>See: <a href="/docs/concepts/realtime">/docs/concepts/realtime</a></p><h2 id="completion-and-abort" tabindex="-1">Completion and Abort <a class="header-anchor" href="#completion-and-abort" aria-label="Permalink to &quot;Completion and Abort&quot;">​</a></h2><ul><li>The root event aborts when all subtree handlers complete or the request aborts.</li><li>Child events inherit from the parent and abort when the parent aborts.</li></ul>`,19)])])}const v=a(n,[["render",l]]);export{h as __pageData,v as default};

package/site/.vitepress/dist/assets/docs_concepts_request-response.md.DhplzNqt.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as t,o as s,a2 as o}from"./chunks/framework.9Uv4PgnO.js";const h=JSON.parse('{"title":"Request/Response Lifecycle","description":"","frontmatter":{},"headers":[],"relativePath":"docs/concepts/request-response.md","filePath":"docs/concepts/request-response.md"}'),n={name:"docs/concepts/request-response.md"};function l(r,e,i,c,p,d){return s(),t("div",null,[...e[0]||(e[0]=[o("",19)])])}const v=a(n,[["render",l]]);export{h as __pageData,v as default};