Merge pull request #25 from declandewet/indent-newline-transform

Indent newline transform + convert newline strings to newline-separated arrays in HTML

readme.md

@@ -57,6 +57,7 @@
         - [`stripIndentTransformer([type='initial'])`](#stripindenttransformertypeinitial)
         - [`replaceResultTransformer(replaceWhat, replaceWith)`](#replaceresulttransformerreplacewhat-replacewith)
         - [`inlineArrayTransformer(opts = { separator: '' })`](#inlinearraytransformeropts---separator--)
+        - [`splitStringTransformer(splitBy)`](#splitstringtransformersplitby)
 - [How to Contribute](#how-to-contribute)
 - [License](#license)
 - [:stars: Other ES2015 Template Tag Modules](#stars-other-es2015-template-tag-modules)
@@ -146,7 +147,7 @@ import stripIndent from 'common-tags/lib/stripIndent'
 
 #### `html`
 
-You'll often find that you might want to include an array in a template. Typically, doing something like `${array.join(', ')}` would work - but what if you're printing a list of items in an HTML template and want to maintain the indentation? You'd have to count the spaces manually and include them in the `.join()` call - which is a bit *ugly* for my taste.
+You'll often find that you might want to include an array in a template. Typically, doing something like `${array.join(', ')}` would work - but what if you're printing a list of items in an HTML template and want to maintain the indentation? You'd have to count the spaces manually and include them in the `.join()` call - which is a bit *ugly* for my taste. This tag properly indents arrays, as well as newline characters in string substitutions, by converting them to an array split by newline and re-using the same array inclusion logic:
 
 ```js
 import {html} from 'common-tags'
@@ -155,6 +156,7 @@ html`
   <div class="list">
     <ul>
       ${fruits.map(fruit => `<li>${fruit}</li>`)}
+      ${'<li>kiwi</li>\n<li>guava</li>'}
     </ul>
   </div>
 `);
@@ -168,6 +170,8 @@ Outputs:
     <li>apple</li>
     <li>orange</li>
     <li>watermelon</li>
+    <li>kiwi</li>
+    <li>guava</li>
   </ul>
 </div>
 ```
@@ -619,7 +623,9 @@ opts = {
 
 
 
+##### `splitStringTransformer(splitBy)`
 
+Splits a string substitution into an array by the provided `splitBy` substring, **only** if the string contains the `splitBy` substring.
 
 
 

src/html/fixtures/newline-conversion.txt

@@ -0,0 +1,6 @@
+<h1>amaze</h1>
+<ul>
+  <li>one</li>
+  <li>two</li>
+  <li>three</li>
+</ul>

src/html/html.js

@@ -4,8 +4,10 @@ import TemplateTag from '../TemplateTag'
 import stripIndentTransformer from '../stripIndentTransformer'
 import inlineArrayTransformer from '../inlineArrayTransformer'
 import trimResultTransformer from '../trimResultTransformer'
+import splitStringTransformer from '../splitStringTransformer'
 
 const html = new TemplateTag(
+  splitStringTransformer('\n'),
   inlineArrayTransformer,
   stripIndentTransformer,
   trimResultTransformer

src/html/html.test.js

@@ -17,3 +17,16 @@ test('renders HTML, including arrays', async (t) => {
   `
   t.is(actual, expected)
 })
+
+test('converts strings containing newlines into proper indented output', async (t) => {
+  const newlines = '<li>one</li>\n<li>two</li>'
+  const expected = await readFromFixture('newline-conversion')
+  const actual = html`
+    <h1>${val}</h1>
+    <ul>
+      ${newlines}
+      <li>three</li>
+    </ul>
+  `
+  t.is(actual, expected)
+})

src/index.js

@@ -7,6 +7,7 @@ import trimResultTransformer from './trimResultTransformer'
 import stripIndentTransformer from './stripIndentTransformer'
 import replaceResultTransformer from './replaceResultTransformer'
 import inlineArrayTransformer from './inlineArrayTransformer'
+import splitStringTransformer from './splitStringTransformer'
 
 // tags
 import commaLists from './commaLists'
@@ -29,6 +30,7 @@ export {
   stripIndentTransformer,
   replaceResultTransformer,
   inlineArrayTransformer,
+  splitStringTransformer,
   commaLists,
   commaListsAnd,
   commaListsOr,

src/index.test.js

@@ -8,6 +8,7 @@ import {
   stripIndentTransformer,
   replaceResultTransformer,
   inlineArrayTransformer,
+  splitStringTransformer,
   commaLists,
   commaListsAnd,
   commaListsOr,
@@ -30,6 +31,7 @@ test('common-tags exports all the right modules', (t) => {
     stripIndentTransformer,
     replaceResultTransformer,
     inlineArrayTransformer,
+    splitStringTransformer,
     commaLists,
     commaListsAnd,
     commaListsOr,

src/splitStringTransformer/index.js

@@ -0,0 +1,5 @@
+'use strict'
+
+import splitStringTransformer from './splitStringTransformer'
+
+export default splitStringTransformer

src/splitStringTransformer/splitStringTransformer.js

@@ -0,0 +1,16 @@
+'use strict'
+
+const splitStringTransformer = (splitBy) => ({
+  onSubstitution (substitution, resultSoFar) {
+    if (splitBy != null && typeof splitBy === 'string') {
+      if (typeof substitution === 'string' && substitution.includes(splitBy)) {
+        substitution = substitution.split(splitBy)
+      }
+    } else {
+      throw new Error('You need to specify a string character to split by.')
+    }
+    return substitution
+  }
+})
+
+export default splitStringTransformer

src/splitStringTransformer/splitStringTransformer.test.js

@@ -0,0 +1,31 @@
+'use strict'
+
+import test from 'ava'
+import TemplateTag from '../TemplateTag'
+import inlineArrayTransformer from '../inlineArrayTransformer'
+import splitStringTransformer from './splitStringTransformer'
+
+test('splits a string substitution into an array by the specified character', (t) => {
+  const tag = new TemplateTag(
+    splitStringTransformer('\n'),
+    inlineArrayTransformer
+  )
+  t.is(tag`foo ${'bar\nbaz'}`, 'foo bar baz')
+})
+
+test('ignores string if splitBy character is not found', (t) => {
+  const tag = new TemplateTag(splitStringTransformer('.'))
+  t.is(tag`foo ${'bar,baz'}`, 'foo bar,baz')
+})
+
+test('ignores substitution if it is not a string', (t) => {
+  const tag = new TemplateTag(splitStringTransformer(''))
+  t.is(tag`foo ${5}`, 'foo 5')
+})
+
+test('throws an error if splitBy param is undefined or not a string', (t) => {
+  const tag1 = new TemplateTag(splitStringTransformer)
+  const tag2 = new TemplateTag(splitStringTransformer(5))
+  t.throws(() => tag1`foo ${'bar'}`)
+  t.throws(() => tag2`foo ${'bar'}`)
+})