@webqit/webflo 0.20.2-next.1 → 0.20.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.md +8 -5
  2. package/package.json +1 -1
  3. package/site/.vitepress/cache/deps/_metadata.json +85 -0
  4. package/site/.vitepress/config.ts +7 -2
  5. package/site/docs/getting-started.md +12 -0
  6. package/site/docs.md +4 -99
  7. package/site/index.md +4 -1
  8. package/site/overview.md +101 -0
  9. package/site/.vitepress/cache/deps_temp_9b107c53/@braintree_sanitize-url.js +0 -93
  10. package/site/.vitepress/cache/deps_temp_9b107c53/@braintree_sanitize-url.js.map +0 -7
  11. package/site/.vitepress/cache/deps_temp_9b107c53/chunk-BUSYA2B4.js +0 -9
  12. package/site/.vitepress/cache/deps_temp_9b107c53/chunk-BUSYA2B4.js.map +0 -7
  13. package/site/.vitepress/cache/deps_temp_9b107c53/chunk-Q2AYPHVK.js +0 -9719
  14. package/site/.vitepress/cache/deps_temp_9b107c53/chunk-Q2AYPHVK.js.map +0 -7
  15. package/site/.vitepress/cache/deps_temp_9b107c53/chunk-QAXAIFA7.js +0 -12705
  16. package/site/.vitepress/cache/deps_temp_9b107c53/chunk-QAXAIFA7.js.map +0 -7
  17. package/site/.vitepress/cache/deps_temp_9b107c53/cytoscape-cose-bilkent.js +0 -4710
  18. package/site/.vitepress/cache/deps_temp_9b107c53/cytoscape-cose-bilkent.js.map +0 -7
  19. package/site/.vitepress/cache/deps_temp_9b107c53/cytoscape.js +0 -30278
  20. package/site/.vitepress/cache/deps_temp_9b107c53/cytoscape.js.map +0 -7
  21. package/site/.vitepress/cache/deps_temp_9b107c53/dayjs.js +0 -285
  22. package/site/.vitepress/cache/deps_temp_9b107c53/dayjs.js.map +0 -7
  23. package/site/.vitepress/cache/deps_temp_9b107c53/debug.js +0 -453
  24. package/site/.vitepress/cache/deps_temp_9b107c53/debug.js.map +0 -7
  25. package/site/.vitepress/cache/deps_temp_9b107c53/package.json +0 -3
  26. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___@vue_devtools-api.js +0 -4507
  27. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___@vue_devtools-api.js.map +0 -7
  28. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___@vueuse_core.js +0 -584
  29. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___@vueuse_core.js.map +0 -7
  30. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___@vueuse_integrations_useFocusTrap.js +0 -1166
  31. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___@vueuse_integrations_useFocusTrap.js.map +0 -7
  32. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___mark__js_src_vanilla__js.js +0 -1667
  33. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___mark__js_src_vanilla__js.js.map +0 -7
  34. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___minisearch.js +0 -1815
  35. package/site/.vitepress/cache/deps_temp_9b107c53/vitepress___minisearch.js.map +0 -7
  36. package/site/.vitepress/cache/deps_temp_9b107c53/vue.js +0 -344
  37. package/site/.vitepress/cache/deps_temp_9b107c53/vue.js.map +0 -7
package/README.md CHANGED
@@ -5,8 +5,7 @@
5
5
  _A web-native framework for the next generation of apps_
6
6
 
7
7
  [![npm version][npm-version-src]][npm-version-href]
8
- [![npm downloads][npm-downloads-src]][npm-downloads-href]
9
- [![bundle][bundle-src]][bundle-href]
8
+ <!--[![npm downloads][npm-downloads-src]][npm-downloads-href]-->
10
9
  [![License][license-src]][license-href]
11
10
 
12
11
  </div>
@@ -14,7 +13,7 @@ _A web-native framework for the next generation of apps_
14
13
  <div align="center">
15
14
 
16
15
  _Build the full spectrum of modern applications — backends, frontends, offline-first, and realtime apps — on raw platform power._ 🛸<br>
