glass-easel 0.2.0 → 0.3.0

package/src/tmpl/proc_gen_wrapper.ts

@@ -1,21 +1,19 @@
 /* eslint-disable class-methods-use-this */
 
-import { ProcGenGroupList } from '.'
-import {
-  DataValue,
-  Element,
-  ShadowRoot,
-  VirtualNode,
-  TextNode,
-  Component,
-  GeneralComponent,
-  Node,
-  ShadowedEvent,
-  StyleSegmentIndex,
-  NativeNode,
-} from '..'
-import { DataPath } from '../data_path'
-import { SlotMode } from '../shadow_root'
+import { Component, type GeneralComponent } from '../component'
+import { type DataPath } from '../data_path'
+import { type DataValue } from '../data_proxy'
+import { Element, StyleSegmentIndex } from '../element'
+import { type ShadowedEvent } from '../event'
+import { ENV } from '../global_options'
+import { type NativeNode } from '../native_node'
+import { type Node } from '../node'
+import { SlotMode, type ShadowRoot } from '../shadow_root'
+import { type TextNode } from '../text_node'
+import { type ProcGenGroupList } from '../tmpl'
+import { isComponent, isNativeNode } from '../type_symbol'
+import { type VirtualNode } from '../virtual_node'
+import { dispatchError } from '../warning'
 import { RangeListManager } from './range_list_diff'
 
 export type UpdatePathTreeNode = true | { [key: string]: UpdatePathTreeNode } | UpdatePathTreeNode[]
@@ -133,14 +131,18 @@ type DefineForLoop = (
   ) => void,
 ) => void
 
