Browse Source

Include emotion inside of dynamic components (#4052)

* 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>
Khaleel Al-Adhami 7 months ago
parent
commit
fafdeb892e
1 changed files with 13 additions and 2 deletions
  1. 13 2
      reflex/components/dynamic.py

+ 13 - 2
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]: