spyne 0.21.4 → 0.22.2

package/src/spyne/views/view-stream-selector.js

@@ -253,7 +253,7 @@ function ViewStreamSelector(cxt, sel) {
    * @param {String|HTMLElement} elSel The selector for the element.
    * @desc Sets the class active HTMLElement from a NodeList.
    */
-  selector.setActiveItem = (c, elSel) => {
+  selector.setActiveItem2 = (c, elSel) => {
     const arr = getNodeListArray(cxt, sel)
     const currentEl = typeof (elSel) === 'string' ? getElOrList(cxt, elSel) : elSel
     const toggleBool = item => item.isEqualNode(currentEl) ? item.classList.add(c) : item.classList.remove(c)
@@ -266,6 +266,33 @@ function ViewStreamSelector(cxt, sel) {
     return this
   }
 
+  selector.setActiveItem = (c, elSel) => {
+    const arr = getNodeListArray(cxt, sel)
+    const currentEl = typeof elSel === 'string'
+      ? getElOrList(cxt, elSel)
+      : elSel
+
+    arr.forEach(item => item.classList.remove(c))
+
+    if (isNodeElement(currentEl) === true) {
+      const matchingEl = Array.from(arr).find(item => item === currentEl)
+
+      if (matchingEl) {
+        matchingEl.classList.add(c)
+      } else if (isDevMode() === true) {
+        console.warn(
+          `Spyne Warning: The selector, ${elSel}, is valid but does not match any item in setActiveItem: ${c}`
+        )
+      }
+    } else if (isDevMode() === true) {
+      console.warn(
+        `Spyne Warning: The selector, ${elSel}, does not appear to be a valid item in setActiveItem: ${c}`
+      )
+    }
+
+    return this
+  }
+
   /**
    *
    * @function el

package/src/tests/views/dom-el-template.test.js

@@ -285,3 +285,176 @@ describe('DomElTemplate', () => {
     expect(result).to.eq('<li>Eu delenit meliore graecis sea. Sit id ubique commune, ius ne recusabo oportere similique, error putant usu ei.</li>')
   })
 })
+
+// ─────────────────────────────────────────────────────────────────────────
+//  One-level nested array loops
+//
+//  DomElementTemplate supports exactly one level of nested array loops.
+//  These tests verify both the supported case (a loop inside a loop) and
+//  the boundary behavior — outer-loop splitting with the backreference
+//  regex, and a deliberate warning when deeper nesting is attempted.
+// ─────────────────────────────────────────────────────────────────────────
+
+describe('DomElementTemplate — one-level nested loops', () => {
+
+  it('outer-loop regex correctly pairs {{#name}} with {{/name}} when a different-named inner loop is present', () => {
+    // This verifies the \2 backreference fix — without it, the outer match
+    // would incorrectly terminate at {{/cells}} and orphan {{/rows}}.
+    const template = '<table>{{#rows}}<tr>{{#cells}}<td>{{.}}</td>{{/cells}}</tr>{{/rows}}</table>'
+    const matches = template.match(DomElementTemplate.findTmplLoopsRE())
+    expect(matches).to.have.lengthOf(1)
+    expect(matches[0]).to.equal('{{#rows}}<tr>{{#cells}}<td>{{.}}</td>{{/cells}}</tr>{{/rows}}')
+  })
+
+  it('renders nested array-of-arrays (the canonical table case)', () => {
+    const data = {
+      rows: [
+        { cells: ['a1', 'a2'] },
+        { cells: ['b1', 'b2'] }
+      ]
+    }
+    const template = '<table><tbody>{{#rows}}<tr>{{#cells}}<td>{{.}}</td>{{/cells}}</tr>{{/rows}}</tbody></table>'
+    const domElTemplate = new DomElementTemplate(template, data, { testMode: true })
+    const render = domElTemplate.renderDocFrag()
+
+    const rows = render.firstElementChild.querySelectorAll('tr')
+    expect(rows).to.have.lengthOf(2)
+
+    const firstRowCells = rows[0].querySelectorAll('td')
+    expect(firstRowCells).to.have.lengthOf(2)
+    expect(firstRowCells[0].innerText).to.equal('a1')
+    expect(firstRowCells[1].innerText).to.equal('a2')
+
+    const secondRowCells = rows[1].querySelectorAll('td')
+    expect(secondRowCells[0].innerText).to.equal('b1')
+    expect(secondRowCells[1].innerText).to.equal('b2')
+  })
+
+  it('renders nested array-of-objects where each outer item has an inner array of objects', () => {
+    const data = {
+      sections: [
+        {
+          title: 'Numbers',
+          entries: [
+            { term: 'one', definition: 'the first number' },
+            { term: 'two', definition: 'after one' }
+          ]
+        },
+        {
+          title: 'Letters',
+          entries: [
+            { term: 'a', definition: 'the first letter' }
+          ]
+        }
+      ]
+    }
+    const template =
+      '<div>{{#sections}}<section><h2>{{title}}</h2>{{#entries}}<p>{{term}}: {{definition}}</p>{{/entries}}</section>{{/sections}}</div>'
+
+    const domElTemplate = new DomElementTemplate(template, data, { testMode: true })
+    const render = domElTemplate.renderDocFrag()
+
+    const sections = render.firstElementChild.querySelectorAll('section')
+    expect(sections).to.have.lengthOf(2)
+
+    expect(sections[0].querySelector('h2').innerText).to.equal('Numbers')
+    const firstEntries = sections[0].querySelectorAll('p')
+    expect(firstEntries).to.have.lengthOf(2)
+    expect(firstEntries[0].innerText).to.equal('one: the first number')
+    expect(firstEntries[1].innerText).to.equal('two: after one')
+
+    expect(sections[1].querySelector('h2').innerText).to.equal('Letters')
+    const secondEntries = sections[1].querySelectorAll('p')
+    expect(secondEntries).to.have.lengthOf(1)
+    expect(secondEntries[0].innerText).to.equal('a: the first letter')
+  })
+
+  it('renders outer-level variables alongside an inner loop in the same iteration body', () => {
+    // Confirms that {{title}} at the outer scope is still resolved after the
+    // inner loop has been expanded. Regression guard for the ordering of
+    // inner-loop processing vs. outer-variable substitution.
+    const data = {
+      groups: [
+        { title: 'Group A', items: ['one', 'two'] },
+        { title: 'Group B', items: ['three'] }
+      ]
+    }
+    const template =
+      '<div>{{#groups}}<h3>{{title}}</h3><ul>{{#items}}<li>{{.}}</li>{{/items}}</ul>{{/groups}}</div>'
+
+    const domElTemplate = new DomElementTemplate(template, data, { testMode: true })
+    const render = domElTemplate.renderDocFrag()
+
+    const headings = render.firstElementChild.querySelectorAll('h3')
+    expect(headings[0].innerText).to.equal('Group A')
+    expect(headings[1].innerText).to.equal('Group B')
+
+    const lists = render.firstElementChild.querySelectorAll('ul')
+    expect(lists[0].querySelectorAll('li')).to.have.lengthOf(2)
+    expect(lists[0].querySelectorAll('li')[0].innerText).to.equal('one')
+    expect(lists[1].querySelectorAll('li')).to.have.lengthOf(1)
+    expect(lists[1].querySelectorAll('li')[0].innerText).to.equal('three')
+  })
+
+  it('renders an empty outer section to nothing (empty array)', () => {
+    const data = { rows: [] }
+    const template = '<table>{{#rows}}<tr>{{#cells}}<td>{{.}}</td>{{/cells}}</tr>{{/rows}}</table>'
+    const domElTemplate = new DomElementTemplate(template, data, { testMode: true })
+    const result = domElTemplate.renderToString()
+    expect(result).to.equal('<table></table>')
+  })
+
+  it('renders an empty inner section to nothing while still iterating the outer section', () => {
+    const data = {
+      rows: [
+        { cells: ['a1', 'a2'] },
+        { cells: [] },
+        { cells: ['c1'] }
+      ]
+    }
+    const template = '<div>{{#rows}}<p>{{#cells}}<span>{{.}}</span>{{/cells}}</p>{{/rows}}</div>'
+    const domElTemplate = new DomElementTemplate(template, data, { testMode: true })
+    const render = domElTemplate.renderDocFrag()
+
+    const paragraphs = render.firstElementChild.querySelectorAll('p')
+    expect(paragraphs).to.have.lengthOf(3)
+    expect(paragraphs[0].querySelectorAll('span')).to.have.lengthOf(2)
+    expect(paragraphs[1].querySelectorAll('span')).to.have.lengthOf(0)
+    expect(paragraphs[2].querySelectorAll('span')).to.have.lengthOf(1)
+  })
+
+  it('preserves the single-level (non-nested) case — a table template without an inner loop still renders', () => {
+    // Regression guard that the inner-loop detection branch does not break
+    // the hot path for templates that have no inner loop at all.
+    const data = { items: [{ name: 'first' }, { name: 'second' }] }
+    const template = '<ul>{{#items}}<li>{{name}}</li>{{/items}}</ul>'
+    const domElTemplate = new DomElementTemplate(template, data, { testMode: true })
+    const render = domElTemplate.renderDocFrag()
+
+    const lis = render.firstElementChild.querySelectorAll('li')
+    expect(lis).to.have.lengthOf(2)
+    expect(lis[0].innerText).to.equal('first')
+    expect(lis[1].innerText).to.equal('second')
+  })
+
+  it('two-level nested loops produce sensible output (deeper loop stripped, no crash)', () => {
+    // Deeper nesting than one level is deliberately unsupported. This test
+    // confirms the engine degrades gracefully: the outer and inner loops
+    // render, the third-level loop tags are stripped so they don't emit as
+    // garbled variables, and the test does not throw.
+    const data = {
+      a: [
+        { b: [{ c: ['x', 'y'] }] }
+      ]
+    }
+    const template = '<div>{{#a}}{{#b}}{{#c}}<span>{{.}}</span>{{/c}}{{/b}}{{/a}}</div>'
+
+    // Should not throw. Output shape is implementation-defined for the
+    // unsupported deeper loop; the important properties are:
+    //   (1) no crash, (2) no literal "{{" or "}}" tokens leaking into output.
+    const domElTemplate = new DomElementTemplate(template, data, { testMode: true })
+    const result = domElTemplate.renderToString()
+    expect(result).to.not.include('{{')
+    expect(result).to.not.include('}}')
+  })
+})