with external api.

src/component/internal/api.ts

@@ -1,33 +1,33 @@
 import * as Api from '../api'
 
 export class NekoApi {
-  private readonly _config = new Api.Configuration({
+  public readonly config = new Api.Configuration({
     basePath: location.href.replace(/\/+$/, ''),
     baseOptions: { withCredentials: true },
   })
 
   public setUrl(url: string) {
-    this._config.basePath = url.replace(/\/+$/, '')
+    this.config.basePath = url.replace(/\/+$/, '')
   }
 
   public setToken(token: string) {
-    this._config.accessToken = token
+    this.config.accessToken = token
   }
 
   get url(): string {
-    return this._config.basePath || location.href.replace(/\/+$/, '')
+    return this.config.basePath || location.href.replace(/\/+$/, '')
   }
 
   get session(): SessionApi {
-    return new Api.SessionApi(this._config)
+    return new Api.SessionApi(this.config)
   }
 
   get room(): RoomApi {
-    return new Api.RoomApi(this._config)
+    return new Api.RoomApi(this.config)
   }
 
   get members(): MembersApi {
-    return new Api.MembersApi(this._config)
+    return new Api.MembersApi(this.config)
   }
 }
 

src/component/main.vue

@@ -74,6 +74,9 @@
   export * as StateModels from './types/state'
   import * as EVENT from './types/events'
 
+  import { Configuration } from './api/configuration'
+  import { AxiosInstance } from 'axios'
+
   import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
   import ResizeObserver from 'resize-observer-polyfill'
 
@@ -424,6 +427,10 @@
       this.connection.websocket.send(EVENT.SEND_BROADCAST, { subject, body })
     }
 
+    public withApi<T>(c: new (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) => T): T {
+      return new c(this.api.config)
+    }
+
     public control = new NekoControl(this.connection, this.state.control)
 
     public get room(): RoomApi {