Skip to content

v0.5.0

Compare
Choose a tag to compare
@masenf masenf released this 14 May 00:56
· 2 commits to reflex-0.5.0 since this release
52e0507

Breaking Changes

Radix Themes 3.0

  • rx.badge now has size="3" available, and sizes "2" and "1" have been adjusted accordingly
  • rx.input.root and rx.input.input are deprecated. Just use rx.input as the root. It accepts rx.input.slot as a child.
    • [REF-2789] Graceful deprecation of rx.input.root and rx.input.input #3249

Previously Deprecated Features Removed

  • get_asset_path removed
  • passing state to rx.App
  • passing script_tags to rx.App.add_page
  • passing custom_styles to rx.markdown (use component_map instead)
  • rx.State getters removed (use self.router instead)
    • get_token
    • get_sid
    • get_headers
    • get_client_ip
    • get_current_page
    • get_query_params
    • get_cookies

Remove deprecations for 0.5.0 by @picklelo in #3222

New Features

Radix Themes 3.0

  • rx.spinner - new component for indeterminate loading
  • rx.skeleton - new component for placeholder loading
  • loading prop available for
    • rx.button
    • rx.icon_button
    • rx.spinner and rx.skeleton -- use loading=State.is_loading instead of using rx.cond
  • rx.data_list - new component for showing key value pairs
  • rx._x.progress - experimental radix themes progress component, supports duration for indeterminate progress.

Radix 3.0 by @Lendemor in #3159

New Public API for wrapping Components

To make wrapping components easier and less error prone, the following functions should be overridden when wrapping components:

  • add_style - return an rx.style.Style for default component styles
  • add_imports - return a dictionary of {"[email protected]": {"tag1", "tag2", "tag3"}} of required imports -- it will automatically be merged with the other component imports.
  • add_hooks - return a list of javascript snippets that will go inside the component function -- it will be deduped automatically with any other hooks
  • add_custom_code - return a list of javascript snippets that will go inside the module for each page the component is included in.

With these new methods, Reflex will internally call them for each parent class your component inherits from, so there is no need to call super().add_* or do any merging yourself.

State.setvar(var_name, value)

A less magic version of the automatic State.set_x setter functions which accept the var_name as a string.

  • [REF-2273] Implement .setvar special EventHandler by @masenf in #3163

Experimental Toast Component

def try_some_toast():
    return rx.fragment(
        rx.button("πŸ₯‚", on_click=rx._x.toast.info("Cheers"), variant="outline"),
        rx._x.toast.provider(),
    )

Generic .throttle and .debounce for all Event types

class ThrottleState(rx.State):
    last_event: datetime.datetime = datetime.datetime.now()

    def handle_mouse_move(self):
        self.last_event = datetime.datetime.now()

def throttle_example():
    return rx.box(
        ThrottleState.last_event,
        background_color=rx.color("red", 7),
        width="500px",
        height="500px",
        on_mouse_move=ThrottleState.handle_mouse_move.throttle(500),  # one event every 500ms
    )
  • Implement throttle and debounce as event actions by @masenf in #3091

rx.container new prop stack_children_full_width

For a nice streamlit-like wide layout, use the following snippet:

def index():
    return rx.container(
        rx.vstack(content()),
        stack_children_full_width=True,
    )

This will cause all vstack/hstack children and most stack child components to have width="100%" automatically, which provides a nice aesthetic for many apps without applying CSS to individual components.

  • [REF-2574] Default width for Stack (+children) and default padding for container by @masenf in #3104

Improvements

Unify on ruff-format

  • ruff-format: unify Black with Ruff v0.1 by @Borda in #2837
  • sync ruff version in pyproject.toml with the precommit one by @Lendemor in #3150

Error Messages

  • [REF-2636]Improve Error message for unsupported event trigger by @ElijahAhianyo in #3147
  • prevent shadowing by @Lendemor in #3221
    • Better error when a computed var has the same name as an existing state var.
  • [REF-2643]Throw Errors for duplicate Routes by @ElijahAhianyo in #3155
  • [REF-2622]Throw warning for incompatible uvicorn version on windows by @ElijahAhianyo in #3246

rx.color_mode changes

  • rx.color_mode.button now has built in positioning prop for floating button
    • IconButton for color_mode with nice default and a position props to control it by @Lendemor in #3165

Default style for rx.upload

Use Alembic Batch Mode for reflex db makemigrations

This improves compatibility with the default sqlite database when re-typing columns.

  • [REF-2658] Alembic should use batch mode for autogenerate by @masenf in #3223

README

Miscellaneous

Bugfixes

  • [REF-2587] Ignore top-level theme appearance by @masenf in #3119
    • avoids "flickering" when the top-level appearance differs from user selected mode
  • [REF-2619] Re-init when the template is out of date by @masenf in #3121
  • Fixed app name validation by @Snaipergelka in #3146
  • extend rx.input allowed types by @Lendemor in #3149
  • [REF-2682] Foreach over dict uses Tuple arg value by @masenf in #3160
    • Improve nested foreach when dict has complex values
  • Update CodeBlock class to accept rx.color in custom_style by @khhan0130 in #3168
  • Windows --frontend-only fix ctrl + c by @ElijahAhianyo in #3181
  • [REF-2676][REF-2751]Windows Skip ARM devices on bun install + Telemetry by @ElijahAhianyo in #3212
  • icon_button: Icon size should be specified as int pixels, not str by @masenf in #3247
  • copy background task marker by @benedikt-bartscher in #3255
    • Can now define background tasks in a state mixin
  • Dynamic NoSSRComponent properly renders in prod mode when using State/event handlers

Dependencies

Other Changes

New Contributors

Full Changelog: v0.4.9...v0.5.0