Merge pull request #2 from barelyhuman/issue-1

fix: implement nested templates
dumbjs · Oct 24, 2023 · d2fca0b · d2fca0b
2 parents a427489 + cd9ee24
commit d2fca0b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -63,11 +63,22 @@ function interpolateExpressions(htmlString, expressionInstance) {
 
   if (
     typeof watcherReturn !== 'object' &&
-    typeof watcherReturn !== 'function'
+    typeof watcherReturn !== 'function' &&
+    !Array.isArray(watcherReturn)
   ) {
     return htmlString.replace(delimiterComment, watcherReturn)
   }
 
+  if (Array.isArray(watcherReturn)) {
+    const result = watcherReturn.map(x => {
+      if ('isT' in x) {
+        return renderToString(x)
+      }
+      return x
+    })
+    return result.join('')
+  }
+
   if (watcherReturn && watcherReturn.isT) {
     const _nestedHtmlString = renderToString(watcherReturn)
     return htmlString.replace(delimiterComment, _nestedHtmlString)

diff --git a/tests/basic.test.js b/tests/basic.test.js
@@ -200,4 +200,29 @@ test('function composition basic', async () => {
   await inlineSnapshot(out, `<p>hello world</p>`)
 })
 
+test('stringify nested array of templates', async () => {
+  const tables = [1, 2, 3]
+
+  const templ = html`
+    <div class="container">
+      <div class="row">
+        <div class="col">${() => tables.map(x => html`<p>${x}</p>`)}</div>
+      </div>
+    </div>
+  `
+
+  const out = renderToString(templ)
+
+  await inlineSnapshot(
+    out,
+    `
+    <div class="container">
+      <div class="row">
+        <div class="col"><p>1</p><p>2</p><p>3</p></div>
+      </div>
+    </div>
+  `
+  )
+})
+
 test.run()