glass-easel 0.1.0

package/src/trait_behaviors.ts

@@ -0,0 +1,51 @@
+import { ComponentSpace } from '.'
+
+/**
+ * Interface that can be implement dynamically
+ *
+ * A `TraitBehavior` is like a TypeScript interface, but can be implemented dynamically.
+ * It requires the implementors to implement `TIn` .
+ * Also, it can provide do a transform from `TIn` to `TOut` as common logic of the trait.
+ */
+export class TraitBehavior<
+  TIn extends { [key: string]: unknown },
+  TOut extends { [key: string]: unknown } = TIn,
+> {
+  /** @internal */
+  private _$trans?: (impl: TIn) => TOut
+  ownerSpace: ComponentSpace
+
+  /** @internal */
+  // eslint-disable-next-line no-useless-constructor
+  constructor(ownerSpace: ComponentSpace, trans?: (impl: TIn) => TOut) {
+    this.ownerSpace = ownerSpace
+    this._$trans = trans
+  }
+
+  /** @internal */
+  _$implement(impl: TIn): TOut {
+    return this._$trans?.(impl) || (impl as unknown as TOut)
+  }
+}
+
+/**
+ * A manager that can implement multiple different trait behaviors
+ */
+export class TraitGroup {
+  private _$traits: WeakMap<TraitBehavior<any, any>, unknown> = new WeakMap()
+
+  implement<
+    TIn extends { [key: string]: unknown },
+    TOut extends { [key: string]: unknown }
+  >(traitBehavior: TraitBehavior<TIn, TOut>, impl: TIn) {
+    const traitImpl = traitBehavior._$implement(impl)
+    this._$traits.set(traitBehavior, traitImpl)
+  }
+
+  get<
+    TIn extends { [key: string]: unknown },
+    TOut extends { [key: string]: unknown }
+  >(traitBehavior: TraitBehavior<TIn, TOut>): TOut | undefined {
+    return this._$traits.get(traitBehavior) as TOut | undefined
+  }
+}

package/src/virtual_node.ts

@@ -0,0 +1,51 @@
+import {
+  Element,
+} from './element'
+import {
+  ShadowRoot,
+} from './shadow_root'
+import {
+  BM,
+  BackendMode,
+} from './backend/mode'
+import {
+  GeneralBackendContext, GeneralBackendElement,
+} from '.'
+
+export class VirtualNode extends Element {
+  is: string
+
+  constructor() {
+    throw new Error('Element cannot be constructed directly')
+    // eslint-disable-next-line no-unreachable
+    super()
+  }
+
+  protected _$initializeVirtual(
+    virtualName: string,
+    owner: ShadowRoot | null,
+    nodeTreeContext: GeneralBackendContext,
+  ) {
+    this.is = String(virtualName)
+    let backendElement: GeneralBackendElement | null = null
+    if (owner) {
+      if (BM.SHADOW || (BM.DYNAMIC && nodeTreeContext.mode === BackendMode.Shadow)) {
+        const shadowRoot = owner._$backendShadowRoot
+        backendElement = shadowRoot?.createVirtualNode() || null
+        this._$initialize(true, backendElement, owner)
+        backendElement?.associateValue(this)
+      } else {
+        this._$initialize(true, null, owner)
+      }
+    }
+  }
+
+  static create(
+    virtualName: string,
+    owner: ShadowRoot,
+  ): VirtualNode {
+    const node = Object.create(VirtualNode.prototype) as VirtualNode
+    node._$initializeVirtual(virtualName, owner, owner._$nodeTreeContext)
+    return node
+  }
+}

package/tests/backend/domlike.test.ts

