From 2e329d3d7a3ade2057fe19a16b6dfff1ed07f2b6 Mon Sep 17 00:00:00 2001 From: Raj Date: Sat, 6 Jan 2024 12:15:13 +0530 Subject: [PATCH] docs updates --- docs/backend/2_state_basics.md | 8 ++++---- docs/backend/4_substates.md | 23 +++++++++++++++++------ docs/backend/5_event.md | 24 ++++++++++++++---------- docs/backend/6_var.md | 8 ++++++++ 4 files changed, 43 insertions(+), 20 deletions(-) diff --git a/docs/backend/2_state_basics.md b/docs/backend/2_state_basics.md index 6cff28bd..27a4275f 100644 --- a/docs/backend/2_state_basics.md +++ b/docs/backend/2_state_basics.md @@ -41,10 +41,10 @@ Computed vars are derived from base vars and are recalculated automatically when class CounterState(xt.State): count: int = 0 - @property + @xt.var def message(self) -> str: # This is a computed var that returns a message based on the count - return "Even" if self.count % 2 == 0 else "Odd + return "Even" if self.count % 2 == 0 else "Odd" ``` @@ -59,8 +59,8 @@ class CounterState(xt.State): count: int = 0 def increment(self): - # Event handler that increments the count - self.count + + # Event handler that increments the count + self.count += 1 ``` diff --git a/docs/backend/4_substates.md b/docs/backend/4_substates.md index fe5b3443..5bbb1e24 100644 --- a/docs/backend/4_substates.md +++ b/docs/backend/4_substates.md @@ -72,19 +72,22 @@ You can import and access the substate classes from other modules if you need to ```python # main.py import nextpy as xt -from home_counter import HomeCounterState -from about_counter import AboutCounterState +from home_counter import HomeCounterState, home_counter +from about_counter import AboutCounterState, about_counter -def main_page(): +def index(): return xt.vstack( - xt.Box(home_counter()), - xt.Box(about_counter()), + xt.box(home_counter()), + xt.box(about_counter()), xt.text(f"Total Count: {HomeCounterState.count + AboutCounterState.count}"), ) + +app = xt.App() +app.add_page(index) ``` -In `main_page`, we import both `HomeCounterState` and `AboutCounterState` to display the total count from both counters combined. +In `index`, we import both `HomeCounterState` and `AboutCounterState` to display the total count from both counters combined. ## State Inheritance @@ -122,6 +125,14 @@ def specialized_counter(): xt.button("+10", on_click=SpecializedCounterState.special_increment), ) +def index(): + return xt.vstack( + specialized_counter(), + ) + +app = xt.App() +app.add_page(index) + ``` `SpecializedCounterState` inherits from `BaseCounterState`, allowing it to use the common `increment` and `decrement` methods, as well as adding its own `special_increment` method. diff --git a/docs/backend/5_event.md b/docs/backend/5_event.md index 3059a7ae..5fd3205c 100644 --- a/docs/backend/5_event.md +++ b/docs/backend/5_event.md @@ -50,6 +50,8 @@ def index(): xt.button("+", on_click=CounterState.increment), ) +app = xt.App() +app.add_page(index) ``` In this counter example, clicking the "+" and "-" buttons triggers the `increment` and `decrement` event handlers, respectively, updating the `count`. @@ -194,13 +196,15 @@ class CounterState(xt.State): def start_sequence(self): self.set_count(10) # Initialize count - return self.decrement_sequence # Trigger countdown + return CounterState.decrement_sequence # Return class method + @xt.background async def decrement_sequence(self): while self.count > 0: await asyncio.sleep(1) - self.count -= 1 - yield + async with self: # Required for state modification in background tasks + self.count -= 1 + yield # Yield to send the update to the frontend def index(): return xt.vstack( @@ -210,6 +214,7 @@ def index(): ``` +**Note:** You should use the @xt.background decorator on an asynchronous method within your state class 2. Since your decrement_sequence function is designed to update the state over time, it should be marked as a background task and it should be an asynchronous method. **Note:** Clicking "Start Countdown" initializes the counter to 10 and triggers a countdown. ### Returning Events from Handlers @@ -224,7 +229,6 @@ Event handlers in Nextpy can also trigger new events, creating a chain of action 4. **Class Name Usage:** Use the class or substate name to return events, not `self`. ```python -import asyncio import nextpy as xt class TaskQueueState(xt.State): @@ -235,18 +239,17 @@ class TaskQueueState(xt.State): if self.current_task < self.total_tasks: self.current_task += 1 # Return the name of this handler to trigger it again - return self.check_next_task + return TaskQueueState.check_next_task # No more tasks to complete return None - async def check_next_task(self): - await asyncio.sleep(1) # Simulate task processing time + def check_next_task(self): + # This function could be used to check the condition to continue the task if self.current_task < self.total_tasks: # If there are more tasks, complete the next task - return self.complete_task + return TaskQueueState.complete_task # All tasks are completed self.current_task = 0 # Reset the task queue - yield def index(): return xt.vstack( @@ -255,6 +258,7 @@ def index(): xt.text(f"Total Tasks: {TaskQueueState.total_tasks}") ) + ``` ## Special Events @@ -272,7 +276,7 @@ class CounterState(xt.State): def increment_and_alert(self): self.count += 1 if self.count == 5: - return xt.WindowAlert("Counter reached 5!") + return xt.window_alert("Counter reached 5!") def index(): return xt.vstack( diff --git a/docs/backend/6_var.md b/docs/backend/6_var.md index b917b3ae..65a25e89 100644 --- a/docs/backend/6_var.md +++ b/docs/backend/6_var.md @@ -33,6 +33,14 @@ def product_example(): ), ) +def index(): + return xt.fragment( + product_example(), + ) + +app = xt.App() +app.add_page(index) + ``` ### JSON Serialization of Vars