Fix format route and code cleanup (reflex-dev#399)

pynecone/compiler/compiler.py

@@ -17,7 +17,7 @@
     "next/router": {"useRouter"},
     f"/{constants.STATE_PATH}": {"connect", "updateState", "E"},
     "": {"focus-visible/dist/focus-visible"},
-    "@chakra-ui/react": {"useColorMode"},
+    "@chakra-ui/react": {constants.USE_COLOR_MODE},
 }
 
 

pynecone/compiler/templates.py

@@ -199,4 +199,4 @@ def format_state(
 SOCKET = "const socket = useRef(null)"
 
 # Color toggle
-COLORTOGGLE = "const { colorMode, toggleColorMode } = useColorMode()"
+COLORTOGGLE = f"const {{ {constants.COLOR_MODE}, {constants.TOGGLE_COLOR_MODE} }} = {constants.USE_COLOR_MODE}()"

pynecone/components/base/document.py

@@ -1,6 +1,7 @@
 """Document components."""
 
 from pynecone.components.component import Component
+from pynecone.components.libs.chakra import ChakraComponent
 
 
 class NextDocumentLib(Component):
@@ -33,13 +34,7 @@ class Script(NextDocumentLib):
     tag = "NextScript"
 
 
-class ChakraUiReactLib(Component):
-    """Chakra UI React document components."""
-
-    library = "@chakra-ui/react"
-
-
-class ColorModeScript(ChakraUiReactLib):
+class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
     tag = "ColorModeScript"

pynecone/components/component.py

@@ -162,11 +162,6 @@ def _create_event_chain(
         Raises:
             ValueError: If the value is not a valid event chain.
         """
-        # If it's a JS var, return it.
-        if isinstance(value, Var):
-            if value.is_local is False and value.is_string is False:
-                return value
-
         # If it's an event chain var, return it.
         if isinstance(value, Var):
             if value.type_ is not EventChain:

pynecone/constants.py

@@ -226,3 +226,8 @@ class RouteRegex(SimpleNamespace):
 TITLE_404 = "404 - Not Found"
 FAVICON_404 = "favicon.ico"
 DESCRIPTION_404 = "The page was not found"
+
+# Color mode variables
+USE_COLOR_MODE = "useColorMode"
+COLOR_MODE = "colorMode"
+TOGGLE_COLOR_MODE = "toggleColorMode"

pynecone/style.py

@@ -2,17 +2,12 @@
 
 from typing import Optional
 
-from pynecone import utils
-from pynecone.var import Var
+from pynecone import constants, utils
+from pynecone.event import EventChain
+from pynecone.var import BaseVar, Var
 
 
-def toggle_color_mode():
-    """Toggle the color mode.
-
-    Returns:
-        Toggle color mode JS event as a variable
-    """
-    return Var.create(value="toggleColorMode", is_local=False, is_string=False)
+toggle_color_mode = BaseVar(name=constants.TOGGLE_COLOR_MODE, type_=EventChain)
 
 
 def convert(style_dict):

pynecone/utils.py

@@ -952,12 +952,14 @@ def format_route(route: str) -> str:
     Returns:
         The formatted route.
     """
+    # Strip the route.
+    route = route.strip("/")
+    route = to_snake_case(route).replace("_", "-")
+
     # If the route is empty, return the index route.
     if route == "":
         return constants.INDEX_ROUTE
 
-    route = route.strip("/")
-    route = to_snake_case(route).replace("_", "-")
     return route
 
 

tests/test_utils.py

@@ -210,6 +210,7 @@ def test_is_generic_alias(cls: type, expected: bool):
     "route,expected",
     [
         ("", "index"),
+        ("/", "index"),
         ("custom-route", "custom-route"),
         ("custom-route/", "custom-route"),
         ("/custom-route", "custom-route"),