fix: Fix client types & move BoardProps to React package (#752)

* refactor(packages): Expose BoardProps type via 'boardgame.io/react'

BoardProps depends on some types from `@types/react`, which won’t be 
installed for TS users not using React, so exporting it from the 
top-level `'boardgame.io'` module causes errors for those users.

* refactor(client): Structure debug types to output a .d.ts file

This places the Svelte Debug component type definition in an index.ts 
alongside the index.js that re-exports the Svelte component.

* Revert "refactor(client): Structure debug types to output a .d.ts file"

This reverts commit e8f0735.

* refactor(client): Add svelte types to tsconfig, typing `.svelte` files

* refactor(packages): Convert debug package to TS

* feat(types): Hoist ambient  declaration in main types file

* chore(deps): Make Svelte a dependency

For TS users, Svelte needs to be installed so its ambient types can be 
used.

* build(tsconfig): Remove `types` field

Now the Svelte types are imported in `src/types.ts`, we don’t need to 
tell `tsc` about them in `tsconfig`.

Author: delucis

package-lock.json

@@ -139,7 +139,6 @@
     "style-loader": "^0.18.2",
     "superagent": "^3.8.3",
     "supertest": "^3.1.0",
-    "svelte": "^3.12.1",
     "svelte-icons": "^1.1.0",
     "tempy": "^0.5.0",
     "ts-jest": "^24.0.2",
@@ -161,6 +160,7 @@
     "redux": "^4.0.0",
     "shortid": "^2.2.14",
     "socket.io": "^2.1.1",
+    "svelte": "^3.24.0",
     "ts-toolbelt": "^6.3.6",
     "uuid": "3.2.1"
   },

package.json

@@ -6,7 +6,7 @@
  * https://opensource.org/licenses/MIT.
  */
 
-import { Client } from '../src/client/react';
+import { Client, BoardProps } from '../src/client/react';
 import Lobby from '../src/lobby/react';
 
-export { Client, Lobby };
+export { Client, BoardProps, Lobby };

packages/debug.js packages/debug.tspackages/debug.js renamed to packages/debug.ts

@@ -69,12 +69,6 @@ export default [
   {
     input: subpackages.reduce((obj, name) => {
       obj[name] = `packages/${name}.ts`;
-
-      // The debug package can't be converted to TS
-      // yet due to the svelte import.
-      if (name == 'debug') {
-        obj[name] = 'packages/debug.js';
-      }
       return obj;
     }, {}),
     external,

packages/react.ts

@@ -15,7 +15,7 @@ import { Transport } from './transport/transport';
 import { LocalTransport, Local } from './transport/local';
 import { SocketIOTransport, SocketIO } from './transport/socketio';
 import { update, sync, makeMove, gameEvent } from '../core/action-creators';
-import Debug from './debug';
+import Debug from './debug/Debug.svelte';
 import { error } from '../core/logger';
 import { LogEntry, State, SyncInfo } from '../types';
 

rollup.config.js

@@ -16,7 +16,7 @@ import {
 import * as Actions from '../core/action-types';
 import * as ActionCreators from '../core/action-creators';
 import { ProcessGameConfig } from '../core/game';
-import Debug from './debug';
+import Debug from './debug/Debug.svelte';
 import { CreateGameReducer } from '../core/reducer';
 import { InitializeGame } from '../core/initialize';
 import { Transport, TransportOpts } from './transport/transport';
@@ -35,16 +35,10 @@ import {
 type ClientAction = ActionShape.Reset | ActionShape.Sync | ActionShape.Update;
 type Action = CredentialedActionShape.Any | ClientAction;
 
-// TODO: Replace these types with the full debug interface.
-// These types only specify the known interface used by a client instance.
-declare class DebugPanel {
-  constructor(opts: { target: HTMLElement; props: { client: _ClientImpl } });
-  $destroy: () => void;
-}
-type Debug = {
+interface DebugOpt {
   target?: HTMLElement;
-  impl?: typeof DebugPanel;
-};
+  impl?: typeof Debug;
+}
 
 /**
  * createDispatchers
@@ -93,7 +87,7 @@ export const createPluginDispatchers = createDispatchers.bind(null, 'plugin');
 
 export interface ClientOpts<G extends any = any> {
   game: Game<G>;
-  debug?: Debug | boolean;
+  debug?: DebugOpt | boolean;
   numPlayers?: number;
   multiplayer?: (opts: TransportOpts) => Transport;
   gameID?: string;
@@ -106,8 +100,8 @@ export interface ClientOpts<G extends any = any> {
  * Implementation of Client (see below).
  */
 export class _ClientImpl<G extends any = any> {
-  private debug?: Debug | boolean;
-  private _debugPanel?: DebugPanel | null;
+  private debug?: DebugOpt | boolean;
+  private _debugPanel?: Debug | null;
   private gameStateOverride?: any;
   private initialState: State<G>;
   private multiplayer: (opts: TransportOpts) => Transport;
@@ -329,7 +323,7 @@ export class _ClientImpl<G extends any = any> {
     this.transport.connect();
     this._running = true;
 
-    let debugImpl: Debug['impl'] | null = null;
+    let debugImpl: DebugOpt['impl'] | null = null;
 
     if (process.env.NODE_ENV !== 'production') {
       debugImpl = Debug;

src/client/client.test.ts

@@ -1,6 +1,7 @@
 import { Object } from 'ts-toolbelt';
 import Koa from 'koa';
 import { Store as ReduxStore } from 'redux';
+import 'svelte';
 import * as ActionCreators from './core/action-creators';
 import { Flow } from './core/flow';
 import { CreateGameReducer } from './core/reducer';
@@ -10,7 +11,6 @@ import { EventsAPI } from './plugins/plugin-events';
 import { RandomAPI } from './plugins/plugin-random';
 
 export { StorageAPI };
-export { BoardProps } from './client/react';
 
 export type AnyFn = (...args: any[]) => any;