Giter Club home page Giter Club logo

swc-playground's Introduction

🎲 swc playground

The playground of swc. Visit https://play.swc.rs/ to try it out.

✨ Features

  • Two editors powered by Monaco Editor for editing input code and showing output code.
  • Configure swc with a friendly form.
  • Share code and config by URL.
  • Choose different versions of swc with an option.
  • Configure swc by editing JSON manually with IntelliSense.
  • Show AST of input code.
  • Dark mode.

πŸ™Œ Related

πŸ“œ License

MIT License

Copyright (c) 2021-present Pig Fang

swc-playground's People

Contributors

austaras avatar buraksakalli avatar crayonn avatar edwincoronado avatar g-plane avatar gavin-gong avatar iwanabethatguy avatar jdanyow avatar jserfeng avatar kdy1 avatar magic-akari avatar riesaex avatar snyamathi avatar sosukesuzuki avatar timneutkens avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

swc-playground's Issues

Error handling

Hello,

i saw an error handling in the source using the monaco feature of setModelMarkers:

useEffect(() => {
    const model = editorRef.current?.getModel()
    if (!monaco || !model) {
      return
    }

    if (output.err) {
      const markers = Array.from(parseSWCError(output.val)).map(
        ([_, message, line, col]): editor.IMarkerData => {
          const lineNumber = Number.parseInt(line!),
            column = Number.parseInt(col!)

          return {
            source: 'swc',
            message: message!,
            severity: monaco.MarkerSeverity.Error,
            startLineNumber: lineNumber,
            startColumn: column,
            endLineNumber: lineNumber,
            endColumn: column,
          }
        }
      )
      monaco.editor.setModelMarkers(model, 'swc', markers)
    }

    return () => monaco.editor.setModelMarkers(model, 'swc', [])
  }, [output, monaco])

But somehow this doesn't work. It looks like the structure of the error message in SWC has changed.

So the used regex does not apply:

const RE_SWC_ERROR = /error:\s(.+?)\n\s-->\s.+?:(\d+):(\d+)/gm

export function parseSWCError(message: string) {
  return message.matchAll(RE_SWC_ERROR)
}

https://play.swc.rs/?version=1.3.24&code=H4sIAAAAAAAAA0srzUsuyczPUyhJLS7RyEvMTdVUUKjm5eJMSU0qTU9PLbIGspPz84pLFCoUbBUMYdz8nFS9nPx0DaUQoD5NoGgtLxcAjeVwdUwAAAA%3D&config=H4sIAAAAAAAAA22TwXLjIAyG38XnHrad2T30AfbWZ2AICIcWEINEGk8m774iTm1s7w19CPFL%2FNyGTzLD%2B23IuhCUtqIpsb4O7wNPGcgUn3l4GZgEOR0I7hLoMgJLCtDbr9ffsh0QCZ4JL0P0ybupFTMYcwGitpZDNUJiCbhUSdOl4Dctp06IAXQ6AqVJ%2BcQwQlk3DYagM4G66A2N0oknTFtWGazKBXOPk%2FXsMUm4QAvaKoMWfjRaX8Cwv0CXI2UkJ5Go20ILpzqObYzzYbjoUDWvWXB9TEMuXdAZPbFytRM8o63amW169U4V4FrWWp%2Fo0zbnC0C0Bk2UdIQdd%2FIie%2FSfNJ%2BcvCdPC5XH7pQlGKVF5b1b%2B2zaobDvShWw1UBr1BzgRjJ5Cwqck7F38NuzOXflmjnRrbHMT3cC5lDtHPakzRAH%2BFeEcf8wTx41n%2FeMpnjCcCgRgc9oD1iGwbiHRdx8zXtakwUZNthuo1IXNtuxYlSh%2Fb%2FZZVn8znJIjQFPq5nln0adxsWj9wbQ1gZuj%2Fk9PvCf4b5%2B2B9n0cczsd1w%2Fwc8fodrJQQAAA%3D%3D

Wrong type displayed for dynamic Import?

Hey.
I have encountered a mismatch between the AST Explorer [Edit: AST view in SWC's pg] and the library. My input is:

let {hi, bye} = await import('./say.js');

The AST Explorer suggests that the callee lives inside of a node of type Callee::Expr (well swc_ecma_ast::CallExp in particular), see:

"argument": {
      "type": "CallExpression",
      "span": {...},
      "callee": {
        "type": "Identifier",
        "span": {...},
        "value": "import",
        ...
      },
...

While the code shows it is actually a swc_ecma_ast::Import:

CallExpr {
    span: Span { ... },
    callee: Import(Import { //<---------
        span: Span { ... }
    }),
    ....
}

Am I missing something, or it is an issue?
Thanks.

[cargo install [email protected]] error on compile macbook air m1

Compiling swc v0.207.0
error[E0061]: this function takes 1 argument but 2 arguments were supplied
--> /Users/ryanguild/.cargo/registry/src/github.com-1ecc6299db9ec823/swc-0.207.0/src/builder.rs:261:21
|
261 | compat::es2017(
| ^^^^^^^^^^^^^^ expected 1 argument
262 | / compat::es2017::Config {
263 | | async_to_generator: compat::es2017::async_to_generator::Config {
264 | | ignore_function_name: assumptions.ignore_function_name,
265 | | ignore_function_length: assumptions.ignore_function_length
266 | | },
267 | | },
| |_________________________-
268 | self.unresolved_mark
| -------------------- supplied 2 arguments

display rust structs untranslated

i have been working on writing transforms in rust and, while swc-playground is helpful, i spent most of my time looking at swc source code to translate the serde-renamed output to the rust structures. it would be really useful if there was another output like AST-Rust.

I am a beginner using this, but I also spent a bit of time trying to write a visitor that would just print the rust structs but made little progress on that. If that exists somewhere just point me to it.

thanks for a great facility - my transforms are working now.

Compress options do not work

This is my Typescript input:

function test() : void { debugger; const x = 1; console.log("Test"); }

the Output to ES2015 is

function test() { debugger; const x = 1; console.log("Test"); }

so the options

drop_debugger
drop_console
const_to_let

are not applied

Doesn’t pass isModule configuration in AST mode

Some files, such as this one from swc-project/swc#7045 with a delete statement, need isModule: false in order to parse.

https://play.swc.rs/?version=1.3.38&code=H4sIAAAAAAAAA0tUsFUwtOZKSc1JLUlVSLTmSs7PK87PSdXLyU%2FXKKksSM1PU0jUtAYADe1dLScAAAA%3D&config=H4sIAAAAAAAAAxWLQQqAMAwE%2F7JnDyp46R98RKhRKlZLNoIi%2Fl17G5iZBysjwoMiRrVKvHeXCwEaszBaKo63QU57mu8axCMXUxLB7dRfudiiXg%2F2bTfUOnE8pnNThFk26vsBSkMid2gAAAA%3D

However, if I change the view the View from Compiled Code to AST, the playground forgets to pass isModule from the configuration to swc.parseSync here:

swc.parseSync(code, { ...config.jsc.parser, target: config.jsc.target })

and the compiler shows an error because it’s incorrectly running in the default isModule: true mode.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.