In loose mode, static class properties are transformed to static class block

[kenrick95]

Describe the bug

Input

class Something extends React.Component<Props, State> {
  static defaultProps = {
    transitionTime: 500,
  };
  static meow = 'a';
  constructor() {
    this.something = 'a';
  }
  render() {
    return null;
  }
}

Babel with the following config

{
  "filename": "repl.tsx",
  "presets": [
    [
      "env",
      {
        "targets": "node 20",
        "modules": false,
        "loose": true
      }
    ],
    [
      "react",
      {
        "runtime": "automatic"
      }
    ],
    [
      "typescript",
      {
        "allowDeclareFields": true,
        "allowNamespaces": true
      }
    ]
  ],
  "sourceType": "unambiguous"
}

outputs:

class Something extends React.Component {
  static defaultProps = {
    transitionTime: 500
  };
  static meow = 'a';
  constructor() {
    this.something = 'a';
  }
  render() {
    return null;
  }
}

---

However SWC outputs

"use strict";
class Something extends React.Component {
    static{
        this.defaultProps = {
            transitionTime: 500
        };
    }
    static{
        this.meow = 'a';
    }
    constructor(){
        this.something = 'a';
    }
    render() {
        return null;
    }
}

I noticed that it will use class static block if I set the loose option to true. When I set it to false, SWC outputs the same as Babel:

"use strict";
class Something extends React.Component {
    static defaultProps = {
        transitionTime: 500
    };
    static meow = 'a';
    constructor(){
        this.something = 'a';
    }
    render() {
        return null;
    }
}

Which brings to question: why use class static block when loose mode is used? This seem to increase the output size too (like around 10 characters difference when comparing loose=true vs loose=false with compress=true + minify=true)

Input code

class Something extends React.Component<Props, State> {
  static defaultProps = {
    transitionTime: 500,
  };
  static meow = 'a';
  constructor() {
    this.something = 'a';
  }
  render() {
    return null;
  }
}

Config

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "loose": true,
    "minify": {
      "compress": false,
      "mangle": false
    },"transform": {
    },
    "experimental": {
      "emitIsolatedDts": false
    }
  },
  "module": {
    "type": "commonjs"
  },
  "minify": false,
  "isModule": true,
  "env": {
    "targets": "node 20"
  }
}

Link to the code that reproduces this issue

https://play.swc.rs/?version=1.13.20&code=H4sIAAAAAAAAA02OzQrCQAyE74LvkFsVSunFi3%2BXvoBYX2DZRruwm5RNFgXpu9tWrL0MYeabMNYbEag5oLaOHoAvRWoErmisFhWHjglJj5fIneRQq1E8w3u9ApDhdhYavJvkdQLg9I0ANBoSp47p5gLuYVeW%2BZj0h0U1ID%2BHSmayybVMojFZ5bjZzo9aJ4XM%2B%2F50P0ocxuKCjqgpElDy%2Fgf1H6ycH1zjAAAA&config=H4sIAAAAAAAAA4VSTWuDQBS8%2ByvknSOE0lNuJXooJVhsj0LZ6lM27Ifs25SI%2BN%2F7tGpMadI97c7Mm2VntgvCEI5UwC7seMuHRjhCt5wZodZ4cWYEfNsgFU42HjYz62mgvDvhiPQ%2FBChrCSdigrQ0smrXzoXVjUMixiqhCBdTLUytcIYnY%2FBOGKqs0yuP34s9DfmDLU8K6Y6OlbWyn2x%2FVzQ832qM0DnrosKW%2BI%2BcB5IsS7OPfRonb0NoXQ7pSw677SaHOHnNkv3TexIzED32S4x%2Frf4md4vpryrAc4NOauT21Dp11NI%2Fk1XCYxl7uk45mOZBjxFe%2FsXQ%2FfAc7kxbcyS4KOdelw5B0mEenz8AoPlauQlX43g3GA41fNiOfkH%2FDQMdUx%2BRAgAA

SWC Info output

N/A uses playground (1.13.20)

Expected behavior

When using loose = true, shouldn't transform static class property to static block

Actual behavior

When using loose = true, it transform static class property to use static block

Version

1.13.20

Additional context

No response

[magic-akari]

This issue comes from how the setPublicClassFields and UseDefineForClassFields options interact.
Since we’re aligning with both Babel and TypeScript behaviors, things can get a bit tricky here.

In short: enabling loose mode sets setPublicClassFields to true.
See: https://babeljs.io/docs/assumptions#migrating-from-babelpreset-envs-loose-and-spec-modes

For Babel, this option doesn’t really matter unless class field transforms are involved.

For TypeScript, though, it’s more complicated — as mentioned in several previous issues.
If UseDefineForClassFields is explicitly set, it always applies.
If it’s not set, the value depends on your target: when targeting ES2022 or newer, it’s treated as true.

We follow Babel’s assumptions option, and we also map UseDefineForClassFields to setPublicClassFields.
That’s the main reason behind the confusion.

Since Babel is moving away from loose in favor of assumptions, this issue probably won’t be a high priority.
Still, we do need to review the default values for assumptions and how they align with TypeScript’s UseDefineForClassFields.

For end users, the current recommendation (in line with Babel’s roadmap) is to switch from loose to the assumptions option.
You can then toggle setPublicClassFields individually as needed.

[kenrick95]

Thanks for explaining!

For end users, the current recommendation (in line with Babel’s roadmap) is to switch from loose to the assumptions option. You can then toggle setPublicClassFields individually as needed.

Ah no wonder I'm confused, there's no documentation yet about this assumptions in swc's jsc options

[kdy1]

@kenrick95 https://swc.rs/docs/configuration/compilation#jscloose
It's added by swc-project/website@010b513

[kenrick95]

@kenrick95 https://swc.rs/docs/configuration/compilation#jscloose It's added by swc-project/website@010b513

I think I was misled by that warning block, where all links where it's all pointing to babel's doc. So my impression is that jsc.loose enables those babel's "assumptions"

Nowhere in the page it says anything about ability to individually set jsc.assumptions

until I see the type hints in the playground: