TypeScript integration

[aboveyunhai]

I wonder is autocomplete avaliable in sandpack?
I see it used codemirror internally, but I did not find any apis about this feature. It's one of most important feature when we are looking for this kind of editors.

---

Edit:
Under @danilowoz help, I was able to create a working Sandpack typescript in next.js

https://playground-ts.vercel.app/
Source Code: https://github.com/aboveyunhai/playground-ts

Something wrong with the initial render, but once you start to edit the code or change tab (trig render basically), ts-server will start to kick in.

There are some tiny optimization to avoid recreating ts-server for each instance.
You might also be aware of some ref errors inside the code.

[danilowoz]

Hey @aboveyunhai, thanks for raising up this topic.
Curious to know which kind of autocomplete you mean, the codemirror autosuggestion
or some kind of server language to autocomplete the reference in the document?

Let me know if you have any examples, and then we can consider them into our roadmap

[aboveyunhai]

Hey @aboveyunhai, thanks for raising this topic here.
Curious to know which kind of autocomplete you mean, the codemirror autosuggestion
or some kind of server language to autocomplete the reference in the document?

Let me know if you have any example, and then we can cons

I'm not exactly sure should I phase it as "autocomplete" or "hint" based on typescript declaration files. Monaco editor are able to create "hint" based on d.ts.
https://playground-brainstorm-git-monaco-editor-react-4ed6d5-anubra266.vercel.app/ here is the link of the experiment I had built previously. It might be invalid in the future. There are two editors. One from sandpack and one is Monaco. So you get the idea when you type onClick inside <Button /> component

[aboveyunhai]

To further expand the idea. Are we able to catch the declaration across all files from installed packages since some of them are tsx or ts files instead of d.ts though i believe they will all end up as d.ts file after compiling.

[aboveyunhai]

Codesandbox already had it but I'm not sure about sandpack?

[danilowoz]

Thanks for sharing your experiment! Sandpack uses Codemirror, we would need to implement by ourselves a language server to communicate with the editor. Unfortunately, we don't have plans in the short term to implement it due to other priorities, but I think we can produce a document of how you can support it out of the box.

Just found this information, which makes it possible, looking forward to giving it a try and making it work on Sandpack.

Thread: https://discuss.codemirror.net/t/codemirror-6-and-typescript-lsp/3398/22?page=2
Demo: https://okikio-codemirror.netlify.app/
Code: https://github.com/okikio/codemirror/blob/main/src/components/Editor.tsx

[aboveyunhai]

will try it out later today, if the implementation is relatively simple without affecting with other functionalities. Maybe worth me to create a PR

[danilowoz]

Here's a working in progress sandbox:
https://codesandbox.io/s/github/danilowoz/sandpack-tsserver

[jfmmm]

@danilowoz I think it might be a chrome only issue, I have it happen on chrome but not in firefox.

I also tried updating your demo to the latest version of react-sandpack and codemirror throw this error:

Config merge conflict for field override
    at combineConfig (https://6t1n25.csb.app/node_modules/
codemirror/state/dist/index.js:1424:212
[...]

https://codesandbox.io/s/stoic-tristan-6t1n25

Any idea what the issue could be?

[danilowoz]

I think I managed to fix it. Sandpack has a couple of breaking changes from v0.x to v1.x, and updating the API fixes it
https://codesandbox.io/s/festive-hopper-l5wvv3?file=/src/App.tsx

If you're interested about taking a look, here's the migration guide https://sandpack.codesandbox.io/docs/releases/v1#migration-guide

[jfmmm]

@danilowoz Sadly I'm still getting the same error Config merge conflict for field override on both chrome and firefox

[aboveyunhai]

@jfmmm you might want to check this one: https://codesandbox.io/s/adoring-bardeen-hzi6h7?file=/src/sandpack-components/CodeEditor.tsx, I remove most of them with only one example left since you don't know the differences between v0 and v1, I think less is better for you, then you can add samples from the broken example one by one by yourself.
The problem comes from the creation of extension via codemirrorTypescriptExtensions() while ts-server is not ready yet. add a useMemo() hook can "hide" the issue but it will fail the initial rendering on type check. This behavior is different than v0 @danilowoz , any ways to keep the process synchronized?

[peterbartels]

@aboveyunhai @jfmmm
I forked the tsserver repo and made some improvements.

Can you try to run this branch: https://github.com/peterbartels/sandpack-tsserver/tree/load-dependencies-async

I don't see the errors anymore. It loads slower because all the dependencies need to be loaded (that was actually the fix I made).

[cliffordfajardo]

If anyone else stumbles on this thread, found another good read on monaco vs codemirror technical blog post

1. https://blog.replit.com/code-editors
2. Feature request: Monaco Editor integration option? #305

[jakeleboeuf]

Vocs is solving this elegantly with Twoslash 🔥