glass-easel 0.1.0

package/src/mutation_observer.ts

@@ -0,0 +1,252 @@
+import {
+  Element,
+  Node,
+  TextNode,
+} from '.'
+import {
+  FuncArr,
+} from './func_arr'
+
+/**
+ * What the observer will listen
+ */
+export type MutationObserverOptions = {
+  /** Attribute changes, including property, id, slot, and class changes */
+  properties: boolean
+  /** Child nodes changes */
+  childList: boolean
+  /** Text content changes */
+  characterData: boolean
+  /** Enable property, childList, and characterData changes in subtree */
+  subtree: boolean
+  /** Attached status changes */
+  attachStatus: boolean
+}
+
+export type MutationObserverAttrEvent = {
+  type: 'properties',
+  target: Element,
+  propertyName?: string,
+  attributeName?: string,
+}
+
+export type MutationObserverTextEvent = {
+  type: 'characterData',
+  target: TextNode,
+}
+
+export type MutationObserverChildEvent = {
+  type: 'childList',
+  target: Node,
+  addedNodes?: Node[],
+  removedNodes?: Node[],
+}
+
+export type MutationObserverAttachEvent = {
+  type: 'attachStatus',
+  target: Element,
+  status: 'attached' | 'detached',
+}
+
+export type MutationObserverEvent =
+  MutationObserverAttrEvent
+  | MutationObserverTextEvent
+  | MutationObserverChildEvent
+  | MutationObserverAttachEvent
+
+export type MutationObserverListener<T> = (this: Element, ev: T) => void
+
+export class MutationObserverTarget {
+  private _$bindedElement: Element
+  private _$subtreeObserversCount = 0
+  attrObservers: FuncArr<MutationObserverListener<MutationObserverAttrEvent>> | null = null
+  textObservers: FuncArr<MutationObserverListener<MutationObserverTextEvent>> | null = null
+  childObservers: FuncArr<MutationObserverListener<MutationObserverChildEvent>> | null = null
+  attachObservers: FuncArr<MutationObserverListener<MutationObserverAttachEvent>> | null = null
+
+  constructor(bindedElement: Element) {
+    this._$bindedElement = bindedElement
+  }
+
+  attachChild(child: Element) {
+    if (!child._$mutationObserverTarget) {
+      child._$mutationObserverTarget = new MutationObserverTarget(child)
+    }
+    if (this._$subtreeObserversCount > 0) {
+      child._$mutationObserverTarget.updateSubtreeCount(this._$subtreeObserversCount)
+    }
+  }
+
+  detachChild(child: Element) {
+    if (child._$mutationObserverTarget) {
+      child._$mutationObserverTarget.updateSubtreeCount(-this._$subtreeObserversCount)
+    }
+  }
+
+  updateSubtreeCount(diff: number) {
+    this._$subtreeObserversCount += diff
+    const children = this._$bindedElement.childNodes
+    children.forEach((child) => {
+      if (child instanceof Element) {
+        if (!child._$mutationObserverTarget) {
+          child._$mutationObserverTarget = new MutationObserverTarget(child)
+        }
+        child._$mutationObserverTarget.updateSubtreeCount(diff)
+      }
+    })
+  }
+
+  hasSubtreeListeners(): boolean {
+    return this._$subtreeObserversCount > 0
+  }
+
+  static callAttrObservers(node: Element, eventObj: MutationObserverAttrEvent) {
+    let cur = node
+    do {
+      const target = cur._$mutationObserverTarget
+      target?.attrObservers?.call(cur, [eventObj])
+      const next = cur.parentNode
+      if (!next) break
+      cur = next
+      if (!cur._$mutationObserverTarget) break
+    } while (cur._$mutationObserverTarget._$subtreeObserversCount > 0)
+  }
+
+  static callTextObservers(textNode: TextNode, eventObj: MutationObserverTextEvent) {
+    let cur = textNode.parentNode
+    while (cur) {
+      const target = cur._$mutationObserverTarget
+      if (!target || target._$subtreeObserversCount === 0) break
+      target.textObservers?.call(cur, [eventObj])
+      cur = cur.parentNode
+    }
+  }
+
+  static callChildObservers(node: Element, eventObj: MutationObserverChildEvent) {
+    let cur = node
+    do {
+      const target = cur._$mutationObserverTarget
+      target?.childObservers?.call(cur, [eventObj])
+      const next = cur.parentNode
+      if (!next) break
+      cur = next
+      if (!cur._$mutationObserverTarget) break
+    } while (cur._$mutationObserverTarget._$subtreeObserversCount > 0)
+  }
+
+  static callAttachObservers(node: Element, eventObj: MutationObserverAttachEvent) {
+    const target = node._$mutationObserverTarget
+    target?.attachObservers?.call(node, [eventObj])
+  }
+}
+
+/**
+ * An observer that can observe shadow tree changes
+ *
+ * Like DOM MutationObserver,
+ * this observer can observe attributes, text content, and child nodes changes.
+ * It can optionally observe changes in a subtree.
+ * Further more, it can listen attached/detached events on an element.
+ */
+export class MutationObserver {
+  private _$listener: MutationObserverListener<MutationObserverEvent> | null
+  private _$normalizedListener: MutationObserverListener<MutationObserverEvent> | null
+  private _$subtreeListenersCount = 0
+  private _$bindedFuncArrs: FuncArr<MutationObserverListener<MutationObserverEvent>>[] = []
+  private _$bindedTarget: MutationObserverTarget | null = null
+
+  constructor(
+    listener: (ev: MutationObserverEvent) => void,
+  ) {
+    this._$listener = listener
+    this._$normalizedListener = null
+  }
+
+  static create(
+    listener: (ev: MutationObserverEvent) => void,
+  ): MutationObserver {
+    return new MutationObserver(listener)
+  }
+
+  /** Start observation */
+  observe(
+    targetElement: Element,
+    options: MutationObserverOptions = {
+      properties: false,
+      childList: false,
+      characterData: false,
+      subtree: false,
+      attachStatus: false,
+    },
+  ) {
+    const listener = this._$listener
+    if (!listener) {
+      throw new Error('A MutationObserver can only observe once')
+    }
+    let target: MutationObserverTarget
+    if (targetElement._$mutationObserverTarget) {
+      target = targetElement._$mutationObserverTarget
+    } else {
+      target = new MutationObserverTarget(targetElement)
+      targetElement._$mutationObserverTarget = target
+    }
+    this._$listener = null
+    const cb = (
+      options.subtree
+        ? listener
+        : function noSubtreeListener(this: Node, ev: MutationObserverEvent) {
+          // this might be TextNode, but do the same as Element
+          if (ev.target === this) listener.call(this as Element, ev)
+        }
+    )
+    this._$normalizedListener = cb
+    this._$bindedTarget = target
+    if (options.properties) {
+      if (!target.attrObservers) target.attrObservers = new FuncArr()
+      target.attrObservers.add(cb)
+      this._$bindedFuncArrs.push(
+        target.attrObservers as FuncArr<MutationObserverListener<MutationObserverEvent>>,
+      )
+      this._$subtreeListenersCount += 1
+    }
+    if (options.childList) {
+      if (!target.childObservers) target.childObservers = new FuncArr()
+      target.childObservers.add(cb)
+      this._$bindedFuncArrs.push(
+        target.childObservers as FuncArr<MutationObserverListener<MutationObserverEvent>>,
+      )
+      this._$subtreeListenersCount += 1
+    }
+    if (options.characterData) {
+      if (!target.textObservers) target.textObservers = new FuncArr()
+      target.textObservers.add(cb)
+      this._$bindedFuncArrs.push(
+        target.textObservers as FuncArr<MutationObserverListener<MutationObserverEvent>>,
+      )
+      this._$subtreeListenersCount += 1
+    }
+    if (options.subtree) {
+      target.updateSubtreeCount(this._$subtreeListenersCount)
+    }
+    if (options.attachStatus) {
+      if (!target.attachObservers) target.attachObservers = new FuncArr()
+      target.attachObservers.add(cb)
+      this._$bindedFuncArrs.push(
+        target.attachObservers as FuncArr<MutationObserverListener<MutationObserverEvent>>,
+      )
+    }
+  }
+
+  /** End observation */
+  disconnect() {
+    this._$bindedTarget?.updateSubtreeCount(-this._$subtreeListenersCount)
+    const arr = this._$bindedFuncArrs
+    this._$bindedFuncArrs = []
+    const nl = this._$normalizedListener
+    if (nl) {
+      arr.forEach((funcArr) => {
+        funcArr.remove(nl)
+      })
+    }
+  }
+}

