Skip to content

Releases: reflex-dev/reflex

v0.4.0

16 Feb 22:33
@masenf masenf
v0.4.0
899e35e
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.4.0

See our blog post for more details on this release: https://reflex.dev/blog/2024-02-16-reflex-v0.4.0

Known Issues

Hot reload on windows does not seem to work (Under investigation)

Breaking Changes

Top-level Namespace is now Radix Components

See the latest Reflex documentation for complete information about the new components API.

Run reflex script keep-chakra to retain compatibility with 0.3.x apps.

This script will automatically update your app code to reference previous top-level namespace via rx.chakra.<x>

Some components are no longer available in the core library and must now be accessed via rx.chakra such as:

  • circular_progress
  • stat and stat_group
  • list (Use rx.unordered_list(list_style_type="none") instead)
  • pin_input
  • circle
  • button_group

Component Prop Changes

  • rx.progress no longer supports is_indeterminate
  • rx.slider: value is expected to be a list of numbers, one for each slider thumb. on_change will be called with a list of numbers, one for each slider thumb.
  • rx.vstack and rx.hstack no longer center content by default.
  • rx.icon uses Lucide tags (rx.chakra.icon for the previous tags)
  • spacing and size props accept radix scale, generally string integers, from "0" to "9".
    • To apply CSS units, use CSS props like gap, height, width, padding, etc.
  • type_, max_, and min_ props should be specified without the trailing underscore.

Radix Themes

Apply themes to the root rx.App component via the theme=rx.theme(...) prop. This will apply the theme to all radix components.

New Features

Upload Workflow Refactor

  • Set upload dir via environment variable REFLEX_UPLOADED_FILES_DIR, which defaults to ./uploaded_files.
  • Use rx.get_upload_dir() to access the upload directory from the backend.
  • Use rx.get_upload_url(filename) to get a link to the uploaded file in the frontend.

rx.download now accepts str or bytes for data argument

Allow users to download data directly from the backend without writing to an intermediate file.

All Changes

Read more

Contributors

masenf, Lendemor, and 13 other contributors
Assets 2

v0.3.10

06 Feb 00:38
@masenf masenf
v0.3.10
f5f7dcc
This commit was signed with the committer’s verified signature.
masenf Masen Furer
GPG key ID: 2AE2BD5531FF94F4
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.10

New Features

Lucide Icons (rx.lucide.icon)

View all iconds available via rx.lucide.icon at https://lucide.dev/icons/.

In 0.4.0, these icons will become the default icon set exposed at rx.icon.

Customize Reflex Directory location

Set REFLEX_DIR environment variable to control where reflex will download and install supporting
tools like bun, fnm, and node.

Improvements

  • Tabs validate parent is proper tab container by @tankztz in #2463

Only expose /_upload when using Upload component

  • auto enable /_upload endpoint only if Upload component is used by @benedikt-bartscher in #2430
  • Move is_used to Upload component rather than UploadFilesProvider by @masenf in #2514

Better SQLAlchemy Interoperability

Faster .pyi Generation (internal)

Fast Compilation

Use multiprocessing to compile CPU-bound pages faster.

Bug Fixes

Radix

The team is currently stabilizing the new radix-ui integration in preparation for our forthcoming 0.4.0
release.

Other Changes

New Contributors

Full Changelog: v0.3.9...v0.3.10

Contributors

masenf, Lendemor, and 11 other contributors
Assets 2

v0.3.9

22 Jan 21:47
@masenf masenf
v0.3.9
82ce265
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.9

New Features

Mixin Classes can now be used to augment State subclasses

Improvements

Bug fixes

Radix UI Preview

Other Changes

  • Update comments in template apps by @masenf in #2370
  • Get rid of compile in readme by @Alek99 in #2371
  • integration tests: disable windows builds for reflex-web by @masenf in #2417
  • Allow app harness tests to import State subclasses by @masenf in #2408

