Use vite for building react package

packages/react/package.json

@@ -38,7 +38,7 @@
     "src"
   ],
   "scripts": {
-    "build": "pnpm gen:svg && tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
+    "build": "pnpm gen:svg && vite build",
     "dev": "tsup --watch --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
     "gen:icons": "rimraf -I -g ./src/assets/icons/*Icon.tsx && svgr --template ./src/assets/template.js --out-dir ./src/assets/icons --typescript ../styles/assets/icons",
     "gen:images": "rimraf -I -g ./src/assets/images/*.tsx && svgr --template ./src/assets/template.js --out-dir ./src/assets/images --typescript --no-svgo ../styles/assets/images",
@@ -85,6 +85,8 @@
     "rimraf": "^6.0.0",
     "size-limit": "^11.0.2",
     "tsup": "^8.0.0",
+    "vite": "^5.4.8",
+    "vite-plugin-dts": "^4.2.3",
     "vitest": "^2.0.0"
   },
   "engines": {

packages/react/src/context/index.ts

@@ -23,4 +23,4 @@ export {
   useTrackRefContext,
 } from './track-reference-context';
 
-export { FeatureFlags, useFeatureContext, LKFeatureContext } from './feature-context';
+export { type FeatureFlags, useFeatureContext, LKFeatureContext } from './feature-context';

packages/react/src/hooks/cloud/krisp/useKrispNoiseFilter.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { LocalAudioTrack } from 'livekit-client';
 import type { KrispNoiseFilterProcessor, NoiseFilterOptions } from '@livekit/krisp-noise-filter';
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
-import { useLocalParticipant } from '../../useLocalParticipant';
+import { useLocalParticipant } from '../../..';
 
 /**
  * @alpha

packages/react/src/hooks/index.ts

@@ -1,53 +1,53 @@
 export { useAudioPlayback } from './useAudioPlayback';
 export { useClearPinButton } from './useClearPinButton';
 export {
-  ConnectionQualityIndicatorOptions,
+  type ConnectionQualityIndicatorOptions,
   useConnectionQualityIndicator,
 } from './useConnectionQualityIndicator';
 export { useConnectionState } from './useConnectionStatus';
 export { useDataChannel } from './useDataChannel';
 export { useDisconnectButton } from './useDisconnectButton';
 export { useFacingMode } from './useFacingMode';
-export { UseFocusToggleProps, useFocusToggle } from './useFocusToggle';
+export { type UseFocusToggleProps, useFocusToggle } from './useFocusToggle';
 export { useGridLayout } from './useGridLayout';
-export { UseIsMutedOptions, useIsMuted } from './useIsMuted';
+export { type UseIsMutedOptions, useIsMuted } from './useIsMuted';
 export { useIsSpeaking } from './useIsSpeaking';
 export { useLiveKitRoom } from './useLiveKitRoom';
-export { UseLocalParticipantOptions, useLocalParticipant } from './useLocalParticipant';
+export { type UseLocalParticipantOptions, useLocalParticipant } from './useLocalParticipant';
 export { useLocalParticipantPermissions } from './useLocalParticipantPermissions';
-export { UseMediaDeviceSelectProps, useMediaDeviceSelect } from './useMediaDeviceSelect';
+export { type UseMediaDeviceSelectProps, useMediaDeviceSelect } from './useMediaDeviceSelect';
 export { useMediaDevices } from './useMediaDevices';
 export { usePagination } from './usePagination';
-export { UseParticipantInfoOptions, useParticipantInfo } from './useParticipantInfo';
+export { type UseParticipantInfoOptions, useParticipantInfo } from './useParticipantInfo';
 export {
-  UseParticipantPermissionsOptions,
+  type UseParticipantPermissionsOptions,
   useParticipantPermissions,
 } from './useParticipantPermissions';
-export { UseParticipantTileProps, useParticipantTile } from './useParticipantTile';
-export { UseParticipantsOptions, useParticipants } from './useParticipants';
+export { type UseParticipantTileProps, useParticipantTile } from './useParticipantTile';
+export { type UseParticipantsOptions, useParticipants } from './useParticipants';
 export { usePinnedTracks } from './usePinnedTracks';
-export { UseRemoteParticipantOptions, useRemoteParticipant } from './useRemoteParticipant';
-export { UseRemoteParticipantsOptions, useRemoteParticipants } from './useRemoteParticipants';
-export { UseRoomInfoOptions, useRoomInfo } from './useRoomInfo';
+export { type UseRemoteParticipantOptions, useRemoteParticipant } from './useRemoteParticipant';
+export { type UseRemoteParticipantsOptions, useRemoteParticipants } from './useRemoteParticipants';
+export { type UseRoomInfoOptions, useRoomInfo } from './useRoomInfo';
 export { useSortedParticipants } from './useSortedParticipants';
 export { useSpeakingParticipants } from './useSpeakingParticipants';
-export { UseStartAudioProps, useStartAudio } from './useStartAudio';
-export { UseStartVideoProps, useStartVideo } from './useStartVideo';
-export { UseSwipeOptions, useSwipe } from './useSwipe';
-export { UseChatToggleProps, useChatToggle } from './useChatToggle';
-export { UseTokenOptions, UserInfo, useToken } from './useToken';
+export { type UseStartAudioProps, useStartAudio } from './useStartAudio';
+export { type UseStartVideoProps, useStartVideo } from './useStartVideo';
+export { type UseSwipeOptions, useSwipe } from './useSwipe';
+export { type UseChatToggleProps, useChatToggle } from './useChatToggle';
+export { type UseTokenOptions, type UserInfo, useToken } from './useToken';
 export { useTrackMutedIndicator } from './useTrackMutedIndicator';
-export { UseTrackToggleProps, useTrackToggle } from './useTrackToggle';
-export { UseTracksHookReturnType, UseTracksOptions, useTracks } from './useTracks';
-export { UseVisualStableUpdateOptions, useVisualStableUpdate } from './useVisualStableUpdate';
+export { type UseTrackToggleProps, useTrackToggle } from './useTrackToggle';
+export { type UseTracksHookReturnType, type UseTracksOptions, useTracks } from './useTracks';
+export { type UseVisualStableUpdateOptions, useVisualStableUpdate } from './useVisualStableUpdate';
 // export { UseTrackOptions, useTrack } from './useTrack';
 export { useTrackByName } from './useTrackByName';
 export { useChat } from './useChat';
 export {
   usePersistentUserChoices,
   type UsePersistentUserChoicesOptions,
 } from './usePersistentUserChoices';
-export { UseIsEncryptedOptions, useIsEncrypted } from './useIsEncrypted';
+export { type UseIsEncryptedOptions, useIsEncrypted } from './useIsEncrypted';
 export * from './useTrackVolume';
 export * from './useParticipantTracks';
 export * from './useTrackTranscription';

packages/react/src/index.ts

@@ -1,4 +1,4 @@
-export * from './components';
+export * from './components/index.js';
 
 export * from './hooks';
 

packages/react/src/prefabs/index.ts

@@ -1,5 +1,5 @@
 export { Chat, type ChatProps } from './Chat';
-export { PreJoin, PreJoinProps, usePreviewDevice, usePreviewTracks } from './PreJoin';
+export { PreJoin, type PreJoinProps, usePreviewDevice, usePreviewTracks } from './PreJoin';
 export { VideoConference, type VideoConferenceProps } from './VideoConference';
 export { ControlBar, type ControlBarProps, type ControlBarControls } from './ControlBar';
 export { MediaDeviceMenu, type MediaDeviceMenuProps } from './MediaDeviceMenu';

packages/react/tsup.config.ts

@@ -2,13 +2,37 @@ import { defineConfig } from 'tsup';
 
 import defaults from '../../tsup.config';
 
+const importPathPlugin = {
+  name: 'import-path',
+  setup(build) {
+    build.onResolve({ filter: /^\.\/src\/context\/room-context$/ }, (args) => {
+      return { path: args.path, external: true };
+    });
+  },
+};
+
 export default defineConfig({
-  ...defaults,
-  entry: [
-    'src/index.ts',
-    'src/hooks/index.ts',
-    'src/prefabs/index.ts',
-    'src/hooks/cloud/krisp/useKrispNoiseFilter.ts',
-  ],
+  clean: true,
+  bundle: false,
+  splitting: false,
+  outDir: 'dist',
+  format: ['cjs', 'esm'],
+  sourcemap: true,
+  // for the type maps to work, we use tsc's declaration-only command
+  dts: false,
+  entry: ['src/**/*.ts'],
   external: ['livekit-client', 'react', 'react-dom', '@livekit/krisp-noise-filter'],
+  esbuildOptions: (options) => {
+    options.outbase = 'src';
+    options.plugins = [
+      {
+        name: 'add-mjs',
+        setup(build) {
+          build.onResolve({ filter: /.*/ }, (args) => {
+            if (args.importer) return { path: args.path + '.mjs', external: true };
+          });
+        },
+      },
+    ];
+  },
 });