package/src/native_node.ts

@@ -0,0 +1,74 @@
+import * as backend from './backend/backend_protocol'
+import * as composedBackend from './backend/composed_backend_protocol'
+import * as domlikeBackend from './backend/domlike_backend_protocol'
+import {
+  globalOptions,
+} from './global_options'
+import {
+  ClassList,
+} from './class_list'
+import {
+  Element,
+} from './element'
+import {
+  ShadowRoot,
+} from './shadow_root'
+import {
+  GeneralBackendElement,
+} from '.'
+import {
+  BM,
+  BackendMode,
+} from './backend/mode'
+
+export class NativeNode extends Element {
+  is: string
+
+  constructor() {
+    throw new Error('Element cannot be constructed directly')
+    // eslint-disable-next-line no-unreachable
+    super()
+  }
+
+  static create(
+    tagName: string,
+    owner: ShadowRoot,
+  ): NativeNode {
+    const node = Object.create(NativeNode.prototype) as NativeNode
+    node.is = tagName
+    let backendElement: GeneralBackendElement | null
+    if (BM.DOMLIKE || (BM.DYNAMIC && owner.getBackendMode() === BackendMode.Domlike)) {
+      backendElement = (owner._$nodeTreeContext as domlikeBackend.Context)
+        .document.createElement(tagName)
+    } else if (BM.SHADOW || (BM.DYNAMIC && owner.getBackendMode() === BackendMode.Shadow)) {
+      const backend = owner._$backendShadowRoot
+      backendElement = backend?.createElement(tagName) || null
+    } else {
+      const backend = owner._$nodeTreeContext as composedBackend.Context
+      backendElement = backend.createElement(tagName)
+    }
+    node._$initialize(false, backendElement, owner)
+    node.classList = new ClassList(node, null)
+    if (owner && backendElement) {
+      const styleScope = owner.getHostNode()._$definition._$options.styleScope
+      if (styleScope) {
+        if (!(BM.DOMLIKE || (BM.DYNAMIC && owner.getBackendMode() === BackendMode.Domlike))) {
+          (backendElement as backend.Element | composedBackend.Element).setStyleScope(styleScope)
+        }
+      }
+      if (globalOptions.writeExtraInfoToAttr) {
+        const prefix = owner.getHostNode()
+          ._$behavior.ownerSpace?.styleScopeManager.queryName(styleScope)
+        if (prefix) {
+          backendElement.setAttribute('exparser:info-class-prefix', `${prefix}--`)
+        }
+      }
+    }
+    if (!(BM.DOMLIKE || (BM.DYNAMIC && owner.getBackendMode() === BackendMode.Domlike))) {
+      if (backendElement) {
+        (backendElement as backend.Element | composedBackend.Element).associateValue(node)
+      }
+    }
+    return node
+  }
+}

