Skip to content

Commit 6ef4005

Browse files
lukasIOlukasIO
authored
Use vite for building react package (#994)
1 parent 642689d commit 6ef4005

File tree

12 files changed

+940
-122
lines changed

12 files changed

+940
-122
lines changed

‎.changeset/three-camels-lie.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@livekit/components-react": patch
3+
---
4+
5+
Use vite for building react package, fixes useKrispNoiseFilter usage

‎packages/react/.size-limit.js

+25-4
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,42 @@ module.exports = [
33
name: 'LiveKitRoom only',
44
path: 'dist/index.mjs',
55
import: '{ LiveKitRoom }',
6-
limit: '4 kB',
7-
ignore: ['livekit-client', 'react', 'react-dom', 'loglevel', '@livekit/krisp-noise-filter'],
6+
limit: '9 kB',
7+
ignore: [
8+
'livekit-client',
9+
'react',
10+
'react-dom',
11+
'react/jsx-runtime',
12+
'loglevel',
13+
'@livekit/krisp-noise-filter',
14+
],
815
},
916
{
1017
name: 'LiveKitRoom with VideoConference',
1118
path: 'dist/index.mjs',
1219
import: '{ LiveKitRoom, VideoConference }',
1320
limit: '40 kB',
14-
ignore: ['livekit-client', 'react', 'react-dom', 'loglevel', '@livekit/krisp-noise-filter'],
21+
ignore: [
22+
'livekit-client',
23+
'react',
24+
'react-dom',
25+
'react/jsx-runtime',
26+
'loglevel',
27+
'@livekit/krisp-noise-filter',
28+
],
1529
},
1630
{
1731
name: 'All exports',
1832
path: 'dist/index.mjs',
1933
import: '*',
2034
limit: '100 kB',
21-
ignore: ['livekit-client', 'react', 'react-dom', 'loglevel', '@livekit/krisp-noise-filter'],
35+
ignore: [
36+
'livekit-client',
37+
'react',
38+
'react-dom',
39+
'react/jsx-runtime',
40+
'loglevel',
41+
'@livekit/krisp-noise-filter',
42+
],
2243
},
2344
];

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

