New Oxc Playground

[Dunqing]

Overview

As more features are added the old vanilla.js-based implementation has become difficult to maintain. We are going to rewrite the playground and eat our own dog food 🐶.

Previous playground:

• code https://github.com/oxc-project/oxc/tree/main/website
• website https://oxc-project.github.io/oxc/playground/

Tasks

• Rewrite playground based on vite and vue
• Replace the current CodeMirror editor with Monaco.
• Support for transformer configuration editing. Learn more Support for modify transformer configurations in playground oxc#2709

Possible Tasks

• Linter rules configuration
• ..

Playground Design

We can experiment with shadcn-vue and utility-first CSS framework for UnoCSS or TailwindCSS to help us build it quickly. Or ask AI at https://www.vue0.dev/

Expected Outcome

By the end of this refactor, the OXC Playground should be more user-friendly and maintainable. The switch to Vue and Monaco should provide a better development experience.

Reference

• https://github.com/sxzz/ast-explorer AST Explorer, Use Vue and Monaco
• https://play.swc.rs/ SWC Playground
• https://biomejs.dev/playground/ Biome Playground

[DonIsaac]

I've been spending a lot of time writing language services for Monaco for custom DSLs my company uses, I could help integrate an Oxc language service into Monaco

[Boshen]

I will get the wasm thing compiling and integrate once we have vite running.

[eryue0220]

Could I get the first one? I can help to rewrite it based on vite and vue.

[Boshen]

Could I get the first one? I can help to rewrite it based on vite and vue.

Of course. Can you PR in smaller commits to make things easier to review?

[eryue0220]

Could I get the first one? I can help to rewrite it based on vite and vue.

Of course. Can you PR in smaller commits to make things easier to review?

Yes, sure.

[Boshen]

I added the wasm build and build instruction 7080083