feat: tablerowloop object

See: https://www.rubydoc.info/gems/liquid/Liquid/TablerowloopDrop

src/builtin/tags/for.ts

@@ -1,4 +1,3 @@
-import { mapSeries } from '../../util/promise'
 import { isString, isObject, isArray } from '../../util/underscore'
 import { evalExp } from '../../render/syntax'
 import assert from '../../util/assert'
@@ -10,6 +9,7 @@ import Hash from '../../template/tag/hash'
 import ITemplate from '../../template/itemplate'
 import ITagImplOptions from '../../template/tag/itag-impl-options'
 import ParseStream from '../../parser/parse-stream'
+import { ForloopDrop } from '../../drop/forloop-drop'
 
 const re = new RegExp(`^(${identifier.source})\\s+in\\s+` +
   `(${value.source})` +
@@ -61,39 +61,22 @@ export default <ITagImplOptions>{
     collection = collection.slice(offset, offset + limit)
     if (this.reversed) collection.reverse()
 
-    const contexts = collection.map((item: string, i: number) => {
-      const ctx = {}
-      ctx[this.variable] = item
-      ctx['forloop'] = {
-        first: i === 0,
-        index: i + 1,
-        index0: i,
-        last: i === collection.length - 1,
-        length: collection.length,
-        rindex: collection.length - i,
-        rindex0: collection.length - i - 1
-      }
-      return ctx
-    })
-
+    const context = { forloop: new ForloopDrop(collection.length) }
+    scope.push(context)
     let html = ''
-    let finished = false
-    await mapSeries(contexts, async context => {
-      if (finished) return
-
-      scope.push(context)
+    for (const item of collection) {
+      context[this.variable] = item
       try {
         html += await this.liquid.renderer.renderTemplates(this.templates, scope)
       } catch (e) {
         if (e.name === 'RenderBreakError') {
           html += e.resolvedHTML
-          if (e.message === 'break') {
-            finished = true
-          }
+          if (e.message === 'break') break
         } else throw e
       }
-      scope.pop(context)
-    })
+      context.forloop.next()
+    }
+    scope.pop()
     return html
   }
 }

src/builtin/tags/tablerow.ts

@@ -1,4 +1,3 @@
-import { mapSeries } from '../../util/promise'
 import assert from '../../util/assert'
 import { evalExp } from '../../render/syntax'
 import { identifier, value, hash } from '../../parser/lexical'
@@ -9,6 +8,7 @@ import Scope from '../../scope/scope'
 import Hash from '../../template/tag/hash'
 import ITagImplOptions from '../../template/tag/itag-impl-options'
 import ParseStream from '../../parser/parse-stream'
