Bundle with tsup and replace babel-jest

Author: bryanjtc

.storybook/test-runner.ts

@@ -1,6 +1,6 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import { getStoryContext } from '../dist/cjs/playwright/hooks';
-import type { TestRunnerConfig } from '../dist/ts';
+import { getStoryContext } from '../dist/playwright/hooks';
+import type { TestRunnerConfig } from '../dist';
 
 const snapshotsDir = process.env.SNAPSHOTS_DIR || '__snapshots__';
 const customSnapshotsDir = `${process.cwd()}/${snapshotsDir}`;

package.json

@@ -16,11 +16,11 @@
   },
   "author": "shilman",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/ts/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "bin": {
-    "test-storybook": "./bin/test-storybook.js"
+    "test-storybook": "./dist/test-storybook.js"
   },
   "files": [
     "bin",
@@ -44,7 +44,7 @@
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
     "build-storybook": "storybook build",
     "release": "yarn build && auto shipit",
-    "test-storybook": "node bin/test-storybook.js",
+    "test-storybook": "node dist/test-storybook.js",
     "test-storybook:failures": "SKIP_SNAPSHOTS=true TEST_FAILURES=1 yarn test-storybook --json --outputFile test-results.json",
     "test-storybook:no-cache": "yarn test-storybook --no-cache",
     "test-storybook:json": "yarn test-storybook --stories-json",
@@ -57,21 +57,31 @@
   },
   "devDependencies": {
     "@auto-it/released": "^10.37.1",
-    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.7",
+    "@babel/cli": "^7.12.1",
+    "@babel/generator": "^7.18.13",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/types": "^7.14.8",
+    "@babel/template": "^7.14.5",
     "@jest/types": "^28.1.3",
     "@storybook/addon-coverage": "^0.0.7",
     "@storybook/addon-essentials": "next",
     "@storybook/addon-interactions": "next",
     "@storybook/jest": "next",
     "@storybook/react": "next",
     "@storybook/react-webpack5": "next",
+    "@storybook/store": "next",
     "@storybook/testing-library": "next",
     "@types/jest": "^27.0.3",
     "@types/node": "^16.4.1",
     "auto": "^10.3.0",
     "babel-jest": "^28.1.3",
     "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",
     "husky": "^8.0.0",
     "jest-image-snapshot": "^5.1.0",
@@ -80,9 +90,14 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "read-pkg-up": "^7.0.1",
     "rimraf": "^3.0.2",
+    "semver": "^7.3.7",
     "storybook": "next",
+    "tempy": "^1.0.1",
+    "ts-dedent": "^2.0.0",
     "ts-jest": "^28.0.8",
+    "tsup": "^6.5.0",
     "typescript": "~4.9.4",
     "wait-on": "^6.0.0"
   },
