halfcab 15.0.3 → 15.0.5

package/halfcab.mjs

@@ -3,6 +3,7 @@ import hrefModule from 'shifty-router/href.js'
 import historyModule from 'shifty-router/history.js'
 import createLocation from 'shifty-router/create-location.js'
 import { html as litHtml, render } from 'lit'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { render as renderSSR } from '@lit-labs/ssr'
 import { hydrate } from '@lit-labs/ssr-client'
 import axios from 'axios'
@@ -12,14 +13,12 @@ import marked from 'marked'
 import { decode } from 'html-entities'
 import eventEmitter from './eventEmitter/index.mjs'
 import qs from 'qs'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
 
 let cssTag = cssInject
 let componentCSSString = ''
 let routesArray = []
 let externalRoutes = []
-let state = {} // TODO - implement diffing using proxy objects rather than deepDiff
+let state = {}
 let router
 let rootEl
 let components
@@ -71,15 +70,15 @@ let html = (strings, ...values) => {
   // fix for allowing csjs to coexist with lit-html
   values = values.map(value => {
     if (value && value.hasOwnProperty('toString') && !value.hasOwnProperty('_$litType$')) {
-       // Check if it's a template result (lit-html object). If not, and has toString (like CSJS object), stringify it.
-       if (Array.isArray(value)) return value;
-       if (typeof value === 'object' && value !== null) {
-          if (value['_$litType$'] !== undefined) return value; // It's a TemplateResult
-          // CSJS object:
-          if (value.toString && value.toString !== Object.prototype.toString) {
-             return value.toString()
-          }
-       }
+      // Check if it's a template result (lit-html object). If not, and has toString (like CSJS object), stringify it.
+      if (Array.isArray(value)) return value;
+      if (typeof value === 'object' && value !== null) {
+        if (value['_$litType$'] !== undefined) return value; // It's a TemplateResult
+        // CSJS object:
+        if (value.toString && value.toString !== Object.prototype.toString) {
+          return value.toString()
+        }
+      }
     }
     return value
   })
@@ -90,17 +89,17 @@ let html = (strings, ...values) => {
     const newRaw = strings.raw ? [...strings.raw] : [...strings]
     const newVals = [...strings]
     const onEventRegex = /on([a-zA-Z]+)=$/
-    
+
     for (let i = 0; i < newVals.length; i++) {
-        let match = newVals[i].match(onEventRegex)
-        if (match) {
-            const eventName = match[1]
-            const replacement = `@${eventName}=`
-            newVals[i] = newVals[i].replace(onEventRegex, replacement)
-            newRaw[i] = newRaw[i].replace(onEventRegex, replacement)
-        }
+      let match = newVals[i].match(onEventRegex)
+      if (match) {
+        const eventName = match[1]
+        const replacement = `@${eventName}=`
+        newVals[i] = newVals[i].replace(onEventRegex, replacement)
+        newRaw[i] = newRaw[i].replace(onEventRegex, replacement)
+      }
     }
-    
+
     newStrings = newVals
     newStrings.raw = newRaw
     stringsCache.set(strings, newStrings)
@@ -353,7 +352,7 @@ function updateState (updateObject, options) {
 }
 
 function emptySSRVideos (c) {
-  // This was for nanomorph. Lit handles updates differently. 
+  // This was for nanomorph. Lit handles updates differently.
   // If we need to manipulate DOM before render, it's harder with Templates.
   // Leaving empty or deprecated.
 }
@@ -362,11 +361,11 @@ function injectHTML (htmlString, options) {
   if (options && options.wrapper === false) {
     return html([htmlString])
   }
-  return html([`<div>${htmlString}</div>`]) 
+  return html([`<div>${htmlString}</div>`])
 }
 
 function injectMarkdown (mdString, options) {
-  return injectHTML(decode(marked(mdString)), options) 
+  return injectHTML(decode(marked(mdString)), options)
 }
 
 function gotoRoute (route) {
@@ -432,6 +431,7 @@ export default (config, {shiftyRouter = shiftyRouterModule, href = hrefModule, h
   //this default function is used for setting up client side and is not run on
   // the server
   ({components, el} = config)
+  let { hydrationSkipRoutes } = config
 
   return new Promise((resolve, reject) => {
     let routesFormatted = routesArray.map(r => [
@@ -482,9 +482,17 @@ export default (config, {shiftyRouter = shiftyRouterModule, href = hrefModule, h
     if (el) {
       // rootEl is the container
       rootEl = document.querySelector(el)
-      
+
       // Initial render. Only hydrate when container has Lit SSR markers.
-      if (canHydrateContainer(rootEl)) {
+      console.log(`Hydration check. Router Key: ${state.router.key}`)
+      const shouldSkipHydration = hydrationSkipRoutes && hydrationSkipRoutes.includes(state.router.key)
+
+      if (shouldSkipHydration) {
+        console.log(`Skipping hydration for route: ${state.router.key}`)
+        rootEl.innerHTML = ''
+      }
+
+      if (canHydrateContainer(rootEl) && !shouldSkipHydration) {
         try {
           hydrate(c, rootEl)
         } catch (e) {
@@ -495,7 +503,7 @@ export default (config, {shiftyRouter = shiftyRouterModule, href = hrefModule, h
       } else {
         render(c, rootEl)
       }
-      
+
       return resolve({rootEl, state})
     }
     // If no root element provided?
@@ -530,5 +538,6 @@ export {
   resetTouched,
   nextTick,
   addToHoldingPen,
-  removeFromHoldingPen
+  removeFromHoldingPen,
+  unsafeHTML
 }

package/package.json

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