laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Masen Furer 2023-11-28 00:04:07 -08:00 committed by GitHub
parent ee87e62efa
commit 0c55723df4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 52 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
reflex/.templates/jinja/web/pages/_app.js.jinja2
View File

@ -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}}

1
reflex/app.py
View File

@ -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(),
]

10
reflex/compiler/compiler.py
View File

@ -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
# 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:
@ -103,8 +98,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 = utils.compile_imports(imports)
# Compile the code to render the component.

10
reflex/components/base/app_wrap.py
View File

@ -1,10 +1,10 @@
"""Top-level component that wraps the entire app."""
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):
"""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)
)

6
reflex/components/base/app_wrap.pyi
View File

@ -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,

2
reflex/components/component.py
View File

@ -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.

30
reflex/components/el/element.py
View File

@ -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.

2
reflex/components/el/element.pyi
View File

@ -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

4
reflex/components/forms/debounce.py
View File

@ -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.

31
reflex/components/libs/chakra.py
View File

@ -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]) {

1
reflex/components/libs/chakra.pyi
View File

@ -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

3
reflex/components/radix/themes/base.py
View File

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

2
reflex/constants/installer.py
View File

@ -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",

4
tests/test_app.py
View File

@ -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>"