export agora-rtc-sdk-ng

.github/workflows/publish.yml

@@ -3,15 +3,14 @@ name: Publish to NPM
 on:
   workflow_dispatch:
     inputs:
-      increment:
-        description: 'Increment "major", "minor", "patch", or "pre*" version; or specify version [default: "patch"]'
+      package:
+        type: choice
+        description: "choose package"
+        default: "agora-rtc-react"
         required: true
-        default: "patch"
-        type: string
-      releases:
-        description: "create Releases, choose false if specify version"
-        default: true
-        type: boolean
+        options:
+          - agora-rtc-react
+          - agora-rtc-react-ui
       dry-run:
         description: "Do not touch or write anything, but show the commands"
         default: true
@@ -39,11 +38,16 @@ jobs:
         run: |
           npm set "//registry.npmjs.org/:_authToken" ${{ secrets.NPM_TOKEN }}
 
+      - name: Get Package Info
+        run: |
+          version=$(node -p "require('./packages/${{ inputs.package }}/package.json').version")
+          echo "version=${version}" >> $GITHUB_ENV
+
       - name: Dry Run Release
         if: ${{ inputs.dry-run }}
         run: |
           npm whoami
-          pnpm -F agora-rtc-react release ${{ inputs.increment }} -d --ci
+          pnpm -F agora-rtc-react release ${{ env.version }} -d --ci
 
       - name: Config Git
         if: ${{ !inputs.dry-run }}
@@ -54,14 +58,9 @@ jobs:
       - name: Update CHANGELOG.md
         if: ${{ !inputs.dry-run }}
         run: |
-          pnpm release ${{ inputs.increment }} --ci --no-git.tag --no-github.release --npm.allowSameVersion
-
-      - name: Update VERSION
-        if: ${{ !inputs.dry-run }}
-        run: |
-          pnpm -F agora-rtc-react exec esbuild-dev $PWD/scripts/release/update-version.ts target:agora-rtc-react @${{ inputs.increment }}
+          pnpm release ${{ env.version }} --ci --no-git.tag --no-github.release --npm.allowSameVersion
 
       - name: NPM Publish
         if: ${{ !inputs.dry-run }}
         run: |
-          pnpm -F agora-rtc-react release ${{ inputs.increment }} --ci --github.release=${{ inputs.releases }}
+          pnpm -F agora-rtc-react release ${{ inputs.increment }} --ci

.github/workflows/publishCDN.yml

@@ -1,4 +1,4 @@
-name: Publish
+name: Github Releases Artifact/CDN
 
 on:
   workflow_dispatch:
@@ -15,6 +15,10 @@ on:
         description: "upload to cdn"
         default: true
         type: boolean
+      tag:
+        description: "Github TAG, eg: 1.0.0 (no 'v')"
+        required: false
+        type: string
       release_type:
         description: "The release type of CDN, staging or sdk"
         default: "staging"
@@ -43,17 +47,25 @@ jobs:
           pnpm run build
 
       - name: Get Package Info
+        if: ${{ !inputs.tag }}
         run: |
           version=$(node -p "require('./packages/${{ inputs.package }}/package.json').version")
           echo "version=${version}" >> $GITHUB_ENV
 
+      - name: Get Package Info
+        if: ${{ inputs.tag }}
+        run: |
+          version=${{ inputs.tag }}
+          echo "version=${version}" >> $GITHUB_ENV
+
       - name: upload iife to github release
         run: |
           gh release upload v${{ env.version }} ./packages/${{ inputs.package }}/dist/${{ inputs.package }}.iife.js --clobber
 
       - name: Prepare CDN Publish agora-rtc-react
         if: ${{ inputs.cdn }}
         run: |
