* [REF-2787] add_hooks supports Var-wrapped hooks
* Fix VarData definition in .pyi file to allow removal of type ignore comments
* Var.create and Var.create_safe accept _var_data parameter
* Replace instances where a set of imports was being passed to VarData
* Update code throughout reduce use of `._replace` to add VarData
* Fixup: user hooks _var_data.imports will never be iterable, just a single ImportDict
* Allow `Component.add_style` to return a regular dict
It's more convenient to allow returning a regular dict without having to import
and wrap the value in `rx.style.Style`.
If the dict contains any Var or encoded VarData f-strings, these will be picked
up when the plain dicts are passed to Style.update().
Because Style.update already merges VarData, there is no reason to explicitly
merge it again in this function; this change keeps the merging logic inside the
Style class.
* Test for Style.update with existing Style with _var_data and kwargs
Should retain the _var_data from the original Style instance
* style: Avoid losing VarData in Style.update
If a Style class with _var_data is passed to `Style.update` along with kwargs,
then the _var_data was lost in the double-splat dictionary expansion.
Instead, only apply the kwargs to an existing or new Style instance to retain
_var_data and properly convert values.
* add_style return annotation is Dict[str, Any]
* nit: use lowercase dict in annotation
* Allow EventHandler args to be partially applied
When an EventHandler is called with an incomplete set of args it creates a
partial EventSpec. This change allows Component._create_event_chain to apply
remaining args from an args_spec to an existing EventSpec to make it
functional.
Instead of requiring the use of `lambda` functions to pass arguments to an
EventHandler, they can now be passed directly and any remaining args defined in
the event trigger will be applied after those.
* [REF-2273] Implement `.setvar` special EventHandler
All State subclasses will now have a special `setvar` EventHandler which
appears in the autocomplete drop down, passes static analysis, and canbe used
to set State Vars in response to event triggers.
Before:
rx.input(value=State.a, on_change=State.set_a)
After:
rx.input(value=State.a, on_change=State.setvar("a"))
This reduces the "magic" because `setvar` is statically defined on all State
subclasses.
* Catch invalid Var names and types at compile time
* Add test cases for State.setvar
* Use a proper redis-compatible token
* build pyi files when building/publishing 3rd party
* fix typo in workflow
* add future annotation
* add tests to pass coverage check
* add more unit tests
* omit pyi_generator from test coverage
* change black from dev deps to direct deps
* remake all pyi
* format pyi if black is present, return as if otherwise
* fix requested changes
---------
Co-authored-by: Masen Furer <m_github@0x26.net>
* [REF-2265] ComponentState: scaffold for copying State per Component instance
Define a base ComponentState which can be used to easily create copies of the
given State definition (Vars and EventHandlers) that are tied to a particular
instance of a Component (returned by get_component)
* Define `State` field on `Component` for typing compatibility.
This is an Optional field of Type[State] and is populated by ComponentState.
* Add integration/test_component_state.py
Create two independent counters and increment them separately
* Add unit test for ComponentState
* Separate `get_hooks` and `get_hooks_internal` for stable output
When downstream component wrappers depend on State when writing hooks, they
need to be assured that all internal hooks (events, var hooks, memoized
handlers, etc) will be rendered prior to user-defined hooks.
This also makes it less likely for downstream components to feel the need to
overwrite `get_hooks` (no underscore) directly and break internal functioning
of Reflex components.
* Include internal hooks in AppWrap and Page
* Apply get_hooks_internal in a few more places
* CustomComponent ignores the annotation type in favor of the passed value
Do not require rx.memo wrapped functions to have 100% correct annotations.
* test_custom_component_get_imports: test imports from wrapped custom components
* Account for imports of custom components for frontend installation
Create new ImportVar that only install the package to avoid rendering the
imports in the page that contains the custom component itself.
* Handle Imports that should never be installed
* Fix up double negative logic
* Perf Optimization: use the imports we already calculate during compile
Instead of augmenting _get_imports with a weird, slow, recursive crawl and
dictionary reconstruction, just use the imports that we compile into the
components.js file to install frontend packages needed by the custom
components.
Same effect, but adds essentially zero overhead to the compilation.
* Make @rx.memo work with state vars passed as props
Seems like this was a regression from the StatefulComponent refactor, because
trying to pass a state Var to a CustomComponent gave undefined, likely due to
`_get_vars` not accounting for `self.props` in CustomComponents.
With this change, it works.
Integration test added to `test_var_operations.py`
* Allow CustomComponent props to be Component
Avoid calling `.json()` on all Base types because the Var serializer already
does that, but this way, more specific types (like Component) can be serialized
differently.
When the type is Component, attach a VarData with the imports and hooks to when
the Var is rendered, it also carries the correct imports/hooks and does not
throw frontend errors.
* [REF-2158] Enable state when `on_load` or event_triggers are set.
Basically all events in a reflex app require the backend to be up, even the
built-in server side events round trip to the backend and require "state" even
if no user-defined state classes are declared.
test_app_state_determination: checking that state is enabled at the right time
* Clear out DECORATED_PAGES when initializing a new app
* rebase
* pass include_children kwarg in radix FormRoot
* respect include_children
* ruff fixes
* readd statemanager init, run pyi gen
* minor performance imporovements, fix for state changes
* fix pyi and pyright
* pass include_children for chakra
* remove old state detection
* add test for unused states in stateless app
---------
Co-authored-by: Masen Furer <m_github@0x26.net>
* Expose `on_drop` event trigger for rx.upload component.
If `on_drop` is provided, it should be an EventSpec accepting the special
rx.upload_files() arg.
When `on_drop` is provided, it will be called immediately when files are
selected. The default functionality of saving a file list to be uploaded later
will not be available.
* update pyi file
* Undeprecate explicit EventChain
* Accordion Root Exclude `color_scheme` and `variant` props in tag
* colorScheme -> color for radix primitives
* remove _rename_props based on pr comments
* lint
* pyi fix
* pop instead of del
* Component: translate underscore suffix for props supported by chakra
type_ becomes type
min_ becomes min
max_ becomes max
id_ becomes id
The deprecation warning is only displayed when the underscore suffix prop is
passed and the non-underscore suffix prop is defined on the given component.
* Rename type_ to type in accordion and scroll_area
All of the new radix components avoid the underscore suffix names where
possible.
* Update deprecation warning wording
* Refactor for readability
* Do not raise deprecation warning for `id_`
id is kind of a special prop because it exists on all components
* Add test case for deprecating underscore suffix props
* style: shorthand replacements need camelCase
Avoid warning on terminal and in browser console from using kebab-case CSS
props with emotion.
* _rename_props only replace prop name once
In case the value also contains the prop name, we don't want to replace it
multiple times.
* pyi_generator: ignore _rename_props in create signature
* Avoid shadowing CSS prop `display` and `gap`
Replace usages of `gap` with `spacing` to retain Radix sizing number system,
while allowing users to specify a responsive `gap` using CSS units.
Remove `display` props from radix components, allowing `display` to accept
responsive lists.
* checkbox: apply `gap` to `flex` if provided
* Remove _rename_props from .create signatures
* Fix spacing prop in blank template
* Fixup tests after changing style shorthand to return camelCase
* update to ensure every radix component only inherits events from EventTriggers class
* update the naming of event handlers to swap name on_value_change and on_checked_change to on_change
* update to call _replace_prop_names in component.py
* small darglint error fix
* update to ensure every radix component only inherits events from EventTriggers class
* update the naming of event handlers to swap name on_value_change and on_checked_change to on_change
* update to call _replace_prop_names in component.py
* small darglint error fix
* updates to pass pytest tests
* small fix
* duplicate removal
---------
Co-authored-by: Tom Gotsman <tomgotsman@toms-mbp.lan>
* Expose preventDefault and stopPropagation for DOM events
All EventHandler, EventSpec, and EventChain can now carry these extra
"event_actions" that will be applied inside the frontend code when an event is
triggered from the DOM.
Fix#1621
Fix REF-675
* Test cases (and fixes) for "event_actions"
* form: from __future__ import annotations
for py38, py39 compat
* Revert overzealous merge conflict resolution
* partly add some radix-ui/themes based components
* add @radix-ui/themes integration to top-level app
* WiP: compile _app_wrap based on which component library is used
TODO: working color mode
* WiP get color mode working with agnostic provider
still not perfect, as the RadixColorModeProvider seems to trip hydration errors
when using color_mode_cond component, but for now, this provides a nice balance
between the two libraries and allows them to interoperate.
* WiP template _app.js instead of making a separate wrap file
* WiP: use next-themes for consistent darkmode switching
* strict pin chakra deps
* Move ChakraColorModeProvider to separate js file
* move nasty radix themes js code into js files
* remove chakra from default imports
* chakra fixup import to use .js extension
* Add radix theme typography and layout components
* do NOT special case the radix theme...
avoid templating json and applying it, avoid non-customizable logic
just add the radix Theme component as an app wrap if the user specifies it to
rx.App, and any other app-wrap theme-like component could _also_ be used
without having to change the code.
this also allows different themes for different sections of the app by simply
placing elements inside a different rdxt.theme wrapper.
* Theme uses "radius" not "borderRadius"
* move next-themes to main packages.json
this is always used, regardless of the component library
* test_app: test cases for app_wrap interface
* Finish wrapping Button, Switch, and TextField components
* docstring, comments, static fixups
* debounce: use alias or tag when passing child Element
Fix REF-830
* test_app: ruin my beautiful indentation
* py38 compatibility
* Add event triggers for switch and TextField
* Add type hints for radix theme components
* radix themes fixups from writing the tests
* Add integration test for radix themes components
* test_app: mock out package installation
we only need the compile result, we're not actually trying to install packages
* avoid incompatible version of @emotion/react
* test_radix_themes: include theme_panel component
* next-themes default scheme: "light"
until all of our components look good in dark mode, need to keep the default as
light mode regardless of the system setting.
* Fix dunamic imoprt for react player and plotly
* Fix format
* Fix pr comments
* Update react player
---------
Co-authored-by: Alek Petuskey <alekpetuskey@aleks-mbp.lan>
allow dynamic id (BaseVar) to be specified (from state value or foreach), but
do not create a react reference for it, since that must be known at compile
time.
if a react ref is needed, then specify a string _at compile time_, not from
state.
fix#1302
