v3.0.0b1

README.md

@@ -1,8 +1,8 @@
 # <img src="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg" align="left" height="45"/> ReactPy Router
 
 <p>
-    <a href="https://github.com/reactive-python/reactpy-router/actions/workflows/test-python.yml">
-        <img src="https://github.com/reactive-python/reactpy-router/actions/workflows/test-python.yml/badge.svg">
+    <a href="https://github.com/reactive-python/reactpy-router/actions/workflows/check.yml">
+        <img src="https://github.com/reactive-python/reactpy-router/actions/workflows/check.yml/badge.svg">
     </a>
     <a href="https://pypi.python.org/pypi/reactpy-router">
         <img src="https://img.shields.io/pypi/v/reactpy-router.svg?label=PyPI">

docs/src/about/contributing.md

@@ -3,7 +3,7 @@
 If you plan to make code changes to this repository, you will need to install the following dependencies first:
 
 -   [Git](https://git-scm.com/downloads)
--   [Python 3.9+](https://www.python.org/downloads/)
+-   [Python 3.11+](https://www.python.org/downloads/)
 -   [Hatch](https://hatch.pypa.io/latest/)
 -   [Bun](https://bun.sh/)
 
@@ -41,6 +41,7 @@ By utilizing `hatch`, the following commands are available to manage the develop
 | `hatch fmt --check` | Run all linters and formatters, but do not save fixes to the disk |
 | `hatch fmt --linter` | Run only linters |
 | `hatch fmt --formatter` | Run only formatters |
+| `hatch run javascript:build` | Manually re-build the JavaScript bundle |
 | `hatch run javascript:check` | Run the JavaScript linter/formatter |
 | `hatch run javascript:fix` | Run the JavaScript linter/formatter and write fixes to disk |
 | `hatch run python:type_check` | Run the Python type checker |

docs/src/assets/css/admonition.css

@@ -1,160 +1,160 @@
 [data-md-color-scheme="slate"] {
-	--admonition-border-color: transparent;
-	--admonition-expanded-border-color: rgba(255, 255, 255, 0.1);
-	--note-bg-color: rgba(43, 110, 98, 0.2);
-	--terminal-bg-color: #0c0c0c;
-	--terminal-title-bg-color: #000;
-	--deep-dive-bg-color: rgba(43, 52, 145, 0.2);
-	--you-will-learn-bg-color: #353a45;
-	--pitfall-bg-color: rgba(182, 87, 0, 0.2);
+    --admonition-border-color: transparent;
+    --admonition-expanded-border-color: rgba(255, 255, 255, 0.1);
+    --note-bg-color: rgba(43, 110, 98, 0.2);
+    --terminal-bg-color: #0c0c0c;
+    --terminal-title-bg-color: #000;
+    --deep-dive-bg-color: rgba(43, 52, 145, 0.2);
+    --you-will-learn-bg-color: #353a45;
+    --pitfall-bg-color: rgba(182, 87, 0, 0.2);
 }
 [data-md-color-scheme="default"] {
-	--admonition-border-color: rgba(0, 0, 0, 0.08);
-	--admonition-expanded-border-color: var(--admonition-border-color);
-	--note-bg-color: rgb(244, 251, 249);
-	--terminal-bg-color: rgb(64, 71, 86);
-	--terminal-title-bg-color: rgb(35, 39, 47);
-	--deep-dive-bg-color: rgb(243, 244, 253);
-	--you-will-learn-bg-color: rgb(246, 247, 249);
-	--pitfall-bg-color: rgb(254, 245, 231);
+    --admonition-border-color: rgba(0, 0, 0, 0.08);
+    --admonition-expanded-border-color: var(--admonition-border-color);
+    --note-bg-color: rgb(244, 251, 249);
+    --terminal-bg-color: rgb(64, 71, 86);
+    --terminal-title-bg-color: rgb(35, 39, 47);
+    --deep-dive-bg-color: rgb(243, 244, 253);
+    --you-will-learn-bg-color: rgb(246, 247, 249);
+    --pitfall-bg-color: rgb(254, 245, 231);
 }
 
 .md-typeset details,
 .md-typeset .admonition {
-	border-color: var(--admonition-border-color) !important;
-	box-shadow: none;
+    border-color: var(--admonition-border-color) !important;
+    box-shadow: none;
 }
 
 .md-typeset :is(.admonition, details) {
-	margin: 0.55em 0;
+    margin: 0.55em 0;
 }
 
 .md-typeset .admonition {
-	font-size: 0.7rem;
+    font-size: 0.7rem;
 }
 
 .md-typeset .admonition:focus-within,
 .md-typeset details:focus-within {
-	box-shadow: none !important;
+    box-shadow: none !important;
 }
 
 .md-typeset details[open] {
-	border-color: var(--admonition-expanded-border-color) !important;
+    border-color: var(--admonition-expanded-border-color) !important;
 }
 
-/* 
-Admonition: "summary" 
+/*
+Admonition: "summary"
 React Name: "You will learn"
 */
 .md-typeset .admonition.summary {
-	background: var(--you-will-learn-bg-color);
-	padding: 0.8rem 1.4rem;
-	border-radius: 0.8rem;
+    background: var(--you-will-learn-bg-color);
+    padding: 0.8rem 1.4rem;
+    border-radius: 0.8rem;
 }
 
 .md-typeset .summary .admonition-title {
-	font-size: 1rem;
-	background: transparent;
-	padding-left: 0.6rem;
-	padding-bottom: 0;
+    font-size: 1rem;
+    background: transparent;
+    padding-left: 0.6rem;
+    padding-bottom: 0;
 }
 
 .md-typeset .summary .admonition-title:before {
-	display: none;
+    display: none;
 }
 
 .md-typeset .admonition.summary {
-	border-color: #ffffff17 !important;
+    border-color: #ffffff17 !important;
 }
 
-/* 
-Admonition: "abstract" 
+/*
+Admonition: "abstract"
 React Name: "Note"
 */
 .md-typeset .admonition.abstract {
-	background: var(--note-bg-color);
-	padding: 0.8rem 1.4rem;
-	border-radius: 0.8rem;
+    background: var(--note-bg-color);
+    padding: 0.8rem 1.4rem;
+    border-radius: 0.8rem;
 }
 
 .md-typeset .abstract .admonition-title {
-	font-size: 1rem;
-	background: transparent;
-	padding-bottom: 0;
-	color: rgb(68, 172, 153);
+    font-size: 1rem;
+    background: transparent;
+    padding-bottom: 0;
+    color: rgb(68, 172, 153);
 }
 
 .md-typeset .abstract .admonition-title:before {
-	font-size: 1.1rem;
-	background: rgb(68, 172, 153);
+    font-size: 1.1rem;
+    background: rgb(68, 172, 153);
 }
 
-/* 
-Admonition: "warning" 
+/*
+Admonition: "warning"
 React Name: "Pitfall"
 */
 .md-typeset .admonition.warning {
-	background: var(--pitfall-bg-color);
-	padding: 0.8rem 1.4rem;
-	border-radius: 0.8rem;
+    background: var(--pitfall-bg-color);
+    padding: 0.8rem 1.4rem;
+    border-radius: 0.8rem;
 }
 
 .md-typeset .warning .admonition-title {
-	font-size: 1rem;
-	background: transparent;
-	padding-bottom: 0;
-	color: rgb(219, 125, 39);
+    font-size: 1rem;
+    background: transparent;
+    padding-bottom: 0;
+    color: rgb(219, 125, 39);
 }
 
 .md-typeset .warning .admonition-title:before {
-	font-size: 1.1rem;
-	background: rgb(219, 125, 39);
+    font-size: 1.1rem;
+    background: rgb(219, 125, 39);
 }
 
-/* 
-Admonition: "info" 
+/*
+Admonition: "info"
 React Name: "Deep Dive"
 */
 .md-typeset .admonition.info {
-	background: var(--deep-dive-bg-color);
-	padding: 0.8rem 1.4rem;
-	border-radius: 0.8rem;
+    background: var(--deep-dive-bg-color);
+    padding: 0.8rem 1.4rem;
+    border-radius: 0.8rem;
 }
 
 .md-typeset .info .admonition-title {
-	font-size: 1rem;
-	background: transparent;
-	padding-bottom: 0;
-	color: rgb(136, 145, 236);
+    font-size: 1rem;
+    background: transparent;
+    padding-bottom: 0;
+    color: rgb(136, 145, 236);
 }
 
 .md-typeset .info .admonition-title:before {
-	font-size: 1.1rem;
-	background: rgb(136, 145, 236);
+    font-size: 1.1rem;
+    background: rgb(136, 145, 236);
 }
 
-/* 
-Admonition: "example" 
+/*
+Admonition: "example"
 React Name: "Terminal"
 */
 .md-typeset .admonition.example {
-	background: var(--terminal-bg-color);
-	border-radius: 0.4rem;
-	overflow: hidden;
-	border: none;
+    background: var(--terminal-bg-color);
+    border-radius: 0.4rem;
+    overflow: hidden;
+    border: none;
 }
 
 .md-typeset .example .admonition-title {
-	background: var(--terminal-title-bg-color);
-	color: rgb(246, 247, 249);
+    background: var(--terminal-title-bg-color);
+    color: rgb(246, 247, 249);
 }
 
 .md-typeset .example .admonition-title:before {
-	background: rgb(246, 247, 249);
+    background: rgb(246, 247, 249);
 }
 
 .md-typeset .admonition.example code {
-	background: transparent;
-	color: #fff;
-	box-shadow: none;
+    background: transparent;
+    color: #fff;
+    box-shadow: none;
 }

docs/src/assets/css/banner.css

@@ -1,15 +1,15 @@
 body[data-md-color-scheme="slate"] {
-	--md-banner-bg-color: rgb(55, 81, 78);
-	--md-banner-font-color: #fff;
+    --md-banner-bg-color: rgb(55, 81, 78);
+    --md-banner-font-color: #fff;
 }
 
 body[data-md-color-scheme="default"] {
-	--md-banner-bg-color: #ff9;
-	--md-banner-font-color: #000;
+    --md-banner-bg-color: #ff9;
+    --md-banner-font-color: #000;
 }
 
 .md-banner--warning {
-	background-color: var(--md-banner-bg-color);
-	color: var(--md-banner-font-color);
-	text-align: center;
+    background-color: var(--md-banner-bg-color);
+    color: var(--md-banner-font-color);
+    text-align: center;
 }

docs/src/assets/css/button.css

@@ -1,41 +1,44 @@
 [data-md-color-scheme="slate"] {
-	--md-button-font-color: #fff;
-	--md-button-border-color: #404756;
+    --md-button-font-color: #fff;
+    --md-button-border-color: #404756;
 }
 
 [data-md-color-scheme="default"] {
-	--md-button-font-color: #000;
-	--md-button-border-color: #8d8d8d;
+    --md-button-font-color: #000;
+    --md-button-border-color: #8d8d8d;
 }
 
 .md-typeset .md-button {
-	border-width: 1px;
-	border-color: var(--md-button-border-color);
-	border-radius: 9999px;
-	color: var(--md-button-font-color);
-	transition: color 125ms, background 125ms, border-color 125ms,
-		transform 125ms;
+    border-width: 1px;
+    border-color: var(--md-button-border-color);
+    border-radius: 9999px;
+    color: var(--md-button-font-color);
+    transition:
+        color 125ms,
+        background 125ms,
+        border-color 125ms,
+        transform 125ms;
 }
 
 .md-typeset .md-button:focus,
 .md-typeset .md-button:hover {
-	border-color: var(--md-button-border-color);
-	color: var(--md-button-font-color);
-	background: rgba(78, 87, 105, 0.05);
+    border-color: var(--md-button-border-color);
+    color: var(--md-button-font-color);
+    background: rgba(78, 87, 105, 0.05);
 }
 
 .md-typeset .md-button.md-button--primary {
-	color: #fff;
-	border-color: transparent;
-	background: var(--reactpy-color-dark);
+    color: #fff;
+    border-color: transparent;
+    background: var(--reactpy-color-dark);
 }
 
 .md-typeset .md-button.md-button--primary:focus,
 .md-typeset .md-button.md-button--primary:hover {
-	border-color: transparent;
-	background: var(--reactpy-color-darker);
+    border-color: transparent;
+    background: var(--reactpy-color-darker);
 }
 
 .md-typeset .md-button:focus {
-	transform: scale(0.98);
+    transform: scale(0.98);
 }