glass-easel 0.1.0

package/tests/core/component_space.test.ts

@@ -0,0 +1,212 @@
+import * as glassEasel from '../../src'
+import {
+  composedBackend, tmpl,
+} from '../base/env'
+
+describe('Component Space', () => {
+  test('update and get component options', () => {
+    const cs = new glassEasel.ComponentSpace()
+    const fakeTmplEngine = {} as glassEasel.templateEngine.TemplateEngine
+    cs.updateComponentOptions({
+      templateEngine: fakeTmplEngine,
+    })
+    expect(cs.getComponentOptions().templateEngine).toBe(fakeTmplEngine)
+  })
+
+  test('create with default component specified', () => {
+    const cs = new glassEasel.ComponentSpace('def')
+    const def = cs.defineComponent({ is: 'def' })
+    expect(cs.getDefaultComponent()).toBe(def)
+    expect(cs.isDefaultComponent(def)).toBe(true)
+    expect(cs.getComponentByUrl('not/found', '')).toBe(def)
+  })
+
+  test('search component with relative and absolute paths', () => {
+    const cs = new glassEasel.ComponentSpace()
+    const def = cs.defineComponent({ is: 'a/comp' })
+    expect(cs.getComponentByUrl('comp', 'a/test')).toBe(def)
+    expect(cs.getComponentByUrl('./comp', 'a/test')).toBe(def)
+    expect(cs.getComponentByUrl('../a/comp', 'a/test')).toBe(def)
+    expect(cs.getComponentByUrl('../a/./comp', 'a/test')).toBe(def)
+    expect(cs.getComponentByUrl('../../a/comp', 'a/test')).toBe(def)
+    expect(cs.getComponentByUrl('/a/comp', 'a/test')).toBe(def)
+    expect(cs.getComponentByUrl('/a/../a/comp', 'a/test')).toBe(def)
+    expect(cs.getComponentByUrlWithoutDefault('/comp', 'a/test')).toBe(null)
+  })
+
+  test('create with base space', () => {
+    const baseCs = new glassEasel.ComponentSpace()
+    const baseBeh = baseCs.defineBehavior({ is: 'base/beh/inner' })
+    baseCs.exportBehavior('base/beh', 'base/beh/inner')
+    const baseComp = baseCs.defineComponent({ is: 'base/comp/inner' })
+    baseCs.exportComponent('base/comp', 'base/comp/inner')
+    const cs = new glassEasel.ComponentSpace('', baseCs)
+    const baseBeh2 = baseCs.defineBehavior({ is: 'base/beh/inner2' })
+    baseCs.exportBehavior('base/beh2', 'base/beh/inner2')
+    const baseComp2 = baseCs.defineComponent({ is: 'base/comp/inner2' })
+    baseCs.exportComponent('base/comp2', 'base/comp/inner2')
+    expect(cs.getBehaviorByUrl('base/beh', '')).toBe(baseBeh)
+    expect(baseCs.getBehaviorByUrl('base/beh/inner2', '')).toBe(baseBeh2)
+    expect(baseCs.getBehaviorByUrl('base/beh2', '')).toBe(null)
+    expect(cs.getBehaviorByUrl('base/beh2', '')).toBe(null)
+    expect(cs.getComponentByUrl('base/comp', '')).toBe(baseComp)
+    expect(baseCs.getComponentByUrlWithoutDefault('base/comp/inner2', '')).toBe(baseComp2)
+    expect(baseCs.getComponentByUrlWithoutDefault('base/comp2', '')).toBe(null)
+    expect(cs.getComponentByUrlWithoutDefault('base/comp2', '')).toBe(null)
+    const newBeh = cs.defineBehavior({ is: 'base/beh' })
+    const newComp = cs.defineComponent({ is: 'base/comp' })
+    expect(cs.getBehaviorByUrl('base/beh', '')).toBe(newBeh)
+    expect(cs.getComponentByUrl('base/comp', '')).toBe(newComp)
+    cs.updateBaseSpace(baseCs)
+    expect(cs.getBehaviorByUrl('base/beh', '')).toBe(newBeh)
+    expect(cs.getComponentByUrl('base/comp', '')).toBe(newComp)
+    expect(cs.getBehaviorByUrl('base/beh2', '')).toBe(baseBeh2)
+    expect(cs.getComponentByUrl('base/comp2', '')).toBe(baseComp2)
+  })
+
+  test('share style scope manager', () => {
+    const cs1 = new glassEasel.ComponentSpace()
+    const cs2 = new glassEasel.ComponentSpace(undefined, undefined, cs1.styleScopeManager)
+    const scope1 = cs1.styleScopeManager.register('a')
+    const scope2 = cs2.styleScopeManager.register('b')
+    expect(cs1.styleScopeManager).toBe(cs2.styleScopeManager)
+    expect(scope1 === scope2).toBe(false)
+    expect(cs2.styleScopeManager.queryName(scope1)).toBe('a')
+    expect(cs1.styleScopeManager.queryName(scope2)).toBe('b')
+  })
+
+  test('import space (public use)', () => {
+    const mainCs = new glassEasel.ComponentSpace()
+    const mainComp = mainCs.defineComponent({ is: 'main/comp' })
+    const mainBeh = mainCs.defineBehavior({ is: 'main/beh' })
+    const extraCs = new glassEasel.ComponentSpace()
+    const extraComp1 = extraCs.defineComponent({ is: 'inner/comp1' })
+    const extraBeh1 = extraCs.defineBehavior({ is: 'inner/beh1' })
+    extraCs.exportComponent('outer/comp1', 'inner/comp1')
+    extraCs.exportBehavior('outer/beh1', 'inner/beh1')
+    mainCs.importSpace('space://extra', extraCs, false)
+    expect(mainCs.getComponentByUrlWithoutDefault('main/comp', '')).toBe(mainComp)
+    expect(mainCs.getComponentByUrlWithoutDefault('outer/comp1', '')).toBe(null)
+    expect(mainCs.getComponentByUrlWithoutDefault('space://extra/inner/comp1', '')).toBe(null)
+    expect(mainCs.getComponentByUrlWithoutDefault('space://extra/outer/comp1', '')).toBe(extraComp1)
+    expect(mainCs.getBehaviorByUrl('main/beh', '')).toBe(mainBeh)
+    expect(mainCs.getBehaviorByUrl('outer/beh1', '')).toBe(null)
+    expect(mainCs.getBehaviorByUrl('space://extra/inner/beh1', '')).toBe(null)
+    expect(mainCs.getBehaviorByUrl('space://extra/outer/beh1', '')).toBe(extraBeh1)
+    const extraComp2 = extraCs.defineComponent({ is: 'inner/comp2' })
+    const extraBeh2 = extraCs.defineBehavior({ is: 'inner/beh2' })
+    extraCs.exportComponent('outer/comp2', 'inner/comp2')
+    extraCs.exportBehavior('outer/beh2', 'inner/beh2')
+    expect(mainCs.getComponentByUrlWithoutDefault('outer/comp2', '')).toBe(null)
+    expect(mainCs.getComponentByUrlWithoutDefault('space://extra/inner/comp2', '')).toBe(null)
+    expect(mainCs.getComponentByUrlWithoutDefault('space://extra/outer/comp2', '')).toBe(extraComp2)
+    expect(mainCs.getBehaviorByUrl('outer/beh2', '')).toBe(null)
+    expect(mainCs.getBehaviorByUrl('space://extra/inner/beh2', '')).toBe(null)
+    expect(mainCs.getBehaviorByUrl('space://extra/outer/beh2', '')).toBe(extraBeh2)
+  })
+
+  test('import space (private use)', () => {
+    const mainCs = new glassEasel.ComponentSpace()
+    const mainComp = mainCs.defineComponent({ is: 'main/comp' })
+    const mainBeh = mainCs.defineBehavior({ is: 'main/beh' })
+    const extraCs = new glassEasel.ComponentSpace()
+    const extraComp1 = extraCs.defineComponent({ is: 'inner/comp1' })
+    const extraBeh1 = extraCs.defineBehavior({ is: 'inner/beh1' })
+    extraCs.exportComponent('outer/comp1', 'inner/comp1')
+    extraCs.exportBehavior('outer/beh1', 'inner/beh1')
+    mainCs.importSpace('space://', extraCs, true)
+    expect(mainCs.getComponentByUrlWithoutDefault('main/comp', '')).toBe(mainComp)
+    expect(mainCs.getComponentByUrlWithoutDefault('inner/comp1', '')).toBe(null)
+    expect(mainCs.getComponentByUrlWithoutDefault('space:///inner/comp1', '')).toBe(extraComp1)
+    expect(mainCs.getComponentByUrlWithoutDefault('space:///outer/comp1', '')).toBe(null)
+    expect(mainCs.getBehaviorByUrl('main/beh', '')).toBe(mainBeh)
+    expect(mainCs.getBehaviorByUrl('inner/beh1', '')).toBe(null)
+    expect(mainCs.getBehaviorByUrl('space:///inner/beh1', '')).toBe(extraBeh1)
+    expect(mainCs.getBehaviorByUrl('space:///outer/beh1', '')).toBe(null)
+    const extraComp2 = extraCs.defineComponent({ is: 'inner/comp2' })
+    const extraBeh2 = extraCs.defineBehavior({ is: 'inner/beh2' })
+    extraCs.exportComponent('outer/comp2', 'inner/comp2')
+    extraCs.exportBehavior('outer/beh2', 'inner/beh2')
+    expect(mainCs.getComponentByUrlWithoutDefault('inner/comp2', '')).toBe(null)
+    expect(mainCs.getComponentByUrlWithoutDefault('space:///inner/comp2', '')).toBe(extraComp2)
+    expect(mainCs.getComponentByUrlWithoutDefault('space:///outer/comp2', '')).toBe(null)
+    expect(mainCs.getBehaviorByUrl('inner/beh2', '')).toBe(null)
+    expect(mainCs.getBehaviorByUrl('space:///inner/beh2', '')).toBe(extraBeh2)
+    expect(mainCs.getBehaviorByUrl('space:///outer/beh2', '')).toBe(null)
+  })
+
+  test('import space (tricky URLs)', () => {
+    const mainCs = new glassEasel.ComponentSpace()
+    const extraCs = new glassEasel.ComponentSpace()
+    const extraComp = extraCs.defineComponent({ is: 'comp' })
+    mainCs.importSpace('space://', extraCs, true)
+    expect(mainCs.getComponentByUrlWithoutDefault('space://comp', '')).toBe(extraComp)
+  })
+
+  test('create component with URL params (without generics)', () => {
+    const cs = new glassEasel.ComponentSpace()
+    const compDef = cs.defineComponent({
+      is: 'comp/path',
+      properties: {
+        propA: {
+          type: String,
+          value: 'init',
+        },
+        propB: Number,
+        propC: Boolean,
+      },
+      data: {
+        dataD: 456,
+      },
+    })
+    const comp = cs.createComponentByUrl(
+      'root',
+      '/comp/path?propC=1&propA&propB=3.4&dataD=789',
+      null,
+      composedBackend,
+    ).asInstanceOf(compDef)!
+    expect(comp.data.propA).toBe('init')
+    expect(comp.data.propB).toBe(3.4)
+    expect(comp.data.propC).toBe(true)
+    expect(comp.data.dataD).toBe(456)
+  })
+
+  test('create component with URL params (with generics)', () => {
+    const cs = new glassEasel.ComponentSpace()
+    const childCompDef = cs.defineComponent({
+      is: 'comp/child',
+      properties: {
+        pc: null,
+      },
+    })
+    const compDef = cs.defineComponent({
+      is: 'comp/parent',
+      properties: {
+        pp: Number,
+      },
+      generics: {
+        ga: true,
+        gb: {
+          default: 'child',
+        },
+      },
+      template: tmpl(`
+        <ga id="a" pc="{{pp}}" />
+        <gb id="b" pc="{{pp}}" />
+      `),
+    })
+    const comp = cs.createComponentByUrl(
+      'root',
+      '/comp/parent?pp=123',
+      {
+        ga: 'comp/child',
+      },
+      composedBackend,
+    ).asInstanceOf(compDef)!
+    expect(comp.data.pp).toBe(123)
+    const a = (comp.$.a as glassEasel.GeneralComponent).asInstanceOf(childCompDef)!
+    const b = (comp.$.b as glassEasel.GeneralComponent).asInstanceOf(childCompDef)!
+    expect(a.data.pc).toBe(123)
+    expect(b.data.pc).toBe(123)
+  })
+})

