From 2735c2dae03f8c4ddcaa01e0ab3176dda4b47ada Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?= Date: Tue, 2 Sep 2025 14:00:18 -0600 Subject: [PATCH] docs: Add diagram explaining general mechanisms --- docs/how-it-works.drawio | 153 +++++++++++++++++++++++++++++++++++++++ docs/how-it-works.svg | 1 + 2 files changed, 154 insertions(+) create mode 100644 docs/how-it-works.drawio create mode 100644 docs/how-it-works.svg diff --git a/docs/how-it-works.drawio b/docs/how-it-works.drawio new file mode 100644 index 0000000..6198ad9 --- /dev/null +++ b/docs/how-it-works.drawio @@ -0,0 +1,153 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/how-it-works.svg b/docs/how-it-works.svg new file mode 100644 index 0000000..5500d35 --- /dev/null +++ b/docs/how-it-works.svg @@ -0,0 +1 @@ +
init()
Sets reactive location.
init()...
<Router>
Adds context.
Links to parent.
Defines reactive matching.
<Router>...
<Route>
Retrieves context.
Registers matching conditions.
<Route>...
Reactivity
Reactive matching evaluates routes as soon as they appear.
Reactivity...
<Route>
Reactively shows or hides children.
<Route>...
Change of Reactive State
  • Location
  • Read state during route evaluation
Change of Reactive State...
Reactivity
All routers re-evaluate all routes
Reactivity...
<Route>
Reactively shows or hides children.
<Route>...
First Render
First Render
Operation
Operation
Route Evaluation
Route Evaluation
Calculate test path
Calculate test path
Every route:
Every route:
Test path & extract params
Test path & extract params
Yes
Yes
No
No
Path Match?
Path Match?
Yes
Yes
No
No
and predicate?
and predicate?
Route Match!
Route Match!
Route Mismatch
Route MismatchText is not SVG - cannot display \ No newline at end of file