halfcab 16.0.0 → 16.0.1

package/halfcab.mjs

@@ -64,6 +64,8 @@ if (typeof window !== 'undefined') {
 
 const proxyCache = new WeakMap()
 
+const ARRAY_MUTATING_METHODS = new Set(['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse', 'fill', 'copyWithin'])
+
 function createState (target) {
   if (proxyCache.has(target)) {
     return proxyCache.get(target)
@@ -71,7 +73,14 @@ function createState (target) {
   const proxy = new Proxy(target, {
     get (obj, prop) {
       const value = obj[prop]
-      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+      if (Array.isArray(obj) && typeof value === 'function' && ARRAY_MUTATING_METHODS.has(prop)) {
+        return function (...args) {
+          const result = Array.prototype[prop].apply(obj, args)
+          debounce(stateUpdated)
+          return result
+        }
+      }
+      if (value !== null && typeof value === 'object') {
         return createState(value)
       }
       return value
@@ -80,6 +89,11 @@ function createState (target) {
       obj[prop] = value
       debounce(stateUpdated)
       return true
+    },
+    deleteProperty (obj, prop) {
+      delete obj[prop]
+      debounce(stateUpdated)
+      return true
     }
   })
   proxyCache.set(target, proxy)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "halfcab",
-  "version": "16.0.0",
+  "version": "16.0.1",
   "type": "module",
   "description": "A simple universal JavaScript framework focused on making use of es2015 template strings to build components.",
   "main": "halfcab.mjs",

package/test.js

@@ -453,6 +453,54 @@ describe('halfcab', () => {
         })
     })
 
+    it('Triggers rerender when a property is deleted from state', (done) => {
+      halfcab({
+        el: '#root',
+        components () {
+          return html `<div></div>`
+        }
+      })
+        .then(({rootEl, state}) => {
+          updateState({ toDelete: 'bye' })
+
+          nextTick(() => {
+            expect(state.toDelete).to.equal('bye')
+            delete state.toDelete
+
+            nextTick(() => {
+              expect(state.toDelete).to.be.undefined()
+              done()
+            })
+          })
+        })
+    })
+
+    it('Triggers rerender when array mutation methods are used on state', (done) => {
+      halfcab({
+        el: '#root',
+        components () {
+          return html `<div></div>`
+        }
+      })
+        .then(({rootEl, state}) => {
+          updateState({ items: [1, 2, 3] })
+
+          nextTick(() => {
+            state.items.push(4)
+
+            nextTick(() => {
+              expect(state.items).to.deep.equal([1, 2, 3, 4])
+              state.items.pop()
+
+              nextTick(() => {
+                expect(state.items).to.deep.equal([1, 2, 3])
+                done()
+              })
+            })
+          })
+        })
+    })
+
     it(`Doesn't clone when merging`, (done) => {
       halfcab({
         el: '#root',