fix: nested if chains

marko-js · Oct 23, 2024 · 37d511e · 37d511e
2 parents 294a255 + f2f3c2c
commit 37d511e
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 107 deletions.
diff --git a/.changeset/bright-baboons-thank.md b/.changeset/bright-baboons-thank.md
@@ -0,0 +1,8 @@
+---
+"@marko/language-server": patch
+"@marko/language-tools": patch
+"@marko/type-check": patch
+"marko-vscode": patch
+---
+
+Fix type errors with nested conditional change
diff --git a/...ver/src/__tests__/fixtures/script/if-tag/__snapshots__/if-tag.expected/index.md b/...ver/src/__tests__/fixtures/script/if-tag/__snapshots__/if-tag.expected/index.md
@@ -1,134 +1,156 @@
 ## Hovers
-### Ln 86, Col 3
+### Ln 99, Col 3
 ```marko
-  84 |
-  85 | <effect() {
-> 86 |   a;
-     |   ^ const a: 0 | undefined
-  87 | //^?
-  88 |   b;
-  89 | //^?
+   97 |
+   98 | <effect() {
+>  99 |   a;
+      |   ^ const a: 0 | undefined
+  100 | //^?
+  101 |   b;
+  102 | //^?
 ```
 
-### Ln 88, Col 3
+### Ln 101, Col 3
 ```marko
-  86 |   a;
-  87 | //^?
-> 88 |   b;
-     |   ^ const b: 1 | undefined
-  89 | //^?
-  90 |   c;
-  91 | //^?
+   99 |   a;
+  100 | //^?
+> 101 |   b;
+      |   ^ const b: 1 | undefined
+  102 | //^?
+  103 |   c;
+  104 | //^?
 ```
 
-### Ln 90, Col 3
+### Ln 103, Col 3
 ```marko
-  88 |   b;
-  89 | //^?
-> 90 |   c;
-     |   ^ const c: 2 | undefined
-  91 | //^?
-  92 |   d;
-  93 | //^?
+  101 |   b;
+  102 | //^?
+> 103 |   c;
+      |   ^ const c: 2 | undefined
+  104 | //^?
+  105 |   d;
+  106 | //^?
 ```
 
-### Ln 92, Col 3
+### Ln 105, Col 3
 ```marko
-  90 |   c;
-  91 | //^?
-> 92 |   d;
-     |   ^ const d: 3 | undefined
-  93 | //^?
-  94 |   e;
-  95 | //^?
+  103 |   c;
+  104 | //^?
+> 105 |   d;
+      |   ^ const d: 3 | undefined
+  106 | //^?
+  107 |   e;
+  108 | //^?
 ```
 
-### Ln 94, Col 3
+### Ln 107, Col 3
 ```marko
-  92 |   d;
-  93 | //^?
-> 94 |   e;
-     |   ^ const e: 4 | undefined
-  95 | //^?
-  96 |   f;
-  97 | //^?
+  105 |   d;
+  106 | //^?
+> 107 |   e;
+      |   ^ const e: 4 | undefined
+  108 | //^?
+  109 |   f;
+  110 | //^?
 ```
 
-### Ln 96, Col 3
+### Ln 109, Col 3
 ```marko
-  94 |   e;
-  95 | //^?
-> 96 |   f;
-     |   ^ const f: 4 | undefined
-  97 | //^?
-  98 |   g;
-  99 | //^?
+  107 |   e;
+  108 | //^?
+> 109 |   f;
+      |   ^ const f: 4 | undefined
+  110 | //^?
+  111 |   g;
+  112 | //^?
 ```
 
-### Ln 98, Col 3
+### Ln 111, Col 3
 ```marko
-   96 |   f;
-   97 | //^?
->  98 |   g;
+  109 |   f;
+  110 | //^?
+> 111 |   g;
       |   ^ const g: 5 | 6
-   99 | //^?
-  100 | }/>
-  101 |
+  112 | //^?
+  113 |   h;
+  114 | //^?
+```
+
+### Ln 113, Col 3
+```marko
+  111 |   g;
+  112 | //^?
+> 113 |   h;
+      |   ^ const h: 7 | undefined
+  114 | //^?
+  115 |   i;
+  116 | //^?
+```
+
+### Ln 115, Col 3
+```marko
+  113 |   h;
+  114 | //^?
+> 115 |   i;
+      |   ^ const i: 8 | undefined
+  116 | //^?
+  117 | }/>
+  118 |
 ```
 
 ## Diagnostics
-### Ln 98, Col 3
+### Ln 111, Col 3
 ```marko
-   96 |   f;
-   97 | //^?
->  98 |   g;
+  109 |   f;
+  110 | //^?
+> 111 |   g;
       |   ^ Ambiguous reference, variable was defined in multiple places and was not shadowed.
-   99 | //^?
-  100 | }/>
-  101 |
+  112 | //^?
+  113 |   h;
+  114 | //^?
 ```
 
-### Ln 77, Col 5
+### Ln 89, Col 5
 ```marko
-  75 | </if>
-  76 |
-> 77 | <if(show, y)>
+  87 | </if>
+  88 |
+> 89 | <if(show, y)>
      |     ^^^^ Left side of comma operator is unused and has no side effects.
-  78 |   Hi
-  79 | </if>
-  80 |
+  90 |   Hi
+  91 | </if>
+  92 |
 ```
 
