fix(es/compat): Split declaration and init in block-scoping pass (#…

…8648)

**Description:**

This does not support 

```js
class Foo extends Bar {
    constructor() {
        for (const i of [1]) {
            setTimeout(() => {
                console.log(this)
            });
        }
        super();
    }
}
```

but it does not seem to be used in a real-world code.

**Related issue:**

 - Closes #8300
 - Closes #8311

crates/swc/tests/fixture/issues-8xxx/8300/1/input/.swcrc

@@ -0,0 +1,27 @@
+{
+    "jsc": {
+        "parser": {
+            "syntax": "ecmascript",
+            "jsx": false
+        },
+        "loose": false,
+        "minify": {
+            "compress": false,
+            "mangle": false
+        }
+    },
+    "module": {
+        "type": "es6"
+    },
+    "env": {
+        "targets": [
+            "chrome >= 51",
+            "edge >= 15",
+            "firefox >= 54",
+            "safari >= 10",
+            "ios_saf >= 10"
+        ],
+    },
+    "minify": false,
+    "isModule": true
+}

crates/swc/tests/fixture/issues-8xxx/8300/1/input/1.js

@@ -0,0 +1,14 @@
+class Foo extends Bar {
+    constructor() {
+        super();
+        for (const i of [1]) {
+            test(() => {
+                this.i = i
+            })
+        }
+    }
+}
+
+function test(f) {
+    f()
+}

crates/swc/tests/fixture/issues-8xxx/8300/1/output/1.js

@@ -0,0 +1,16 @@
+class Foo extends Bar {
+    constructor(){
+        var _this, _loop = function(i) {
+            test(()=>{
+                _this.i = i;
+            });
+        };
+        super();
+        for (var i of [
+            1
+        ])_this = this, _loop(i);
+    }
+}
+function test(f) {
+    f();
+}

crates/swc_ecma_compat_es2015/src/block_scoping/mod.rs

@@ -1,4 +1,4 @@
-use std::mem::take;
+use std::{iter::once, mem::take};
 
 use indexmap::IndexMap;
 use smallvec::SmallVec;
@@ -82,7 +82,6 @@ struct BlockScoping {
     var_decl_kind: VarDeclKind,
 }
 
-#[swc_trace]
 impl BlockScoping {
     /// This methods remove [ScopeKind::Loop] and [ScopeKind::Fn], but not
     /// [ScopeKind::ForLetLoop]
@@ -153,7 +152,23 @@ impl BlockScoping {
             let mut env_hoister =
                 FnEnvHoister::new(SyntaxContext::empty().apply_mark(self.unresolved_mark));
             body_stmt.visit_mut_with(&mut env_hoister);
-            self.vars.extend(env_hoister.to_decl());
+            let mut inits: Vec<Box<Expr>> = vec![];
+
+            for mut var in env_hoister.to_decl() {
+                if let Some(init) = var.init.take() {
+                    inits.push(
+                        AssignExpr {
+                            span: DUMMY_SP,
+                            op: op!("="),
+                            left: var.name.clone().try_into().unwrap(),
+                            right: init,
+                        }
+                        .into(),
+                    );
+                }
+
+                self.vars.push(var);
+            }
 
             let mut flow_helper = FlowHelper {
                 all: &args,
@@ -260,6 +275,13 @@ impl BlockScoping {
                 .into();
             }
 
+            if !inits.is_empty() {
+                call = Expr::Seq(SeqExpr {
+                    span: DUMMY_SP,
+                    exprs: inits.into_iter().chain(once(Box::new(call))).collect(),
+                })
+            }
+
             if flow_helper.has_return || flow_helper.has_break || !flow_helper.label.is_empty() {
                 let ret = private_ident!("_ret");
 

crates/swc_ecma_transforms_compat/tests/__swc_snapshots__/tests/es2015_block_scoping.rs/issue_1021_1.js

@@ -7,12 +7,12 @@ var C = /*#__PURE__*/ function() {
         {
             key: "m",
             value: function m() {
-                var _this = this, _loop = function(x) {
+                var _this, _loop = function(x) {
                     console.log(_this, function(y) {
                         return y != x;
                     });
                 };
-                for(var x = 0; x < 10; x++)_loop(x);
+                for(var x = 0; x < 10; x++)_this = this, _loop(x);
             }
         }
     ]);

crates/swc_ecma_transforms_compat/tests/block-scoping/issue-5048/1/output.js

@@ -1,6 +1,6 @@
 class C__2 {
     mount() {
-        var _this__8 = this, _loop__9 = function(v__4) {
+        var _this__8, _loop__9 = function(v__4) {
             //when you put this inside the for...of loop, the 'this' inside function declare will lose
             var overrideTarget__5 = _this__8.$cardsBox;
             var origiFuc__5 = overrideTarget__5[v__4];
@@ -18,6 +18,6 @@ class C__2 {
             "removeChildAt"
         ];
         var cardWidth__3 = 1275;
-        for (var v__4 of overrideFucNames__3)_loop__9(v__4);
+        for (var v__4 of overrideFucNames__3)_this__8 = this, _loop__9(v__4);
     }
 }

crates/swc_ecma_transforms_compat/tests/block-scoping/issue-5048/2/output.js

@@ -1,6 +1,6 @@
 class C__2 extends D {
     mount() {
-        var _this__7 = this, _superprop_get_mount__6 = ()=>super.mount, _loop__8 = function(v__4) {
+        var _this__7, _superprop_get_mount__6, _loop__8 = function(v__4) {
             setTimeout(()=>_superprop_get_mount__6().call(_this__7, v__4));
         };
         var overrideFucNames__3 = [
@@ -9,6 +9,6 @@ class C__2 extends D {
             "removeChild",
             "removeChildAt"
         ];
-        for (var v__4 of overrideFucNames__3)_loop__8(v__4);
+        for (var v__4 of overrideFucNames__3)_this__7 = this, _superprop_get_mount__6 = ()=>super.mount, _loop__8(v__4);
     }
 }