Parcourir la source

[ENG-4255] Code blocks lead to redefined const in web page (#4598)

Instead of potentially defining `_LANGUAGE` constant twice in a component,
simply pass the language prop directly to the hook generator function.

If no language is passed, then it defaults to `_LANGUAGE`, which continues to
work for markdown component_map use case.
Masen Furer il y a 4 mois
Parent
commit
93245ef143
1 fichiers modifiés avec 13 ajouts et 9 suppressions
  1. 13 9
      reflex/components/datadisplay/code.py

+ 13 - 9
reflex/components/datadisplay/code.py

@@ -502,8 +502,8 @@ class CodeBlock(Component, MarkdownComponentMap):
 
 
         theme = self.theme
         theme = self.theme
 
 
-        out.add_props(style=theme).remove_props("theme", "code", "language").add_props(
-            children=self.code, language=_LANGUAGE
+        out.add_props(style=theme).remove_props("theme", "code").add_props(
+            children=self.code,
         )
         )
 
 
         return out
         return out
@@ -512,20 +512,25 @@ class CodeBlock(Component, MarkdownComponentMap):
         return ["can_copy", "copy_button"]
         return ["can_copy", "copy_button"]
 
 
     @classmethod
     @classmethod
-    def _get_language_registration_hook(cls) -> str:
+    def _get_language_registration_hook(cls, language_var: Var = _LANGUAGE) -> str:
         """Get the hook to register the language.
         """Get the hook to register the language.
 
 
+        Args:
+            language_var: The const/literal Var of the language module to import.
+                For markdown, uses the default placeholder _LANGUAGE. For direct use,
+                a LiteralStringVar should be passed via the language prop.
+
         Returns:
         Returns:
             The hook to register the language.
             The hook to register the language.
         """
         """
         return f"""
         return f"""
- if ({_LANGUAGE!s}) {{
+ if ({language_var!s}) {{
     (async () => {{
     (async () => {{
       try {{
       try {{
-        const module = await import(`react-syntax-highlighter/dist/cjs/languages/prism/${{{_LANGUAGE!s}}}`);
-        SyntaxHighlighter.registerLanguage({_LANGUAGE!s}, module.default);
+        const module = await import(`react-syntax-highlighter/dist/cjs/languages/prism/${{{language_var!s}}}`);
+        SyntaxHighlighter.registerLanguage({language_var!s}, module.default);
       }} catch (error) {{
       }} catch (error) {{
-        console.error(`Error importing language module for ${{{_LANGUAGE!s}}}:`, error);
+        console.error(`Error importing language module for ${{{language_var!s}}}:`, error);
       }}
       }}
     }})();
     }})();
   }}
   }}
@@ -547,8 +552,7 @@ class CodeBlock(Component, MarkdownComponentMap):
             The hooks for the component.
             The hooks for the component.
         """
         """
         return [
         return [
-            f"const {_LANGUAGE!s} = {self.language!s}",
-            self._get_language_registration_hook(),
+            self._get_language_registration_hook(language_var=self.language),
         ]
         ]