+          mv ./packages/${{ inputs.package }}/dist/${{ inputs.package }}.iife.js ./packages/${{ inputs.package }}/dist/${{ inputs.package }}.${{ env.version }}.js
           GITHUB_RELEASE_DOWNLOAD_PREFIX=https://github.com/AgoraIO-Extensions/agora-rtc-react/releases/download
           GITHUB_RELEASE_AGORA_RTC_REACT_PACKAGE_DOWNLOAD_URL="${GITHUB_RELEASE_DOWNLOAD_PREFIX}/v${{ env.version }}/${{ inputs.package }}.iife.js"
           echo "GITHUB_RELEASE_AGORA_RTC_REACT_PACKAGE_DOWNLOAD_URL=${GITHUB_RELEASE_AGORA_RTC_REACT_PACKAGE_DOWNLOAD_URL}" >> $GITHUB_ENV

.github/workflows/upgrade-dep.yml

@@ -43,6 +43,7 @@ jobs:
             echo "CREATE_PR=1" >> "$GITHUB_ENV"
           fi
           pnpm -r exec esbuild-dev $PWD/scripts/upgrade-deps.ts dep:${{ inputs.package-name }} @${{ inputs.package-version }}
+          pnpm -w exec esbuild-dev $PWD/scripts/upgrade-deps.ts dep:${{ inputs.package-name }} @${{ inputs.package-version }}
           pnpm install --no-frozen-lockfile
           # pnpm run test
           if git diff --quiet;

examples/basic/main.tsx

@@ -1,6 +1,6 @@
 import "sanitize.css";
 import "uno.css";
-import AgoraRTC from "agora-rtc-sdk-ng";
+import AgoraRTC from "agora-rtc-react";
 import { StrictMode } from "react";
 import React from "react";
 import ReactDOM from "react-dom/client";

examples/basic/package.json

@@ -13,7 +13,6 @@
     "@ant-design/icons": "^5.2.4",
     "agora-rtc-react": "workspace:*",
     "agora-rtc-react-ui": "workspace:*",
-    "agora-rtc-sdk-ng": "4.19.2",
     "antd": "^5.6.4",
     "clsx": "^1.2.1",
     "crypto-js": "^4.2.0",

examples/basic/src/components/Client.tsx

@@ -1,6 +1,5 @@
-import { AgoraRTCProvider } from "agora-rtc-react";
-import type { ClientConfig } from "agora-rtc-sdk-ng";
-import AgoraRTC from "agora-rtc-sdk-ng";
+import type { ClientConfig } from "agora-rtc-react";
+import AgoraRTC, { AgoraRTCProvider } from "agora-rtc-react";
 import type { ReactNode } from "react";
 import { useState } from "react";
 

examples/basic/src/components/LocalTracks.tsx

@@ -1,5 +1,5 @@
+import type { ICameraVideoTrack, IMicrophoneAudioTrack, UID } from "agora-rtc-react";
 import { CameraVideoTrack, MicrophoneAudioTrack } from "agora-rtc-react-ui";
