fix: externalize dependencies

Author: openscript

package.json

@@ -54,9 +54,11 @@
     "coverage": "vitest --coverage",
     "upgrade-interactive": "npm-check -u"
   },
-  "dependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+  "dependencies": {},
+  "peerDependencies": {
+    "@emotion/react": "^11.9.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.0",

vite.config.ts

@@ -3,6 +3,14 @@ import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
 import packageJson from './package.json';
 
+const makeExternalPredicate = (externals: string[]) => {
+  if (externals.length === 0) {
+    return () => false;
+  }
+  const pattern = new RegExp(`^(${externals.join('|')})($|/)`);
+  return (id: string) => pattern.test(id);
+};
+
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
@@ -12,17 +20,19 @@ export default defineConfig({
       fileName: (format) => `react-vite-storybook-typescript-starter.${format}.js`,
     },
     rollupOptions: {
-      external: ['react'],
+      external: makeExternalPredicate([...Object.keys(packageJson.dependencies), ...Object.keys(packageJson.peerDependencies)]),
       output: {
         globals: {
           react: 'React',
+          '@emotion/react': '@emotion/react',
         },
       },
     },
   },
   plugins: [
     react({
       jsxImportSource: '@emotion/react',
+      exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
       babel: {
         plugins: ['@emotion/babel-plugin'],
       },