glass-easel 0.1.0

package/src/relation.ts

@@ -0,0 +1,380 @@
+import {
+  VirtualNode,
+} from './virtual_node'
+import {
+  Behavior,
+  GeneralBehavior,
+} from './behavior'
+import {
+  Component,
+  GeneralComponent,
+} from './component'
+import {
+  Element,
+} from './element'
+import {
+  safeCallback,
+  triggerWarning,
+} from './func_arr'
+import { TraitBehavior } from './trait_behaviors'
+
+export const enum RelationType {
+  Ancestor = 0,
+  Descendant,
+  ParentNonVirtualNode,
+  ChildNonVirtualNode,
+  ParentComponent,
+  ChildComponent,
+}
+
+const RELATION_TYPE_COUNT = 6
+
+export type RelationListener = (target: unknown) => void
+
+export type RelationFailedListener = () => void
+
+export type RelationDefinition = {
+  target: string
+    | GeneralBehavior
+    | TraitBehavior<{ [x: string]: unknown }, { [x: string]: unknown }>
+  domain: string | null
+  type: RelationType
+  linked: RelationListener | null
+  linkChanged: RelationListener | null
+  unlinked: RelationListener | null
+  linkFailed: RelationFailedListener | null
+}
+
+export type RelationDefinitionGroup = {
+  definitions: RelationDefinition[][],
+  keyMap: { [key: string | symbol]: [RelationType, number] },
+}
+
+export const generateRelationDefinitionGroup = (
+  relations?: { [key: string]: RelationDefinition },
+): RelationDefinitionGroup | null => {
+  if (relations === undefined) return null
+  const group = {
+    definitions: new Array(RELATION_TYPE_COUNT) as RelationDefinition[][],
+    keyMap: Object.create(null) as { [key: string]: [RelationType, number] },
+  } as RelationDefinitionGroup
+  const defs = group.definitions
+  const keyMap = group.keyMap
+  const keys = Object.keys(relations)
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i]!
+    const relation = relations[key]!
+    const relationType = relation.type
+    if (defs[relationType]) {
+      keyMap[key] = [relationType, defs[relationType]!.length]
+      defs[relationType]!.push(relation)
+    } else {
+      keyMap[key] = [relationType, 0]
+      defs[relationType] = [relation]
+    }
+  }
+  return group
+}
+
+export const cloneRelationDefinitionGroup = (
+  group: RelationDefinitionGroup,
+): RelationDefinitionGroup => {
+  const newGroup = {
+    definitions: group.definitions.slice(),
+    keyMap: Object.assign(Object.create(null), group.keyMap) as
+      { [key: string]: [RelationType, number] },
+  }
+  return newGroup
+}
+
+export class Relation {
+  private _$comp: GeneralComponent
+  private _$group: RelationDefinitionGroup | null
+  private _$sharedGroup: boolean
+  private _$links: ({ target: GeneralComponent, def: RelationDefinition } | null)[][]
+
+  constructor(
+    associatedComponent: GeneralComponent,
+    group: RelationDefinitionGroup | null,
+  ) {
+    this._$comp = associatedComponent
+    const links = new Array(RELATION_TYPE_COUNT) as
+      ({ target: GeneralComponent, def: RelationDefinition } | null)[][]
+    if (group) {
+      for (let type = 0; type < RELATION_TYPE_COUNT; type += 1) {
+        const definitions = group.definitions[type]
+        if (definitions) {
+          const link = new Array(definitions.length) as
+            ({ target: GeneralComponent, def: RelationDefinition } | null)[]
+          for (let i = 0; i < definitions.length; i += 1) {
+            link[i] = null
+          }
+          links[type] = link
+        }
+      }
+    }
+    this._$group = group
+    this._$sharedGroup = true
+    this._$links = links
+  }
+
+  add(relation: RelationDefinition): symbol {
+    if (this._$sharedGroup) {
+      this._$sharedGroup = false
+      const group = this._$group
+      if (group) {
+        this._$group = {
+          definitions: group.definitions.slice(),
+          keyMap: Object.assign(Object.create(null), group.keyMap) as
+            { [key: string]: [RelationType, number] },
+        }
+      } else {
+        this._$group = {
+          definitions: new Array(RELATION_TYPE_COUNT) as RelationDefinition[][],
+          keyMap: Object.create(null) as { [key: string]: [RelationType, number] },
+        }
+      }
+    }
+    const key = Symbol('')
+    const defs = this._$group!.definitions
+    const keyMap = this._$group!.keyMap
+    const relationType = relation.type
+    if (defs[relationType]) {
+      keyMap[key] = [relationType, defs[relationType]!.length]
+      defs[relationType]!.push(relation)
+    } else {
+      keyMap[key] = [relationType, 0]
+      defs[relationType] = [relation]
+    }
+    const linksGroup = this._$links
+    if (linksGroup[relationType] === undefined) {
+      linksGroup[relationType] = [null]
+    } else {
+      linksGroup[relationType]!.push(null)
+    }
+    return key
+  }
+
+  triggerLinkEvent(
+    parentType: RelationType.ParentComponent
+      | RelationType.ParentNonVirtualNode
+      | RelationType.Ancestor,
+    isDetach: boolean,
+  ) {
+    const comp = this._$comp
+    const linksGroup = this._$links
+    const selfDefs = this._$group?.definitions[parentType]
+    if (!selfDefs) return
+    for (let i = 0; i < selfDefs.length; i += 1) {
+      const links = linksGroup[parentType]!
+      const oldLink = links[i]!
+      let newLink: { target: GeneralComponent, def: RelationDefinition } | null = null
+      const def = selfDefs[i]!
+      let parentBeheviorTest: GeneralBehavior
+        | TraitBehavior<{ [x: string]: unknown }, { [x: string]: unknown }>
+        | null
+      if (def.target instanceof Behavior || def.target instanceof TraitBehavior) {
+        parentBeheviorTest = def.target
+      } else {
+        const space = comp.getRootBehavior().ownerSpace
+        if (space) {
+          parentBeheviorTest = space._$getBehavior(def.target, def.domain) || null
+        } else {
+          parentBeheviorTest = null
+        }
+      }
+      if (parentBeheviorTest) {
+        const parentBehevior = parentBeheviorTest
+        if (!isDetach) {
+          let cur: Element = comp
+          for (;;) {
+            const next = cur.parentNode
+            if (!next) break
+            cur = next
+            if (cur instanceof VirtualNode) {
+              continue
+            }
+            if (cur instanceof Component) {
+              if (cur.hasBehavior(parentBehevior)) {
+                const parentRelation = cur._$relation
+                if (parentRelation) {
+                  let rt
+                  if (parentType === RelationType.ParentComponent) {
+                    rt = RelationType.ChildComponent
+                  } else if (parentType === RelationType.Ancestor) {
+                    rt = RelationType.Descendant
+                  } else {
+                    rt = RelationType.ChildNonVirtualNode
+                  }
+                  const parentDefs = parentRelation._$group?.definitions[rt]
+                  if (parentDefs) {
+                    for (let j = 0; j < parentDefs.length; j += 1) {
+                      const def = parentDefs[j]!
+                      let requiredBehavior: GeneralBehavior
+                        | TraitBehavior<{ [x: string]: unknown }, { [x: string]: unknown }>
+                        | null
+                      if (def.target instanceof Behavior || def.target instanceof TraitBehavior) {
+                        requiredBehavior = def.target
+                      } else {
+                        const space = cur.getRootBehavior().ownerSpace
+                        if (space) {
+                          requiredBehavior = space._$getBehavior(def.target, def.domain) || null
+                        } else {
+                          requiredBehavior = null
+                        }
+                      }
+                      if (requiredBehavior && this._$comp.hasBehavior(requiredBehavior)) {
+                        newLink = {
+                          target: cur as GeneralComponent,
+                          def,
+                        }
+                        break
+                      }
+                    }
+                  }
+                }
+              }
+              if (parentType === RelationType.ParentComponent) break
+            }
+            if (parentType === RelationType.ParentNonVirtualNode) break
+          }
+        }
+      }
+      links[i] = newLink
+      if (oldLink) {
+        const oldTarget = oldLink.target
+        const oldDef = oldLink.def
+        if ((!newLink || oldLink.target !== newLink.target || oldLink.def !== newLink.def)) {
+          if (oldDef.unlinked) {
+            safeCallback(
+              'Relation Unlinked Callback',
+              oldDef.unlinked,
+              oldTarget.getMethodCaller(),
+              [comp.getMethodCaller()],
+              oldTarget,
+            )
+          }
+          if (def.unlinked) {
+            safeCallback(
+              'Relation Unlinked Callback',
+              def.unlinked,
+              comp.getMethodCaller(),
+              [oldTarget.getMethodCaller()],
+              comp,
+            )
+          }
+        } else {
+          if (oldDef.linkChanged) {
+            safeCallback(
+              'Relation Link Changed Callback',
+              oldDef.linkChanged,
+              oldTarget.getMethodCaller(),
+              [comp.getMethodCaller()],
+              oldTarget,
+            )
+          }
+          if (def.linkChanged) {
+            safeCallback(
+              'Relation Link Changed Callback',
+              def.linkChanged,
+              comp.getMethodCaller(),
+              [oldTarget.getMethodCaller()],
+              comp,
+            )
+          }
+        }
+      }
+      if (newLink) {
+        const newTarget = newLink.target
+        const newDef = newLink.def
+        if (!oldLink || oldLink.target !== newLink.target || oldLink.def !== newLink.def) {
+          if (newDef.linked) {
+            safeCallback(
+              'Relation Linked Callback',
+              newDef.linked,
+              newTarget.getMethodCaller(),
+              [comp.getMethodCaller()],
+              newTarget,
+            )
+          }
+          if (def.linked) {
+            safeCallback(
+              'Relation Linked Callback',
+              def.linked,
+              comp.getMethodCaller(),
+              [newTarget.getMethodCaller()],
+              comp,
+            )
+          }
+        }
+      }
+      if (!isDetach && !newLink && def.linkFailed) {
+        safeCallback(
+          'Relation Link Failed Callback',
+          def.linkFailed,
+          comp.getMethodCaller(),
+          [],
+          comp,
+        )
+      }
+    }
+  }
+
+  getLinkedTargets(key: string | symbol): GeneralComponent[] {
+    const typeWithIndex = this._$group?.keyMap[key]
+    if (!typeWithIndex) {
+      triggerWarning(`no relation "${String(key)}" found.`)
+      return []
+    }
+    const [type, index] = typeWithIndex
+    if (
+      type === RelationType.ParentComponent
+        || type === RelationType.ParentNonVirtualNode
+        || type === RelationType.Ancestor
+    ) {
+      const link = this._$links[type]?.[index]
+      if (link) return [link.target]
+      return []
+    }
+    const ret: GeneralComponent[] = []
+    const comp = this._$comp
+    const def = this._$group?.definitions[type]?.[index]
+    const dfs = (node: Element) => {
+      const children = node.childNodes
+      for (let i = 0; i < children.length; i += 1) {
+        const child = children[i]!
+        if (!(child instanceof Element)) continue
+        if (child instanceof VirtualNode) {
+          dfs(child)
+          continue
+        }
+        if (child instanceof Component) {
+          if (child._$relation) {
+            let links
+            if (type === RelationType.ChildComponent) {
+              links = child._$relation._$links[RelationType.ParentComponent]
+            } else if (type === RelationType.Descendant) {
+              links = child._$relation._$links[RelationType.Ancestor]
+            } else {
+              links = child._$relation._$links[RelationType.ParentNonVirtualNode]
+            }
+            if (links) {
+              for (let i = 0; i < links.length; i += 1) {
+                const link = links[i]!
+                if (link && link.target === comp && link.def === def) {
+                  ret.push(child as GeneralComponent)
+                  break
+                }
+              }
+            }
+          }
+          if (type === RelationType.Descendant) dfs(child)
+        } else {
+          if (type === RelationType.ChildComponent || type === RelationType.Descendant) dfs(child)
+        }
+      }
+    }
+    dfs(this._$comp)
+    return ret
+  }
+}