-import type { ICameraVideoTrack, IMicrophoneAudioTrack, UID } from "agora-rtc-sdk-ng";
 
 export interface LocalTracksProps {
   uid: UID;

examples/basic/src/components/RemoteUsers.tsx

@@ -1,5 +1,5 @@
+import type { IRemoteVideoTrack } from "agora-rtc-react";
 import { RemoteVideoPlayer } from "agora-rtc-react-ui";
-import type { IRemoteVideoTrack } from "agora-rtc-sdk-ng";
 
 import { fakeAvatar, fakeName } from "../utils";
 

examples/basic/src/components/ScreenShare.tsx

@@ -1,13 +1,12 @@
-import {
+import type { ILocalAudioTrack, ILocalTrack, ILocalVideoTrack } from "agora-rtc-react";
+import AgoraRTC, {
   AgoraRTCScreenShareProvider,
   LocalAudioTrack,
   LocalVideoTrack,
   useJoin,
   usePublish,
   useTrackEvent,
 } from "agora-rtc-react";
-import type { ILocalAudioTrack, ILocalTrack, ILocalVideoTrack } from "agora-rtc-sdk-ng";
-import AgoraRTC from "agora-rtc-sdk-ng";
 import { useEffect, useState } from "react";
 
 import { appConfig } from "../utils";

examples/basic/src/pages/advanced/multi-channel/store.ts

@@ -1,5 +1,5 @@
-import type { IAgoraRTCClient, ILocalAudioTrack, ILocalVideoTrack } from "agora-rtc-sdk-ng";
-import AgoraRTC from "agora-rtc-sdk-ng";
+import type { IAgoraRTCClient, ILocalAudioTrack, ILocalVideoTrack } from "agora-rtc-react";
+import AgoraRTC from "agora-rtc-react";
 import { create } from "zustand";
 
 import { appConfig, getAgoraTokens } from "../../../utils";

examples/basic/src/pages/advanced/switch-layout/index.tsx

@@ -1,12 +1,12 @@
 import "./index.scss";
+import type { IRemoteVideoTrack } from "agora-rtc-react";
 import {
   useJoin,
   useRemoteAudioTracks,
   useRemoteUsers,
   useRemoteVideoTracks,
 } from "agora-rtc-react";
 import { RemoteVideoPlayer } from "agora-rtc-react-ui";
-import type { IRemoteVideoTrack } from "agora-rtc-sdk-ng";
 import { Button, Typography } from "antd";
 import { useState } from "react";
 

examples/basic/src/pages/component/RemoteAudioTrack/index.tsx

@@ -1,5 +1,5 @@
+import type { IRemoteAudioTrack } from "agora-rtc-react";
 import { RemoteAudioTrack, useJoin, useRemoteAudioTracks, useRemoteUsers } from "agora-rtc-react";
-import type { IRemoteAudioTrack } from "agora-rtc-sdk-ng";
 import { Button, Typography } from "antd";
 import { useEffect, useState } from "react";
 

examples/basic/src/pages/component/RemoteUser/index.tsx

@@ -1,5 +1,5 @@
+import type { IAgoraRTCRemoteUser, UID } from "agora-rtc-react";
 import { RemoteUser, useJoin, useRemoteUsers } from "agora-rtc-react";
-import type { IAgoraRTCRemoteUser, UID } from "agora-rtc-sdk-ng";
 import { Button, Typography } from "antd";
 import { useEffect, useMemo, useState } from "react";
 

examples/basic/src/pages/component/RemoteVideoTrack/index.tsx

@@ -1,5 +1,5 @@
+import type { IRemoteVideoTrack } from "agora-rtc-react";
 import { RemoteVideoTrack, useJoin, useRemoteUsers, useRemoteVideoTracks } from "agora-rtc-react";
-import type { IRemoteVideoTrack } from "agora-rtc-sdk-ng";
 import { Button, Typography } from "antd";
 import { useEffect, useState } from "react";
 

examples/basic/src/pages/hook/useJoin/index.tsx

@@ -1,11 +1,11 @@
+import type { IRemoteVideoTrack } from "agora-rtc-react";
 import {
   useJoin,
   useRemoteAudioTracks,
   useRemoteUsers,
   useRemoteVideoTracks,
 } from "agora-rtc-react";
 import { RemoteVideoPlayer } from "agora-rtc-react-ui";
-import type { IRemoteVideoTrack } from "agora-rtc-sdk-ng";
 import { Typography } from "antd";
 import { useState } from "react";
 

examples/basic/src/pages/hook/useLocalScreenTrack/index.tsx

@@ -1,11 +1,11 @@
+import type { ILocalAudioTrack, ILocalTrack, ILocalVideoTrack } from "agora-rtc-react";
 import {
   LocalVideoTrack,
   useJoin,
   useLocalScreenTrack,
   usePublish,
   useTrackEvent,
 } from "agora-rtc-react";
-import type { ILocalAudioTrack, ILocalTrack, ILocalVideoTrack } from "agora-rtc-sdk-ng";
 import { Button, Typography } from "antd";
 import { useEffect, useState } from "react";
 

examples/basic/src/pages/hook/usePublish/index.tsx

@@ -1,3 +1,4 @@
+import type { IRemoteVideoTrack } from "agora-rtc-react";
 import {
   useCurrentUID,
   useJoin,
@@ -9,7 +10,6 @@ import {
   useRemoteVideoTracks,
 } from "agora-rtc-react";
 import { LocalMicrophoneAndCameraUser, RemoteVideoPlayer } from "agora-rtc-react-ui";
-import type { IRemoteVideoTrack } from "agora-rtc-sdk-ng";
 import { useMemo, useState } from "react";
 
 import { AutoLayout, Container, Label, MediaControl, UsersInfo } from "../../../components";

examples/basic/src/utils/const.ts

@@ -1,4 +1,4 @@
-import type { UID } from "agora-rtc-sdk-ng";
+import type { UID } from "agora-rtc-react";
 import CryptoJS from "crypto-js";
 
 let appId = import.meta.env.AGORA_APPID;

examples/basic/src/utils/fake.ts

@@ -1,5 +1,5 @@
 import { randFirstName, seed } from "@ngneat/falso";
-import type { UID } from "agora-rtc-sdk-ng";
+import type { UID } from "agora-rtc-react";
 
 import { appConfig } from "./const";
 

examples/mobx/index.html

@@ -10,8 +10,7 @@
     <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 
-    <script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.18.0.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/agora-rtc-react.iife.js"></script>
+    <script src="https://github.com/AgoraIO-Extensions/agora-rtc-react/releases/download/v2.0.0-beta.0/agora-rtc-react.iife.js"></script>
 
     <script type="module" src="/src/main.tsx"></script>
   </body>

examples/mobx/package.json

@@ -12,7 +12,6 @@
     "@ngneat/falso": "^6.4.0",
     "agora-rtc-react": "workspace:*",
     "agora-rtc-react-ui": "workspace:*",
-    "agora-rtc-sdk-ng": "4.19.2",
     "clsx": "^1.2.1",
     "crypto-js": "^4.2.0",
     "mobx": "^6.10.0",

examples/mobx/src/stores/app.store.ts

@@ -1,5 +1,5 @@
-import type { IAgoraRTCClient } from "agora-rtc-sdk-ng";
-import AgoraRTC from "agora-rtc-sdk-ng";
+import type { IAgoraRTCClient } from "agora-rtc-react";
+import AgoraRTC from "agora-rtc-react";
 import { makeAutoObservable } from "mobx";
 
 import { ShareScreen } from "./share-screen.store";

examples/mobx/src/stores/local-user.store.ts

@@ -3,8 +3,8 @@ import type {
   ICameraVideoTrack,
   IMicrophoneAudioTrack,
   UID,
-} from "agora-rtc-sdk-ng";
-import AgoraRTC from "agora-rtc-sdk-ng";
+} from "agora-rtc-react";
+import AgoraRTC from "agora-rtc-react";
 import { makeAutoObservable } from "mobx";
 
 import { fakeAvatar, fakeName } from "../utils";

examples/mobx/src/stores/remote-user.store.ts

@@ -3,7 +3,7 @@ import type {
   IRemoteAudioTrack,
   IRemoteVideoTrack,
   UID,
-} from "agora-rtc-sdk-ng";
+} from "agora-rtc-react";
 import { makeAutoObservable } from "mobx";
 
 import { fakeAvatar, fakeName } from "../utils";

examples/mobx/src/stores/share-screen.store.ts

@@ -1,4 +1,3 @@
-import { listen } from "agora-rtc-react/src/misc/listen";
 import type {
   IAgoraRTCClient,
   ILocalAudioTrack,
@@ -8,8 +7,9 @@ import type {
   IRemoteTrack,
   IRemoteVideoTrack,
   UID,
-} from "agora-rtc-sdk-ng";
-import AgoraRTC from "agora-rtc-sdk-ng";
+} from "agora-rtc-react";
+import AgoraRTC from "agora-rtc-react";
+import { listen } from "agora-rtc-react/src/misc/listen";
 import { makeAutoObservable } from "mobx";
 import { SideEffectManager } from "side-effect-manager";
 
@@ -43,7 +43,7 @@ export class ShareScreen {
         return [
           listen(client, "user-published", async (user, mediaType) => {
             if (user.uid !== this.uid || this.enabled) return;
-            const track = await client.subscribe(user, mediaType);
+            const track = (await client.subscribe(user, mediaType)) as IRemoteTrack;
             this.setRemoteTrack(track, mediaType);
           }),
           listen(client, "user-unpublished", (user, mediaType) => {

examples/mobx/src/stores/users.store.ts

@@ -1,5 +1,5 @@
+import type { IAgoraRTCClient, IAgoraRTCRemoteUser, UID } from "agora-rtc-react";
 import { listen } from "agora-rtc-react/src/misc/listen";
-import type { IAgoraRTCClient, IAgoraRTCRemoteUser, UID } from "agora-rtc-sdk-ng";
 import { makeAutoObservable, observable } from "mobx";
 import { SideEffectManager } from "side-effect-manager";
 

examples/mobx/src/utils.ts

@@ -1,5 +1,5 @@
 import { randFirstName, seed } from "@ngneat/falso";
-import type { UID } from "agora-rtc-sdk-ng";
+import type { UID } from "agora-rtc-react";
 import type { RefObject } from "react";
 import { useCallback, useEffect, useRef } from "react";
 

examples/mobx/vite.config.ts

@@ -14,8 +14,7 @@ export default defineConfig({
       "react": "React",
       "react-dom": "ReactDOM",
       "react-dom/client": "ReactDOM",
-      "agora-rtc-sdk-ng": "AgoraRTC",
-      "agora-rtc-react": "AgoraRTCReact",
+      "agora-rtc-react": "AgoraRTC",
     }),
   ],
   envPrefix: "AGORA_",

package.json

@@ -16,7 +16,9 @@
     "copy-docs": "esbuild-dev ./scripts/copy-docs.ts",
     "gene-docs": "pnpm -r run gene-docs",
     "typedoc": "pnpm -r run typedoc",
-    "release": "release-it"
+    "release": "release-it",
+    "rtc-version": "pnpm -F agora-rtc-react run version",
+    "rtc-ui-version": "pnpm -F agora-rtc-react-ui run version"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^17.6.7",
@@ -67,7 +69,7 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.7",
     "@types/testing-library__jest-dom": "^5.14.8",
-    "agora-rtc-sdk-ng": "4.19.2",
+    "agora-rtc-sdk-ng": "4.19.3",
     "agora-rtc-sdk-ng-fake": "github:AgoraIO-Extensions/agora-rtc-sdk-ng-fake#semver:^1.0.4",
     "react-test-renderer": "^18.2.0",
     "storybook": "^7.0.26",

packages/agora-rtc-react-ui/package.json

@@ -45,7 +45,8 @@
     "storybook-docs": "storybook dev --docs",
     "build-storybook-docs": "storybook build --docs",
     "test": "vitest run --coverage",
-    "test:watch": "vitest --ui"
+    "test:watch": "vitest --ui",
+    "version": "esbuild-dev ../../scripts/release/update-version.ts agora-rtc-react-ui"
   },
   "peerDependencies": {
     "agora-rtc-react": ">=2",

packages/agora-rtc-react-ui/src/components/CameraVideoTrack.tsx

@@ -1,8 +1,8 @@
 import type { LocalVideoTrackProps } from "agora-rtc-react";
+import type { ICameraVideoTrack } from "agora-rtc-react";
 import { LocalVideoTrack } from "agora-rtc-react";
 import { useAwaited } from "agora-rtc-react/src/hooks/tools";
 import type { MaybePromiseOrNull } from "agora-rtc-react/src/misc/utils";
-import type { ICameraVideoTrack } from "agora-rtc-sdk-ng";
 import { useEffect } from "react";
 
 export interface CameraVideoTrackProps extends LocalVideoTrackProps {