glass-easel-miniprogram-adapter 0.16.2 → 0.17.0

package/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)

package/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())
+  }
+}

package/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()