glass-easel 0.1.0

package/tests/legacy/virtual.test.js

@@ -0,0 +1,394 @@
+/* eslint-disable */
+
+const { tmpl, domBackend, shadowBackend, composedBackend } = require('../base/env')
+const glassEasel = require('../../src')
+
+const componentSpace = new glassEasel.ComponentSpace()
+componentSpace.updateComponentOptions({
+  writeFieldsToNode: true,
+  writeIdToDOM: true,
+})
+componentSpace.defineComponent({
+  is: '',
+})
+
+const regElem = (config) => {
+  const { template, ...c } = config
+  if (template) c.template = tmpl(template)
+  return componentSpace.defineComponent(c)
+}
+
+const createElemInBackend = (is, backend) => {
+  const def = componentSpace.getComponent(is)
+  return glassEasel.Component.createWithContext(is || 'test', def, backend || domBackend)
+}
+
+var matchElementWithDom = require('../base/match').virtual
+
+const testCases = function(testBackend){
+  var root = null
+
+  const createElem = function(is){
+    return createElemInBackend(is, testBackend)
+  }
+
+  beforeAll(function(){
+    regElem({
+      is: 'virtual-a',
+    })
+    root = createElem('virtual-a')
+    root.$$.id = 'root'
+    var backendRoot = testBackend.getRootNode()
+    if (testBackend === shadowBackend) {
+      var placeholder = backendRoot.getShadowRoot().createElement('div')
+      backendRoot.getShadowRoot().getRootNode().appendChild(placeholder)
+      glassEasel.Element.replaceDocumentElement(root, backendRoot, placeholder)
+    } else if (testBackend === domBackend) {
+      var placeholder = testBackend.document.createElement('div')
+      backendRoot.appendChild(placeholder)
+      glassEasel.Element.replaceDocumentElement(root, backendRoot, placeholder)
+    } else {
+      var placeholder = testBackend.createElement('div')
+      backendRoot.appendChild(placeholder)
+      glassEasel.Element.replaceDocumentElement(root, backendRoot, placeholder)
+    }
+  })
+
+  describe('#appendChild', function(){
+
+    it('should convert to correct DOM appendChild (directly)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      v1.appendChild(e2)
+      v1.appendChild(v2)
+      v2.appendChild(e3)
+      e1.appendChild(v1)
+      matchElementWithDom(e1)
+    })
+
+    it('should convert to correct DOM appendChild (with more convertion)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(v2)
+      v1.appendChild(v3)
+      v2.appendChild(e2)
+      v3.appendChild(e3)
+      matchElementWithDom(e1)
+    })
+
+    it('should convert to correct DOM insertBefore', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual1', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual2', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('virtual3', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(v2)
+      v1.appendChild(v3)
+      v3.appendChild(e3)
+      v2.appendChild(e2)
+      matchElementWithDom(e1)
+    })
+
+    it('should work in a virtual root', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      v1.appendChild(e1)
+      e1.appendChild(v2)
+      v2.appendChild(e2)
+      v2.appendChild(e3)
+      matchElementWithDom(e1)
+    })
+
+    if (testBackend === domBackend) it('should work in a native-rendered root', function(){
+      regElem({
+        is: 'virtual-node-a',
+        options: {
+          externalComponent: true,
+        },
+        template: '<div><slot></slot></div>',
+      })
+      var e1 = root.shadowRoot.createComponent('virtual-node-a')
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      v1.appendChild(e2)
+      v1.appendChild(e3)
+      e2.appendChild(v2)
+      e1.appendChild(v1)
+      matchElementWithDom(e1, e1.shadowRoot.root)
+    })
+
+  })
+
+  describe('#insertBefore', function(){
+
+    it('should convert to correct DOM insertBefore (directly)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(e3)
+      e1.appendChild(v1)
+      v1.appendChild(e3)
+      v2.appendChild(e2)
+      v1.insertBefore(v2, e3)
+      v1.insertBefore(v2, v2)
+      matchElementWithDom(e1)
+    })
+
+    it('should convert to correct DOM insertBefore (with more convertion)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(v3)
+      v2.appendChild(e2)
+      v3.appendChild(e3)
+      v1.insertBefore(v2, v3)
+      matchElementWithDom(e1)
+    })
+
+    it('should convert to correct DOM appendChild', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v4 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(v4)
+      v1.insertBefore(v2, v4)
+      v1.insertBefore(v2, v4)
+      v2.appendChild(v3)
+      v3.insertBefore(e2)
+      matchElementWithDom(e1)
+    })
+
+  })
+
+  describe('#removeChild', function(){
+
+    it('should convert to correct DOM removeChild (directly)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var e4 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(e2)
+      v1.appendChild(e4)
+      v1.appendChild(e3)
+      v1.removeChild(e4)
+      matchElementWithDom(e1)
+      matchElementWithDom(e4)
+      expect(e4.parentNode).toBe(null)
+    })
+
+    it('should convert to correct DOM removeChild (with more convertion)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var e4 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(e2)
+      v1.appendChild(v2)
+      v2.appendChild(e4)
+      v1.appendChild(e3)
+      e1.removeChild(v1)
+      matchElementWithDom(e1)
+      matchElementWithDom(v1)
+      expect(v1.parentNode).toBe(null)
+    })
+
+  })
+
+  describe('#replaceChild', function(){
+
+    it('should convert to correct DOM replaceChild (replacing directly at the end)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v4 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(v3)
+      v1.appendChild(v4)
+      v2.appendChild(e2)
+      v3.appendChild(e3)
+      v1.replaceChild(v2, v3)
+      matchElementWithDom(e1)
+      matchElementWithDom(v3)
+      expect(v3.parentNode).toBe(null)
+    })
+
+    it('should convert to correct DOM replaceChild (replacing indirectly at the end)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v4 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(v3)
+      v1.appendChild(v4)
+      v2.appendChild(e2)
+      v3.appendChild(e3)
+      v1.replaceChild(v2, v3)
+      matchElementWithDom(e1)
+      matchElementWithDom(v3)
+      expect(v3.parentNode).toBe(null)
+    })
+
+    it('should convert to correct DOM replaceChild (replacing not at the end)', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v4 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      e1.appendChild(v1)
+      v1.appendChild(v3)
+      v1.appendChild(v4)
+      v2.appendChild(e2)
+      v3.appendChild(e3)
+      v4.appendChild(e3)
+      v1.replaceChild(v2, v3)
+      matchElementWithDom(e1)
+      matchElementWithDom(v3)
+      expect(v3.parentNode).toBe(null)
+    })
+
+  })
+
+  describe('#insertChildren #removeChildren', function(){
+
+    it('should able to do batch-insertion', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('virtual', root.shadowRoot)
+      v1.insertChildren([e2], 0)
+      v1.insertChildren([v2], 1)
+      v1.insertChildren([v3], 1)
+      e1.insertChildren([v1, e3], 0)
+      matchElementWithDom(e1)
+    })
+
+    it('should able to do batch-removal', function(){
+      var e1 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var e3 = glassEasel.TextNode.create('text', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('v1', root.shadowRoot)
+      var v2 = glassEasel.VirtualNode.create('v2', root.shadowRoot)
+      var v3 = glassEasel.VirtualNode.create('v3', root.shadowRoot)
+      v1.insertChildren([e2], 0)
+      v1.insertChildren([v2], 1)
+      e1.insertChildren([e3, v3, v1], 0)
+      e1.removeChildren(1, 2)
+      matchElementWithDom(e1)
+      matchElementWithDom(v3)
+      expect(v3.parentNode).toBe(null)
+      matchElementWithDom(v1)
+      expect(v1.parentNode).toBe(null)
+    })
+
+  })
+
+  describe('component virtualHost', function(){
+
+    it('should create virtualized host node', function(){
+      regElem({
+        is: 'virtual-host-a',
+        options: {
+          virtualHost: true,
+        },
+        template: '<div><slot /></div>',
+      })
+      regElem({
+        is: 'virtual-host-b',
+        options: {
+          virtualHost: true,
+        },
+        template: '<span><virtual-host-a><slot /></virtual-host-a></span><virtual-host-a></virtual-host-a>',
+      })
+      var parent = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var elem = root.shadowRoot.createComponent('virtual-host-b')
+      parent.appendChild(elem)
+      matchElementWithDom(parent)
+    })
+
+    if (testBackend === domBackend) it('should handles tree manipulations', function(){
+      regElem({
+        is: 'virtual-host-c',
+        options: {
+          virtualHost: true,
+        },
+        template: '<slot />',
+      })
+      regElem({
+        is: 'virtual-host-d',
+        options: {
+          virtualHost: true,
+        },
+        template: '<div id="v"><span id="s"><slot /></span></div>',
+      })
+      regElem({
+        is: 'virtual-host-e',
+        template: '<virtual-host-c id="c"><virtual-host-d /></virtual-host-c><virtual-host-d id="d"><virtual-host-c /></virtual-host-d>'
+      })
+      var elem = createElem('virtual-host-e')
+      expect(elem.$$.childNodes[0]).toBe(elem.$.c.childNodes[0].$.v.$$)
+      expect(elem.$$.childNodes[1]).toBe(elem.$.d.$.v.$$)
+      matchElementWithDom(elem)
+      elem.$.d.shadowRoot.insertBefore(elem.$.d.$.s, elem.$.d.$.v)
+      expect(elem.$$.childNodes[1]).toBe(elem.$.d.$.s.$$)
+      matchElementWithDom(elem)
+      elem.$.c.replaceChild(elem.$.d, elem.$.c.childNodes[0])
+      expect(elem.$$.childNodes[0]).toBe(elem.$.d.$.s.$$)
+      expect(elem.$$.childNodes.length).toBe(2)
+      matchElementWithDom(elem)
+      elem.$.c.removeChild(elem.$.c.childNodes[0])
+      expect(elem.$$.childNodes.length).toBe(0)
+      matchElementWithDom(elem)
+    })
+
+  })
+
+}
+
+describe('VirtualNode (DOM backend)', function(){
+  testCases(domBackend)
+})
+describe('VirtualNode (shadow backend)', function(){
+  testCases(shadowBackend)
+})
+describe('VirtualNode (composed backend)', function(){
+  testCases(composedBackend)
+})

