v0.5.0 Pre-release thread

[masenf]

Try out the Prerelease

Please report any problems you encounter in this discussion thread or as separate issues on reflex-dev/reflex.

pip install 'reflex~=0.5.0a'

Schedule

2024-05-08 17:06 PDT: 0.5.0a1 pre-release published for testing
2024-05-13 18:00 PDT: 0.5.0 Public release

Release Notes

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 [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 {"library-name@0.5.0": {"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.

• [REF-2523] Implement new public Component API by @masenf in [REF-2523] Implement new public Component API #3203
• add_style api by @Lendemor in add_style api #3202

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 [REF-2273] Implement .setvar special EventHandler #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(),
    )

• add toast component by @Lendemor in add toast component #3186

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 Implement throttle and debounce as event actions #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 [REF-2574] Default width for Stack (+children) and default padding for container #3104

Improvements

Unify on ruff-format

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

Error Messages

• [REF-2636]Improve Error message for unsupported event trigger by @ElijahAhianyo in [REF-2636]Improve Error message for unsupported event trigger #3147
• prevent shadowing by @Lendemor in prevent shadowing #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 [REF-2643]Throw Errors for duplicate Routes #3155
• [REF-2622]Throw warning for incompatible uvicorn version on windows by @ElijahAhianyo in [REF-2622]Throw warning for incompatible uvicorn version on windows #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 IconButton for color_mode with nice default and a position props to control it #3165

Default style for rx.upload

• Refactor upload component and add styled upload component by @ifechukwu001 in Refactor upload component and add styled upload component #3035

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 [REF-2658] Alembic should use batch mode for autogenerate #3223

README

• add color dalle code example by @tgberkeley in add color dalle code example #3108
• a little correction in the "es" docs by @JLDev-coder in a little correction in the "es" docs #3127
• Add Japanese README.md file by @PeterYusuke in Add Japanese README.md file #3234

Miscellaneous

• add default underline for links by @Lendemor in add default underline for links #3148
• Expose color_scheme on TabsTrigger by @masenf in Expose color_scheme on TabsTrigger #3112
• update blank template by @Lendemor in update blank template #3219
• Clean up config and app API by @picklelo in Clean up config and app API #3197
• Fixed unused kwargs in reflex.App by @Snaipergelka in Fixed unused kwargs in reflex.App #3170
  • Now able to pass a custom SocketIO instance

Bugfixes

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

Dependencies

• Bump bun version to 1.1.5 by @ElijahAhianyo in Bump bun version to 1.1.5 #3176
  • Windows Pin Bun version by @ElijahAhianyo in Windows Pin Bun version #3192
  • Windows Pin Version followup (Use Windows Install Link) by @ElijahAhianyo in Windows Pin Version followup (Use Windows Install Link) #3193
• [REF-2764] dep update 0.5.0 by @masenf in [REF-2764] dep update 0.5.0 #3245
  • gunicorn 22.0.0 with security fix

Other Changes

• separate DECORATED_PAGES per reflex app by @benedikt-bartscher in separate DECORATED_PAGES per reflex app #3102
• fix: args issue in __init__ of App class by @nautics889 in fix: args issue in __init__ of App class (#3140) #3141
• [REF-2620] Fallback to npm (not bun) by @masenf in [REF-2620] Fallback to npm (not bun) #3138
• pin macos version for CI by @Lendemor in pin macos version for CI #3145
• [REF-2618] Send template info in init telemetry event by @martinxu9 in [REF-2618] Send template info in init telemetry event #3153
• Integration testing: Firefox compatibility by @masenf in Integration testing: Firefox compatibility #3162
• Improved get_attribute_access_type by @benedikt-bartscher in Improved get_attribute_access_type #3156
• custom component install command to install current project in editable mode by @martinxu9 in custom component install command to install current project in editable mode #3200
• migrate deprecated redis.close to redis.aclose by @benedikt-bartscher in migrate deprecated redis.close to redis.aclose #3199
• allow optional props with None default value by @benedikt-bartscher in allow optional props with None default value #3179
• Allow StatefulComponent to also be rendered via __str__ by @masenf in Allow StatefulComponent to also be rendered via __str__ #3211
• Improved get_attribute_access_type tests by @benedikt-bartscher in Improved get_attribute_access_type tests #3180
• Improved implicit harness app names by @benedikt-bartscher in Improved implicit harness app names #3237
• do not access state __subclasses__, prevent issues with AppHarness by @benedikt-bartscher in do not access state __subclasses__, prevent issues with AppHarness #3143
• fix screenshot filenames by @benedikt-bartscher in fix screenshot filenames #3241
• minor test exp_not_equal fixup by @benedikt-bartscher in minor test exp_not_equal fixup #3256

New Contributors

• @nautics889 made their first contribution in fix: args issue in __init__ of App class (#3140) #3141
• @Borda made their first contribution in ruff-format: unify Black with Ruff v0.1 #2837
• @Snaipergelka made their first contribution in Fixed app name validation #3146
• @ifechukwu001 made their first contribution in Refactor upload component and add styled upload component #3035
• @JLDev-coder made their first contribution in a little correction in the "es" docs #3127
• @khhan0130 made their first contribution in Update CodeBlock class to accept rx.color in custom_style #3168

Full Changelog: v0.4.9...reflex-0.5.0

[hragbalian]

Hi @masenf,

Using rx.container(..., stack_children_full_width=True) seems to change the behavior of the styles of all of the children of the container. For example, I use the following pretty consistently:

rx.hstack(
    ...,
    align="center",
    justify="between",
    width="100%"
)

to push components off to opposite sides of the window, but this no longer works, whether I remove the width="100%" or leave it there, when stack_children_full_width is set to True. Is there a different setting I should make to get the same behavior, for children of containers?

[masenf]

@hragbalian thanks for testing the pre-release!

The stack_children_full_width affects many direct children of the stack, such as div, input, textarea, and others. So depending on what your children are, you may be experiencing "unwanted stretching".

If I use rx.button or rx.text, the elements are pushed to the edge of the stack, whereas with rx.card or rx.input the child elements are stretched to 100% width. This is by design.

If you don't want a particular element to be stretched, the easiest way to opt-out is to wrap it in an rx.box (even though it's a div, Reflex explicitly does not apply the rule to rx.box)

import reflex as rx


def index() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.heading("Text"),
            rx.hstack(
                rx.text("foo"),
                rx.text("bar"),
                align="center",
                justify="between",
            ),
            rx.heading("Button"),
            rx.hstack(
                rx.button("foo"),
                rx.button("bar"),
                align="center",
                justify="between",
            ),
            rx.heading("Card"),
            rx.hstack(
                rx.card("foo"),
                rx.card("bar"),
                align="center",
                justify="between",
            ),
            rx.heading("Card in a Box"),
            rx.hstack(
                rx.box(rx.card("foo")),
                rx.box(rx.card("bar")),
                align="center",
                justify="between",
            ),
            rx.heading("Input"),
            rx.hstack(
                rx.input(placeholder="foo"),
                rx.input(placeholder="bar"),
                align="center",
                justify="between",
            ),
            rx.heading("Input in a Box"),
            rx.hstack(
                rx.box(rx.input(placeholder="foo")),
                rx.box(rx.input(placeholder="bar")),
                align="center",
                justify="between",
            ),
            rx.logo(),
            spacing="5",
            align="center",
        ),
        padding_top="3em",
        min_height="100vh",
        stack_children_full_width=True,
    )


app = rx.App()
app.add_page(index)

[hragbalian]

Ah, ok, thanks @masenf, I'll give that a try!