Better bundling (#76)

* version packages

* better bundling

* use livekit changelog generator

.changeset/config.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "livekit/components" }],
+  "changelog": ["@livekit/changesets-changelog-github", { "repo": "livekit/components" }],
   "commit": false,
   "fixed": [],
   "linked": [],

.changeset/weak-ways-wave.md

@@ -0,0 +1,7 @@
+---
+'@livekit/components-core': patch
+'@livekit/components-react': patch
+'@livekit/components-styles': patch
+---
+
+Better Bundling

examples/meet/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @livekit/component-example-next
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @livekit/components-react@0.1.6
+
 ## 0.1.5
 
 ### Patch Changes

examples/meet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/meet",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@livekit/components-react": "0.1.5",
+    "@livekit/components-react": "0.1.6",
     "@livekit/components-styles": "0.1.2",
     "livekit-client": "^1.4.3",
     "next": "12.2.4",

examples/nextjs/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @livekit/component-example-next
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @livekit/components-react@0.1.6
+
 ## 0.1.5
 
 ### Patch Changes

examples/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/component-example-next",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@livekit/components-react": "0.1.5",
+    "@livekit/components-react": "0.1.6",
     "@livekit/components-styles": "0.1.2",
     "livekit-client": "^1.4.3",
     "next": "12.2.4",

examples/nuxtjs/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @livekit/component-example-nuxt
 
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @livekit/components-vue@0.1.5
+
 ## 0.1.4
 
 ### Patch Changes

examples/nuxtjs/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@livekit/component-example-nuxt",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -13,6 +13,6 @@
     "nuxt": "3.0.0-rc.9"
   },
   "dependencies": {
-    "@livekit/components-vue": "0.1.4"
+    "@livekit/components-vue": "0.1.5"
   }
 }

examples/sveltekit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @livekit/component-example-sveltekit
 
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @livekit/components-svelte@0.1.5
+
 ## 0.1.4
 
 ### Patch Changes

examples/sveltekit/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@livekit/component-example-sveltekit",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -24,7 +24,7 @@
 		"vite": "^3.1.0"
 	},
 	"dependencies": {
-		"@livekit/components-svelte": "0.1.4"
+		"@livekit/components-svelte": "0.1.5"
 	},
 	"type": "module"
 }

examples/sveltekit/vite.config.ts.timestamp-1667412200376.mjs

@@ -0,0 +1,10 @@
+// vite.config.ts
+import { sveltekit } from "@sveltejs/kit/vite";
+var config = {
+  plugins: [sveltekit()]
+};
+var vite_config_default = config;
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbHVrYXMvZGV2L2xpdmVraXQvY29tcG9uZW50cy9leGFtcGxlcy9zdmVsdGVraXRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9sdWthcy9kZXYvbGl2ZWtpdC9jb21wb25lbnRzL2V4YW1wbGVzL3N2ZWx0ZWtpdC92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvbHVrYXMvZGV2L2xpdmVraXQvY29tcG9uZW50cy9leGFtcGxlcy9zdmVsdGVraXQvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBzdmVsdGVraXQgfSBmcm9tICdAc3ZlbHRlanMva2l0L3ZpdGUnO1xuaW1wb3J0IHR5cGUgeyBVc2VyQ29uZmlnIH0gZnJvbSAndml0ZSc7XG5cbmNvbnN0IGNvbmZpZzogVXNlckNvbmZpZyA9IHtcblx0cGx1Z2luczogW3N2ZWx0ZWtpdCgpXVxufTtcblxuZXhwb3J0IGRlZmF1bHQgY29uZmlnO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFvVixTQUFTLGlCQUFpQjtBQUc5VyxJQUFNLFNBQXFCO0FBQUEsRUFDMUIsU0FBUyxDQUFDLFVBQVUsQ0FBQztBQUN0QjtBQUVBLElBQU8sc0JBQVE7IiwKICAibmFtZXMiOiBbXQp9Cg==

package.json

@@ -24,9 +24,8 @@
     "release": "turbo run build --filter=./packages/* && changeset publish"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.4.4",
     "@changesets/cli": "^2.25.0",
