Repository: boardgameio/boardgame.io (ts)

Issue:
Bug to build on release 0.39.14
Hello, everyone.

Recently I installed the version 0.39.14 but I got the following error when building my project.

```
node_modules/boardgame.io/dist/types/src/client/client.d.ts:3:19 - error TS2307: Cannot find module './debug' or its corresponding type declarations.
3 import Debug from './debug';

node_modules/boardgame.io/dist/types/src/client/react.d.ts:1:19 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import React from 'react';

node_modules/boardgame.io/dist/types/src/client/react.d.ts:41:19 - error TS2503: Cannot find namespace 'JSX'.
41         render(): JSX.Element;
```

Pull request:
fix: Fix client types & move BoardProps to React package
Fixes #751 (regressions introduced in #744).

1. Users using strict typechecking would see errors when importing the plain JS client because `import Debug from './debug'` would point to a JS file that isn’t included in `dist/types/src`. ~~I’ve restructured the debug type declaration, moving it to `debug/index.ts` file alongside `debug/index.js`, which re-exports the Svelte component. This outputs an appropriate type declaration and appears to fix errors in test builds.~~ This PR uses the ambient type declaration for `*.svelte` files that Svelte provides to import the Debug component directly again. Svelte is moved to be a direct dependency so Svelte types are available to boardgame.io users.

2. Exporting `BoardProps` (for use in React board components) from the top-level package breaks strict typechecking for non-React users, because they won’t have installed `@types/react`, `@types/prop-types` etc. Instead I’ve moved this to the React package:

    ```ts
    import { Client, BoardProps } from 'boardgame.io/react'
    import { G } from './types';

    const TicTacToeBoard = (props: BoardProps<G>) => null
    ```

3. Because we can now import Svelte components in Typescript, this also removes the exception of the `debug` package not being defined as a `.ts` file.

Patch:
diff --git a/package-lock.json b/package-lock.json
index db0a65f..0871af4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14444,10 +14444,9 @@
       }
     },
     "svelte": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.12.1.tgz",
-      "integrity": "sha512-t29WJNjHIqfrdMcVXqIyRfgLEaNz7MihKXTpb8qHlbzvf0WyOOIhIlwIGvl6ahJ9+9CLJwz0sjhFNAmPgo8BHg==",
-      "dev": true
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.24.0.tgz",
+      "integrity": "sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw=="
     },
     "svelte-icons": {
       "version": "1.1.0",
diff --git a/package.json b/package.json
index 717f6b9..3713c64 100644
--- a/package.json
+++ b/package.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"
   },
diff --git a/packages/debug.js b/packages/debug.ts
similarity index 100%
rename from packages/debug.js
rename to packages/debug.ts
diff --git a/packages/react.ts b/packages/react.ts
index e0b86be..67aef29 100644
--- a/packages/react.ts
+++ b/packages/react.ts
@@ -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 };
diff --git a/rollup.config.js b/rollup.config.js
index d0725b7..e963135 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -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,
diff --git a/src/client/client.ts b/src/client/client.ts
index 6ed98dd..a30ec7c 100644
--- a/src/client/client.ts
+++ b/src/client/client.ts
@@ -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;
diff --git a/src/client/debug/index.js b/src/client/debug/index.js
deleted file mode 100644
index 8a6bda7..0000000
--- a/src/client/debug/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Debug from './Debug.svelte';
-export default Debug;
diff --git a/src/types.ts b/src/types.ts
index ddf42e2..137730d 100644
--- a/src/types.ts
+++ b/src/types.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;
 


Test patch:
diff --git a/src/client/client.test.ts b/src/client/client.test.ts
index d258543..23c9cc6 100644
--- a/src/client/client.test.ts
+++ b/src/client/client.test.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';