halfcab 14.0.1 → 14.0.4

package/halfcab.mjs

@@ -2,8 +2,11 @@ import shiftyRouterModule from 'shifty-router'
 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-html'
+import { html as litHtml, render, nothing, noChange } from 'lit-html'
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
+import { repeat } from 'lit-html/directives/repeat.js'
+import { classMap } from 'lit-html/directives/class-map.js'
+import { styleMap } from 'lit-html/directives/style-map.js'
 import axios from 'axios'
 import cssInject from 'csjs-inject'
 import merge from 'deepmerge'
@@ -81,21 +84,73 @@ let html = (strings, ...values) => {
   return litHtml(strings, ...values)
 }
 
+// Capture directive classes for SSR identification
+const RepeatDirective = repeat([], () => {})['_$litDirective$']
+const ClassMapDirective = classMap({})['_$litDirective$']
+const StyleMapDirective = styleMap({})['_$litDirective$']
+
 function resolveTemplate (value) {
+  if (value === nothing || value === noChange) {
+    return ''
+  }
+
   if (Array.isArray(value)) {
     return value.map(resolveTemplate).join('')
   }
-  if (value && typeof value === 'object' && value.strings) {
-    let result = ''
-    const { strings, values } = value
-    for (let i = 0; i < strings.length; i++) {
-      result += strings[i]
-      if (i < values.length) {
-        result += resolveTemplate(values[i])
+  if (value && typeof value === 'object') {
+    if (value.strings) {
+      let result = ''
+      const { strings, values } = value
+      for (let i = 0; i < strings.length; i++) {
+        result += strings[i]
+        if (i < values.length) {
+          result += resolveTemplate(values[i])
+        }
       }
+      return result
     }
-    return result
+
+    if (value['_$litDirective$']) {
+      const directiveClass = value['_$litDirective$']
+      if (directiveClass.directiveName === 'unsafeHTML' && value.values && value.values.length > 0) {
+        return String(value.values[0])
+      }
+
+      if (directiveClass === RepeatDirective) {
+        const items = value.values[0]
+        const templateFn = value.values[value.values.length - 1]
+        if (items && typeof templateFn === 'function') {
+          return Array.from(items).map((item, index) => resolveTemplate(templateFn(item, index))).join('')
+        }
+        return ''
+      }
+
+      if (directiveClass === ClassMapDirective) {
+        const classObj = value.values[0]
+        if (typeof classObj === 'object') {
+          return Object.keys(classObj)
+            .filter(key => classObj[key])
+            .join(' ')
+        }
+        return ''
+      }
+
+      if (directiveClass === StyleMapDirective) {
+        const styleObj = value.values[0]
+        if (typeof styleObj === 'object') {
+          return Object.keys(styleObj)
+            .map(key => `${key}:${styleObj[key]}`)
+            .join(';')
+        }
+        return ''
+      }
+    }
+  }
+
+  if (typeof value === 'function') {
+    return ''
   }
+
   return value === undefined || value === null ? '' : String(value)
 }
 

package/package.json

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