From 7c4d57c8a9a304bba62f4c79fa184d51fbeafbee Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Tue, 7 Jan 2025 10:52:10 -0800
Subject: [PATCH] [ENG-4255] Code blocks lead to redefined const in web page

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.
---
 reflex/components/datadisplay/code.py | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
index 2d5dfc625..8a433c18c 100644
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@@ -502,8 +502,8 @@ class CodeBlock(Component, MarkdownComponentMap):
 
         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
@@ -512,20 +512,25 @@ class CodeBlock(Component, MarkdownComponentMap):
         return ["can_copy", "copy_button"]
 
     @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.
 
+        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:
             The hook to register the language.
         """
         return f"""
- if ({_LANGUAGE!s}) {{
+ if ({language_var!s}) {{
     (async () => {{
       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) {{
-        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.
         """
         return [
-            f"const {_LANGUAGE!s} = {self.language!s}",
-            self._get_language_registration_hook(),
+            self._get_language_registration_hook(language_var=self.language),
         ]