From 452be3718b5ddf53b048c67c97bc4b5237c8493b Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 9 May 2024 21:14:38 +0900
Subject: [PATCH] fix: do not duplicated variable names when multiple
 `svelte:component` exist (#121)

---
 .changeset/six-pears-battle.md                |  5 +++++
 src/preprocess/index.js                       |  2 +-
 .../input.svelte                              |  7 ++++++
 .../output.svelte                             | 14 ++++++++++++
 test/fixture/svelte:component/input.svelte    | 12 ++++++++++
 test/fixture/svelte:component/output.svelte   | 22 +++++++++++++++++++
 6 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/six-pears-battle.md
 create mode 100644 test/fixture/element-multi-element-with-this/input.svelte
 create mode 100644 test/fixture/element-multi-element-with-this/output.svelte
 create mode 100644 test/fixture/svelte:component/input.svelte
 create mode 100644 test/fixture/svelte:component/output.svelte

diff --git a/.changeset/six-pears-battle.md b/.changeset/six-pears-battle.md
new file mode 100644
index 0000000..011c390
--- /dev/null
+++ b/.changeset/six-pears-battle.md
@@ -0,0 +1,5 @@
+---
+'svelte-preprocess-delegate-events': patch
+---
+
+fix: do not duplicated variable names when multiple svelte:component exist
diff --git a/src/preprocess/index.js b/src/preprocess/index.js
index 35f12e7..ad4d728 100644
--- a/src/preprocess/index.js
+++ b/src/preprocess/index.js
@@ -32,7 +32,7 @@ const getUniqueVarName = (usedVarNames, name) => {
   // Remove chars that can not use for variable name.
   const normalized = name.replace(/[^a-zA-Z_$]|^(\d)/g, '_');
   let i = 0;
-  while (usedVarNames.has(`${name}${i}`)) {
+  while (usedVarNames.has(`${normalized}${i}`)) {
     i++;
   }
   usedVarNames.add(`${normalized}${i}`);
diff --git a/test/fixture/element-multi-element-with-this/input.svelte b/test/fixture/element-multi-element-with-this/input.svelte
new file mode 100644
index 0000000..17400bf
--- /dev/null
+++ b/test/fixture/element-multi-element-with-this/input.svelte
@@ -0,0 +1,7 @@
+<script>
+  let button1;
+  let button2;
+</script>
+
+<button on:* bind:this={button1}>Click Me</button>
+<button on:* bind:this={button2}>Click Me</button>
diff --git a/test/fixture/element-multi-element-with-this/output.svelte b/test/fixture/element-multi-element-with-this/output.svelte
new file mode 100644
index 0000000..1eafb87
--- /dev/null
+++ b/test/fixture/element-multi-element-with-this/output.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { registerDelegatedEvents } from 'svelte-preprocess-delegate-events/runtime';
+  import { get_current_component } from 'svelte/internal';
+  let button1;
+  let button2;
+  
+  const component0 = get_current_component();
+  $: registerDelegatedEvents(button1, component0, (handler) => handler, {});
+    
+  $: registerDelegatedEvents(button2, component0, (handler) => handler, {});
+  </script>
+
+<button  bind:this={button1}>Click Me</button>
+<button  bind:this={button2}>Click Me</button>
diff --git a/test/fixture/svelte:component/input.svelte b/test/fixture/svelte:component/input.svelte
new file mode 100644
index 0000000..cda21cc
--- /dev/null
+++ b/test/fixture/svelte:component/input.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Component from './Component.svelte';
+  import Component2 from './Component2.svelte';
+
+  const a = false;
+</script>
+
+{#if a}
+  <svelte:component this={Component} on:* />
+{:else}
+  <svelte:component this={Component2} on:* />
+{/if}
diff --git a/test/fixture/svelte:component/output.svelte b/test/fixture/svelte:component/output.svelte
new file mode 100644
index 0000000..c8caf5e
--- /dev/null
+++ b/test/fixture/svelte:component/output.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+  import { boundComponents } from 'svelte-preprocess-delegate-events/runtime';
+  import { proxyCallbacks } from 'svelte-preprocess-delegate-events/runtime';
+  import Component from './Component.svelte';
+  import Component2 from './Component2.svelte';
+
+  const a = false;
+
+  const svelte_component0 = boundComponents();
+  const component0 = get_current_component();
+  $: proxyCallbacks(component0, svelte_component0.bounds, false);
+  
+  const svelte_component1 = boundComponents();
+  $: proxyCallbacks(component0, svelte_component1.bounds, false);
+  </script>
+
+{#if a}
+  <svelte:component this={Component} bind:this={svelte_component0.bounds} />
+{:else}
+  <svelte:component this={Component2} bind:this={svelte_component1.bounds} />
+{/if}