chore: @storybook/react-vite

Author: abernier

.babelrc.json

@@ -1,11 +1,16 @@
-import type { StorybookConfig } from '@storybook/react-webpack5'
+import type { StorybookConfig } from '@storybook/react-vite'
+
 const config: StorybookConfig = {
   stories: ['./stories/**/*.mdx', './stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
+  async viteFinal(config, options) {
+    // Add your configuration here
+    return config
+  },
   docs: {
     autodocs: 'tag',
   },

.storybook/main.ts

@@ -53,11 +53,6 @@
     "three-stdlib": "^2.21.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.5",
     "@react-three/fiber": "^8.13.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.1.0",
@@ -68,7 +63,7 @@
     "@storybook/addon-links": "^7.0.10",
     "@storybook/blocks": "^7.0.10",
     "@storybook/react": "^7.0.10",
-    "@storybook/react-webpack5": "^7.0.10",
+    "@storybook/react-vite": "^7.0.11",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
@@ -95,7 +90,8 @@
     "semantic-release": "^21.0.2",
     "storybook": "^7.0.10",
     "three": "^0.151.3",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0",

package.json

@@ -1,41 +1,23 @@
 import path from 'path'
-import babel from '@rollup/plugin-babel'
 import resolve from '@rollup/plugin-node-resolve'
 import filesize from 'rollup-plugin-filesize'
+import typescript from '@rollup/plugin-typescript'
 
 const root = process.platform === 'win32' ? path.resolve('/') : '/'
 const external = (id) => !id.startsWith('.') && !id.startsWith(root)
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
 
-const getBabelOptions = () => ({
-  babelrc: false,
-  extensions,
-  exclude: '**/node_modules/**',
-  babelHelpers: 'runtime',
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: '> 1%, not dead, not ie 11, not op_mini all',
-      },
-    ],
-    '@babel/preset-react',
-    '@babel/preset-typescript',
-  ],
-  plugins: [['@babel/transform-runtime', { regenerator: false, useESModules: true }]],
-})
-
 export default [
   {
     input: `./src/index.tsx`,
     output: { file: `dist/index.js`, format: 'esm' },
     external,
-    plugins: [babel(getBabelOptions()), resolve({ extensions }), filesize()],
+    plugins: [typescript(), resolve({ extensions }), filesize()],
   },
   {
     input: `./src/index.tsx`,
     output: { file: `dist/index.cjs`, format: 'cjs' },
     external,
-    plugins: [babel(getBabelOptions()), resolve({ extensions }), filesize()],
+    plugins: [typescript(), resolve({ extensions }), filesize()],
   },
 ]