Codesandbox-client: Flow types support?

[mcin-armintaheri-archive]

I seem to have a lot of trouble finding information about codesandbox and flow types support. I am basically trying to follow these instructions https://flow.org/en/docs/tools/create-react-app/ and am hoping that codesandbox will give me type errors the same way react typescript projects would on codesandbox.

My exact commands locally are:

mkdir flow-types-codesandbox-test
cd flow-types-codesandbox-test
create-react-app ./
yarn add --dev flow-bin
yarn run flow init
codesandbox ./

Which uploads the code to a live sandbox but does not show flow's type checking errors like it would for typescript for files. I am annotating my typed source with the //@flow comment above.

Thanks in advance for the help!

PS: This cloud-based sandbox is amazing

[mcin-armintaheri-archive]

I should probably link the sandbox I'm talking about

https://codesandbox.io/s/rllozorqv4

[frontsideair]

I think Codesandbox doesn't have Flow support, but I'd love to see it land someday. It's probably harder than Typescript since the editor core Monaco supports TS, both are Microsoft projects and power VSCode.

[reccanti]

Doesn't look like it supports it by default, but you can enable it by creating a .babelrc with the contents:

{
  "presets": [
    "env",
    "flow"
  ],
  "plugins": []
}

At least in the Vanilla template

[reccanti]

Actually, looking at this more, it doesn't seem to work when you try to export a type to another file

[lbogdan]

As far as I know the flow type checker is written in OCaml and comes in binary form, so I'd say the probability of integrating it in CodeSandbox is minimal.

That being said, you could probably use it inside a server sandbox, but it won't be integrated with the editor.

[FezVrasta]

Could we, at least, get proper support in the editor? Right now if you try to write Flow code inside create-react-app, the app works perfectly, but CodeSandbox will mark as error all the type annotations asking me to rename the file to .ts.

Could you disable this check when a @flow header comment is found on the file?

Talking about in-browser support, I'd look how the Flow playground works, since that's in-browser and seems to work nicely.

[reccanti]

Not sure if this existed at the time, but it seems like there's now a compiled-to-JavaScript version of Flow that we could potentially use from the browser:

https://github.com/facebook/flow#using-flows-parser-from-javascript

[FezVrasta]

Is there anything we can do to help with this? It looks like all the necessary tools and libraries are available, now it needs to be implemented in the platform.

I suppose we should update flow-for-vscode to support flow-parser, once this work is done it should be enough to ship flow-for-vscode in the CodeSandbox instance of VS Code to have Flow working, is my assumption correct?

[FezVrasta]

I went ahead and created an issue on the flow-for-vscode repository https://github.com/flowtype/flow-for-vscode/issues/383

[github-actions[bot]]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[FezVrasta]

Noooooooooooooooooooo

oooooooo

ooooooooooooo.....

oooooooooooooooooooo

[siddharthkp]

Hi!

Sorry, flow support isn't something we would be able to pick up soon.

I have added this feature request to our internal backlog which we use to prioritize what to build next. We can't make any promises about the timing, but it's on the list to get a fair chance once again!

Closing this issue for now. But, if you'd like to work on this feature with us, please create a pull request and we'll help you along the way.

For others landing on this issue, feel free to add more context or simply leave a thumbs up 👍 on this comment if you find this feature useful.

[FezVrasta]

Thanks for the update, personally I think the feature could be split in two steps:

1. Support the syntax (no type checking, but no syntax errors)
2. Add type-checking

I think point 1 should be quite straightforward to address.

[siddharthkp]

@FezVrasta Would you be open to working on this together? No pressure if you don't have the time.

[FezVrasta]

I'd love to but unfortunately my agenda is pretty busy 😢 I'll make sure to ping you if I manage to free some time.

[siddharthkp]

Understandable! 🖤