@@ -0,0 +1,254 @@
+/* globals document */
+
+import { tmpl, domBackend } from '../base/env'
+import * as glassEasel from '../../src'
+
+const componentSpace = new glassEasel.ComponentSpace()
+componentSpace.updateComponentOptions({
+  writeFieldsToNode: true,
+  writeIdToDOM: true,
+})
+componentSpace.defineComponent({
+  is: '',
+})
+
+describe('domlike backend', () => {
+  beforeAll(() => {
+    domBackend.onEvent((target: glassEasel.domlikeBackend.Element, type, detail, options) => {
+      let cur = target as Element & glassEasel.domlikeBackend.Element
+      while (cur && !cur.__wxElement) {
+        cur = cur.parentNode as Element & glassEasel.domlikeBackend.Element
+      }
+      if (!cur) return
+      const ev = new glassEasel.Event(type, detail, options)
+      glassEasel.Event.dispatchEvent(target.__wxElement as any, ev)
+    })
+  })
+
+  describe('events', () => {
+    it('tap event', () => {
+      const ops: number[] = []
+      let touch: Touch
+
+      const Comp = componentSpace.define()
+        .template(tmpl(`
+          <div
+            bind:tap="onTapWrapper"
+            bind:touchstart="onTouchStartWrapper"
+          >
+            <span
+              id="button"
+              bind:tap="onTapButton"
+              bind:touchstart="onTouchStartButton"
+            ></span>
+          </div>
+        `))
+        .init(({ listener }) => {
+          const onTapWrapper = listener<{ x: number, y: number }>((e) => {
+            ops.push(1)
+            expect(e.bubbles).toBe(true)
+            expect(e.detail).toEqual({ x: -1, y: -1 })
+          })
+
+          const onTapButton = listener<{ x: number, y: number }>((e) => {
+            ops.push(2)
+            expect(e.bubbles).toBe(true)
+            expect(e.detail).toEqual({ x: -1, y: -1 })
+          })
+
+          const onTouchStartWrapper = listener((e) => {
+            ops.push(3)
+            expect(e.bubbles).toBe(true)
+            expect(e.detail).toEqual({
+              altKey: false,
+              changedTouches: [touch],
+              ctrlKey: false,
+              isTrusted: false,
+              metaKey: false,
+              shiftKey: false,
+              targetTouches: [],
+              touches: [touch],
+            })
+          })
+
+          const onTouchStartButton = listener((e) => {
+            ops.push(4)
+            expect(e.bubbles).toBe(true)
+            expect(e.detail).toEqual({
+              altKey: false,
+              changedTouches: [touch],
+              ctrlKey: false,
+              isTrusted: false,
+              metaKey: false,
+              shiftKey: false,
+              targetTouches: [],
+              touches: [touch],
+            })
+          })
+
+          return {
+            onTapWrapper,
+            onTapButton,
+            onTouchStartWrapper,
+            onTouchStartButton,
+          }
+        })
+        .registerComponent()
+
+      const comp = glassEasel.Component.createWithContext('root', Comp, domBackend)
+      const placeholder = document.createElement('span')
+      document.body.appendChild(placeholder)
+      glassEasel.Element.replaceDocumentElement(
+        comp,
+        document.body as any as glassEasel.GeneralBackendElement,
+        placeholder as any as glassEasel.GeneralBackendElement,
+      )
+
+      const button = (comp.$.button as glassEasel.Element).$$ as any as HTMLSpanElement
+
+      touch = {
+        identifier: 0,
+        clientX: -1,
+        clientY: -1,
+        pageX: -1,
+        pageY: -1,
+        screenX: -1,
+        screenY: -1,
+        force: 1,
+        radiusX: 1,
+        radiusY: 1,
+        rotationAngle: 0,
+        target: button,
+      }
+
+      const touchstart = new TouchEvent('touchstart', {
+        touches: [touch],
+        changedTouches: [touch],
+        bubbles: true,
+        composed: true,
+      })
+      button.dispatchEvent(touchstart)
+      const touchend = new TouchEvent('touchend', {
+        touches: [],
+        changedTouches: [touch],
+        bubbles: true,
+        composed: true,
+      })
+      button.dispatchEvent(touchend)
+      expect(ops).toEqual([4, 3, 2, 1])
+    })
+    it('non-delegate event', () => {
+      const ops: number[] = []
+
+      const Comp = componentSpace.define()
+        .template(tmpl(`
+          <div
+            bind:keydown="onKeydownWrapper"
+          >
+            <span
+              id="button"
+              bind:keydown="onKeydownButton"
+            ></span>
+          </div>
+        `))
+        .init(({ listener }) => {
+          const onKeydownWrapper = listener((e) => {
+            ops.push(5)
+            expect(e.bubbles).toBe(true)
+          })
+
+          const onKeydownButton = listener((e) => {
+            ops.push(6)
+            expect(e.bubbles).toBe(true)
+          })
+
+          return {
+            onKeydownWrapper,
+            onKeydownButton,
+          }
+        })
+        .registerComponent()
+
+      const comp = glassEasel.Component.createWithContext('root', Comp, domBackend)
+      const placeholder = document.createElement('span')
+      document.body.appendChild(placeholder)
+      glassEasel.Element.replaceDocumentElement(
+        comp,
+        document.body as any as glassEasel.GeneralBackendElement,
+        placeholder as any as glassEasel.GeneralBackendElement,
+      )
+
+      const button = (comp.$.button as glassEasel.Element).$$ as any as HTMLSpanElement
+
+      const keydown = new Event('keydown', {
+        bubbles: true,
+        composed: true,
+      })
+      button.dispatchEvent(keydown)
+      expect(ops).toEqual([6, 5])
+    })
+    it('non-bubble event', () => {
+      const ops: number[] = []
+
+      const Comp = componentSpace.define()
+        .template(tmpl(`
+          <div
+            bind:focus="onFocusWrapper"
+          >
+            <span
+              id="button"
+              bind:focus="onFocusButton"
+            ></span>
+          </div>
+        `))
+        .init(({ listener }) => {
+          const onFocusWrapper = listener((e) => {
+            ops.push(5)
+            expect(e.bubbles).toBe(false)
+          })
+
+          const onFocusButton = listener((e) => {
+            ops.push(6)
+            expect(e.bubbles).toBe(false)
+          })
+
+          return {
+            onFocusWrapper,
+            onFocusButton,
+          }
+        })
+        .registerComponent()
+
+      const comp = glassEasel.Component.createWithContext('root', Comp, domBackend)
+      const placeholder = document.createElement('span')
+      document.body.appendChild(placeholder)
+      glassEasel.Element.replaceDocumentElement(
+        comp,
+        document.body as any as glassEasel.GeneralBackendElement,
+        placeholder as any as glassEasel.GeneralBackendElement,
+      )
+
+      const button = (comp.$.button as glassEasel.Element).$$ as any as HTMLSpanElement
+
+      const focus = new Event('focus', {
+        bubbles: false,
+        composed: false,
+      })
+      button.dispatchEvent(focus)
+      expect(ops).toEqual([6])
+    })
+  })
+
+  describe('render', () => {
+    it('render should work', async () => {
+      let renderCallback = false
+      await new Promise<void>((resolve) => {
+        domBackend.render(() => {
+          renderCallback = true
+          resolve()
+        })
+      })
+      expect(renderCallback).toBe(true)
+    })
+  })
+})