package/src/render.ts

@@ -0,0 +1,25 @@
+import {
+  safeCallback,
+} from './func_arr'
+import {
+  Element,
+} from './element'
+import {
+  GeneralBackendContext,
+} from './node'
+
+const triggerRenderOnContext = (
+  context: GeneralBackendContext,
+  cb: ((err: Error | null) => void) | null,
+) => {
+  context.render(() => {
+    if (typeof cb === 'function') {
+      safeCallback('render', cb, context, [null])
+    }
+  })
+}
+
+export const triggerRender = (element: Element, callback?: (err: Error | null) => void) => {
+  const context = element.getBackendContext()
+  triggerRenderOnContext(context, callback || null)
+}

package/src/selector.ts

@@ -0,0 +1,218 @@
+import {
+  Element,
+  Component,
+  VirtualNode,
+  ShadowRoot,
+  ComponentSpace,
+} from '.'
+
+const enum SegmentRelation {
+  Child,
+  Descendant,
+  CrossShadowDescendant,
+}
+
+type Segment = {
+  id: string
+  classes: string[]
+  relation: SegmentRelation
+}
+
+type Union = Segment[]
+
+// eslint-disable-next-line arrow-body-style
+const getOwnerSpace = (node: Element) => {
+  return node.ownerShadowRoot?.getHostNode().getRootBehavior().ownerSpace
+}
+
+/** A parsed selector that can be used in selector queries */
+export class ParsedSelector {
+  unions: Union[] = []
+
+  private static _$parseSegment(str: string, relation: SegmentRelation): Segment | null {
+    const matches = /^(#[_a-zA-Z][-_a-zA-Z0-9:]*|)((?:\.-?[_a-zA-Z][-_a-zA-Z0-9]*)+|)$/.exec(str)
+    if (!matches) return null
+    const id = matches[1]!.slice(1)
+    const classes = matches[2]!.split('.')
+    classes.shift()
+    if (!id && !classes.length) return null
+    return {
+      id,
+      classes,
+      relation,
+    }
+  }
+
+  constructor(str: string) {
+    const union = String(str || '').split(',')
+    for (let i = 0; i < union.length; i += 1) {
+      const segments = union[i]!.split(/( |\t|>+)/g)
+      const parsedSegs: Segment[] = []
+      let relation = SegmentRelation.Descendant
+      let j = 0
+      for (; j < segments.length; j += 1) {
+        const seg = segments[j]
+        if (!seg || seg === ' ' || seg === '\t' || seg === '>>') continue
+        if (seg[0] === '>') {
+          if (relation !== SegmentRelation.Descendant) break
+          if (seg.length === 3) {
+            relation = SegmentRelation.CrossShadowDescendant
+          } else {
+            relation = SegmentRelation.Child
+          }
+          continue
+        }
+        const parsedSeg = ParsedSelector._$parseSegment(seg, relation)
+        relation = SegmentRelation.Descendant
+        if (!parsedSeg) break
+        parsedSegs.push(parsedSeg)
+      }
+      if (j !== segments.length) continue
+      if (parsedSegs.length) this.unions.push(parsedSegs)
+    }
+  }
+
+  /** Whether the selector is empty */
+  isEmpty(): boolean {
+    return this.unions.length === 0
+  }
+
+  private static _$testSelectorSegment(
+    root: Element | null,
+    ownerSpace: ComponentSpace,
+    node: Element,
+    segments: Segment[],
+    offset: number,
+    relation: SegmentRelation,
+  ): boolean {
+    if (node === root) return false
+    const segment = segments[offset]!
+    // test whether current node matches
+    let match = true
+    if (getOwnerSpace(node) !== ownerSpace) match = false
+    else if (segment.id && segment.id !== node.id) match = false
+    const classes = segment.classes
+    for (let i = 0; match && i < classes.length; i += 1) {
+      if (!node.classList?.contains(classes[i]!)) match = false
+    }
+    if (!match && relation === SegmentRelation.Child) return false
+    let nextNode: Element | null = node
+    if (match && offset === 0) {
+      // if matches the first segment, check whether root is in the same shadow tree
+      if (root === null) return true
+      for (nextNode = nextNode.parentNode; nextNode; nextNode = nextNode.parentNode) {
+        if (nextNode === root) return true
+      }
+      if (relation !== SegmentRelation.CrossShadowDescendant) return false
+      nextNode = node
+      match = false
+    }
+    // check whether ancestors matches
+    const nextRelation = match ? segment.relation : relation
+    do {
+      if (!nextNode.parentNode) {
+        if (nextRelation === SegmentRelation.CrossShadowDescendant) {
+          nextNode = nextNode instanceof ShadowRoot ? nextNode.getHostNode() : null
+        } else if (relation === SegmentRelation.CrossShadowDescendant) {
+          match = false
+          nextNode = nextNode instanceof ShadowRoot ? nextNode.getHostNode() : null
+        } else {
+          nextNode = null
+        }
+      } else {
+        nextNode = nextNode.parentNode
+      }
+      if (nextNode === root) nextNode = null
+    } while (nextNode instanceof VirtualNode)
+    if (!nextNode) return false
+    if (match) {
+      // if matches, try match ancestors
+      const matchRes = ParsedSelector._$testSelectorSegment(
+        root,
+        ownerSpace,
+        nextNode,
+        segments,
+        offset - 1,
+        nextRelation,
+      )
+      if (matchRes) return true
+      if (relation !== SegmentRelation.CrossShadowDescendant) return false
+    }
+    return ParsedSelector._$testSelectorSegment(
+      root,
+      ownerSpace,
+      nextNode,
+      segments,
+      offset,
+      relation,
+    )
+  }
+
+  /**
+   * Test whether the specified node matches the selector
+   *
+   * If `root` is specified, than the selector is match inside this subtree;
+   * otherwise it match in the whole tree.
+   */
+  testSelector(
+    root: Element | null,
+    node: Element,
+  ): boolean {
+    if (node instanceof VirtualNode) return false
+    const union = this.unions
+    let ownerSpace: ComponentSpace | undefined
+    if (root !== null) {
+      ownerSpace = getOwnerSpace(root) || getOwnerSpace(node)
+    } else {
+      ownerSpace = getOwnerSpace(node)
+    }
+    if (ownerSpace === undefined) return false
+    for (let i = 0; i < union.length; i += 1) {
+      const segments = union[i]!
+      const matched = ParsedSelector._$testSelectorSegment(
+        root,
+        ownerSpace,
+        node,
+        segments,
+        segments.length - 1,
+        SegmentRelation.Child,
+      )
+      if (matched) return true
+    }
+    return false
+  }
+
+  /** Queries an element or elements that matches this selector */
+  query(root: Element, findOne: boolean): Element[] | Element | null {
+    const ret: Element[] = []
+    const rec = (root: Element, node: Element, findOne: boolean): Element[] | Element | null => {
+      if (this.testSelector(root, node)) {
+        if (findOne) return node
+        ret.push(node)
+      }
+      if (node instanceof Component) {
+        const shadowRoot = node.getShadowRoot()
+        if (shadowRoot) {
+          const r = rec(root, shadowRoot, findOne)
+          if (r && findOne) {
+            return r
+          }
+        }
+      }
+      const children = node.childNodes
+      for (let i = 0; i < children.length; i += 1) {
+        const child = children[i]
+        if (child instanceof Element) {
+          const r = rec(root, child, findOne)
+          if (r && findOne) {
+            return r
+          }
+        }
+      }
+      return null
+    }
+    const r = rec(root, root, findOne)
+    if (findOne) return r
+    return ret
+  }
+}