Add stricter types to the language property of the SyntaxHighlighter

storybookjs · May 25, 2023 · 324279b · 324279b
1 parent 09db9f7
commit 324279b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
@@ -1,5 +1,6 @@
 import type { BuiltInParserName } from 'prettier';
 import type { ReactNode } from 'react';
+import type { supportedLanguages } from './syntaxhighlighter';
 
 export interface SyntaxHighlighterRendererProps {
   rows: any[];
@@ -30,7 +31,7 @@ export interface SyntaxHighlighterBaseProps {
   children?: React.ReactNode;
   codeTagProps?: React.HTMLProps<HTMLElement>;
   customStyle?: any;
-  language?: string;
+  language?: keyof typeof supportedLanguages;
   lineNumberStyle?: any;
   lineProps?: LineTagPropsFunction | React.HTMLProps<HTMLElement>;
   showLineNumbers?: boolean;

diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -33,17 +33,23 @@ import type {
 
 const { navigator, document, window: globalWindow } = global;
 
-ReactSyntaxHighlighter.registerLanguage('jsextra', jsExtras);
-ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
-ReactSyntaxHighlighter.registerLanguage('json', json);
-ReactSyntaxHighlighter.registerLanguage('yml', yml);
-ReactSyntaxHighlighter.registerLanguage('md', md);
-ReactSyntaxHighlighter.registerLanguage('bash', bash);
-ReactSyntaxHighlighter.registerLanguage('css', css);
-ReactSyntaxHighlighter.registerLanguage('html', html);
-ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
-ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
-ReactSyntaxHighlighter.registerLanguage('graphql', graphql);
+export const supportedLanguages = {
+  jsextra: jsExtras,
+  jsx,
+  json,
+  yml,
+  md,
+  bash,
+  css,
+  html,
+  tsx,
+  typescript,
+  graphql,
+};
+
+Object.entries(supportedLanguages).forEach(([key, val]) => {
+  ReactSyntaxHighlighter.registerLanguage(key, val);
+});
 
 const themedSyntax = memoize(2)((theme) =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})

diff --git a/code/ui/components/src/typography/elements/Code.tsx b/code/ui/components/src/typography/elements/Code.tsx
@@ -60,7 +60,7 @@ export const Code = ({
     <StyledSyntaxHighlighter
       bordered
       copyable
-      language={language?.[1] ?? 'plaintext'}
+      language={(language?.[1] as any) ?? 'plaintext'}
       format={false}
       {...props}
     >