@@ -100,19 +115,11 @@
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   },
   "dependencies": {
-    "@babel/core": "^7.20.7",
-    "@babel/generator": "^7.20.7",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/template": "^7.20.7",
-    "@babel/types": "^7.20.7",
     "@storybook/core-common": "next",
     "@storybook/csf": "next",
     "@storybook/csf-tools": "next",
-    "@storybook/preview-api": "next",
-    "can-bind-to-host": "^1.1.1",
-    "commander": "^9.0.0",
+    "@swc/core": "^1.3.18",
+    "@swc/jest": "^0.2.23",
     "expect-playwright": "^0.8.0",
     "glob": "^8.1.0",
     "jest": "^28.0.0",
@@ -125,11 +132,7 @@
     "jest-watch-typeahead": "^2.0.0",
     "node-fetch": "^2",
     "playwright": "^1.14.0",
-    "read-pkg-up": "^7.0.1",
-    "regenerator-runtime": "^0.13.9",
-    "semver": "^7.3.7",
-    "tempy": "^1.0.1",
-    "ts-dedent": "^2.0.0"
+    "regenerator-runtime": "^0.13.9"
   },
   "auto": {
     "prereleaseBranches": [

playwright/custom-environment.js

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

playwright/jest-setup.js

@@ -1,4 +1,4 @@
-const { getTestRunnerConfig, setPreRender, setPostRender, setupPage } = require('../dist/cjs');
+const { getTestRunnerConfig, setPreRender, setPostRender, setupPage } = require('../dist');
 
 const testRunnerConfig = getTestRunnerConfig(process.env.STORYBOOK_CONFIG_DIR);
 if (testRunnerConfig) {

playwright/transform.js

@@ -1,19 +1,15 @@
-const { transform: babelTransform } = require('@babel/core');
-const { transformPlaywright } = require('../dist/cjs/playwright/transformPlaywright');
+const { transformSync: swcTransform } = require('@swc/core');
+const { transformPlaywright } = require('../dist/playwright/transformPlaywright');
 
 module.exports = {
   process(src, filename) {
     const csfTest = transformPlaywright(src, filename);
 
-    const result = babelTransform(csfTest, {
+    const result = swcTransform(csfTest, {
       filename,
-      babelrc: false,
-      configFile: false,
-      presets: [
-        ['@babel/preset-env', { targets: { node: 'current' } }],
-        '@babel/preset-typescript',
-        '@babel/preset-react',
-      ],
+      module: {
+        type: 'commonjs',
+      },
     });
 
     return { code: result ? result.code : src };

src/config/jest-playwright.ts

@@ -15,12 +15,12 @@ import path from 'path';
 const getJestPlaywrightConfig = () => {
   const presetBasePath = path.dirname(
     require.resolve('jest-playwright-preset', {
-      paths: [path.join(__dirname, '../../node_modules')],
+      paths: [path.join(__dirname, '../node_modules')],
     })
   );
   const expectPlaywrightPath = path.dirname(
     require.resolve('expect-playwright', {
-      paths: [path.join(__dirname, '../../node_modules')],
+      paths: [path.join(__dirname, '../node_modules')],
     })
   );
   return {
@@ -55,7 +55,7 @@ export const getJestConfig = () => {
     testMatch: STORYBOOK_STORIES_PATTERN && STORYBOOK_STORIES_PATTERN.split(';'),
     transform: {
       '^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
-      '^.+\\.[jt]sx?$': 'babel-jest',
+      '^.+\\.[jt]sx?$': '@swc/jest',
     },
     snapshotSerializers: ['jest-serializer-html'],
     testEnvironmentOptions: {

src/csf/transformCsf.ts

@@ -127,6 +127,7 @@ export const transformCsf = (
       allTests,
       beforeEachPrefixer ? makeBeforeEach(beforeEachPrefixer) : undefined
     );
+    // @ts-ignore
     const { code: describeCode } = generate(describe, {});
     result = dedent`
       ${result}

src/playwright/index.ts

@@ -1,14 +1,14 @@
-import { transform as babelTransform } from '@babel/core';
+import { transformSync as swcTransform } from '@swc/core';
 import { transformPlaywright } from './transformPlaywright';
 
 export const process = (src: string, filename: string, config: any) => {
   const csfTest = transformPlaywright(src, filename);
 
-  const result = babelTransform(csfTest, {
+  const result = swcTransform(csfTest, {
     filename,
-    babelrc: false,
-    configFile: false,
-    presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+    module: {
+      type: 'commonjs',
+    },
   });
   return result ? result.code : src;
 };

src/playwright/transformPlaywrightJson.ts

@@ -86,7 +86,7 @@ export const transformPlaywrightJson = (index: Record<string, any>) => {
     if (stories.length) {
       const storyTests = stories.map((story) => makeDescribe(story.name, [makeTest(story)]));
       const program = t.program([makeDescribe(stories[0].title, storyTests)]);
-
+      // @ts-ignore
       const { code } = generate(program, {});
 
       acc[titleId] = code;

test-runner-jest.config.js

@@ -1,21 +1,21 @@
 // !!! This file is used as an override to the test-runner configuration for this repo only !!!
 // If you want to create your own override for your project, run test-storybook eject instead
 
-const { getJestConfig } = require('./dist/cjs');
+const { getJestConfig } = require('./dist');
 
 module.exports = {
   ...getJestConfig(),
   cacheDirectory: 'node_modules/.cache/storybook/test-runner',
   transform: {
     '^.+\\.stories\\.[jt]sx?$': './playwright/transform',
-    '^.+\\.[jt]sx?$': 'babel-jest',
+    '^.+\\.[jt]sx?$': '@swc/jest',
   },
   globalSetup: './playwright/global-setup.js',
   globalTeardown: './playwright/global-teardown.js',
   testEnvironment: './playwright/custom-environment.js',
   setupFilesAfterEnv: ['./playwright/jest-setup.js'],
   // use local build when the package is referred
   moduleNameMapper: {
-    '@storybook/test-runner': '<rootDir>/dist/cjs/index.js',
+    '@storybook/test-runner': '<rootDir>/dist/index.js',
   },
 };

tsconfig.json

@@ -13,7 +13,7 @@
     "noImplicitAny": true,
     "rootDir": "./src",
     "skipLibCheck": true,
-    "target": "es5",
+    "target": "es6",
     "types": ["jest", "node"],
     "moduleResolution": "node"
   },

tsup.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig([
+  {
+    clean: true,
+    entry: ['./src/**/!(*.{d,test}).{js,jsx,ts,tsx}'],
+    format: ['cjs', 'esm'],
+    dts: true,
+    esbuildOptions(options, context) {
+      options.platform = 'node';
+    },
+  },
+  {
+    clean: true,
+    entry: ['bin'],
+    format: 'cjs',
+    esbuildOptions(options, context) {
+      options.platform = 'node';
+    },
+  },
+]);