src: Handle SPREAD at html() time.

This allows for using the return value of `this.html`<...>``
instead of only doing SPREAD handling at render time just before
setting `innerHTML`.

index.js

@@ -156,7 +156,17 @@ class Tonic extends window.HTMLElement {
       out.push(strings[i], refs(values[i]))
     }
     out.push(strings[strings.length - 1])
-    return Tonic.raw(out.join(''), strings)
+    let htmlStr = out.join('')
+    htmlStr = htmlStr.replace(Tonic.SPREAD, (_, p) => {
+      const o = Tonic._data[p.split('__')[1]][p]
+      return Object.entries(o).map(([key, value]) => {
+        const k = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+        if (value === true) return k
+        else if (value) return `${k}="${Tonic.escape(String(value))}"`
+        else return ''
+      }).filter(Boolean).join(' ')
+    })
+    return Tonic.raw(htmlStr, strings)
   }
 
   setState (o) {
@@ -243,16 +253,6 @@ class Tonic extends window.HTMLElement {
     }
 
     if (typeof content === 'string') {
-      content = content.replace(Tonic.SPREAD, (_, p) => {
-        const o = Tonic._data[p.split('__')[1]][p]
-        return Object.entries(o).map(([key, value]) => {
-          const k = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
-          if (value === true) return k
-          else if (value) return `${k}="${Tonic.escape(String(value))}"`
-          else return ''
-        }).filter(Boolean).join(' ')
-      })
-
       if (this.stylesheet) {
         content = `<style>${this.stylesheet()}</style>${content}`
       }