packages/react/vite.config.js

@@ -1,9 +1,52 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true, // Create a `types` entry in package.json
+      rollupTypes: false, // Bundle .d.ts files into a single declaration file
+      sourcemap: true, // Enable source maps for .d.ts files
+      // outputDir: ['dist/esm', 'dist/cjs'], // Output .d.ts files for both formats
+    }),
+  ],
+  build: {
+    emptyOutDir: true,
+    sourcemap: true,
+    lib: {
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        krisp: resolve(__dirname, 'src/hooks/cloud/krisp/useKrispNoiseFilter.ts'),
+      },
+    },
+    rollupOptions: {
+      external: [
+        'livekit-client',
+        'react',
+        'react-dom',
+        '@livekit/krisp-noise-filter',
+        'react/jsx-runtime',
+      ],
+      output: [
+        {
+          format: 'es',
+          entryFileNames: '[name].mjs', // Use .mjs for ESM
+          chunkFileNames: '[name]-[hash].mjs',
+          dir: 'dist',
+        },
+        {
+          format: 'cjs',
+          entryFileNames: '[name].js', // Use .js for CJS
+          chunkFileNames: '[name]-[hash].js',
+          dir: 'dist',
+        },
+      ],
+    },
+  },
   test: {
     globals: true,
     environment: 'jsdom',