fix: do not duplicated variable names when multiple `svelte:component…

…` exist (#121)

.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

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}`);

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>

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>

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}

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}