Merge pull request #24248 from DylanPiercey/avoid-document-reference

Node: Safe use of `document` for preview
storybookjs · Mar 26, 2024 · 11534e4 · 11534e4
2 parents 2b1058d + 779117c
commit 11534e4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 32 deletions.
diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts
@@ -22,7 +22,7 @@ const getQueryString = ({
   selection?: Selection;
   extraParams?: qs.ParsedQs;
 }) => {
-  const { search = '' } = document.location;
+  const search = typeof document !== 'undefined' ? document.location.search : '';
   const { path, selectedKind, selectedStory, ...rest } = qs.parse(search, {
     ignoreQueryPrefix: true,
   });
@@ -65,20 +65,22 @@ const getFirstString = (v: ValueOf<qs.ParsedQs>): string | void => {
 };
 
 export const getSelectionSpecifierFromPath: () => SelectionSpecifier | null = () => {
-  const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
-  const args = typeof query.args === 'string' ? parseArgsParam(query.args) : undefined;
-  const globals = typeof query.globals === 'string' ? parseArgsParam(query.globals) : undefined;
-
-  let viewMode = getFirstString(query.viewMode) as ViewMode;
-  if (typeof viewMode !== 'string' || !viewMode.match(/docs|story/)) {
-    viewMode = 'story';
-  }
-
-  const path = getFirstString(query.path);
-  const storyId = path ? pathToId(path) : getFirstString(query.id);
-
-  if (storyId) {
-    return { storySpecifier: storyId, args, globals, viewMode };
+  if (typeof document !== 'undefined') {
+    const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
+    const args = typeof query.args === 'string' ? parseArgsParam(query.args) : undefined;
+    const globals = typeof query.globals === 'string' ? parseArgsParam(query.globals) : undefined;
+
+    let viewMode = getFirstString(query.viewMode) as ViewMode;
+    if (typeof viewMode !== 'string' || !viewMode.match(/docs|story/)) {
+      viewMode = 'story';
+    }
+
+    const path = getFirstString(query.path);
+    const storyId = path ? pathToId(path) : getFirstString(query.id);
+
+    if (storyId) {
+      return { storySpecifier: storyId, args, globals, viewMode };
+    }
   }
 
   return null;

diff --git a/code/lib/preview-api/src/modules/preview-web/WebView.ts b/code/lib/preview-api/src/modules/preview-web/WebView.ts
@@ -46,22 +46,24 @@ export class WebView implements View<HTMLElement> {
 
   constructor() {
     // Special code for testing situations
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { __SPECIAL_TEST_PARAMETER__ } = qs.parse(document.location.search, {
-      ignoreQueryPrefix: true,
-    });
-    switch (__SPECIAL_TEST_PARAMETER__) {
-      case 'preparing-story': {
-        this.showPreparingStory();
-        this.testing = true;
-        break;
-      }
-      case 'preparing-docs': {
-        this.showPreparingDocs();
-        this.testing = true;
-        break;
+    if (typeof document !== 'undefined') {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      const { __SPECIAL_TEST_PARAMETER__ } = qs.parse(document.location.search, {
+        ignoreQueryPrefix: true,
+      });
+      switch (__SPECIAL_TEST_PARAMETER__) {
+        case 'preparing-story': {
+          this.showPreparingStory();
+          this.testing = true;
+          break;
+        }
+        case 'preparing-docs': {
+          this.showPreparingDocs();
+          this.testing = true;
+          break;
+        }
+        default: // pass;
       }
-      default: // pass;
     }
   }
 
@@ -114,8 +116,10 @@ export class WebView implements View<HTMLElement> {
   checkIfLayoutExists(layout: keyof typeof layoutClassMap) {
     if (!layoutClassMap[layout]) {
       logger.warn(
-        dedent`The desired layout: ${layout} is not a valid option.
-         The possible options are: ${Object.keys(layoutClassMap).join(', ')}, none.`
+        dedent`
+          The desired layout: ${layout} is not a valid option.
+          The possible options are: ${Object.keys(layoutClassMap).join(', ')}, none.
+        `
       );
     }
   }