atlassian / react-sweet-state

Shared state management solution for React
https://atlassian.github.io/react-sweet-state/
MIT License
871 stars 55 forks source link

Typescript: Can't use container without explicitly declared prop 'children' on it #164

Closed tvardero closed 2 years ago

tvardero commented 2 years ago

Can't declare store container using simple createContainer(MyStore), using this container results in error: Property 'children' does not exist on type 'IntrinsicAttributes & { scope?: string | undefined; isGlobal?: boolean | undefined; }'. ts(2322)

Apparently, container doesn't have children field on it's props.

The only solution i found for myself is to explicitly declare children?: any:

export const MyStoreContainer = createContainer<MyStoreState, MyStoreActions, { children?: any }>(MyStore);


Full store code (counter example from your docs, but in typescript):

import { Action, createContainer, createHook, createStore } from "react-sweet-state"
import { MyStoreActions } from "./actions";
import { MyStoreState } from "./states";

const initialState: MyStoreState = {
  count: 0,
};

const actions: MyStoreActions = {
  increment: (by = 1): Action<MyStoreState> => ({ setState, getState }) => {
    setState({
      count: getState().count + by,
    });
  },
}

const MyStore = createStore<MyStoreState, MyStoreActions>({ initialState, actions, name: 'my-counter' });

export const useMyStore = createHook(MyStore);
export const MyStoreContainer = createContainer<MyStoreState, MyStoreActions, { children?: any }>(MyStore);

Dependencies in package.json:

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "react-sweet-state": "^2.6.0",
    "typescript": "^4.4.2"
  }

I'm new to React, Redux and Sweet State, maybe I'm doing something wrong? Or was it intended to explicitly declare props for containers? Container tag is useless with self-closing html tag (<Container />), so it expected to have children anyway.

albertogasparin commented 2 years ago

Ouch, that is a change in React 18 types. As with @types/react^17 things are fine: createContainer return type is ComponentType, which alias FunctionComponent which in turn has PropsWithChildren<P>. Seems like they removed it in v18, and now FunctionComponent just uses P. Would you be happy to raise a PR to improve the return type?