-type DefineSlot = (name: string | undefined, slotValueInit?: (elem: Element) => void) => void
+type DefineSlot = (
+  name: string | undefined,
+  slotValueInit?: (elem: Element) => void,
+  slot?: string,
+) => void
 
 type DefinePureVirtualNode = (children: DefineChildren, slot: string | undefined) => void
 
 export class ProcGenWrapper {
   shadowRoot: ShadowRoot
   procGen: ProcGen
-  disallowNativeNode: boolean
+  fallbackListenerOnNativeNode: boolean
   bindingMapDisabled = false
   eventObjectFilter: (x: ShadowedEvent<unknown>) => ShadowedEvent<unknown> = emptyFilter
   changePropFilter = emptyFilter
@@ -149,12 +151,12 @@ export class ProcGenWrapper {
   constructor(
     shadowRoot: ShadowRoot,
     procGen: ProcGen,
-    disallowNativeNode: boolean,
+    fallbackListenerOnNativeNode: boolean,
     eventObjectFilter?: (x: ShadowedEvent<unknown>) => ShadowedEvent<unknown>,
   ) {
     this.shadowRoot = shadowRoot
     this.procGen = procGen
-    this.disallowNativeNode = disallowNativeNode
+    this.fallbackListenerOnNativeNode = fallbackListenerOnNativeNode
     if (eventObjectFilter) {
       this.eventObjectFilter = eventObjectFilter
     }
@@ -189,7 +191,7 @@ export class ProcGenWrapper {
         // eslint-disable-next-line no-loop-func
         (elem: Element) => {
           if (prevElement !== null && elem !== prevElement) {
-            if (prevElement instanceof Component) {
+            if (isComponent(prevElement)) {
               if (prevElement.hasPendingChanges()) {
                 const nodeDataProxy = Component.getDataProxy(prevElement)
                 nodeDataProxy.applyDataUpdates(true)
@@ -205,7 +207,7 @@ export class ProcGenWrapper {
     }
     const elem = prevElement as Element | null
     if (elem !== null) {
-      if (elem instanceof Component) {
+      if (isComponent(elem)) {
         if (elem.hasPendingChanges()) {
           const nodeDataProxy = Component.getDataProxy(elem)
           nodeDataProxy.applyDataUpdates(true)
@@ -312,6 +314,7 @@ export class ProcGenWrapper {
           key,
           list,
           elem,
+          shadowRoot,
           (item: DataValue, index: number | string): VirtualNode => {
             const childNode = shadowRoot.createVirtualNode('wx:for-item')
             childNode.destroyBackendElementOnDetach()
@@ -353,11 +356,15 @@ export class ProcGenWrapper {
       },
 
       // slot node
-      (slotName: string | undefined, slotValueInit?: (elem: Element) => void) => {
+      (slotName: string | undefined, slotValueInit?: (elem: Element) => void, slot?: string) => {
         const elem = this.shadowRoot.createVirtualNode('slot')
         elem.destroyBackendElementOnDetach()
         Element.setSlotName(elem, dataValueToString(slotName))
-        if (slotElement) Element.setSlotElement(elem, slotElement)
+        if (slotElement) {
+          Element.setSlotElement(elem, slotElement)
+        } else if (slot !== undefined) {
+          elem.slot = slot
+        }
         if (slotValueInit) slotValueInit(elem)
         childNodes.push(elem)
       },
@@ -476,7 +483,7 @@ export class ProcGenWrapper {
         }
         propertyInit(elem, false)
         let dynSlot = false
-        if (elem instanceof Component) {
+        if (isComponent(elem)) {
           const sr = this.dynamicSlotUpdate(elem, dynamicSlotValueNames, children)
           if (sr) dynSlot = true
           if (elem.hasPendingChanges()) {
@@ -619,12 +626,15 @@ export class ProcGenWrapper {
       },
 
       // slot node
-      (slotName: string | undefined, slotValueInit?: (elem: Element) => void) => {
+      (slotName: string | undefined, slotValueInit?: (elem: Element) => void, slot?: string) => {
         const elem = childNodes[index] as Element
         index += 1
         if (slotName !== undefined) {
           Element.setSlotName(elem, dataValueToString(slotName))
         }
+        if (!slotElement) {
+          if (slot !== undefined) elem.slot = slot
+        }
         if (slotValueInit) slotValueInit(elem)
         this.shadowRoot.applySlotValueUpdates(elem)
       },
@@ -782,17 +792,14 @@ export class ProcGenWrapper {
     children: DefineChildren,
     dynamicSlotValueNames: string[] | undefined,
   ): Element {
-    const placeholding = this.shadowRoot.checkComponentPlaceholder(tagName)
-    let elem: Element
     let dynSlot = false
     const initPropValues = (elem: GeneralComponent | NativeNode) => {
-      const sr =
-        elem instanceof Component
-          ? this.dynamicSlotUpdate(elem, dynamicSlotValueNames, children)
-          : null
+      const sr = isComponent(elem)
+        ? this.dynamicSlotUpdate(elem, dynamicSlotValueNames, children)
+        : null
       if (sr) dynSlot = true
       propertyInit(elem, true)
-      if (elem instanceof Component) {
+      if (isComponent(elem)) {
         if (elem.hasPendingChanges()) {
           const nodeDataProxy = Component.getDataProxy(elem)
           nodeDataProxy.applyDataUpdates(true)
@@ -800,55 +807,41 @@ export class ProcGenWrapper {
         sr?.applySlotUpdates()
       }
     }
-    if (this.disallowNativeNode || typeof placeholding === 'boolean') {
-      let placeholderCb: (() => void) | undefined
-      if (placeholding) {
-        placeholderCb = () => {
-          const replacer = this.shadowRoot.createComponent(
-            tagName,
-            tagName,
-            genericImpls,
-            undefined,
-            initPropValues,
-          )
-          replacer.destroyBackendElementOnDetach()
-          const replacerShadowRoot = (replacer as GeneralComponent).getShadowRoot()
-          const elemShadowRoot = elem instanceof Component ? elem.getShadowRoot() : null
-          const isElemDynamicSlots = elemShadowRoot?.getSlotMode() === SlotMode.Dynamic
-          const isReplacerDynamicSlots = replacerShadowRoot?.getSlotMode() === SlotMode.Dynamic
-          if (isReplacerDynamicSlots) {
-            if (!isElemDynamicSlots) {
-              throw new Error(
-                'The "dynamicSlots" option of the component and its placeholder should be the same.',
-              )
-            }
-            elem.parentNode?.replaceChild(replacer, elem)
-          } else {
-            if (isElemDynamicSlots) {
-              throw new Error(
-                'The "dynamicSlots" option of the component and its placeholder should be the same.',
-              )
-            }
-            elem.selfReplaceWith(replacer)
-          }
-        }
-      }
-      elem = this.shadowRoot.createComponent(
+    const placeholderCallback = () => {
+      const replacer = this.shadowRoot.createComponent(
         tagName,
         tagName,
         genericImpls,
-        placeholderCb,
-        initPropValues,
-      )
-      elem.destroyBackendElementOnDetach()
-    } else {
-      elem = this.shadowRoot.createComponentOrNativeNode(
-        placeholding ?? tagName,
-        genericImpls,
+        undefined,
         initPropValues,
       )
-      elem.destroyBackendElementOnDetach()
+      replacer.destroyBackendElementOnDetach()
+      const replacerShadowRoot = (replacer as GeneralComponent).getShadowRoot()
+      const elemShadowRoot = isComponent(elem) ? elem.getShadowRoot() : null
+      const isElemDynamicSlots = elemShadowRoot?.getSlotMode() === SlotMode.Dynamic
+      const isReplacerDynamicSlots = replacerShadowRoot?.getSlotMode() === SlotMode.Dynamic
+      if (isReplacerDynamicSlots !== isElemDynamicSlots) {
+        dispatchError(
+          new Error(
+            `The "dynamicSlots" option of component <${replacer.is}> and its placeholder <${elem.is}> should be the same.`,
+          ),
+          '[render]',
+          isComponent(replacer) ? replacer : replacer.is,
+        )
+      } else if (isReplacerDynamicSlots) {
+        elem.parentNode?.replaceChild(replacer, elem)
+      } else {
+        elem.selfReplaceWith(replacer)
+      }
     }
+    const elem = this.shadowRoot.createComponent(
+      tagName,
+      tagName,
+      genericImpls,
+      placeholderCallback,
+      initPropValues,
+    )
+    elem.destroyBackendElementOnDetach()
     if (dynSlot) {
       this.bindingMapDisabled = true // IDEA better binding map disable detection
     } else {
@@ -874,22 +867,26 @@ export class ProcGenWrapper {
   }
 
   // set class or external classes named `class`
-  c(elem: Element, v: string) {
-    if (elem instanceof Component) {
+  c(elem: Element, v: string | string[]) {
+    if (isComponent(elem)) {
       // "class" itself can also be an external class
-      const hasExternalClass = (elem as GeneralComponent).hasExternalClass('class')
+      const hasExternalClass = elem.hasExternalClass('class')
       if (hasExternalClass) {
-        ;(elem as GeneralComponent).setExternalClass('class', dataValueToString(v))
+        elem.setExternalClass('class', v)
       }
-      elem.class = dataValueToString(v)
-    } else {
-      elem.class = dataValueToString(v)
     }
+    elem.setNodeClass(v)
   }
 
   // set style or property named `style`
   y(elem: Element, v: string) {
-    elem.setNodeStyle(dataValueToString(v), StyleSegmentIndex.MAIN)
+    if (isComponent(elem) && Component.hasProperty(elem, 'style')) {
+      const nodeDataProxy = Component.getDataProxy(elem)
+      const camelName = dashToCamelCase('style')
+      nodeDataProxy.replaceProperty(camelName, v)
+    } else {
+      elem.setNodeStyle(dataValueToString(v), StyleSegmentIndex.MAIN)
+    }
   }
 
   // set dataset
@@ -911,6 +908,7 @@ export class ProcGenWrapper {
     mutated: boolean,
     capture: boolean,
     isDynamic: boolean,
+    _generalLvaluePath?: DataPath | null,
   ) {
     const handler = typeof v === 'function' ? this.eventListenerFilter(v) : dataValueToString(v)
     const listener = (ev: ShadowedEvent<unknown>) => {
@@ -927,6 +925,11 @@ export class ProcGenWrapper {
       }
       return ret
     }
+    if (ENV.DEV) {
+      Object.defineProperty(listener, 'name', {
+        value: typeof handler === 'string' ? handler : handler.name,
+      })
+    }
     const evOptions = {
       final,
       mutated,
@@ -945,18 +948,89 @@ export class ProcGenWrapper {
   }
 
   // update a property or external class of a component, or an attribute of a native node
-  r(elem: Element, name: string, v: unknown, lvaluePath?: DataPath) {
-    if (elem instanceof Component) {
+  r = (
+    elem: Element,
+    name: string,
+    v: unknown,
+    modelLvaluePath?: DataPath | null,
+    generalLvaluePath?: DataPath | null,
+  ) => {
+    const checkFallbackEventListener = (camelName: string) => {
+      if (camelName.startsWith('bind')) {
+        this.v(
+          elem,
+          camelName.slice('bind'.length),
+          dataValueToString(v),
+          false,
+          false,
+          false,
+          true,
+          generalLvaluePath,
+        )
+      } else if (camelName.startsWith('captureBind')) {
+        this.v(
+          elem,
+          camelName.slice('captureBind'.length),
+          dataValueToString(v),
+          false,
+          false,
+          true,
+          true,
+          generalLvaluePath,
+        )
+      } else if (camelName.startsWith('catch')) {
+        this.v(
+          elem,
+          camelName.slice('catch'.length),
+          dataValueToString(v),
+          true,
+          false,
+          false,
+          true,
+          generalLvaluePath,
+        )
+      } else if (camelName.startsWith('captureCatch')) {
+        this.v(
+          elem,
+          camelName.slice('captureCatch'.length),
+          dataValueToString(v),
+          true,
+          false,
+          true,
+          true,
+          generalLvaluePath,
+        )
+      } else if (camelName.startsWith('on')) {
+        this.v(
+          elem,
+          camelName.slice('on'.length),
+          dataValueToString(v),
+          false,
+          false,
+          false,
+          true,
+          generalLvaluePath,
+        )
+      } else {
+        return false
+      }
+      return true
+    }
+    if (isComponent(elem)) {
       const nodeDataProxy = Component.getDataProxy(elem)
       const camelName = dashToCamelCase(name)
       if (nodeDataProxy.replaceProperty(camelName, v)) {
-        if (lvaluePath) {
-          nodeDataProxy.setModelBindingListener(camelName, (value) => {
-            const host = elem.ownerShadowRoot!.getHostNode()
-            const nodeDataProxy = Component.getDataProxy(host)
-            nodeDataProxy.replaceDataOnPath(lvaluePath, value)
-            nodeDataProxy.applyDataUpdates(false)
-          })
+        if (modelLvaluePath !== undefined) {
+          if (modelLvaluePath === null) {
+            nodeDataProxy.setModelBindingListener(camelName, () => {})
+          } else {
+            nodeDataProxy.setModelBindingListener(camelName, (value) => {
+              const host = elem.ownerShadowRoot!.getHostNode()
+              const nodeDataProxy = Component.getDataProxy(host)
+              nodeDataProxy.replaceDataOnPath(modelLvaluePath, value)
+              nodeDataProxy.applyDataUpdates(false)
+            })
+          }
         }
         const tmplArgs = getTmplArgs(elem)
         if (tmplArgs.changeProp?.[name]) {
@@ -969,68 +1043,26 @@ export class ProcGenWrapper {
           }
         }
       } else if (elem.hasExternalClass(name)) {
-        elem.setExternalClass(name, dataValueToString(v))
+        elem.setExternalClass(name, v as string)
       } else {
         // compatibilities for legacy event binding syntax
-        if (camelName.startsWith('bind')) {
-          this.v(
-            elem,
-            camelName.slice('bind'.length),
-            dataValueToString(v),
-            false,
-            false,
-            false,
-            true,
-          )
-        } else if (camelName.startsWith('captureBind')) {
-          this.v(
-            elem,
-            camelName.slice('captureBind'.length),
-            dataValueToString(v),
-            false,
-            false,
-            true,
-            true,
-          )
-        } else if (camelName.startsWith('catch')) {
-          this.v(
-            elem,
-            camelName.slice('catch'.length),
-            dataValueToString(v),
-            true,
-            false,
-            false,
-            true,
-          )
-        } else if (camelName.startsWith('captureCatch')) {
-          this.v(
-            elem,
-            camelName.slice('captureCatch'.length),
-            dataValueToString(v),
-            true,
-            false,
-            true,
-            true,
-          )
-        } else if (camelName.startsWith('on')) {
-          this.v(
-            elem,
-            camelName.slice('on'.length),
-            dataValueToString(v),
-            false,
-            false,
-            false,
-            true,
-          )
+        checkFallbackEventListener(camelName)
+      }
+    } else if (isNativeNode(elem)) {
+      if (this.fallbackListenerOnNativeNode) {
+        // compatibilities for legacy event binding syntax
+        const camelName = dashToCamelCase(name)
+        if (!checkFallbackEventListener(camelName)) {
+          elem.updateAttribute(name, v)
         }
+      } else {
+        elem.updateAttribute(name, v)
       }
-    } else if (elem instanceof NativeNode) {
-      elem.updateAttribute(name, v)
-      if (lvaluePath) {
+      if (modelLvaluePath) {
         elem.setModelBindingListener(name, (value) => {
           const host = elem.ownerShadowRoot!.getHostNode()
           const nodeDataProxy = Component.getDataProxy(host)
-          nodeDataProxy.replaceDataOnPath(lvaluePath, value)
+          nodeDataProxy.replaceDataOnPath(modelLvaluePath, value)
           nodeDataProxy.applyDataUpdates(false)
         })
       }
@@ -1039,7 +1071,7 @@ export class ProcGenWrapper {
 
   // set a worklet directive value
   wl(elem: Element, name: string, value: unknown) {
-    if (elem instanceof Component) {
+    if (isComponent(elem)) {
       elem.triggerWorkletChangeLifetime(name, value)
     } else {
       // TODO warn unused worklet
@@ -1047,8 +1079,8 @@ export class ProcGenWrapper {
   }
 
   // add a change property binding
-  p(elem: Element, name: string, v: ChangePropListener) {
-    if (elem instanceof Component) {
+  p(elem: Element, name: string, v: ChangePropListener, _generalLvaluePath?: DataPath | null) {
+    if (isComponent(elem)) {
       if (Component.hasProperty(elem, name)) {
         const tmplArgs = getTmplArgs(elem)
         if (!tmplArgs.changeProp) {
@@ -1068,3 +1100,9 @@ export class ProcGenWrapper {
     this.eventListenerFilter = eventListenerFilter
   }
 }
+
+export const enum GeneralLvaluePathPrefix {
+  Data = 0,
+  Script = 1, // `abs_path` followed
+  InlineScript = 2, // `abs_path` and `mod_name` followed
+}

package/src/tmpl/proc_gen_wrapper_dom.ts

@@ -1,17 +1,19 @@
 /* eslint-disable class-methods-use-this */
 /* global document */
 
-import { DataValue, Node, ShadowedEvent, GeneralBackendElement } from '..'
-import { DataPath } from '../data_path'
-import { RangeListManager } from './range_list_diff'
+import { type GeneralBackendElement } from '../backend'
+import { type DataPath } from '../data_path'
+import { type DataValue } from '../data_proxy'
+import { type ShadowedEvent } from '../event'
+import { type GlassEaselTemplateDOMInstance } from './native_rendering'
 import {
-  ProcGen,
-  BindingMapGen,
-  UpdatePathTreeRoot,
   dataValueToString,
-  ProcGenWrapper,
+  type BindingMapGen,
+  type ProcGen,
+  type ProcGenWrapper,
+  type UpdatePathTreeRoot,
 } from './proc_gen_wrapper'
-import type { GlassEaselTemplateDOMInstance } from './native_rendering'
+import { type RangeListManager } from './range_list_diff'
 
 type TmplArgs = {
   key?: number | string

package/src/tmpl/range_list_diff.ts

@@ -1,7 +1,9 @@
-import { Element, VirtualNode } from '..'
-import { DataValue } from '../data_proxy'
-import { UpdatePathTreeNode, UpdatePathTreeRoot } from './proc_gen_wrapper'
-import { triggerWarning } from '../func_arr'
+import { type DataValue } from '../data_proxy'
+import { type Element } from '../element'
+import { type ShadowRoot } from '../shadow_root'
+import { type VirtualNode } from '../virtual_node'
+import { triggerWarning } from '../warning'
+import { type UpdatePathTreeNode, type UpdatePathTreeRoot } from './proc_gen_wrapper'
 
 export class RangeListManager {
   keyName: string | null
@@ -10,13 +12,18 @@ export class RangeListManager {
   sharedKeyMap!: { [key: string]: number[] } | undefined
   items!: DataValue[]
   indexes!: (string | number)[] | null
+  ownerShadowRoot: ShadowRoot
+  elem: Element
 
   constructor(
     keyName: string | null,
     dataList: DataValue,
     elem: Element,
+    shadowRoot: ShadowRoot,
     newListItem: (item: DataValue, index: number | string) => VirtualNode,
   ) {
+    this.ownerShadowRoot = shadowRoot
+    this.elem = elem
     this.keyName = keyName
     this.updateKeys(dataList)
     const items = this.items
@@ -50,6 +57,8 @@ export class RangeListManager {
     } else if (typeof dataList === 'string') {
       triggerWarning(
         'Use string as for-list is generally for testing. Each character is treated as an item.',
+        this.ownerShadowRoot.getHostNode(),
+        this.elem,
       )
       items = new Array<string>(dataList.length)
       indexes = null
@@ -59,6 +68,8 @@ export class RangeListManager {
     } else if (typeof dataList === 'number') {
       triggerWarning(
         'Use number as for-list is generally for testing. The number is used as the repeated times of the item.',
+        this.ownerShadowRoot.getHostNode(),
+        this.elem,
       )
       items = new Array<string>(dataList)
       indexes = null
@@ -66,7 +77,13 @@ export class RangeListManager {
         items[i] = i
       }
     } else {
-      triggerWarning('The for-list data is invalid. Use empty array instead.')
+      triggerWarning(
+        `The for-list data is neither Array nor Object, got type "${
+          dataList === null ? 'null' : typeof dataList
+        }".`,
+        this.ownerShadowRoot.getHostNode(),
+        this.elem,
+      )
       items = []
       indexes = null
     }
@@ -100,7 +117,11 @@ export class RangeListManager {
       // convert shared keys to unique keys
       if (sharedKeyMap) {
         const keys = Object.keys(sharedKeyMap)
-        triggerWarning(`Some keys are not unique while list updates: "${keys.join('", "')}".`)
+        triggerWarning(
+          `Some keys are not unique while list updates: "${keys.join('", "')}".`,
+          this.ownerShadowRoot.getHostNode(),
+          this.elem,
+        )
         for (let i = 0; i < keys.length; i += 1) {
           const key = keys[i]!
           const items = sharedKeyMap[key]!
@@ -327,12 +348,12 @@ export class RangeListManager {
     // decide what operation to be used with each item
     const enum OpKind {
       Stable = 0,
-      ForwardMove,
-      BackwardMove,
+      ForwardMove, // move towards the array end (index increasing direction)
+      BackwardMove, // move towards the array start (index decreasing direction)
     }
     const oldListOp = new Array(oldRawKeys.length) as (OpKind | undefined)[]
     const changedItems = new Array(newRawKeys.length) as (VirtualNode | undefined)[]
-    let prevLcsOldPos = lcsArr[curLcsArrIndex]!
+    let prevLcsOldPos = -1
     for (let i = 0; i < oldPosList.length; i += 1) {
       const oldPos = oldPosList[i]!
       if (i === lcsArr[curLcsArrIndex]) {

package/src/trait_behaviors.ts

@@ -1,4 +1,4 @@
-import { ComponentSpace } from '.'
+import { type ComponentSpace } from './component_space'
 
 /**
  * Interface that can be implement dynamically

package/src/type_symbol.ts

@@ -0,0 +1,36 @@
+import { type GeneralComponent } from './component'
+import { type Element } from './element'
+import { type NativeNode } from './native_node'
+import { type ShadowRoot } from './shadow_root'
+import { type TextNode } from './text_node'
+import { type VirtualNode } from './virtual_node'
+
+export const TEXT_NODE_SYMBOL = Symbol('TextNode')
+
+export const ELEMENT_SYMBOL = Symbol('Element')
+
+export const NATIVE_NODE_SYMBOL = Symbol('NativeNode')
+
+export const VIRTUAL_NODE_SYMBOL = Symbol('VirtualNode')
+
+export const SHADOW_ROOT_SYMBOL = Symbol('ShadowRootSymbol')
+
+export const COMPONENT_SYMBOL = Symbol('Component')
+
+export const isTextNode = (e: any): e is TextNode =>
+  !!e && (e as { [TEXT_NODE_SYMBOL]: boolean })[TEXT_NODE_SYMBOL]
+
+export const isElement = (e: any): e is Element =>
+  !!e && (e as { [ELEMENT_SYMBOL]: boolean })[ELEMENT_SYMBOL]
+
+export const isNativeNode = (e: any): e is NativeNode =>
+  !!e && (e as { [NATIVE_NODE_SYMBOL]: boolean })[NATIVE_NODE_SYMBOL]
+
+export const isVirtualNode = (e: any): e is VirtualNode =>
+  !!e && (e as { [VIRTUAL_NODE_SYMBOL]: boolean })[VIRTUAL_NODE_SYMBOL]
+
+export const isShadowRoot = (e: any): e is ShadowRoot =>
+  !!e && (e as { [SHADOW_ROOT_SYMBOL]: boolean })[SHADOW_ROOT_SYMBOL]
+
+export const isComponent = (e: any): e is GeneralComponent =>
+  !!e && (e as { [COMPONENT_SYMBOL]: boolean })[COMPONENT_SYMBOL]