From ed575cc9270b92564d8e0bec86aa88d0412af9ac Mon Sep 17 00:00:00 2001
From: Nguyen Tran <88808276+ngtr6788@users.noreply.github.com>
Date: Wed, 1 Mar 2023 05:06:15 -0500
Subject: [PATCH] fix: make svelte-ignore work above components  (#8338)

Fixes #8082, where svelte-ignore somehow does not pick up the reactive-component warning.

The issue on this problem is that the map_children function suppresses warnings and errors while traversing AST nodes as src/compiler/compile/nodes classes. However, the reactive-component warning is called in src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts, and its warnings are not suppressed in map_children. Thus, we need to extract ignores and suppress here separately.
---
 .../wrappers/InlineComponent/index.ts         |  4 ++++
 src/compiler/utils/extract_svelte_ignore.ts   | 23 +++++++++++++++++++
 .../samples/component-dynamic/input.svelte    | 14 ++++++++++-
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index bca01fdb4c..5053e8c5d2 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -21,6 +21,7 @@ import SlotTemplate from '../../../nodes/SlotTemplate';
 import { is_head } from '../shared/is_head';
 import compiler_warnings from '../../../compiler_warnings';
 import { namespaces } from '../../../../utils/namespaces';
+import { extract_ignores_above_node } from '../../../../utils/extract_svelte_ignore';
 
 type SlotDefinition = { block: Block; scope: TemplateScope; get_context?: Node; get_changes?: Node };
 
@@ -111,9 +112,12 @@ export default class InlineComponentWrapper extends Wrapper {
 			return;
 		}
 
+    const ignores = extract_ignores_above_node(this.node);  
+    this.renderer.component.push_ignores(ignores);
 		if (variable.reassigned || variable.export_name || variable.is_reactive_dependency) {
 			this.renderer.component.warn(this.node, compiler_warnings.reactive_component(name));
 		}
+    this.renderer.component.pop_ignores();
 	}
 
 	render(
diff --git a/src/compiler/utils/extract_svelte_ignore.ts b/src/compiler/utils/extract_svelte_ignore.ts
index 30be2893a4..d4a8369a16 100644
--- a/src/compiler/utils/extract_svelte_ignore.ts
+++ b/src/compiler/utils/extract_svelte_ignore.ts
@@ -1,6 +1,7 @@
 import { TemplateNode } from '../interfaces';
 import { flatten } from './flatten';
 import { regex_whitespace } from './patterns';
+import { INode } from '../compile/nodes/interfaces';
 
 const regex_svelte_ignore = /^\s*svelte-ignore\s+([\s\S]+)\s*$/m;
 
@@ -33,3 +34,25 @@ export function extract_ignores_above_position(position: number, template_nodes:
 
 	return [];
 }
+
+export function extract_ignores_above_node(node: INode): string[] {
+  /**
+    * This utilizes the fact that node has a prev and a next attribute
+    * which means that it can find svelte-ignores along
+    * the nodes on the same level as itself who share the same parent. 
+    */
+  let cur_node = node.prev;
+  while (cur_node) {
+    if (cur_node.type !== 'Comment' && cur_node.type !== 'Text') {
+      return [];
+	  }
+
+	  if (cur_node.type === 'Comment' && cur_node.ignores.length) {
+      return cur_node.ignores;
+	  }
+
+    cur_node = cur_node.prev;
+  }
+
+  return [];
+}
diff --git a/test/validator/samples/component-dynamic/input.svelte b/test/validator/samples/component-dynamic/input.svelte
index f591a84fe1..241a33c5ea 100644
--- a/test/validator/samples/component-dynamic/input.svelte
+++ b/test/validator/samples/component-dynamic/input.svelte
@@ -15,4 +15,16 @@
 <Let />
 <ExportLet />
 <Reactive />
-<svelte:component this={Let} />
\ No newline at end of file
+<svelte:component this={Let} />
+
+<!-- Here, we test to see if svelte-ignore works with reactive-component -->
+<!-- svelte-ignore reactive-component -->
+<Let />
+<div>
+  <!-- svelte-ignore reactive-component -->
+  <ExportLet />
+  <div>
+    <!-- svelte-ignore reactive-component -->
+    <Reactive />
+  </div>
+</div>