@edgeandnode/eds-react 1.1.1 → 1.2.0

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'