Make more clear typing instructions

[skorphil]

Is your feature request related to a problem? Please describe.
I cant type several stores. Tried different combinations

const tables = {
  "records": tinyBaseJournalSchema,
  "persistentState": tinyBasePersistentStoreSchema
} 

const UiReactWithSchemas = UiReact as UiReact.WithSchemas<  
[typeof tables, NoValuesSchema]>; // not working

const { Provider } = UiReactWithSchemas;

type AppProps = {
  children: ReactElement;
};
export function TinyBaseProvider(props: AppProps) {
  return (
    <Provider
      storesById={{
        records: recordsStore, // not working
        persistentState: persistentStateStore, // not working
      }}
    >

Describe the solution you'd like
Clear example of how to type multitple stores

Additional context
Seems like project is kinda dead but anyway

[jamesgpearce]

At the top of your example you have a single schema with two tables, but then at the bottom, two stores each with one table?

Do you want two tables in one store or two stores with one table each?

(Also not dead! Active development on the v6 beta)

[skorphil]

@jamesgpearce great!
I need 2 stores with different tables inside each. One store - persistent, another - in-memory.

I cant type Provider so it support 2 stores(only type for single store) When i create separate provider for each store, devtools only showing inner provider.

https://discord.com/channels/1027918215323590676/1354426499545169950

[jamesgpearce]

OK, got it!

What I do with more complex apps (eg TinyHub) is have stores typed and initialized in React components (that just render null) and inject themselves into the Provider (with useProvideStore). That means the different typed schema definitions are in different files, and that I can provide dedicated typed hooks (out of the same file) for other parts of the app that need each store.

Also the persistence for each is defined in that one place.

That said, let me see if I can come up with a pattern for you that works for multiple stores in one file.

[jamesgpearce]

I guess the typing really only needs to be present when the store is taken from the context (using getter hooks etc), rather than when it is put in. So on the provider component:

import { Provider } from 'tinybase/ui-react'; // not 'with-schemas'

export function TinyBaseProvider(props: AppProps) {
  return (
    <Provider
      storesById={{
        journalStore,
        stateStore,
      }}
    >{props.children}</Provider>
  );
};

But when you come to use them elsewhere in the app, something like:

import * as UiReact from 'tinybase/ui-react/with-schemas';

const { useCell: useJournalCell } = 
  UiReact as UiReact.WithSchemas<[typeof JournalSchema, NoValuesSchema]>;
const { useCell: useStateCell } = 
  UiReact as UiReact.WithSchemas<[typeof StateSchema, NoValuesSchema]>;

// ...
useJournalCell('journalTable', 'journalRow', 'journalCell', 'journalStore');

useStateCell('stateTable', 'stateRow', 'stateCell', 'stateStore');

Does that make sense?

[skorphil]

I guess the typing really only needs to be present when the store is taken from the context (using getter hooks etc), rather than when it is put in. So on the provider component:

import { Provider } from 'tinybase/ui-react'; // not 'with-schemas'

export function TinyBaseProvider(props: AppProps) {
return (
<Provider
storesById={{
journalStore,
stateStore,
}}
>{props.children}
);
};

But when you come to use them elsewhere in the app, something like:

import * as UiReact from 'tinybase/ui-react/with-schemas';

const { useCell: useJournalCell } =
UiReact as UiReact.WithSchemas<[typeof JournalSchema, NoValuesSchema]>;
const { useCell: useStateCell } =
UiReact as UiReact.WithSchemas<[typeof StateSchema, NoValuesSchema]>;

// ...
useJournalCell('journalTable', 'journalRow', 'journalCell', 'journalStore');

useStateCell('stateTable', 'stateRow', 'stateCell', 'stateStore');

Does that make sense?

I've tried this at first. Its throwing ts error. Thats why i thought i need to use typed <Provider>:

import { Provider } from 'tinybase/ui-react';

recordsStore.setTable("institutions", { row: { country: "eu" } });
persistentStateStore.setTable("appState", { row: { selectedCurrency: "eur" } });


type AppProps = {
  children: ReactElement;
};
export function TinyBaseProvider(props: AppProps) {
  return (
    <Provider storesById={{recordsStore, persistentStateStore}}>
      {/*
      Type 'Store<[{ readonly institutions: { readonly date: { readonly type: "number"; }; readonly name: { readonly type: "string"; }; readonly country: { readonly type: "string"; }; }; readonly assets: { readonly date: { readonly type: "number"; }; ... 5 more ...; readonly description: { ...; }; }; readonly quotes: { ...; }; ...' is not assignable to type 'Store'.
      Type at position 1 in source is not compatible with type at position 1 in target.
      The types returned by 'getContent()' are incompatible between these types.
      Type 'Values<NoValuesSchema, false>' is not assignable to type 'Values'.
      'string' index signatures are incompatible.
      Type 'string | number | boolean | undefined' is not assignable to type 'Value'.
      Type 'undefined' is not assignable to type 'Value'. 
      */}

[skorphil]

OK, got it!

What I do with more complex apps (eg TinyHub) is have stores typed and initialized in React components (that just render null) and inject themselves into the Provider (with useProvideStore). That means the different typed schema definitions are in different files, and that I can provide dedicated typed hooks (out of the same file) for other parts of the app that need each store.

Also the persistence for each is defined in that one place.

That said, let me see if I can come up with a pattern for you that works for multiple stores in one file.

Seems like this is the only way. I'll try your approach soon. Thank you

[jamesgpearce]

import { Provider } from 'tinybase/ui-react';

recordsStore.setTable("institutions", { row: { country: "eu" } });
persistentStateStore.setTable("appState", { row: { selectedCurrency: "eur" } });


type AppProps = {
  children: ReactElement;
};
export function TinyBaseProvider(props: AppProps) {
  return (
    <Provider storesById={{recordsStore, persistentStateStore}}>
      {/*
      Type 'Store<[{ readonly institutions: { readonly date: { readonly type: "number"; }; readonly name: { readonly type: "string"; }; readonly country: { readonly type: "string"; }; }; readonly assets: { readonly date: { readonly type: "number"; }; ... 5 more ...; readonly description: { ...; }; }; readonly quotes: { ...; }; ...' is not assignable to type 'Store'.

That typing error would only show if you were using a .../with-schemas import either for the Store or for the Provider? Maybe you can share the whole file for me?

[skorphil]

That typing error would only show if you were using a .../with-schemas import either for the Store or for the Provider? Maybe you can share the whole file for me?

Yes, i'm typing Store, because this is the point - i want store to be typed, not hooks only.

It seems like your approach with pseudo-react component is the only way to type multiple stores and add them to single provider. Would be nice to have this approach in guides. Now typings are way too tricky ))

[jamesgpearce]

OK, this works for me:

import * as UiReact from 'tinybase/ui-react/with-schemas';
import {type NoValuesSchema, createStore} from 'tinybase/with-schemas';
import React, {ReactNode} from 'react';

type Props = {readonly children: ReactNode};

const TABLES_SCHEMA_1 = {
  table1: {name: {type: 'string', default: ''}},
} as const;
type Schemas1 = [typeof TABLES_SCHEMA_1, NoValuesSchema];
const {useCreateStore: useCreateStore1} =
  UiReact as UiReact.WithSchemas<Schemas1>;

const TABLES_SCHEMA_2 = {
  table2: {happy: {type: 'boolean', default: true}},
} as const;
type Schemas2 = [typeof TABLES_SCHEMA_2, NoValuesSchema];
const {useCreateStore: useCreateStore2} =
  UiReact as UiReact.WithSchemas<Schemas2>;

const {Provider} = UiReact as UiReact.WithSchemas<any>;

export const TwoSchemaProvider = ({children}: Props) => {
  const store1 = useCreateStore1(() =>
    createStore()
      .setTablesSchema(TABLES_SCHEMA_1)
      .setTables({
        table1: {a: {name: 'zero'}, b: {name: 'one'}},
      }),
  );

  const store2 = useCreateStore2(() =>
    createStore()
      .setTablesSchema(TABLES_SCHEMA_2)
      .setTables({
        table2: {a: {happy: true}, b: {happy: false}},
      }),
  );

  return <Provider storesById={{store1, store2}}>{children}</Provider>;
};

In other words, I am casting out of UiReact.WithSchemas three times. One for each schema (aliasing the useCreateStore hook) and then once for the Provider with any as a Schema.

(There's not an immediately obvious way to cast the Provider to accept only a store1 and a store2, so hopefully you'll permit the use of any for the purposes of getting this running!)

Hope this helps. If it's what you were looking for, I can add it to the docs, as per the issue title.

[skorphil]

OK, this works for me:

import * as UiReact from 'tinybase/ui-react/with-schemas';
import {type NoValuesSchema, createStore} from 'tinybase/with-schemas';
import React, {ReactNode} from 'react';

type Props = {readonly children: ReactNode};

const TABLES_SCHEMA_1 = {
table1: {name: {type: 'string', default: ''}},
} as const;
type Schemas1 = [typeof TABLES_SCHEMA_1, NoValuesSchema];
const {useCreateStore: useCreateStore1} =
UiReact as UiReact.WithSchemas;

const TABLES_SCHEMA_2 = {
table2: {happy: {type: 'boolean', default: true}},
} as const;
type Schemas2 = [typeof TABLES_SCHEMA_2, NoValuesSchema];
const {useCreateStore: useCreateStore2} =
UiReact as UiReact.WithSchemas;

const {Provider} = UiReact as UiReact.WithSchemas;

export const TwoSchemaProvider = ({children}: Props) => {
const store1 = useCreateStore1(() =>
createStore()
.setTablesSchema(TABLES_SCHEMA_1)
.setTables({
table1: {a: {name: 'zero'}, b: {name: 'one'}},
}),
);

const store2 = useCreateStore2(() =>
createStore()
.setTablesSchema(TABLES_SCHEMA_2)
.setTables({
table2: {a: {happy: true}, b: {happy: false}},
}),
);

return <Provider storesById={{store1, store2}}>{children};
};

In other words, I am casting out of UiReact.WithSchemas three times. One for each schema (aliasing the useCreateStore hook) and then once for the Provider with any as a Schema.

(There's not an immediately obvious way to cast the Provider to accept only a store1 and a store2, so hopefully you'll permit the use of any for the purposes of getting this running!)

Hope this helps. If it's what you were looking for, I can add it to the docs, as per the issue title.

Thank you! I haven't tried this exact solution - i loved your approach with creating .tsx per each store. I also export store itself from those .tsx files and can use both store.getValue() or useValues() etc.

Types seems very complicated currently. I think i might get some new issues as i go, but for now its working

[skorphil]

OK, this works for me:
import * as UiReact from 'tinybase/ui-react/with-schemas';
import {type NoValuesSchema, createStore} from 'tinybase/with-schemas';
import React, {ReactNode} from 'react';
type Props = {readonly children: ReactNode};
const TABLES_SCHEMA_1 = {
table1: {name: {type: 'string', default: ''}},
} as const;
type Schemas1 = [typeof TABLES_SCHEMA_1, NoValuesSchema];
const {useCreateStore: useCreateStore1} =
UiReact as UiReact.WithSchemas;
const TABLES_SCHEMA_2 = {
table2: {happy: {type: 'boolean', default: true}},
} as const;
type Schemas2 = [typeof TABLES_SCHEMA_2, NoValuesSchema];
const {useCreateStore: useCreateStore2} =
UiReact as UiReact.WithSchemas;
const {Provider} = UiReact as UiReact.WithSchemas;
export const TwoSchemaProvider = ({children}: Props) => {
const store1 = useCreateStore1(() =>
createStore()
.setTablesSchema(TABLES_SCHEMA_1)
.setTables({
table1: {a: {name: 'zero'}, b: {name: 'one'}},
}),
);
const store2 = useCreateStore2(() =>
createStore()
.setTablesSchema(TABLES_SCHEMA_2)
.setTables({
table2: {a: {happy: true}, b: {happy: false}},
}),
);
return <Provider storesById={{store1, store2}}>{children};
};
In other words, I am casting out of UiReact.WithSchemas three times. One for each schema (aliasing the useCreateStore hook) and then once for the Provider with any as a Schema.
(There's not an immediately obvious way to cast the Provider to accept only a store1 and a store2, so hopefully you'll permit the use of any for the purposes of getting this running!)
Hope this helps. If it's what you were looking for, I can add it to the docs, as per the issue title.

Thank you! I haven't tried this exact solution - i loved your approach with creating .tsx per each store. I also export store itself from those .tsx files and can use both store.getValue() or useValues() etc.

Types seems very complicated currently. I think i might get some new issues as i go, but for now its working

Yeah, due to overcomplicated typings i already have a hard time typing values:

const journalUri = usePreferenceValue("currentJournalDirectory");
  const [journal, setJournal] = useState<null | Journal>(null);
  useEffect(() => {
    if (typeof journalUri !== "string") return; // this check doesnt work and i have no idea how to narrow type of journalUri from string | undefined to string
    async function openJournal() {
      const journal = await Journal.open({ directory: journalUri }); // Type 'DefaultedValueFromSchema<{ readonly currentJournalDirectory: { readonly type: "string"; }; readonly selectedCurrency: { readonly type: "string"; }; }, "currentJournalDirectory">' is not assignable to type 'string'.
      // Type 'undefined' is not assignable to type 'string'.ts(2322)
      // Journal.ts(164, 3): The expected type comes from property 'directory' which is declared here on type 'JournalOpenProps'
      setJournal(journal);
    }

export const usePreferenceValue = <ValueId extends ValueIds>(
  valueId: ValueId
) => useValue<ValueId>(valueId, STORE_ID);

[skorphil]

Also is there a way to type indexes being used?

export const journalStoreIndexes = createIndexes(journalStore);

journalStoreIndexes.setIndexDefinition(
  "InstitutionsByDate",
  "institutions",
  "date"
);

export function useJournalSlices(
  indexId: Id // its just a string, i need it to be "InstitutionsByDate" | "otherIndexIAdd"
) {
  useSliceIds(indexId, journalStoreIndexes);
}

[jamesgpearce]

const journalUri = usePreferenceValue("currentJournalDirectory");

This should work assuming ValueIds has been taken from the schema previously, and useValue has been destructured out of the with-schemas version. Something like this:

const STORE_ID = 'preferences';
const VALUES_SCHEMA = {
  currentJournalDirectory: {type: 'string'},
} as const;
type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
const {
  useValue,
  // ...
} = UiReact as UiReact.WithSchemas<Schemas>;
type ValueIds = keyof typeof VALUES_SCHEMA;

export const usePreferenceValue = <ValueId extends ValueIds>(valueId: ValueId) =>
  useValue<ValueId>(valueId, STORE_ID);

See the settings store implementation in TinyHub for example: https://github.com/tinyplex/tinyhub/blob/main/client/src/stores/SettingsStore.tsx#L10-L27