package/tests/base/env.ts

@@ -0,0 +1,78 @@
+/* eslint-disable no-new-func */
+/* eslint-disable @typescript-eslint/no-implied-eval */
+
+import { TmplGroup } from 'glass-easel-template-compiler'
+import * as glassEasel from '../../src'
+
+glassEasel.globalOptions.throwGlobalError = true
+const warningThrow = (msg: string) => {
+  throw new Error(msg)
+}
+glassEasel.addGlobalWarningListener(warningThrow)
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+;(glassEasel.Element.prototype as any).toJSON = function () {
+  return `[GlassEaselElement ${glassEasel.dumpSingleElementToString(this)}]`
+}
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+;(glassEasel.TextNode.prototype as any).toJSON = function () {
+  return `[GlassEaselTextNode ${glassEasel.dumpSingleElementToString(this)}]`
+}
+
+export const execWithWarn = <T>(expectCount: number, func: () => T): T => {
+  let count = 0
+  const warningListener = () => {
+    count += 1
+    return false
+  }
+  glassEasel.removeGlobalWarningListener(warningThrow)
+  glassEasel.addGlobalWarningListener(warningListener)
+  const ret = func()
+  glassEasel.removeGlobalWarningListener(warningListener)
+  glassEasel.addGlobalWarningListener(warningThrow)
+  expect(count).toBe(expectCount)
+  return ret
+}
+
+type TemplateOptions = {
+  updateMode?: string
+  disallowNativeNode?: boolean
+}
+
+export const tmpl = (src: string, options?: TemplateOptions) => {
+  const group = new TmplGroup()
+  group.addTmpl('', src)
+  const genObjectSrc = `return ${group.getTmplGenObjectGroups()}`
+  group.free()
+  // console.info(genObjectSrc)
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const genObjectGroupList = (new Function(genObjectSrc))() as { [key: string]: any }
+  return {
+    groupList: genObjectGroupList,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    content: genObjectGroupList[''],
+    ...options,
+  }
+}
+
+export const multiTmpl = (src: { [path: string]: string }, options?: TemplateOptions) => {
+  const group = new TmplGroup()
+  Object.keys(src).forEach((path) => {
+    group.addTmpl(path, src[path]!)
+  })
+  const genObjectSrc = `return ${group.getTmplGenObjectGroups()}`
+  group.free()
+  // console.info(genObjectSrc)
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const genObjectGroupList = (new Function(genObjectSrc))() as { [key: string]: any }
+  return {
+    groupList: genObjectGroupList,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    content: genObjectGroupList[''],
+    ...options,
+  }
+}
+
+export const domBackend = new glassEasel.domlikeBackend.CurrentWindowBackendContext()
+export const shadowBackend = new glassEasel.backend.EmptyBackendContext()
+export const composedBackend = new glassEasel.composedBackend.EmptyComposedBackendContext()

