Merge pull request #26411 from storybookjs/kasper/perf-regressions

Maintenance: Fix performance regressions (cherry picked from commit cda0b32)
storybookjs · Mar 17, 2024 · 16804e9 · 16804e9
1 parent 21aa9b5
commit 16804e9
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 540 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -124,6 +124,7 @@ jobs:
           command: |
             yarn task --task compile --start-from=auto --no-link --debug
             git diff --exit-code
+            yarn dedupe --check
       - run:
           name: Publish to Verdaccio
           command: |

diff --git a/...@vitest-expect-npm-1.1.3-2062bf533f.patch → ...@vitest-expect-npm-1.3.1-973071a540.patch b/...@vitest-expect-npm-1.1.3-2062bf533f.patch → ...@vitest-expect-npm-1.3.1-973071a540.patch
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -50,8 +50,9 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
+    "@storybook/instrumenter": "workspace:*",
+    "@storybook/test": "workspace:*",
     "@storybook/types": "workspace:*",
-    "jest-mock": "^27.0.6",
     "polished": "^4.2.2",
     "ts-dedent": "^2.2.0"
   },
@@ -62,10 +63,8 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/icons": "^1.2.5",
-    "@storybook/instrumenter": "workspace:*",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
-    "@storybook/test": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@types/node": "^18.0.0",
     "formik": "^2.2.9",

diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts
@@ -3,6 +3,8 @@ import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
 import type { Options } from '@storybook/types';
 import { listStories } from './list-stories';
 
+// It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart
+// TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens
 const INCLUDE_CANDIDATES = [
   '@base2/pretty-print-object',
   '@emotion/core',
@@ -27,7 +29,6 @@ const INCLUDE_CANDIDATES = [
   'fast-deep-equal',
   'html-tags',
   'isobject',
-  'jest-mock',
   'loader-utils',
   'lodash/camelCase.js',
   'lodash/camelCase',

diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
@@ -49,7 +49,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "workspace:*",
-    "@vitest/utils": "^0.34.6",
+    "@vitest/utils": "^1.3.1",
     "util": "^0.12.4"
   },
   "devDependencies": {

diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
@@ -60,7 +60,6 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@jest/globals": "^29.3.1",
     "@types/lodash": "^4.14.167",
     "@types/qs": "^6",
     "@types/semver": "^7.3.4",

diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
@@ -60,7 +60,6 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@jest/globals": "^29.5.0",
     "@storybook/core-common": "workspace:*",
     "ansi-to-html": "^0.6.11",
     "slash": "^5.0.0"

diff --git a/code/lib/test/package.json b/code/lib/test/package.json
@@ -47,12 +47,12 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/instrumenter": "workspace:*",
     "@storybook/preview-api": "workspace:*",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/user-event": "^14.5.2",
-    "@vitest/expect": "1.1.3",
-    "@vitest/spy": "^1.1.3",
-    "chai": "^4.3.7",
+    "@vitest/expect": "1.3.1",
+    "@vitest/spy": "^1.3.1",
+    "chai": "^4.4.1",
     "util": "^0.12.4"
   },
   "devDependencies": {

diff --git a/code/package.json b/code/package.json
@@ -78,8 +78,9 @@
   "resolutions": {
     "@playwright/test": "1.36.0",
     "@storybook/theming": "workspace:*",
+    "@testing-library/jest-dom/aria-query": "5.1.3",
     "@types/node": "^18.0.0",
-    "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch",
+    "@vitest/expect": "patch:@vitest/expect@npm%3A1.3.1#~/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch",
     "esbuild": "^0.20.1",
     "playwright": "1.36.0",
     "playwright-core": "1.36.0",
@@ -170,7 +171,7 @@
     "@storybook/web-components-vite": "workspace:*",
     "@storybook/web-components-webpack5": "workspace:*",
     "@testing-library/dom": "^7.29.4",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/express": "^4.17.11",

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -15,7 +15,7 @@ import type {
 import { baseParse } from '@vue/compiler-core';
 import type { ConcreteComponent, FunctionalComponent, VNode } from 'vue';
 import { h, isVNode, watch } from 'vue';
-import { kebabCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
 import {
   attributeSource,
   htmlEventAttributeToVueEventAttribute,

diff --git a/code/ui/blocks/src/blocks/ArgTypes.tsx b/code/ui/blocks/src/blocks/ArgTypes.tsx
@@ -7,7 +7,6 @@ import { filterArgTypes } from '@storybook/preview-api';
 import type { ArgTypesExtractor } from '@storybook/docs-tools';
 import React from 'react';
 
-import { mapValues } from 'lodash';
 import type { SortType } from '../components';
 import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components';
 import { useOf } from './useOf';
@@ -83,10 +82,15 @@ export const ArgTypes: FC<ArgTypesProps> = (props) => {
   }
 
   const mainComponentName = getComponentName(component);
-  const subcomponentTabs = mapValues(subcomponents, (comp) => ({
-    rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude),
-    sort,
-  }));
+  const subcomponentTabs = Object.fromEntries(
+    Object.entries(subcomponents).map(([key, comp]) => [
+      key,
+      {
+        rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude),
+        sort,
+      },
+    ])
+  );
   const tabs = {
     [mainComponentName]: { rows: filteredArgTypes, sort },
     ...subcomponentTabs,

diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx
@@ -7,7 +7,6 @@ import { filterArgTypes } from '@storybook/preview-api';
 import type { PropDescriptor } from '@storybook/preview-api';
 import type { ArgTypesExtractor } from '@storybook/docs-tools';
 
-import { mapValues } from 'lodash';
 import type { SortType } from '../components';
 import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components';
 import { DocsContext } from './DocsContext';
@@ -75,10 +74,15 @@ export const Controls: FC<ControlsProps> = (props) => {
   }
 
   const mainComponentName = getComponentName(component);
-  const subcomponentTabs = mapValues(subcomponents, (comp) => ({
-    rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude),
-    sort,
-  }));
+  const subcomponentTabs = Object.fromEntries(
+    Object.entries(subcomponents).map(([key, comp]) => [
+      key,
+      {
+        rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude),
+        sort,
+      },
+    ])
+  );
   const tabs = {
     [mainComponentName]: { rows: filteredArgTypes, sort },
     ...subcomponentTabs,