Client-side storage / State integration

[masenf]

Extend State to allow the storage of select Vars in the user's browser.

At compile time, extract all rx.Cookie and rx.LocalStorage typed state Vars
and save them in /utils/context.js as clientStorage for access on the
frontend.

When rx.Cookie or rx.LocalStorage values are set on the backend, the
frontend will also set them in the appropriate browser store based on the delta
received over the websocket. The clientStorage object provides options and
other information about how to persist the vars.

During initial hydrate event, values in the browser store will be read on the
frontend and sent to the backend as part of the event payload to be applied to
the state with HydrateMiddleware.

REF-172

Sample code

import reflex as rx


class State(rx.State):
    foo: str = rx.Cookie(max_age=60)
    bar: rx.Cookie = ""
    normal: str = "normal"

    def on_load(self):
        print(self.get_cookies())

    def set_foo_from_input(self, value: str):
        if value:
            self.foo = value
        return rx.set_value("set_foo_input", "")

    def set_bar_from_input(self, value: str):
        if value:
            self.bar = value
        return rx.set_value("set_bar_input", "")


class SubState(State):
    baz: str = rx.Cookie(same_site="strict")

    def set_baz_from_input(self, value: str):
        if value:
            self.baz = value
        return rx.set_value("set_baz_input", "")


class SubSubState(SubState):
    qux: str = rx.Cookie(name="qux", same_site="strict")
    quuc: str = rx.LocalStorage(name="this is quuc")

    def set_qux_from_input(self, value: str):
        if value:
            self.qux = value
        return rx.set_value("set_qux_input", "")

    def set_quuc_from_input(self, value: str):
        if value:
            self.quuc = value
        return rx.set_value("set_quuc_input", "")


def index() -> rx.Component:
    return rx.fragment(
        rx.color_mode_button(rx.color_mode_icon(), float="right"),
        rx.vstack(
            rx.heading("Welcome to Reflex!", font_size="2em"),
            rx.box("Cookie foo: ", rx.code(State.foo)),
            rx.box("Cookie bar: ", rx.code(State.bar)),
            rx.box("Cookie baz: ", rx.code(SubState.baz)),
            rx.box("Cookie qux: ", rx.code(SubSubState.qux)),
            rx.box("Local storage quuc: ", rx.code(SubSubState.quuc)),
            rx.button("Set Qux", on_click=rx.set_cookie("qux", "set outside of state")),
            rx.input(
                placeholder="Set foo",
                on_blur=State.set_foo_from_input,
                id="set_foo_input",
            ),
            rx.input(
                placeholder="Set bar",
                on_blur=State.set_bar_from_input,
                id="set_bar_input",
            ),
            rx.input(
                placeholder="Set sub_state.baz",
                on_blur=SubState.set_baz_from_input,
                id="set_baz_input",
            ),
            rx.input(
                placeholder="Set sub_sub_state.qux",
                on_blur=SubSubState.set_qux_from_input,
                id="set_qux_input",
            ),
            rx.input(
                placeholder="Set sub_sub_state.quuc",
                on_blur=SubSubState.set_quuc_from_input,
                id="set_quuc_input",
            ),
            padding_top="10%",
        ),
    )


app = rx.App()
app.add_page(index, on_load=State.on_load)
app.compile()

(see also integration/test_client_side.py)

TODO

• fix up docstrings
• fix up pyright issues

[Lendemor]

Looks nice, good job!

[masenf]

@picklelo ready for review when you get a chance.

[picklelo]

Should these inherit from rx.Base to get Pydantic support? Most of our other classes inherit from there

[picklelo]

Why do we use __new__ instead of __init__ ?

[masenf]

these two classes extend str, which is immutable, and thus cannot override __init__ to set values.

[picklelo]

If we use the rx.Base we shouldn't need to explicitly set these as it will handle it automatically