chore(playground): monaco jsx/tsc highlight

[enzonotario]

Related #158

It's not working yet, but I submit this to see if we can iterate over this to get it working.

In fact, I've found very hard to setup JSX/TSX highlighting in Monaco. I see it's a common issue over Internet. I tried:

• Use Shiki for Monaco integration (https://shiki.style/packages/monaco): with no success.
• Use monaco-jsx-syntax-highlight: no success for now, but I think this will be the way to go, as I see it's working on Panda playground - code

This PR has a first try for monaco-jsx-syntax-highlight, with no success for now. Any help/guidance will be welcomed.

[aralroca]

Don't worry about the GH action tests, I see that oven-sh/setup-bun is down... 😅

Thanks for everything! I'll look at it later and give it a try. Good research and let's see if we get it with monaco-jsx-syntax-highlight. I tried in the past to add the lib dependencies to make it type-safe, but it didn't work either:

https://github.com/brisa-build/brisa/blob/084c3fa436d5b73e9bf41de796655213c63e99a3/packages/www/src/helpers/monaco-extra-libs/index.ts

[aralroca]

@enzonotario What does Monaco Editor offer to implement the highlight? What I don't like about monaco-jsx-syntax-highlight is that it uses Babel, currently we are already loading our parser, it would be better to use the same one, although it would take more time. Surely it is better to use this one for now, I understand that we need to add @babel/parser @babel/traverse to make it work well.

[aralroca]

Okay, PandaCSS does not use Babel and uses this library... I got confused by the official documentation of the library https://www.npmjs.com/package/monaco-jsx-highlighter

[enzonotario]

mm I tried with monaco-jsx-syntax-highlight
, not monaco-jsx-highlighter.. similar but different libraries..

and yes, I didn't tried monaco-jsx-highlighter because the Babel requirement

[aralroca]

mm I tried with monaco-jsx-syntax-highlight , not monaco-jsx-highlighter.. similar but different libraries..

and yes, I didn't tried monaco-jsx-highlighter because the Babel requirement

ok, now I understand the confusion! thanks

[aralroca]

@enzonotario is working, I think is missing only the CSS...!!!

Here are the styles of PandaCSS as example: https://github.com/chakra-ui/panda/blob/503c065cd302845f691b15e578aaa659e7b02c6a/playground/src/components/Editor.tsx#L143

[aralroca]

I'll merge it and add the CSS, good job.

[enzonotario]

Ups, nice, thanks!!