package/tests/base/match.ts

@@ -0,0 +1,185 @@
+import {
+  Component,
+  GeneralComponent,
+  ExternalShadowRoot,
+  ShadowRoot,
+  Element,
+  domlikeBackend,
+  TextNode,
+  VirtualNode,
+  Node,
+  BackendMode,
+} from '../../src'
+
+const getSingleSlotElement = (comp: GeneralComponent) => {
+  if (comp._$external) {
+    const sr = comp.shadowRoot as ExternalShadowRoot
+    return sr.slot as unknown as HTMLElement
+  }
+  const sr = comp.shadowRoot as ShadowRoot
+  return sr.getSingleSlotElement()
+}
+
+// check internal structure of an external component (with its child nodes given)
+export const native = (
+  structure: {
+    element: GeneralComponent,
+    childNodes?: { element: GeneralComponent }[],
+  },
+) => {
+  const elem = structure.element
+  const expectChildNodes = structure.childNodes || []
+  expectChildNodes.forEach((expectItem, i) => {
+    expect(elem.childNodes[i]).toBe(expectItem.element)
+    expect(expectItem.element.parentNode).toBe(elem)
+    expect((getSingleSlotElement(elem) as HTMLElement).childNodes[i]).toBe(expectItem.element.$$)
+    expect(elem.getComposedChildren()[i]).toBe(expectItem.element)
+    native(expectItem)
+  })
+  expect(elem.childNodes[expectChildNodes.length]).toBe(undefined)
+  expect(
+    (getSingleSlotElement(elem) as Element).childNodes[expectChildNodes.length],
+  ).toBe(undefined)
+}
+
+// check the structure of a backend element
+const testBackend = (elem: Element): void => {
+  const testDom = (elem: HTMLElement) => {
+    expect(elem).toBeInstanceOf(HTMLElement)
+    let sr = elem
+    let host = (sr as unknown as domlikeBackend.Element).__wxElement as
+      GeneralComponent | undefined
+    while (!host) {
+      sr = sr.parentElement!
+      host = (sr as unknown as domlikeBackend.Element).__wxElement as
+        GeneralComponent | undefined
+    }
+    const slot = (host.shadowRoot as ExternalShadowRoot).slot as unknown as HTMLElement
+    if (elem === slot) {
+      host.childNodes.forEach((child, i) => {
+        if (child instanceof TextNode) {
+          expect(child.textContent).toBe(elem.childNodes[i]!.textContent)
+        } else {
+          // eslint-disable-next-line no-use-before-define
+          virtual(child)
+        }
+      })
+    } else {
+      for (let i = 0; i < elem.childNodes.length; i += 1) {
+        const domChild = elem.childNodes[i]
+        if (domChild instanceof HTMLElement) testDom(domChild)
+        else expect(domChild).toBeInstanceOf(Text)
+      }
+    }
+  }
+  if (elem.getBackendContext().mode === BackendMode.Domlike) {
+    testDom(elem.getBackendElement() as unknown as HTMLElement)
+  }
+}
+
+// check the structure of an element
+export const virtual = (
+  elem: Element,
+  defDomElem?: HTMLElement,
+  defIndex?: number,
+): number => {
+  // for a component, check its shadow children and its shadow root
+  if (elem instanceof Component) {
+    const slotIndex = new Map<Element | HTMLElement, number>()
+    const dfsInherited = (parent: Element) => {
+      parent.childNodes.forEach((child) => {
+        let slot = getSingleSlotElement(elem as GeneralComponent)
+        if (slot !== undefined) {
+          // empty
+        } else {
+          slot = (elem.shadowRoot as ShadowRoot).getContainingSlot(child)
+        }
+        if (slot) {
+          if (!slotIndex.has(slot)) slotIndex.set(slot, 0)
+          const slotContent = elem._$external
+            ? elem.getComposedChildren()
+            : (elem.shadowRoot as ShadowRoot).getSlotContentArray(slot as Element)!
+          const index = slotIndex.get(slot)!
+          expect(child).toBe(slotContent[index])
+          slotIndex.set(slot, index + 1)
+        } else if (child instanceof Element) {
+          virtual(child)
+        } else if (child instanceof TextNode) {
+          if (elem.getBackendContext().mode === BackendMode.Domlike) {
+            expect(child.textContent).toBe(
+              (child.getBackendElement() as unknown as HTMLElement).textContent,
+            )
+          }
+        } else {
+          throw new Error()
+        }
+        if (child instanceof Element && Element.getInheritSlots(child)) {
+          dfsInherited(child)
+        }
+      })
+    }
+    dfsInherited(elem)
+    if (elem._$external) {
+      const sr = (elem.shadowRoot as ExternalShadowRoot).root
+      expect(sr.__wxElement).toBe(elem)
+      testBackend(elem)
+    } else {
+      expect(elem.getComposedChildren()).toStrictEqual([elem.shadowRoot])
+      expect((elem.shadowRoot as ShadowRoot).getHostNode()).toBe(elem)
+      expect((elem.shadowRoot as ShadowRoot).parentNode).toBe(null)
+    }
+  }
+
+  // get the backend element if it is domlike backend
+  let domElem: HTMLElement | undefined
+  if (elem.getBackendContext().mode !== BackendMode.Domlike) {
+    domElem = undefined
+  } else if (elem instanceof Component && elem._$external) {
+    domElem = (elem.shadowRoot as ExternalShadowRoot).slot as unknown as HTMLElement
+  } else {
+    domElem = defDomElem || (elem.getBackendElement() || undefined) as
+      unknown as HTMLElement | undefined
+  }
+
+  // check the composed children recursively
+  let index = defIndex || 0
+  const isVirtualHost = (elem: Node) => {
+    if (elem instanceof Component) {
+      return elem.getComponentOptions().virtualHost
+    }
+    return false
+  }
+  const expectParentNode = Element.getSlotName(elem) === undefined
+    ? elem
+    : elem.ownerShadowRoot!.getHostNode()
+  elem.forEachComposedChild((child) => {
+    expect(child.getComposedParent()).toBe(elem)
+    if (!(child instanceof ShadowRoot)) {
+      let parentNode = child.parentNode
+      while (parentNode && Element.getInheritSlots(parentNode)) {
+        parentNode = parentNode.parentNode
+      }
+      expect(parentNode).toBe(expectParentNode)
+    }
+    if (child instanceof VirtualNode || isVirtualHost(child)) {
+      index = virtual(child as Element, domElem, index)
+    } else if (child instanceof Element) {
+      if (domElem) {
+        expect(child.$$).toBe(domElem.childNodes[index])
+        index += 1
+      }
+      virtual(child)
+    } else if (child instanceof TextNode) {
+      if (domElem) {
+        expect(child.textContent).toBe(domElem.childNodes[index]!.textContent)
+        index += 1
+      }
+    } else {
+      throw new Error()
+    }
+  })
+  if (domElem && !(elem instanceof VirtualNode) && !isVirtualHost(elem)) {
+    expect(domElem.childNodes[index]).toBe(undefined)
+  }
+  return index
+}