[REF-1158] Move chakra-only deps to chakra lib (#2171)

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -3,6 +3,8 @@
 {% block declaration %}
 import { EventLoopProvider, StateProvider } from "/utils/context.js";
 import { ThemeProvider } from 'next-themes'
+import '/styles/styles.css'
+
 
 {% for custom_code in custom_codes %}
 {{custom_code}}

reflex/app.py

@@ -563,7 +563,6 @@ class App(Base):
             for i, tags in imports.items()
             if i
             not in [
-                *compiler.DEFAULT_IMPORTS.keys(),
                 *constants.PackageJson.DEPENDENCIES.keys(),
                 *constants.PackageJson.DEV_DEPENDENCIES.keys(),
             ]

reflex/compiler/compiler.py

@@ -16,12 +16,7 @@ from reflex.components.component import (
 )
 from reflex.config import get_config
 from reflex.state import State
-from reflex.utils.imports import ImportDict, ImportVar
+from reflex.utils.imports import ImportVar
-
-# Imports to be included in every Reflex app.
-DEFAULT_IMPORTS: ImportDict = {
-    "": [ImportVar(tag="focus-visible/dist/focus-visible", install=False)],
-}
 
 
 def _compile_document_root(root: Component) -> str:
@@ -103,8 +98,7 @@ def _compile_page(
     Returns:
         The compiled component.
     """
-    # Merge the default imports with the app-specific imports.
+    imports = component.get_imports()
-    imports = utils.merge_imports(DEFAULT_IMPORTS, component.get_imports())
     imports = utils.compile_imports(imports)
 
     # Compile the code to render the component.

reflex/components/base/app_wrap.py

@@ -1,10 +1,10 @@
 """Top-level component that wraps the entire app."""
 from reflex.components.component import Component
-
+from reflex.components.layout.fragment import Fragment
-from .bare import Bare
+from reflex.vars import Var
 
 
-class AppWrap(Bare):
+class AppWrap(Fragment):
     """Top-level component that wraps the entire app."""
 
     @classmethod
@@ -14,4 +14,6 @@ class AppWrap(Bare):
         Returns:
             A new AppWrap component containing {children}.
         """
-        return super().create(contents="{children}")
+        return super().create(
+            Var.create("{children}", _var_is_local=False, _var_is_string=False)
+        )

reflex/components/base/app_wrap.pyi

@@ -8,15 +8,15 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from reflex.components.component import Component
-from .bare import Bare
+from reflex.components.layout.fragment import Fragment
+from reflex.vars import Var
 
-class AppWrap(Bare):
+class AppWrap(Fragment):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        contents: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/component.py

@@ -591,7 +591,7 @@ class Component(BaseComponent, ABC):
         Returns:
             The dictionary of the component style as value and the style notation as key.
         """
-        return {"sx": self.style}
+        return {"style": self.style}
 
     def render(self) -> Dict:
         """Render the component.

reflex/components/el/element.py

@@ -1,39 +1,11 @@
 """Base class definition for raw HTML elements."""
 
-from typing import Dict
 
 from reflex.components.component import Component
 
 
 class Element(Component):
-    """The base class for all raw HTML elements.
+    """The base class for all raw HTML elements."""
-
-    The key difference between `Element` and `Component` is that elements do not
-    use Chakra's `sx` prop, instead passing styles directly to the React style
-    prop.
-    """
-
-    def render(self) -> Dict:
-        """Render the element.
-
-        Returns:
-            The code to render the element.
-        """
-        tag = self._render()
-        return dict(
-            tag.add_props(
-                **self.event_triggers,
-                key=self.key,
-                id=self.id,
-                style=self.style,
-                class_name=self.class_name,
-                **self.custom_attrs,
-            ).set(
-                contents=str(tag.contents),
-                children=[child.render() for child in self.children],
-                props=tag.format_props(),
-            )
-        )
 
     def __eq__(self, other):
         """Two elements are equal if they have the same tag.

reflex/components/el/element.pyi

@@ -7,11 +7,9 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Dict
 from reflex.components.component import Component
 
 class Element(Component):
-    def render(self) -> Dict: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/forms/debounce.py

@@ -113,7 +113,9 @@ class DebounceInput(Component):
             ),
         )
 
-        return super().create(**props)
+        component = super().create(**props)
+        component._get_style = child._get_style
+        return component
 
     def get_event_triggers(self) -> dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.

reflex/components/libs/chakra.py

@@ -15,6 +15,7 @@ class ChakraComponent(Component):
     library = "@chakra-ui/react@2.6.1"
     lib_dependencies: List[str] = [
         "@chakra-ui/system@2.5.7",
+        "focus-visible@5.2.0",
         "framer-motion@10.16.4",
     ]
 
@@ -25,6 +26,33 @@ class ChakraComponent(Component):
             (60, "ChakraProvider"): chakra_provider,
         }
 
+    def get_imports(self) -> imports.ImportDict:
+        """Chakra requires focus-visible and imported into each page.
+
+        This allows the GlobalStyle defined by the ChakraProvider to hide the blue border.
+
+        Returns:
+            The imports for the component.
+        """
+        return imports.merge_imports(
+            super().get_imports(),
+            {
+                "": {
+                    imports.ImportVar(
+                        tag="focus-visible/dist/focus-visible", install=False
+                    )
+                }
+            },
+        )
+
+    def _get_style(self) -> dict:
+        """Get the style for the component.
+
+        Returns:
+            The dictionary of the component style as value and the style notation as key.
+        """
+        return {"sx": self.style}
+
     @classmethod
     @lru_cache(maxsize=None)
     def _get_dependencies_imports(cls) -> imports.ImportDict:
@@ -37,6 +65,7 @@ class ChakraComponent(Component):
             dep: [imports.ImportVar(tag=None, render=False)]
             for dep in [
                 "@chakra-ui/system@2.5.7",
+                "focus-visible@5.2.0",
                 "framer-motion@10.16.4",
             ]
         }
@@ -89,8 +118,6 @@ class ChakraProvider(ChakraComponent):
 
     def _get_custom_code(self) -> str | None:
         return """
-import '/styles/styles.css'
-
 const GlobalStyles = css`
   /* Hide the blue border around Chakra components. */
   .js-focus-visible :focus:not([data-focus-visible-added]) {

reflex/components/libs/chakra.pyi

@@ -14,6 +14,7 @@ from reflex.utils import imports
 from reflex.vars import Var
 
 class ChakraComponent(Component):
+    def get_imports(self) -> imports.ImportDict: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/base.py

@@ -72,9 +72,6 @@ class RadixThemesComponent(Component):
             (45, "RadixThemesColorModeProvider"): RadixThemesColorModeProvider.create(),
         }
 
-    def _get_style(self) -> dict:
-        return {"style": self.style}
-
 
 LiteralAccentColor = Literal[
     "tomato",

reflex/constants/installer.py

@@ -103,8 +103,6 @@ class PackageJson(SimpleNamespace):
 
     DEPENDENCIES = {
         "axios": "1.4.0",
-        "focus-visible": "5.2.0",
-        "framer-motion": "10.16.4",
         "json5": "2.2.3",
         "next": "14.0.1",
         "next-sitemap": "4.1.8",

tests/test_app.py

@@ -1210,7 +1210,9 @@ def test_app_wrap_compile_theme(compilable_app):
         "function AppWrap({children}) {"
         "return ("
         "<RadixThemesTheme accentColor={`plum`}>"
+        "<Fragment>"
         "{children}"
+        "</Fragment>"
         "</RadixThemesTheme>"
         ")"
         "}"
@@ -1261,7 +1263,9 @@ def test_app_wrap_priority(compilable_app):
         "<ChakraColorModeProvider>"
         "<Text>"
         "<Fragment2>"
+        "<Fragment>"
         "{children}"
+        "</Fragment>"
         "</Fragment2>"
         "</Text>"
         "</ChakraColorModeProvider>"