laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ENG-4255] Code blocks lead to redefined const in web page

Browse Source 
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.
This commit is contained in:
Masen Furer 2025-01-07 10:52:10 -08:00
parent 08d9fbf9bc
commit 7c4d57c8a9
No known key found for this signature in database
GPG Key ID: B0008AD22B3B3A95
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
reflex/components/datadisplay/code.py
View File

@ -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( out.add_props(style=theme).remove_props("theme", "code").add_props(
children=self.code, language=_LANGUAGE 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}}}`); const module = await import(`react-syntax-highlighter/dist/cjs/languages/prism/${{{language_var!s}}}`);
SyntaxHighlighter.registerLanguage({_LANGUAGE!s}, module.default); 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(language_var=self.language),
self._get_language_registration_hook(),
] ]