Full Changelog: v0.3.8...v0.3.9

Contributors

masenf, picklelo, and 6 other contributors
Assets 2

v0.3.8

08 Jan 21:33
@masenf masenf
v0.3.8
43a0867
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.8

Deprecations

app.compile() boilerplate is no longer required

New Features

rx.match construct

rx.match acts as a switch statement, mapping multiple values to components or props.

rx.button(
    State.mood,
    background_color=rx.match(
        State.mood,
        ("happy", "yellow"),
        ("sad", "blue"),
        ("angry", "red"),
        ("tickled", "pink"),
        "",  # last value provided is the default
    )
)

Add rx.time_picker component

Improvements

Bug Fixes

  • REF-1476/Create .web only after template selection by @ElijahAhianyo in #2288
  • Chakra input component type_ prop literal by @ElijahAhianyo in #2292
  • Bug fix: Export should only excludes assets folder if it's in the top level by @martinxu9 in #2308
  • fix tailwind for stateful components imported from utils by @Lendemor in #2328
  • Fix browser warning when rendering lists via rx.markdown
    • Avoid passing props to lists and list items by @masenf in #2326
  • fix editable property of columns being ignored in data_editor by @Lendemor in #2338
  • Allow tailwind to be completely disabled
    • [REF-1365] Radix + Tailwind Compatibility (and allow tailwind to be completely disabled) by @masenf in #2246
  • Handle VarData roundtrip when encoded value contains newline by @masenf in #2350

Radix UI Preview

Other

New Contributors

Full Changelog: v0.3.7...v0.3.8

Contributors

masenf, Lendemor, and 12 other contributors
Assets 2

v0.3.7

14 Dec 23:55
@masenf masenf
v0.3.7
caedda5
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.7

New Features

  • add next/image and next-video in next namespace by @Lendemor in #2223

Improvements

  • Support SQLAlchemy v2
    • [REF-24] support SQLModel 0.0.14 + SQLAlchemy 2 by @masenf in #2283
  • Support redis: and rediss: uri for REDIS_URI (and allow authentication)
  • capture exceptions thrown by any process in run_concurrently_context by @jackie-pc in #2296

Bug Fixes

Radix (WiP)

Other Changes

New Contributors

Full Changelog: v0.3.6...v0.3.7

Contributors

masenf, Lendemor, and 7 other contributors
Assets 2

v0.3.6

06 Dec 21:41
@picklelo picklelo
v0.3.6
46d0388
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.6

This release fixes an issue with v0.3.5 in using base HTML components with state.

What's Changed

Full Changelog: v0.3.5...v0.3.6

Contributors

masenf, picklelo, and martinxu9
Assets 2

v0.3.5

06 Dec 16:00
@masenf masenf
v0.3.5
94f657c
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.5

Known Issues