17
- [Webflo ↗](https://webflo.netlify.app/docs) is a web-native framework that lets you build absurdlly fast — with the whole sophistication and scale of modern apps solved from the foundation up.
16
+ [Webflo ↗](https://webflo.netlify.app/overview) is a web-native framework that lets you build absurdlly fast — with the whole sophistication and scale of modern apps solved from the foundation up.
18
17
 
19
18
  </div>
20
19
 
@@ -34,6 +33,8 @@ For a quick intro, see the docs:
34
33
  + [Core Concepts ↗](https://webflo.netlify.app/docs/concepts)
35
34
  + [Examples ↗](https://webflo.netlify.app/examples)
36
35
 
36
+ ---
37
+
37
38
  ## What You Can Build
38
39
 
39
40
  | Category | Examples & Notes |
@@ -45,6 +46,8 @@ For a quick intro, see the docs:
45
46
  | **Realtime & multiplayer** | Chats, presence, dashboards, live docs, notifications — realtime channels and dialogs available out of the box. |
46
47
  | **AI & agents** | Multi-step AI workflows, background agents, and automation powered by Webflo’s live request lifecycle. |
47
48
 
49
+ ---
50
+
48
51
  ## Features
49
52
 
50
53
  | Feature | Description |
@@ -59,6 +62,8 @@ For a quick intro, see the docs:
59
62
  | 📦 **Offline & worker features** | Worker-side routing, caching, background sync, and offline-first behaviors built in. |
60
63
  | 🧩 **Dev mode & HMR** | Fast development server with fine-grained rebuilds and hot updates for HTML, JS, and CSS. |
61
64
 
65
+ ---
66
+
62
67
  ## Contributing
63
68
 
64
69
  Webflo is in active development — and contributions are welcome!
@@ -94,7 +99,5 @@ MIT — see [LICENSE](https://github.com/webqit/webflo/blob/master/LICENSE)
94
99
  [npm-version-href]: https://npmjs.com/package/@webqit/webflo
95
100
  [npm-downloads-src]: https://img.shields.io/npm/dm/@webqit/webflo?style=flat&colorA=18181B&colorB=F0DB4F
96
101
  [npm-downloads-href]: https://npmjs.com/package/@webqit/webflo
97
- [bundle-src]: https://img.shields.io/bundlephobia/minzip/@webqit/webflo?style=flat&colorA=18181B&colorB=F0DB4F
98
- [bundle-href]: https://bundlephobia.com/result?p=@webqit/webflo
99
102
  [license-src]: https://img.shields.io/github/license/webqit/webflo.svg?style=flat&colorA=18181B&colorB=F0DB4F
100
103
  [license-href]: https://github.com/webqit/webflo/blob/master/LICENSE
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "vanila-javascript"
13
13
  ],
14
14
  "homepage": "https://webqit.io/tooling/webflo",
15
- "version": "0.20.2-next.1",
15
+ "version": "0.20.2",
16
16
  "license": "MIT",
17
17
  "repository": {
18
18
  "type": "git",
@@ -0,0 +1,85 @@
1
+ {
2
+ "hash": "cab2ac2d",
3
+ "configHash": "a00e1839",
4
+ "lockfileHash": "e996cd2d",
5
+ "browserHash": "07baafca",
6
+ "optimized": {
7
+ "vue": {
8
+ "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
9
+ "file": "vue.js",
10
+ "fileHash": "9d1dccd0",
11
+ "needsInterop": false
12
+ },
13
+ "vitepress > @vue/devtools-api": {
14
+ "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
15
+ "file": "vitepress___@vue_devtools-api.js",
16
+ "fileHash": "e643fe21",
17
+ "needsInterop": false
18
+ },
19
+ "vitepress > @vueuse/core": {
20
+ "src": "../../../../node_modules/@vueuse/core/index.mjs",
21
+ "file": "vitepress___@vueuse_core.js",
22
+ "fileHash": "6b190c4d",
23
+ "needsInterop": false
24
+ },
25
+ "@braintree/sanitize-url": {
26
+ "src": "../../../../node_modules/@braintree/sanitize-url/dist/index.js",
27
+ "file": "@braintree_sanitize-url.js",
28
+ "fileHash": "6c19b9da",
29
+ "needsInterop": true
30
+ },
31
+ "dayjs": {
32
+ "src": "../../../../node_modules/dayjs/dayjs.min.js",
33
+ "file": "dayjs.js",
34
+ "fileHash": "fde7931e",
35
+ "needsInterop": true
36
+ },
37
+ "debug": {
38
+ "src": "../../../../node_modules/debug/src/browser.js",
39
+ "file": "debug.js",
40
+ "fileHash": "4fba4867",
41
+ "needsInterop": true
42
+ },
43
+ "cytoscape-cose-bilkent": {
44
+ "src": "../../../../node_modules/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js",
45
+ "file": "cytoscape-cose-bilkent.js",
46
+ "fileHash": "817be336",
47
+ "needsInterop": true
48
+ },
49
+ "cytoscape": {
50
+ "src": "../../../../node_modules/cytoscape/dist/cytoscape.esm.mjs",
51
+ "file": "cytoscape.js",
52
+ "fileHash": "4497f16b",
53
+ "needsInterop": false
54
+ },
55
+ "vitepress > @vueuse/integrations/useFocusTrap": {
56
+ "src": "../../../../node_modules/@vueuse/integrations/useFocusTrap.mjs",
57
+ "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
58
+ "fileHash": "05a85443",
59
+ "needsInterop": false
60
+ },
61
+ "vitepress > mark.js/src/vanilla.js": {
62
+ "src": "../../../../node_modules/mark.js/src/vanilla.js",
63
+ "file": "vitepress___mark__js_src_vanilla__js.js",
64
+ "fileHash": "706305bb",
65
+ "needsInterop": false
66
+ },
67
+ "vitepress > minisearch": {
68
+ "src": "../../../../node_modules/minisearch/dist/es/index.js",
69
+ "file": "vitepress___minisearch.js",
70
+ "fileHash": "c66551d8",
71
+ "needsInterop": false
72
+ }
73
+ },
74
+ "chunks": {
75
+ "chunk-Q2AYPHVK": {
76
+ "file": "chunk-Q2AYPHVK.js"
77
+ },
78
+ "chunk-QAXAIFA7": {
79
+ "file": "chunk-QAXAIFA7.js"
80
+ },
81
+ "chunk-BUSYA2B4": {
82
+ "file": "chunk-BUSYA2B4.js"
83
+ }
84
+ }
85
+ }
@@ -19,17 +19,22 @@ const config = {
19
19
  { icon: 'github', link: 'https://github.com/webqit/webflo' },
20
20
  ],
21
21
  nav: [
22
- { text: 'Docs', link: '/docs', activeMatch: '/docs' },
22
+ { text: 'What is Webflo', link: '/overview', activeMatch: '/overview' },
23
+ { text: 'Docs', link: '/docs/getting-started', activeMatch: '/docs' },
23
24
  { text: 'API', link: '/api', activeMatch: '/api/webflo-routing/handler' },
24
25
  { text: 'Guides', link: '/guides', activeMatch: '/guides' },
25
26
  { text: 'Examples', link: '/examples', activeMatch: '/examples' },
27
+ {
28
+ text: 'Star on GitHub',
29
+ link: 'https://github.com/webqit/webflo',
30
+ }
26
31
  ],
27
32
  sidebar: {
28
33
  '/': [
29
34
  {
30
35
  text: 'Getting Started',
31
36
  items: [
32
- { text: 'Welcome', link: '/docs' },
37
+ { text: 'What is Webflo', link: '/overview' },
33
38
  { text: 'Quickstart', link: '/docs/getting-started' },
34
39
  ]
35
40
  },
@@ -2,6 +2,18 @@
2
2
 
3
3
  Welcome! This guide will help you build your first Webflo app from scratch and get it running in minutes, even if you’ve never used the framework before. You’ll learn not just the “how,” but the “why”—and see your results live in the browser.
4
4
 
5
+ If you're totally new here, you may want to [meet Webflo](/docs/overview).
6
+
7
+ ---
8
+
9
+ > [!IMPORTANT]
10
+ > 🚀 **Webflo is in active development and evolving daily.** Current status = **beta**.<br>
11
+ > You’re welcome to experiment, but it’s not yet suited for production workloads.
12
+
13
+ ::: warning Work in Progress
14
+ This documentation is a work in progress. Please expect some rough edges, missing information, and incomplete pages.
15
+ :::
16
+
5
17
  ## Prerequisites
6
18
 
7
19
  - **Node.js** 18+ installed
package/site/docs.md CHANGED
@@ -1,100 +1,5 @@
1
- # Webflo <br>— A Web-Native Framework for the Next Gen
1
+ # Welcome to the Webflo Docs
2
2
 
3
- _Build the full spectrum of modern apps — backends, frontends, offline-first, and realtime apps — on raw platform power._
4
-
5
- Welcome to the docs.
6
-
7
- ## What is Webflo
8
-
9
- Webflo is a web-native framework that lets you build backends, frontends, offline-first, and realtime apps absurdly fast.
10
-
11
- "Web-native." The cheatcode, if you caught it.<br>
12
- Just programming fundamentals and raw platform power, shipped in a framework.
13
- Modern apps — their sophistication and scale — solved from the foundation up.
14
-
15
- ## Why Webflo
16
-
17
- Webflo shares the same broad use cases as traditional frameworks, but it is designed on an entirely different premise:
18
- **walk the traditional framework ladder back to programming fundamentals and sheer platform capabilities** — not merely to align with web standards, **but to put the foundations to work in new ways**. From JavaScript to HTML, to the web's transport layer, we took existing fundamentals and built new ones — to give developers less machinery, more leverage.
19
-
20
- **An engineer’s tour…**
21
-
22
- ### Mutation-Based Reactivity
23
-
24
- At the foundation is an all-new reactive model: **mutation-based reactivity**, powered by the [Observer API](/docs/tech-stack#the-observer-api). With this model, Webflo anchors itself on JavaScript’s direct mutation semantics and makes it its own engine of reactivity across the whole stack — server, worker, and client. Reactivity just works as program state changes.
25
- This means:
26
-
27
- * **State is just objects and arrays**. With reactivity solved at the object level, no need for stores, hooks, signals, proxies, reducers, or container types. The object you see _is_ the state.
28
- * **Mutation becomes the shared language of reactivity across the system** — whether on the server, the service worker, or the UI.
29
- * **With no layers of indirection, mental model stays simple**. At any given time, you're simply either making mutations or observing mutations — exactly as you would without any framework.
30
-
31
- This enables **a new generation of apps that entirely avoid the traditional state scaffolding and the inherent cost of forbidding mutability in a mutable world as JavaScript**.
32
-
33
- ### Realtime Over HTTP
34
-
35
- Webflo extends the HTTP request/response model with realtime capabilities that let request handlers opt into an interactive, realtime channel with the client — exposed as `event.client`. Webflo automatically upgrades the underlying transport and manages the request lifecycle.
36
- You get a capable transport layer that can be used for many things. Webflo builds on that to enable:
37
-
38
- + **A multi-stage response model via `LiveResponse`**. Send multiple responses at different stages of request processing: `liveResponse.replaceWith()`, `event.respondWith()`, etc. Clients swap state and rerender accordingly.
39
- + **Differential, live state over the wire**. Share live state with the client and mutate it in place as you deem fit: `Observer.set(liveResponse.body, name, value)`, `Observer.proxy(liveResponse.body.items).push(item)`, etc. Clients preserve state and reflect diffs. Application state goes fullstack.
40
- + **Interactive request handling**. Pause request processing to interact with the user as the need may arise: `event.user.confirm()`, `event.user.prompt()`, etc. Clients initiate the corresponding dialog with the user and reply.
41
-
42
- Together with the `event.client` API itself, you get a unified surface for many different realtime apps — collaboration, multi-device presence, multiplayer, streaming progress, and more — with no extra wiring or protocols.
43
-
44
- ### HTML for the Modern UI
45
-
46
- Webflo brings HTML into the application authoring equation as its direct UI language — instead of as compile target. It converges on a design that leaves the UI layer entirely in HTML terms — and upgrades the authoring experience via first-class integration with [Object-Oriented HTML (OOHTML)](/docs/tech-stack#oohtml). OOHTML extends HTML with capabilities like **modularity & reusability**, **reactivity & data binding** — **without a build step**. You get:
47
-
48
- * **Modular imports and composable templates** (`<template def>` and `<import ref>`) as first-class primitives.
49
- * **Scoped styles and scripts, and even scoped subtrees** without Shadow DOM complexity (`<script scoped>`, `<style scoped>`, `<div namespace>`).
50
- * **Reactive bindings without a compile step** — via HTML attributes and HTML comment (`<!--{ title }-->`, `<?{ title }?>`).
51
-
52
- This solves for the sophistication of modern UIs in just HTML, without the complexity of a compile step. With that out of the way, you get **edit-in-browser workflows** where the UI directly reflects live DOM manipulation via the browser inspector.
53
-
54
- ### The Service Worker as an Embedded Edge Runtime
55
-
56
- Webflo brings the service worker into the application model as a full routing runtime — extending it beyond its traditional role as a cache script or network proxy.
57
- The shift lets you bring your application routes into the service worker, with the same routing architecture and request-handling capabilities as the server and client runtimes. This unlocks:
58
-
59
- * **Fullstack routing**. Distribute route handlers across, not two, but three runtimes (server, worker, client) as you deem fit. Same routing architecture, same request-handling capabilities.
60
- * **More performant client-side routing**. Move compute-intensive routing logic into the service worker runtime from the main thread to keep the UI responsive.
61
- * **Route-based background tasks**. Sync, periodic events, and push notifications map into routes naturally, not into separate worker-only APIs. One routing architecture for many use cases.
62
-
63
- The service worker as a new routing site exposes this underutilized layer of the platform as a _standard application surface to build on_ — like an embedded edge runtime — taking the application closer to the heart of the platform’s capabilities than traditional architectures allow.
64
-
65
- ---
66
-
67
- **What this means**: Webflo is an orchestration of programming fundamentals, web platform capabilities, and the web’s communication protocols into an application framework for the next generation of web apps. With just the fundamentals as the entire application stack — _and no extra thing "going on"_ — Webflo achieves a rare level of conceptual and operational simplicity that makes the sophistication of modern apps feel _almost_ trivial.
68
-
69
- ## What You Can Build
70
-
71
- | Category | Examples & Notes |
72
- | :------------------------- | :--------------------------------------------------------------------------------------------------------------- |
73
- | **Web apps** | From classic MPAs to rich SPAs, hybrid SSR/CSR experiences, and full PWAs — all built on one unified framework. |
74
- | **API backends** | REST endpoints, serverless-style handlers, and webhooks with streaming, partial responses, and live messaging. |
75
- | **Static sites** | Static-first or fully pre-rendered sites that seamlessly upgrade sections to live or interactive behavior. |
76
- | **Mobile experiences** | Installable, offline-capable PWAs with background sync, worker routing, and native-feeling navigation. |
77
- | **Realtime & multiplayer** | Chats, presence, dashboards, live docs, notifications — realtime channels and dialogs available out of the box. |
78
- | **AI & agents** | Multi-step AI workflows, background agents, and automation powered by Webflo’s live request lifecycle. |
79
-
80
- ## Features
81
-
82
- | Feature | Description |
83
- | :------------------------------------ | :-------------------------------------------------------------------------------------------------- |
84
- | 📁 **Folder-based routing** | Filesystem routing across client, worker, and server layers, with seamless interception and flow. |
85
- | 🌍 **Full-stack routing & lifecycle** | Every request flows through browser, worker, and server layers using the same handler model. |
86
- | 🔗 **Internal API composition** | Reuse your own routes as local function calls via `next(path)` — no extra networking required. |
87
- | 🔐 **Sessions & auth** | Built-in cookie handling, session utilities, and helpers for gated routes and user-aware flows. |
88
- | ⚡ **Realtime capabilities** | Live responses, incremental updates, dialogs, and background channels — no explicit WebSocket setup. |
89
- | 🧠 **Mutation-based reactivity** | State is plain objects and arrays; mutations drive reactivity via the Observer API. |
90
- | 🧱 **OOHTML integration** | HTML-native templates, imports, and composition without a component DSL or build-heavy toolchain. |
91
- | 📦 **Offline & worker features** | Worker-side routing, caching, background sync, and offline-first behaviors built in. |
92
- | 🧩 **Dev mode & HMR** | Fast development server with fine-grained rebuilds and hot updates for HTML, JS, and CSS. |
93
-
94
- ## Get Started
95
-
96
- | Path | Focus |
97
- | :------------------------------------------- | :---------------------------------------------------------------- |
98
- | [Getting Started](./docs/getting-started) | Your first route and page in minutes. |
99
- | [Core Concepts](./docs/concepts) | The mental models behind routing, request/response, and realtime. |
100
- | [Examples](./examples) | Small, focused examples. |
3
+ + [Getting Started](./docs/getting-started)
4
+ + [Core Concepts](./docs/concepts)
5
+ + [Examples](./examples)
package/site/index.md CHANGED
@@ -2,7 +2,7 @@
2
2
  layout: home
3
3
  hero:
4
4
  name: Webflo
5
- text: Modern Web Application Framework
5
+ text: A Web-Native Framework for the Next Gen
6
6
  tagline: Build scalable, real-time, and reactive web apps with ease.
7
7
  image:
8
8
  src: /img/brand/logo-670x670.png
@@ -12,6 +12,9 @@ hero:
12
12
  - theme: brand
13
13
  text: Get Started
14
14
  link: /docs/getting-started
15
+ - theme: brand
16
+ text: Meet Webflo
17
+ link: /overview
15
18
  - theme: alt
16
19
  text: Star on GitHub
17
20
  link: https://github.com/webqit/webflo
@@ -0,0 +1,101 @@
1
+ # Webflo <br>— A Web-Native Framework for the Next Gen
2
+
3
+ _Build the full spectrum of modern apps — backends, frontends, offline-first, and realtime apps — on raw platform power._
4
+
5
+ Welcome to the docs.
6
+
7
+ ## What is Webflo
8
+
9
+ Webflo is a web-native framework that lets you build backends, frontends, offline-first, and realtime apps absurdly fast.
10
+
11
+ "Web-native." The cheatcode, if you caught it.<br>
12
+ Just programming fundamentals and raw platform power, shipped in a framework.
13
+ Modern apps — their sophistication and scale — solved from the foundation up.
14
+
15
+ ## Why Webflo
16
+
17
+ Webflo shares the same broad use cases as traditional frameworks, but it is designed on an entirely different premise:
18
+ **walk the traditional framework ladder back to programming fundamentals and sheer platform capabilities** — not merely to align with web standards, **but to put the foundations to work in new ways**. From JavaScript to HTML, to the web's transport layer, we took existing fundamentals and built new ones — to give developers less machinery, more leverage.
19
+
20
+ **An engineer’s tour…**
21
+
22
+ ### Mutation-Based Reactivity
23
+
24
+ At the foundation is an all-new reactive model: **mutation-based reactivity**, powered by the [Observer API](https://github.com/webqit/observer). With this model, Webflo anchors itself on JavaScript’s direct mutation semantics and makes it its own engine of reactivity across the whole stack — server, worker, and client. Reactivity just works as program state changes.
25
+ This means:
26
+
27
+ * **State is just objects and arrays**. With reactivity solved at the object level, no need for stores, hooks, signals, proxies, reducers, or container types. The object you see _is_ the state.
28
+ * **Mutation becomes the shared language of reactivity across the system** — whether on the server, the service worker, or the UI.
29
+ * **With no layers of indirection, mental model stays simple**. At any given time, you're simply either making mutations or observing mutations — exactly as you would without any framework.
30
+
31
+ This enables **a new generation of apps that entirely avoid the traditional state scaffolding and the inherent cost of forbidding mutability in a mutable world as JavaScript**.
32
+
33
+ ### Realtime Over HTTP
34
+
35
+ Webflo extends the HTTP request/response model with realtime capabilities that let request handlers opt into an interactive, realtime channel with the client — exposed as `event.client`. Webflo automatically upgrades the underlying transport and manages the request lifecycle.
36
+ You get a capable transport layer that can be used for many things. Webflo builds on that to enable:
37
+
38
+ + **A multi-stage response model via `LiveResponse`**. Send multiple responses at different stages of request processing: `liveResponse.replaceWith()`, `event.respondWith()`, etc. Clients swap state and rerender accordingly.
39
+ + **Differential, live state over the wire**. Share live state with the client and mutate it in place as you deem fit: `Observer.set(liveResponse.body, name, value)`, `Observer.proxy(liveResponse.body.items).push(item)`, etc. Clients preserve state and reflect diffs. Application state goes fullstack.
40
+ + **Interactive request handling**. Pause request processing to interact with the user as the need may arise: `event.user.confirm()`, `event.user.prompt()`, etc. Clients initiate the corresponding dialog with the user and reply.
41
+
42
+ Together with the `event.client` API itself, you get a unified surface for many different realtime apps — collaboration, multi-device presence, multiplayer, streaming progress, and more — with no extra wiring or protocols.
43
+
44
+ ### HTML for the Modern UI
45
+
46
+ Webflo brings HTML into the application authoring equation as its direct UI language — instead of as compile target. It converges on a design that leaves the UI layer entirely in HTML terms — and upgrades the authoring experience via first-class integration with [Object-Oriented HTML (OOHTML)](https://github.com/webqit/oohtml). OOHTML extends HTML with capabilities like **modularity & reusability**, **reactivity & data binding** — **without a build step**. You get:
47
+
48
+ * **Modular imports and composable templates** (`<template def>` and `<import ref>`) as first-class primitives.
49
+ * **Scoped styles and scripts, and even scoped subtrees** without Shadow DOM complexity (`<script scoped>`, `<style scoped>`, `<div namespace>`).
50
+ * **Reactive bindings without a compile step** — via HTML attributes and HTML comments (`<!--{ title }-->`, `<?{ title }?>`).
51
+
52
+ This solves for the sophistication of modern UIs in just HTML, without the complexity of a compile step. With that out of the way, you get **edit-in-browser workflows** where the UI directly reflects live DOM manipulation via the browser inspector.
53
+
54
+ ### The Service Worker as an Embedded Edge Runtime
55
+
56
+ Webflo brings the service worker into the application model as a full routing runtime — extending it beyond its traditional role as a cache script or network proxy.
57
+ The shift lets you bring your application routes into the service worker, with the same routing architecture and request-handling capabilities as the server and client runtimes. This unlocks:
58
+
59
+ * **Fullstack routing**. Distribute route handlers across, not two, but three runtimes (server, worker, client) as you deem fit. Same routing architecture, same request-handling capabilities.
60
+ * **More performant client-side routing**. Move compute-intensive routing logic into the service worker runtime from the main thread to keep the UI responsive.
61
+ * **Route-based background tasks**. Sync, periodic events, and push notifications map into routes naturally, not into separate worker-only APIs. One routing architecture for many use cases.
62
+
63
+ The service worker as a new routing site exposes this underutilized layer of the platform as a _standard application surface to build on_ — like an embedded edge runtime — taking the application closer to the heart of the platform’s capabilities than traditional architectures allow.
64
+
65
+ ---
66
+
67
+ **What this means**: Webflo is an orchestration of programming fundamentals, web platform capabilities, and the web’s communication protocols into an application framework. With just the fundamentals as the entire application stack — _and no extra thing "going on"_ — Webflo achieves a rare level of conceptual and operational simplicity that makes really complex modern apps feel _almost_ trivial.
68
+
69
+ ## What You Can Build
70
+
71
+ | Category | Examples & Notes |
72
+ | :------------------------- | :--------------------------------------------------------------------------------------------------------------- |
73
+ | **Web apps** | From classic MPAs to rich SPAs, hybrid SSR/CSR experiences, and full PWAs — all built on one unified framework. |
74
+ | **API backends** | REST endpoints, serverless-style handlers, and webhooks with streaming, partial responses, and live messaging. |
75
+ | **Static sites** | Static-first or fully pre-rendered sites that seamlessly upgrade sections to live or interactive behavior. |
76
+ | **Mobile experiences** | Installable, offline-capable PWAs with background sync, worker routing, and native-feeling navigation. |
77
+ | **Realtime & multiplayer** | Chats, presence, dashboards, live docs, notifications — realtime channels and dialogs available out of the box. |
78
+ | **AI & agents** | Multi-step AI workflows, background agents, and automation powered by Webflo’s live request lifecycle. |
79
+
80
+ ## Features
81
+
82
+ | Feature | Description |
83
+ | :------------------------------------ | :-------------------------------------------------------------------------------------------------- |
84
+ | 📁 **Folder-based routing** | Filesystem routing across client, worker, and server layers, with seamless interception and flow. |
85
+ | 🌍 **Full-stack routing & lifecycle** | Every request flows through browser, worker, and server layers using the same handler model. |
86
+ | 🔗 **Internal API composition** | Reuse your own routes as local function calls via `next(path)` — no extra networking required. |
87
+ | 🔐 **Sessions & auth** | Built-in cookie handling, session utilities, and helpers for gated routes and user-aware flows. |
88
+ | ⚡ **Realtime capabilities** | Live responses, incremental updates, dialogs, and background channels — no explicit WebSocket setup. |
89
+ | 🧠 **Mutation-based reactivity** | State is plain objects and arrays; mutations drive reactivity via the Observer API. |
90
+ | 🧱 **OOHTML integration** | HTML-native templates, imports, and composition without a component DSL or build-heavy toolchain. |
91
+ | 📦 **Offline & worker features** | Worker-side routing, caching, background sync, and offline-first behaviors built in. |
92
+ | 🧩 **Dev mode & HMR** | Fast development server with fine-grained rebuilds and hot updates for HTML, JS, and CSS. |
93
+
94
+ ## Get Started
95
+
96
+ | Path | Focus |
97
+ | :------------------------------------------- | :---------------------------------------------------------------- |
98
+ | [Getting Started](./docs/getting-started) | Your first route and page in minutes. |
99
+ | [Core Concepts](./docs/concepts) | The mental models behind routing, request/response, and realtime. |
100
+ | [Examples](./examples) | Small, focused examples. |
101
+
@@ -1,93 +0,0 @@
1
- import {
2
- __commonJS
3
- } from "./chunk-BUSYA2B4.js";
4
-
5
- // node_modules/@braintree/sanitize-url/dist/constants.js
6
- var require_constants = __commonJS({
7
- "node_modules/@braintree/sanitize-url/dist/constants.js"(exports) {
8
- "use strict";
9
- Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.BLANK_URL = exports.relativeFirstCharacters = exports.whitespaceEscapeCharsRegex = exports.urlSchemeRegex = exports.ctrlCharactersRegex = exports.htmlCtrlEntityRegex = exports.htmlEntitiesRegex = exports.invalidProtocolRegex = void 0;
11
- exports.invalidProtocolRegex = /^([^\w]*)(javascript|data|vbscript)/im;
12
- exports.htmlEntitiesRegex = /&#(\w+)(^\w|;)?/g;
13
- exports.htmlCtrlEntityRegex = /&(newline|tab);/gi;
14
- exports.ctrlCharactersRegex = /[\u0000-\u001F\u007F-\u009F\u2000-\u200D\uFEFF]/gim;
15
- exports.urlSchemeRegex = /^.+(:|&colon;)/gim;
16
- exports.whitespaceEscapeCharsRegex = /(\\|%5[cC])((%(6[eE]|72|74))|[nrt])/g;
17
- exports.relativeFirstCharacters = [".", "/"];
18
- exports.BLANK_URL = "about:blank";
19
- }
20
- });
21
-
22
- // node_modules/@braintree/sanitize-url/dist/index.js
23
- var require_dist = __commonJS({
24
- "node_modules/@braintree/sanitize-url/dist/index.js"(exports) {
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.sanitizeUrl = void 0;
27
- var constants_1 = require_constants();
28
- function isRelativeUrlWithoutProtocol(url) {
29
- return constants_1.relativeFirstCharacters.indexOf(url[0]) > -1;
30
- }
31
- function decodeHtmlCharacters(str) {
32
- var removedNullByte = str.replace(constants_1.ctrlCharactersRegex, "");
33
- return removedNullByte.replace(constants_1.htmlEntitiesRegex, function(match, dec) {
34
- return String.fromCharCode(dec);
35
- });
36
- }
37
- function isValidUrl(url) {
38
- return URL.canParse(url);
39
- }
40
- function decodeURI(uri) {
41
- try {
42
- return decodeURIComponent(uri);
43
- } catch (e) {
44
- return uri;
45
- }
46
- }
47
- function sanitizeUrl(url) {
48
- if (!url) {
49
- return constants_1.BLANK_URL;
50
- }
51
- var charsToDecode;
52
- var decodedUrl = decodeURI(url.trim());
53
- do {
54
- decodedUrl = decodeHtmlCharacters(decodedUrl).replace(constants_1.htmlCtrlEntityRegex, "").replace(constants_1.ctrlCharactersRegex, "").replace(constants_1.whitespaceEscapeCharsRegex, "").trim();
55
- decodedUrl = decodeURI(decodedUrl);
56
- charsToDecode = decodedUrl.match(constants_1.ctrlCharactersRegex) || decodedUrl.match(constants_1.htmlEntitiesRegex) || decodedUrl.match(constants_1.htmlCtrlEntityRegex) || decodedUrl.match(constants_1.whitespaceEscapeCharsRegex);
57
- } while (charsToDecode && charsToDecode.length > 0);
58
- var sanitizedUrl = decodedUrl;
59
- if (!sanitizedUrl) {
60
- return constants_1.BLANK_URL;
61
- }
62
- if (isRelativeUrlWithoutProtocol(sanitizedUrl)) {
63
- return sanitizedUrl;
64
- }
65
- var trimmedUrl = sanitizedUrl.trimStart();
66
- var urlSchemeParseResults = trimmedUrl.match(constants_1.urlSchemeRegex);
67
- if (!urlSchemeParseResults) {
68
- return sanitizedUrl;
69
- }
70
- var urlScheme = urlSchemeParseResults[0].toLowerCase().trim();
71
- if (constants_1.invalidProtocolRegex.test(urlScheme)) {
72
- return constants_1.BLANK_URL;
73
- }
74
- var backSanitized = trimmedUrl.replace(/\\/g, "/");
75
- if (urlScheme === "mailto:" || urlScheme.includes("://")) {
76
- return backSanitized;
77
- }
78
- if (urlScheme === "http:" || urlScheme === "https:") {
79
- if (!isValidUrl(backSanitized)) {
80
- return constants_1.BLANK_URL;
81
- }
82
- var url_1 = new URL(backSanitized);
83
- url_1.protocol = url_1.protocol.toLowerCase();
84
- url_1.hostname = url_1.hostname.toLowerCase();
85
- return url_1.toString();
86
- }
87
- return backSanitized;
88
- }
89
- exports.sanitizeUrl = sanitizeUrl;
90
- }
91
- });
92
- export default require_dist();
93
- //# sourceMappingURL=@braintree_sanitize-url.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../node_modules/@braintree/sanitize-url/dist/constants.js", "../../../../node_modules/@braintree/sanitize-url/dist/index.js"],
4
- "sourcesContent": ["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BLANK_URL = exports.relativeFirstCharacters = exports.whitespaceEscapeCharsRegex = exports.urlSchemeRegex = exports.ctrlCharactersRegex = exports.htmlCtrlEntityRegex = exports.htmlEntitiesRegex = exports.invalidProtocolRegex = void 0;\nexports.invalidProtocolRegex = /^([^\\w]*)(javascript|data|vbscript)/im;\nexports.htmlEntitiesRegex = /&#(\\w+)(^\\w|;)?/g;\nexports.htmlCtrlEntityRegex = /&(newline|tab);/gi;\nexports.ctrlCharactersRegex = /[\\u0000-\\u001F\\u007F-\\u009F\\u2000-\\u200D\\uFEFF]/gim;\nexports.urlSchemeRegex = /^.+(:|&colon;)/gim;\nexports.whitespaceEscapeCharsRegex = /(\\\\|%5[cC])((%(6[eE]|72|74))|[nrt])/g;\nexports.relativeFirstCharacters = [\".\", \"/\"];\nexports.BLANK_URL = \"about:blank\";\n", "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.sanitizeUrl = void 0;\nvar constants_1 = require(\"./constants\");\nfunction isRelativeUrlWithoutProtocol(url) {\n return constants_1.relativeFirstCharacters.indexOf(url[0]) > -1;\n}\nfunction decodeHtmlCharacters(str) {\n var removedNullByte = str.replace(constants_1.ctrlCharactersRegex, \"\");\n return removedNullByte.replace(constants_1.htmlEntitiesRegex, function (match, dec) {\n return String.fromCharCode(dec);\n });\n}\nfunction isValidUrl(url) {\n return URL.canParse(url);\n}\nfunction decodeURI(uri) {\n try {\n return decodeURIComponent(uri);\n }\n catch (e) {\n // Ignoring error\n // It is possible that the URI contains a `%` not associated\n // with URI/URL-encoding.\n return uri;\n }\n}\nfunction sanitizeUrl(url) {\n if (!url) {\n return constants_1.BLANK_URL;\n }\n var charsToDecode;\n var decodedUrl = decodeURI(url.trim());\n do {\n decodedUrl = decodeHtmlCharacters(decodedUrl)\n .replace(constants_1.htmlCtrlEntityRegex, \"\")\n .replace(constants_1.ctrlCharactersRegex, \"\")\n .replace(constants_1.whitespaceEscapeCharsRegex, \"\")\n .trim();\n decodedUrl = decodeURI(decodedUrl);\n charsToDecode =\n decodedUrl.match(constants_1.ctrlCharactersRegex) ||\n decodedUrl.match(constants_1.htmlEntitiesRegex) ||\n decodedUrl.match(constants_1.htmlCtrlEntityRegex) ||\n decodedUrl.match(constants_1.whitespaceEscapeCharsRegex);\n } while (charsToDecode && charsToDecode.length > 0);\n var sanitizedUrl = decodedUrl;\n if (!sanitizedUrl) {\n return constants_1.BLANK_URL;\n }\n if (isRelativeUrlWithoutProtocol(sanitizedUrl)) {\n return sanitizedUrl;\n }\n // Remove any leading whitespace before checking the URL scheme\n var trimmedUrl = sanitizedUrl.trimStart();\n var urlSchemeParseResults = trimmedUrl.match(constants_1.urlSchemeRegex);\n if (!urlSchemeParseResults) {\n return sanitizedUrl;\n }\n var urlScheme = urlSchemeParseResults[0].toLowerCase().trim();\n if (constants_1.invalidProtocolRegex.test(urlScheme)) {\n return constants_1.BLANK_URL;\n }\n var backSanitized = trimmedUrl.replace(/\\\\/g, \"/\");\n // Handle special cases for mailto: and custom deep-link protocols\n if (urlScheme === \"mailto:\" || urlScheme.includes(\"://\")) {\n return backSanitized;\n }\n // For http and https URLs, perform additional validation\n if (urlScheme === \"http:\" || urlScheme === \"https:\") {\n if (!isValidUrl(backSanitized)) {\n return constants_1.BLANK_URL;\n }\n var url_1 = new URL(backSanitized);\n url_1.protocol = url_1.protocol.toLowerCase();\n url_1.hostname = url_1.hostname.toLowerCase();\n return url_1.toString();\n }\n return backSanitized;\n}\nexports.sanitizeUrl = sanitizeUrl;\n"],
5
- "mappings": ";;;;;AAAA;AAAA;AAAA;AACA,WAAO,eAAe,SAAS,cAAc,EAAE,OAAO,KAAK,CAAC;AAC5D,YAAQ,YAAY,QAAQ,0BAA0B,QAAQ,6BAA6B,QAAQ,iBAAiB,QAAQ,sBAAsB,QAAQ,sBAAsB,QAAQ,oBAAoB,QAAQ,uBAAuB;AAC3O,YAAQ,uBAAuB;AAC/B,YAAQ,oBAAoB;AAC5B,YAAQ,sBAAsB;AAC9B,YAAQ,sBAAsB;AAC9B,YAAQ,iBAAiB;AACzB,YAAQ,6BAA6B;AACrC,YAAQ,0BAA0B,CAAC,KAAK,GAAG;AAC3C,YAAQ,YAAY;AAAA;AAAA;;;ACVpB;AAAA;AACA,WAAO,eAAe,SAAS,cAAc,EAAE,OAAO,KAAK,CAAC;AAC5D,YAAQ,cAAc;AACtB,QAAI,cAAc;AAClB,aAAS,6BAA6B,KAAK;AACvC,aAAO,YAAY,wBAAwB,QAAQ,IAAI,CAAC,CAAC,IAAI;AAAA,IACjE;AACA,aAAS,qBAAqB,KAAK;AAC/B,UAAI,kBAAkB,IAAI,QAAQ,YAAY,qBAAqB,EAAE;AACrE,aAAO,gBAAgB,QAAQ,YAAY,mBAAmB,SAAU,OAAO,KAAK;AAChF,eAAO,OAAO,aAAa,GAAG;AAAA,MAClC,CAAC;AAAA,IACL;AACA,aAAS,WAAW,KAAK;AACrB,aAAO,IAAI,SAAS,GAAG;AAAA,IAC3B;AACA,aAAS,UAAU,KAAK;AACpB,UAAI;AACA,eAAO,mBAAmB,GAAG;AAAA,MACjC,SACO,GAAG;AAIN,eAAO;AAAA,MACX;AAAA,IACJ;AACA,aAAS,YAAY,KAAK;AACtB,UAAI,CAAC,KAAK;AACN,eAAO,YAAY;AAAA,MACvB;AACA,UAAI;AACJ,UAAI,aAAa,UAAU,IAAI,KAAK,CAAC;AACrC,SAAG;AACC,qBAAa,qBAAqB,UAAU,EACvC,QAAQ,YAAY,qBAAqB,EAAE,EAC3C,QAAQ,YAAY,qBAAqB,EAAE,EAC3C,QAAQ,YAAY,4BAA4B,EAAE,EAClD,KAAK;AACV,qBAAa,UAAU,UAAU;AACjC,wBACI,WAAW,MAAM,YAAY,mBAAmB,KAC5C,WAAW,MAAM,YAAY,iBAAiB,KAC9C,WAAW,MAAM,YAAY,mBAAmB,KAChD,WAAW,MAAM,YAAY,0BAA0B;AAAA,MACnE,SAAS,iBAAiB,cAAc,SAAS;AACjD,UAAI,eAAe;AACnB,UAAI,CAAC,cAAc;AACf,eAAO,YAAY;AAAA,MACvB;AACA,UAAI,6BAA6B,YAAY,GAAG;AAC5C,eAAO;AAAA,MACX;AAEA,UAAI,aAAa,aAAa,UAAU;AACxC,UAAI,wBAAwB,WAAW,MAAM,YAAY,cAAc;AACvE,UAAI,CAAC,uBAAuB;AACxB,eAAO;AAAA,MACX;AACA,UAAI,YAAY,sBAAsB,CAAC,EAAE,YAAY,EAAE,KAAK;AAC5D,UAAI,YAAY,qBAAqB,KAAK,SAAS,GAAG;AAClD,eAAO,YAAY;AAAA,MACvB;AACA,UAAI,gBAAgB,WAAW,QAAQ,OAAO,GAAG;AAEjD,UAAI,cAAc,aAAa,UAAU,SAAS,KAAK,GAAG;AACtD,eAAO;AAAA,MACX;AAEA,UAAI,cAAc,WAAW,cAAc,UAAU;AACjD,YAAI,CAAC,WAAW,aAAa,GAAG;AAC5B,iBAAO,YAAY;AAAA,QACvB;AACA,YAAI,QAAQ,IAAI,IAAI,aAAa;AACjC,cAAM,WAAW,MAAM,SAAS,YAAY;AAC5C,cAAM,WAAW,MAAM,SAAS,YAAY;AAC5C,eAAO,MAAM,SAAS;AAAA,MAC1B;AACA,aAAO;AAAA,IACX;AACA,YAAQ,cAAc;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,9 +0,0 @@
1
- var __getOwnPropNames = Object.getOwnPropertyNames;
2
- var __commonJS = (cb, mod) => function __require() {
3
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
4
- };
5
-
6
- export {
7
- __commonJS
8
- };
9
- //# sourceMappingURL=chunk-BUSYA2B4.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": [],
4
- "sourcesContent": [],
5
- "mappings": "",
6
- "names": []
7
- }