Codesandbox-client: Sub-ideal first experience with a React typescript app

[altano]

I tried working on a new project in code sandbox, which is super awesome in so many ways, but ended up having a bad experience. My sandbox is here: https://codesandbox.io/s/2zp6rqpvp

1. emmet expansion + ctrl+z takes you back further in your edit history than right before the emmet expansion.
2. My anchors were not working and I was going crazy trying to figure out why only to try and reproduce outside codesandbox and it just didn't reproduce. For some reason something about codesandbox is interfering with the anchors in the table of contents linking to the headers below. This is a dealbreaker for me because my script I'm writing entirely revolves around this working.
3. I tried to download my sandbox but I couldn't get the downloaded version to work.
   
   
   
   1. A bunch of the @types in the package.json were not valid npm packages.
   
   
   2. My package.json was invalid because codesandbox didn't prevent me from using a name with a value of "Name Like This". Converting it to "a-name-like-this" made the package work.
   
   
   3. The package didn't include basic dependencies like react-scripts-ts which are used by the scripts
   
   
   4. I needed to manually create tslint.json and tsconfig.json as they didn't come with the download
   
   
   5. Annnnd then I finally gave up when, after fixing the above, I hit this error:
   
   

Failed to compile.

./src/index.tsx
Module parse failed: Unexpected token (22:32)
You may need an appropriate loader to handle this file type.
|     textAlign: "center"
| };
| var App = function () { return (<div style={styles}>
|     <TableOfContents_1.default />
|     <Article_1.default />

I can tell codesandbox is 99% of the way to something amazing that I would have really enjoyed using, but this stuff got in my way. Just thought I'd leave a note saying as much. Thanks!

[CompuIves]

Wow @altano, thank you so much for taking the time to write all this out!

I'll make sure to address your feedback this week, this is really valuable and clear information. Also, thanks for showing the sandbox that's having this!

[CompuIves]

Okay, I committed fixes for:

3.i (https://github.com/CompuIves/codesandbox-client/commit/403f82b432b7984c13b87a2b314e1f42ecc58df8)
3.ii (https://github.com/CompuIves/codesandbox-client/commit/f2a01f163cebfe44b70d6e71fa4090431e782f79)
3.iii (changed defaults for the default sandbox react-ts)

I will allow configuration of tsconfig.json in CodeSandbox tomorrow, this will fix 3.iv and 3.v too.

I think anchors stopped working because of some catching of links that we do currently, maybe @lbogdan knows more about this?

Again, thanks a lot for documenting these hurdles, really valuable 😄

[altano]

Wow you're too fast. Thanks for fixing so many of the issues so quickly. I look forward to giving it another shot!

[CompuIves]

Another small update, I committed https://github.com/CompuIves/codesandbox-client/commit/d75cc6f065dc6ffb089c79a7cb8e47668c2e8374 yesterday. This adds support for configuration of tsconfig.json. I will add tsconfig.json and tslint.json later today by default to the react-ts project.