From fafdeb892e575ac89315c4e632c15d9abedb685f Mon Sep 17 00:00:00 2001 From: Khaleel Al-Adhami Date: Thu, 3 Oct 2024 15:58:42 -0700 Subject: [PATCH] Include emotion inside of dynamic components (#4052) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * jsx yea * what --------- Co-authored-by: Thomas Brandého --- reflex/components/dynamic.py | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/reflex/components/dynamic.py b/reflex/components/dynamic.py index 2e336027b..8d0bab669 100644 --- a/reflex/components/dynamic.py +++ b/reflex/components/dynamic.py @@ -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"): @@ -127,7 +131,14 @@ def load_dynamic_serializer(): 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]: