convert @storybook/addon-storysource to strict ts

storybookjs · May 4, 2023 · 7f6f858 · 7f6f858
1 parent 7e57324
commit 7f6f858
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
@@ -62,7 +62,8 @@
     "@storybook/theming": "7.1.0-alpha.12",
     "estraverse": "^5.2.0",
     "prop-types": "^15.7.2",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
     "@types/react": "^16.14.34",

diff --git a/code/addons/storysource/src/StoryPanel.tsx b/code/addons/storysource/src/StoryPanel.tsx
@@ -7,6 +7,7 @@ import {
   type SyntaxHighlighterProps,
   type SyntaxHighlighterRendererProps,
 } from '@storybook/components';
+import invariant from 'tiny-invariant';
 
 // @ts-expect-error Typedefs don't currently expose `createElement` even though it exists
 import { createElement as createSyntaxHighlighterElement } from 'react-syntax-highlighter';
@@ -58,21 +59,25 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
   // prefer to use the source from source-loader, but fallback to
   // source provided by csf-plugin for vite usage
   const source = loaderSource || docsSource || 'loading source...';
-  const currentLocation = locationsMap
-    ? locationsMap[
-        Object.keys(locationsMap).find((key: string) => {
-          const sourceLoaderId = key.split('--');
-          return story.id.endsWith(sourceLoaderId[sourceLoaderId.length - 1]);
-        })
-      ]
+  const currentLocationIndex = locationsMap
+    ? Object.keys(locationsMap).find((key: string) => {
+        const sourceLoaderId = key.split('--');
+        return story.id.endsWith(sourceLoaderId[sourceLoaderId.length - 1]);
+      })
     : undefined;
+  const currentLocation =
+    locationsMap && currentLocationIndex ? locationsMap[currentLocationIndex] : undefined;
   React.useEffect(() => {
     if (selectedStoryRef.current) {
       selectedStoryRef.current.scrollIntoView();
     }
   }, [selectedStoryRef.current]);
 
-  const createPart = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) =>
+  const createPart = ({
+    rows,
+    stylesheet,
+    useInlineStyles,
+  }: SyntaxHighlighterRendererProps): React.ReactNode[] =>
     rows.map((node, i) =>
       createSyntaxHighlighterElement({
         node,
@@ -112,9 +117,11 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
   };
 
   const createParts = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) => {
-    const parts = [];
+    const parts: React.ReactNode[] = [];
     let lastRow = 0;
 
+    invariant(locationsMap, 'locationsMap should be defined while creating parts');
+
     Object.keys(locationsMap).forEach((key) => {
       const location = locationsMap[key];
       const first = location.startLoc.line - 1;
@@ -126,15 +133,15 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
       const start = createPart({ rows: rows.slice(lastRow, first), stylesheet, useInlineStyles });
       const storyPart = createStoryPart({ rows, stylesheet, useInlineStyles, location, id, refId });
 
-      parts.push(start);
+      parts.push(...start);
       parts.push(storyPart);
 
       lastRow = last;
     });
 
     const lastPart = createPart({ rows: rows.slice(lastRow), stylesheet, useInlineStyles });
 
-    parts.push(lastPart);
+    parts.push(...lastPart);
 
     return parts;
   };

diff --git a/code/addons/storysource/tsconfig.json b/code/addons/storysource/tsconfig.json
@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "skipLibCheck": true,
-    "strict": false
+    "strict": true
   },
   "include": ["src/**/*"]
 }