-    "@svitejs/changesets-changelog-github-compact": "^0.1.1",
+    "@livekit/changesets-changelog-github": "^0.0.3",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "eslint": "^8.15.0",

packages/core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @livekit/components-core
 
+## 0.1.5
+
+### Patch Changes
+
+- remove type module
+
+- dont use nested folder exports
+
 ## 0.1.4
 
 ### Patch Changes

packages/core/package.json

@@ -1,11 +1,10 @@
 {
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
   "typings": "dist/index.d.ts",
   "publishConfig": {
     "access": "restricted"
   },
-  "type": "module",
   "exports": {
     ".": "./dist/index.js",
     "./dist/token": "./dist/token.js"

packages/core/src/components/chat.ts

@@ -34,7 +34,8 @@ export function setupChat(room: Room) {
       const dataMsg = JSON.parse(decoder.decode(payload)) as DataMessageUnion;
       if (dataMsg.type === MessageType.CHAT) {
         const { timestamp, message } = dataMsg;
-        chatMessages = [...chatMessages, { timestamp, message, from: participant }];
+        const newMessage: ChatMessage = { timestamp, message, from: participant };
+        chatMessages = [...chatMessages, newMessage];
         subscriber.next(chatMessages);
       }
     });

packages/core/src/components/deviceSelector.ts

@@ -1,8 +1,6 @@
-import { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
 import { LocalAudioTrack, LocalVideoTrack, Room } from 'livekit-client';
-import { BehaviorSubject, map, merge, mergeWith, share } from 'rxjs';
+import { BehaviorSubject, map, mergeWith } from 'rxjs';
 import { observeParticipantMedia } from '../observables/participant';
-import { createMediaDeviceObserver } from '../observables/room';
 import { lkClassName } from '../utils';
 
 export function setupDeviceSelector(kind: MediaDeviceKind, room?: Room) {
@@ -35,7 +33,7 @@ export function setupDeviceSelector(kind: MediaDeviceKind, room?: Room) {
     }
     activeDeviceSubject.next(id);
   };
-  const className: ClassNames = lkClassName('device-selector');
+  const className: string = lkClassName('device-selector');
   return {
     className,
     activeDeviceObservable,

packages/core/src/components/disconnectButton.ts

@@ -1,10 +1,10 @@
-import { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
 import type { Room } from 'livekit-client';
+import { lkClassName } from '../utils';
 
 export function setupDisconnectButton(room: Room) {
   const disconnect = (stopTracks?: boolean) => {
     room.disconnect(stopTracks);
   };
-  const className: ClassNames = 'lk-disconnect-button';
+  const className: string = lkClassName('disconnect-button');
   return { className, disconnect };
 }

packages/core/src/components/mediaMutedIndicator.ts

@@ -1,11 +1,11 @@
-import { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
 import { Participant, Track } from 'livekit-client';
 import { mutedObserver } from '../observables/participant';
+import { lkClassName } from '../utils';
 
 export function setupMediaMutedIndicator(participant: Participant, source: Track.Source) {
   // FIXME
   // @ts-ignore
-  const className: ClassNames = `lk-media-muted-indicator-${source}`;
+  const className: string = lkClassName(`media-muted-indicator-${source}`);
   const mediaMutedObserver = mutedObserver(participant, source);
 
   return { className, mediaMutedObserver };

packages/core/src/components/mediaToggle.ts

@@ -1,7 +1,7 @@
-import { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
 import { LocalParticipant, Room, Track } from 'livekit-client';
 import { BehaviorSubject, map, Observable, startWith, Subscriber, tap } from 'rxjs';
 import { observeParticipantMedia } from '../observables/participant';
+import { lkClassName } from '../utils';
 
 export function setupMediaToggle(source: Track.Source, room: Room) {
   const { localParticipant } = room;
@@ -54,7 +54,7 @@ export function setupMediaToggle(source: Track.Source, room: Room) {
       // trigger observable update
     }
   };
-  const className: ClassNames = 'lk-button';
+  const className: string = lkClassName('button');
   return { className, toggle, enabledObserver, pendingObserver: pendingSubject.asObservable() };
 }
 
@@ -71,7 +71,7 @@ export function setupManualToggle(initialState: boolean) {
     enabledSubject.next(state);
     pendingSubject.next(false);
   };
-  const className: ClassNames = 'lk-button';
+  const className: string = lkClassName('button');
   return {
     className,
     toggle,

packages/core/src/components/mediaTrack.ts

@@ -1,8 +1,7 @@
-import { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
 import { Participant, Track } from 'livekit-client';
 import { map } from 'rxjs';
 import { observeParticipantMedia } from '../observables/participant';
-import { attachIfSubscribed } from '../utils';
+import { lkClassName } from '../utils';
 
 export function setupMediaTrack(participant: Participant, source: Track.Source) {
   const trackObserver = observeParticipantMedia(participant).pipe(
@@ -12,9 +11,10 @@ export function setupMediaTrack(participant: Participant, source: Track.Source)
       return publication;
     }),
   );
-  const className: ClassNames =
+  const className: string = lkClassName(
     source === Track.Source.Camera || source === Track.Source.ScreenShare
-      ? 'lk-participant-media-video'
-      : 'lk-participant-media-audio';
+      ? 'participant-media-video'
+      : 'participant-media-audio',
+  );
   return { className, trackObserver };
 }

packages/core/src/components/participantView.ts

@@ -1,7 +1,7 @@
-import { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
+import { lkClassName } from '../utils';
 
 export function setupParticipantView() {
-  const className: ClassNames = 'lk-participant-view';
+  const className: string = lkClassName('participant-view');
   return {
     className,
   };

packages/core/src/components/startAudio.ts

@@ -17,6 +17,6 @@ export function setupStartAudio() {
     console.log('Start Audio for room: ', room);
     room.startAudio();
   };
-  const className = lkClassName('start-audio-button');
+  const className: string = lkClassName('start-audio-button');
   return { className, roomAudioPlaybackAllowedObservable, handleStartAudioPlayback };
 }

packages/core/src/observables/participant.ts

@@ -1,17 +1,15 @@
 import {
-  AudioTrack,
   Participant,
   ParticipantEvent,
   RemoteParticipant,
   Room,
   RoomEvent,
   Track,
   TrackPublication,
-  VideoTrack,
 } from 'livekit-client';
-import { ParticipantEventCallbacks } from 'livekit-client/dist/src/room/participant/Participant';
 import { map, Observable, startWith, Subscriber } from 'rxjs';
 import { observeRoomEvents } from './room';
+import { ParticipantEventCallbacks } from 'livekit-client/dist/src/room/participant/Participant';
 
 export function observeParticipantEvents<T extends Participant>(
   participant: T,

packages/core/src/observables/room.ts

@@ -1,7 +1,6 @@
 import { map, Observable, startWith, Subscriber, Subscription } from 'rxjs';
 import { Participant, Room, RoomEvent, Track, TrackPublication } from 'livekit-client';
-import type { RoomEventCallbacks } from 'livekit-client/dist/src/room/Room';
-
+import { RoomEventCallbacks } from 'livekit-client/dist/src/room/Room';
 export function observeRoomEvents(room: Room, ...events: RoomEvent[]): Observable<Room> {
   const observable = new Observable<Room>((subscribe) => {
     const onRoomUpdate = () => {

packages/core/src/utils.ts

@@ -1,12 +1,12 @@
-import type { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
-import type { UnprefixedClassNames } from '@livekit/components-styles/dist/types_unprefixed/styles.scss';
 import {
   LocalParticipant,
   Participant,
   RemoteParticipant,
   Track,
   TrackPublication,
 } from 'livekit-client';
+import type { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
+import type { UnprefixedClassNames } from '@livekit/components-styles/dist/types_unprefixed/styles.scss';
 import { cssPrefix } from './constants';
 export const kebabize = (str: string) =>
   str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());

packages/react/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @livekit/components-react
 
+## 0.1.6
+
+### Patch Changes
+
+- remove type module
+
+- dont use nested folder exports
+
+- Updated dependencies []:
+  - @livekit/components-core@0.1.5
+
 ## 0.1.5
 
 ### Patch Changes