move dynamic imports to dedicated method (#1785)

reflex/.templates/jinja/web/pages/base_page.js.jinja2

@@ -4,6 +4,10 @@
 {% for module in imports%}
   {{- utils.get_import(module) }}
 {% endfor %}
+
+{% for dynamic_import in dynamic_imports %}
+{{dynamic_import}}
+{% endfor %}
 {% endblock %}
 
 {% block declaration %}

reflex/compiler/compiler.py

@@ -109,6 +109,7 @@ def _compile_page(
     # Compile the code to render the component.
     return templates.PAGE.render(
         imports=imports,
+        dynamic_imports=component.get_dynamic_imports(),
         custom_codes=component.get_custom_code(),
         state_name=state.get_name(),
         hooks=component.get_hooks(),

reflex/compiler/utils.py

@@ -91,8 +91,8 @@ def compile_imports(imports: imports.ImportDict) -> List[dict]:
     import_dicts = []
     for lib, fields in imports.items():
         default, rest = compile_import_statement(fields)
-        # prevent all NoRenderImportVar from being rendered on the page
-        if any({f for f in fields if isinstance(f, NoRenderImportVar)}):  # type: ignore
+        # prevent lib from being rendered on the page if all imports are NoRenderImportVar
+        if all({isinstance(f, NoRenderImportVar) for f in fields}):  # type: ignore
             continue
 
         if not lib:

reflex/components/component.py

@@ -517,6 +517,35 @@ class Component(Base, ABC):
         # Return the code.
         return code
 
+    def _get_dynamic_imports(self) -> Optional[str]:
+        """Get dynamic import for the component.
+
+        Returns:
+            The dynamic import.
+        """
+        return None
+
+    def get_dynamic_imports(self) -> Set[str]:
+        """Get dynamic imports for the component and its children.
+
+        Returns:
+            The dynamic imports.
+        """
+        # Store the import in a set to avoid duplicates.
+        dynamic_imports = set()
+
+        # Get dynamic import for this component.
+        dynamic_import = self._get_dynamic_imports()
+        if dynamic_import:
+            dynamic_imports.add(dynamic_import)
+
+        # Get the dynamic imports from children
+        for child in self.children:
+            dynamic_imports |= child.get_dynamic_imports()
+
+        # Return the dynamic imports
+        return dynamic_imports
+
     def _get_imports(self) -> imports.ImportDict:
         imports = {}
         if self.library is not None and self.tag is not None:
@@ -846,7 +875,7 @@ class NoSSRComponent(Component):
 
         return imports
 
-    def _get_custom_code(self) -> str:
+    def _get_dynamic_imports(self) -> str:
         opts_fragment = ", { ssr: false });"
 
         # extract the correct import name from library name