basic loop implementation

Author: Jeff Escalante

lib/index.js

@@ -1,12 +1,11 @@
 const vm = require('vm')
+const merge = require('lodash.merge')
+const cloneDeep = require('lodash.cloneDeep')
 const parseAndReplace = require('./expression_parser')
 
-let ctx, delimiters, unescapeDelimiters, delimiterRegex, unescapeDelimiterRegex, conditionals
+let delimiters, unescapeDelimiters, delimiterRegex, unescapeDelimiterRegex, conditionals, loops
 
 module.exports = function PostHTMLExpressions (options = {}) {
-  // the context in which expressions are evaluated
-  ctx = vm.createContext(options.locals)
-
   // set up delimiter options and detection
   delimiters = options.delimiters || ['{{', '}}']
   unescapeDelimiters = options.unescapeDelimiters || ['{{{', '}}}']
@@ -19,12 +18,16 @@ module.exports = function PostHTMLExpressions (options = {}) {
 
   // conditional and loop options
   conditionals = options.conditionalTags || ['if', 'elseif', 'else']
+  loops = options.loopTags || ['each']
 
   // kick off the parsing
   return walk.bind(null, options)
 }
 
 function walk (opts, nodes) {
+  // the context in which expressions are evaluated
+  const ctx = vm.createContext(opts.locals)
+
   // After a conditional has been resolved, we remove the conditional elements
   // from the tree. This variable determines how many to skip afterwards.
   let skip
@@ -55,8 +58,8 @@ function walk (opts, nodes) {
       }
     }
 
-    // if the node has content, recurse
-    if (node.content) {
+    // if the node has content, recurse (unless it's a loop, handled later)
+    if (node.content && node.tag !== 'each') {
       node.content = walk(opts, node.content)
     }
 
@@ -118,10 +121,48 @@ function walk (opts, nodes) {
       skip = current - i
       if (expResult) m.push(...expResult.content)
       return m
-      // nodes.splice(i - 1, current - i, ...expResult)
     }
 
-    // return the modified node
+    // parse loops
+    if (node.tag === loops[0]) {
+      if (!(node.attrs && node.attrs.loop)) {
+        throw new Error(`the "${conditionals[1]}" tag must have a "loop" attribute`)
+      }
+      // parse the "loop" param
+      const loopParams = parseLoopStatement(node.attrs.loop)
+      const target = vm.runInContext(loopParams.expression, ctx)
+
+      if (typeof target !== 'object') {
+        throw new Error('You must provide an array or object to loop through')
+      }
+
+      if (loopParams.length < 1) {
+        throw new Error('You must provide at least one loop argument')
+      }
+
+      if (Array.isArray(target)) {
+        for (let index = 0; index < target.length; index++) {
+          const item = target[index]
+          // add item and optional index loop locals
+          const scopedLocals = {}
+          scopedLocals[loopParams.keys[0]] = item
+          if (loopParams.keys[1]) scopedLocals[loopParams.keys[1]] = index
+          // merge nondestructively into existing locals
+          const scopedOptions = merge(opts, { locals: scopedLocals })
+          // provide the modified options to the content evaluation
+          // we need to clone the node because the normal operation modifies
+          // the node directly
+          const content = cloneDeep(node.content)
+          const res = walk(scopedOptions, content)
+          m.push(res)
+        }
+        return m
+      } else {
+        // object loop
+      }
+    }
+
+    // return the node
     m.push(node)
     return m
   }, [])
@@ -139,3 +180,58 @@ function getNextTag (nodes, i, nodeCount) {
   }
   return [i, { tag: undefined }]
 }
+
+function parseLoopStatement (input) {
+  let current = 0
+  let char = input[current]
+
+  // parse through keys `each **foo, bar** in x`, which is everything before
+  // the word "in"
+  const keys = []
+  let key = ''
+  while (!`${char}${lookahead(3)}`.match(/\sin\s/)) {
+    key += char
+    next()
+
+    // if we hit a comma, we're on to the next key
+    if (char === ',') {
+      keys.push(key.trim())
+      key = ''
+      next()
+    }
+
+    // if we reach the end of the string without getting "in", it's an error
+    if (typeof char === 'undefined') {
+      throw new Error("Loop statement lacking 'in' keyword")
+    }
+  }
+  keys.push(key.trim())
+
+  // Bypass the word " in", and ensure there's a space after
+  next(4)
+
+  // the rest of the string is evaluated as the array/object to loop
+  let expression = ''
+  while (current < input.length) {
+    expression += char
+    next()
+  }
+
+  return {keys, expression}
+
+  // Utility: Move to the next character in the parse
+  function next (n = 1) {
+    for (let i = 0; i < n; i++) { char = input[++current] }
+  }
+
+  // Utility: looks ahead n characters and returns the result
+  function lookahead (n) {
+    let counter = current
+    const target = current + n
+    let res = ''
+    while (counter < target) {
+      res += input[++counter]
+    }
+    return res
+  }
+}

package.json

@@ -30,5 +30,9 @@
   },
   "scripts": {
     "test": "ava"
+  },
+  "dependencies": {
+    "lodash.clonedeep": "^4.3.2",
+    "lodash.merge": "^4.4.0"
   }
 }

test/fixtures/loop.expected.html

@@ -0,0 +1,9 @@
+<p>x</p>
+
+  <p>0: 1</p>
+
+  <p>1: 2</p>
+
+  <p>2: 3</p>
+
+<p>x</p>

test/fixtures/loop.html

@@ -0,0 +1,5 @@
+<p>x</p>
+<each loop='item, index in items'>
+  <p>{{index}}: {{item}}</p>
+</each>
+<p>x</p>

test/index.js

@@ -67,6 +67,10 @@ test('conditional - expression error', (t) => {
   })
 })
 
+test('loop', (t) => {
+  return matchExpected(t, 'loop', { locals: { items: [1, 2, 3] } })
+})
+
 //
 // Utility
 //