From bcfbe063dce459b3d56b3be6626e83ac306d48f1 Mon Sep 17 00:00:00 2001
From: Simon Milfred <smi@limbo.works>
Date: Mon, 10 Jun 2024 14:08:53 +0200
Subject: [PATCH] fix: made GUID and number id composables non-reliant on useId

---
 .playground/pages/[...slug].vue |  2 ++
 composables/useGUID.js          | 27 +++++++++++++++------------
 composables/useNumberId.js      |  8 ++++++--
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/.playground/pages/[...slug].vue b/.playground/pages/[...slug].vue
index 3986ef9..a78a850 100644
--- a/.playground/pages/[...slug].vue
+++ b/.playground/pages/[...slug].vue
@@ -12,6 +12,8 @@
 const route = useRoute();
 const layout = 'default';
 
+console.log(useGUID(), useNumberId());
+
 definePageMeta({
 	layout: false,
 	key: (route) => route.path,
diff --git a/composables/useGUID.js b/composables/useGUID.js
index aee944f..0630427 100644
--- a/composables/useGUID.js
+++ b/composables/useGUID.js
@@ -1,14 +1,17 @@
-/* Create a GUID */
-function useGUID(key = useId()) {
-	return useState('_guid-' + key, () => {
-		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
-			/[xy]/g,
-			function (c) {
-				const r = (Math.random() * 16) | 0,
-					v = c == 'x' ? r : (r & 0x3) | 0x8;
-				return v.toString(16);
-			}
-		);
-	}).value;
+/* Make a GUID */
+function useGUID(key) {
+	return key ? useState('_guid-' + key, makeGUID).value : makeGUID();
 }
+
 export default useGUID;
+
+function makeGUID() {
+	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+		/[xy]/g,
+		function (c) {
+			const r = (Math.random() * 16) | 0,
+				v = c == 'x' ? r : (r & 0x3) | 0x8;
+			return v.toString(16);
+		}
+	);
+}
diff --git a/composables/useNumberId.js b/composables/useNumberId.js
index 17243a8..e376b9f 100644
--- a/composables/useNumberId.js
+++ b/composables/useNumberId.js
@@ -1,6 +1,10 @@
 /* Create a number ID (unlike useId() which generates an id usable by the DOM) */
-function useNumberId(key = useId()) {
+function useNumberId(key) {
 	const counter = useState(() => 0);
-	return useState('_num-id-' + key, () => counter.value++).value;
+	return key ? useState('_num-id-' + key, nextNumber).value : nextNumber();
+
+	function nextNumber() {
+		return counter.value++;
+	}
 }
 export default useNumberId;