Merge pull request #431 from storybookjs/yann/prebundle-deps

Prebundle dependencies

Author: yannbf

.storybook/test-runner.ts

@@ -1,5 +1,5 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import { getStoryContext, waitForPageReady } from '../dist/playwright/hooks';
+import { getStoryContext, waitForPageReady } from '../dist';
 import type { TestRunnerConfig } from '../dist';
 
 const snapshotsDir = process.env.SNAPSHOTS_DIR || '__snapshots__';

package.json

@@ -14,8 +14,8 @@
     "type": "git",
     "url": "https://github.com/storybookjs/test-runner"
   },
-  "author": "shilman",
   "license": "MIT",
+  "author": "shilman",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -30,22 +30,48 @@
   ],
   "scripts": {
     "build": "tsup",
-    "build:watch": "tsup --watch",
-    "test": "jest",
-    "storybook": "storybook dev -p 6006",
-    "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --quiet\"",
     "build-storybook": "storybook build",
+    "build:watch": "tsup --watch",
+    "generate-dynamic-stories": "node scripts/generate-dynamic-stories.js",
+    "prepare": "husky install",
     "release": "yarn build && auto shipit",
+    "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --quiet\"",
+    "storybook": "storybook dev -p 6006",
+    "test": "jest",
     "test-storybook": "node dist/test-storybook",
-    "test-storybook:failures": "SKIP_SNAPSHOTS=true TEST_FAILURES=1 yarn test-storybook --json --failOnConsole --outputFile test-results.json",
-    "test-storybook:no-cache": "yarn test-storybook --no-cache",
-    "test-storybook:json": "yarn test-storybook --stories-json",
     "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook\"",
-    "test-storybook:ci-failures": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"TEST_FAILURES=1 yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook:failures\"",
     "test-storybook:ci-coverage": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook --coverage\"",
+    "test-storybook:ci-failures": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"TEST_FAILURES=1 yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook:failures\"",
     "test-storybook:ci-json": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && SKIP_SNAPSHOTS=true yarn test-storybook:json\"",
-    "generate-dynamic-stories": "node scripts/generate-dynamic-stories.js",
-    "prepare": "husky install"
+    "test-storybook:failures": "SKIP_SNAPSHOTS=true TEST_FAILURES=1 yarn test-storybook --json --failOnConsole --outputFile test-results.json",
+    "test-storybook:json": "yarn test-storybook --stories-json",
+    "test-storybook:no-cache": "yarn test-storybook --no-cache"
+  },
+  "lint-staged": {
+    "*.{ts,js,tsx,jsx,css,md}": "prettier --write"
+  },
+  "dependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/generator": "^7.22.5",
+    "@babel/template": "^7.22.5",
+    "@babel/types": "^7.22.5",
+    "@jest/types": "^29.6.3",
+    "@storybook/core-common": "next",
+    "@storybook/csf": "^0.1.2",
+    "@storybook/csf-tools": "next",
+    "@storybook/preview-api": "next",
+    "@swc/core": "^1.3.18",
+    "@swc/jest": "^0.2.23",
+    "expect-playwright": "^0.8.0",
+    "jest": "^29.6.4",
+    "jest-circus": "^29.6.4",
+    "jest-environment-node": "^29.6.4",
+    "jest-junit": "^16.0.0",
+    "jest-playwright-preset": "^4.0.0",
+    "jest-runner": "^29.6.4",
+    "jest-serializer-html": "^7.1.0",
+    "jest-watch-typeahead": "^2.0.0",
+    "playwright": "^1.14.0"
   },
   "devDependencies": {
     "@auto-it/released": "^11.0.1",
@@ -66,62 +92,37 @@
     "babel-jest": "^29.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
+    "can-bind-to-host": "^1.1.1",
+    "commander": "^9.0.0",
     "concurrently": "^7.0.0",
     "detect-package-manager": "^3.0.1",
+    "glob": "^10.2.2",
     "husky": "^8.0.0",
     "jest-image-snapshot": "^6.2.0",
     "lint-staged": "^13.0.3",
+    "node-fetch": "^2",
+    "pkg-up": "^5.0.0",
     "prettier": "^2.8.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "read-pkg-up": "^7.0.1",
     "rimraf": "^3.0.2",
     "semver": "^7.5.4",
     "storybook": "next",
+    "tempy": "^1.0.1",
+    "ts-dedent": "^2.0.0",
     "ts-jest": "^29.0.0",
     "tsup": "^6.5.0",
     "typescript": "~4.9.4",
     "vite": "^4.4.5",
     "wait-on": "^7.2.0"
   },
