Merge branch 'main' into devin/1745800734-add-serialization-docs

Author: Alek99

docs/api-reference/cli.md

@@ -12,19 +12,21 @@ Usage: reflex [OPTIONS] COMMAND [ARGS]...
   Reflex CLI to create, run, and deploy apps.
 
 Options:
-  -v, --version  Get the Reflex version.
-  --help         Show this message and exit.
+  --version  Show the version and exit.
+  --help     Show this message and exit.
 
 Commands:
-  db           Subcommands for managing the database schema.
-  demo         Run the demo app.
-  deploy       Deploy the app to the Reflex hosting service.
-  deployments  Subcommands for managing the Deployments.
-  export       Export the app to a zip file.
-  init         Initialize a new Reflex app in the current directory.
-  login        Authenticate with Reflex hosting service.
-  logout       Log out of access to Reflex hosting service.
-  run          Run the app in the current directory.
+  cloud      The Hosting CLI.
+  component  CLI for creating custom components.
+  db         Subcommands for managing the database schema.
+  deploy     Deploy the app to the Reflex hosting service.
+  export     Export the app to a zip file.
+  init       Initialize a new Reflex app in the current directory.
+  login      Authenticate with experimental Reflex hosting service.
+  logout     Log out of access to Reflex hosting service.
+  rename     Rename the app in the current directory.
+  run        Run the app in the current directory.
+  script     Subcommands for running helper scripts.
 ```
 
 ## Init
@@ -88,3 +90,39 @@ You can export your app's frontend and backend to zip files using the `reflex ex
 The frontend is a compiled NextJS app, which can be deployed to a static hosting service like Github Pages or Vercel.
 However this is just a static build, so you will need to deploy the backend separately.
 See the self-hosting guide for more information.
