glass-easel 0.2.0 → 0.3.0

package/tests/legacy/data_path.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 
-const { execWithWarn } = require('../base/env')
+const { execWithWarn, execWithError } = require('../base/env')
 const glassEasel = require('../../src')
 
 describe('DataPath', function () {
@@ -30,17 +30,17 @@ describe('DataPath', function () {
     })
 
     it('fails at illegal integers', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = 'a[b]'
         expect(glassEasel.dataPath.parseSinglePath(str)).toStrictEqual(null)
-      })
+      }, 'data path descriptor "a[b]" is illegal at char 2 (illegal index)')
     })
 
     it('fails at illegal integer suffixes', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = 'a[1e]'
         expect(glassEasel.dataPath.parseSinglePath(str)).toStrictEqual(null)
-      })
+      }, 'data path descriptor "a[1e]" is illegal at char 3 (illegal index)')
     })
 
     it('should parse empty str', function () {
@@ -96,52 +96,52 @@ describe('DataPath', function () {
     })
 
     it('fails at illegal integers', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = 'a[b]'
         expect(glassEasel.dataPath.parseMultiPaths(str)).toStrictEqual([])
-      })
+      }, 'data path descriptor "a[b]" is illegal at char 2 (illegal index)')
     })
 
     it('fails at illegal integer suffixes', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = 'a[1e]'
         expect(glassEasel.dataPath.parseMultiPaths(str)).toStrictEqual([])
-      })
+      }, 'data path descriptor "a[1e]" is illegal at char 3 (illegal index)')
     })
 
     it('fails at number-started fields', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = '1a'
         expect(glassEasel.dataPath.parseMultiPaths(str)).toStrictEqual([])
-      })
+      }, 'data path descriptor "1a" is illegal at char 0 (field name cannot start with digits)')
     })
 
     it('fails at number-started subfields', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = 'b.1a'
         expect(glassEasel.dataPath.parseMultiPaths(str)).toStrictEqual([])
-      })
+      }, 'data path descriptor "b.1a" is illegal at char 2 (field name cannot start with digits)')
     })
 
     it('fails at empty str', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = ''
         expect(glassEasel.dataPath.parseMultiPaths(str)).toStrictEqual([])
-      })
+      }, 'data path descriptor "" is illegal at char 0 (first field name illegal)')
     })
 
     it('fails at empty subfields', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = 'a.'
         expect(glassEasel.dataPath.parseMultiPaths(str)).toStrictEqual([])
-      })
+      }, 'data path descriptor "a." is illegal at char 2 (field name illegal)')
     })
 
     it('fails at extra chars', function () {
-      execWithWarn(1, function () {
+      execWithError(function () {
         var str = 'a.b*'
         expect(glassEasel.dataPath.parseMultiPaths(str)).toStrictEqual([])
-      })
+      }, 'data path descriptor "a.b*" is illegal at char 3')
     })
   })
 })

package/tests/legacy/data_proxy.test.js

@@ -277,18 +277,21 @@ describe('DataProxy', function () {
       },
     })
     var elem = createElem('data-proxy-prop-passing-deep-copy')
-    expect(elem.$.c.getAttribute('prop-abc')).toBe('1')
+    expect(elem.$.c.getAttribute('prop-abc')).toBe(1)
+    expect(elem.$.c.$$.getAttribute('prop-abc')).toBe('1')
     var dataGroup = glassEasel.Component.getDataProxy(elem)
     var c = 4
     dataGroup.replaceDataOnPath(['a', 'b'], c)
     c = 5
     dataGroup.applyDataUpdates()
-    expect(elem.$.c.getAttribute('prop-abc')).toBe('4')
+    expect(elem.$.c.getAttribute('prop-abc')).toBe(4)
+    expect(elem.$.c.$$.getAttribute('prop-abc')).toBe('4')
     d = { b: c }
     dataGroup.replaceProperty('a', d)
     d.b = 6
     dataGroup.applyDataUpdates()