+18-18
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,39 @@
44
55
```ts
66

7-
import type { AudioAnalyserOptions } from 'livekit-client';
8-
import type { AudioCaptureOptions } from 'livekit-client';
7+
import { AudioAnalyserOptions } from 'livekit-client';
8+
import { AudioCaptureOptions } from 'livekit-client';
99
import { ChatMessage } from 'livekit-client';
1010
import { ConnectionQuality } from 'livekit-client';
1111
import { ConnectionState as ConnectionState_2 } from 'livekit-client';
12-
import type { CreateLocalTracksOptions } from 'livekit-client';
13-
import type { DataPublishOptions } from 'livekit-client';
14-
import type { HTMLAttributes } from 'react';
12+
import { CreateLocalTracksOptions } from 'livekit-client';
13+
import { DataPublishOptions } from 'livekit-client';
14+
import { HTMLAttributes } from 'react';
1515
import { LocalAudioTrack } from 'livekit-client';
1616
import { LocalParticipant } from 'livekit-client';
17-
import type { LocalTrack } from 'livekit-client';
17+
import { LocalTrack } from 'livekit-client';
1818
import { LocalTrackPublication } from 'livekit-client';
1919
import { LocalVideoTrack } from 'livekit-client';
20-
import type { MediaDeviceFailure } from 'livekit-client';
20+
import { MediaDeviceFailure } from 'livekit-client';
2121
import { Participant } from 'livekit-client';
22-
import type { ParticipantEvent } from 'livekit-client';
22+
import { ParticipantEvent } from 'livekit-client';
2323
import type { ParticipantKind } from 'livekit-client';
24-
import type { ParticipantPermission } from '@livekit/protocol';
24+
import { ParticipantPermission } from '@livekit/protocol';
2525
import * as React_2 from 'react';
26-
import type { RemoteAudioTrack } from 'livekit-client';
26+
import { RemoteAudioTrack } from 'livekit-client';
2727
import { RemoteParticipant } from 'livekit-client';
2828
import { Room } from 'livekit-client';
29-
import type { RoomConnectOptions } from 'livekit-client';
30-
import type { RoomEvent } from 'livekit-client';
31-
import type { RoomOptions } from 'livekit-client';
32-
import type { ScreenShareCaptureOptions } from 'livekit-client';
29+
import { RoomConnectOptions } from 'livekit-client';
30+
import { RoomEvent } from 'livekit-client';
31+
import { RoomOptions } from 'livekit-client';
32+
import { ScreenShareCaptureOptions } from 'livekit-client';
3333
import { setLogLevel as setLogLevel_2 } from 'livekit-client';
34-
import type { SVGProps } from 'react';
34+
import { SVGProps } from 'react';
3535
import { Track } from 'livekit-client';
36-
import type { TrackPublication } from 'livekit-client';
36+
import { TrackPublication } from 'livekit-client';
3737
import { TrackPublishOptions } from 'livekit-client';
38-
import type { TranscriptionSegment } from 'livekit-client';
39-
import type { VideoCaptureOptions } from 'livekit-client';
38+
import { TranscriptionSegment } from 'livekit-client';
39+
import { VideoCaptureOptions } from 'livekit-client';
4040

4141
// @beta (undocumented)
4242
export type AgentState = 'disconnected' | 'connecting' | 'initializing' | 'listening' | 'thinking' | 'speaking';

‎packages/react/package.json

+14-12
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@
1515
"require": "./dist/index.js"
1616
},
1717
"./hooks": {
18-
"types": "./dist/hooks/index.d.ts",
19-
"import": "./dist/hooks/index.mjs",
20-
"require": "./dist/hooks/index.js"
18+
"types": "./dist/hooks.d.ts",
19+
"import": "./dist/hooks.mjs",
20+
"require": "./dist/hooks.js"
2121
},
2222
"./prefabs": {
23-
"types": "./dist/prefabs/index.d.ts",
24-
"import": "./dist/prefabs/index.mjs",
25-
"require": "./dist/prefabs/index.js"
23+
"types": "./dist/prefabs.d.ts",
24+
"import": "./dist/prefabs.mjs",
25+
"require": "./dist/prefabs.js"
2626
},
2727
"./krisp": {
28-
"types": "./dist/hooks/cloud/krisp/useKrispNoiseFilter.d.ts",
29-
"import": "./dist/hooks/cloud/krisp/useKrispNoiseFilter.mjs",
30-
"require": "./dist/hooks/cloud/krisp/useKrispNoiseFilter.js"
28+
"types": "./dist/krisp.d.ts",
29+
"import": "./dist/krisp.mjs",
30+
"require": "./dist/krisp.js"
3131
}
3232
},
3333
"main": "dist/index.js",
@@ -38,7 +38,7 @@
3838
"src"
3939
],
4040
"scripts": {
41-
"build": "pnpm gen:svg && tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
41+
"build": "pnpm gen:svg && vite build",
4242
"dev": "tsup --watch --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
4343
"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",
4444
"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 @@
7373
"@microsoft/api-extractor": "^7.35.0",
7474
"@size-limit/file": "^11.0.2",
7575
"@size-limit/webpack": "^11.0.2",
76+
"@size-limit/webpack-why": "^11.1.6",
7677
"@svgr/cli": "^8.0.0",
7778
"@testing-library/react": "^16.0.0",
7879
"@types/react": "^18.0.25",
7980
"@types/react-dom": "^18.0.8",
80-
"@vitejs/plugin-react": "^4.0.0",
81+
"@vitejs/plugin-react": "^4.3.2",
8182
"eslint-config-lk-custom": "workspace:*",
8283
"jsdom": "^24.0.0",
8384
"react": "^18.2.0",
8485
"react-dom": "^18.2.0",
8586
"rimraf": "^6.0.0",
8687
"size-limit": "^11.0.2",
87-
"tsup": "^8.0.0",
88+
"vite": "^5.4.8",
89+
"vite-plugin-dts": "^4.2.3",
8890
"vitest": "^2.0.0"
8991
},
9092
"engines": {

‎packages/react/src/context/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@ export {
2323
useTrackRefContext,
2424
} from './track-reference-context';
2525

26-
export { FeatureFlags, useFeatureContext, LKFeatureContext } from './feature-context';
26+
export { type FeatureFlags, useFeatureContext, LKFeatureContext } from './feature-context';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { LocalAudioTrack } from 'livekit-client';
33
import type { KrispNoiseFilterProcessor, NoiseFilterOptions } from '@livekit/krisp-noise-filter';
44
import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
5-
import { useLocalParticipant } from '../../useLocalParticipant';
5+
import { useLocalParticipant } from '../../..';
66

77
/**
88
* @alpha

‎packages/react/src/hooks/index.ts

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
11
export { useAudioPlayback } from './useAudioPlayback';
22
export { useClearPinButton } from './useClearPinButton';
33
export {
4-
ConnectionQualityIndicatorOptions,
4+
type ConnectionQualityIndicatorOptions,
55
useConnectionQualityIndicator,
66
} from './useConnectionQualityIndicator';
77
export { useConnectionState } from './useConnectionStatus';
88
export { useDataChannel } from './useDataChannel';
99
export { useDisconnectButton } from './useDisconnectButton';
1010
export { useFacingMode } from './useFacingMode';
11-
export { UseFocusToggleProps, useFocusToggle } from './useFocusToggle';
11+
export { type UseFocusToggleProps, useFocusToggle } from './useFocusToggle';
1212
export { useGridLayout } from './useGridLayout';
13-
export { UseIsMutedOptions, useIsMuted } from './useIsMuted';
13+
export { type UseIsMutedOptions, useIsMuted } from './useIsMuted';
1414
export { useIsSpeaking } from './useIsSpeaking';
1515
export { useLiveKitRoom } from './useLiveKitRoom';
16-
export { UseLocalParticipantOptions, useLocalParticipant } from './useLocalParticipant';
16+
export { type UseLocalParticipantOptions, useLocalParticipant } from './useLocalParticipant';
1717
export { useLocalParticipantPermissions } from './useLocalParticipantPermissions';
18-
export { UseMediaDeviceSelectProps, useMediaDeviceSelect } from './useMediaDeviceSelect';
18+
export { type UseMediaDeviceSelectProps, useMediaDeviceSelect } from './useMediaDeviceSelect';
1919
export { useMediaDevices } from './useMediaDevices';
2020
export { usePagination } from './usePagination';
21-
export { UseParticipantInfoOptions, useParticipantInfo } from './useParticipantInfo';
21+
export { type UseParticipantInfoOptions, useParticipantInfo } from './useParticipantInfo';
2222
export {
23-
UseParticipantPermissionsOptions,
23+
type UseParticipantPermissionsOptions,
2424
useParticipantPermissions,
2525
} from './useParticipantPermissions';
26-
export { UseParticipantTileProps, useParticipantTile } from './useParticipantTile';
27-
export { UseParticipantsOptions, useParticipants } from './useParticipants';
26+
export { type UseParticipantTileProps, useParticipantTile } from './useParticipantTile';
27+
export { type UseParticipantsOptions, useParticipants } from './useParticipants';
2828
export { usePinnedTracks } from './usePinnedTracks';
29-
export { UseRemoteParticipantOptions, useRemoteParticipant } from './useRemoteParticipant';
30-
export { UseRemoteParticipantsOptions, useRemoteParticipants } from './useRemoteParticipants';
31-
export { UseRoomInfoOptions, useRoomInfo } from './useRoomInfo';
29+
export { type UseRemoteParticipantOptions, useRemoteParticipant } from './useRemoteParticipant';
30+
export { type UseRemoteParticipantsOptions, useRemoteParticipants } from './useRemoteParticipants';
31+
export { type UseRoomInfoOptions, useRoomInfo } from './useRoomInfo';
3232
export { useSortedParticipants } from './useSortedParticipants';
3333
export { useSpeakingParticipants } from './useSpeakingParticipants';
34-
export { UseStartAudioProps, useStartAudio } from './useStartAudio';
35-
export { UseStartVideoProps, useStartVideo } from './useStartVideo';
36-
export { UseSwipeOptions, useSwipe } from './useSwipe';
37-
export { UseChatToggleProps, useChatToggle } from './useChatToggle';
38-
export { UseTokenOptions, UserInfo, useToken } from './useToken';
34+
export { type UseStartAudioProps, useStartAudio } from './useStartAudio';
35+
export { type UseStartVideoProps, useStartVideo } from './useStartVideo';
36+
export { type UseSwipeOptions, useSwipe } from './useSwipe';
37+
export { type UseChatToggleProps, useChatToggle } from './useChatToggle';
38+
export { type UseTokenOptions, type UserInfo, useToken } from './useToken';
3939
export { useTrackMutedIndicator } from './useTrackMutedIndicator';
40-
export { UseTrackToggleProps, useTrackToggle } from './useTrackToggle';
41-
export { UseTracksHookReturnType, UseTracksOptions, useTracks } from './useTracks';
42-
export { UseVisualStableUpdateOptions, useVisualStableUpdate } from './useVisualStableUpdate';
40+
export { type UseTrackToggleProps, useTrackToggle } from './useTrackToggle';
41+
export { type UseTracksHookReturnType, type UseTracksOptions, useTracks } from './useTracks';
42+
export { type UseVisualStableUpdateOptions, useVisualStableUpdate } from './useVisualStableUpdate';
4343
// export { UseTrackOptions, useTrack } from './useTrack';
4444
export { useTrackByName } from './useTrackByName';
4545
export { useChat } from './useChat';
4646
export {
4747
usePersistentUserChoices,
4848
type UsePersistentUserChoicesOptions,
4949
} from './usePersistentUserChoices';
50-
export { UseIsEncryptedOptions, useIsEncrypted } from './useIsEncrypted';
50+
export { type UseIsEncryptedOptions, useIsEncrypted } from './useIsEncrypted';
5151
export * from './useTrackVolume';
5252
export * from './useParticipantTracks';
5353
export * from './useTrackTranscription';

‎packages/react/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export * from './components';
1+
export * from './components/index.js';
22

33
export * from './hooks';
44

‎packages/react/src/prefabs/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export { Chat, type ChatProps } from './Chat';
2-
export { PreJoin, PreJoinProps, usePreviewDevice, usePreviewTracks } from './PreJoin';
2+
export { PreJoin, type PreJoinProps, usePreviewDevice, usePreviewTracks } from './PreJoin';
33
export { VideoConference, type VideoConferenceProps } from './VideoConference';
44
export { ControlBar, type ControlBarProps, type ControlBarControls } from './ControlBar';
55
export { MediaDeviceMenu, type MediaDeviceMenuProps } from './MediaDeviceMenu';

‎packages/react/tsup.config.ts

-14
This file was deleted.

‎packages/react/vite.config.js

+57-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,64 @@
11
import { defineConfig } from 'vite';
2-
import react from '@vitejs/plugin-react';
2+
import { resolve } from 'path';
3+
import dts from 'vite-plugin-dts';
34

45
// https://vitejs.dev/config/
56
export default defineConfig({
6-
plugins: [react()],
7+
appType: 'custom',
8+
plugins: [
9+
// react(),
10+
dts({
11+
insertTypesEntry: true, // Create a `types` entry in package.json
12+
rollupTypes: false, // Bundle .d.ts files into a single declaration file
13+
sourcemap: true, // Enable source maps for .d.ts files
14+
// outputDir: ['dist/esm', 'dist/cjs'], // Output .d.ts files for both formats
15+
}),
16+
],
17+
build: {
18+
minify: 'esbuild',
19+
emptyOutDir: true,
20+
sourcemap: true,
21+
target: 'modules',
22+
modulePreload: { polyfill: false },
23+
lib: {
24+
entry: {
25+
index: resolve(__dirname, 'src/index.ts'),
26+
hooks: resolve(__dirname, 'src/hooks/index.ts'),
27+
prefabs: resolve(__dirname, 'src/prefabs/index.ts'),
28+
krisp: resolve(__dirname, 'src/hooks/cloud/krisp/useKrispNoiseFilter.ts'),
29+
},
30+
},
31+
rollupOptions: {
32+
external: [
33+
'livekit-client',
34+
'@livekit/krisp-noise-filter',
35+
'react',
36+
'react-dom',
37+
'react/jsx-runtime',
38+
],
39+
output: [
40+
{
41+
format: 'es',
42+
entryFileNames: '[name].mjs', // Use .mjs for ESM
43+
chunkFileNames: '[name]-[hash].mjs',
44+
dir: 'dist',
45+
manualChunks: {
46+
contexts: ['src/context/index.ts'],
47+
room: ['src/hooks/useLiveKitRoom.ts', 'src/components/LiveKitRoom.tsx'],
48+
hooks: ['src/hooks/index.ts'],
49+
components: ['src/components/index.ts'],
50+
prefabs: ['src/prefabs/index.ts'],
51+
},
52+
},
53+
{
54+
format: 'cjs',
55+
entryFileNames: '[name].js', // Use .js for CJS
56+
chunkFileNames: 'shared-[hash].js',
57+
dir: 'dist',
58+
},
59+
],
60+
},
61+
},
762
test: {
863
globals: true,
964
environment: 'jsdom',

0 commit comments

Comments
 (0)