Component as Var type

[masenf]

@adhami3310 did most of the initial research for this one 👏

• It depends on importing components from a CDN instead of getting them from the local webpack bundle
• The component var must start with comp_ to be considered a dynamic component. In the future a special type of computed var will be used as the marker.
• The returned JS code is imported using a dynamic data uri module... but this means the function that evals the module needs to be async so it can await the import. Because of this, we cannot have the component function in the initial state (yet).
• Eventually the make_component and component_var decorator should become part of the framework instead of defined in the sample code.
• Embedded css props are not properly converted because these require the babel emotion plugin... but that plugin does not seem compatible with the standalone babel as it tries to bring in the node.js fs module.

Sample code

import reflex as rx
from reflex.compiler import templates, utils


def make_component(component: rx.Component) -> str:

    rendered_components = {}
    # Include dynamic imports in the shared component.
    if dynamic_imports := component._get_all_dynamic_imports():
        rendered_components.update(
            {dynamic_import: None for dynamic_import in dynamic_imports}
        )

    # Include custom code in the shared component.
    rendered_components.update(
        {code: None for code in component._get_all_custom_code()},
    )

    rendered_components[
        templates.STATEFUL_COMPONENT.render(
            tag_name="MySSRComponent",
            memo_trigger_hooks=[],
            component=component,
        )
    ] = None

    imports = {}
    for lib, names in component._get_all_imports().items():
        if not lib.startswith((".", "/")) and not lib.startswith("http") and not lib == "react":
            imports[f"https://cdn.jsdelivr.net/npm/{lib}" + "/+esm"] = names
        else:
            imports[lib] = names

    module_code_lines = templates.STATEFUL_COMPONENTS.render(
        imports=utils.compile_imports(imports),
        memoized_code="\n".join(rendered_components),
    ).splitlines()[1:]

    # Rewrite imports from `/` to destructure from window
    for ix, line in enumerate(module_code_lines[:]):
        if line.startswith("import "): 
            if 'from "/' in line:
                module_code_lines[ix] = line.replace("import ", "const ", 1).replace(" from ", " = window[", 1)  + "]"
            elif 'from "react"' in line:
                module_code_lines[ix] = line.replace("import ", "const ", 1).replace(' from "react"', " = window.React", 1)
        if line.startswith("export function"):
            module_code_lines[ix] = line.replace("export function", "export default function", 1)
    return "\n".join(module_code_lines)


def component_var():
    def outer(fn):
        def inner(*args, **kwargs) -> str:
            return make_component(fn(*args, **kwargs))
        inner.__name__ = fn.__name__
        return rx.var(inner)
    return outer



class State(rx.State):
    count: int = 0

    def increment(self):
        self.count += 1

    @component_var()
    def comp_buttoned_count(self) -> rx.Component:
        return rx.button(
            rx.text("Hi Mom"),
            f"Click me {self.count}",
            on_click=type(self).increment,
        )


def index() -> rx.Component:
    return (
        rx.box(
            rx.button(
                "Click me",
                on_click=State.increment,
            ),
            rx.text(State.count),
            State.comp_buttoned_count,
        ),
    )


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

[adhami3310]

import reflex as rx


class State(rx.State):
    component_string: str = "rx.button('hi')"

    message: rx.Component = rx.el.div("Hello")

    @rx.var
    def component(self) -> rx.Component:
        try:
            comp = eval(
                self.component_string,
                {
                    "rx": rx,
                    "State": State,
                },
            )
            if not isinstance(comp, rx.Component):
                return rx.el.div("Invalid component")
            return comp
        except Exception as e:
            return rx.el.div(str(e))

    def im_feeling_lucky(self):
        import random

        components = [
            rx.el.div("Hello"),
            rx.button("Click me", on_click=State.im_feeling_lucky),
            rx.text_area("Type here"),
            rx.badge("New"),
        ]

        self.message = random.choice(components)


def index():
    return rx.hstack(
        rx.vstack(
            rx.heading(
                "Input",
                size="3",
            ),
            rx.text_area(
                value=State.component_string,
                on_change=State.set_component_string,
                width="100%",
                flex="1",
                font_family="monospace",
            ),
            height="100%",
            flex="1",
        ),
        rx.vstack(
            rx.heading(
                "Output",
                size="3",
            ),
            rx.card(State.component, width="100%", flex="1"),
            rx.hstack(
                rx.button("I'm feeling lucky", on_click=State.im_feeling_lucky),
                State.message,
            ),
            height="100%",
            flex="1",
        ),
        height="100vh",
        width="100vw",
        box_sizing="border-box",
        padding="1rem",
        gap="1rem",
    )


app = rx.App()
app.add_page(index, "/")

[Lendemor]

Got a small question:
How does this impact the initial size for the frontend ?

[Lendemor]

Will this import all the radix components all the time?

[adhami3310]

Yes. In this PR we are not using radix that is stored in the window. I assume loading it there takes some additional time (sadly, not sure if there's any way of doing this dynamically).

[picklelo]

Functionality is working well for me, this is going to be huge.

• In a follow up we need to add more unit tests for all the new functions introduced here
• [discussed offline] There's a limitation on returning vars from other vars (leading to a "bug in React" error) - we should try to catch that happening and prevent it

Once this is rebased it should be good to merge!

[picklelo]

The first step of the new reflex!