Replace yarn with pnpm (#696)

Author: lukasIO

.changeset/thick-keys-happen.md

@@ -0,0 +1,6 @@
+---
+"@livekit/components-react": patch
+
+---
+
+Export isTrackReference

.github/workflows/release.yaml

@@ -12,26 +12,23 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js 20.x
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Install Dependencies
-        run: yarn
-
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
         with:
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
-          publish: yarn release
+          publish: pnpm publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/size-limit.yaml

@@ -11,9 +11,19 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
       - uses: andresz1/[email protected]
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           script: npx -w @livekit/components-react size-limit --json
-          package_manager: yarn
+          package_manager: pnpm
           build_script: build:react

.github/workflows/test.yaml

@@ -16,27 +16,27 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: '20.x'
-          cache: 'yarn'
-
-      - name: Install Yarn
-        run: |
-          npm install -g yarn
-          yarn install
-
+          version: 8
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
       - name: ESLint
-        run: yarn lint
+        run: pnpm lint
 
       - name: Prettier
-        run: yarn format:check
+        run: pnpm format:check
 
       - name: Build Packages
-        run: yarn build
+        run: pnpm build
 
       - name: Run Tests
-        run: yarn test
+        run: pnpm test
 
       - name: Check for API Changes
-        run: yarn api:check
+        run: pnpm api:check

README.md

@@ -59,18 +59,18 @@ If you are interested in contributing to the project or running the examples tha
 ### Setup Monorepo
 
 This repo consists of multiple packages that partly build on top of each other.
-It relies on yarn workspaces and [Turborepo](https://turbo.build/repo/docs) (which gets installed automatically).
+It relies on pnpm workspaces and [Turborepo](https://turbo.build/repo/docs) (which gets installed automatically).
 
-Clone the repo and run `yarn install` the root level:
+Clone the repo and run `pnpm install` the root level:
 
 ```shell
-yarn install
+pnpm install
 ```
 
 In order to link up initial dependencies and check whether everything has installed correctly run
 
 ```shell
-yarn build
+pnpm build
 ```
 
 This will build all the packages in `/packages` and the examples in `/examples` once.
@@ -79,7 +79,7 @@ After that you can use a more granular command to only rebuild the packages you
 E.g. to test and automatically rebuild package dependencies for the nextjs example, run:
 
 ```shell
-yarn dev:next
+pnpm dev:next
 ```
 
 > **Note**

docs/storybook/.env.example

@@ -7,4 +7,4 @@ VITE_PUBLIC_TEST_TOKEN=
 
 # STORYBOOK
 # https://storybook.js.org/docs/react/configure/telemetry#how-to-opt-out
-STORYBOOK_DISABLE_TELEMETRY="1 yarn storybook"
+STORYBOOK_DISABLE_TELEMETRY="1 pnpm storybook"

docs/storybook/README.md

@@ -23,7 +23,7 @@ This Storybook gives a good overview over all* (*work in progress) LiveKit compo
 2. From the root of the monorepo run:
 
 ```bash
-yarn dev:storybook
+pnpm dev:storybook
 ```
 
 This should open storybook in the default browser under `http://localhost:6006`

docs/storybook/package.json

@@ -22,6 +22,7 @@
     "@storybook/addon-essentials": "^7.0.0-beta.30",
     "@storybook/addon-interactions": "^7.0.0-beta.30",
     "@storybook/addon-links": "^7.0.0-beta.30",
+    "@storybook/addon-docs": "^7.0.0-beta.30",
     "@storybook/react": "^7.0.0-beta.30",
     "@storybook/react-vite": "7.5.2",
     "@storybook/testing-library": "^0.2.0",

examples/nextjs/README.md

@@ -28,7 +28,7 @@ Copy the the contents of `.env.example` in to a newly created `.env.local` file
 With everything setup we can now start the Next.js-App from the root of the monorepo with:
 
 ```bash
-yarn dev:next
+pnpm dev:next
 ```
 
 Navigate to `http://localhost:3000/` to see a list of examples to choose from.

examples/nextjs/pages/customize.tsx

@@ -3,6 +3,7 @@ import {
   ParticipantName,
   TrackMutedIndicator,
   RoomAudioRenderer,
+  isTrackReference,
   useConnectionQualityIndicator,
   VideoTrack,
   useToken,
@@ -16,7 +17,6 @@ import styles from '../styles/Simple.module.css';
 import myStyles from '../styles/Customize.module.css';
 import type { NextPage } from 'next';
 import { HTMLAttributes, useState } from 'react';
-import { isTrackReference } from '@livekit/components-core';
 import { generateRandomUserId } from '../lib/helper';
 
 const CustomizeExample: NextPage = () => {

package.json

@@ -16,22 +16,16 @@
     "format:check": "prettier --check \"**/src/**/*.{ts,tsx,md}\"",
     "format:write": "prettier --write \"**/src/**/*.{ts,tsx,md}\"",
     "gen:docs": "turbo run gen:docs",
-    "gen:docs:watch": "nodemon --watch \"tooling/api-documenter/src/**/*\" --watch \"packages/react/src/**/*\" --ignore \"packages/react/src/assets/**/*\" -e js,jsx,ts,tsx -x \"yarn gen:docs\"",
+    "gen:docs:watch": "nodemon --watch \"tooling/api-documenter/src/**/*\" --watch \"packages/react/src/**/*\" --ignore \"packages/react/src/assets/**/*\" -e js,jsx,ts,tsx -x \"pnpm gen:docs\"",
     "lint": "turbo run lint",
-    "release": "turbo run build --filter=./packages/* && changeset publish",
+    "publish": "turbo run build --filter=./packages/* && pnpm --filter=./packages/* publish",
     "start:next": "turbo run start --filter=@livekit/component-example-next...",
     "test": "turbo run test",
     "tooling:update-readme-nav": "node tooling/readme-manager/update-nav-in-readmes.js",
     "api:check": "turbo run api-check",
     "api-extractor": "turbo run api-extractor",
     "cleanup": "find . -type d \\( -name 'node_modules' -o -name '.turbo' -o -name 'dist' \\) -prune -exec rm -rf '{}' +"
   },
-  "workspaces": [
-    "packages/*",
-    "examples/*",
-    "docs/*",
-    "tooling/*"
-  ],
   "dependencies": {},
   "peerDependencies": {
     "typescript": "5.1.6"

packages/core/.github/workflows/main.yml

@@ -41,10 +41,11 @@
     "rxjs": "^7.8.0"
   },
   "peerDependencies": {
-    "livekit-client": "^1.12.0"
+    "livekit-client": "^1.12.0",
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@livekit/components-styles": "~1.0.6",
+    "@livekit/components-styles": "workspace:../styles",
     "@microsoft/api-extractor": "^7.36.0",
     "@size-limit/file": "^10.0.0",
     "@size-limit/webpack": "^10.0.0",

packages/core/.github/workflows/size.yml

@@ -20,7 +20,7 @@ A LiveKit Components implementation in [React](https://reactjs.org/).
 ## Install
 
 ```bash
-yarn install @livekit/components-react
+npm install @livekit/components-react
 ```
 
 ## Usage

packages/core/package.json

@@ -16,6 +16,7 @@ import type { CreateLocalTracksOptions } from 'livekit-client';
 import type { DataSendOptions } from '@livekit/components-core';
 import type { GridLayoutDefinition } from '@livekit/components-core';
 import { HTMLAttributes } from 'react';
+import { isTrackReference } from '@livekit/components-core';
 import type { LocalAudioTrack } from 'livekit-client';
 import { LocalParticipant } from 'livekit-client';
 import type { LocalTrack } from 'livekit-client';
@@ -272,6 +273,8 @@ export interface GridLayoutProps extends React_2.HTMLAttributes<HTMLDivElement>,
     tracks: TrackReferenceOrPlaceholder[];
 }
 
+export { isTrackReference }
+
 // @public (undocumented)
 export const LayoutContext: React_2.Context<LayoutContextType | undefined>;
 

packages/react/README.md

@@ -33,11 +33,11 @@
     "src"
   ],
   "scripts": {
-    "build": "yarn gen:svg && tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
+    "build": "pnpm gen:svg && tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
     "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",
-    "gen:svg": "yarn gen:images && yarn gen:icons",
+    "gen:svg": "pnpm gen:images && pnpm gen:icons",
     "lint": "eslint -f unix \"src/**/*.{ts,tsx}\"",
     "test": "vitest --run",
     "test:watch": "vitest",
@@ -47,15 +47,16 @@
   },
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@livekit/components-core": "0.7.0",
+    "@livekit/components-core": "workspace:../core",
     "@react-hook/latest": "^1.0.3",
     "clsx": "^2.0.0",
     "usehooks-ts": "^2.9.1"
   },
   "peerDependencies": {
     "livekit-client": "^1.12.0",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.35.0",

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+// @ts-ignore
 import type { Observable } from 'rxjs';
 
 /**

packages/react/package.json

@@ -1,5 +1,5 @@
 import type { MessageDecoder, MessageEncoder } from '@livekit/components-core';
-import { setupChat } from '@livekit/components-core';
+import { ReceivedChatMessage, setupChat } from '@livekit/components-core';
 import * as React from 'react';
 import { useRoomContext } from '../context';
 import { useObservableState } from './internal/useObservableState';
@@ -18,7 +18,7 @@ export function useChat(options?: {
   const room = useRoomContext();
   const [setup, setSetup] = React.useState<ReturnType<typeof setupChat>>();
   const isSending = useObservableState(setup?.isSendingObservable, false);
-  const chatMessages = useObservableState(setup?.messageObservable, []);
+  const chatMessages = useObservableState<ReceivedChatMessage[]>(setup?.messageObservable, []);
 
   React.useEffect(() => {
     const setupChatReturn = setupChat(room, options);

packages/react/src/hooks/internal/useObservableState.ts

@@ -44,7 +44,7 @@ export function useMediaDeviceSelect({
     () => createMediaDeviceObserver(kind, requestPermissions),
     [kind, requestPermissions],
   );
-  const devices = useObservableState(deviceObserver, []);
+  const devices = useObservableState(deviceObserver, [] as MediaDeviceInfo[]);
   // Active device management.
   const [currentDeviceId, setCurrentDeviceId] = React.useState<string>('');
   const { className, activeDeviceObservable, setActiveMediaDevice } = React.useMemo(

packages/react/src/hooks/useChat.ts

@@ -14,6 +14,6 @@ import { createMediaDeviceObserver } from '@livekit/components-core';
  */
 export function useMediaDevices({ kind }: { kind: MediaDeviceKind }) {
   const deviceObserver = React.useMemo(() => createMediaDeviceObserver(kind), [kind]);
-  const devices = useObservableState(deviceObserver, []);
+  const devices = useObservableState(deviceObserver, [] as MediaDeviceInfo[]);
   return devices;
 }

packages/react/src/hooks/useMediaDeviceSelect.ts

@@ -7,7 +7,7 @@ export * from './prefabs';
 export * from './context';
 
 // Re-exports from core
-export { setLogLevel } from '@livekit/components-core';
+export { setLogLevel, isTrackReference } from '@livekit/components-core';
 export type {
   ChatMessage,
   ReceivedChatMessage,

packages/react/src/hooks/useMediaDevices.ts

@@ -65,10 +65,10 @@
   ],
   "scripts": {
     "prebuild": "rimraf .temp dist",
-    "build": "yarn compile:sass && yarn postcss && yarn generate:types",
+    "build": "pnpm compile:sass && pnpm postcss && pnpm generate:types",
     "compile:sass": "sass scss:.temp/general --style compressed",
-    "dev": "nodemon -e scss,js -x \"yarn build\"",
-    "generate:types": "yarn generate:types:unprefixed && yarn generate:types:prefixed",
+    "dev": "nodemon -e scss,js -x \"pnpm build\"",
+    "generate:types": "pnpm generate:types:unprefixed && pnpm generate:types:prefixed",
     "generate:types:prefixed": "cd dist && typed-scss-modules \"**/*.css\" --exportType default --outputFolder ../dist/types --nameFormat kebab",
     "generate:types:unprefixed": "cd scss && typed-scss-modules \"**/*.scss\" --exportType default --outputFolder ../dist/types_unprefixed --nameFormat kebab --exportTypeName UnprefixedClassNames",
     "postcss": "postcss \".temp/**/*.css\" --base .temp -d ./dist",