Merge pull request #267 from wechat-miniprogram/feat-resize-observer

Implement resize observer interface

Author: LastLeaf

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

@@ -3,6 +3,7 @@ import { type utils as typeUtils } from './types'
 import { type ComponentType, type GeneralBehavior, type TraitBehavior } from './behavior'
 import { SelectorQuery } from './selector_query'
 import { IntersectionObserver } from './intersection'
+import { ResizeObserver } from './resize'
 import { MediaQueryObserver } from './media_query'
 
 type DataList = typeUtils.DataList
@@ -362,6 +363,11 @@ export class ComponentCaller<
     )
   }
 
+  /** Create a resize observer */
+  createResizeObserver(options?: { observeAll?: boolean }): ResizeObserver {
+    return new ResizeObserver(this, !!options?.observeAll)
+  }
+
   /** Create an media query observer */
   createMediaQueryObserver(): MediaQueryObserver {
     return new MediaQueryObserver(this)

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

@@ -0,0 +1,56 @@
+import * as glassEasel from 'glass-easel'
+import { type GeneralComponent } from './component'
+
+export class ResizeObserver {
+  private _$comp: GeneralComponent
+  private _$observeAll: boolean
+  private _$mode = glassEasel.backend.ResizeObserverMode.ContentBox
+  private _$observers: glassEasel.backend.Observer[] = []
+
+  /** @internal */
+  constructor(comp: GeneralComponent, observeAll: boolean) {
+    this._$comp = comp
+    this._$observeAll = observeAll
+  }
+
+  contentBox(): this {
+    this._$mode = glassEasel.backend.ResizeObserverMode.ContentBox
+    return this
+  }
+
+  borderBox(): this {
+    this._$mode = glassEasel.backend.ResizeObserverMode.BorderBox
+    return this
+  }
+
+  observe(targetSelector: string, listener: (status: glassEasel.backend.ResizeStatus) => void) {
+    const shadowRoot = this._$comp._$.getShadowRoot()
+    let targets: glassEasel.Element[]
+    if (!shadowRoot) {
+      targets = []
+    } else if (this._$observeAll) {
+      targets = shadowRoot.querySelectorAll(targetSelector)
+    } else {
+      const elem = shadowRoot.querySelector(targetSelector)
+      if (elem === null) {
+        targets = []
+      } else {
+        targets = [elem]
+      }
+    }
+    targets.forEach((target) => {
+      const observer = target.createResizeObserver(this._$mode, listener)
+      if (observer === null) {
+        // TODO warn no observer attached
+      } else {
+        this._$observers.push(observer)
+      }
+    })
+  }
+
+  disconnect() {
+    const observers = this._$observers
+    this._$observers = []
+    observers.forEach((observer) => observer.disconnect())
+  }
+}

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

@@ -79,6 +79,18 @@ export type IntersectionStatus = {
   time: number
 }
 
+export const enum ResizeObserverMode {
+  ContentBox = 1,
+  BorderBox = 2,
+}
+
+export type ResizeStatus = {
+  boundingContentBoxWidth: number
+  boundingContentBoxHeight: number
+  boundingBorderBoxWidth: number
+  boundingBorderBoxHeight: number
+}
+
 export type MediaQueryStatus = {
   minWidth?: number
   maxWidth?: number

glass-easel/src/backend/suggested_backend_protocol.ts

@@ -9,6 +9,8 @@ import {
   type IntersectionStatus,
   type MediaQueryStatus,
   type Observer,
+  type ResizeObserverMode,
+  type ResizeStatus,
   type ScrollOffset,
 } from './shared'
 
@@ -37,6 +39,7 @@ export type Element<E> = {
     thresholds: number[],
     listener: (res: IntersectionStatus) => void,
   ): Observer
+  createResizeObserver(mode: ResizeObserverMode, listener: (res: ResizeStatus) => void): Observer
   getMatchedRules(cb: (res: GetMatchedRulesResponses) => void): void
   getPseudoMatchedRules(pseudoType: string, cb: (res: GetMatchedRulesResponses) => void): void
   getInheritedRules(cb: (res: GetInheritedRulesResponses) => void): void

glass-easel/src/element.ts

@@ -6,6 +6,8 @@ import {
   type GeneralBackendElement,
   type IntersectionStatus,
   type Observer,
+  type ResizeObserverMode,
+  type ResizeStatus,
   type ScrollOffset,
   type backend,
   type composedBackend,
@@ -3257,6 +3259,33 @@ export class Element implements NodeCast {
     return null
   }
 
+  /**
+   * Create a resize observer
+   *
+   * It is possible to choose to observe either the content box or the border box.
+   */
+  createResizeObserver(
+    mode: ResizeObserverMode,
+    listener: ((res: ResizeStatus) => void) | null,
+  ): Observer | null {
+    const backendElement = this._$backendElement
+    if (backendElement) {
+      if (BM.DOMLIKE || (BM.DYNAMIC && this.getBackendMode() === BackendMode.Domlike)) {
+        const context = this._$nodeTreeContext as domlikeBackend.Context | null
+        if (!context || !context.createResizeObserver) return null
+        return context.createResizeObserver(
+          backendElement as domlikeBackend.Element,
+          mode,
+          listener!,
+        )
+      }
+      const be = backendElement as backend.Element | composedBackend.Element
+      if (!be.createResizeObserver) return null
+      return be.createResizeObserver(mode, listener as any)
+    }
+    return null
+  }
+
   /**
    * Get an interactive context
    */