package/tests/core/data_update.test.ts

@@ -0,0 +1,461 @@
+import {
+  domBackend,
+  execWithWarn,
+  tmpl,
+} from '../base/env'
+import * as glassEasel from '../../src'
+
+const componentSpace = new glassEasel.ComponentSpace()
+componentSpace.updateComponentOptions({
+  writeFieldsToNode: true,
+  writeIdToDOM: true,
+})
+componentSpace.defineComponent({
+  is: '',
+})
+
+describe('partial update', () => {
+  test('should be able to merge updates', () => {
+    const compDef = componentSpace.define()
+      .data(() => ({
+        a: 123,
+        b: 'abc',
+      }))
+      .registerComponent()
+    const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    comp.updateData({ a: 456 })
+    expect(comp.data.a).toBe(123)
+    comp.applyDataUpdates()
+    expect(comp.data.a).toBe(456)
+    expect(comp.data.b).toBe('abc')
+    comp.groupUpdates(() => {
+      comp.updateData({ b: 'def' })
+      comp.updateData({ a: 789 })
+    })
+    expect(comp.data).toStrictEqual({ a: 789, b: 'def' })
+  })
+
+  test('should be able to replace subfields', () => {
+    const execArr = [] as string[]
+    const childCompDef = componentSpace.define()
+      .property('p', String)
+      .lifetime('attached', function () {
+        execArr.push(this.data.p)
+      })
+      .registerComponent()
+    const compDef = componentSpace.define()
+      .usingComponents({
+        child: childCompDef.general(),
+      })
+      .template(tmpl(`
+        <child id="c" p="{{obj.a}}" />
+      `))
+      .data(() => ({
+        obj: { a: 123 },
+      }))
+      .methods({
+        setA() {
+          this.groupUpdates(() => {
+            this.replaceDataOnPath(['obj', 'a'], 456)
+          })
+        },
+      })
+      .registerComponent()
+    const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    glassEasel.Element.pretendAttached(comp)
+    const child = comp.getShadowRoot()!.getElementById('c')!.asInstanceOf(childCompDef)!
+    expect(comp.data.obj.a).toBe(123)
+    expect(child.data.p).toBe('123')
+    comp.setA()
+    expect(comp.data.obj.a).toBe(456)
+    expect(child.data.p).toBe('456')
+    comp.replaceDataOnPath(['obj'], { a: 789 })
+    expect(comp.data.obj.a).toBe(456)
+    expect(child.data.p).toBe('456')
+    comp.applyDataUpdates()
+    expect(comp.data.obj.a).toBe(789)
+    expect(child.data.p).toBe('789')
+    expect(execArr).toStrictEqual(['123'])
+  })
+
+  test('should be able to update list fields (without key)', () => {
+    let execArr = [] as string[]
+    const childCompDef = componentSpace.define()
+      .property('p', String)
+      .observer('p', function () {
+        execArr.push(this.data.p)
+      })
+      .registerComponent()
+    const compDef = componentSpace.define()
+      .usingComponents({
+        child: childCompDef.general(),
+      })
+      .template(tmpl(`
+        <child wx:for="{{list}}" p="{{item}}" />
+      `))
+      .data(() => ({
+        list: ['A', 'B', 'C'],
+      }))
+      .registerComponent()
+    const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    glassEasel.Element.pretendAttached(comp)
+    const getP = () => {
+      const ret = [] as string[]
+      comp.getShadowRoot()!.childNodes[0]!.asElement()!.childNodes.forEach((child) => {
+        ret.push(child.asElement()!.childNodes[0]!.asInstanceOf(childCompDef)!.data.p)
+      })
+      return ret
+    }
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['A', 'B', 'C'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.replaceDataOnPath(['list', 1], 'D')
+    })
+    expect(getP()).toStrictEqual(['A', 'D', 'C'])
+    expect(execArr).toStrictEqual(['D'])
+  })
+
+  test('should be able to update list fields (with key)', () => {
+    let execArr = [] as string[]
+    const childCompDef = componentSpace.define()
+      .property('p', String)
+      .observer('p', function () {
+        execArr.push(this.data.p)
+      })
+      .registerComponent()
+    const compDef = componentSpace.define()
+      .usingComponents({
+        child: childCompDef.general(),
+      })
+      .template(tmpl(`
+        <child wx:for="{{list}}" wx:key="k" p="{{item.v}}" />
+      `))
+      .data(() => ({
+        list: [
+          { k: 1, v: 'A' },
+          { k: 2, v: 'B' },
+          { k: 2, v: 'C' },
+        ],
+      }))
+      .registerComponent()
+    const comp = execWithWarn(1, () => glassEasel.Component.createWithContext('root', compDef, domBackend))
+    glassEasel.Element.pretendAttached(comp)
+    const getP = () => {
+      const ret = [] as string[]
+      comp.getShadowRoot()!.childNodes[0]!.asElement()!.childNodes.forEach((child) => {
+        ret.push(child.asElement()!.childNodes[0]!.asInstanceOf(childCompDef)!.data.p)
+      })
+      return ret
+    }
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['A', 'B', 'C'])
+    execArr = []
+    execWithWarn(1, () => {
+      comp.groupUpdates(() => {
+        comp.replaceDataOnPath(['list', 0, 'v'], 'D')
+      })
+    })
+    expect(getP()).toStrictEqual(['D', 'B', 'C'])
+    expect(execArr).toStrictEqual(['D'])
+    execArr = []
+    execWithWarn(1, () => {
+      comp.groupUpdates(() => {
+        comp.replaceDataOnPath(['list', 1, 'v'], 'E')
+      })
+    })
+    expect(getP()).toStrictEqual(['D', 'E', 'C'])
+    expect(execArr).toStrictEqual(['E'])
+  })
+
+  test('should be able to update list keys', () => {
+    let execArr = [] as string[]
+    const childCompDef = componentSpace.define()
+      .property('p', String)
+      .observer('p', function () {
+        execArr.push(this.data.p)
+      })
+      .registerComponent()
+    const compDef = componentSpace.define()
+      .usingComponents({
+        child: childCompDef.general(),
+      })
+      .template(tmpl(`
+        <child wx:for="{{list}}" wx:key="k" p="{{item.v}}" />
+      `))
+      .data(() => ({
+        list: [
+          { k: 1, v: 'A' },
+          { k: 2, v: 'B' },
+          { k: 2, v: 'C' },
+        ],
+      }))
+      .registerComponent()
+    const comp = execWithWarn(1, () => glassEasel.Component.createWithContext('root', compDef, domBackend))
+    glassEasel.Element.pretendAttached(comp)
+    const getP = () => {
+      const ret = [] as string[]
+      comp.getShadowRoot()!.childNodes[0]!.asElement()!.childNodes.forEach((child) => {
+        ret.push(child.asElement()!.childNodes[0]!.asInstanceOf(childCompDef)!.data.p)
+      })
+      return ret
+    }
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['A', 'B', 'C'])
+    execArr = []
+    execWithWarn(1, () => {
+      comp.groupUpdates(() => {
+        comp.replaceDataOnPath(['list', 1, 'k'], 1)
+      })
+    })
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['A', 'B', 'C'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.replaceDataOnPath(['list', 1, 'k'], 3)
+    })
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['A', 'B'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.replaceDataOnPath(['list', 2, 'k'], 4)
+    })
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['C'])
+    execArr = []
+    execWithWarn(1, () => {
+      comp.groupUpdates(() => {
+        comp.replaceDataOnPath(['list', 1, 'k'], 4)
+      })
+    })
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['B', 'C'])
+  })
+
+  test('should be able to do list-splice update (without key)', () => {
+    let execArr = [] as string[]
+    const childCompDef = componentSpace.define()
+      .property('p', String)
+      .observer('p', function () {
+        execArr.push(this.data.p)
+      })
+      .registerComponent()
+    const compDef = componentSpace.define()
+      .usingComponents({
+        child: childCompDef.general(),
+      })
+      .template(tmpl(`
+        <child wx:for="{{list}}" p="{{item}}" />
+      `))
+      .data(() => ({
+        list: ['A', 'B', 'C'],
+      }))
+      .registerComponent()
+    const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    glassEasel.Element.pretendAttached(comp)
+    const getP = () => {
+      const ret = [] as string[]
+      comp.getShadowRoot()!.childNodes[0]!.asElement()!.childNodes.forEach((child) => {
+        ret.push(child.asElement()!.childNodes[0]!.asInstanceOf(childCompDef)!.data.p)
+      })
+      return ret
+    }
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['A', 'B', 'C'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 1, 1, ['D', 'Z'])
+      comp.spliceArrayDataOnPath(['list'], 2, 1, ['E'])
+    })
+    expect(getP()).toStrictEqual(['A', 'D', 'E', 'C'])
+    expect(execArr).toStrictEqual(['A', 'D', 'E', 'C'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 100, 0, ['F'])
+    })
+    expect(getP()).toStrictEqual(['A', 'D', 'E', 'C', 'F'])
+    expect(execArr).toStrictEqual(['A', 'D', 'E', 'C', 'F'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 3, 3, [])
+    })
+    expect(getP()).toStrictEqual(['A', 'D', 'E'])
+    expect(execArr).toStrictEqual(['A', 'D', 'E'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 0, 2, ['G'])
+    })
+    expect(getP()).toStrictEqual(['G', 'E'])
+    expect(execArr).toStrictEqual(['G', 'E'])
+  })
+
+  test('should be able to do list-splice update (with key)', () => {
+    let execArr = [] as string[]
+    const childCompDef = componentSpace.define()
+      .property('p', String)
+      .observer('p', function () {
+        execArr.push(this.data.p)
+      })
+      .registerComponent()
+    const compDef = componentSpace.define()
+      .usingComponents({
+        child: childCompDef.general(),
+      })
+      .template(tmpl(`
+        <child wx:for="{{list}}" wx:key="k" p="{{item.v}}" />
+      `))
+      .data(() => ({
+        list: [
+          { k: 1, v: 'A' },
+          { k: 2, v: 'B' },
+          { k: 3, v: 'C' },
+        ],
+      }))
+      .registerComponent()
+    const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    glassEasel.Element.pretendAttached(comp)
+    const getP = () => {
+      const ret = [] as string[]
+      comp.getShadowRoot()!.childNodes[0]!.asElement()!.childNodes.forEach((child) => {
+        ret.push(child.asElement()!.childNodes[0]!.asInstanceOf(childCompDef)!.data.p)
+      })
+      return ret
+    }
+    expect(getP()).toStrictEqual(['A', 'B', 'C'])
+    expect(execArr).toStrictEqual(['A', 'B', 'C'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 1, 1, [{ k: 4, v: 'D' }, { k: 5, v: 'Z' }])
+      comp.spliceArrayDataOnPath(['list'], 2, 1, [{ k: 5, v: 'E' }])
+    })
+    expect(getP()).toStrictEqual(['A', 'D', 'E', 'C'])
+    expect(execArr).toStrictEqual(['D', 'E'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 100, 0, [{ k: 6, v: 'F' }])
+    })
+    expect(getP()).toStrictEqual(['A', 'D', 'E', 'C', 'F'])
+    expect(execArr).toStrictEqual(['F'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.replaceDataOnPath(['list', 1, 'v'], 'DD')
+      comp.spliceArrayDataOnPath(['list'], 3, 3, [])
+    })
+    expect(getP()).toStrictEqual(['A', 'DD', 'E'])
+    expect(execArr).toStrictEqual(['DD'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.replaceDataOnPath(['list', 1, 'v'], 'D')
+      comp.spliceArrayDataOnPath(['list'], 0, 0, [{ k: 3, v: 'C' }])
+    })
+    expect(getP()).toStrictEqual(['C', 'A', 'D', 'E'])
+    expect(execArr).toStrictEqual(['C', 'D'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.replaceDataOnPath(['list', 1, 'v'], 'DD')
+      comp.spliceArrayDataOnPath(['list'], 0, 2, [{ k: 7, v: 'G' }])
+    })
+    expect(getP()).toStrictEqual(['G', 'D', 'E'])
+    expect(execArr).toStrictEqual(['G'])
+    execArr = []
+    execWithWarn(1, () => {
+      comp.groupUpdates(() => {
+        comp.spliceArrayDataOnPath(['list'], -1, 100, [{ k: 7, v: 'GG' }])
+      })
+    })
+    expect(getP()).toStrictEqual(['G', 'D', 'E', 'GG'])
+    expect(execArr).toStrictEqual(['G', 'GG'])
+    execArr = []
+    execWithWarn(1, () => {
+      comp.groupUpdates(() => {
+        comp.spliceArrayDataOnPath(['list'], 1, 1, [])
+      })
+    })
+    expect(getP()).toStrictEqual(['G', 'E', 'GG'])
+    expect(execArr).toStrictEqual([])
+  })
+
+  test('should be able to do list-splice update (with key and using index)', () => {
+    let execArr = [] as string[]
+    const childCompDef = componentSpace.define()
+      .property('p', String)
+      .observer('p', function () {
+        execArr.push(this.data.p)
+      })
+      .registerComponent()
+    const compDef = componentSpace.define()
+      .usingComponents({
+        child: childCompDef.general(),
+      })
+      .template(tmpl(`
+        <child wx:for="{{list}}" wx:key="k" p="{{index}}:{{item.v}}" />
+      `))
+      .data(() => ({
+        list: [
+          { k: 1, v: 'A' },
+          { k: 2, v: 'B' },
+          { k: 3, v: 'C' },
+        ],
+      }))
+      .registerComponent()
+    const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    glassEasel.Element.pretendAttached(comp)
+    const getP = () => {
+      const ret = [] as string[]
+      comp.getShadowRoot()!.childNodes[0]!.asElement()!.childNodes.forEach((child) => {
+        ret.push(child.asElement()!.childNodes[0]!.asInstanceOf(childCompDef)!.data.p)
+      })
+      return ret
+    }
+    expect(getP()).toStrictEqual(['0:A', '1:B', '2:C'])
+    expect(execArr).toStrictEqual(['0:A', '1:B', '2:C'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 1, 1, [{ k: 4, v: 'D' }])
+    })
+    expect(getP()).toStrictEqual(['0:A', '1:D', '2:C'])
+    expect(execArr).toStrictEqual(['1:D'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 1, 0, [{ k: 5, v: 'E' }])
+    })
+    expect(getP()).toStrictEqual(['0:A', '1:E', '2:D', '3:C'])
+    expect(execArr).toStrictEqual(['1:E', '2:D', '3:C'])
+    execArr = []
+    comp.groupUpdates(() => {
+      comp.spliceArrayDataOnPath(['list'], 1, 2, [])
+    })
+    expect(getP()).toStrictEqual(['0:A', '1:C'])
+    expect(execArr).toStrictEqual(['1:C'])
+  })
+
+  test('should not allow updates before init done', () => {
+    const compDef = componentSpace.define()
+      .data(() => ({
+        a: 123,
+        b: ['a'],
+      }))
+      .init(({ self }) => {
+        let throwCount = 0
+        try {
+          self.setData({ a: 456 })
+        } catch { throwCount += 1 }
+        try {
+          self.updateData({ b: ['c'] })
+        } catch { throwCount += 1 }
+        try {
+          self.replaceDataOnPath(['a'], 789)
+        } catch { throwCount += 1 }
+        try {
+          self.spliceArrayDataOnPath(['b'], 0, 0, ['b'])
+        } catch { throwCount += 1 }
+        try {
+          self.groupUpdates(() => undefined)
+        } catch { throwCount += 1 }
+        expect(throwCount).toBe(5)
+      })
+      .registerComponent()
+    const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
+    expect(comp.data).toStrictEqual({ a: 123, b: ['a'] })
+  })
+})