glass-easel 0.2.0 → 0.3.0

package/tests/base/composed_backend.ts

@@ -1,16 +1,5 @@
 import * as glassEasel from '../../src'
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const protocolMethod = (instance: any, propertyKey: string, descriptor: PropertyDescriptor) => {
-  const originalFn = descriptor.value as unknown as (...args: any[]) => any
-  descriptor.value = function (this: Context | Element, ...args: any[]) {
-    if (this._$currentMethod === null) this._$currentMethod = propertyKey
-    const ret: unknown = originalFn.apply(this, args)
-    this._$currentMethod = null
-    return ret
-  }
-}
-
 const enum ThrowOption {
   StyleScopeNotFound,
   StyleSheetNotFound,
@@ -28,7 +17,7 @@ export class Context implements glassEasel.composedBackend.Context {
   private _$theme = 'light'
 
   private _$styleSheetIdInc = 1
-  public _$styleScopes = new Set<number>()
+  public _$styleScopes = new Set<number>([0])
   private _$styleSheetContents = new Map<string, unknown>()
 
   public _$allElements: Node[] = []
@@ -46,82 +35,65 @@ export class Context implements glassEasel.composedBackend.Context {
         options: glassEasel.EventOptions,
       ) => glassEasel.EventBubbleStatus) = null
 
-  public shouldThrows(when?: ThrowOption) {
-    if (when === undefined) return true
+  public shouldThrows(when: ThrowOption) {
     if (this._$throwOn === true) return true
     if (typeof this._$throwOn !== 'boolean' && this._$throwOn[when]) return true
     return false
   }
-  // eslint-disable-next-line class-methods-use-this
-  private throws(message: string, when?: ThrowOption) {
-    if (!this.shouldThrows(when)) return
-    const method = this._$currentMethod || 'unknownMethod'
-    this._$currentMethod = null
-    throw new Error(`During ComposedBackend.Context#${method}: ${message}`)
-  }
 
-  @protocolMethod
   destroy(): void {
-    if (this._$destroyed) this.throws('destroyed twice')
+    if (this._$destroyed) throw new Error('destroyed twice')
     this._$destroyed = true
     if (this._$allElements.length !== 0) {
-      this.throws('destroyed with elements not yet destroyed')
+      throw new Error('destroyed with elements not yet destroyed')
     }
   }
 
-  @protocolMethod
   getWindowWidth(): number {
     return this._$windowWidth
   }
 
-  @protocolMethod
   getWindowHeight(): number {
     return this._$windowHeight
   }
 
-  @protocolMethod
   getDevicePixelRatio(): number {
     return this._$devicePixelRatio
   }
 
-  @protocolMethod
   getTheme(): string {
     return this._$theme
   }
 
-  @protocolMethod
   registerStyleSheetContent(path: string, content: unknown): void {
     if (this._$styleSheetContents.has(path)) {
-      this.throws(
-        `Style sheet with path "${path}" registered twice`,
-        ThrowOption.StyleSheetDoubleRegistration,
-      )
+      if (this.shouldThrows(ThrowOption.StyleSheetDoubleRegistration)) {
+        throw new Error(`Style sheet with path "${path}" registered twice`)
+      }
     }
     this._$styleSheetContents.set(path, content)
   }
 
-  @protocolMethod
   appendStyleSheetPath(path: string, styleScope?: number): number {
     const id = this._$styleSheetIdInc
     this._$styleSheetIdInc += 1
     this._$styleScopes.add(styleScope ?? 0)
     if (!this._$styleSheetContents.has(path)) {
-      this.throws(
-        `Style sheet added with path "${path}" not registered`,
-        ThrowOption.StyleSheetNotRegistered,
-      )
+      if (this.shouldThrows(ThrowOption.StyleSheetNotRegistered)) {
+        throw new Error(`Style sheet added with path "${path}" not registered`)
+      }
     }
     return id
   }
 
-  @protocolMethod
   disableStyleSheet(index: number): void {
     if (index >= this._$styleSheetIdInc) {
-      this.throws(`Style sheet with id "${index}" not exists`, ThrowOption.StyleSheetNotFound)
+      if (this.shouldThrows(ThrowOption.StyleSheetNotFound)) {
+        throw new Error(`Style sheet with id "${index}" not exists`)
+      }
     }
   }
 
-  @protocolMethod
   render(cb: (err: Error | null) => void): void {
     if (this._$renderCallbacks) {
       this._$renderCallbacks.push(cb)
@@ -141,27 +113,22 @@ export class Context implements glassEasel.composedBackend.Context {
     this._$rootNode = rootNode
   }
 
-  @protocolMethod
   getRootNode(): Node {
     return this._$rootNode
   }
 
-  @protocolMethod
   createElement(tagName: string, stylingName: string): Node {
     return new Element(this, tagName, stylingName)
   }
 
-  @protocolMethod
   createTextNode(textContent: string): Node {
     return new TextNode(this, textContent)
   }
 
-  @protocolMethod
   createFragment(): Node {
     return new Fragment(this)
   }
 
-  @protocolMethod
   onEvent(
     _listener: (
       target: glassEasel.Element,
@@ -173,7 +140,6 @@ export class Context implements glassEasel.composedBackend.Context {
     this._$eventEmitter = _listener
   }
 
-  @protocolMethod
   // eslint-disable-next-line class-methods-use-this
   createMediaQueryObserver(
     _status: glassEasel.backend.MediaQueryStatus,
@@ -201,10 +167,10 @@ const stringifyType = (v: unknown) => {
  * https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
  */
 const enum NODE_TYPE {
-  ELEMENT_NODE = 1,
-  TEXT_NODE = 3,
-  DOCUMENT_NODE = 9,
-  DOCUMENT_FRAGMENT_NODE = 11,
+  ELEMENT_NODE,
+  TEXT_NODE,
+  DOCUMENT_NODE,
+  DOCUMENT_FRAGMENT_NODE,
 }
 
 /** An element for empty backend implementation */
@@ -227,8 +193,11 @@ abstract class Node implements glassEasel.composedBackend.Element {
 
   private _$style = ''
   private _$styleScope = 0
-  private _$classes: Array<[string, number]> = []
-  private _$attributes: Record<string, any> = {}
+  private _$extraStyleScope: number | undefined
+  private _$hostStyleScope: number | undefined
+  private _$classes: Array<[string, number | undefined]> | undefined
+  private _$attributes: Array<[string, unknown]> = []
+  private _$styleScopeManager: glassEasel.StyleScopeManager | undefined
 
   constructor(ownerContext: Context) {
     this._$ownerContext = ownerContext
@@ -236,126 +205,153 @@ abstract class Node implements glassEasel.composedBackend.Element {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  private throws(message: string, when?: ThrowOption) {
-    if (!this._$ownerContext.shouldThrows(when)) return
-    const method = this._$currentMethod || 'unknownMethod'
-    this._$currentMethod = null
-    throw new Error(`During ComposedBackend.Element#${method}: ${message}`)
-  }
-
   private assertFragment(frag: Node) {
-    if (!(frag instanceof Fragment)) this.throws(`expect a fragment but got ${stringifyType(frag)}`)
+    if (!(frag instanceof Fragment))
+      throw new Error(`expect a fragment but got ${stringifyType(frag)}`)
     if (frag.parentNode !== null) {
-      this.throws('fragment should have no parent')
+      throw new Error('fragment should have no parent')
     }
   }
+  // eslint-disable-next-line class-methods-use-this
   private assertDetached(child: Node) {
-    if (!(child instanceof Node)) this.throws(`expect an element but got ${stringifyType(child)}`)
-    if (child.parentNode !== null) this.throws('newChild is not detached')
+    if (!(child instanceof Node))
+      throw new Error(`expect an element but got ${stringifyType(child)}`)
+    if (child.parentNode !== null) throw new Error('newChild is not detached')
   }
   private assertChild(child: Node) {
-    if (!(child instanceof Node)) this.throws(`expect an element but got ${stringifyType(child)}`)
+    if (!(child instanceof Node))
+      throw new Error(`expect an element but got ${stringifyType(child)}`)
     const index = this.childNodes.indexOf(child)
-    if (index === -1) this.throws('element is not a child of `this`')
-    if (child.parentNode !== this) this.throws('element is not a child of `this`')
+    if (index === -1) throw new Error('element is not a child of `this`')
+    if (child.parentNode !== this) throw new Error('element is not a child of `this`')
     return index
   }
   private assertChildWithIndex(child: Node, index?: number) {
     const actualIndex = this.assertChild(child)
     const processedIndex = ensureNonNegativeInteger(index)
     if (processedIndex !== undefined && processedIndex !== actualIndex) {
-      this.throws(`index mismatched, expected ${actualIndex} but got ${processedIndex}`)
+      throw new Error(`index mismatched, expected ${actualIndex} but got ${processedIndex}`)
     }
     return actualIndex
   }
   private assertIndex(index: number) {
     if (index >= this.childNodes.length) {
-      this.throws(
+      throw new Error(
         `provided index is invalid, got ${index} but only ${this.childNodes.length} children exist`,
       )
     }
   }
   private assertDeleteCount(deleteCount: number, index: number) {
     if (deleteCount + index > this.childNodes.length) {
-      this.throws(
+      throw new Error(
         `try to remove ${deleteCount} children starting from ${index}, but there are only ${this.childNodes.length} children.`,
       )
     }
   }
+  private assertStyleScope(styleScope: number | undefined) {
+    if (styleScope !== undefined && !this._$ownerContext._$styleScopes.has(styleScope)) {
+      if (this._$ownerContext.shouldThrows(ThrowOption.StyleScopeNotFound)) {
+        throw new Error(
+          `set style scope to ${styleScope}, but its owner context do not have a style sheet with that scope`,
+        )
+      }
+    }
+  }
 
-  private logicalTagName() {
-    if (this instanceof Root) return 'root'
-    if (this instanceof Fragment) return 'fragment'
-    if (this instanceof TextNode) return 'text'
-    if (this instanceof Element) return this._$logicalTagName
-    throw new Error('unreachable')
+  get tagName(): string {
+    if (this instanceof Element) {
+      return (
+        this._$logicalTagName === 'wx-x' ? this._$stylingTagName : this._$logicalTagName
+      ).toUpperCase()
+    }
+    return ''
   }
-  // eslint-disable-next-line no-console
-  dump(logFn: (msg: string) => void = console.info) {
-    logFn(this.dumpToString())
+
+  get innerHTML(): string {
+    if (this instanceof Element) {
+      return this.childNodes.map((child) => child.outerHTML).join('')
+    }
+    return this.textContent || ''
   }
-  dumpToString(indent = ''): string {
+
+  get outerHTML(): string {
     const ret: string[] = []
-    const props: Record<string, string> = {}
-    Object.entries(this._$attributes).forEach(([key, value]) => {
-      props[key] = `${value as unknown as string}`
-    })
-    props.id = this.id
-    props.style = this._$style
-    props.class = this._$classes.map((c) => `${c[0]}$${c[1]}`).join(' ')
-    const propsStr = Object.entries(props)
-      .filter(([_, value]) => value.length > 0)
-      .map(([key, value]) => `${key}="${value}"`)
-      .join(' ')
-    ret.push(indent)
     if (this instanceof Element) {
-      ret.push(`<${this.logicalTagName()} ${this._$stylingTagName}$${this._$styleScope}`)
-    } else {
-      ret.push(`<${this.logicalTagName()} $${this._$styleScope}`)
-    }
-    if (propsStr.length > 0) ret.push(` ${propsStr}`)
-    if (this.textContent === null && this.childNodes.length === 0) {
-      ret.push(' />\n')
-    } else {
-      ret.push('>\n')
-      if (this.textContent !== null) ret.push(`${indent}  ${this.textContent}\n`)
-      this.childNodes.forEach((child) => {
-        ret.push(child.dumpToString(`${indent}  `))
+      const props: Record<string, string> = {}
+      this._$attributes.forEach(([key]) => {
+        const value = this.getAttribute(key)
+        if (value !== null) {
+          props[key.toLowerCase()] = value
+        }
       })
-      ret.push(`${indent}</${this.logicalTagName()}>\n`)
+      const tagName = this.tagName.toLowerCase()
+      ret.push(`<${tagName}`)
+      if (this.id) props.id = this.getAttribute('id')!
+      if (this._$style) props.style = this.getAttribute('style')!
+      if (this._$classes) props.class = this.getAttribute('class')!
+      const propsStr = Object.entries(props)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ')
+      if (propsStr.length > 0) ret.push(` ${propsStr}`)
+      ret.push(`>${this.innerHTML}</${tagName}>`)
+    } else {
+      ret.push(this.innerHTML)
     }
     return ret.join('')
   }
 
-  @protocolMethod
+  getAttribute(name: string): string | null {
+    // eslint-disable-next-line no-param-reassign
+    name = name.toLowerCase()
+    if (name === 'id') return this.id
+    if (name === 'style') return this._$style
+    if (name === 'class')
+      return this._$classes
+        ? this._$classes
+            .map(([name, styleScope]) => {
+              let prefix = ''
+              if (styleScope !== undefined) {
+                prefix = this._$styleScopeManager!.queryName(styleScope) || ''
+              }
+              return `${prefix ? `${prefix}--` : ''}${name}`
+            })
+            .join(' ')
+        : null
+    const attr = this._$attributes.find((attr) => attr[0] === name)
+    if (!attr) return null
+    const value = attr[1]
+    if (value === false) return null
+    return value === true || value === undefined || value === null ? '' : String(value)
+  }
+
   release(): void {
-    if (this._$released) this.throws('element released twice')
+    if (this._$released) throw new Error('element released twice')
     this._$released = true
     const index = this._$ownerContext._$allElements.indexOf(this)
-    if (index === -1) this.throws('element not found in its owner Context')
+    if (index === -1) throw new Error('element not found in its owner Context')
     this._$ownerContext._$allElements.splice(index, 1)
   }
 
-  @protocolMethod
   associateValue(v: glassEasel.Element): void {
     this.__wxElement = v
+    if (v.ownerShadowRoot) {
+      const ownerSpace = v.ownerShadowRoot.getHostNode()._$behavior.ownerSpace
+      this._$styleScopeManager = ownerSpace.styleScopeManager
+    }
   }
 
-  @protocolMethod
   appendChild(child: Node): void {
     this.assertDetached(child)
     this.childNodes.push(child)
     child.parentNode = this
   }
 
-  @protocolMethod
   removeChild(child: Node, index?: number): void {
     const actualIndex = this.assertChildWithIndex(child, index)
     this.childNodes.splice(actualIndex, 1)
     child.parentNode = null
   }
 
-  @protocolMethod
   insertBefore(child: Node, before: Node, index?: number): void {
     this.assertDetached(child)
     const processedIndex = ensureNonNegativeInteger(index)
@@ -376,7 +372,6 @@ abstract class Node implements glassEasel.composedBackend.Element {
     }
   }
 
-  @protocolMethod
   replaceChild(child: Node, oldChild: Node, index?: number): void {
     this.assertDetached(child)
     const processedIndex = ensureNonNegativeInteger(index)
@@ -401,7 +396,6 @@ abstract class Node implements glassEasel.composedBackend.Element {
     }
   }
 
-  @protocolMethod
   spliceBefore(before: Node, deleteCount: number, list: Node): void {
     this.assertFragment(list)
     const index = this.assertChild(before)
@@ -416,7 +410,6 @@ abstract class Node implements glassEasel.composedBackend.Element {
     })
   }
 
-  @protocolMethod
   spliceAppend(list: Node): void {
     this.assertFragment(list)
     this.childNodes.splice(this.childNodes.length, 0, ...list.childNodes)
@@ -426,7 +419,6 @@ abstract class Node implements glassEasel.composedBackend.Element {
     list.childNodes = []
   }
 
-  @protocolMethod
   spliceRemove(before: Node, deleteCount: number): void {
     const index = this.assertChild(before)
     this.assertDeleteCount(deleteCount, index)
@@ -436,62 +428,76 @@ abstract class Node implements glassEasel.composedBackend.Element {
     })
   }
 
-  @protocolMethod
   setId(id: string): void {
     this.id = id
   }
 
-  @protocolMethod
-  setStyleScope(styleScope: number): void {
-    if (!this._$ownerContext._$styleScopes.has(styleScope)) {
-      this.throws(
-        `set style scope to ${styleScope}, but its owner context do not have a style sheet with that scope`,
-        ThrowOption.StyleScopeNotFound,
-      )
-    }
+  setStyleScope(
+    styleScope: number,
+    extraStyleScope: number | undefined,
+    hostStyleScope: number | undefined,
+  ): void {
+    this.assertStyleScope(styleScope)
+    this.assertStyleScope(extraStyleScope)
+    this.assertStyleScope(hostStyleScope)
     this._$styleScope = styleScope
+    this._$extraStyleScope = extraStyleScope
+    this._$hostStyleScope = hostStyleScope
   }
 
-  @protocolMethod
   setStyle(styleText: string): void {
     this._$style = styleText
   }
 
-  @protocolMethod
   addClass(elementClass: string, styleScope?: number): void {
-    const scope = ensureNonNegativeInteger(styleScope) || 0
+    const scope = ensureNonNegativeInteger(styleScope)
+    if (!this._$classes) this._$classes = []
     const index = this._$classes.findIndex((c) => c[0] === elementClass && c[1] === scope)
     if (index === -1) this._$classes.push([elementClass, scope])
   }
 
-  @protocolMethod
   removeClass(elementClass: string, styleScope?: number): void {
-    const scope = ensureNonNegativeInteger(styleScope) || 0
+    const scope = ensureNonNegativeInteger(styleScope)
+    if (!this._$classes) return
     const index = this._$classes.findIndex((c) => c[0] === elementClass && c[1] === scope)
     if (index !== -1) this._$classes.splice(index, 1)
   }
 
-  @protocolMethod
   clearClasses(): void {
+    if (!this._$classes) return
     this._$classes = []
   }
 
-  @protocolMethod
   setAttribute(name: string, value: unknown): void {
-    this._$attributes[name] = value
+    // eslint-disable-next-line no-param-reassign
+    name = name.toLowerCase()
+    const index = this._$attributes.findIndex((attr) => attr[0] === name)
+    if (value === false) {
+      if (index >= 0) {
+        this._$attributes.splice(index, 1)
+      }
+    } else {
+      if (index >= 0) {
+        this._$attributes[index]![1] = value
+      } else {
+        this._$attributes.push([name, value])
+      }
+    }
   }
 
-  @protocolMethod
   removeAttribute(name: string): void {
-    delete this._$attributes[name]
+    // eslint-disable-next-line no-param-reassign
+    name = name.toLowerCase()
+    const index = this._$attributes.findIndex((attr) => attr[0] === name)
+    if (index >= 0) {
+      this._$attributes.splice(index, 1)
+    }
   }
 
-  @protocolMethod
   setText(content: string): void {
     this.textContent = content
   }
 
-  @protocolMethod
   // eslint-disable-next-line class-methods-use-this
   getBoundingClientRect(cb: (res: glassEasel.backend.BoundingClientRect) => void): void {
     setTimeout(() => {
@@ -504,7 +510,6 @@ abstract class Node implements glassEasel.composedBackend.Element {
     }, 0)
   }
 
-  @protocolMethod
   // eslint-disable-next-line class-methods-use-this
   getScrollOffset(cb: (res: glassEasel.backend.ScrollOffset) => void): void {
     setTimeout(() => {
@@ -517,13 +522,11 @@ abstract class Node implements glassEasel.composedBackend.Element {
     }, 0)
   }
 
-  @protocolMethod
   // eslint-disable-next-line class-methods-use-this
   setListenerStats(_type: string, _capture: boolean, _mutLevel: glassEasel.EventMutLevel): void {
     // empty
   }
 
-  @protocolMethod
   // eslint-disable-next-line class-methods-use-this
   setModelBindingStat(
     _attributeName: string,
@@ -532,7 +535,6 @@ abstract class Node implements glassEasel.composedBackend.Element {
     // empty
   }
 
-  @protocolMethod
   // eslint-disable-next-line class-methods-use-this
   createIntersectionObserver(
     _relativeElement: glassEasel.composedBackend.Element | null,
@@ -547,7 +549,6 @@ abstract class Node implements glassEasel.composedBackend.Element {
     }
   }
 
-  @protocolMethod
   // eslint-disable-next-line class-methods-use-this
   getContext(cb: (res: unknown) => void): void {
     cb(null)

package/tests/base/env.ts

@@ -4,6 +4,7 @@
 import { TmplGroup } from 'glass-easel-template-compiler'
 import * as glassEasel from '../../src'
 import * as ComposedBackend from './composed_backend'
+import * as ShadowBackend from './shadow_backend'
 
 glassEasel.globalOptions.throwGlobalError = true
 const warningThrow = (msg: string) => {
@@ -20,6 +21,20 @@ glassEasel.addGlobalWarningListener(warningThrow)
   return `[GlassEaselTextNode ${glassEasel.dumpSingleElementToString(this)}]`
 }
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query as unknown,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+})
+
 export const execWithWarn = <T>(expectCount: number, func: () => T): T => {
   let count = 0
   const warningListener = () => {
@@ -35,9 +50,30 @@ export const execWithWarn = <T>(expectCount: number, func: () => T): T => {
   return ret
 }
 
+export const execWithError = <R>(func: () => R, ...errors: string[]): R | void => {
+  let count = 0
+  const errorListener = (err: unknown) => {
+    if (count >= errors.length) return true // will throw
+    expect(err).toBeInstanceOf(Error)
+    expect((err as Error).message).toBe(errors[count])
+    count += 1
+    return false
+  }
+  glassEasel.addGlobalErrorListener(errorListener)
+  try {
+    return func()
+  } catch (e) {
+    errorListener(e)
+    return undefined
+  } finally {
+    glassEasel.removeGlobalErrorListener(errorListener)
+    expect(count).toBe(errors.length)
+  }
+}
+
 type TemplateOptions = {
   updateMode?: string
-  disallowNativeNode?: boolean
+  fallbackListenerOnNativeNode?: boolean
 }
 
 export const tmpl = (src: string, options?: TemplateOptions) => {
@@ -78,6 +114,43 @@ export const multiTmpl = (src: { [path: string]: string }, options?: TemplateOpt
   }
 }
 
-export const domBackend = new glassEasel.domlikeBackend.CurrentWindowBackendContext()
-export const shadowBackend = new glassEasel.backend.EmptyBackendContext()
+export const domBackend = new glassEasel.CurrentWindowBackendContext()
+export const shadowBackend = new ShadowBackend.Context()
 export const composedBackend = new ComposedBackend.Context()
+
+export const getCustomExternalTemplateEngine = (
+  createExternalShadowRoot: (comp: glassEasel.GeneralComponent) => glassEasel.ExternalShadowRoot,
+) => {
+  class CustomExternalTemplateEngine implements glassEasel.templateEngine.Template {
+    static create() {
+      return new CustomExternalTemplateEngine()
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    createInstance(comp: glassEasel.GeneralComponent): glassEasel.templateEngine.TemplateInstance {
+      return new EmptyTemplateInstance(comp, createExternalShadowRoot(comp))
+    }
+  }
+
+  class EmptyTemplateInstance implements glassEasel.templateEngine.TemplateInstance {
+    comp: glassEasel.GeneralComponent
+    shadowRoot: glassEasel.ExternalShadowRoot
+
+    constructor(comp: glassEasel.GeneralComponent, shadowRoot: glassEasel.ExternalShadowRoot) {
+      this.comp = comp
+      this.shadowRoot = shadowRoot
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    initValues() {
+      // empty
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    updateValues() {
+      // empty
+    }
+  }
+
+  return CustomExternalTemplateEngine
+}