package/tests/tmpl/binding_map.test.ts

@@ -0,0 +1,208 @@
+import { tmpl, domBackend } from '../base/env'
+import * as glassEasel from '../../src'
+
+const domHtml = (elem: glassEasel.Element): string => {
+  const domElem = elem.getBackendElement() as unknown as Element
+  return domElem.innerHTML
+}
+
+describe('binding map update enabled', () => {
+  test('multi-target update', () => {
+    const def = glassEasel.registerElement({
+      template: tmpl(`
+        <div class="class-a {{c}}">
+          <span id="b" data-a="{{c}}">{{c}}</span>
+        </div>
+      `),
+      data: {
+        c: 'abc',
+      },
+    })
+    const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend)
+    const child = elem.getShadowRoot()!.getElementById('b')!
+    expect(domHtml(elem)).toBe('<div class="class-a abc"><span>abc</span></div>')
+    expect(child.dataset!.a).toBe('abc')
+    elem.setData({ c: 'def' })
+    expect(domHtml(elem)).toBe('<div class="class-a def"><span>def</span></div>')
+    expect(child.dataset!.a).toBe('def')
+  })
+
+  test('model data path update', () => {
+    const subComp = glassEasel.registerElement({
+      template: tmpl(`
+        <div>{{propA}}</div>
+        <slot />
+      `),
+      properties: {
+        propA: Number,
+      },
+    })
+    const def = glassEasel.registerElement({
+      using: {
+        comp: subComp.general(),
+      },
+      template: tmpl(`
+        <comp id="comp" model:prop-a="{{ list[index].a }}">{{ ['A', 'B', 'C'][index + 1] }}</comp>
+      `),
+      data: {
+        index: 0,
+        list: [{
+          a: 123,
+        }, {
+          a: 456,
+        }],
+      },
+    })
+    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const comp = elem.getShadowRoot()!.getElementById('comp') as glassEasel.GeneralComponent
+    expect(domHtml(elem)).toBe('<comp><div>123</div>B</comp>')
+    comp.setData({ propA: 789 })
+    expect(domHtml(elem)).toBe('<comp><div>789</div>B</comp>')
+    expect(elem.data.list).toEqual([{ a: 789 }, { a: 456 }])
+    elem.setData({ index: 1 })
+    expect(domHtml(elem)).toBe('<comp><div>456</div>C</comp>')
+    expect(elem.data.list).toEqual([{ a: 789 }, { a: 456 }])
+    comp.setData({ propA: 123 })
+    expect(domHtml(elem)).toBe('<comp><div>123</div>C</comp>')
+    expect(elem.data.list).toEqual([{ a: 789 }, { a: 123 }])
+  })
+})
+
+describe('binding map update forced', () => {
+  test('mixed usage in multiple components', () => {
+    const subComp = glassEasel.registerElement({
+      properties: {
+        content: String,
+        propA: Number,
+      },
+      template: tmpl(`
+        <div>{{content}}</div>
+      `),
+    })
+    const def = glassEasel.registerElement({
+      using: {
+        'sub-comp': subComp.general(),
+      },
+      template: tmpl(`
+        <sub-comp content="{{c}}" model:prop-a="{{a}}" />
+      `, { updateMode: 'bindingMap' }),
+      data: {
+        a: 123,
+        c: 'abc',
+      },
+    })
+    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const child = (elem.getShadowRoot()!.childNodes[0] as glassEasel.GeneralComponent)
+      .asInstanceOf(subComp)!
+    expect(domHtml(elem)).toBe('<sub-comp><div>abc</div></sub-comp>')
+    elem.setData({ c: 'def' })
+    expect(domHtml(elem)).toBe('<sub-comp><div>def</div></sub-comp>')
+    child.setData({ propA: 456 })
+    expect(elem.data.a).toBe(456)
+    child.setData({ propA: 789 })
+    expect(elem.data.a).toBe(789)
+  })
+
+  test('ignore fields with usage in if position', () => {
+    const def = glassEasel.registerElement({
+      template: tmpl(`
+        <div>{{a}}</div>
+        <div>{{b}}</div>
+        <div>{{c}}</div>
+        <div wx:if="{{b}}">{{c}}</div>
+      `, { updateMode: 'bindingMap' }),
+      data: {
+        a: 1,
+        b: 2,
+        c: 3,
+      },
+    })
+    const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend)
+    expect(domHtml(elem)).toBe('<div>1</div><div>2</div><div>3</div><div>3</div>')
+    elem.setData({ b: 20 })
+    expect(domHtml(elem)).toBe('<div>1</div><div>2</div><div>3</div><div>3</div>')
+    elem.setData({ c: 30 })
+    expect(domHtml(elem)).toBe('<div>1</div><div>2</div><div>3</div><div>3</div>')
+    elem.setData({ a: 10 })
+    expect(domHtml(elem)).toBe('<div>10</div><div>2</div><div>3</div><div>3</div>')
+    elem.setData({ a: 100, b: 200 })
+    expect(domHtml(elem)).toBe('<div>100</div><div>2</div><div>3</div><div>3</div>')
+  })
+
+  test('ignore fields with usage in for position', () => {
+    const def = glassEasel.registerElement({
+      template: tmpl(`
+        <div>{{a}}</div>
+        <div>{{b}}</div>
+        <div>{{c}}</div>
+        <div wx:for="{{[1, b]}}">{{c}}</div>
+      `, { updateMode: 'bindingMap' }),
+      data: {
+        a: 1,
+        b: 2,
+        c: 3,
+      },
+    })
+    const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend)
+    expect(domHtml(elem)).toBe('<div>1</div><div>2</div><div>3</div><div>3</div><div>3</div>')
+    elem.setData({ b: 20 })
+    expect(domHtml(elem)).toBe('<div>1</div><div>2</div><div>3</div><div>3</div><div>3</div>')
+    elem.setData({ c: 30 })
+    expect(domHtml(elem)).toBe('<div>1</div><div>2</div><div>3</div><div>3</div><div>3</div>')
+    elem.setData({ a: 10 })
+    expect(domHtml(elem)).toBe('<div>10</div><div>2</div><div>3</div><div>3</div><div>3</div>')
+    elem.setData({ a: 100, b: 200 })
+    expect(domHtml(elem)).toBe('<div>100</div><div>2</div><div>3</div><div>3</div><div>3</div>')
+  })
+
+  test('ignore fields with usage in template position', () => {
+    const def = glassEasel.registerElement({
+      template: tmpl(`
+        <template name="child">
+          <div>{{c}}</div>
+        </template>
+        <div>{{a}}</div>
+        <div>{{b}}</div>
+        <div>{{c}}</div>
+        <template is="{{b}}" data="{{ {c} }}"></template>
+      `, { updateMode: 'bindingMap' }),
+      data: {
+        a: 1,
+        b: 'child',
+        c: 3,
+      },
+    })
+    const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend)
+    expect(domHtml(elem)).toBe('<div>1</div><div>child</div><div>3</div><div>3</div>')
+    elem.setData({ b: 20 })
+    expect(domHtml(elem)).toBe('<div>1</div><div>child</div><div>3</div><div>3</div>')
+    elem.setData({ c: 30 })
+    expect(domHtml(elem)).toBe('<div>1</div><div>child</div><div>3</div><div>3</div>')
+    elem.setData({ a: 10 })
+    expect(domHtml(elem)).toBe('<div>10</div><div>child</div><div>3</div><div>3</div>')
+    elem.setData({ a: 100, b: 200 })
+    expect(domHtml(elem)).toBe('<div>100</div><div>child</div><div>3</div><div>3</div>')
+  })
+
+  test('ignore fields with usage in slot position', () => {
+    const def = glassEasel.registerElement({
+      template: tmpl(`
+        <div>{{a}}</div>
+        <div>{{b}}</div>
+        <slot name="{{b}}"></slot>
+      `, { updateMode: 'bindingMap' }),
+      data: {
+        a: 1,
+        b: 2,
+      },
+    })
+    const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend)
+    expect(domHtml(elem)).toBe('<div>1</div><div>2</div>')
+    elem.setData({ b: 20 })
+    expect(domHtml(elem)).toBe('<div>1</div><div>2</div>')
+    elem.setData({ a: 10 })
+    expect(domHtml(elem)).toBe('<div>10</div><div>2</div>')
+    elem.setData({ a: 100, b: 200 })
+    expect(domHtml(elem)).toBe('<div>100</div><div>2</div>')
+  })
+})