ea15b184c0
* fully migrate vars into new system * i hate rufffff (no i don't) * fix silly pright issues (except colormode and state) * remove all instances of Var.create * create immutable callable var and get rid of more base vars * implement hash for all functions * get reflex-web to compile * get it to compile reflex-web successfully * fix tests * fix pyi * use override from typing_extension * put plotly inside of a catch * dicts are unusable sadly * fix silly mistake * overload equals to special case immutable var * improve test_cond * solve more CI issues, down to 94 failures * down to 20 errors * down to 13 errors * pass all testcases * fix pyright issues * reorder things * use get origin more * use fixed_type logic * various optimizations * go back to passing test cases * use less boilerplate * remove unnecessary print message * remove weird comment * add test for html issue * add type ignore * fix another silly issue * override get all var data for var operations call * make integration tests pass * fix immutable call var * better logic for finding parent class * use even better logic for finding state wrt computedvar * only choose the ones that are defined in the same module * small dict to large dict * [REF-3591] Remove chakra-related files from immutable vars PR (#3821) * Add comments to html metadata component (#3731) * fix: add verification for path /404 (#3723) Co-authored-by: coolstorm <manas.gupta@fampay.in> * Use the new state name when setting `is_hydrated` to false (#3738) * Use `._is_mutable()` to account for parent state proxy (#3739) When a parent state proxy is set, also allow child StateProxy._self_mutable to override the parent's `_is_mutable()`. * bump to 0.5.9 (#3746) * add message when installing requirements.txt is needed for chosen template during init (#3750) * #3752 bugfix add domain for XAxis (#3764) * fix appharness app_source typing (#3777) * fix import clash between connectionToaster and hooks.useState (#3749) * use different registry when in china, fixes #3700 (#3702) * do not reload compilation if using local app in AppHarness (#3790) * do not reload if using local app * Update reflex/testing.py Co-authored-by: Masen Furer <m_github@0x26.net> --------- Co-authored-by: Masen Furer <m_github@0x26.net> * Bump memory on relevant actions (#3781) Co-authored-by: Alek Petuskey <alekpetuskey@Aleks-MacBook-Pro.local> * [REF-3334] Validate Toast Props (#3793) * [REF-3536][REF-3537][REF-3541] Move chakra components into its repo(reflex-chakra) (#3798) * fix get_uuid_string_var (#3795) * minor State cleanup (#3768) * Fix code wrap in markdown (#3755) --------- Co-authored-by: Alek Petuskey <alek@pynecone.io> Co-authored-by: Manas Gupta <53006261+Manas1820@users.noreply.github.com> Co-authored-by: coolstorm <manas.gupta@fampay.in> Co-authored-by: Thomas Brandého <thomas.brandeho@gmail.com> Co-authored-by: Shubhankar Dimri <dimrishubhi@gmail.com> Co-authored-by: benedikt-bartscher <31854409+benedikt-bartscher@users.noreply.github.com> Co-authored-by: Khaleel Al-Adhami <khaleel.aladhami@gmail.com> Co-authored-by: Alek Petuskey <alekpetuskey@Aleks-MacBook-Pro.local> Co-authored-by: Elijah Ahianyo <elijahahianyo@gmail.com> * pyproject.toml: bump to 0.6.0a1 * pyproject.toml: depend on reflex-chakra>=0.6.0a New Var system support in reflex-chakra 0.6.0a1 * poetry.lock: relock dependencies * integration: bump listening timeout to 1200 seconds * integration: bump listening timeout to 1800 seconds * Use cached_var_no_lock to avoid ImmutableVar deadlocks (#3835) * Use cached_var_no_lock to avoid ImmutableVar deadlocks ImmutableVar subclasses will always return the same value for a _var_name or _get_all_var_data so there is no need to use a per-class lock to protect a cached attribute on an instance, and doing so actually is observed to cause deadlocks when a particular _cached_var_name creates new LiteralVar instances and attempts to serialize them. * remove unused module global --------- Co-authored-by: Masen Furer <m_github@0x26.net> Co-authored-by: Alek Petuskey <alek@pynecone.io> Co-authored-by: Manas Gupta <53006261+Manas1820@users.noreply.github.com> Co-authored-by: coolstorm <manas.gupta@fampay.in> Co-authored-by: Thomas Brandého <thomas.brandeho@gmail.com> Co-authored-by: Shubhankar Dimri <dimrishubhi@gmail.com> Co-authored-by: benedikt-bartscher <31854409+benedikt-bartscher@users.noreply.github.com> Co-authored-by: Alek Petuskey <alekpetuskey@Aleks-MacBook-Pro.local> Co-authored-by: Elijah Ahianyo <elijahahianyo@gmail.com>
544 lines
19 KiB
Python
544 lines
19 KiB
Python
from __future__ import annotations
|
|
|
|
from typing import Any, Dict
|
|
|
|
import pytest
|
|
|
|
import reflex as rx
|
|
from reflex import style
|
|
from reflex.components.component import evaluate_style_namespaces
|
|
from reflex.ivars.base import ImmutableVar, LiteralVar
|
|
from reflex.style import Style
|
|
from reflex.vars import ImmutableVarData, Var, VarData
|
|
|
|
test_style = [
|
|
({"a": 1}, {"a": 1}),
|
|
({"a": LiteralVar.create("abc")}, {"a": "abc"}),
|
|
({"test_case": 1}, {"testCase": 1}),
|
|
({"test_case": {"a": 1}}, {"testCase": {"a": 1}}),
|
|
({":test_case": {"a": 1}}, {":testCase": {"a": 1}}),
|
|
({"::test_case": {"a": 1}}, {"::testCase": {"a": 1}}),
|
|
(
|
|
{"::-webkit-scrollbar": {"display": "none"}},
|
|
{"::-webkit-scrollbar": {"display": "none"}},
|
|
),
|
|
({"margin_y": "2rem"}, {"marginTop": "2rem", "marginBottom": "2rem"}),
|
|
({"marginY": "2rem"}, {"marginTop": "2rem", "marginBottom": "2rem"}),
|
|
(
|
|
{"::-webkit-scrollbar": {"bgColor": "red"}},
|
|
{"::-webkit-scrollbar": {"backgroundColor": "red"}},
|
|
),
|
|
(
|
|
{"paddingX": ["2rem", "3rem"]},
|
|
{
|
|
"paddingInlineStart": ["2rem", "3rem"],
|
|
"paddingInlineEnd": ["2rem", "3rem"],
|
|
},
|
|
),
|
|
]
|
|
|
|
|
|
@pytest.mark.parametrize(
|
|
"style_dict,expected",
|
|
test_style,
|
|
)
|
|
def test_convert(style_dict, expected):
|
|
"""Test Format a style dictionary.
|
|
|
|
Args:
|
|
style_dict: The style to check.
|
|
expected: The expected formatted style.
|
|
"""
|
|
converted_dict, _var_data = style.convert(style_dict)
|
|
assert LiteralVar.create(converted_dict).equals(LiteralVar.create(expected))
|
|
|
|
|
|
@pytest.mark.parametrize(
|
|
"style_dict,expected",
|
|
test_style,
|
|
)
|
|
def test_create_style(style_dict, expected):
|
|
"""Test style dictionary.
|
|
|
|
Args:
|
|
style_dict: The style to check.
|
|
expected: The expected formatted style.
|
|
"""
|
|
assert LiteralVar.create(style.Style(style_dict)).equals(
|
|
LiteralVar.create(expected)
|
|
)
|
|
|
|
|
|
def compare_dict_of_var(d1: dict[str, Any], d2: dict[str, Any]):
|
|
"""Compare two dictionaries of Var objects.
|
|
|
|
Args:
|
|
d1: The first dictionary.
|
|
d2: The second dictionary.
|
|
"""
|
|
assert len(d1) == len(d2)
|
|
for key, value in d1.items():
|
|
assert key in d2
|
|
if isinstance(value, dict):
|
|
compare_dict_of_var(value, d2[key])
|
|
elif isinstance(value, Var):
|
|
assert value.equals(d2[key])
|
|
else:
|
|
assert value == d2[key]
|
|
|
|
|
|
@pytest.mark.parametrize(
|
|
("kwargs", "style_dict", "expected_get_style"),
|
|
[
|
|
({}, {}, {}),
|
|
(
|
|
{"color": "hotpink"},
|
|
{},
|
|
{"css": LiteralVar.create(Style({"color": "hotpink"}))},
|
|
),
|
|
({}, {"color": "red"}, {"css": LiteralVar.create(Style({"color": "red"}))}),
|
|
(
|
|
{"color": "hotpink"},
|
|
{"color": "red"},
|
|
{"css": LiteralVar.create(Style({"color": "hotpink"}))},
|
|
),
|
|
(
|
|
{"_hover": {"color": "hotpink"}},
|
|
{},
|
|
{"css": LiteralVar.create(Style({"&:hover": {"color": "hotpink"}}))},
|
|
),
|
|
(
|
|
{},
|
|
{"_hover": {"color": "red"}},
|
|
{"css": LiteralVar.create(Style({"&:hover": {"color": "red"}}))},
|
|
),
|
|
(
|
|
{},
|
|
{":hover": {"color": "red"}},
|
|
{"css": LiteralVar.create(Style({"&:hover": {"color": "red"}}))},
|
|
),
|
|
(
|
|
{},
|
|
{"::-webkit-scrollbar": {"display": "none"}},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style({"&::-webkit-scrollbar": {"display": "none"}})
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{},
|
|
{"::-moz-progress-bar": {"background_color": "red"}},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style({"&::-moz-progress-bar": {"backgroundColor": "red"}})
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{"color": ["#111", "#222", "#333", "#444", "#555"]},
|
|
{},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"@media screen and (min-width: 0)": {"color": "#111"},
|
|
"@media screen and (min-width: 30em)": {"color": "#222"},
|
|
"@media screen and (min-width: 48em)": {"color": "#333"},
|
|
"@media screen and (min-width: 62em)": {"color": "#444"},
|
|
"@media screen and (min-width: 80em)": {"color": "#555"},
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{
|
|
"color": ["#111", "#222", "#333", "#444", "#555"],
|
|
"background_color": "#FFF",
|
|
},
|
|
{},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"@media screen and (min-width: 0)": {"color": "#111"},
|
|
"@media screen and (min-width: 30em)": {"color": "#222"},
|
|
"@media screen and (min-width: 48em)": {"color": "#333"},
|
|
"@media screen and (min-width: 62em)": {"color": "#444"},
|
|
"@media screen and (min-width: 80em)": {"color": "#555"},
|
|
"backgroundColor": "#FFF",
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{
|
|
"color": ["#111", "#222", "#333", "#444", "#555"],
|
|
"background_color": ["#FFF", "#EEE", "#DDD", "#CCC", "#BBB"],
|
|
},
|
|
{},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"@media screen and (min-width: 0)": {
|
|
"color": "#111",
|
|
"backgroundColor": "#FFF",
|
|
},
|
|
"@media screen and (min-width: 30em)": {
|
|
"color": "#222",
|
|
"backgroundColor": "#EEE",
|
|
},
|
|
"@media screen and (min-width: 48em)": {
|
|
"color": "#333",
|
|
"backgroundColor": "#DDD",
|
|
},
|
|
"@media screen and (min-width: 62em)": {
|
|
"color": "#444",
|
|
"backgroundColor": "#CCC",
|
|
},
|
|
"@media screen and (min-width: 80em)": {
|
|
"color": "#555",
|
|
"backgroundColor": "#BBB",
|
|
},
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{
|
|
"_hover": [
|
|
{"color": "#111"},
|
|
{"color": "#222"},
|
|
{"color": "#333"},
|
|
{"color": "#444"},
|
|
{"color": "#555"},
|
|
]
|
|
},
|
|
{},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"&:hover": {
|
|
"@media screen and (min-width: 0)": {"color": "#111"},
|
|
"@media screen and (min-width: 30em)": {
|
|
"color": "#222"
|
|
},
|
|
"@media screen and (min-width: 48em)": {
|
|
"color": "#333"
|
|
},
|
|
"@media screen and (min-width: 62em)": {
|
|
"color": "#444"
|
|
},
|
|
"@media screen and (min-width: 80em)": {
|
|
"color": "#555"
|
|
},
|
|
}
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{"_hover": {"color": ["#111", "#222", "#333", "#444", "#555"]}},
|
|
{},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"&:hover": {
|
|
"@media screen and (min-width: 0)": {"color": "#111"},
|
|
"@media screen and (min-width: 30em)": {
|
|
"color": "#222"
|
|
},
|
|
"@media screen and (min-width: 48em)": {
|
|
"color": "#333"
|
|
},
|
|
"@media screen and (min-width: 62em)": {
|
|
"color": "#444"
|
|
},
|
|
"@media screen and (min-width: 80em)": {
|
|
"color": "#555"
|
|
},
|
|
}
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{
|
|
"_hover": {
|
|
"color": ["#111", "#222", "#333", "#444", "#555"],
|
|
"background_color": ["#FFF", "#EEE", "#DDD", "#CCC", "#BBB"],
|
|
}
|
|
},
|
|
{},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"&:hover": {
|
|
"@media screen and (min-width: 0)": {
|
|
"color": "#111",
|
|
"backgroundColor": "#FFF",
|
|
},
|
|
"@media screen and (min-width: 30em)": {
|
|
"color": "#222",
|
|
"backgroundColor": "#EEE",
|
|
},
|
|
"@media screen and (min-width: 48em)": {
|
|
"color": "#333",
|
|
"backgroundColor": "#DDD",
|
|
},
|
|
"@media screen and (min-width: 62em)": {
|
|
"color": "#444",
|
|
"backgroundColor": "#CCC",
|
|
},
|
|
"@media screen and (min-width: 80em)": {
|
|
"color": "#555",
|
|
"backgroundColor": "#BBB",
|
|
},
|
|
}
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{
|
|
"_hover": {
|
|
"color": ["#111", "#222", "#333", "#444", "#555"],
|
|
"background_color": "#FFF",
|
|
}
|
|
},
|
|
{},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"&:hover": {
|
|
"@media screen and (min-width: 0)": {"color": "#111"},
|
|
"@media screen and (min-width: 30em)": {
|
|
"color": "#222"
|
|
},
|
|
"@media screen and (min-width: 48em)": {
|
|
"color": "#333"
|
|
},
|
|
"@media screen and (min-width: 62em)": {
|
|
"color": "#444"
|
|
},
|
|
"@media screen and (min-width: 80em)": {
|
|
"color": "#555"
|
|
},
|
|
"backgroundColor": "#FFF",
|
|
}
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
],
|
|
)
|
|
def test_style_via_component(
|
|
kwargs: dict[str, Any],
|
|
style_dict: dict[str, Any],
|
|
expected_get_style: dict[str, Any],
|
|
):
|
|
"""Pass kwargs and style_dict to a component and assert the final, combined style dict.
|
|
|
|
Args:
|
|
kwargs: The kwargs to pass to the component.
|
|
style_dict: The style_dict to pass to the component.
|
|
expected_get_style: The expected style dict.
|
|
"""
|
|
comp = rx.el.div(style=style_dict, **kwargs) # type: ignore
|
|
compare_dict_of_var(comp._get_style(), expected_get_style)
|
|
|
|
|
|
class StyleState(rx.State):
|
|
"""Style vars in a substate."""
|
|
|
|
color: str = "hotpink"
|
|
color2: str = "red"
|
|
|
|
|
|
@pytest.mark.parametrize(
|
|
("kwargs", "expected_get_style"),
|
|
[
|
|
(
|
|
{"color": StyleState.color},
|
|
{"css": LiteralVar.create(Style({"color": StyleState.color}))},
|
|
),
|
|
(
|
|
{"color": f"dark{StyleState.color}"},
|
|
{
|
|
"css": ImmutableVar.create_safe(
|
|
f'({{ ["color"] : ("dark"+{StyleState.color}) }})'
|
|
).to(Dict[str, str])
|
|
},
|
|
),
|
|
(
|
|
{"color": StyleState.color, "_hover": {"color": StyleState.color2}},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"color": StyleState.color,
|
|
"&:hover": {"color": StyleState.color2},
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{"color": [StyleState.color, "gray", StyleState.color2, "yellow", "blue"]},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"@media screen and (min-width: 0)": {
|
|
"color": StyleState.color
|
|
},
|
|
"@media screen and (min-width: 30em)": {"color": "gray"},
|
|
"@media screen and (min-width: 48em)": {
|
|
"color": StyleState.color2
|
|
},
|
|
"@media screen and (min-width: 62em)": {"color": "yellow"},
|
|
"@media screen and (min-width: 80em)": {"color": "blue"},
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{
|
|
"_hover": [
|
|
{"color": StyleState.color},
|
|
{"color": StyleState.color2},
|
|
{"color": "#333"},
|
|
{"color": "#444"},
|
|
{"color": "#555"},
|
|
]
|
|
},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"&:hover": {
|
|
"@media screen and (min-width: 0)": {
|
|
"color": StyleState.color
|
|
},
|
|
"@media screen and (min-width: 30em)": {
|
|
"color": StyleState.color2
|
|
},
|
|
"@media screen and (min-width: 48em)": {
|
|
"color": "#333"
|
|
},
|
|
"@media screen and (min-width: 62em)": {
|
|
"color": "#444"
|
|
},
|
|
"@media screen and (min-width: 80em)": {
|
|
"color": "#555"
|
|
},
|
|
}
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
(
|
|
{
|
|
"_hover": {
|
|
"color": [
|
|
StyleState.color,
|
|
StyleState.color2,
|
|
"#333",
|
|
"#444",
|
|
"#555",
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"css": LiteralVar.create(
|
|
Style(
|
|
{
|
|
"&:hover": {
|
|
"@media screen and (min-width: 0)": {
|
|
"color": StyleState.color
|
|
},
|
|
"@media screen and (min-width: 30em)": {
|
|
"color": StyleState.color2
|
|
},
|
|
"@media screen and (min-width: 48em)": {
|
|
"color": "#333"
|
|
},
|
|
"@media screen and (min-width: 62em)": {
|
|
"color": "#444"
|
|
},
|
|
"@media screen and (min-width: 80em)": {
|
|
"color": "#555"
|
|
},
|
|
}
|
|
}
|
|
)
|
|
)
|
|
},
|
|
),
|
|
],
|
|
)
|
|
def test_style_via_component_with_state(
|
|
kwargs: dict[str, Any],
|
|
expected_get_style: dict[str, Any],
|
|
):
|
|
"""Pass kwargs to a component with state vars and assert the final, combined style dict.
|
|
|
|
Args:
|
|
kwargs: The kwargs to pass to the component.
|
|
expected_get_style: The expected style dict.
|
|
"""
|
|
comp = rx.el.div(**kwargs)
|
|
|
|
assert (
|
|
ImmutableVarData.merge(comp.style._var_data)
|
|
== expected_get_style["css"]._get_all_var_data()
|
|
)
|
|
# Assert that style values are equal.
|
|
compare_dict_of_var(comp._get_style(), expected_get_style)
|
|
|
|
|
|
def test_evaluate_style_namespaces():
|
|
"""Test that namespaces get converted to component create functions."""
|
|
style_dict = {rx.text: {"color": "blue"}}
|
|
assert rx.text.__call__ not in style_dict
|
|
style_dict = evaluate_style_namespaces(style_dict) # type: ignore
|
|
assert rx.text.__call__ in style_dict
|
|
|
|
|
|
def test_style_update_with_var_data():
|
|
"""Test that .update with a Style containing VarData works."""
|
|
red_var = LiteralVar.create("red")._replace(
|
|
merge_var_data=VarData(hooks={"const red = true": None}), # type: ignore
|
|
)
|
|
blue_var = LiteralVar.create("blue")._replace(
|
|
merge_var_data=VarData(hooks={"const blue = true": None}), # type: ignore
|
|
)
|
|
|
|
s1 = Style(
|
|
{
|
|
"color": red_var,
|
|
}
|
|
)
|
|
s2 = Style()
|
|
s2.update(s1, background_color=f"{blue_var}ish")
|
|
assert str(LiteralVar.create(s2)) == str(
|
|
LiteralVar.create({"color": "red", "backgroundColor": "blueish"})
|
|
)
|
|
assert s2._var_data is not None
|
|
assert "const red = true" in s2._var_data.hooks
|
|
assert "const blue = true" in s2._var_data.hooks
|