-### Ln 77, Col 11
+### Ln 89, Col 11
 ```marko
-  75 | </if>
-  76 |
-> 77 | <if(show, y)>
+  87 | </if>
+  88 |
+> 89 | <if(show, y)>
      |           ^ Cannot find name 'y'.
-  78 |   Hi
-  79 | </if>
-  80 |
+  90 |   Hi
+  91 | </if>
+  92 |
 ```
 
-### Ln 81, Col 5
+### Ln 93, Col 5
 ```marko
-  79 | </if>
-  80 |
-> 81 | <if(show,  y, )>
+  91 | </if>
+  92 |
+> 93 | <if(show,  y, )>
      |     ^^^^ Left side of comma operator is unused and has no side effects.
-  82 |   Hi
-  83 | </if>
-  84 |
+  94 |   Hi
+  95 | </if>
+  96 |
 ```
 
-### Ln 81, Col 12
+### Ln 93, Col 12
 ```marko
-  79 | </if>
-  80 |
-> 81 | <if(show,  y, )>
+  91 | </if>
+  92 |
+> 93 | <if(show,  y, )>
      |            ^ Cannot find name 'y'.
-  82 |   Hi
-  83 | </if>
-  84 |
+  94 |   Hi
+  95 | </if>
+  96 |
 ```
 
diff --git a/packages/language-server/src/__tests__/fixtures/script/if-tag/index.marko b/packages/language-server/src/__tests__/fixtures/script/if-tag/index.marko
@@ -59,6 +59,18 @@
   <const/g = 6 as const/>
 </else>
 
+<if(show)></if>
+<else-if(showAlt)>
+  <if(show)>
+  </if>
+  <else-if(showAlt)>
+    <const/h = 7 as const/>
+  </else-if>
+  <else>
+    <const/i = 8 as const/>
+  </else>
+</else-if>
+
 <if=show>
   Hi
 </if>
@@ -82,6 +94,7 @@
   Hi
 </if>
 
+
 <effect() {
   a;
 //^?
@@ -96,5 +109,9 @@
   f;
 //^?
   g;
+//^?
+  h;
+//^?
+  i;
 //^?
 }/>
diff --git a/packages/language-tools/src/extractors/script/index.ts b/packages/language-tools/src/extractors/script/index.ts
@@ -448,7 +448,11 @@ constructor(_?: Return) {}
     this.#extractor.write(");\n");
   }
 
-  #writeChildren(parent: Node.ParentNode, children: Node.ChildNode[]) {
+  #writeChildren(
+    parent: Node.ParentNode,
+    children: Node.ChildNode[],
+    skipRenderId = false,
+  ) {
     const last = children.length - 1;
     let returnTag: Node.Tag | undefined;
     let i = 0;
@@ -465,20 +469,23 @@ constructor(_?: Return) {}
               // @ts-expect-error we know we are in an If Tag
               declare const child: IfTag;
               const alternates = IF_TAG_ALTERNATES.get(child);
-              let renderId = this.#getRenderId(child);
+              let renderId: number | undefined;
 
-              if (!renderId && alternates) {
-                for (const { node } of alternates) {
-                  if ((renderId = this.#getRenderId(node))) break;
+              if (!skipRenderId) {
+                renderId = this.#getRenderId(child);
+                if (!renderId && alternates) {
+                  for (const { node } of alternates) {
+                    if ((renderId = this.#getRenderId(node))) break;
+                  }
                 }
-              }
 
-              if (renderId) {
-                this.#extractor.write(
-                  `${varShared("assertRendered")}(${varShared(
-                    "rendered",
-                  )}, ${renderId}, (() => {\n`,
-                );
+                if (renderId) {
+                  this.#extractor.write(
+                    `${varShared("assertRendered")}(${varShared(
+                      "rendered",
+                    )}, ${renderId}, (() => {\n`,
+                  );
+                }
               }
 
               this.#writeComments(child);
@@ -491,9 +498,10 @@ constructor(_?: Return) {}
                 )
                 .write(") {\n");
 
-              if (child.body) {
+              const ifBody = this.#processBody(child);
+              if (ifBody?.renderBody) {
                 const localBindings = getHoistSources(child);
-                this.#writeChildren(child, child.body);
+                this.#writeChildren(child, ifBody.renderBody, true);
 
                 if (localBindings) {
                   this.#extractor.write("return {\nscope:");
@@ -519,9 +527,10 @@ constructor(_?: Return) {}
                     this.#extractor.write("\n} else if (undefined) {\n");
                   }
 
-                  if (node.body) {
+                  const alternateBody = this.#processBody(node);
+                  if (alternateBody?.renderBody) {
                     const localBindings = getHoistSources(node);
-                    this.#writeChildren(node, node.body);
+                    this.#writeChildren(node, alternateBody.renderBody, true);
 
                     if (localBindings) {
                       this.#extractor.write("return {\nscope:");
@@ -1400,7 +1409,6 @@ constructor(_?: Return) {}
               // If tags are special, here we group them with their related else-if and else tags.
               let alternates: IfTagAlternates;
               hasDynamicAttrTags ||= child.hasAttrTags;
-
               loop: while (i <= last) {
                 const nextChild = body[i++];
                 switch (nextChild.type) {