halfcab 16.0.1 → 16.0.3

package/halfcab.mjs

@@ -18,7 +18,7 @@ let cssTag = cssInject
 let componentCSSString = ''
 let routesArray = []
 let externalRoutes = []
-let rawState = {}
+let state = {}
 let router
 let rootEl
 let components
@@ -39,14 +39,14 @@ function b64DecodeUnicode (str) {
 if (typeof window !== 'undefined') {
   dataInitial = document.querySelector('[data-initial]')
   if (!!dataInitial) {
-    rawState = (dataInitial && dataInitial.dataset.initial) && Object.assign({}, JSON.parse(b64DecodeUnicode(dataInitial.dataset.initial)))
+    state = (dataInitial && dataInitial.dataset.initial) && Object.assign({}, JSON.parse(b64DecodeUnicode(dataInitial.dataset.initial)))
 
-    if (!rawState.router) {
-      rawState.router = {}
+    if (!state.router) {
+      state.router = {}
     }
 
-    if (!rawState.router.pathname) {
-      Object.assign(rawState.router, {
+    if (!state.router.pathname) {
+      Object.assign(state.router, {
         pathname: window.location.pathname,
         hash: window.location.hash,
         query: qs.parse(window.location.search)
@@ -62,46 +62,6 @@ 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()
@@ -356,30 +316,19 @@ 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(rawState, updateObject)
+      Object.assign(state, updateObject)
     } else {
-      // Merge in-place so existing nested object references stay intact,
-      // keeping Proxy cache entries valid.
-      mergeInPlace(rawState, updateObject, options)
+      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))
     }
   }
 
@@ -395,7 +344,7 @@ function updateState (updateObject, options) {
     console.log(updateObject)
     console.log('  ')
     console.log('------NEW STATE------')
-    console.log(rawState)
+    console.log(state)
     console.log('  ')
   }
 
@@ -564,10 +513,6 @@ 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)
 }
@@ -584,7 +529,6 @@ export {
   html,
   defineRoute,
   updateState,
-  createState,
   state,
   formField,
   gotoRoute,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "halfcab",
-  "version": "16.0.1",
+  "version": "16.0.3",
   "type": "module",
   "description": "A simple universal JavaScript framework focused on making use of es2015 template strings to build components.",
   "main": "halfcab.mjs",
@@ -11,7 +11,7 @@
     "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 minor --no-git-tag-version",
+    "versionbump:feature": "npm version major --no-git-tag-version",
     "versionbump:breakingchanges": "npm version major --no-git-tag-version",
     "npm-publish": "npm publish --tag beta",
     "start:example": "npx --yes serve . -l 5173"
@@ -60,7 +60,7 @@
     "lit": "^3.3.2",
     "marked": "^0.7.0",
     "qs": "^6.5.2",
-    "shifty-router": "^0.1.1"
+    "shifty-router": "^1.0.0"
   },
   "peerDependencies": {
     "esm": "^3.2.22"

package/test.js

@@ -377,7 +377,12 @@ describe('halfcab', () => {
 
       })
 
-      it(`Throws an error when a route doesn't exist`, () => {
+      it(`Switches to the 404 route when a route doesn't exist`, () => {
+        defineRoute({
+          path: '/404',
+          title: 'Not Found',
+          component: '404Component'
+        })
 
         return halfcab({
           el: '#root',
@@ -385,11 +390,9 @@ describe('halfcab', () => {
             return html `<div></div>`
           }
         })
-          .then(rootEl => {
-            let routing = () => {
-              gotoRoute('/thisIsAFakeRoute')
-            }
-            expect(routing).to.throw()
+          .then(({state}) => {
+            gotoRoute('/thisIsAFakeRoute')
+            expect(state.router.component).to.equal('404Component')
           })
 
       })
@@ -403,104 +406,6 @@ 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',