Using rx.el.* namespace tags with State vars is not currently working (#2264)

Breaking Changes

  • Component._get_app_wrap_components is now a staticmethod for performance reasons.

Deprecations

Deprecated features will not be removed until reflex-0.4.0.

Improvements

Performance

This release includes numerous performance improvements during both compile phase and at runtime.

Backend

  • [REF-1035] Track ComputedVar dependency per class by @masenf in #2067
    • Reduce memory and deserialization time for every app user.
  • [REF-201] Separate on_load handler from initial hydration by @masenf in #1847
    • Avoid expensive hydration of entire state when navigating between pages (with @ElijahAhianyo)

Frontend

Each substate in an app can now be accessed independently. Components which depend on any state are automatically pulled out of the main page component and defined within separate "memoized" components that only update when the substates they directly depend upon have changed.

This improves re-render time on some reflex-web pages by 20x 🚀

  • [REF-889] useContext per substate by @masenf in #2149
  • [REF-144] Add context in each component to prevent rerenders by @masenf in #2198
  • Memoize markdown component_map by @masenf in #2219
  • Support hooks in custom components (state, addEvents) by @masenf in #2234
  • [reflex-web tweaks] Do not memoize children of InputGroup by @masenf in #2230
  • [REF-1349] RechartsCharts and ResponsiveContainer must be memo leaf by @masenf in #2240
  • Generalize MemoizationLeaf Component mixin (and apply to Cond and NextHead) by @masenf in #2247
  • [REF-1352] Markdown component_map hash improvements by @masenf in #2241

Compiler

  • _valid_children and _invalid_children accessible from class by @Lendemor in #2192
    • [fixup] _valid_children and _invalid_children pyi_generator and graphing components by @masenf in #2194
  • Speed up reflex CLI imports by @picklelo in #2185
  • Use singleton app provider to speed up compiles by @picklelo in #2172

Allow Multiple Subclasses of rx.State

Any module can now create substates without importing from a base state defined in the App.

Third-party components may define and use their own substates.

(Note: Working event handlers for substates defined within nested functions are still TODO.)

Improved Basic HTML Elements

The rx.el namespace provides access to basic HTML tags, such as a, div, and p, which can be used to build the frontend instead of using Chakra components. This can be useful when styling the app via tailwind.

As Reflex moves to using radix-ui components, this cleans up the API because many radix components directly inherit from basic HTML elements.

  • HTML Refactor by @Alek99 in #2164
  • [REF-1158] Move chakra-only deps to chakra lib by @masenf in #2171
    • If no chakra components are used, then chakra deps are not installed for the app.
    • [fixup] [reflex-web tweaks] chakra Icon is a ChakraComponent (use sx for style) by @masenf in #2231

Allow PIL images to be serialized in alternate formats

Setting the image.format attribute on a PIL Image.Image object controls what format the image is serialized as when sending to the frontend via data URI.

Add/Subtract time delta with rx.moment

Dependency Bumps

Other Improvements

Bugfixes

Fix _hover, _focus and other leading underscore props

Others

  • fix name for import var when is default and add tests by @Lendemor in #2214
  • code_block responds to color mode by default by @masenf in #2228

Data Editor

Internal

New Contributors

Full Changelog: v0.3.4...v0.3.5

Contributors

arnomoonens, masenf, and 7 other contributors
Assets 2

v0.3.4

17 Nov 21:11
@masenf masenf
v0.3.4
0870658
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.4

This release re-exposes top level names under the reflex namespace that were erroneously removed in v0.3.3

New Features

  • [REF-723+] Upload with progress and cancellation by @masenf in #1899

What's Changed

Full Changelog: v0.3.3...v0.3.4

Contributors

masenf, Lendemor, and 4 other contributors
Assets 2

v0.3.3 [yanked]

15 Nov 19:29
@ElijahAhianyo ElijahAhianyo
v0.3.3
9d13e2d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.3 [yanked]

New Features

Python 3.12 is now supported

by @masenf in #2006

Next.js upgrade from 13 to 14

by @Lendemor in #2142

Clear Form using reset_on_submit prop

You can use the reset_on_submit on a form to reset form values to their original states after submitting the form. Simply set the value to True.

rx.form(
    rx.input(id="text", placeholder="text"),
    rx.button("Submit", type_="submit"),
    reset_on_submit=True,
)

(by @masenf in #2012)

Forms support dynamic names.

  • Dynamic refs / ids don't really work but you can use dynamic names instead

    rx.form(
    rx.vstack(
        rx.input(name="name_input"),
        rx.hstack(rx.pin_input(length=4, name="pin_input")),
        rx.number_input(name="number_input"),
        rx.checkbox(name="bool_input"),
        rx.switch(name="bool_input2"),
        rx.slider(name="slider_input"),
        rx.range_slider(name="range_input"),
        rx.radio_group(["option1", "option2"], name="radio_input"),
        rx.select(["option1", "option2"], name="select_input"),
        rx.text_area(name="text_area_input"),
        rx.input(
            name="debounce_input",
            debounce_timeout=0,
            on_change=rx.console_log,
        ),
        rx.button("Submit", type_="submit"),
    ),
),

  • Use rx.Var.range (similar to python’s range ) with rx.foreach to dynamically create form elements with dynamic names. rx.Var.range(v1, v2, step) takes in start, end and step values which should be integers or Var integers.

    class State:
    grid: int = 4

    def handle_submit(self, form_data: dict):
        print(form_data)

rx.form(
    rx.responsive_grid(
        rx.foreach(
            rx.Var.range(State.grid),
            lambda i: rx.foreach(
                rx.Var.range(State.grid),
                lambda j: rx.input(
                    name=f"grid_{i}_{j}",
                    placeholder=f"grid {i} {j}",
                    key=f"{i}_{j}",
                    width="4em",
                ),
            ),
        ),
        columns=[State.grid],
    ),
    rx.button("Submit", type_="submit"),
    reset_on_submit=True,
    on_submit=State.handle_submit,
),

New form-based code should prefer to use the name attribute to avoid the overhead of using refs for no specific gain (unless focus or value setting is required).

(by @masenf in #2012)

Improvements

  • Assume secure protocol (wss://) and no port If the frontend is being accessed via HTTPS and the API_URL is either localhost, 0.0.0.0 or :: and uses a non-secure protocol by @masenf in #2129
  • Reduce Syntax highlighter footprint by @ElijahAhianyo in #2037
  • Lazy import modules in reflex by @picklelo in #2144

Doc fixups

Bug Fixes

  • fix an issue where some fields in State.router.headers were not getting updated by @Lendemor in #2133
  • Resolve peer dependency conflict causing package-lock.json to relock on every run by @ElijahAhianyo in #2106

Other Changes

New Contributors

Full Changelog: v0.3.2...0.3.3

Contributors

masenf, Lendemor, and 6 other contributors
Assets 2

v0.3.2

04 Nov 00:13
@masenf masenf
v0.3.2
f990530
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.3.2

Thank you to our wonderful users and contributors! 👏 🎉

New Features

Expose stop_propagation and prevent_default on Event Handlers

When an event trigger should not propagate to DOM elements nested below it use .stop_propagation.

When an event action should override the browser default (like following a link), use .prevent_default.

Each of these "event actions" will trigger the frontend to call the corresponding method on the DOM event associated with the event trigger. Both actions may be applied to the same event handler.

  • Expose DOM event actions on EventHandler, EventSpec, and EventChain (stopPropagation) by @masenf in #1891
  • Do not stop prop is there is no prop to stop by @masenf in #2116

Gunicorn Worker Class

The gunicorn_worker_class may be specified in rxconfig.py to configure low-level uvicorn settings when running in prod mode. See example in dicussion #2070.

  • Expose gunicorn_worker_class via Config by @masenf in #2084

Components can be passed as props

Components can now accept props with type Var[Component], which allows for greater customization of components and greater flexibility when wrapping third-party components.

This only works for static components passed at compile-time. Components cannot be used in a State Var.

Github Codespaces

Creating a codespace from the reflex repo is now supported. Be sure to open the Backend URL in the browser first (or mark the port as Public) to allow the frontend to access the backend via websocket.

Improvements

Add orientation prop to rx.stepper

  • Add 'orientation' Property to Reflex Stepper Components by @shu-qian in #2089

Add column resize for data editor

Doc fixups

Template Improvements

Hosting Service CLI

  • [REF-1042] Hosting CLI: check the user selected app name by @martinxu9 in #2102
  • Hosting CLI: use http endpoint to return deploy milestones by @martinxu9 in #2085

Other Improvements

Bug Fixes

README Translations

New Contributors

Full Changelog: v0.3.1...v0.3.2

Contributors

masenf, Lendemor, and 9 other contributors
Assets 2