fix: Fix client types & move BoardProps to React package

[delucis]

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:

   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.

[delucis]

@nicolodavis Tests are failing pretty catastrophically, but I can’t see what’s different between the changes here and the successful test runs on the main branch. Any pointers?

[delucis]

FWIW, I found this: babel/babel#11427 (comment)

This suggests updating Babel to ^7.9.0 for compatibility with newer Node versions (and to fix this error). Should I give that a go?

[nicolodavis]

@delucis OK, let's try that.

Sorry I haven't had a chance to look at this yet.

[delucis]

@nicolodavis Did you say you had been using a working Svelte & Typescript combo for Boardgame Lab?

I suspect the slightly hacky patches I’ve been chasing here to get Svelte and the TS client to talk nice aren’t going to work and wonder if there’s a better tooling solution (preprocessing Svelte to TSX before it hits the Typescript compiler maybe?)

I’ve tried reading up about this, but TS support seems pretty new to Svelte and I’m finding it hard to find reliable solutions (most seem to be focused on using TS inside your <script> in Svelte files).

[nicolodavis]

On Boardgame Lab I'm using Svelte components and importing TypeScript files inside them.

I think we're dealing with the reverse here (trying to import a Svelte component into a TypeScript file). Your intuition is correct that we should be processing Svelte before the TypeScript compiler sees it. Does reversing the order in which the Svelte and TypeScript processors are defined in the Rollup config fix this?

[delucis]

Does reversing the order in which the Svelte and TypeScript processors are defined in the Rollup config fix this?

That doesn’t seem to be sufficient — although it’s possible I’m just not quite getting everything to click. I’ve opened sveltejs/language-tools#288 to see if there’s a standard solution.

Edit: No luck there, posted to StackOverflow to see if anyone has a good answer.

[delucis]

@nicolodavis OK — thanks to some feedback from Rich Harris over on StackOverflow — I think I have this working. Svelte needs to be a direct dependency, so that its type declarations are available for TS users. Then, we import Svelte in types.ts, thereby hoisting its ambient module declaration for *.svelte. This means we can import Svelte files directly in Typescript files and it “just works”™.

[nicolodavis]

Nice work @delucis!