[ENG-3763]Support for reflex v0.6.0 (#256)

* Support for reflex v0.6.0

* fix requirements for clock

* more fixes

* fix requirements

* use base requirements for breaking changes

* Update form-designer example for 0.6.0

* snakegame: fix keyboard controls

* update snake game requirement

* always get backend state since it now lives on disk and doesnt update automatically

* form_designer: only create the app once per session

avoid recompiling the app after its already been compiled: the Var system gets
mad when encountering StatefulComponent in the tree.

---------

Co-authored-by: Masen Furer <m_github@0x26.net>

clock/clock/clock.py

@@ -5,6 +5,7 @@
 from typing import Any
 
 import reflex as rx
+import reflex_chakra as rc
 from reflex.components.radix.themes import theme
 
 import pytz
@@ -47,7 +48,7 @@ class State(rx.State):
     # The last updated timestamp
     _now: datetime = datetime.fromtimestamp(0)
 
-    @rx.cached_var
+    @rx.var(cache=True)
     def valid_zone(self) -> str:
         """Get the current time zone.
 
@@ -60,7 +61,7 @@ def valid_zone(self) -> str:
             return DEFAULT_ZONE
         return self.zone
 
-    @rx.cached_var
+    @rx.var(cache=True)
     def time_info(self) -> dict[str, Any]:
         """Get the current time info.
 
@@ -126,7 +127,7 @@ def clock_hand(rotation: str, color: str, length: str) -> rx.Component:
     Returns:
         A clock hand component.
     """
-    return rx.chakra.divider(
+    return rx.divider(
         transform=rotation,
         width=f"{length}em",
         position="absolute",
@@ -139,9 +140,9 @@ def clock_hand(rotation: str, color: str, length: str) -> rx.Component:
 
 def analog_clock() -> rx.Component:
     """Create the analog clock."""
-    return rx.chakra.circle(
+    return rc.circle(
         # The inner circle.
-        rx.chakra.circle(
+        rc.circle(
             width="1em",
             height="1em",
             border_width="thick",

clock/requirements.txt

@@ -1,2 +1,3 @@
-reflex>=0.4.0
+reflex>=0.5.6
 pytz==2022.7.1
+reflex-chakra>=0.6.0a7

counter/tests/test_counter.py

@@ -33,8 +33,10 @@ def _poll_token():
 
     state_name = counter_app.get_state_name("State")
     full_state_name = counter_app.get_full_state_name("State")
-    root_state = await counter_app.get_state(f"{token}_{full_state_name}")
-    backend_state = root_state.substates[state_name]
+
+    async def _get_backend_state():
+        root_state = await counter_app.get_state(f"{token}_{full_state_name}")
+        return root_state.substates[state_name]
 
     count = driver.find_element(By.TAG_NAME, "h1")
     assert counter_app.poll_for_content(count) == "0"
@@ -45,17 +47,17 @@ def _poll_token():
 
     decrement.click()
     assert counter_app.poll_for_content(count, exp_not_equal="0") == "-1"
-    assert backend_state.count == -1
+    assert (await _get_backend_state()).count == -1
 
     increment.click()
     assert counter_app.poll_for_content(count, exp_not_equal="-1") == "0"
     increment.click()
     assert counter_app.poll_for_content(count, exp_not_equal="0") == "1"
-    assert backend_state.count == 1
+    assert (await _get_backend_state()).count == 1
 
     randomize.click()
     random_count = counter_app.poll_for_content(count, exp_not_equal="1")
-    assert backend_state.count == int(random_count)
+    assert (await _get_backend_state()).count == int(random_count)
     decrement.click()
     dec_value = str(int(random_count) - 1)
     assert counter_app.poll_for_content(count, exp_not_equal=random_count) == dec_value

customer_data_app/customer_data_app/backend/backend.py

@@ -145,7 +145,7 @@ def add_customer_to_db(self, form_data: dict):
             session.add(Customer(**self.current_user))
             session.commit()
         self.load_entries()
-        return rx.toast.info(f"User {self.current_user['name']} has been added.", variant="outline", position="bottom-right")
+        return rx.toast.info(f"User {self.current_user['name']} has been added.", position="bottom-right")
 
 
     def update_customer_to_db(self, form_data: dict):
@@ -160,7 +160,7 @@ def update_customer_to_db(self, form_data: dict):
             session.add(customer)
             session.commit()
         self.load_entries()
-        return rx.toast.info(f"User {self.current_user['name']} has been modified.", variant="outline", position="bottom-right")
+        return rx.toast.info(f"User {self.current_user['name']} has been modified.", position="bottom-right")
 
 
     def delete_customer(self, id: int):
@@ -170,7 +170,7 @@ def delete_customer(self, id: int):
             session.delete(customer)
             session.commit()
         self.load_entries()
-        return rx.toast.info(f"User {customer.name} has been deleted.", variant="outline", position="bottom-right")
+        return rx.toast.info(f"User {customer.name} has been deleted.", position="bottom-right")
 
 
     @rx.var

dalle/dalle/dalle.py

@@ -68,7 +68,7 @@ def index():
             rx.divider(),
             rx.cond(
                 State.image_processing,
-                rx.chakra.circular_progress(is_indeterminate=True),
+                rx.spinner(),
                 rx.cond(
                     State.image_made,
                     rx.image(

data_visualisation/data_visualisation/data_visualisation.py

@@ -285,7 +285,7 @@ def navbar():
         rx.spacer(),
         add_item_ui(),
         rx.avatar(fallback="TG", size="4"),
-        rx.color_mode.button(rx.color_mode.icon(), size="3", float="right"),
+        rx.color_mode.button(),
         position="fixed",
         width="100%",
         top="0px",

form-designer/form_designer/form_designer.py

@@ -1,3 +1,4 @@
+import contextlib
 import reflex as rx
 
 import reflex_local_auth
@@ -20,16 +21,13 @@
     responses_title,
 )
 
-
-# Add these dynamic route vars early, so they can be referenced in the titles.
-if "form_id" not in rx.State.__fields__:
-    rx.State.add_var("form_id", str, "")
-if "field_id" not in rx.State.__fields__:
-    rx.State.add_var("field_id", str, "")
-
 app = rx.App(theme=rx.theme(accent_color="blue"))
 app.add_page(home_page, route="/", title=constants.TITLE)
 
+# Adding a dummy route to register the dynamic route vars.
+with contextlib.suppress(ValueError):
+    app.add_page(lambda: rx.fragment(on_click=False), route="/_dummy/[form_id]/[field_id]")
+
 # Authentication via reflex-local-auth
 app.add_page(
     reflex_local_auth.pages.login_page,

form-designer/form_designer/pages/response.py

@@ -34,7 +34,7 @@ def delete_response(self, id: int):
 
 def response_content(response: Response):
     return rx.vstack(
-        rx.moment(value=response.ts),
+        rx.moment(response.ts),
         rx.foreach(
             response.field_values,
             lambda fv: rx.vstack(

form-designer/tests/conftest.py

@@ -9,7 +9,7 @@
 from reflex_local_auth import LocalUser
 
 
-@pytest.fixture(scope="module")
+@pytest.fixture(scope="session")
 def form_designer_app():
     with AppHarness.create(root=Path(__file__).parent.parent) as harness:
         yield harness

github-stats/github_stats/github_stats.py

@@ -85,7 +85,7 @@ def add_user(self):
             self._save_selected_users()
             return State.fetch_missing_stats
 
-    @rx.cached_var
+    @rx.var(cache=True)
     def data_pretty(self) -> str:
         return json.dumps(self.user_stats, indent=2)
 

github-stats/requirements.txt

@@ -1 +1 @@
-reflex>=0.4.0
+reflex>=0.5.6

gpt/gpt/gpt.py

@@ -153,7 +153,7 @@ def result_view() -> rx.Component:
             rx.text(State.prompt),
             rx.cond(
                 State.loading,
-                rx.chakra.spinner(),
+                rx.spinner(),
             ),
             justify="between",
         ),

lorem-stream/lorem_stream/lorem_stream.py

@@ -4,6 +4,7 @@
 from lorem_text import lorem
 
 import reflex as rx
+import reflex_chakra as rc
 
 
 ITERATIONS_RANGE = (7, 12)
@@ -62,8 +63,8 @@ def kill(self, task_id: int):
 def render_task(task_id: int) -> rx.Component:
     return rx.vstack(
         rx.hstack(
-            rx.chakra.circular_progress(
-                rx.chakra.circular_progress_label(task_id),
+            rc.circular_progress(
+                rc.circular_progress_label(task_id),
                 value=LoremState.progress[task_id],
                 max_=LoremState.end_at[task_id],
                 is_indeterminate=LoremState.progress[task_id] < 1,
@@ -87,7 +88,7 @@ def render_task(task_id: int) -> rx.Component:
 def index() -> rx.Component:
     return rx.vstack(
         rx.button("➕ New Task", on_click=LoremState.stream_text(-1)),
-        rx.chakra.flex(
+        rx.flex(
             rx.foreach(LoremState.task_ids, render_task),
             flex_wrap="wrap",
             width="100%",

lorem-stream/requirements.txt

@@ -1,2 +1,3 @@
 reflex>=0.4.8
 lorem_text>=2.1
+reflex-chakra>=0.6.0a7

nba/nba/views/table.py

@@ -78,4 +78,4 @@ def table() -> rx.Component:
         search=True,
         sort=True,
         resizable=True,
-    ),
+    )

quiz/quiz/results.py

@@ -1,4 +1,5 @@
 import reflex as rx
+import reflex_chakra as rc
 
 from .styles import base_style as answer_style
 from .styles import page_background
@@ -31,7 +32,7 @@ def centered_item(item):
             rx.text("Below are the results of the quiz."),
             rx.divider(),
             centered_item(
-                rx.chakra.circular_progress(
+                rc.circular_progress(
                     label=State.percent_score, value=State.score, size="3em"
                 )
             ),

quiz/requirements.txt

@@ -1 +1,2 @@
 reflex>=0.5.0
+reflex-chakra>=0.6.0a7

sales/sales/backend/backend.py

@@ -125,7 +125,7 @@ def add_customer_to_db(self, form_data: dict):
             session.add(Customer(**self.current_user))
             session.commit()
         self.load_entries()
-        return rx.toast.info(f"User {self.current_user['customer_name']} has been added.", variant="outline", position="bottom-right")
+        return rx.toast.info(f"User {self.current_user['customer_name']} has been added.", position="bottom-right")
 
     def update_customer_to_db(self, form_data: dict):
         self.current_user.update(form_data)
@@ -139,7 +139,7 @@ def update_customer_to_db(self, form_data: dict):
             session.add(customer)
             session.commit()
         self.load_entries()
-        return rx.toast.info(f"User {self.current_user['customer_name']} has been modified.", variant="outline", position="bottom-right")
+        return rx.toast.info(f"User {self.current_user['customer_name']} has been modified.", position="bottom-right")
 
     def delete_customer(self, id: int):
         """Delete a customer from the database."""
@@ -149,7 +149,7 @@ def delete_customer(self, id: int):
             session.delete(customer)
             session.commit()
         self.load_entries()
-        return rx.toast.info(f"User {customer.customer_name} has been deleted.", variant="outline", position="bottom-right")
+        return rx.toast.info(f"User {customer.customer_name} has been deleted.", position="bottom-right")
 
     @rx.background
     async def call_openai(self):

snakegame/.gitignore

@@ -2,4 +2,5 @@
 *.py[cod]
 .web
 __pycache__/
+assets/external/
 reflex.db

snakegame/requirements.txt

@@ -1 +1 @@
-reflex>=0.4.0
+reflex>=0.6.0

snakegame/snakegame/snakegame.py

@@ -210,9 +210,10 @@ def _get_imports(self) -> ImportDict:
     def _get_hooks(self) -> str | None:
         return """
 useEffect(() => {
-    const handle_key = (_e0) => {
-        if (%s.includes(_e0.key))
-            %s
+    const handle_key = (event) => {
+        if (%s.includes(event.key)) {
+            %s(event)
+        }
     }
     document.addEventListener("keydown", handle_key, false);
     return () => {
@@ -221,7 +222,7 @@ def _get_hooks(self) -> str | None:
 })
 """ % (
             self.keys,
-            rx.utils.format.format_event_chain(self.event_triggers["on_key_down"]),
+            rx.Var.create(self.event_triggers["on_key_down"]),
         )
 
     def get_event_triggers(self) -> Dict[str, Any]:
@@ -236,7 +237,7 @@ def render(self) -> str:
 
 def colored_box(color, index):
     """One square of the game grid."""
-    return rx.chakra.box(
+    return rx.box(
         background_color=color, width="1em", height="1em", border="1px solid white"
     )