package/src/node.ts

@@ -0,0 +1,174 @@
+import * as backend from './backend/backend_protocol'
+import * as composedBackend from './backend/composed_backend_protocol'
+import * as domlikeBackend from './backend/domlike_backend_protocol'
+import * as suggestedBackend from './backend/suggested_backend_protocol'
+import {
+  TextNode,
+} from './text_node'
+import {
+  Element,
+} from './element'
+import {
+  VirtualNode,
+} from './virtual_node'
+import {
+  Component,
+  ComponentDefinition,
+} from './component'
+import {
+  NativeNode,
+} from './native_node'
+import {
+  DataList,
+  PropertyList,
+  MethodList,
+  ComponentInstance,
+} from './component_params'
+
+export type GeneralBackendContext = (
+  | backend.Context
+  | composedBackend.Context
+  | domlikeBackend.Context
+) &
+  Partial<suggestedBackend.Context>
+export type GeneralBackendElement = (
+  | backend.Element
+  | composedBackend.Element
+  | domlikeBackend.Element
+) &
+  Partial<suggestedBackend.Element>
+
+export type Node = TextNode | Element
+
+export interface NodeCast {
+  /**
+   * Cast a node to a text node
+   *
+   * Returns `null` if the element is not a text node.
+   */
+  asTextNode(): TextNode | null
+
+  /**
+   * Cast a node to an element (native node, virtual node, or component node)
+   *
+   * Returns `null` if the element is not a text node.
+   */
+  asElement(): Element | null
+
+  /**
+   * Cast an element to a native node
+   *
+   * Returns `null` if the element is not a native node.
+   */
+  asNativeNode(): NativeNode | null
+
+  /**
+   * Cast an element to a virtual node
+   *
+   * Returns `null` if the element is not a virtual node.
+   */
+  asVirtualNode(): VirtualNode | null
+
+  /**
+   * Cast an element to the instance of the specified component
+   *
+   * Returns `null` if the element is not the instance of the specified component.
+   */
+  asInstanceOf<
+    UData extends DataList,
+    UProperty extends PropertyList,
+    UMethod extends MethodList,
+  >(
+    componentDefinition: ComponentDefinition<UData, UProperty, UMethod>,
+  ): ComponentInstance<UData, UProperty, UMethod> | null
+}
+
+const dumpAttributesToString = (elem: Element): string => {
+  let ret = ''
+  if (elem instanceof Element) {
+    if (elem._$slotName !== null) ret += ` (slot) name="${elem._$slotName}"`
+    if (elem.id) ret += ` id="${elem.id}"`
+    if (elem.slot) ret += ` slot="${elem.slot}"`
+    const nodeClass = elem.class
+    if (nodeClass) ret += ` class="${nodeClass}"`
+    const style = elem.style
+    if (style) ret += ` style="${elem.style}"`
+  }
+  if (elem instanceof VirtualNode) {
+    // empty
+  } else if (elem instanceof Component) {
+    Component.listProperties(elem).forEach((propName) => {
+      ret += ` ${propName}="${String((elem.data as DataList)[propName])}"`
+    })
+  } else {
+    elem.attributes.forEach((attr) => {
+      ret += ` ${attr.name}="${String(attr.value)}"`
+    })
+  }
+  return ret
+}
+
+export const dumpSingleElementToString = (elem: any) => {
+  if (elem instanceof Element) {
+    let tagName: string
+    if (elem instanceof VirtualNode) {
+      tagName = `(virtual):${elem.is}`
+    } else if (elem instanceof Component) {
+      tagName = `${elem.tagName}:${elem.is}`
+    } else if (elem instanceof NativeNode) {
+      tagName = elem.is
+    } else {
+      tagName = '(unknown)'
+    }
+    return `<${tagName}${dumpAttributesToString(elem)}>`
+  }
+  if (elem instanceof TextNode) {
+    return elem.textContent.trim()
+  }
+  if (elem === null) {
+    return '<(null)>'
+  }
+  if (elem === undefined) {
+    return '<(undefined)>'
+  }
+  return '<(unknown)>'
+}
+
+export const dumpElementToString = (elem: any, composed: boolean, tabDepth = 0) => {
+  let linePrefix = ''
+  for (let i = tabDepth; i; i -= 1) {
+    linePrefix += '  '
+  }
+
+  let ret = linePrefix + dumpSingleElementToString(elem)
+  let isExternal = false
+
+  if (elem instanceof Element) {
+    if (elem instanceof Component) {
+      isExternal = elem.getComponentOptions().externalComponent
+    }
+    if (composed) {
+      if (isExternal) {
+        ret += `\n${linePrefix}  <(external)>`
+        elem.childNodes.forEach((node) => {
+          ret += `\n${dumpElementToString(node, composed, tabDepth + 2)}`
+        })
+      } else {
+        elem.forEachComposedChild((node) => {
+          ret += `\n${dumpElementToString(node, composed, tabDepth + 1)}`
+        })
+      }
+    } else {
+      elem.childNodes.forEach((node) => {
+        ret += `\n${dumpElementToString(node, composed, tabDepth + 1)}`
+      })
+    }
+  }
+
+  return ret
+}
+
+export const dumpElement = (elem: any, composed: boolean) => {
+  // eslint-disable-next-line no-console
+  console.log(dumpElementToString(elem, composed))
+}