Skip to content

Commit d7ddf8c

Browse files
yannbfyannbf
authored
Merge pull request #250 from storybookjs/bundle-tsup-swc
Bundle with tsup and replace babel-jest with swc
2 parents 131be40 + 6355af6 commit d7ddf8c

19 files changed

+406
-121
lines changed

‎.github/workflows/tests-extended.yml

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
name: Tests-extended
22

3-
on: [push]
3+
on: [push, pull_request]
44

55
jobs:
66
test:
77
runs-on: ubuntu-latest
8+
strategy:
9+
matrix:
10+
node-version: [16.x, 18.x]
811
steps:
912
- uses: actions/checkout@v2
1013

1114
- name: Use Node.js 16.x
1215
uses: actions/setup-node@v1
1316
with:
14-
node-version: 16.x
17+
node-version: ${{ matrix.node-version }}
1518

1619
- name: Install dependencies
1720
uses: bahmutov/npm-install@v1

‎.github/workflows/tests.yml

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
name: Tests
22

3-
on: [push]
3+
on: [push, pull_request]
44

55
jobs:
66
test:
77
runs-on: ubuntu-latest
8+
strategy:
9+
matrix:
10+
node-version: [16.x, 18.x]
811
steps:
912
- uses: actions/checkout@v2
1013

1114
- name: Use Node.js 16.x
1215
uses: actions/setup-node@v1
1316
with:
14-
node-version: 16.x
17+
node-version: ${{ matrix.node-version }}
1518

1619
- name: Install dependencies
1720
uses: bahmutov/npm-install@v1

‎.storybook/test-runner.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { toMatchImageSnapshot } from 'jest-image-snapshot';
2-
import { getStoryContext } from '../dist/cjs/playwright/hooks';
3-
import type { TestRunnerConfig } from '../dist/ts';
2+
import { getStoryContext } from '../dist/playwright/hooks';
3+
import type { TestRunnerConfig } from '../dist';
44

55
const snapshotsDir = process.env.SNAPSHOTS_DIR || '__snapshots__';
66
const customSnapshotsDir = `${process.cwd()}/${snapshotsDir}`;

‎package.json