-  "lint-staged": {
-    "*.{ts,js,tsx,jsx,css,md}": "prettier --write"
+  "engines": {
+    "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/generator": "^7.22.5",
-    "@babel/template": "^7.22.5",
-    "@babel/types": "^7.22.5",
-    "@jest/types": "^29.6.3",
-    "@storybook/core-common": "next",
-    "@storybook/csf": "^0.1.2",
-    "@storybook/csf-tools": "next",
-    "@storybook/preview-api": "next",
-    "@swc/core": "^1.3.18",
-    "@swc/jest": "^0.2.23",
-    "can-bind-to-host": "^1.1.1",
-    "commander": "^9.0.0",
-    "expect-playwright": "^0.8.0",
-    "glob": "^10.2.2",
-    "jest": "^29.6.4",
-    "jest-circus": "^29.6.4",
-    "jest-environment-node": "^29.6.4",
-    "jest-junit": "^16.0.0",
-    "jest-playwright-preset": "^4.0.0",
-    "jest-runner": "^29.6.4",
-    "jest-serializer-html": "^7.1.0",
-    "jest-watch-typeahead": "^2.0.0",
-    "node-fetch": "^2",
-    "playwright": "^1.14.0",
-    "read-pkg-up": "^7.0.1",
-    "tempy": "^1.0.1",
-    "ts-dedent": "^2.0.0"
-  },
-  "engines": {
-    "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
-  },
   "auto": {
     "prereleaseBranches": [
       "next",

playwright/custom-environment.js

@@ -1,4 +1,4 @@
-const { setupPage } = require('../dist/setup-page');
+const { setupPage } = require('../dist');
 
 const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
 

playwright/test-runner-jest.config.js

@@ -1,4 +1,4 @@
-const { getJestConfig } = require('@storybook/test-runner');
+const { getJestConfig } = require('../dist');
 
 // The default Jest configuration comes from @storybook/test-runner
 const testRunnerConfig = getJestConfig();

playwright/transform.js

@@ -1,5 +1,5 @@
 const { transformSync: swcTransform } = require('@swc/core');
-const { transformPlaywright } = require('../dist/playwright/transformPlaywright');
+const { transformPlaywright } = require('../dist');
 
 module.exports = {
   process(src, filename) {

src/config/jest-playwright.ts

@@ -2,7 +2,7 @@ import path from 'path';
 import { getProjectRoot } from '@storybook/core-common';
 import type { Config } from '@jest/types';
 
-const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/test-runner';
+const getTestRunnerPath = () => process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/test-runner';
 
 /**
  * IMPORTANT NOTE:
@@ -17,6 +17,7 @@ const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/t
  * necessary moving parts are all required within the correct path.
  * */
 const getJestPlaywrightConfig = (): Config.InitialOptions => {
+  const TEST_RUNNER_PATH = getTestRunnerPath();
   const presetBasePath = path.dirname(
     require.resolve('jest-playwright-preset', {
       paths: [path.join(__dirname, '../node_modules')],
@@ -71,6 +72,7 @@ export const getJestConfig = (): Config.InitialOptions => {
   const reporters = STORYBOOK_JUNIT ? ['default', jestJunitPath] : ['default'];
 
   const testMatch = STORYBOOK_STORIES_PATTERN?.split(';') ?? [];
+  const TEST_RUNNER_PATH = getTestRunnerPath();
 
   const config: Config.InitialOptions = {
     rootDir: getProjectRoot(),

src/index.ts

@@ -2,3 +2,4 @@ export * from './playwright/hooks';
 export * from './config/jest-playwright';
 export * from './setup-page';
 export * from './util/getTestRunnerConfig';
+export * from './playwright/transformPlaywright';

src/setup-page.ts

@@ -1,5 +1,6 @@
 import type { Page, BrowserContext } from 'playwright';
 import readPackageUp, { NormalizedReadResult } from 'read-pkg-up';
+import { pkgUp } from 'pkg-up';
 import { PrepareContext } from './playwright/hooks';
 import { getTestRunnerConfig } from './util/getTestRunnerConfig';
 import { readFile } from 'node:fs/promises';
@@ -61,7 +62,13 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
   await page.exposeBinding('logToPage', (_, message) => console.log(message));
 
   const finalStorybookUrl = referenceURL ?? targetURL ?? '';
-  const scriptLocation = require.resolve(path.join(__dirname, 'setup-page-script.mjs'));
+  const testRunnerPackageLocation = await pkgUp({ cwd: __dirname });
+  if (!testRunnerPackageLocation) throw new Error('Could not find test-runner package location');
+  const scriptLocation = path.join(
+    path.dirname(testRunnerPackageLocation),
+    'dist',
+    'setup-page-script.mjs'
+  );
 
   // read the content of setup-page-script.mjs and replace the placeholders with the actual values
   const content = (await readFile(scriptLocation, 'utf-8'))

tsup.config.ts

@@ -3,19 +3,25 @@ import { defineConfig } from 'tsup';
 export default defineConfig([
   {
     clean: true,
-    entry: [
-      './src/**/*.{js,jsx,ts,tsx}',
-      '!./src/**/*.d.{js,jsx,ts,tsx}',
-      '!./src/**/*test.{js,jsx,ts,tsx}',
-    ],
+    entry: ['./src/index.ts', './src/test-storybook.ts'],
     format: ['cjs', 'esm'],
     splitting: false,
     dts: true,
     minify: false,
     treeshake: false,
-    bundle: false,
-    esbuildOptions(options, context) {
+    bundle: true,
+    platform: 'node',
+    external: ['@storybook/test-runner'],
+    esbuildOptions(options) {
       options.platform = 'node';
     },
   },
+  {
+    entry: ['./src/setup-page-script.ts'],
+    format: ['esm'],
+    dts: false,
+    bundle: false,
+    treeshake: false,
+    platform: 'browser',
+  },
 ]);

yarn.lock

@@ -3666,6 +3666,7 @@ __metadata:
     jest-watch-typeahead: ^2.0.0
     lint-staged: ^13.0.3
     node-fetch: ^2
+    pkg-up: ^5.0.0
     playwright: ^1.14.0
     prettier: ^2.8.1
     react: ^17.0.1
@@ -7133,6 +7134,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-up@npm:^6.2.0":
+  version: 6.3.0
+  resolution: "find-up@npm:6.3.0"
+  dependencies:
+    locate-path: ^7.1.0
+    path-exists: ^5.0.0
+  checksum: 9a21b7f9244a420e54c6df95b4f6fc3941efd3c3e5476f8274eb452f6a85706e7a6a90de71353ee4f091fcb4593271a6f92810a324ec542650398f928783c280
+  languageName: node
+  linkType: hard
+
 "flow-parser@npm:0.*":
   version: 0.221.0
   resolution: "flow-parser@npm:0.221.0"
@@ -9340,6 +9351,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"locate-path@npm:^7.1.0":
+  version: 7.2.0
+  resolution: "locate-path@npm:7.2.0"
+  dependencies:
+    p-locate: ^6.0.0
+  checksum: c1b653bdf29beaecb3d307dfb7c44d98a2a98a02ebe353c9ad055d1ac45d6ed4e1142563d222df9b9efebc2bcb7d4c792b507fad9e7150a04c29530b7db570f8
+  languageName: node
+  linkType: hard
+
 "lodash.camelcase@npm:^4.3.0":
   version: 4.3.0
   resolution: "lodash.camelcase@npm:4.3.0"
@@ -10223,6 +10243,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-limit@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "p-limit@npm:4.0.0"
+  dependencies:
+    yocto-queue: ^1.0.0
+  checksum: 01d9d70695187788f984226e16c903475ec6a947ee7b21948d6f597bed788e3112cc7ec2e171c1d37125057a5f45f3da21d8653e04a3a793589e12e9e80e756b
+  languageName: node
+  linkType: hard
+
 "p-locate@npm:^2.0.0":
   version: 2.0.0
   resolution: "p-locate@npm:2.0.0"
@@ -10259,6 +10288,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-locate@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "p-locate@npm:6.0.0"
+  dependencies:
+    p-limit: ^4.0.0
+  checksum: 2bfe5234efa5e7a4e74b30a5479a193fdd9236f8f6b4d2f3f69e3d286d9a7d7ab0c118a2a50142efcf4e41625def635bd9332d6cbf9cc65d85eb0718c579ab38
+  languageName: node
+  linkType: hard
+
 "p-map@npm:^3.0.0":
   version: 3.0.0
   resolution: "p-map@npm:3.0.0"
@@ -10394,6 +10432,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-exists@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "path-exists@npm:5.0.0"
+  checksum: 8ca842868cab09423994596eb2c5ec2a971c17d1a3cb36dbf060592c730c725cd524b9067d7d2a1e031fef9ba7bd2ac6dc5ec9fb92aa693265f7be3987045254
+  languageName: node
+  linkType: hard
+
 "path-is-absolute@npm:^1.0.0":
   version: 1.0.1
   resolution: "path-is-absolute@npm:1.0.1"
@@ -10572,6 +10617,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pkg-up@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "pkg-up@npm:5.0.0"
+  dependencies:
+    find-up: ^6.2.0
+  checksum: dccefcfb96f5d7b976a27038e7c065384d3068b418bcb0626b65cf77e96d9e9afab622cf207b11d79ba37501b6f933b8612edb9f904a5f8daf120f3095f249ac
+  languageName: node
+  linkType: hard
+
 "playwright-core@npm:1.39.0, playwright-core@npm:>=1.2.0":
   version: 1.39.0
   resolution: "playwright-core@npm:1.39.0"
@@ -13369,3 +13423,10 @@ __metadata:
   checksum: f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
   languageName: node
   linkType: hard
+
+"yocto-queue@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "yocto-queue@npm:1.0.0"
+  checksum: 2cac84540f65c64ccc1683c267edce396b26b1e931aa429660aefac8fbe0188167b7aee815a3c22fa59a28a58d898d1a2b1825048f834d8d629f4c2a5d443801
+  languageName: node
+  linkType: hard