feat: update resize observer api

Author: LastLeaf

glass-easel-miniprogram-adapter/src/component.ts

@@ -364,7 +364,7 @@ export class ComponentCaller<
   }
 
   /** Create a resize observer */
-  createResizeObserver(options: { observeAll?: boolean }): ResizeObserver {
+  createResizeObserver(options?: { observeAll?: boolean }): ResizeObserver {
     return new ResizeObserver(this, !!options?.observeAll)
   }
 

glass-easel-miniprogram-adapter/tests/selector.test.ts

@@ -700,6 +700,46 @@ describe('intersection observer', () => {
   })
 })
 
+describe('resize observer', () => {
+  test('create resize observer', () => {
+    const env = new MiniProgramEnv()
+    const codeSpace = env.createCodeSpace('', true)
+
+    codeSpace.addComponentStaticConfig('path/to/comp', {
+      usingComponents: {},
+    })
+    codeSpace.addCompiledTemplate(
+      'path/to/comp',
+      tmpl(`
+        <div id="a" />
+        <div id="a" />
+      `),
+    )
+    // eslint-disable-next-line arrow-body-style
+    codeSpace.componentEnv('path/to/comp', ({ Component }) => {
+      return Component()
+        .lifetime('attached', function () {
+          const o1 = this.createResizeObserver()
+          o1.observe('#a', () => {
+            /* empty */
+          })
+          const o2 = this.createResizeObserver({ observeAll: true })
+          o2.borderBox().observe('#a', () => {
+            /* empty */
+          })
+          o1.disconnect()
+          o2.disconnect()
+        })
+        .register()
+    })
+
+    const backendContext = new glassEasel.EmptyComposedBackendContext()
+    const ab = env.associateBackend(backendContext)
+    const root = ab.createRoot('body', codeSpace, 'path/to/comp')
+    glassEasel.Element.pretendAttached(root.getComponent())
+  })
+})
+
 describe('media query observer', () => {
   test('create media query observer', () => {
     const env = new MiniProgramEnv()

glass-easel/src/backend/current_window_backend_context.ts

@@ -13,7 +13,7 @@ import {
   type MediaQueryStatus,
   type Observer,
 } from './shared'
-import type * as shared from './shared'
+import * as shared from './shared'
 
 const DELEGATE_EVENTS = [
   'touchstart',
@@ -453,6 +453,47 @@ export class CurrentWindowBackendContext implements Context {
     }
   }
 
+  createResizeObserver(
+    targetElement: Element,
+    mode: shared.ResizeObserverMode,
+    listener: (res: shared.ResizeStatus) => void,
+  ): Observer {
+    const observer = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const elem = entry.target
+        const isVertialWritingMode = window
+          .getComputedStyle(elem)
+          .writingMode.startsWith('vertical-')
+        if (entry.contentBoxSize.length !== 1 || entry.borderBoxSize.length !== 1) {
+          // eslint-disable-next-line no-console
+          console.error('currently multiple boxes are not supported in resize observer')
+          return
+        }
+        const contentBox = entry.contentBoxSize[0]!
+        const borderBox = entry.borderBoxSize[0]!
+        listener({
+          boundingContentBoxWidth: isVertialWritingMode
+            ? contentBox.blockSize
+            : contentBox.inlineSize,
+          boundingContentBoxHeight: isVertialWritingMode
+            ? contentBox.inlineSize
+            : contentBox.blockSize,
+          boundingBorderBoxWidth: isVertialWritingMode ? borderBox.blockSize : borderBox.inlineSize,
+          boundingBorderBoxHeight: isVertialWritingMode
+            ? borderBox.inlineSize
+            : borderBox.blockSize,
+        })
+      })
+    })
+    const box = mode === shared.ResizeObserverMode.BorderBox ? 'border-box' : 'content-box'
+    observer.observe(targetElement as unknown as HTMLElement, { box })
+    return {
+      disconnect() {
+        observer.disconnect()
+      },
+    }
+  }
+
   createMediaQueryObserver(
     status: MediaQueryStatus,
     listener: (res: { matches: boolean }) => void,

glass-easel/src/backend/shared.ts

@@ -85,10 +85,10 @@ export const enum ResizeObserverMode {
 }
 
 export type ResizeStatus = {
-  borderWidth: number
-  borderHeight: number
-  contentWidth: number
-  contentHeight: number
+  boundingContentBoxWidth: number
+  boundingContentBoxHeight: number
+  boundingBorderBoxWidth: number
+  boundingBorderBoxHeight: number
 }
 
 export type MediaQueryStatus = {

glass-easel/src/element.ts

@@ -3263,7 +3263,6 @@ export class Element implements NodeCast {
    * Create a resize observer
    *
    * It is possible to choose to observe either the content box or the border box.
-   * The listener always triggers once immediately after this call.
    */
   createResizeObserver(
     mode: ResizeObserverMode,