Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Nov 28, 2023
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions reflex/.templates/jinja/web/pages/_app.js.jinja2
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
1 change: 0 additions & 1 deletion reflex/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
]
Expand Down
10 changes: 2 additions & 8 deletions reflex/compiler/compiler.py
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome :)

"": [ImportVar(tag="focus-visible/dist/focus-visible", install=False)],
}
from reflex.utils.imports import ImportVar


def _compile_document_root(root: Component) -> str:
Expand Down Expand Up @@ -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)
Expand Down
10 changes: 6 additions & 4 deletions reflex/components/base/app_wrap.py
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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)
)
6 changes: 3 additions & 3 deletions reflex/components/base/app_wrap.pyi
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion reflex/components/component.py
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
30 changes: 1 addition & 29 deletions reflex/components/el/element.py
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 0 additions & 2 deletions reflex/components/el/element.pyi
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
31 changes: 29 additions & 2 deletions reflex/components/libs/chakra.py
Copy link
Collaborator

@Lendemor Lendemor Nov 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we move this to a chakra/base.py or libs/chakra/base.py ?

Though I'm not sure we actually need the libs folder.

Original file line number Diff line number Diff line change
Expand Up @@ -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",
]

Expand All @@ -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:
Expand All @@ -37,6 +65,7 @@ def _get_dependencies_imports(cls) -> imports.ImportDict:
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",
]
}
Expand Down Expand Up @@ -89,8 +118,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]) {
Expand Down
1 change: 1 addition & 0 deletions reflex/components/libs/chakra.pyi
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 0 additions & 3 deletions reflex/components/radix/themes/base.py
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 0 additions & 2 deletions reflex/constants/installer.py
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions tests/test_app.py
Original file line number Diff line number Diff line change
Expand Up @@ -1210,7 +1210,9 @@ def test_app_wrap_compile_theme(compilable_app):
"function AppWrap({children}) {"
"return ("
"<RadixThemesTheme accentColor={`plum`}>"
"<Fragment>"
"{children}"
"</Fragment>"
"</RadixThemesTheme>"
")"
"}"
Expand Down Expand Up @@ -1261,7 +1263,9 @@ def page():
"<ChakraColorModeProvider>"
"<Text>"
"<Fragment2>"
"<Fragment>"
"{children}"
"</Fragment>"
"</Fragment2>"
"</Text>"
"</ChakraColorModeProvider>"
Expand Down