From aca4121232c42176a3bbbea0a6ba10821378e7fa Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Tue, 21 Nov 2023 21:41:39 -0800 Subject: [PATCH] [REF-1158] Move chakra-only deps to chakra lib Remove chakra workarounds from other parts of the framework. --- .../.templates/jinja/web/pages/_app.js.jinja2 | 2 ++ reflex/app.py | 1 - reflex/compiler/compiler.py | 10 ++----- reflex/components/base/app_wrap.py | 10 ++++--- reflex/components/component.py | 2 +- reflex/components/el/element.py | 30 +------------------ reflex/components/libs/chakra.py | 30 +++++++++++++++++-- reflex/components/radix/themes/base.py | 3 -- reflex/constants/installer.py | 2 -- tests/test_app.py | 4 +++ 10 files changed, 44 insertions(+), 50 deletions(-) diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2 index deaf1a02be..7e45601ef8 100644 --- a/reflex/.templates/jinja/web/pages/_app.js.jinja2 +++ b/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}} diff --git a/reflex/app.py b/reflex/app.py index 01851d48d2..10313b192e 100644 --- a/reflex/app.py +++ b/reflex/app.py @@ -563,7 +563,6 @@ def get_frontend_packages(self, imports: Dict[str, set[ImportVar]]): for i, tags in imports.items() if i not in [ - *compiler.DEFAULT_IMPORTS.keys(), *constants.PackageJson.DEPENDENCIES.keys(), *constants.PackageJson.DEV_DEPENDENCIES.keys(), ] diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index 3b9d7db3e8..71e479f443 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -10,12 +10,7 @@ from reflex.components.component import Component, ComponentStyle, CustomComponent from reflex.config import get_config from reflex.state import State -from reflex.utils.imports import ImportDict, ImportVar - -# Imports to be included in every Reflex app. -DEFAULT_IMPORTS: ImportDict = { - "": [ImportVar(tag="focus-visible/dist/focus-visible", install=False)], -} +from reflex.utils.imports import ImportVar def _compile_document_root(root: Component) -> str: @@ -97,8 +92,7 @@ def _compile_page( Returns: The compiled component. """ - # Merge the default imports with the app-specific imports. - imports = utils.merge_imports(DEFAULT_IMPORTS, component.get_imports()) + imports = component.get_imports() imports = {k: list(set(v)) for k, v in imports.items()} utils.validate_imports(imports) imports = utils.compile_imports(imports) diff --git a/reflex/components/base/app_wrap.py b/reflex/components/base/app_wrap.py index e52831afa6..eb6d04775a 100644 --- a/reflex/components/base/app_wrap.py +++ b/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 reflex.vars import Var -from .bare import Bare - -class AppWrap(Bare): +class AppWrap(Fragment): """Top-level component that wraps the entire app.""" @classmethod @@ -14,4 +14,6 @@ def create(cls) -> Component: 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) + ) diff --git a/reflex/components/component.py b/reflex/components/component.py index 70097cf604..509503d098 100644 --- a/reflex/components/component.py +++ b/reflex/components/component.py @@ -514,7 +514,7 @@ def _get_style(self) -> dict: 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. diff --git a/reflex/components/el/element.py b/reflex/components/el/element.py index 0cb46f60ed..c95965f4a2 100644 --- a/reflex/components/el/element.py +++ b/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 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(), - ) - ) + """The base class for all raw HTML elements.""" def __eq__(self, other): """Two elements are equal if they have the same tag. diff --git a/reflex/components/libs/chakra.py b/reflex/components/libs/chakra.py index 34bfff1d5d..52784b9665 100644 --- a/reflex/components/libs/chakra.py +++ b/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 @@ def _get_app_wrap_components() -> dict[tuple[int, str], 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: @@ -89,8 +117,6 @@ def _get_imports(self) -> imports.ImportDict: 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]) { diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py index c75a426a41..46ef26214b 100644 --- a/reflex/components/radix/themes/base.py +++ b/reflex/components/radix/themes/base.py @@ -72,9 +72,6 @@ def _get_app_wrap_components() -> dict[tuple[int, str], Component]: (45, "RadixThemesColorModeProvider"): RadixThemesColorModeProvider.create(), } - def _get_style(self) -> dict: - return {"style": self.style} - LiteralAccentColor = Literal[ "tomato", diff --git a/reflex/constants/installer.py b/reflex/constants/installer.py index 948448b6be..3266b598df 100644 --- a/reflex/constants/installer.py +++ b/reflex/constants/installer.py @@ -103,8 +103,6 @@ class Commands(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", diff --git a/tests/test_app.py b/tests/test_app.py index e7ac03661a..ee3e4549a8 100644 --- a/tests/test_app.py +++ b/tests/test_app.py @@ -1210,7 +1210,9 @@ def test_app_wrap_compile_theme(compilable_app): "function AppWrap({children}) {" "return (" "" + "" "{children}" + "" "" ")" "}" @@ -1261,7 +1263,9 @@ def page(): "" "" "" + "" "{children}" + "" "" "" ""