@edgeandnode/eds-react 1.1.0 → 1.2.0

package/src/utils/internal/styleScheduler.ts

@@ -1,7 +1,6 @@
 /**
  * Batched style scheduler that collects style operations within a single frame and executes them
- * together using `requestAnimationFrame`. This reduces layout thrashing by batching all operations
- * into a single reflow.
+ * together using `requestAnimationFrame`. Reads run before writes to avoid layout thrashing.
  *
  * @example
  *   ````ts
@@ -23,8 +22,9 @@
  */
 
 class StyleScheduler {
-  private rafId: number | null = null
-  private pending: (() => void)[] = []
+  private animationFrameId: number | null = null
+  private pending = new Set<() => void>()
+  private pendingWrites = new Set<() => void>()
 
   /**
    * Schedule an operation to be executed in the next animation frame. All operations scheduled
@@ -32,24 +32,52 @@ class StyleScheduler {
    * Returns a function that cancels the scheduled callback if it hasn't run yet.
    */
   schedule(callback: () => void): () => void {
-    this.pending.push(callback)
+    return this.enqueue(callback, this.pending)
+  }
 
-    if (this.rafId === null) {
-      this.rafId = requestAnimationFrame(() => {
-        const callbacks = this.pending
-        this.pending = []
-        this.rafId = null
+  /** Schedule a write after all reads in the frame, including writes queued during those reads. */
+  scheduleWrite(callback: () => void): () => void {
+    return this.enqueue(callback, this.pendingWrites)
+  }
 
-        callbacks.forEach((cb) => cb())
-      })
+  private enqueue(callback: () => void, queue: Set<() => void>): () => void {
+    const operation = () => callback()
+    queue.add(operation)
+    this.requestFrame()
+    return () => {
+      queue.delete(operation)
     }
+  }
 
-    return () => {
-      const index = this.pending.indexOf(callback)
-      if (index !== -1) this.pending.splice(index, 1)
+  private runBatch(queue: Set<() => void>) {
+    try {
+      for (const callback of queue) {
+        queue.delete(callback)
+        callback()
+      }
+    } finally {
+      // Cancellation closures can outlive the batch, including when a callback throws.
+      queue.clear()
     }
   }
 
+  private requestFrame() {
+    if (this.animationFrameId !== null) return
+    this.animationFrameId = requestAnimationFrame(() => {
+      const callbacks = this.pending
+      this.pending = new Set()
+      try {
+        this.runBatch(callbacks)
+        const writes = this.pendingWrites
+        this.pendingWrites = new Set()
+        this.runBatch(writes)
+      } finally {
+        this.animationFrameId = null
+        if (this.pending.size > 0 || this.pendingWrites.size > 0) this.requestFrame()
+      }
+    })
+  }
+
   /**
    * Get computed style for an element in a batched manner. Returns a promise that resolves with the
    * computed style once all batched operations are executed.

package/src/utils/styleObserver.ts

@@ -1,6 +1,6 @@
 import StyleObserver from 'style-observer'
 
-import { styleScheduler } from './internal/index.ts'
+import { BatchedElementStyleObserver, styleScheduler } from './internal/index.ts'
 
 export interface StyleObserverRecord<T extends string = string> {
   target: Element
@@ -59,14 +59,6 @@ class StyleObserverManager {
       this.subscriptions.set(element, elementSubscriptions)
     }
 
-    let elementObserved = this.observed.get(element)
-    if (!elementObserved) {
-      elementObserved = new Set()
-      this.observed.set(element, elementObserved)
-    }
-
-    const newProperties: string[] = []
-
     for (const property of properties) {
       let propertySubscriptions = elementSubscriptions.get(property)
       if (!propertySubscriptions) {
@@ -74,49 +66,55 @@ class StyleObserverManager {
         elementSubscriptions.set(property, propertySubscriptions)
       }
       propertySubscriptions.add(callback)
-
-      if (!elementObserved.has(property)) {
-        newProperties.push(property)
-        elementObserved.add(property)
-      }
     }
 
-    // Defer observe to rAF to batch with other subscriptions in the same frame
-    const cancelObserve =
-      newProperties.length > 0
-        ? styleScheduler.schedule(() => {
-            this.observer.observe(element, newProperties)
-          })
-        : undefined
+    this.scheduleUpdate(element)
 
     return () => {
-      cancelObserve?.()
-
-      const removedProperties: string[] = []
-
       for (const property of properties) {
         const propertySubscriptions = elementSubscriptions.get(property)
-        if (propertySubscriptions) {
-          propertySubscriptions.delete(callback)
-          if (propertySubscriptions.size === 0) {
-            elementSubscriptions.delete(property)
-            elementObserved!.delete(property)
-            removedProperties.push(property)
-          }
-        }
+        propertySubscriptions?.delete(callback)
+        if (propertySubscriptions?.size === 0) elementSubscriptions.delete(property)
       }
+      if (elementSubscriptions.size === 0) this.subscriptions.delete(element)
+      this.scheduleUpdate(element)
+    }
+  }
 
-      if (elementSubscriptions.size === 0) {
-        this.subscriptions.delete(element)
+  private pending = new Set<Element>()
+
+  private scheduleUpdate(element: Element) {
+    if (this.pending.has(element)) return
+    this.pending.add(element)
+    styleScheduler.schedule(() => {
+      this.pending.delete(element)
+      const properties = new Set(this.subscriptions.get(element)?.keys())
+      const observed = this.observed.get(element) ?? new Set<string>()
+      const added = [...properties].filter((property) => !observed.has(property))
+      const removed = [...observed].filter((property) => !properties.has(property))
+
+      if (properties.size > 0) {
+        this.observed.set(element, properties)
+      } else {
         this.observed.delete(element)
       }
 
-      if (removedProperties.length > 0) {
-        styleScheduler.schedule(() => {
-          this.observer.unobserve(element, removedProperties)
-        })
+      if (added.length > 0) {
+        if (!this.observer.elementObservers.has(element)) {
+          const observer = new BatchedElementStyleObserver(element, (records) => {
+            this.observer.changed(records)
+          })
+          this.observer.elementObservers.set(element, observer)
+          styleScheduler.scheduleWrite(() => observer.flush())
+          this.observer.observe(element, added)
+        } else {
+          styleScheduler.scheduleWrite(() => this.observer.observe(element, added))
+        }
       }
-    }
+      if (removed.length > 0) {
+        styleScheduler.scheduleWrite(() => this.observer.unobserve(element, removed))
+      }
+    })
   }
 }
 

package/src/vite-plugin.ts

@@ -0,0 +1 @@
+export { default } from '@edgeandnode/eds-css/vite-plugin'