Typing problem with schemas and TypeScript

[laaketeknikko]

I am creating the store as follows, using React and the provider:

import * as tinybase from "tinybase/debug/with-schemas"
import * as tinybaseReactDebug from "tinybase/debug/ui-react"
import * as tinybaseDomDebug from "tinybase/debug/ui-react-dom"
import { tablesSchema, valuesSchema } from "./tinybase/schemas.ts"

const tinybaseStore = tinybase.createStore()

const typedStore = tinybaseStore.setSchema(tablesSchema, valuesSchema)

typedStore.setTable("blockArguments", {
   values: {
      blockWidth: 10,
      blockHeight: 10,
      blocksPerRow: 10,
      blocksPerColumn: 10,
      widthSections: 12,
      heightSections: 12,
      bumpMapHeight: 64,
      bumpMapWidth: 64,
   },
})

ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
      <tinybaseReactDebug.Provider store={typedStore}>
         <tinybaseDomDebug.StoreInspector />
         <App />
      </tinybaseReactDebug.Provider>
   </React.StrictMode>,
)

Schemas:

const tablesSchema = {
   blockArguments: {
      blockWidth: { type: "number", default: 10 },
      blockHeight: { type: "number", default: 10 },
      blocksPerRow: { type: "number", default: 10 },
      blocksPerColumn: { type: "number", default: 10 },
      widthSections: { type: "number", default: 12 },
      heightSections: { type: "number", default: 12 },
      bumpMapHeight: { type: "number", default: 64 },
      bumpMapWidth: { type: "number", default: 64 },
   },
} as const

const valuesSchema = {
   name: { type: "number" },
} as const

export { tablesSchema, valuesSchema }

TypeScript gives me the following error on the store:

Type 'Store<[{ readonly blockArguments: { readonly blockWidth: { readonly type: "number"; readonly default: 10; }; readonly blockHeight: { readonly type: "number"; readonly default: 10; }; readonly blocksPerRow: { readonly type: "number"; readonly default: 10; }; ... 4 more ...; readonly bumpMapWidth: { ...; }; }; }, { .....' is not assignable to type 'Store'.
  Types of property 'setCell' are incompatible.
    Type '<TableId extends "blockArguments", CellId extends Exclude<keyof { readonly blockArguments: { readonly blockWidth: { readonly type: "number"; readonly default: 10; }; readonly blockHeight: { readonly type: "number"; readonly default: 10; }; ... 5 more ...; readonly bumpMapWidth: { ...; }; }; }[TableId] & string, numb...' is not assignable to type '(tableId: string, rowId: string, cellId: string, cell: Cell | MapCell) => Store'.
      Types of parameters 'cell' and 'cell' are incompatible.
        Type 'Cell | MapCell' is not assignable to type 'number | MapCell<{ readonly blockArguments: { readonly blockWidth: { readonly type: "number"; readonly default: 10; }; readonly blockHeight: { readonly type: "number"; readonly default: 10; }; readonly blocksPerRow: { ...; }; ... 4 more ...; readonly bumpMapWidth: { ...; }; }; }, "blockArguments", "blockWidth" | ......'.
          Type 'string' is not assignable to type 'number | MapCell<{ readonly blockArguments: { readonly blockWidth: { readonly type: "number"; readonly default: 10; }; readonly blockHeight: { readonly type: "number"; readonly default: 10; }; readonly blocksPerRow: { ...; }; ... 4 more ...; readonly bumpMapWidth: { ...; }; }; }, "blockArguments", "blockWidth" | ......'.ts(2322)
ui-react.d.ts(11028, 12): The expected type comes from property 'store' which is declared here on type 'IntrinsicAttributes & ProviderProps & { children: ReactNode; }'

If I import from tinybase/debug/ui-react/with-schemas, TypeScript tells me there's no Provider.

Elsewhere I am doing:

const tinybaseSchemaHooks =
   tinybaseReactDebug as tinybaseReactDebug.WithSchemas<
      [typeof tablesSchema, typeof valuesSchema]
   >

...

const blockArguments = tinybaseSchemaHooks.useTable("blockArguments")

const func = tinybaseSchemaHooks.useSetCellCallback(
      "blockArguments",
      "values",
      "blocksPerRow",
      () => 20,
      [],
   )
   func()

it sets the value and I get no TypeScript errors. It reads the value and I get no TypeScript errors. So, it works, as far as I'm aware, and TypeScript gives no grief in the actual usage.

What I am going wrong?

Using TypeScript 5.4.2 and tinybase 4.7.1

As an aside, I have to say the setup for this library is quite convoluted for TypeScript + React, at least as a beginner programmer. It honestly took me many hours. I did not start from the template, though. But, when it's all done, it's quite simple really, so it might just be the documentation.

[jamesgpearce]

OK! I can take a look at this. Do you have a small repo I can fork to make it work for you?

And thanks for the feedback overall!