Migrate SDK to connect-es (#368)

Makefile

@@ -31,7 +31,7 @@ test-watch: $(node_modules) build-buf
 lint: $(node_modules) build-buf
 	npm run lint
 	npm run typecheck
-	npm run check
+	npm run check -- --ignore=@bufbuild/protobuf
 
 .PHONY: format
 format: $(node_modules)

buf.gen.yaml

@@ -1,15 +1,8 @@
 version: v1
+managed:
+  enabled: true
 plugins:
-  - name: js
+  - plugin: buf.build/connectrpc/es:v1.5.0
     out: src/gen
-    opt:
-      - import_style=commonjs
-  - name: grpc-web
+  - plugin: buf.build/bufbuild/es:v1.10.0
     out: src/gen
-    opt:
-      - import_style=commonjs
-      - mode=grpcwebtext
-  - name: ts
-    out: src/gen
-    opt:
-      - service=grpc-web

doc/dependency_decisions.yml

@@ -27,22 +27,13 @@
     :license_links: https://github.com/bufbuild/buf/blob/main/LICENSE
     :versions: []
     :when: 2023-05-01 18:09:18.081521457 Z
-- - :license
-  - '@improbable-eng/grpc-web'
-  - Apache 2.0
-  - :who:
-    :why: 'TODO(RSDK-583): why is license finder unable to detect this license automatically?'
-    :license_links: https://www.npmjs.com/package/@improbable-eng/grpc-web
-    :versions: []
-    :when: 2023-05-01 18:11:37.804857463 Z
-- - :license
-  - '@improbable-eng/grpc-web-fake-transport'
-  - Apache 2.0
-  - :who:
-    :why: 'TODO(RSDK-583): why is license finder unable to detect this license automatically?'
-    :license_links: https://www.npmjs.com/package/@improbable-eng/grpc-web-fake-transport
-    :versions: []
-    :when: 2023-05-01 18:11:37.804857463 Z
+- - :approve
+  - "@bufbuild/protobuf"
+  - :who: 
+    :why: 
+    :versions:
+    - 1.10.0
+    :when: 2024-09-30 14:52:13.805002459 Z
 - - :license
   - '@typescript-eslint/parser'
   - BSD-2-Clause
@@ -89,14 +80,6 @@
     :license_links: https://github.com/viamrobotics/js-config/blob/main/LICENSE
     :versions: []
     :when: 2023-12-28 23:30:28.297289000 Z
-- - :license
-  - protoc-gen-js
-  - MIT
-  - :who:
-    :why: 'TODO(RSDK-583): why is license finder unable to detect this license automatically?'
-    :license_links: https://github.com/yinzara/protoc-gen-js/blob/master/LICENSE
-    :versions: []
-    :when: 2023-05-12 14:28:29.173104997 Z
 - - :permit
   - ISC
   - :who:

examples/connect-app-teleop-react/src/client.ts

@@ -5,14 +5,11 @@ import {
   createViamClient,
   type AccessToken,
   type Credential,
+  type Credentials,
   type RobotClient,
   type ViamClient,
 } from '@viamrobotics/sdk';
 
-const isAccessToken = (x: Credential | AccessToken): x is AccessToken => {
-  return x.type === 'access-token';
-};
-
 /**
  * Given a set of credentials, get a robot client.
  *
@@ -25,8 +22,7 @@ export const getRobotClient = async (
 ): Promise<RobotClient> => {
   return createRobotClient({
     host: hostname,
-    credential: credentials,
-    authEntity: isAccessToken(credentials) ? '' : credentials.authEntity,
+    credentials,
     signalingAddress: 'https://app.viam.com:443',
     iceServers: [{ urls: 'stun:global.stun.twilio.com:3478' }],
   });
@@ -39,10 +35,10 @@ export const getRobotClient = async (
  * @returns A viam client
  */
 export const getViamClient = async (
-  credentials: AccessToken | Credential
+  credentials: Credentials
 ): Promise<ViamClient> => {
   return createViamClient({
-    credential: credentials,
+    credentials,
   });
 };
 

examples/connect-app-teleop-react/src/components/locations-list.tsx

@@ -3,13 +3,13 @@ import { useEffect, useState } from 'react';
 
 export interface LocationsListProps {
   appClient: AppClient;
-  organization: appApi.Organization.AsObject
-  onLocationSelected: (location: appApi.Location.AsObject) => unknown;
+  organization: appApi.Organization
+  onLocationSelected: (location: appApi.Location) => unknown;
 }
 
 export const LocationsList = ({ appClient, organization, onLocationSelected }: LocationsListProps): JSX.Element => {
 
-  const [locations, setLocations] = useState<appApi.Location.AsObject[]>([]);
+  const [locations, setLocations] = useState<appApi.Location[]>([]);
   useEffect(() => {
     async function getLocations() {
       const locations = await appClient.listLocations(organization.id);

examples/connect-app-teleop-react/src/components/machine-part-control.tsx

@@ -1,12 +1,12 @@
-import { appApi, type AccessToken, type Credential } from '@viamrobotics/sdk';
+import { appApi, type Credentials } from '@viamrobotics/sdk';
 import { useMotionControls } from '../motion';
 import { useRobotClientStore, useStream } from '../state';
 import { MotionArrows } from './motion-arrows';
 import { VideoStream } from './video-stream';
 
 export interface MachinePartControlProps {
-  credentials: Credential | AccessToken;
-  machinePart: appApi.RobotPart.AsObject;
+  credentials: Credentials;
+  machinePart: appApi.RobotPart;
 }
 
 export const MachinePartControl = ({ credentials, machinePart }: MachinePartControlProps): JSX.Element => {

examples/connect-app-teleop-react/src/components/machine-parts-list.tsx

@@ -3,12 +3,12 @@ import { useEffect, useState } from 'react';
 
 export interface MachinesPartsListProps {
   appClient: AppClient;
-  machine: appApi.Robot.AsObject;
-  onMachinePartSelected: (machine: appApi.RobotPart.AsObject) => unknown;
+  machine: appApi.Robot;
+  onMachinePartSelected: (machine: appApi.RobotPart) => unknown;
 }
 
 export const MachinePartsList = ({ appClient, machine, onMachinePartSelected }: MachinesPartsListProps): JSX.Element => {
-  const [machineParts, setMachineParts] = useState<appApi.RobotPart.AsObject[]>([]);
+  const [machineParts, setMachineParts] = useState<appApi.RobotPart[]>([]);
   useEffect(() => {
     async function getMachineParts() {
       const machineParts = await appClient.getRobotParts(machine.id);

examples/connect-app-teleop-react/src/components/machines-list.tsx

@@ -3,12 +3,12 @@ import { useEffect, useState } from 'react';
 
 export interface MachinesListProps {
   appClient: AppClient;
-  location: appApi.Location.AsObject;
-  onMachineSelected: (machine: appApi.Robot.AsObject) => unknown;
+  location: appApi.Location;
+  onMachineSelected: (machine: appApi.Robot) => unknown;
 }
 
 export const MachinesList = ({ appClient, location, onMachineSelected }: MachinesListProps): JSX.Element => {
-  const [machines, setMachines] = useState<appApi.Robot.AsObject[]>([]);
+  const [machines, setMachines] = useState<appApi.Robot[]>([]);
   useEffect(() => {
     async function getMachines() {
       const machines = await appClient.listRobots(location.id);

examples/connect-app-teleop-react/src/components/orgs-list.tsx

@@ -3,12 +3,12 @@ import { useEffect, useState } from 'react';
 
 export interface OrganizationsListProps {
   appClient: AppClient;
-  onOrganizationSelected: (organization: appApi.Organization.AsObject) => unknown;
+  onOrganizationSelected: (organization: appApi.Organization) => unknown;
 }
 
 export const OrganizationsList = ({ appClient, onOrganizationSelected }: OrganizationsListProps): JSX.Element => {
 
-  const [organizations, setOrganizations] = useState<appApi.Organization.AsObject[]>([]);
+  const [organizations, setOrganizations] = useState<appApi.Organization[]>([]);
   useEffect(() => {
     async function getLocations() {
       const organizations = await appClient.listOrganizations();

examples/connect-app-teleop-react/src/state.ts

@@ -148,31 +148,31 @@ interface BrowserStateOrganizations {
 interface BrowserStateLocations {
   key: BrowserStateKey.Locations;
   appClient: AppClient;
-  organization: appApi.Organization.AsObject;
+  organization: appApi.Organization;
 }
 
 interface BrowserStateMachines {
   key: BrowserStateKey.Machines;
   appClient: AppClient;
-  organization: appApi.Organization.AsObject;
-  location: appApi.Location.AsObject;
+  organization: appApi.Organization;
+  location: appApi.Location;
 }
 
 interface BrowserStateMachineParts {
   key: BrowserStateKey.MachineParts;
   appClient: AppClient;
-  location: appApi.Location.AsObject;
-  organization: appApi.Organization.AsObject;
-  machine: appApi.Robot.AsObject;
+  location: appApi.Location;
+  organization: appApi.Organization;
+  machine: appApi.Robot;
 }
 
 interface BrowserStateControlMachinePart {
   key: BrowserStateKey.ControlMachinePart;
   appClient: AppClient;
-  organization: appApi.Organization.AsObject;
-  location: appApi.Location.AsObject;
-  machine: appApi.Robot.AsObject;
-  machinePart: appApi.RobotPart.AsObject;
+  organization: appApi.Organization;
+  location: appApi.Location;
+  machine: appApi.Robot;
+  machinePart: appApi.RobotPart;
 }
 
 export type BrowserState =
@@ -309,9 +309,9 @@ export class BrowserStateStore {
       | BrowserStateMachines
       | BrowserStateMachineParts
       | BrowserStateControlMachinePart
-  ): (organization: appApi.Organization.AsObject) => void {
+  ): (organization: appApi.Organization) => void {
     this.validateState(currentState);
-    return (organization: appApi.Organization.AsObject) => {
+    return (organization: appApi.Organization) => {
       this.onNewState({
         key: BrowserStateKey.Locations,
         appClient: currentState.appClient,
@@ -326,9 +326,9 @@ export class BrowserStateStore {
       | BrowserStateMachines
       | BrowserStateMachineParts
       | BrowserStateControlMachinePart
-  ): (location: appApi.Location.AsObject) => void {
+  ): (location: appApi.Location) => void {
     this.validateState(currentState);
-    return (location: appApi.Location.AsObject) => {
+    return (location: appApi.Location) => {
       this.onNewState({
         key: BrowserStateKey.Machines,
         appClient: currentState.appClient,
@@ -343,9 +343,9 @@ export class BrowserStateStore {
       | BrowserStateMachines
       | BrowserStateMachineParts
       | BrowserStateControlMachinePart
-  ): (machine: appApi.Robot.AsObject) => void {
+  ): (machine: appApi.Robot) => void {
     this.validateState(currentState);
-    return (machine: appApi.Robot.AsObject) => {
+    return (machine: appApi.Robot) => {
       this.onNewState({
         key: BrowserStateKey.MachineParts,
         appClient: currentState.appClient,
@@ -358,9 +358,9 @@ export class BrowserStateStore {
 
   public onMachinePartSelected(
     currentState: BrowserStateMachineParts | BrowserStateControlMachinePart
-  ): (part: appApi.RobotPart.AsObject) => void {
+  ): (part: appApi.RobotPart) => void {
     this.validateState(currentState);
-    return (part: appApi.RobotPart.AsObject) => {
+    return (part: appApi.RobotPart) => {
       this.onNewState({
         key: BrowserStateKey.ControlMachinePart,
         appClient: currentState.appClient,

examples/connect-app/src/main.ts

@@ -6,7 +6,7 @@ const API_KEY_SECRET = import.meta.env.VITE_API_KEY_SECRET;
 
 async function connect(): Promise<VIAM.ViamClient> {
   const opts: VIAM.ViamClientOptions = {
-    credential: {
+    credentials: {
       type: 'api-key',
       authEntity: API_KEY_ID,
       payload: API_KEY_SECRET,