glass-easel-miniprogram-adapter 0.2.0 → 0.3.0

package/src/component.ts

@@ -1,6 +1,6 @@
 import * as glassEasel from 'glass-easel'
-import { utils as typeUtils } from './types'
-import { ComponentType, GeneralBehavior, TraitBehavior } from './behavior'
+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 { MediaQueryObserver } from './media_query'
@@ -18,7 +18,7 @@ type ExportType<
   UProperty extends PropertyList,
   UMethod extends MethodList,
   UComponentExport,
-> = UComponentExport extends undefined
+> = [UComponentExport] extends [never]
   ? Component<UData, UProperty, UMethod, UComponentExport>
   : UComponentExport
 
@@ -52,7 +52,7 @@ const filterComponentExport = (
   source: ComponentCaller<any, any, any, any>,
   elem: glassEasel.Element,
 ): any => {
-  if (elem instanceof glassEasel.Component) {
+  if (glassEasel.Component.isComponent(elem)) {
     const selectedSpace = elem.getRootBehavior().ownerSpace
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const uncheckedCaller = elem.getMethodCaller()
@@ -131,7 +131,7 @@ export class ComponentCaller<
   }
 
   /** The component data and property values */
-  get data(): AllData<TData, TProperty> {
+  get data(): typeUtils.Merge<AllData<TData, TProperty>> {
     return this._$.data
   }
   set data(value: AllData<TData, TProperty>) {
@@ -144,7 +144,7 @@ export class ComponentCaller<
   }
 
   /** The component data and property values (same as `data` ) */
-  get properties(): AllData<TData, TProperty> {
+  get properties(): typeUtils.Merge<AllData<TData, TProperty>> {
     return this._$.data
   }
   set properties(value: AllData<TData, TProperty>) {
@@ -477,7 +477,10 @@ export class ComponentProto<
 > {
   private proto: Component<TData, TProperty, TMethod, TComponentExport>
 
-  constructor(methods: TMethod, componentExport?: () => TComponentExport) {
+  constructor(
+    methods: TMethod,
+    componentExport?: (source: GeneralComponent | null) => TComponentExport,
+  ) {
     this.proto = Object.create(ComponentCaller.prototype) as Component<
       TData,
       TProperty,

package/src/env.ts

@@ -0,0 +1,73 @@
+import * as glassEasel from 'glass-easel'
+import { AssociatedBackend } from './backend'
+import { CodeSpace } from './space'
+
+/**
+ * A mini-program API environment
+ *
+ * Each environment manages multiple backend contexts.
+ * However, a backend context should be exclusively managed by a single environment
+ * (to avoid `StyleScopeId` confliction).
+ * It is able to create multiple `CodeSpace` within the environment.
+ */
+export class MiniProgramEnv {
+  private codeSpaceMap: { [id: string]: CodeSpace }
+  private globalCodeSpace: CodeSpace
+
+  /**
+   * Create an empty mini-program API environment
+   */
+  constructor() {
+    this.codeSpaceMap = Object.create(null) as { [id: string]: CodeSpace }
+    this.globalCodeSpace = new CodeSpace(this, false, {})
+  }
+
+  /**
+   * Get a global code space in which global components can be defined
+   *
+   * External glass-easel based components can be defined in this code space.
+   * All global components should be defined before any other `CodeSpace` created!
+   */
+  getGlobalCodeSpace(): CodeSpace {
+    return this.globalCodeSpace
+  }
+
+  /**
+   * Associate a backend context
+   *
+   * If `backendContext` is not given, the DOM-based backend is used
+   * (causes failure if running outside browsers).
+   * The backend context SHOULD NOT be associated by other environments!
+   */
+  associateBackend(backendContent?: glassEasel.GeneralBackendContext): AssociatedBackend {
+    const ctx = backendContent ?? new glassEasel.CurrentWindowBackendContext()
+    return new AssociatedBackend(this, ctx)
+  }
+
+  /**
+   * Create a component space that can manage WXML, WXSS, JS and static JSON config files
+   *
+   * The space can be specified as a *main* space.
+   * This makes some features available:
+   * * the `app.wxss` will be used as a style sheet for all root components in the space;
+   * * the `StyleIsolation.Shared` is accepted for components in the space.
+   * Non-main spaces usually act as plugins.
+   * `publicComponents` is a map for specifying a map of aliases and component paths.
+   */
+  createCodeSpace(
+    id: string,
+    isMainSpace: boolean,
+    publicComponents = Object.create(null) as { [alias: string]: string },
+  ): CodeSpace {
+    const cs = new CodeSpace(this, isMainSpace, publicComponents, this.globalCodeSpace)
+    this.codeSpaceMap[id] = cs
+    return cs
+  }
+
+  /**
+   * Get a component space by the `id` specified when created
+   */
+  getCodeSpace(id: string): CodeSpace | undefined {
+    return this.codeSpaceMap[id]
+  }
+}

package/src/index.ts

@@ -1,80 +1,6 @@
-import * as glassEasel from 'glass-easel'
-import { AssociatedBackend } from './backend'
-import { CodeSpace } from './space'
-
 export * as glassEasel from 'glass-easel'
-export * as types from './types'
-export { StyleIsolation } from './types'
-export * from './space'
 export { AssociatedBackend, Root } from './backend'
 export * as component from './component'
-
-/**
- * A mini-program API environment
- *
- * Each environment manages multiple backend contexts.
- * However, a backend context should be exclusively managed by a single environment
- * (to avoid `StyleScopeId` confliction).
- * It is able to create multiple `CodeSpace` within the environment.
- */
-export class MiniProgramEnv {
-  private codeSpaceMap: { [id: string]: CodeSpace }
-  private globalCodeSpace: CodeSpace
-
-  /**
-   * Create an empty mini-program API environment
-   */
-  constructor() {
-    this.codeSpaceMap = Object.create(null) as { [id: string]: CodeSpace }
-    this.globalCodeSpace = new CodeSpace(this, false, {})
-  }
-
-  /**
-   * Get a global code space in which global components can be defined
-   *
-   * External glass-easel based components can be defined in this code space.
-   * All global components should be defined before any other `CodeSpace` created!
-   */
-  getGlobalCodeSpace(): CodeSpace {
-    return this.globalCodeSpace
-  }
-
-  /**
-   * Associate a backend context
-   *
-   * If `backendContext` is not given, the DOM-based backend is used
-   * (causes failure if running outside browsers).
-   * The backend context SHOULD NOT be associated by other environments!
-   */
-  associateBackend(backendContent?: glassEasel.GeneralBackendContext): AssociatedBackend {
-    const ctx = backendContent ?? new glassEasel.domlikeBackend.CurrentWindowBackendContext()
-    return new AssociatedBackend(this, ctx)
-  }
-
-  /**
-   * Create a component space that can manage WXML, WXSS, JS and static JSON config files
-   *
-   * The space can be specified as a *main* space.
-   * This makes some features available:
-   * * the `app.wxss` will be used as a style sheet for all root components in the space;
-   * * the `StyleIsolation.Shared` is accepted for components in the space.
-   * Non-main spaces usually act as plugins.
-   * `publicComponents` is a map for specifying a map of aliases and component paths.
-   */
-  createCodeSpace(
-    id: string,
-    isMainSpace: boolean,
-    publicComponents = Object.create(null) as { [alias: string]: string },
-  ): CodeSpace {
-    const cs = new CodeSpace(this, isMainSpace, publicComponents, this.globalCodeSpace)
-    this.codeSpaceMap[id] = cs
-    return cs
-  }
-
-  /**
-   * Get a component space by the `id` specified when created
-   */
-  getCodeSpace(id: string): CodeSpace | undefined {
-    return this.codeSpaceMap[id]
-  }
-}
+export { MiniProgramEnv } from './env'
+export * from './space'
+export * as types from './types'

package/src/intersection.ts

@@ -1,5 +1,5 @@
-import * as glassEasel from 'glass-easel'
-import { GeneralComponent } from './component'
+import type * as glassEasel from 'glass-easel'
+import { type GeneralComponent } from './component'
 
 export type IntersectionObserverMargins = {
   left: number

package/src/media_query.ts

@@ -1,5 +1,5 @@
-import * as glassEasel from 'glass-easel'
-import { GeneralComponent } from './component'
+import type * as glassEasel from 'glass-easel'
+import { type GeneralComponent } from './component'
 
 export class MediaQueryObserver {
   private _$comp: GeneralComponent
@@ -15,10 +15,8 @@ export class MediaQueryObserver {
     listener: (status: { matches: boolean }) => void,
   ) {
     if (this._$observer) this._$observer.disconnect()
-    this._$observer = this._$comp._$.getBackendContext().createMediaQueryObserver(
-      descriptor,
-      listener,
-    )
+    this._$observer =
+      this._$comp._$.getBackendContext()?.createMediaQueryObserver?.(descriptor, listener) || null
   }
 
   disconnect() {

package/src/selector_query.ts

@@ -220,8 +220,8 @@ export class SelectorQuery {
             [
               (done) => {
                 const ctx = component._$.getBackendContext()
-                const width = ctx.getWindowWidth()
-                const height = ctx.getWindowHeight()
+                const width = ctx ? ctx.getWindowWidth() : 0
+                const height = ctx ? ctx.getWindowHeight() : 0
                 if (fields.id) res.id = ''
                 if (fields.dataset) res.dataset = {}
                 if (fields.mark) res.mark = {}
@@ -301,7 +301,7 @@ export class SelectorQuery {
               ],
               () => {
                 if (fields.properties) {
-                  if (elem instanceof glassEasel.Component) {
+                  if (glassEasel.Component.isComponent(elem)) {
                     fields.properties.forEach((propName) => {
                       if (glassEasel.Component.hasProperty(elem, propName)) {
                         const ds = elem.getComponentOptions().propertyPassingDeepCopy