+import { TablerowloopDrop } from '../../drop/tablerowloop-drop'
 
 const re = new RegExp(`^(${identifier.source})\\s+in\\s+` +
   `(${value.source})` +
@@ -42,34 +42,24 @@ export default {
 
     collection = collection.slice(offset, offset + limit)
     const cols = hash.cols || collection.length
-    const contexts = collection.map((item: any) => {
-      const ctx = {}
-      ctx[this.variable] = item
-      return ctx
-    })
 
-    let row: number = 0
+    const tablerowloop = new TablerowloopDrop(collection.length, cols)
+    const ctx = { tablerowloop }
+    scope.push(ctx)
+
     let html = ''
-    await mapSeries(contexts, async (context, idx) => {
-      row = Math.floor(idx / cols) + 1
-      const col = (idx % cols) + 1
-      if (col === 1) {
-        if (row !== 1) {
-          html += '</tr>'
-        }
-        html += `<tr class="row${row}">`
+    for (let idx = 0; idx < collection.length; idx++, tablerowloop.next()) {
+      ctx[this.variable] = collection[idx]
+      if (tablerowloop.col0() === 0) {
+        if (tablerowloop.row() !== 1) html += '</tr>'
+        html += `<tr class="row${tablerowloop.row()}">`
       }
-
-      html += `<td class="col${col}">`
-      scope.push(context)
+      html += `<td class="col${tablerowloop.col()}">`
       html += await this.liquid.renderer.renderTemplates(this.templates, scope)
       html += '</td>'
-      scope.pop(context)
-      return html
-    })
-    if (row > 0) {
-      html += '</tr>'
     }
+    if (collection.length) html += '</tr>'
+    scope.pop(ctx)
     return html
   }
 } as ITagImplOptions

src/drop/forloop-drop.ts

@@ -0,0 +1,34 @@
+import { Drop } from './drop'
+
+export class ForloopDrop extends Drop {
+  protected i: number = 0
+  length: number
+  constructor (length: number) {
+    super()
+    this.length = length
+  }
+  next () {
+    this.i++
+  }
+  index0 () {
+    return this.i
+  }
+  index () {
+    return this.i + 1
+  }
+  first () {
+    return this.i === 0
+  }
+  last () {
+    return this.i === this.length - 1
+  }
+  rindex () {
+    return this.length - this.i
+  }
+  rindex0 () {
+    return this.length - this.i - 1
+  }
+  valueOf () {
+    return JSON.stringify(this)
+  }
+}

src/drop/tablerowloop-drop.ts

@@ -0,0 +1,25 @@
+import { ForloopDrop } from './forloop-drop'
+
+export class TablerowloopDrop extends ForloopDrop {
+  private cols: number
+  constructor (length: number, cols: number) {
+    super(length)
+    this.length = length
+    this.cols = cols
+  }
+  row () {
+    return Math.floor(this.i / this.cols) + 1
+  }
+  col0 () {
+    return (this.i % this.cols)
+  }
+  col () {
+    return this.col0() + 1
+  }
+  col_first () {  // eslint-disable-line
+    return this.col0() === 0
+  }
+  col_last () { // eslint-disable-line
+    return this.col() === this.cols
+  }
+}

test/integration/builtin/tags/for.ts

@@ -34,7 +34,11 @@ describe('tags/for', function () {
     const html = await liquid.parseAndRender(src, ctx)
     return expect(html).to.equal('foo,bar-coo,haa-')
   })
-
+  it('should output forloop', async function () {
+    const src = '{%for i in (1..1)%}{{forloop}}{%endfor%}'
+    const html = await liquid.parseAndRender(src, ctx)
+    return expect(html).to.equal('{"i":0,"length":1}')
+  })
   describe('scope', function () {
     it('should read super scope', async function () {
       const src = '{%for a in (1..2)%}{{num}}{%endfor%}'

test/integration/builtin/tags/tablerow.ts

@@ -69,10 +69,42 @@ describe('tags/tablerow', function () {
     return expect(html).to.equal(dst)
   })
 
-  it('should support tablerow with offset', async function () {
-    const src = '{% tablerow i in (1..5) cols:2 offset:3 %}{{ i }}{% endtablerow %}'
-    const dst = '<tr class="row1"><td class="col1">4</td><td class="col2">5</td></tr>'
+  it('should support index0, index, rindex0, rindex', async function () {
+    const src = '{% tablerow i in (1..3)%}{{tablerowloop.index0}}{{tablerowloop.index}}{{tablerowloop.rindex0}}{{tablerowloop.rindex}}{% endtablerow %}'
+    const dst = '<tr class="row1"><td class="col1">0123</td><td class="col2">1212</td><td class="col3">2301</td></tr>'
     const html = await liquid.parseAndRender(src)
     return expect(html).to.equal(dst)
   })
+  it('should support first, last, length', async function () {
+    const src = '{% tablerow i in (1..3)%}{{tablerowloop.first}} {{tablerowloop.last}} {{tablerowloop.length}}{% endtablerow %}'
+    const dst = '<tr class="row1"><td class="col1">true false 3</td><td class="col2">false false 3</td><td class="col3">false true 3</td></tr>'
+    const html = await liquid.parseAndRender(src)
+    return expect(html).to.equal(dst)
+  })
+  it('should support col, row, col0, col_first, col_last', async function () {
+    const src = '{% tablerow i in (1..3)%}{{tablerowloop.col}} {{tablerowloop.col0}} {{tablerowloop.col_first}} {{tablerowloop.col_last}}{% endtablerow %}'
+    const dst = '<tr class="row1"><td class="col1">1 0 true false</td><td class="col2">2 1 false false</td><td class="col3">3 2 false true</td></tr>'
+    const html = await liquid.parseAndRender(src)
+    return expect(html).to.equal(dst)
+  })
+  describe('offset', function () {
+    it('should support tablerow with offset', async function () {
+      const src = '{% tablerow i in (1..5) cols:2 offset:3 %}{{ i }}{% endtablerow %}'
+      const dst = '<tr class="row1"><td class="col1">4</td><td class="col2">5</td></tr>'
+      const html = await liquid.parseAndRender(src)
+      return expect(html).to.equal(dst)
+    })
+    it('index should also start at 1', async function () {
+      const src = '{% tablerow i in (1..4) cols:2 offset:2 %}{{tablerowloop.index}}{% endtablerow %}'
+      const dst = '<tr class="row1"><td class="col1">1</td><td class="col2">2</td></tr>'
+      const html = await liquid.parseAndRender(src)
+      return expect(html).to.equal(dst)
+    })
+    it('col should also start at 1', async function () {
+      const src = '{% tablerow i in (1..4) cols:2 offset:3 %}{{tablerowloop.col}}{% endtablerow %}'
+      const dst = '<tr class="row1"><td class="col1">1</td></tr>'
+      const html = await liquid.parseAndRender(src)
+      return expect(html).to.equal(dst)
+    })
+  })
 })