-    expect(elem.$.c.getAttribute('prop-abc')).toBe('6')
+    expect(elem.$.c.getAttribute('prop-abc')).toBe(6)
+    expect(elem.$.c.$$.getAttribute('prop-abc')).toBe('6')
   })
 
   describe('#scheduleReplace #setChanges #getChanges', function () {
@@ -530,7 +533,8 @@ describe('DataProxy', function () {
             observer: function () {
               actualOrder.push(0)
               expect(elem.data.prop1).toBe(456)
-              expect(elem.$.a.getAttribute('prop-a')).toBe('456')
+              expect(elem.$.a.getAttribute('prop-a')).toBe(456)
+              expect(elem.$.a.$$.getAttribute('prop-a')).toBe('456')
             },
           },
         },
@@ -538,7 +542,8 @@ describe('DataProxy', function () {
           '**': function () {
             actualOrder.push(1)
             expect(elem.data.prop1).toBe(456)
-            expect(elem.$.a.getAttribute('prop-a')).toBe('123')
+            expect(elem.$.a.getAttribute('prop-a')).toBe(123)
+            expect(elem.$.a.$$.getAttribute('prop-a')).toBe('123')
           },
         },
       })
@@ -563,8 +568,10 @@ describe('DataProxy', function () {
               actualOrder.push(1)
               expect(this.data.propA).toBe(123)
               expect(this.data.dataB).toBe(456)
-              expect(this.$.a.getAttribute('prop-a')).toBe('123')
-              expect(this.$.a.getAttribute('prop-b')).toBe('456')
+              expect(this.$.a.getAttribute('prop-a')).toBe(123)
+              expect(this.$.a.$$.getAttribute('prop-a')).toBe('123')
+              expect(this.$.a.getAttribute('prop-b')).toBe(456)
+              expect(this.$.a.$$.getAttribute('prop-b')).toBe('456')
               expect(elem.data.dataE).toBe(true)
             },
           },

package/tests/legacy/external.test.js

@@ -533,21 +533,21 @@ describe('Element', function () {
     e.setNodeClass('e1 e2', 2)
     expect(e.$$.classList.value).toBe('c1 c2 e1 e2')
     e.setNodeClass('d1', 1)
-    expect(e.$$.classList.value).toBe('c1 c2 d1 e1 e2')
+    expect(e.$$.classList.value).toBe('c1 c2 e1 e2 d1')
     e.setNodeClass('')
-    expect(e.$$.classList.value).toBe('d1 e1 e2')
+    expect(e.$$.classList.value).toBe('e1 e2 d1')
     e.setNodeClass('c1 c2 c3')
-    expect(e.$$.classList.value).toBe('c1 c2 c3 d1 e1 e2')
+    expect(e.$$.classList.value).toBe('e1 e2 d1 c1 c2 c3')
     e.setNodeClass('d1 d2', 1)
-    expect(e.$$.classList.value).toBe('c1 c2 c3 d1 d2 e1 e2')
+    expect(e.$$.classList.value).toBe('e1 e2 d1 c1 c2 c3 d2')
     e.setNodeClass('', 1)
-    expect(e.$$.classList.value).toBe('c1 c2 c3 e1 e2')
+    expect(e.$$.classList.value).toBe('e1 e2 c1 c2 c3')
     e.setNodeClass('e1', 2)
-    expect(e.$$.classList.value).toBe('c1 c2 c3 e1')
+    expect(e.$$.classList.value).toBe('e1 c1 c2 c3')
     e.setNodeClass('d1 d2 d3', 1)
-    expect(e.$$.classList.value).toBe('c1 c2 c3 d1 d2 d3 e1')
+    expect(e.$$.classList.value).toBe('e1 c1 c2 c3 d1 d2 d3')
     e.setNodeClass('e1 e2', 2)
-    expect(e.$$.classList.value).toBe('c1 c2 c3 d1 d2 d3 e1 e2')
+    expect(e.$$.classList.value).toBe('e1 c1 c2 c3 d1 d2 d3 e2')
     e.setNodeClass('', 2)
     expect(e.$$.classList.value).toBe('c1 c2 c3 d1 d2 d3')
   })

package/tests/legacy/mutation_observer.test.js

@@ -98,21 +98,23 @@ describe('Observer', function () {
   it('should be able to observe core property changes', function () {
     var elem = createElem('observer-a')
     var expectPropertyNameList = ['id', 'slot', 'class', 'class', 'class', 'class', 'style']
+    var expectPropertyValueList = ['a', 'b', 'c', '', 'c', 'c d', 'd']
     var observer = glassEasel.MutationObserver.create(function (e) {
       expect(this).toBe(e.target)
       expect(e.type).toBe('properties')
       expect(e.target).toBe(elem)
       expect(e.attributeName).toBe(expectPropertyNameList.shift())
+      expect(e.target[e.attributeName]).toBe(expectPropertyValueList.shift())
     })
     observer.observe(elem, { properties: true })
     elem.id = 'a'
     elem.slot = 'b'
     elem.class = 'c'
-    elem.classList.toggle('c')
-    elem.classList.toggle('c')
-    elem.classList.toggle('c', true)
-    elem.classList.toggle('d', false)
-    elem.classList.toggle('d', true)
+    elem.toggleNodeClass('c')
+    elem.toggleNodeClass('c')
+    elem.toggleNodeClass('c', true)
+    elem.toggleNodeClass('d', false)
+    elem.toggleNodeClass('d', true)
     elem.style = 'd'
     expect(expectPropertyNameList.length).toBe(0)
   })

package/tests/legacy/slot.test.js

@@ -42,9 +42,8 @@ const testCases = function (testBackend) {
     root.$$.id = 'root'
     var backendRoot = testBackend.getRootNode()
     if (testBackend === shadowBackend) {
-      var placeholder = backendRoot.createElement('div')
-      backendRoot.appendChild(placeholder)
-      glassEasel.Element.replaceDocumentElement(root, backendRoot, placeholder)
+      backendRoot.appendChild(root.getBackendElement())
+      glassEasel.Element.pretendAttached(root)
     } else if (testBackend === domBackend) {
       var placeholder = testBackend.document.createElement('div')
       backendRoot.appendChild(placeholder)

package/tests/legacy/virtual.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 
-const { tmpl, domBackend, shadowBackend, composedBackend } = require('../base/env')
+const { tmpl, domBackend, shadowBackend, composedBackend, getCustomExternalTemplateEngine } = require('../base/env')
 const glassEasel = require('../../src')
 
 const componentSpace = new glassEasel.ComponentSpace()
@@ -42,9 +42,8 @@ const testCases = function (testBackend) {
     root.$$.id = 'root'
     var backendRoot = testBackend.getRootNode()
     if (testBackend === shadowBackend) {
-      var placeholder = backendRoot.createElement('div')
-      backendRoot.appendChild(placeholder)
-      glassEasel.Element.replaceDocumentElement(root, backendRoot, placeholder)
+      backendRoot.appendChild(root.getBackendElement())
+      glassEasel.Element.pretendAttached(root)
     } else if (testBackend === domBackend) {
       var placeholder = testBackend.document.createElement('div')
       backendRoot.appendChild(placeholder)
@@ -113,26 +112,48 @@ const testCases = function (testBackend) {
       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)
+    it('should work in a native-rendered root', function () {
+      regElem({
+        is: 'virtual-node-a',
+        options: {
+          externalComponent: true,
+          templateEngine:
+            testBackend === domBackend
+              ? undefined
+              : getCustomExternalTemplateEngine(comp => {
+                  var root = comp.getBackendElement()
+                  var slot
+                  if (testBackend === shadowBackend) {
+                    var shadowRoot = root.getShadowRoot()
+                    slot = shadowRoot.createElement('div', 'div')
+                    slot.setSlotName('')
+                    shadowRoot.appendChild(slot)
+                  } else {
+                    slot = testBackend.createElement('div', 'div')
+                    root.appendChild(slot)
+                  }
+                  return {
+                    root,
+                    slot,
+                    getIdMap: () => ({}),
+                    handleEvent() {},
+                    setListener() {},
+                  }
+                }),
+        },
+        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 () {
@@ -238,6 +259,8 @@ const testCases = function (testBackend) {
       matchElementWithDom(e1)
       matchElementWithDom(v3)
       expect(v3.parentNode).toBe(null)
+      v1.replaceChild(v2, v2)
+      matchElementWithDom(e1)
     })
 
     it('should convert to correct DOM replaceChild (replacing indirectly at the end)', function () {
@@ -342,6 +365,7 @@ const testCases = function (testBackend) {
       var e3 = glassEasel.NativeNode.create('e3', 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)
       var t1 = glassEasel.TextNode.create('t1', root.shadowRoot)
       var t2 = glassEasel.TextNode.create('t2', root.shadowRoot)
       e1.appendChild(e2)
@@ -356,11 +380,17 @@ const testCases = function (testBackend) {
       expect(e2.parentNode).toBe(null)
       expect(e2.childNodes.length).toBe(0)
 
-      v2.selfReplaceWith(e2)
+      v2.selfReplaceWith(v3)
       matchElementWithDom(e1)
       matchElementWithDom(v2)
       expect(v2.parentNode).toBe(null)
       expect(v2.childNodes.length).toBe(0)
+
+      v3.selfReplaceWith(e2)
+      matchElementWithDom(e1)
+      matchElementWithDom(v3)
+      expect(v3.parentNode).toBe(null)
+      expect(v3.childNodes.length).toBe(0)
     })
 
     it('should replace component with children', function () {
@@ -405,6 +435,59 @@ const testCases = function (testBackend) {
     })
 
     it('should replace virtualHost component with children', function () {
+      regElem({
+        is: 'virtual-comp1',
+        options: { virtualHost: true },
+        template: '<div>virtual</div><slot />',
+      })
+      regElem({
+        is: 'comp1',
+        template: '<div>actual</div><slot />',
+      })
+      regElem({
+        is: 'virtual-comp2',
+        options: { multipleSlots: true, virtualHost: true },
+        template: '<slot name="a" /><div>virtual</div><slot name="b"/>',
+      })
+      regElem({
+        is: 'comp2',
+        options: { multipleSlots: true },
+        template: '<div><slot name="b"/>actual</div><slot name="a" />',
+      })
+      var e1 = glassEasel.NativeNode.create('e1', root.shadowRoot)
+      var e2 = glassEasel.NativeNode.create('e2', root.shadowRoot)
+      var e3 = glassEasel.NativeNode.create('e3', root.shadowRoot)
+      var e4 = glassEasel.NativeNode.create('e4', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('v1', root.shadowRoot)
+      var t1 = glassEasel.TextNode.create('t1', root.shadowRoot)
+      var c1 = root.shadowRoot.createComponent('comp1')
+      var vc1 = root.shadowRoot.createComponent('virtual-comp1')
+      var c2 = root.shadowRoot.createComponent('comp2')
+      var vc2 = root.shadowRoot.createComponent('virtual-comp2')
+      e1.appendChild(e2)
+      e2.appendChild(e3)
+      e2.appendChild(v1)
+      v1.appendChild(t1)
+      e2.appendChild(e4)
+      e4.slot = 'b'
+
+      e2.selfReplaceWith(vc1)
+      matchElementWithDom(e1)
+      expect(e2.parentNode).toBe(null)
+      expect(e2.childNodes.length).toBe(0)
+
+      vc1.selfReplaceWith(vc2)
+      matchElementWithDom(e1)
+      expect(vc1.parentNode).toBe(null)
+      expect(vc1.childNodes.length).toBe(0)
+
+      vc2.selfReplaceWith(c2)
+      matchElementWithDom(e1)
+      expect(vc2.parentNode).toBe(null)
+      expect(vc2.childNodes.length).toBe(0)
+    })
+
+    it('should replace nested virtualHost component with children', function () {
       regElem({
         is: 'virtual-comp1',
         options: { virtualHost: true },
@@ -460,6 +543,116 @@ const testCases = function (testBackend) {
       matchElementWithDom(e1)
       expect(vc2.parentNode).toBe(null)
       expect(vc2.childNodes.length).toBe(0)
+
+      c2.selfReplaceWith(vc2)
+      matchElementWithDom(e1)
+      expect(c2.parentNode).toBe(null)
+      expect(c2.childNodes.length).toBe(0)
+
+      vc2.selfReplaceWith(vc1)
+      matchElementWithDom(e1)
+      expect(vc2.parentNode).toBe(null)
+      expect(vc2.childNodes.length).toBe(0)
+
+      vc1.selfReplaceWith(vc2)
+      matchElementWithDom(e1)
+      expect(vc1.parentNode).toBe(null)
+      expect(vc1.childNodes.length).toBe(0)
+    })
+
+    it('should replace slot contents with children', function () {
+      regElem({
+        is: 'wrapper',
+        template: '<div><slot /></div>',
+      })
+      regElem({
+        is: 'comp1',
+        template: '<div><slot /></div>',
+      })
+      regElem({
+        is: 'comp2',
+        options: { multipleSlots: true },
+        template: '<div><slot name="b"/></div><slot name="a" />',
+      })
+      var e1 = root.shadowRoot.createComponent('wrapper')
+      var e2 = glassEasel.NativeNode.create('e2', root.shadowRoot)
+      var e3 = glassEasel.NativeNode.create('e3', root.shadowRoot)
+      var e4 = glassEasel.NativeNode.create('e4', root.shadowRoot)
+      var v1 = glassEasel.VirtualNode.create('v1', root.shadowRoot)
+      var t1 = glassEasel.TextNode.create('t1', root.shadowRoot)
+      var c1 = root.shadowRoot.createComponent('comp1')
+      var c2 = root.shadowRoot.createComponent('comp2')
+      e1.appendChild(e2)
+      e2.appendChild(e3)
+      e2.appendChild(v1)
+      v1.appendChild(t1)
+      e2.appendChild(e4)
+      e4.slot = 'b'
+
+      e2.selfReplaceWith(c1)
+      matchElementWithDom(e1)
+      expect(e2.parentNode).toBe(null)
+      expect(e2.childNodes.length).toBe(0)
+
+      c1.selfReplaceWith(c2)
+      matchElementWithDom(e1)
+      expect(c1.parentNode).toBe(null)
+      expect(c1.childNodes.length).toBe(0)
+
+      c2.selfReplaceWith(c1)
+      matchElementWithDom(e1)
+      expect(c2.parentNode).toBe(null)
+      expect(c2.childNodes.length).toBe(0)
+    })
+
+    it('should trigger lifetimes correctly', function () {
+      const lifetimeCalls = []
+      const createElement = name => {
+        const def = componentSpace.defineComponent({
+          is: `self-replace-with-${name}`,
+          lifetimes: {
+            attached() { lifetimeCalls.push(`${name}#attached`) },
+            moved() { lifetimeCalls.push(`${name}#moved`) },
+            detached() { lifetimeCalls.push(`${name}#detached`) },
+          }
+        })
+        return glassEasel.Component.createWithContext(name, def, testBackend)
+      }
+
+      const parent = createElement('parent')
+      const elem = createElement('elem')
+      const child1 = createElement('child1')
+      const child2 = createElement('child2')
+      const childOfChild = createElement('child-of-child')
+
+      parent.appendChild(elem)
+      elem.appendChild(child1)
+      elem.appendChild(child2)
+      child1.appendChild(childOfChild)
+
+      glassEasel.Element.pretendAttached(parent)
+
+      matchElementWithDom(parent)
+      expect(lifetimeCalls).toEqual([
+        'parent#attached',
+        'elem#attached',
+        'child1#attached',
+        'child-of-child#attached',
+        'child2#attached',
+      ])
+      lifetimeCalls.length = 0
+
+      const replacer = createElement('replacer')
+      elem.selfReplaceWith(replacer)
+      
+      matchElementWithDom(parent)
+      expect(lifetimeCalls).toEqual([
+        'elem#detached',
+        'replacer#attached',
+        'child-of-child#moved',
+        'child1#moved',
+        'child2#moved',
+      ])
     })
   })
 
@@ -486,7 +679,7 @@ const testCases = function (testBackend) {
       matchElementWithDom(parent)
     })
 
-    if (testBackend === domBackend)
+    if (testBackend !== shadowBackend) {
       it('should handles tree manipulations', function () {
         regElem({
           is: 'virtual-host-c',
@@ -522,6 +715,46 @@ const testCases = function (testBackend) {
         expect(elem.$$.childNodes.length).toBe(0)
         matchElementWithDom(elem)
       })
+    }
+
+    it('should handles wx-if update', function () {
+      regElem({
+        is: 'list-view',
+        options: {
+          virtualHost: true,
+        },
+        template: '<listview><slot /></listview>',
+      })
+      regElem({
+        is: 'virtual-host-b',
+        options: {
+          virtualHost: true,
+        },
+        data: {
+          a: false,
+          b: false,
+        },
+        template: '<a wx:if="{{a}}" /><b wx:if="{{b}}" />',
+      })
+      regElem({
+        is: 'c',
+        options: {},
+        template: '<list-view><virtual-host-b id="b" /></list-view><span />',
+      })
+      var parent = glassEasel.NativeNode.create('span', root.shadowRoot)
+      var elem = root.shadowRoot.createComponent('c')
+      parent.appendChild(elem)
+      matchElementWithDom(parent)
+
+      elem.$.b.setData({ a: true })
+      matchElementWithDom(parent)
+
+      elem.$.b.setData({ a: false, b: true })
+      matchElementWithDom(parent)
+
+      elem.$.b.setData({ b: false })
+      matchElementWithDom(parent)
+    })
   })
 }