Support HTMLElement in useReward for direct template ref usage

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+package-lock.json

src/App.vue

@@ -1,13 +1,19 @@
-<!-- <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 import { useReward } from './composables/confetti'
-const {reward: confettiReward, isAnimating: isConfettiAnimating} = useReward('fsfsfdsfdsf', 'confetti');
 
-onMounted(() => {
-  confettiReward()
-})
+// Example 1: Traditional string ID (backward compatible)
+const { reward: confettiReward } = useReward('confetti-id', 'confetti');
 
-</script> -->
+// Example 2: Using template ref (new feature - Vue 3.5 style)
+const balloonContainer = ref<HTMLElement | null>(null);
+const { reward: balloonReward } = useReward(balloonContainer, 'balloons');
+
+// Example 3: Using template ref with emoji
+const emojiContainer = ref<HTMLElement | null>(null);
+const { reward: emojiReward } = useReward(emojiContainer, 'emoji');
+
+</script>
 
 <script lang="ts">
 export default {
@@ -17,21 +23,52 @@ export default {
   },
   methods: {
     conf() {
-      const { reward: confettiReward, isAnimating: isConfettiAnimating } = this.$reward('g', 'confetti')
+      const { reward: confettiReward, isAnimating: isConfettiAnimating } = this.$reward('options-api-id', 'confetti')
       confettiReward()
     }
   }
 };
 </script>
 
 <template>
-  <div>
-    <button @click="conf">
-      <span id="fsfsfdsfdsf"></span>
-      🎉
-    </button>
+  <div style="padding: 20px;">
+    <h1>Vue Rewards Demo</h1>
+
+    <!-- Example 1: Traditional string ID -->
+    <div style="margin: 20px 0;">
+      <h2>Example 1: String ID (Traditional)</h2>
+      <button @click="confettiReward">
+        <span id="confetti-id"></span>
+        🎉 Confetti (String ID)
+      </button>
+    </div>
+
+    <!-- Example 2: Template Ref with Balloons -->
+    <div style="margin: 20px 0;">
+      <h2>Example 2: Template Ref (New Feature)</h2>
+      <button @click="balloonReward">
+        <span ref="balloonContainer"></span>
+        🎈 Balloons (Template Ref)
+      </button>
+    </div>
 
+    <!-- Example 3: Template Ref with Emoji -->
+    <div style="margin: 20px 0;">
+      <h2>Example 3: Template Ref with Emoji</h2>
+      <button @click="emojiReward">
+        <span ref="emojiContainer"></span>
+        😀 Emoji (Template Ref)
+      </button>
+    </div>
 
+    <!-- Example 4: Options API with String ID -->
+    <div style="margin: 20px 0;">
+      <h2>Example 4: Options API (String ID)</h2>
+      <button @click="conf">
+        <span id="options-api-id"></span>
+        🎊 Confetti (Options API)
+      </button>
+    </div>
   </div>
 </template>
 

src/composables/confetti.ts

@@ -1,32 +1,43 @@
-import { ref } from "vue";
+import { ref, Ref, MaybeRefOrGetter, toValue } from "vue";
 import { confetti } from "../components/Confetti/Confetti";
 import { emoji } from "../components/Emoji/Emoji";
 import { balloons } from "../components/Balloons/Balloons";
 import { getContainerById } from "../functions/helpers";
+import { ConfettiConfig } from "../components/Confetti/Confetti.types";
+import { EmojiConfig } from "../components/Emoji/Emoji.types";
+import { BalloonsConfig } from "../components/Balloons/Balloons.types";
 
-export function useReward(id, type, config) {
+type RewardType = 'confetti' | 'emoji' | 'balloons';
+type RewardConfig = ConfettiConfig | EmojiConfig | BalloonsConfig;
+
+export function useReward(
+  id: MaybeRefOrGetter<string | HTMLElement>,
+  type?: RewardType,
+  config?: RewardConfig
+) {
   const isAnimating = ref(false);
 
   const internalAnimatingCallback = () => {
     isAnimating.value = false;
   };
 
   const reward = () => {
-    const foundContainer = getContainerById(id);
+    const idValue = toValue(id);
+    const foundContainer = getContainerById(idValue);
     if (!foundContainer) return;
     isAnimating.value = true;
     switch (type) {
       case 'confetti':
-        confetti(foundContainer, internalAnimatingCallback, config);
+        confetti(foundContainer, internalAnimatingCallback, config as ConfettiConfig);
         break;
       case 'emoji':
-        emoji(foundContainer, internalAnimatingCallback, config);
+        emoji(foundContainer, internalAnimatingCallback, config as EmojiConfig);
         break;
       case 'balloons':
-        balloons(foundContainer, internalAnimatingCallback, config);
+        balloons(foundContainer, internalAnimatingCallback, config as BalloonsConfig);
         break;
       default:
-        console.error(`${type} is not a valid react-rewards type.`);
+        console.error(`${type} is not a valid vue-rewards type.`);
     }
   };
 

src/functions/helpers.ts

@@ -65,7 +65,17 @@ export const generatePhysics = (
   };
 };
 
-export const getContainerById = (id: string) => {
+export const getContainerById = (id: string | HTMLElement): HTMLElement | null => {
+  // If it's already an HTMLElement, return it directly
+  if (typeof id !== 'string') {
+    if (id instanceof HTMLElement) {
+      return id;
+    }
+    console.error('Invalid argument: expected a string ID or HTMLElement');
+    return null;
+  }
+
+  // Otherwise, treat it as an ID string
   const container = document.getElementById(id);
   if (!container) {
     console.error(