chore: remove qs dependency from manager-api & channels

This removes the `qs` dependency from the `manager-api` and `channels` packages, instead using `URLSearchParams` (native functionality).
storybookjs · Mar 2, 2024 · 2430a8f · 2430a8f
1 parent 68f1b28
commit 2430a8f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 11 deletions.
diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json
@@ -47,7 +47,6 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "qs": "^6.10.0",
     "telejson": "^7.2.0",
     "tiny-invariant": "^1.3.1"
   },

diff --git a/code/lib/channels/src/postmessage/index.ts b/code/lib/channels/src/postmessage/index.ts
@@ -102,13 +102,13 @@ export class PostMessageTransport implements ChannelTransport {
 
     const frames = this.getFrames(target);
 
-    const query = qs.parse(location?.search || '', { ignoreQueryPrefix: true });
+    const refId = location?.searchParams.get('refId');
 
     const data = stringify(
       {
         key: KEY,
         event,
-        refId: query.refId,
+        refId,
       },
       stringifyOptions
     );

diff --git a/code/lib/manager-api/src/tests/url.test.js b/code/lib/manager-api/src/tests/url.test.js
@@ -1,5 +1,4 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import qs from 'qs';
 
 import { SET_CURRENT_STORY, GLOBALS_UPDATED, UPDATE_QUERY_PARAMS } from '@storybook/core-events';
 
@@ -15,7 +14,7 @@ describe('initial state', () => {
   describe('config query parameters', () => {
     it('handles full parameter', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ full: '1' }) };
+      const location = { search: new URLSearchParams(({ full: '1' })).toString() };
 
       const {
         state: { layout },
@@ -30,7 +29,7 @@ describe('initial state', () => {
 
     it('handles nav parameter', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ nav: '0' }) };
+      const location = { search: new URLSearchParams(({ nav: '0' })).toString() };
 
       const {
         state: { layout },
@@ -41,7 +40,7 @@ describe('initial state', () => {
 
     it('handles shortcuts parameter', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ shortcuts: '0' }) };
+      const location = { search: new URLSearchParams(({ shortcuts: '0' })).toString() };
 
       const {
         state: { ui },
@@ -52,7 +51,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, bottom', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ panel: 'bottom' }) };
+      const location = { search: new URLSearchParams(({ panel: 'bottom' })).toString() };
 
       const {
         state: { layout },
@@ -63,7 +62,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, right', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ panel: 'right' }) };
+      const location = { search: new URLSearchParams(({ panel: 'right' })).toString() };
 
       const {
         state: { layout },
@@ -74,7 +73,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, 0', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ panel: '0' }) };
+      const location = { search: new URLSearchParams(({ panel: '0' })).toString() };
 
       const {
         state: { layout },

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -5581,7 +5581,6 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    qs: "npm:^6.10.0"
     telejson: "npm:^7.2.0"
     tiny-invariant: "npm:^1.3.1"
     typescript: "npm:^5.3.2"