glass-easel 0.1.0

package/src/template_engine.ts

@@ -0,0 +1,45 @@
+import {
+  GeneralBehavior,
+} from './behavior'
+import {
+  GeneralComponentInstance,
+} from './component_params'
+import {
+  ShadowRoot,
+} from './shadow_root'
+import {
+  DataChange,
+  DataValue,
+} from './data_proxy'
+import {
+  NormalizedComponentOptions,
+} from './global_options'
+import {
+  ExternalShadowRoot,
+} from './external_shadow_tree'
+
+export interface TemplateEngine {
+  create(
+    behavior: GeneralBehavior,
+    componentOptions: NormalizedComponentOptions,
+  ): Template
+}
+
+export interface Template {
+  createInstance(
+    elem: GeneralComponentInstance,
+  ): TemplateInstance
+}
+
+export interface TemplateInstance {
+  shadowRoot: ShadowRoot | ExternalShadowRoot
+
+  initValues(
+    data: DataValue,
+  ): void
+
+  updateValues(
+    data: DataValue,
+    changes: DataChange[],
+  ): void
+}

package/src/text_node.ts

@@ -0,0 +1,149 @@
+import * as backend from './backend/backend_protocol'
+import * as composedBackend from './backend/composed_backend_protocol'
+import * as domlikeBackend from './backend/domlike_backend_protocol'
+import {
+  ShadowRoot,
+} from './shadow_root'
+import {
+  Element,
+} from './element'
+import {
+  MutationObserverTarget,
+} from './mutation_observer'
+import {
+  GeneralBackendElement, NodeCast,
+} from './node'
+import {
+  BM,
+  BackendMode,
+} from './backend/mode'
+import {
+  Component,
+} from './component'
+
+export class TextNode implements NodeCast {
+  private _$backendElement: GeneralBackendElement | null
+  private _$text: string
+  ownerShadowRoot: ShadowRoot
+  parentNode: Element | null
+  /** @internal */
+  _$destroyOnDetach = false
+  /** @internal */
+  _$nodeSlotElement: Element | null
+
+  constructor(
+    text: string,
+    owner: ShadowRoot,
+  ) {
+    this._$text = String(text)
+    let backendElement: GeneralBackendElement | null
+    if (BM.DOMLIKE || (BM.DYNAMIC && owner.getBackendMode() === BackendMode.Domlike)) {
+      backendElement = (owner._$nodeTreeContext as domlikeBackend.Context)
+        .document.createTextNode(text)
+    } else if (BM.SHADOW || (BM.DYNAMIC && owner.getBackendMode() === BackendMode.Shadow)) {
+      const backend = owner._$backendShadowRoot
+      backendElement = backend?.createTextNode(text) || null
+    } else {
+      const backend = owner._$nodeTreeContext as composedBackend.Context
+      backendElement = backend.createTextNode(text)
+    }
+    this._$backendElement = backendElement
+    if (backendElement) {
+      backendElement.__wxElement = this
+    }
+    this.ownerShadowRoot = owner
+    this.parentNode = null
+    this._$nodeSlotElement = null
+  }
+
+  static create(
+    text: string,
+    ownerShadowRoot: ShadowRoot,
+  ): TextNode {
+    return new TextNode(text, ownerShadowRoot)
+  }
+
+  asTextNode(): TextNode {
+    return this
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  asElement(): null {
+    return null
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  asNativeNode(): null {
+    return null
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  asVirtualNode(): null {
+    return null
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  asInstanceOf(): null {
+    return null
+  }
+
+  /** Destroy the backend element */
+  destroyBackendElement() {
+    if (this._$backendElement) {
+      if (!(
+        BM.DOMLIKE || (BM.DYNAMIC && this.ownerShadowRoot.getBackendMode() === BackendMode.Domlike)
+      )) {
+        (this._$backendElement as backend.Element | composedBackend.Element).release()
+      }
+      this._$backendElement = null
+    }
+  }
+
+  /** Destroy the backend element on next detach */
+  destroyBackendElementOnDetach() {
+    this._$destroyOnDetach = true
+  }
+
+  /** Get the backend element */
+  getBackendElement(): GeneralBackendElement | null {
+    return this._$backendElement
+  }
+
+  /** Get composed parent (including virtual nodes) */
+  getComposedParent(): Element | null {
+    let parent = this.parentNode
+    while (parent?._$inheritSlots) {
+      parent = parent.parentNode
+    }
+    if (parent instanceof Component && !parent._$external) {
+      const slot = (parent.shadowRoot as ShadowRoot).getContainingSlot(this)
+      return slot
+    }
+    return parent
+  }
+
+  get $$() {
+    return this._$backendElement
+  }
+
+  get textContent() {
+    return this._$text
+  }
+
+  set textContent(text: string) {
+    this._$text = String(text)
+    if (this._$backendElement) {
+      if (
+        BM.DOMLIKE || (BM.DYNAMIC && this.ownerShadowRoot.getBackendMode() === BackendMode.Domlike)
+      ) {
+        (this._$backendElement as domlikeBackend.Element).textContent = this._$text
+      } else {
+        (this._$backendElement as backend.Element | composedBackend.Element).setText(this._$text)
+      }
+    }
+    MutationObserverTarget.callTextObservers(this, {
+      type: 'characterData',
+      target: this,
+    })
+  }
+}

package/src/tmpl/index.ts

@@ -0,0 +1,199 @@
+/* eslint-disable class-methods-use-this */
+
+import {
+  ShadowRoot,
+  ExternalShadowRoot,
+  DataValue,
+  templateEngine,
+  GeneralBehavior,
+  NormalizedComponentOptions,
+  GeneralComponent,
+} from '..'
+import { DataChange } from '../data_proxy'
+import { GlassEaselTemplateDOM } from './native_rendering'
+import {
+  ProcGenWrapper,
+  ProcGenEnv,
+  ProcGen,
+  BindingMapGen,
+  UpdatePathTreeNode,
+} from './proc_gen_wrapper'
+
+const DEFAULT_PROC_GEN: ProcGen = () => ({
+  C: (isCreation, defineTextNode, defineElement, defineIfGroup, defineForLoop, defineSlot) => {
+    defineSlot('')
+  },
+  B: Object.create(null) as { [field: string]: BindingMapGen[] },
+})
+export const DEFAULT_PROC_GEN_GROUP: (name: string) => ProcGen = () => DEFAULT_PROC_GEN
+
+export type ProcGenGroup = (name: string) => ProcGen
+
+export type ProcGenGroupList = { [path: string]: ProcGenGroup }
+
+export type ComponentTemplate = {
+  groupList?: ProcGenGroupList,
+  content: (name: string) => ProcGen,
+  updateMode?: string,
+  disallowNativeNode?: boolean,
+  procGenWrapperType?: typeof ProcGenWrapper,
+}
+
+const enum BindingMapUpdateEnabled {
+  Disabled,
+  Enabled,
+  Forced,
+}
+
+export class GlassEaselTemplateEngine implements templateEngine.TemplateEngine {
+  create(
+    behavior: GeneralBehavior,
+    componentOptions: NormalizedComponentOptions,
+  ): templateEngine.Template {
+    if (componentOptions.externalComponent) {
+      return new GlassEaselTemplateDOM(behavior)
+    }
+    return new GlassEaselTemplate(behavior)
+  }
+}
+
+class GlassEaselTemplate implements templateEngine.Template {
+  genObjectGroupEnv: ProcGenEnv
+  updateMode: string
+  disallowNativeNode: boolean
+
+  constructor(
+    behavior: GeneralBehavior,
+  ) {
+    if (typeof behavior._$template !== 'object' && behavior._$template !== undefined) {
+      throw new Error(`Component template of ${behavior.is} must be a valid compiled template (or "null" for default template).`)
+    }
+    const c = (behavior._$template as ComponentTemplate | null | undefined) || {
+      content: DEFAULT_PROC_GEN_GROUP,
+    }
+    this.genObjectGroupEnv = {
+      list: c.groupList || (Object.create(null) as ProcGenGroupList),
+      group: c.content,
+    }
+    this.updateMode = c.updateMode || ''
+    this.disallowNativeNode = c.disallowNativeNode || false
+  }
+
+  createInstance(
+    comp: GeneralComponent,
+  ): templateEngine.TemplateInstance {
+    return new GlassEaselTemplateInstance(this, comp)
+  }
+}
+
+class GlassEaselTemplateInstance implements templateEngine.TemplateInstance {
+  template: GlassEaselTemplate
+  comp: GeneralComponent
+  shadowRoot: ShadowRoot
+  procGenWrapper: ProcGenWrapper
+  bindingMapGen: { [field: string]: BindingMapGen[] } | undefined
+  forceBindingMapUpdate: BindingMapUpdateEnabled
+
+  constructor(template: GlassEaselTemplate, comp: GeneralComponent) {
+    this.template = template
+    const procGen = template.genObjectGroupEnv.group('') || DEFAULT_PROC_GEN_GROUP('')
+    if (template.updateMode === 'bindingMap') {
+      this.forceBindingMapUpdate = BindingMapUpdateEnabled.Forced
+    } else if (template.updateMode === 'virtualTree') {
+      this.forceBindingMapUpdate = BindingMapUpdateEnabled.Disabled
+    } else {
+      this.forceBindingMapUpdate = BindingMapUpdateEnabled.Enabled
+    }
+    this.comp = comp
+    this.shadowRoot = ShadowRoot.createShadowRoot(comp)
+    this.shadowRoot.destroyBackendElementOnDetach()
+    this.procGenWrapper = new ProcGenWrapper(this.shadowRoot, procGen, template.disallowNativeNode)
+  }
+
+  initValues(
+    data: DataValue,
+  ): ShadowRoot | ExternalShadowRoot {
+    this.bindingMapGen = this.procGenWrapper.create(data)
+    return this.shadowRoot
+  }
+
+  updateValues(
+    data: DataValue,
+    changes: DataChange[],
+  ) {
+    if (this.forceBindingMapUpdate === BindingMapUpdateEnabled.Forced) {
+      for (let i = 0; i < changes.length; i += 1) {
+        this.tryBindingMapUpdate(data, changes[i])
+      }
+      return
+    }
+    if (this.forceBindingMapUpdate === BindingMapUpdateEnabled.Enabled && changes.length <= 1) {
+      if (this.bindingMapGen) {
+        if (this.tryBindingMapUpdate(data, changes[0])) {
+          return
+        }
+      }
+    }
+    const dataUpdatePathTree: UpdatePathTreeNode = Object.create(null) as UpdatePathTreeNode
+    for (let i = 0; i < changes.length; i += 1) {
+      const [p, newVal, spliceIndex, spliceDel] = changes[i]!
+      let cur = dataUpdatePathTree as { [key: string]: UpdatePathTreeNode }
+      for (let j = 0; j < p.length; j += 1) {
+        const field = p[j]!
+        const v = cur[field]
+        if (v === true) break
+        if (j === p.length - 1) {
+          if (spliceDel === undefined) {
+            cur[field] = true
+          } else {
+            const startIndex = spliceIndex
+            if (v === undefined) {
+              cur[field] = new Array(startIndex)
+            } else if (!Array.isArray(v)) {
+              const arr = new Array(startIndex)
+              const keys = Object.keys(v)
+              for (let i = 0; i < keys.length; i += 1) {
+                const key = keys[i]!
+                const item = v[key]!
+                const index = Number(key)
+                if (arr.length < index) arr.length = index
+                arr[key as unknown as number] = item
+              }
+              cur[field] = arr
+            }
+            const arr = cur[field] as UpdatePathTreeNode[]
+            if (arr.length < startIndex) {
+              arr.length = startIndex
+            }
+            const inserts = new Array(newVal.length)
+            inserts.fill(true)
+            arr.splice(spliceIndex, spliceDel, ...inserts)
+          }
+          break
+        }
+        if (v === undefined) {
+          const next = Object.create(null) as { [key: string]: UpdatePathTreeNode }
+          cur[field] = next
+          cur = next
+        } else {
+          cur = v as { [key: string]: UpdatePathTreeNode }
+        }
+      }
+    }
+    this.procGenWrapper.update(data, dataUpdatePathTree)
+  }
+
+  tryBindingMapUpdate(
+    data: DataValue,
+    change?: DataChange,
+  ): boolean {
+    if (!change) return true
+    const bindingMapGen = this.bindingMapGen
+    if (!bindingMapGen) {
+      return false
+    }
+    const [path] = change
+    if (path.length !== 1) return false
+    return this.procGenWrapper.bindingMapUpdate(path[0] as string, data, bindingMapGen)
+  }
+}

package/src/tmpl/native_rendering.ts

@@ -0,0 +1,175 @@
+/* global document: false */
+
+import {
+  ExternalShadowRoot,
+  DataValue,
+  templateEngine,
+  GeneralFuncType,
+  GeneralBehavior,
+  Event,
+  ShadowedEvent,
+  GeneralBackendElement,
+  BackendMode,
+  GeneralComponent,
+} from '..'
+import { DataChange } from '../data_proxy'
+import {
+  ProcGenEnv,
+  ProcGen,
+  BindingMapGen,
+} from './proc_gen_wrapper'
+import {
+  ProcGenWrapperDom,
+} from './proc_gen_wrapper_dom'
+import {
+  ComponentTemplate,
+  ProcGenGroupList,
+} from './index'
+
+type ElementWithEvent = Element & {
+  _$wxTmplEv: { [ev: string]: (event: ShadowedEvent<unknown>) => unknown }
+}
+export type ExternalEvent = Event<unknown> & { target: Element, currentTarget: Element }
+
+const DEFAULT_PROC_GEN_DOM: ProcGen = () => ({
+  C: (isCreation, defineTextNode, defineElement, defineIfGroup, defineForLoop, defineSlot) => {
+    defineSlot('')
+  },
+  B: Object.create(null) as { [field: string]: BindingMapGen[] },
+})
+export const DEFAULT_PROC_GEN_GROUP_DOM: (name: string) => ProcGen = () => DEFAULT_PROC_GEN_DOM
+
+export class GlassEaselTemplateDOM implements templateEngine.Template {
+  data: DataValue
+  innerData: DataValue
+  genObjectGroupEnv: ProcGenEnv
+  updateMode: string
+  methods: { [name: string]: GeneralFuncType }
+
+  constructor(
+    behavior: GeneralBehavior,
+  ) {
+    if (typeof behavior._$template !== 'object' && behavior._$template !== undefined) {
+      throw new Error(`Component template of ${behavior.is} must be a valid compiled template (or "null" for default template).`)
+    } else {
+      const c = (behavior._$template as ComponentTemplate | null | undefined) || {
+        content: DEFAULT_PROC_GEN_GROUP_DOM,
+      }
+      this.genObjectGroupEnv = {
+        list: c.groupList || (Object.create(null) as ProcGenGroupList),
+        group: c.content,
+      }
+    }
+    this.updateMode = ''
+    this.methods = behavior._$methodMap
+  }
+
+  createInstance(
+    comp: GeneralComponent,
+  ): templateEngine.TemplateInstance {
+    return new GlassEaselTemplateDOMInstance(this, comp)
+  }
+}
+
+export class GlassEaselTemplateDOMInstance
+implements templateEngine.TemplateInstance, ExternalShadowRoot {
+  template: GlassEaselTemplateDOM
+  comp: GeneralComponent
+  shadowRoot: ExternalShadowRoot
+  shadowRootElement: Element
+  root: GeneralBackendElement
+  slot: GeneralBackendElement
+  idMap: { [key: string]: Element }
+  listeners: Array<unknown>
+  procGenWrapper: ProcGenWrapperDom
+  bindingMapGen: { [field: string]: BindingMapGen[] } | undefined
+
+  constructor(template: GlassEaselTemplateDOM, comp: GeneralComponent) {
+    if (comp.getBackendMode() !== BackendMode.Domlike) {
+      throw new Error(`Component template of ${comp.is} cannot be initialized since external rendering is only supported in Domlike backend currently.`)
+    }
+    const shadowRootElement = comp.getBackendElement() as unknown as Element
+    if (!shadowRootElement) {
+      throw new Error(`Component template of ${comp.is} cannot be initialized as external components since no suitable backend element found.`)
+    }
+    this.comp = comp
+    this.shadowRoot = this
+    this.shadowRootElement = shadowRootElement
+    this.root = shadowRootElement as unknown as GeneralBackendElement
+    this.slot = shadowRootElement as unknown as GeneralBackendElement
+    this.template = template
+    const procGen = template.genObjectGroupEnv.group('') || DEFAULT_PROC_GEN_GROUP_DOM('')
+    this.procGenWrapper = new ProcGenWrapperDom(this, procGen)
+    this.idMap = Object.create(null) as { [key: string]: Element }
+    this.listeners = []
+  }
+
+  initValues(
+    data: DataValue,
+  ) {
+    this.bindingMapGen = this.procGenWrapper.create(data)
+    if (!this.bindingMapGen) {
+      throw new Error('The component template does not support binding-map-update, so it cannot be used as external components.')
+    }
+    const shadowRoot = this.shadowRootElement
+    if (this.slot as unknown as Element === shadowRoot && shadowRoot.childNodes.length > 0) {
+      // if `<slot />` is forgot, add one at the end of the child list
+      const slot = document.createElement('virtual')
+      shadowRoot.appendChild(slot)
+      this.slot = slot as unknown as GeneralBackendElement
+    }
+  }
+
+  getIdMap(): { [key: string]: GeneralBackendElement } {
+    return this.idMap as unknown as { [key: string]: GeneralBackendElement }
+  }
+
+  updateValues(
+    data: DataValue,
+    changes: DataChange[],
+  ) {
+    const bindingMapGen = this.bindingMapGen!
+    for (let i = 0; i < changes.length; i += 1) {
+      const [path] = changes[i]!
+      this.procGenWrapper.bindingMapUpdate(path[0] as string, data, bindingMapGen)
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  setListener<T>(
+    elem: GeneralBackendElement,
+    ev: string,
+    listener: (event: ShadowedEvent<T>) => unknown,
+  ) {
+    const target = elem as unknown as ElementWithEvent
+    if (target._$wxTmplEv) {
+      target._$wxTmplEv[ev] = listener as (event: ShadowedEvent<unknown>) => unknown
+    } else {
+      target._$wxTmplEv = { [ev]: listener as (event: ShadowedEvent<unknown>) => unknown }
+    }
+  }
+
+  handleEvent(elem: GeneralBackendElement, event: Event<unknown>) {
+    const target = elem as unknown as ElementWithEvent
+    let cur: Element = target
+    const root = this.shadowRootElement
+    const evName = event.type
+    const bubbles = event.bubbles
+    for (;;) {
+      const shadowedEvent = event.wrapShadowedEvent(target as any, null, cur as any)
+      const f = (cur as unknown as ElementWithEvent)._$wxTmplEv?.[evName]
+      if (f) {
+        const r = f.call(cur, shadowedEvent)
+        if (r === false) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }
+      if (!bubbles || event.propagationStopped()) break
+      if (cur === root) break
+      const next = cur.parentNode
+      if (next) cur = next as Element
+      else break
+    }
+  }
+}