Use vite for building react package

.changeset/three-camels-lie.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Use vite for building react package, fixes useKrispNoiseFilter usage

packages/react/.size-limit.js

@@ -3,21 +3,42 @@ module.exports = [
     name: 'LiveKitRoom only',
     path: 'dist/index.mjs',
     import: '{ LiveKitRoom }',
-    limit: '4 kB',
-    ignore: ['livekit-client', 'react', 'react-dom', 'loglevel', '@livekit/krisp-noise-filter'],
+    limit: '9 kB',
+    ignore: [
+      'livekit-client',
+      'react',
+      'react-dom',
+      'react/jsx-runtime',
+      'loglevel',
+      '@livekit/krisp-noise-filter',
+    ],
   },
   {
     name: 'LiveKitRoom with VideoConference',
     path: 'dist/index.mjs',
     import: '{ LiveKitRoom, VideoConference }',
     limit: '40 kB',
-    ignore: ['livekit-client', 'react', 'react-dom', 'loglevel', '@livekit/krisp-noise-filter'],
+    ignore: [
+      'livekit-client',
+      'react',
+      'react-dom',
+      'react/jsx-runtime',
+      'loglevel',
+      '@livekit/krisp-noise-filter',
+    ],
   },
   {
     name: 'All exports',
     path: 'dist/index.mjs',
     import: '*',
     limit: '100 kB',
-    ignore: ['livekit-client', 'react', 'react-dom', 'loglevel', '@livekit/krisp-noise-filter'],
+    ignore: [
+      'livekit-client',
+      'react',
+      'react-dom',
+      'react/jsx-runtime',
+      'loglevel',
+      '@livekit/krisp-noise-filter',
+    ],
   },
 ];

packages/react/etc/components-react.api.md

