Skip to content

Commit

Permalink
Include emotion inside of dynamic components (#4052)
Browse files Browse the repository at this point in the history
* bundle chakra in window for CSR

* remove repeated chakra ui reference

* use dynamically generated libraries

* remove js from it

* include emotion react for dynamic components

* make code more readable

Co-authored-by: Thomas Brandého <thomas.brandeho@gmail.com>

* jsx yea

* what

---------

Co-authored-by: Thomas Brandého <thomas.brandeho@gmail.com>
  • Loading branch information
2 people authored and simon committed Oct 23, 2024
1 parent 64e180f commit 55a5fcc
Showing 1 changed file with 13 additions and 2 deletions.
15 changes: 13 additions & 2 deletions reflex/components/dynamic.py
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@ def get_cdn_url(lib: str) -> str:
return f"https://cdn.jsdelivr.net/npm/{lib}" + "/+esm"


bundled_libraries = {"react", "@radix-ui/themes"}
bundled_libraries = {
"react",
"@radix-ui/themes",
"@emotion/react",
}


def bundle_library(component: "Component"):
Expand Down Expand Up @@ -127,7 +131,14 @@ def make_component(component: Component) -> str:

module_code_lines.insert(0, "const React = window.__reflex.react;")

return "//__reflex_evaluate\n" + "\n".join(module_code_lines)
return "\n".join(
[
"//__reflex_evaluate",
"/** @jsx jsx */",
"const { jsx } = window.__reflex['@emotion/react']",
*module_code_lines,
]
)

@transform
def evaluate_component(js_string: Var[str]) -> Var[Component]:
Expand Down

0 comments on commit 55a5fcc

Please sign in to comment.