Recoil: Typescript support

Created on 14 May 2020  ·  40Comments  ·  Source: facebookexperimental/Recoil

Very promising library!

Any plans for adding Typescript support?

Most helpful comment

@csantos42 is currently working on this. Thanks for your interest!

All 40 comments

@csantos42 is currently working on this. Thanks for your interest!

For anyone curious I'm working on this at https://github.com/csantos42/DefinitelyTyped/blob/recoil-types/types/recoil/index.d.ts -- PR to DefinitelyTyped coming soon!

@csantos42, @davidmccabe do you need any help in adding the TS types to components? :)

@csantos42 Instead of adding types to DefinitelyTyped repo, how about shipping them alongside Recoil and adding them to this repo itself?

@csantos42 Instead of adding types to DefinitelyTyped repo, how about shipping them alongside Recoil and adding them to this repo itself?

This would be a better approach IMO

Thanks for offering help @divyanshu-rawat ! No help needed with this at this time, but if anything changes I'll let you know :)

@ayush987goyal @guilhermedeandrade I agree having the type definitions in the repo itself would be ideal. The idea for now is that we will add the types to DefinitelyTyped so that we can publish updates to Recoil separately from TS updates until we're ready to commit to keeping TS in sync with every update (the core is written in Flow, so we're going to have to maintain TypeScript types separately).

With that said we'll do our best to keep the TS types up-to-date and in-sync with all updates.

@ayush987goyal @guilhermedeandrade I agree having the type definitions in the repo itself would be ideal. The idea for now is that we will add the types to DefinitelyTyped so that we can publish updates to Recoil separately from TS updates until we're ready to commit to keeping TS in sync with every update (the core is written in Flow, so we're going to have to maintain TypeScript types separately).

With that said we'll do our best to keep the TS types up-to-date and in-sync with all updates.

Thank you 🙏

PR is live! https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44756

Now we wait for review/merge

Thank you for this. I was wondering why the core isn't written in TypeScript to begin with? I thought flow was kind of on its last breath and Facebook is looking into TypeScript as well? Any insights?

@mbohgard Flow is the JS typechecker in use for FB's www codebase and is not going away anytime soon. The code in this repo is synced with www so it must use Flow types.

With TypeScript, it'd be great to be able to type argument of the hook like useRecoilState as a union type of the atoms and selectors. Given that each atom and selector should be globally unique, I think without type helper like this can be a mess at scale.

Yes I think they do that, we created a global state library which is Influenced by Recoil api and type safe you only have to define the type globally and if you use the hook it automatically 'gets' the type. https://www.npmjs.com/package/react-ridge-state. I think Recoil will work the same.

I personally think not supporting TS out of the box is a bit of deal breaker for many many projects. Not many people use Flow and I understand that this is an internal FB decision, but maybe this is a bigger conversation on why is FB still insisting on Flow instead of TS.

@sallar I assume politics might be one big reason. Future licensing can also be a threat, Facebook knows best about this.

PR is live! DefinitelyTyped/DefinitelyTyped#44756

Now we wait for review/merge

Man they take forever to approve over there, don't they?

@csantos42 Your pullreq has been hanging out there for a couple days. What would be the tradeoffs of just having the TS bindings in our own repo instead? One is that over there you're getting TS-specific feedback.

@davidmccabe - I believe a mentioned tradeoff above is that the ts definitions would need to be maintained alongside every release of recoil itself.
For me, its a serious downer that even if the ts definitions are published, they will be second priority and can get out of sync at any time. Maybe other users will have a different opinion, just my 0.02. Flow...

The general recommendation I believe is that if your project is written in TypeScript, then include it in the lib. If not, typings should be in the DefinitelyTyped repo.

Really starting to dislike the not invented here policy facebook has been employing regarding typescript.

This issue is getting a bit off topic;

Keeping TS types in Definitely Typed seems like the right move for the project in its current state if it needs to keep using Flow.

@csantos42 They wait for your reaction to some points. If you're not reacting, the recoil types will not be useable.

Hi all, thanks to everyone that provided feedback on the types— I’ll be addressing them all today so that we can get that PR merged. I’ll keep you posted

@csantos42 They again need some response from you. If you will not deliver them, they will not merge the PR.

Can we also get some examples of typing things like atoms.

Hi all, thanks to everyone that provided feedback on the types— I’ll be addressing them all today so that we can get that PR merged. I’ll keep you posted

Any updates on this?

We tried recoil to persist tables pagination and filtering states between page transitions along with binding those states to Apollo GraphQL querying — looks and feels awesome!
It's great to get rid of Redux boilerplate, although not having loggind support is not so great, overall simplification is awesome.