+23-29
Original file line numberDiff line numberDiff line change
@@ -16,48 +16,43 @@
1616
},
1717
"author": "shilman",
1818
"license": "MIT",
19-
"main": "dist/cjs/index.js",
20-
"module": "dist/esm/index.js",
21-
"types": "dist/ts/index.d.ts",
19+
"main": "dist/index.js",
20+
"module": "dist/index.mjs",
21+
"types": "dist/index.d.ts",
2222
"bin": {
23-
"test-storybook": "./bin/test-storybook.js"
23+
"test-storybook": "./dist/test-storybook.js"
2424
},
2525
"files": [
26-
"bin",
27-
"dist/**/*",
26+
"dist",
2827
"README.md",
2928
"playwright",
30-
"*.js",
3129
"*.d.ts"
3230
],
3331
"scripts": {
34-
"clean": "rimraf ./dist",
35-
"buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
36-
"buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
37-
"buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
38-
"buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
39-
"prebuild": "yarn clean",
40-
"build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
41-
"build:watch": "concurrently \"yarn buildBabel:cjs -- --watch\" \"yarn buildTsc -- --watch\"",
32+
"build": "tsup",
33+
"build:watch": "tsup --watch",
4234
"test": "jest",
4335
"storybook": "storybook dev -p 6006",
4436
"start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
4537
"build-storybook": "storybook build",
4638
"release": "yarn build && auto shipit",
47-
"test-storybook": "node bin/test-storybook.js",
39+
"test-storybook": "node dist/test-storybook",
4840
"test-storybook:failures": "SKIP_SNAPSHOTS=true TEST_FAILURES=1 yarn test-storybook --json --outputFile test-results.json",
4941
"test-storybook:no-cache": "yarn test-storybook --no-cache",
5042
"test-storybook:json": "yarn test-storybook --stories-json",
51-
"test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook\"",
52-
"test-storybook:ci-failures": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"TEST_FAILURES=1 yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook:failures\"",
53-
"test-storybook:ci-coverage": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --coverage\"",
54-
"test-storybook:ci-json": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && SKIP_SNAPSHOTS=true yarn test-storybook:json\"",
43+
"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\"",
44+
"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\"",
45+
"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\"",
46+
"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\"",
5547
"generate-dynamic-stories": "node scripts/generate-dynamic-stories.js",
5648
"prepare": "husky install"
5749
},
5850
"devDependencies": {
5951
"@auto-it/released": "^10.37.1",
60-
"@babel/cli": "^7.20.7",
52+
"@babel/cli": "^7.12.1",
53+
"@babel/preset-env": "^7.19.4",
54+
"@babel/preset-react": "^7.18.6",
55+
"@babel/preset-typescript": "^7.18.6",
6156
"@jest/types": "^28.1.3",
6257
"@storybook/addon-coverage": "^0.0.7",
6358
"@storybook/addon-essentials": "^7.0.0",
@@ -82,8 +77,10 @@
8277
"react": "^17.0.1",
8378
"react-dom": "^17.0.1",
8479
"rimraf": "^3.0.2",
80+
"semver": "^7.3.7",
8581
"storybook": "^7.0.0",
8682
"ts-jest": "^28.0.8",
83+
"tsup": "^6.5.0",
8784
"typescript": "~4.9.4",
8885
"wait-on": "^6.0.0"
8986
},
@@ -102,16 +99,15 @@
10299
},
103100
"dependencies": {
104101
"@babel/core": "^7.20.7",
105-
"@babel/generator": "^7.20.7",
106-
"@babel/preset-env": "^7.20.2",
107-
"@babel/preset-react": "^7.18.6",
108-
"@babel/preset-typescript": "^7.18.6",
109-
"@babel/template": "^7.20.7",
110-
"@babel/types": "^7.20.7",
102+
"@babel/generator": "^7.18.13",
103+
"@babel/types": "^7.14.8",
104+
"@babel/template": "^7.14.5",
111105
"@storybook/core-common": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
112106
"@storybook/csf": "^0.1.0",
113107
"@storybook/csf-tools": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
114108
"@storybook/preview-api": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
109+
"@swc/core": "^1.3.18",
110+
"@swc/jest": "^0.2.23",
115111
"can-bind-to-host": "^1.1.1",
116112
"commander": "^9.0.0",
117113
"expect-playwright": "^0.8.0",
@@ -127,8 +123,6 @@
127123
"node-fetch": "^2",
128124
"playwright": "^1.14.0",
129125
"read-pkg-up": "^7.0.1",
130-
"regenerator-runtime": "^0.13.9",
131-
"semver": "^7.3.7",
132126
"tempy": "^1.0.1",
133127
"ts-dedent": "^2.0.0"
134128
},

‎playwright/custom-environment.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { setupPage } = require('../dist/cjs/setup-page');
1+
const { setupPage } = require('../dist/setup-page');
22

33
require('regenerator-runtime/runtime');
44
const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;

‎playwright/jest-setup.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { getTestRunnerConfig, setPreRender, setPostRender, setupPage } = require('../dist/cjs');
1+
const { getTestRunnerConfig, setPreRender, setPostRender, setupPage } = require('../dist');
22

