halfcab 15.0.9 → 16.0.1

package/halfcab.mjs

@@ -18,7 +18,7 @@ let cssTag = cssInject
 let componentCSSString = ''
 let routesArray = []
 let externalRoutes = []
-let state = {}
+let rawState = {}
 let router
 let rootEl
 let components
@@ -39,14 +39,14 @@ function b64DecodeUnicode (str) {
 if (typeof window !== 'undefined') {
   dataInitial = document.querySelector('[data-initial]')
   if (!!dataInitial) {
-    state = (dataInitial && dataInitial.dataset.initial) && Object.assign({}, JSON.parse(b64DecodeUnicode(dataInitial.dataset.initial)))
+    rawState = (dataInitial && dataInitial.dataset.initial) && Object.assign({}, JSON.parse(b64DecodeUnicode(dataInitial.dataset.initial)))
 
-    if (!state.router) {
-      state.router = {}
+    if (!rawState.router) {
+      rawState.router = {}
     }
 
-    if (!state.router.pathname) {
-      Object.assign(state.router, {
+    if (!rawState.router.pathname) {
+      Object.assign(rawState.router, {
         pathname: window.location.pathname,
         hash: window.location.hash,
         query: qs.parse(window.location.search)
@@ -62,6 +62,46 @@ 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)
+  }
+  const proxy = new Proxy(target, {
+    get (obj, prop) {
+      const value = obj[prop]
+      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
+    },
+    set (obj, prop, value) {
+      obj[prop] = value
+      debounce(stateUpdated)
+      return true
+    },
+    deleteProperty (obj, prop) {
+      delete obj[prop]
+      debounce(stateUpdated)
+      return true
+    }
+  })
+  proxyCache.set(target, proxy)
+  return proxy
+}
+
+let state = createState(rawState)
+
 let geb = new eventEmitter({state})
 
 const stringsCache = new WeakMap()
@@ -316,19 +356,30 @@ function stateUpdated () {
   }
 }
 
+function mergeInPlace (target, source) {
+  // Recursively merge source into target, mutating target in-place so that
+  // existing object references (and their Proxy wrappers) are preserved.
+  // Arrays are always replaced entirely — merging arrays is complex and error-prone.
+  for (const key of Object.keys(source)) {
+    const srcVal = source[key]
+    const tgtVal = target[key]
+    if (srcVal !== null && typeof srcVal === 'object' && !Array.isArray(srcVal) &&
+        tgtVal !== null && typeof tgtVal === 'object' && !Array.isArray(tgtVal)) {
+      mergeInPlace(tgtVal, srcVal)
+    } else {
+      target[key] = srcVal
+    }
+  }
+}
+
 function updateState (updateObject, options) {
   if (updateObject) {
     if (options && options.deepMerge === false) {
-      Object.assign(state, updateObject)
+      Object.assign(rawState, updateObject)
     } else {
-      let deepMergeOptions = {clone: false}
-      if (options && options.arrayMerge === false) {
-        deepMergeOptions.arrayMerge = (destinationArray, sourceArray, options) => {
-          //don't merge arrays, just return the new one
-          return sourceArray
-        }
-      }
-      Object.assign(state, merge(state, updateObject, deepMergeOptions))
+      // Merge in-place so existing nested object references stay intact,
+      // keeping Proxy cache entries valid.
+      mergeInPlace(rawState, updateObject, options)
     }
   }
 
@@ -344,7 +395,7 @@ function updateState (updateObject, options) {
     console.log(updateObject)
     console.log('  ')
     console.log('------NEW STATE------')
-    console.log(state)
+    console.log(rawState)
     console.log('  ')
   }
 
@@ -513,6 +564,10 @@ export default (config, {shiftyRouter = shiftyRouterModule, href = hrefModule, h
   })
 }
 
+/**
+ * @deprecated The Proxy-based state now triggers rerenders automatically via set traps.
+ * This function is kept for backwards compatibility but is no longer needed in most cases.
+ */
 function rerender () {
   debounce(stateUpdated)
 }
@@ -529,6 +584,7 @@ export {
   html,
   defineRoute,
   updateState,
+  createState,
   state,
   formField,
   gotoRoute,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "halfcab",
-  "version": "15.0.9",
+  "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",
@@ -11,9 +11,9 @@
     "test:coverage": "c8 --reporter=html --check-coverage --lines 75 --functions 75 --branches 75 npm test",
     "test:coveralls": "c8 npm test && c8 report --reporter=text-lcov | coveralls",
     "versionbump:fix": "npm version patch --no-git-tag-version",
-    "versionbump:feature": "npm version major --no-git-tag-version",
+    "versionbump:feature": "npm version minor --no-git-tag-version",
     "versionbump:breakingchanges": "npm version major --no-git-tag-version",
-    "npm-publish": "npm publish",
+    "npm-publish": "npm publish --tag beta",
     "start:example": "npx --yes serve . -l 5173"
   },
   "repository": {

package/test.js

@@ -403,6 +403,104 @@ describe('halfcab', () => {
         .true()
     })
 
+    it('Keeps sub-object references live after overwriting via updateState', (done) => {
+      halfcab({
+        el: '#root',
+        components () {
+          return html `<div></div>`
+        }
+      })
+        .then(({rootEl, state}) => {
+          updateState({
+            user: { name: 'Original Name', age: 25 }
+          })
+
+          nextTick(() => {
+            // Grab a reference to the sub-object proxy
+            const user = state.user
+
+            // Wipe out the user object entirely via a merge
+            updateState({ user: { name: 'New Name', age: 30 } })
+
+            nextTick(() => {
+              // The reference should reflect the new values
+              expect(user.name).to.equal('New Name')
+              expect(user.age).to.equal(30)
+              done()
+            })
+          })
+        })
+    })
+
+    it('Replaces arrays entirely instead of merging them', (done) => {
+      halfcab({
+        el: '#root',
+        components () {
+          return html `<div></div>`
+        }
+      })
+        .then(({rootEl, state}) => {
+          updateState({ list: [1, 2, 3] })
+
+          nextTick(() => {
+            updateState({ list: [4, 5] })
+
+            nextTick(() => {
+              expect(state.list).to.deep.equal([4, 5])
+              done()
+            })
+          })
+        })
+    })
+
+    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',