So watching to Recoil with a great interest and expectation

@dvakatsiienko - Could you clarify what you are looking for with "loggind support"?

@dvakatsiienko - Could you clarify what you are looking for with "loggind support"?

Redux supports middleware that allows you to inject custom code that can log the actions that are being called. Supporting middleware would be a nice addition, but I could see complication when people want to start adding Thunks and Sagas.

This seems off-topic from TypeScript support. You can use the transaction observer hook to observe all state changes for persistence, debugging, logging, etc. But, we should move that discussion to another issue.

This seems off-topic from TypeScript support. You can use the transaction observer hook to observe all state changes for persistence, debugging, logging, etc. But, we should move that discussion to another issue.

Is it possible to get a status update?

hi all sorry for the delay, we're still going back and forth on a few things in the DefinitelyTyped PR, but hopefully they'll be resolved soon. Will post here as soon as I have an update @ralexand56

hi all sorry for the delay, we're still going back and forth on a few things in the DefinitelyTyped PR, but hopefully they'll be resolved soon. Will post here as soon as I have an update @ralexand56

Thanks for the update! When things settle down, can you also share examples of how you're setting types for atoms etc.

Hi all. Why not to put type definition inside this package?

@ayush987goyal @guilhermedeandrade I agree having the type definitions in the repo itself would be ideal. The idea for now is that we will add the types to DefinitelyTyped so that we can publish updates to Recoil separately from TS updates until we're ready to commit to keeping TS in sync with every update (the core is written in Flow, so we're going to have to maintain TypeScript types separately).

With that said we'll do our best to keep the TS types up-to-date and in-sync with all updates.

Did you read the issue? It is already answered :) @atomAltera

TypeScript types have been merged to DefinitelyTyped! In a few hours, you should be able to install them by running:

yarn add --dev @types/recoil

or

npm install --save-dev @types/recoil

I'll work on a guide in the documentation to give an overview of how to use Recoil w/ TypeScript.

Thanks to everyone that contributed/reviewed/commented on this effort! For any subsequent TypeScript updates, please open an issue in the DefinitelyTyped repo.

I'll close this task once I've confirmed the types are on NPM.

@csantos42 here are changes required for recently merged atomFamily and selectorFamily I've been using on my fork:

export type AtomFamilyOptions<T, Parameter> = Readonly<{
  key: NodeKey;
  default:
    | RecoilValue<T>
    | Promise<T>
    | T
    | ((params: Parameter) => T | RecoilValue<T> | Promise<T>);
  // persistence_UNSTABLE?: PersistenceSettings<T>,
  dangerouslyAllowMutability?: boolean;
}>;

export function atomFamily<T, Parameter>(
  options: AtomFamilyOptions<T, Parameter>,
): (params: Parameter) => RecoilState<T>;

export interface ReadOnlySelectorFamilyOptions<T, Parameter> {
  key: string;
  get: (
    params: Parameter,
  ) => (opts: {get: GetRecoilValue}) => Promise<T> | RecoilValue<T> | T;

  // cacheImplementation_UNSTABLE?: CacheImplementation<Loadable<T>>,
  dangerouslyAllowMutability?: boolean;
}

export type ReadWriteSelectorFamilyOptions<
  T,
  Parameter
> = ReadOnlySelectorFamilyOptions<T, Parameter> & {
  set: (
    params: Parameter,
  ) => (
    opts: {
      set: SetRecoilState;
      get: GetRecoilValue;
      reset: ResetRecoilState;
    },
    newValue: T | DefaultValue,
  ) => void;
};

export function selectorFamily<T, Parameter>(
  options: ReadOnlySelectorFamilyOptions<T, Parameter>,
): (params: Parameter) => RecoilValueReadOnly<T>;
export function selectorFamily<T, Parameter>(
  options: ReadWriteSelectorFamilyOptions<T, Parameter>,
): (params: Parameter) => RecoilState<T>;

hi @jaredpalmer thank you for that! I'm working on the utility types now-- they'll be very similar to what you have above, but with a small change to ensure that the Parameter generic param is serializable. I'll also add the types for the async utility functions.

I'm marking this issue as resolved for now since we have the types over at DefinitelyTyped and they've been deployed to npm. Thanks again!

FYI the PR that exposes the new utility methods is live: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/45206

Isn't default optional property of an atom. Meaning undefined by default?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

thegauravthakur picture thegauravthakur  ·  3Comments

polemius picture polemius  ·  3Comments

ibnumusyaffa picture ibnumusyaffa  ·  4Comments

jamiewinder picture jamiewinder  ·  3Comments

art1373 picture art1373  ·  4Comments