33
const testRunnerConfig = getTestRunnerConfig(process.env.STORYBOOK_CONFIG_DIR);
44
if (testRunnerConfig) {

‎playwright/transform.js

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
1-
const { transform: babelTransform } = require('@babel/core');
2-
const { transformPlaywright } = require('../dist/cjs/playwright/transformPlaywright');
1+
const { transformSync: swcTransform } = require('@swc/core');
2+
const { transformPlaywright } = require('../dist/playwright/transformPlaywright');
33

44
module.exports = {
55
process(src, filename) {
66
const csfTest = transformPlaywright(src, filename);
77

8-
const result = babelTransform(csfTest, {
8+
const result = swcTransform(csfTest, {
99
filename,
10-
babelrc: false,
11-
configFile: false,
12-
presets: [
13-
['@babel/preset-env', { targets: { node: 'current' } }],
14-
'@babel/preset-typescript',
15-
'@babel/preset-react',
16-
],
10+
module: {
11+
type: 'commonjs',
12+
},
1713
});
1814

1915
return { code: result ? result.code : src };

‎src/config/jest-playwright.ts

+23-5
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ import path from 'path';
1515
const getJestPlaywrightConfig = () => {
1616
const presetBasePath = path.dirname(
1717
require.resolve('jest-playwright-preset', {
18-
paths: [path.join(__dirname, '../../node_modules')],
18+
paths: [path.join(__dirname, '../node_modules')],
1919
})
2020
);
2121
const expectPlaywrightPath = path.dirname(
2222
require.resolve('expect-playwright', {
23-
paths: [path.join(__dirname, '../../node_modules')],
23+
paths: [path.join(__dirname, '../node_modules')],
2424
})
2525
);
2626
return {
@@ -46,7 +46,25 @@ export const getJestConfig = () => {
4646
STORYBOOK_JUNIT,
4747
} = process.env;
4848

49-
const reporters = STORYBOOK_JUNIT ? ['default', 'jest-junit'] : ['default'];
49+
const jestJunitPath = path.dirname(
50+
require.resolve('jest-junit', {
51+
paths: [path.join(__dirname, '../node_modules')],
52+
})
53+
);
54+
55+
const jestSerializerHtmlPath = path.dirname(
56+
require.resolve('jest-serializer-html', {
57+
paths: [path.join(__dirname, '../node_modules')],
58+
})
59+
);
60+
61+
const swcJestPath = path.dirname(
62+
require.resolve('@swc/jest', {
63+
paths: [path.join(__dirname, '../node_modules')],
64+
})
65+
);
66+
67+
const reporters = STORYBOOK_JUNIT ? ['default', jestJunitPath] : ['default'];
5068

5169
let config = {
5270
rootDir: process.cwd(),
@@ -55,9 +73,9 @@ export const getJestConfig = () => {
5573
testMatch: STORYBOOK_STORIES_PATTERN && STORYBOOK_STORIES_PATTERN.split(';'),
5674
transform: {
5775
'^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
58-
'^.+\\.[jt]sx?$': 'babel-jest',
76+
'^.+\\.[jt]sx?$': swcJestPath,
5977
},
60-
snapshotSerializers: ['jest-serializer-html'],
78+
snapshotSerializers: [jestSerializerHtmlPath],
6179
testEnvironmentOptions: {
6280
'jest-playwright': {
6381
browsers: TEST_BROWSERS.split(',')

‎src/csf/transformCsf.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const transformCsf = (
126126
csf.meta.title,
127127
allTests,
128128
beforeEachPrefixer ? makeBeforeEach(beforeEachPrefixer) : undefined
129-
);
129+
) as babel.types.Node;
130130
const { code: describeCode } = generate(describe, {});
131131
result = dedent`
132132
${result}

‎src/playwright/hooks.ts

-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export const setPostRender = (postRender: TestHook) => {
4242
};
4343

4444
export const getStoryContext = async (page: Page, context: TestContext): Promise<StoryContext> => {
45-
// @ts-ignore
4645
return page.evaluate(({ storyId }) => globalThis.__getContext(storyId), {
4746
storyId: context.id,
4847
});

‎src/playwright/index.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { transform as babelTransform } from '@babel/core';
1+
import { transformSync as swcTransform } from '@swc/core';
22
import { transformPlaywright } from './transformPlaywright';
33

44
export const process = (src: string, filename: string, config: any) => {
55
const csfTest = transformPlaywright(src, filename);
66

7-
const result = babelTransform(csfTest, {
7+
const result = swcTransform(csfTest, {
88
filename,
9-
babelrc: false,
10-
configFile: false,
11-
presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
9+
module: {
10+
type: 'commonjs',
11+
},
1212
});
1313
return result ? result.code : src;
1414
};

‎src/playwright/transformPlaywrightJson.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export const transformPlaywrightJson = (index: Record<string, any>) => {
8585
const stories = entries.filter((s) => s.type !== 'docs');
8686
if (stories.length) {
8787
const storyTests = stories.map((story) => makeDescribe(story.name, [makeTest(story)]));
88-
const program = t.program([makeDescribe(stories[0].title, storyTests)]);
88+
const program = t.program([makeDescribe(stories[0].title, storyTests)]) as babel.types.Node;
8989

9090
const { code } = generate(program, {});
9191

0 commit comments

Comments
 (0)