react-storefront icon indicating copy to clipboard operation
react-storefront copied to clipboard

Typescript Support

Open ali-hellani opened this issue 4 years ago • 3 comments

Feature request

is Typescript in your plan to support it?

ali-hellani avatar Nov 29 '20 00:11 ali-hellani

I second this, I feel like this is a breaking feature and will push me to use a different approach.

KyleWiteck avatar Jan 02 '21 16:01 KyleWiteck

PLEASE Implement this

Pckool avatar Oct 27 '21 13:10 Pckool

@Pckool I hate to say this, but I've created the missing type declarations, I just cannot share them as it was part of contractual work done to a customer project. Additionally, the declarations are still incomplete and focus on the parts that are in use, so even if I got the permission to contribute them, it'd be too much work to do on my free time to be good enough for general use. While I cannot share the actual code, I can share what my strategy was to do this in case someone else is in the same position.

I had previously had success in generating type declarations from JSDoc's using a codegen tool (forgot the name). This was not what I ended up doing this time anyway. Instead I ran across this great resource https://react-typescript-cheatsheet.netlify.app/docs/migration/from_js based on which I ended up doing something like this:

  • run an initial migration using ts-migrate
  • refine the types incrementally by using fixes provided by TypeStat
  • if the codegen tools failed at some point, I fixed the part causing the failure and tried again
  • run tsc, see what failed, manually fix the issue and run tsc again until there's no errors
  • run tsc --declaration to create the .d.ts files
  • start using the types and fix incompatibilities as they arise

Good to know before considering this:

  • creating the type declarations revealed more than one obvious bug
  • documentation for the project looks solid but in reality the components have many undocumented props and there's quite a lot of mismatch between the documentation and implementation
  • be prepared to go through a lot of JS code, trying to figure out what's going on
  • commit messages don't provide much useful information
  • it is a lot of work, the total time spent was in the ballpark of a full weeks work

Further things to note:

  • react-storefront does not seem to be under active development/maintenance
  • the (internal) complexity of the framework combined with no type declarations can be a very frustrating experience when you want to customize something
  • on the customer project mentioned earlier, due to peer dependency issues we had to create a private fork in order to upgrade to Next.js 11, Webpack 5, Material-UI 5 -> a lot more work
  • the current ongoing plan is to undo the original and hasty decision to use RSF started project by incrementally refactoring the code in order to eventually drop the dependency and have only custom components
  • Next.js 11 (and further 12) now comes OOTB with many performance surpassing the techniques used on RSF codebase

React Storefront looks (deceivingly) polished and clearly has a lot of thought and effort put into it. It's really a shame to see the project (at least seemingly) abandoned, especially as there doesn't seem to any credible alternatives besides Next Commerce. While it might become a great option, at least the last time I checked it was very much in an ongoing WIP state.

ristomatti avatar Oct 27 '21 22:10 ristomatti