Improving the configuration docs

[stefee]

I’ve found the Configuring swc doc provides very minimal information and context and I have relied on Google-search to find the Babel doc to understand what some props are for.

e.g.

In loose mode, swc generates more efficient code.

If it’s more efficient, why is it off by default? What is the trade off?

Use automatic to use new jsx runtimes.

What’s the new runtimes? When to not use them?

Enabling this option will make swc preserve original class names.

What happens without this option?

Would you be open to contribution to help improve the docs? @kdy1 - I would be happy to spend some time on it as we might adopt swc at my work.

[kdy1]

I'd really love it.

If it’s more efficient, why is it off by default? What is the trade off?

It can break your code if assumptions made by loose mode are violated.
e.g. iteration over a string is invalid in loose mode.

What’s the new runtimes? When to not use them?

I don't know the complex details, but I think it was about skipping import React from 'react'.

What happens without this option?

The name of a class can be modified. But this is quite improved, and for now, it's not possible to pass such code as an input.

Without this option,

class Foo#1 {

}

{
    class Foo#2 {} 

    new Foo#1()
    new Foo#2()
}

will be renamed as

class Foo {

}

{
    class Foo1 {} 

    new Foo()
    new Foo1()
}

Note: #1 and #2 is arbitrary and used to denote which identifier is connected.

But for now writing such code is not possible, and the bundler or minifier is required to exploit renaming behavior.

[stefee]

I opened a PR in swc-project/website#88