fix shikierror #185
fix shikierror #185
Conversation
WalkthroughThe changes involve modifications to the Changes
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| const highlighter = await getSingletonHighlighter(); | ||
| await highlighter.loadTheme("github-light"); | ||
| await highlighter.loadLanguage("http"); | ||
| await highlighter.loadLanguage("json"); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider moving highlighter initialization into a lazy-loaded singleton pattern.
The current module-level initialization of the highlighter could block module loading. Consider refactoring to a lazy-loaded singleton pattern with proper error handling.
Here's a suggested implementation:
-const highlighter = await getSingletonHighlighter();
-await highlighter.loadTheme("github-light");
-await highlighter.loadLanguage("http");
-await highlighter.loadLanguage("json");
+let highlighterInstance: Awaited<ReturnType<typeof getSingletonHighlighter>> | null = null;
+
+async function getHighlighter() {
+ if (highlighterInstance) return highlighterInstance;
+ try {
+ highlighterInstance = await getSingletonHighlighter();
+ await highlighterInstance.loadTheme("github-light");
+ await Promise.all([
+ highlighterInstance.loadLanguage("http"),
+ highlighterInstance.loadLanguage("json")
+ ]);
+ return highlighterInstance;
+ } catch (error) {
+ console.error("Failed to initialize syntax highlighter:", error);
+ throw error;
+ }
+}Then update the CodeBlock component to handle loading and error states:
const CodeBlock: FC<CodeBlockProps> = ({ language, code }: CodeBlockProps) => {
+ const [html, setHtml] = useState<string | null>(null);
+ const [error, setError] = useState<Error | null>(null);
+
+ useEffect(() => {
+ async function highlight() {
+ try {
+ const highlighter = await getHighlighter();
+ const result = highlighter.codeToHtml(code, {
+ lang: language,
+ theme: "github-light",
+ });
+ setHtml(result);
+ } catch (e) {
+ setError(e instanceof Error ? e : new Error(String(e)));
+ }
+ }
+ highlight();
+ }, [code, language]);
+
+ if (error) {
+ return <div class="alert alert-danger m-3">Failed to highlight code: {error.message}</div>;
+ }
+ if (!html) {
+ return <div class="placeholder-glow m-3"><span class="placeholder col-12"></span></div>;
+ }
- const result = highlighter.codeToHtml(code, {
- lang: language,
- theme: "github-light",
- });
- return <div dangerouslySetInnerHTML={{ __html: result }} class="m-3" />;
+ return <div dangerouslySetInnerHTML={{ __html: html }} class="m-3" />;
};Benefits:
- Lazy loading prevents blocking module initialization
- Parallel loading of languages improves performance
- Proper error handling and loading states
- Better user experience with loading indicators
Committable suggestion skipped: line range outside the PR's diff.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #185 +/- ##
=======================================
Coverage 84.46% 84.46%
=======================================
Files 42 42
Lines 11618 11618
Branches 1157 1157
=======================================
Hits 9813 9813
Misses 1784 1784
Partials 21 21 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
[ci skip]
Closes #178
Summary by CodeRabbit