feat: tag var shadowing, same scope (#2272)

package.json

@@ -14,6 +14,7 @@
     "build:sizes": "node -r ~ts scripts/sizes",
     "change": "changeset add",
     "format": "eslint --format unix --fix .; prettier . --write --with-node-modules --log-level=warn",
+    "inspect:compiled": "node -r ~ts scripts/inspect-compiled-output.ts",
     "lint": "eslint --format unix . && prettier . --check --with-node-modules --log-level=warn",
     "prepare": "husky",
     "report": "open ./coverage/lcov-report/index.html",

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-compile-error/__snapshots__/dom.expected/template.error.txt

@@ -2,7 +2,7 @@
     at packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-compile-error/template.marko:2:22
       1 | <let/x=1/>
     > 2 | <let/y=x valueChange=5 />
-        |                      ^ The 'let' tag 'valueChange' attribute must be a function.
+        |                      ^ The `let` tag `valueChange` attribute must be a function.
       3 | <button onClick() { y++; }>
       4 |   ${x}|${y}
       5 | </button>

packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-compile-error/__snapshots__/html.expected/template.error.txt

@@ -2,7 +2,7 @@
     at packages/translator-tags/src/__tests__/fixtures/let-tag-controllable-compile-error/template.marko:2:22
       1 | <let/x=1/>
     > 2 | <let/y=x valueChange=5 />
-        |                      ^ The 'let' tag 'valueChange' attribute must be a function.
+        |                      ^ The `let` tag `valueChange` attribute must be a function.
       3 | <button onClick() { y++; }>
       4 |   ${x}|${y}
       5 | </button>

packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,158 @@
+# Render {}
+```html
+<div>
+  <button>
+    0
+  </button>
+  <div>
+    <button>
+      0
+    </button>
+    <div>
+      <button>
+        0
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    0
+  </button>
+</div>
+```
+
+
+# Render 
+container.querySelectorAll("button")[buttonNum++].click()
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      0
+    </button>
+    <div>
+      <button>
+        0
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    0
+  </button>
+</div>
+```
+
+
+# Render 
+container.querySelectorAll("button")[buttonNum++].click()
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      1
+    </button>
+    <div>
+      <button>
+        0
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    0
+  </button>
+</div>
+```
+
+
+# Render 
+container.querySelectorAll("button")[buttonNum++].click()
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      1
+    </button>
+    <div>
+      <button>
+        1
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    0
+  </button>
+</div>
+```
+
+
+# Render 
+container.querySelectorAll("button")[buttonNum++].click()
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      1
+    </button>
+    <div>
+      <button>
+        1
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    1
+  </button>
+</div>
+```
+
+
+# Render 
+buttonNum = 0
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      1
+    </button>
+    <div>
+      <button>
+        1
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    1
+  </button>
+</div>
+```

packages/translator-tags/src/__tests__/fixtures/shadow-same-scope/__snapshots__/csr.expected.md

@@ -0,0 +1,188 @@
+# Render {}
+```html
+<div>
+  <button>
+    0
+  </button>
+  <div>
+    <button>
+      0
+    </button>
+    <div>
+      <button>
+        0
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    0
+  </button>
+</div>
+```
+
+# Mutations
+```
+inserted div0, div1
+```
+
+
+# Render 
+container.querySelectorAll("button")[buttonNum++].click()
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      0
+    </button>
+    <div>
+      <button>
+        0
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    0
+  </button>
+</div>
+```
+
+# Mutations
+```
+div0/button0/#text0: "0" => "1"
+```
+
+
+# Render 
+container.querySelectorAll("button")[buttonNum++].click()
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      1
+    </button>
+    <div>
+      <button>
+        0
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    0
+  </button>
+</div>
+```
+
+# Mutations
+```
+div0/div1/button0/#text0: "0" => "1"
+```
+
+
+# Render 
+container.querySelectorAll("button")[buttonNum++].click()
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      1
+    </button>
+    <div>
+      <button>
+        1
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    0
+  </button>
+</div>
+```
+
+# Mutations
+```
+div0/div1/div1/button0/#text0: "0" => "1"
+```
+
+
+# Render 
+container.querySelectorAll("button")[buttonNum++].click()
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      1
+    </button>
+    <div>
+      <button>
+        1
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    1
+  </button>
+</div>
+```
+
+# Mutations
+```
+div1/button0/#text0: "0" => "1"
+```
+
+
+# Render 
+buttonNum = 0
+
+```html
+<div>
+  <button>
+    1
+  </button>
+  <div>
+    <button>
+      1
+    </button>
+    <div>
+      <button>
+        1
+      </button>
+    </div>
+  </div>
+</div>
+<div>
+  <button>
+    1
+  </button>
+</div>
+```
+
+# Mutations
+```
+
+```