+
+## Rename
+
+The `reflex rename` command allows you to rename your Reflex app. This updates the app name in the configuration files.
+
+```bash
+$ reflex rename --help
+Usage: reflex rename [OPTIONS] NEW_NAME
+
+  Rename the app in the current directory.
+
+Options:
+  --loglevel [debug|default|info|warning|error|critical]
+                                  The log level to use.
+  --help                          Show this message and exit.
+```
+
+## Cloud
+
+The `reflex cloud` command provides access to the Reflex Cloud hosting service. It includes subcommands for managing apps, projects, secrets, and more.
+
+For detailed documentation on Reflex Cloud and deployment, see the [Cloud Quick Start Guide](https://reflex.dev/docs/hosting/deploy-quick-start/).
+
+## Script
+
+The `reflex script` command provides access to helper scripts for Reflex development.
+
+```bash
+$ reflex script --help
+Usage: reflex script [OPTIONS] COMMAND [ARGS]...
+
+  Subcommands for running helper scripts.
+
+Options:
+  --help  Show this message and exit.
+```

docs/api-reference/event_triggers.md

@@ -4,6 +4,7 @@ from datetime import datetime
 import reflex as rx
 
 from pcweb.templates.docpage import docdemo, h1_comp, text_comp, docpage
+from pcweb.pages.docs import events
 
 SYNTHETIC_EVENTS = [
     {
@@ -92,27 +93,70 @@ SYNTHETIC_EVENTS = [
     },
     {
         "name": "on_mount",
-        "description": "The on_mount event handler is called after the component is rendered on the page. It is similar to a page on_load event, although it does not necessarily fire when navigating between pages.",
+        "description": "The on_mount event handler is called after the component is rendered on the page. It is similar to a page on_load event, although it does not necessarily fire when navigating between pages. This event is particularly useful for initializing data, making API calls, or setting up component-specific state when a component first appears.",
         "state": """class MountState(rx.State):
     events: list[str] = []
+    data: list[dict] = []
+    loading: bool = False
 
     @rx.event
     def on_mount(self):
         self.events = self.events[-4:] + ["on_mount @ " + str(datetime.now())]
+        
+    @rx.event
+    async def load_data(self):
+        # Common pattern: Set loading state, yield to update UI, then fetch data
+        self.loading = True
+        yield
+        # Simulate API call
+        import asyncio
+        await asyncio.sleep(1)
+        self.data = [dict(id=1, name="Item 1"), dict(id=2, name="Item 2")]
+        self.loading = False
 """,
-        "example": """rx.vstack(rx.foreach(MountState.events, rx.text), on_mount=MountState.on_mount)""",
+        "example": """rx.vstack(
+    rx.heading("Component Lifecycle Demo"),
+    rx.foreach(MountState.events, rx.text),
+    rx.cond(
+        MountState.loading,
+        rx.spinner(),
+        rx.foreach(
+            MountState.data,
+            lambda item: rx.text(f"ID: {item['id']} - {item['name']}")
+        )
+    ),
+    on_mount=MountState.on_mount,
+)""",
     },
     {
         "name": "on_unmount",
-        "description": "The on_unmount event handler is called after removing the component from the page. However, on_unmount will only be called for internal navigation, not when following external links or refreshing the page.",
+        "description": "The on_unmount event handler is called after removing the component from the page. However, on_unmount will only be called for internal navigation, not when following external links or refreshing the page. This event is useful for cleaning up resources, saving state, or performing cleanup operations before a component is removed from the DOM.",
         "state": """class UnmountState(rx.State):
     events: list[str] = []
+    resource_id: str = "resource-12345"
+    status: str = "Resource active"
 
     @rx.event
     def on_unmount(self):
         self.events = self.events[-4:] + ["on_unmount @ " + str(datetime.now())]
+        # Common pattern: Clean up resources when component is removed
+        self.status = f"Resource {self.resource_id} cleaned up"
+        
+    @rx.event
+    def initialize_resource(self):
+        self.status = f"Resource {self.resource_id} initialized"
 """,
-        "example": """rx.vstack(rx.foreach(UnmountState.events, rx.text), on_unmount=UnmountState.on_unmount)""",
+        "example": """rx.vstack(
+    rx.heading("Unmount Demo"),
+    rx.foreach(UnmountState.events, rx.text),
+    rx.text(UnmountState.status),
+    rx.link(
+        rx.button("Navigate Away (Triggers Unmount)"),
+        href="/docs",
+    ),
+    on_mount=UnmountState.initialize_resource,
+    on_unmount=UnmountState.on_unmount,
+)""",
     },
     {
         "name": "on_mouse_up",
@@ -270,6 +314,70 @@ These events are triggered by event triggers.
 
 Event triggers are component specific and are listed in the documentation for each component.
 
+## Component Lifecycle Events
+
+Reflex components have lifecycle events like `on_mount` and `on_unmount` that allow you to execute code at specific points in a component's existence. These events are crucial for initializing data, cleaning up resources, and creating dynamic user interfaces.
+
+### When Lifecycle Events Are Activated
+
+- **on_mount**: This event is triggered immediately after a component is rendered and attached to the DOM. It fires:
+  - When a page containing the component is first loaded
+  - When a component is conditionally rendered (appears after being hidden)
+  - When navigating to a page containing the component using internal navigation
+  - It does NOT fire when the page is refreshed or when following external links
+
+- **on_unmount**: This event is triggered just before a component is removed from the DOM. It fires:
+  - When navigating away from a page containing the component using internal navigation
+  - When a component is conditionally removed from the DOM (e.g., via a condition that hides it)
+  - It does NOT fire when refreshing the page, closing the browser tab, or following external links
+
+## Page Load Events
+
+In addition to component lifecycle events, Reflex also provides page-level events like `on_load` that are triggered when a page loads. The `on_load` event is useful for:
+
+- Fetching data when a page first loads
+- Checking authentication status
+- Initializing page-specific state
+- Setting default values for cookies or browser storage
+
+You can specify an event handler to run when the page loads using the `on_load` parameter in the `@rx.page` decorator or `app.add_page()` method:
+
+```python
+class State(rx.State):
+    data: dict = dict()
+
+    @rx.event
+    def get_data(self):
+        # Fetch data when the page loads
+        self.data = fetch_data()
+
+@rx.page(on_load=State.get_data)
+def index():
+    return rx.text('Data loaded on page load')
+```
+
+This is particularly useful for authentication checks:
+
+```python
+class State(rx.State):
+    authenticated: bool = False
+
+    @rx.event
+    def check_auth(self):
+        # Check if user is authenticated
+        self.authenticated = check_auth()
+        if not self.authenticated:
+            return rx.redirect('/login')
+
+@rx.page(on_load=State.check_auth)
+def protected_page():
+    return rx.text('Protected content')
+```
+
+For more details on page load events, see the [page load events documentation]({events.page_load_events.path}).
+
+# Event Reference
+
 ```python eval
 rx.box(
     rx.divider(),

docs/hosting/deploy-quick-start.md

@@ -63,6 +63,9 @@ The command is by default interactive. It asks you a few questions for informati
 
 That’s it! You should receive some feedback on the progress of your deployment and in a few minutes your app should be up. 🎉
 
+For detailed information about the deploy command and its options, see the [Deploy API Reference](https://reflex.dev/docs/hosting/deploy/) and the [CLI Reference](https://reflex.dev/docs/api-reference/cli/).
+
+
 ```md alert info
 # Once your code is uploaded, the hosting service will start the deployment. After a complete upload, exiting from the command **does not** affect the deployment process. The command prints a message when you can safely close it without affecting the deployment.
 ```
@@ -83,4 +86,4 @@ To go back, i.e. from an app to a project or from a project to your list of proj
 ```md alert info
 # All flag values are saved between runs
 All your flag values, i.e. environment variables or regions or tokens, are saved between runs. This means that if you run a command and you pass a flag value, the next time you run the same command the flag value will be the same as the last time you ran it. This means you should only set the flag values again if you want to change them.
-```
+```

docs/wrapping-react/overview.md

@@ -59,7 +59,9 @@ We also have a var `color` which is the current color of the color picker.
 Since this component has interaction we must specify any event triggers that the component takes. The color picker has a single trigger `on_change` to specify when the color changes. This trigger takes in a single argument `color` which is the new color.
 
 ```python exec
-class ColorPicker(rx.Component):
+from reflex.components.component import NoSSRComponent
+
+class ColorPicker(NoSSRComponent):
     library = "react-colorful"
     tag = "HexColorPicker"
     color: rx.Var[str]
@@ -87,7 +89,9 @@ rx.box(
 ```
 
 ```python
-class ColorPicker(rx.Component):
+from reflex.components.component import NoSSRComponent
+
+class ColorPicker(NoSSRComponent):
     library = "react-colorful"
     tag = "HexColorPicker"
     color: rx.Var[str]
@@ -147,4 +151,4 @@ export default function App() {
 
 
 
-In the next page, we will go step by step through a more complex example of wrapping a React component.
+In the next page, we will go step by step through a more complex example of wrapping a React component.

pcweb/components/hosting_banner.py

@@ -27,28 +27,33 @@ def hosting_banner() -> rx.Component:
             rx.link(
                 rx.box(
                     rx.box(
+                        # Header text with responsive spans
                         rx.text(
-                            "Reflex Build - ",
+                            "Reflex Build – ",
+                            # Descriptive text: hidden on small, inline on md+
                             rx.el.span(
                                 "Build internal apps with AI.",
-                                # class_name="text-slate-12 font-medium text-sm",
                                 class_name="hidden md:inline-block text-slate-12 font-medium text-sm",
                             ),
-                            # ... keep this for mobile view if/when needed
+                            # Mobile CTA: inline on small, hidden on md+
                             rx.el.span(
                                 "Try for Free!",
-                                # class_name="text-slate-12 font-medium text-sm",
                                 class_name="inline-block md:hidden text-slate-12 font-medium text-sm",
                             ),
                             class_name="text-slate-12 font-semibold text-sm z-[1]",
                         ),
-                        # ... keep this for mobile view if/when needed
+                        # Standalone CTA button: hidden on small, inline on md+
                         rx.el.button(
                             "Try for Free!",
-                            class_name="hidden md:inline-block text-green-11 h-[1.5rem] rounded-md bg-green-4 px-1.5 text-sm font-semibold z-[1] items-center justify-center shrink-0",
+                            class_name=(
+                                "hidden md:inline-block "
+                                "text-green-11 h-[1.5rem] rounded-md bg-green-4 "
+                                "px-1.5 text-sm font-semibold z-[1] items-center "
+                                "justify-center shrink-0"
+                            ),
                         ),
                         class_name="flex items-center gap-4",
-                    ),
+                    )
                 ),
                 glow(),
                 href=REFLEX_AI_BUILDER,

pcweb/whitelist.py

@@ -12,7 +12,6 @@
 
 WHITELISTED_PAGES = []
 
-
 def _check_whitelisted_path(path: str):
     if len(WHITELISTED_PAGES) == 0:
         return True