Allow arrays in markdown template literal (#410)

* Allow arrays in markdown template literal

Fixes #403

* Don't allocate unnecessary array

docs/test/testtemplate.js

@@ -1,4 +1,5 @@
-import { markdown } from "catalog";
+import React from "react";
+import { markdown, ReactSpecimen } from "catalog";
 import logo from "../catalog_logo.svg";
 
 export default () => markdown`
@@ -14,4 +15,12 @@ title: Neat!
 Super nice stuff here!
 
 Foo bar
+
+${["foo", "bar"].map(d => [
+  `### ${d}`,
+  <ReactSpecimen key="foo">
+    <div>{d}</div>
+  </ReactSpecimen>
+])}
+
 `;

src/__snapshots__/markdownPage.test.js.snap

@@ -26,7 +26,13 @@ exports[`Catalog markdown page template literal with arbitrary values 1`] = `
 A paragraph 123
 
 ~~~
-[{"a":"some"},{"a":"data"}]
+
+  foo
+  bar
+  <div>
+    hello
+  </div>
+  
 ~~~
 
 </Page>

src/markdownPage.js

@@ -27,16 +27,19 @@ import Page from "./components/Page/Page";
 // > ${<MyComponent isCustomComponent={'AWESOME'} />}
 // > `;
 
-const replaceLast = (f, arr) => arr.slice(0, -1).concat(f(arr[arr.length - 1]));
+const replaceLast = (f, arr) => {
+  arr[arr.length - 1] = f(arr[arr.length - 1]);
+  return arr;
+};
 
 const markdownPage = (strings, ...values) =>
   createElement(
     Page,
     {},
     ...values.reduce(
       (a, v, i) => {
-        // If it's a valid React element, just concat to the end of the array
-        if (isValidElement(v)) {
+        // If it's a valid React element or array, just concat to the end of the array
+        if (isValidElement(v) || Array.isArray(v)) {
           return a.concat(v, strings[i + 1]);
         }
 

src/markdownPage.test.js

@@ -26,7 +26,7 @@ test("Catalog markdown page template literal with arbitrary values", () => {
 A paragraph ${123}
 
 ~~~
-${[{ a: "some" }, { a: "data" }]}
+${["foo", "bar", <div>hello</div>]}
 ~~~
 `;
   expect(page).toMatchSnapshot();