@@ -4,39 +4,39 @@
 
 ```ts
 
-import type { AudioAnalyserOptions } from 'livekit-client';
-import type { AudioCaptureOptions } from 'livekit-client';
+import { AudioAnalyserOptions } from 'livekit-client';
+import { AudioCaptureOptions } from 'livekit-client';
 import { ChatMessage } from 'livekit-client';
 import { ConnectionQuality } from 'livekit-client';
 import { ConnectionState as ConnectionState_2 } from 'livekit-client';
-import type { CreateLocalTracksOptions } from 'livekit-client';
-import type { DataPublishOptions } from 'livekit-client';
-import type { HTMLAttributes } from 'react';
+import { CreateLocalTracksOptions } from 'livekit-client';
+import { DataPublishOptions } from 'livekit-client';
+import { HTMLAttributes } from 'react';
 import { LocalAudioTrack } from 'livekit-client';
 import { LocalParticipant } from 'livekit-client';
-import type { LocalTrack } from 'livekit-client';
+import { LocalTrack } from 'livekit-client';
 import { LocalTrackPublication } from 'livekit-client';
 import { LocalVideoTrack } from 'livekit-client';
-import type { MediaDeviceFailure } from 'livekit-client';
+import { MediaDeviceFailure } from 'livekit-client';
 import { Participant } from 'livekit-client';
-import type { ParticipantEvent } from 'livekit-client';
+import { ParticipantEvent } from 'livekit-client';
 import type { ParticipantKind } from 'livekit-client';
-import type { ParticipantPermission } from '@livekit/protocol';
+import { ParticipantPermission } from '@livekit/protocol';
 import * as React_2 from 'react';
-import type { RemoteAudioTrack } from 'livekit-client';
+import { RemoteAudioTrack } from 'livekit-client';
 import { RemoteParticipant } from 'livekit-client';
 import { Room } from 'livekit-client';
-import type { RoomConnectOptions } from 'livekit-client';
-import type { RoomEvent } from 'livekit-client';
-import type { RoomOptions } from 'livekit-client';
-import type { ScreenShareCaptureOptions } from 'livekit-client';
+import { RoomConnectOptions } from 'livekit-client';
+import { RoomEvent } from 'livekit-client';
+import { RoomOptions } from 'livekit-client';
+import { ScreenShareCaptureOptions } from 'livekit-client';
 import { setLogLevel as setLogLevel_2 } from 'livekit-client';
-import type { SVGProps } from 'react';
+import { SVGProps } from 'react';
 import { Track } from 'livekit-client';
-import type { TrackPublication } from 'livekit-client';
+import { TrackPublication } from 'livekit-client';
 import { TrackPublishOptions } from 'livekit-client';
-import type { TranscriptionSegment } from 'livekit-client';
-import type { VideoCaptureOptions } from 'livekit-client';
+import { TranscriptionSegment } from 'livekit-client';
+import { VideoCaptureOptions } from 'livekit-client';
 
 // @beta (undocumented)
 export type AgentState = 'disconnected' | 'connecting' | 'initializing' | 'listening' | 'thinking' | 'speaking';

packages/react/package.json

@@ -15,19 +15,19 @@
       "require": "./dist/index.js"
     },
     "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "import": "./dist/hooks/index.mjs",
-      "require": "./dist/hooks/index.js"
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.mjs",
+      "require": "./dist/hooks.js"
     },
     "./prefabs": {
-      "types": "./dist/prefabs/index.d.ts",
-      "import": "./dist/prefabs/index.mjs",
-      "require": "./dist/prefabs/index.js"
+      "types": "./dist/prefabs.d.ts",
+      "import": "./dist/prefabs.mjs",
+      "require": "./dist/prefabs.js"
     },
     "./krisp": {
-      "types": "./dist/hooks/cloud/krisp/useKrispNoiseFilter.d.ts",
-      "import": "./dist/hooks/cloud/krisp/useKrispNoiseFilter.mjs",
-      "require": "./dist/hooks/cloud/krisp/useKrispNoiseFilter.js"
+      "types": "./dist/krisp.d.ts",
+      "import": "./dist/krisp.mjs",
+      "require": "./dist/krisp.js"
     }
   },
   "main": "dist/index.js",
@@ -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",
@@ -73,18 +73,20 @@
     "@microsoft/api-extractor": "^7.35.0",
     "@size-limit/file": "^11.0.2",
     "@size-limit/webpack": "^11.0.2",
+    "@size-limit/webpack-why": "^11.1.6",
     "@svgr/cli": "^8.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "eslint-config-lk-custom": "workspace:*",
     "jsdom": "^24.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "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/vite.config.js

@@ -1,9 +1,64 @@
 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()],
+  appType: 'custom',
+  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: {
+    minify: 'esbuild',
+    emptyOutDir: true,
+    sourcemap: true,
+    target: 'modules',
+    modulePreload: { polyfill: false },
+    lib: {
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        hooks: resolve(__dirname, 'src/hooks/index.ts'),
+        prefabs: resolve(__dirname, 'src/prefabs/index.ts'),
+        krisp: resolve(__dirname, 'src/hooks/cloud/krisp/useKrispNoiseFilter.ts'),
+      },
+    },
+    rollupOptions: {
+      external: [
+        'livekit-client',
+        '@livekit/krisp-noise-filter',
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+      ],
+      output: [
+        {
+          format: 'es',
+          entryFileNames: '[name].mjs', // Use .mjs for ESM
+          chunkFileNames: '[name]-[hash].mjs',
+          dir: 'dist',
+          manualChunks: {
+            contexts: ['src/context/index.ts'],
+            room: ['src/hooks/useLiveKitRoom.ts', 'src/components/LiveKitRoom.tsx'],
+            hooks: ['src/hooks/index.ts'],
+            components: ['src/components/index.ts'],
+            prefabs: ['src/prefabs/index.ts'],
+          },
+        },
+        {
+          format: 'cjs',
+          entryFileNames: '[name].js', // Use .js for CJS
+          chunkFileNames: 'shared-[hash].js',
+          dir: 'dist',
+        },
+      ],
+    },
+  },
   test: {
     globals: true,
     environment: 'jsdom',