glass-easel-miniprogram-adapter 0.1.1 → 0.2.1

package/src/component.ts

@@ -1,9 +1,9 @@
 import * as glassEasel from 'glass-easel'
-import {
-  utils as typeUtils,
-} from './types'
+import { utils as typeUtils } from './types'
 import { ComponentType, GeneralBehavior, TraitBehavior } from './behavior'
 import { SelectorQuery } from './selector_query'
+import { IntersectionObserver } from './intersection'
+import { MediaQueryObserver } from './media_query'
 
 type DataList = typeUtils.DataList
 type PropertyList = typeUtils.PropertyList
@@ -18,11 +18,9 @@ type ExportType<
   UProperty extends PropertyList,
   UMethod extends MethodList,
   UComponentExport,
-> = (
-  UComponentExport extends undefined
-    ? Component<UData, UProperty, UMethod, UComponentExport>
-    : UComponentExport
-)
+> = UComponentExport extends undefined
+  ? Component<UData, UProperty, UMethod, UComponentExport>
+  : UComponentExport
 
 const filterComponentExportWithType = <
   UData extends DataList,
@@ -30,10 +28,10 @@ const filterComponentExportWithType = <
   UMethod extends MethodList,
   UComponentExport,
 >(
-    source: ComponentCaller<any, any, any, any>,
-    elem: glassEasel.Element,
-    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-  ): ExportType<UData, UProperty, UMethod, UComponentExport> | undefined => {
+  source: ComponentCaller<any, any, any, any>,
+  elem: glassEasel.Element,
+  componentType: ComponentType<UData, UProperty, UMethod, UComponentExport>,
+): ExportType<UData, UProperty, UMethod, UComponentExport> | undefined => {
   const comp = elem.asInstanceOf(componentType._$)
   if (comp === null) return undefined
   const selectedSpace = comp.getRootBehavior().ownerSpace
@@ -78,8 +76,9 @@ export type Component<
   TProperty extends PropertyList,
   TMethod extends MethodList,
   TComponentExport,
-> = ComponentCaller<TData, TProperty, TMethod, TComponentExport>
-  & { [k in keyof TMethod]: TMethod[k] }
+> = ComponentCaller<TData, TProperty, TMethod, TComponentExport> & {
+  [k in keyof TMethod]: TMethod[k]
+}
 
 export class ComponentCaller<
   TData extends DataList,
@@ -87,12 +86,8 @@ export class ComponentCaller<
   TMethod extends MethodList,
   TComponentExport,
 > {
-  /** @internal */
-  _$!: glassEasel.Component<
-    TData,
-    TProperty,
-    TMethod
-  >
+  /** The corresponding `Component` */
+  _$!: glassEasel.Component<TData, TProperty, TMethod>
   /** @internal */
   _$export?: (source: GeneralComponent | null) => TComponentExport
 
@@ -218,12 +213,10 @@ export class ComponentCaller<
    * All data observers will not be triggered immediately before applied.
    * Reads of the data will get the unchanged value before applied.
    */
-  replaceDataOnPath<
-    T extends (string | number)[],
-  >(
+  replaceDataOnPath<T extends (string | number)[]>(
     path: readonly [...T],
     data: typeUtils.GetFromDataPath<typeUtils.DataWithPropertyValues<TData, TProperty>, T>,
-  ): void;
+  ): void
   replaceDataOnPath(path: any, data: any) {
     this._$.replaceDataOnPath(path, data)
   }
@@ -239,23 +232,27 @@ export class ComponentCaller<
    * All data observers will not be triggered immediately before applied.
    * Reads of the data will get the unchanged value before applied.
    */
-  spliceArrayDataOnPath<
-    T extends (string | number)[],
-  >(
+  spliceArrayDataOnPath<T extends (string | number)[]>(
     path: readonly [...T],
     index: typeUtils.GetFromDataPath<
       typeUtils.DataWithPropertyValues<TData, TProperty>,
       T
-    > extends any[] ? number | undefined : never,
+    > extends any[]
+      ? number | undefined
+      : never,
     del: typeUtils.GetFromDataPath<
       typeUtils.DataWithPropertyValues<TData, TProperty>,
       T
-    > extends any[] ? number | undefined : never,
+    > extends any[]
+      ? number | undefined
+      : never,
     inserts: typeUtils.GetFromDataPath<
       typeUtils.DataWithPropertyValues<TData, TProperty>,
       T
-    > extends (infer I)[] ? I[] : never
-  ): void;
+    > extends (infer I)[]
+      ? I[]
+      : never,
+  ): void
   spliceArrayDataOnPath(
     path: (string | number)[],
     index: number | undefined,
@@ -308,9 +305,9 @@ export class ComponentCaller<
     name: string,
     detail: any,
     options: {
-      bubbles?: boolean,
-      composed?: boolean,
-      capturePhase?: boolean,
+      bubbles?: boolean
+      composed?: boolean
+      capturePhase?: boolean
     },
   ) {
     return this._$.triggerEvent(name, detail, options)
@@ -321,9 +318,26 @@ export class ComponentCaller<
     return new SelectorQuery(this)
   }
 
+  /** Create an intersection observer */
+  createIntersectionObserver(options?: {
+    thresholds?: number[]
+    initialRatio?: number
+    observeAll?: boolean
+  }): IntersectionObserver {
+    return new IntersectionObserver(
+      this,
+      options?.thresholds || [0],
+      options?.initialRatio || 0,
+      options?.observeAll || false,
+    )
+  }
+
+  /** Create an media query observer */
+  createMediaQueryObserver(): MediaQueryObserver {
+    return new MediaQueryObserver(this)
+  }
+
   // TODO support animate / applyAnimation / clearAnimation
-  // TODO support createIntersectionObserver
-  // TODO support createMediaQueryObserver
   // TODO support setUpdatePerformanceListener
 
   /**
@@ -464,8 +478,12 @@ export class ComponentProto<
   private proto: Component<TData, TProperty, TMethod, TComponentExport>
 
   constructor(methods: TMethod, componentExport?: () => TComponentExport) {
-    this.proto = Object.create(ComponentCaller.prototype) as
-      Component<TData, TProperty, TMethod, TComponentExport>
+    this.proto = Object.create(ComponentCaller.prototype) as Component<
+      TData,
+      TProperty,
+      TMethod,
+      TComponentExport
+    >
     Object.assign(this.proto, methods)
     this.proto._$export = componentExport
   }

package/src/index.ts

@@ -1,8 +1,6 @@
 import * as glassEasel from 'glass-easel'
 import { AssociatedBackend } from './backend'
-import {
-  CodeSpace,
-} from './space'
+import { CodeSpace } from './space'
 
 export * as glassEasel from 'glass-easel'
 export * as types from './types'

package/src/intersection.ts

@@ -0,0 +1,119 @@
+import * as glassEasel from 'glass-easel'
+import { GeneralComponent } from './component'
+
+export type IntersectionObserverMargins = {
+  left: number
+  top: number
+  right: number
+  bottom: number
+}
+
+const defaultMargins = {
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+}
+
+export class IntersectionObserver {
+  private _$comp: GeneralComponent
+  private _$thresholds: number[]
+  private _$initialRatio: number
+  private _$observeAll: boolean
+  private _$selector: string | null = null
+  private _$margins: IntersectionObserverMargins | null = null
+  private _$observers: glassEasel.backend.Observer[] = []
+
+  /** @internal */
+  constructor(
+    comp: GeneralComponent,
+    thresholds: number[],
+    initialRatio: number,
+    observeAll: boolean,
+  ) {
+    this._$comp = comp
+    this._$thresholds = thresholds
+    this._$initialRatio = initialRatio
+    this._$observeAll = observeAll
+  }
+
+  relativeTo(selector: string, margins?: IntersectionObserverMargins): this {
+    this._$selector = selector
+    this._$margins = margins ?? defaultMargins
+    return this
+  }
+
+  relativeToViewport(margins?: IntersectionObserverMargins): this {
+    this._$selector = null
+    this._$margins = margins ?? defaultMargins
+    return this
+  }
+
+  observe(
+    targetSelector: string,
+    listener: (status: glassEasel.backend.IntersectionStatus) => 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]
+      }
+    }
+    let relativeElement: glassEasel.Element | null
+    if (this._$selector === null || !shadowRoot) {
+      relativeElement = null
+    } else {
+      const rel = shadowRoot.querySelector(this._$selector)
+      if (rel === null) {
+        // TODO warn no matched relative element
+      } else {
+        relativeElement = rel
+      }
+    }
+    if (!this._$margins) {
+      throw new Error('`relativeTo` or `relativeToViewport` should be called before observe')
+    }
+    const { left, top, right, bottom } = this._$margins
+    const margin = `${top}px ${right}px ${bottom}px ${left}px`
+    targets.forEach((target) => {
+      let initial: number | null = this._$initialRatio
+      const observer = target.createIntersectionObserver(
+        relativeElement,
+        margin,
+        this._$thresholds,
+        (args) => {
+          if (initial !== null) {
+            let i = 0
+            for (; i < this._$thresholds.length; i += 1) {
+              const threshold = this._$thresholds[i]!
+              if (initial === args.intersectionRatio) continue
+              if ((initial - threshold) * (args.intersectionRatio - threshold) <= 0) break
+            }
+            initial = null
+            if (i < this._$thresholds.length) return
+          }
+          listener(args)
+        },
+      )
+      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/src/media_query.ts

@@ -0,0 +1,28 @@
+import * as glassEasel from 'glass-easel'
+import { GeneralComponent } from './component'
+
+export class MediaQueryObserver {
+  private _$comp: GeneralComponent
+  private _$observer: glassEasel.backend.Observer | null = null
+
+  /** @internal */
+  constructor(comp: GeneralComponent) {
+    this._$comp = comp
+  }
+
+  observe(
+    descriptor: glassEasel.backend.MediaQueryStatus,
+    listener: (status: { matches: boolean }) => void,
+  ) {
+    if (this._$observer) this._$observer.disconnect()
+    this._$observer = this._$comp._$.getBackendContext().createMediaQueryObserver(
+      descriptor,
+      listener,
+    )
+  }
+
+  disconnect() {
+    if (this._$observer) this._$observer.disconnect()
+    this._$observer = null
+  }
+}