fix(houdini-utils): generate non-clashing IDs

change/@fluentui-contrib-houdini-utils-4e6eb0e8-cb04-4972-84ca-bbd91a76aa68.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(houdini-utils): generate non-clashing IDs",
+  "packageName": "@fluentui-contrib/houdini-utils",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/houdini-utils/src/paint/fallback/fallbackPaintAnimation.ts

@@ -12,6 +12,7 @@ import type {
   FallbackAnimationState,
   PaintWorklet,
 } from '../../types';
+import { generateFallbackId } from './util/generateFallbackId';
 
 const cannotDraw = {
   id: '',
@@ -24,8 +25,6 @@ const cannotDraw = {
   stop: () => {},
 };
 
-let flairFallbackId = 0;
-
 export const fallbackPaintAnimation = (
   targetEl: HTMLElement,
   paintWorklet: PaintWorklet,
@@ -36,13 +35,14 @@ export const fallbackPaintAnimation = (
     // eslint-disable-next-line no-restricted-globals
     targetDocument.defaultView ?? (window as Window & typeof globalThis);
 
+  const id = generateFallbackId();
   const state: FallbackAnimationState = {
     targetEl,
     targetWindow,
 
     ctx: null,
     mode: 'to-data-url',
-    id: `houdini-fallback-${++flairFallbackId}`,
+    id: `${id}-houdini-fallback`,
     wrapper: null,
     running: false,
     resizeObserver: null,
@@ -52,7 +52,8 @@ export const fallbackPaintAnimation = (
   // Create a wrapper for us to store these elements in so we avoid
   // thrashing the DOM with appends.
   if (!state.wrapper) {
-    const wrapperId = `houdini-fallback-wrapper-${flairFallbackId}`;
+    const wrapperId = `${id}-houdini-fallback-wrapper`;
+
     state.wrapper = appendWrapper(wrapperId, targetDocument.body);
   }
 

packages/houdini-utils/src/paint/fallback/util/generateFallbackId.test.ts

@@ -0,0 +1,16 @@
+import { generateFallbackId } from './generateFallbackId';
+
+describe('generateFallbackId', () => {
+  it('should generate IDs with correct prefix', () => {
+    const id = generateFallbackId();
+    expect(id).toMatch(/^f-/);
+  });
+
+  it('should generate unique IDs', () => {
+    const ids = new Set<string>();
+    for (let i = 0; i < 1000; i++) {
+      ids.add(generateFallbackId());
+    }
+    expect(ids.size).toBe(1000);
+  });
+});

packages/houdini-utils/src/paint/fallback/util/generateFallbackId.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates a unique DOM ID for fallback animations.
+ * Fast and simple implementation using timestamp + random suffix.
+ */
+export function generateFallbackId(): string {
+  return `f-${Date.now().toString(36)}-${Math.random()
+    .toString(36)
+    .slice(2, 9)}`;
+}