Merge pull request #706 from kethinov/0.6.17

0.6.17

CHANGELOG.md

@@ -4,6 +4,14 @@
 
 - Put your changes here...
 
+## 0.6.17
+
+- Fixed a bug which caused client-side Teddy to handle array length lookups differently from `cheerio`-driven Teddy.
+- Fixed a bug which caused client-side Teddy to crash if extra spaces were in markup attribute lists.
+- Fixed a bug which caused client-side Teddy to return the wrong data with 2 or more layers of object lookups if the object keys were camelCase.
+- Fixed a bug which caused client-side Teddy to rename some form elements accidentally.
+- Updated various dependencies.
+
 ## 0.6.16
 
 - Fixed a bug which caused client-side Teddy to fail in some situations like putting a `<loop>` in a `<select>` element.

cheerioPolyfill.js

@@ -122,7 +122,13 @@ function parseTeddyDOMFromString (html) {
         }
 
         // apply attributes to the element
-        for (const [name, value] of attrMap) element.setAttribute(name, value || '')
+        for (const [name, value] of attrMap) {
+          try {
+            element.setAttribute(name, value || '')
+          } catch (e) {
+            console.warn('Error parsing an element attribute. You might have a typo in your HTML. A common cause is two spaces between element attributes.')
+          }
+        }
 
         // append the new element to the current parent
         dom[dom.length - 1].appendChild(element)

package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/teddy/graphs/contributors"
     }
   ],
-  "version": "0.6.16",
+  "version": "0.6.17",
   "files": [
     "dist"
   ],
@@ -34,7 +34,7 @@
     "c8": "10.1.2",
     "codecov": "3.8.3",
     "cross-env": "7.0.3",
-    "eslint": "9.14.0",
+    "eslint": "9.15.0",
     "eslint-plugin-html": "8.1.2",
     "eslint-plugin-mocha": "10.5.0",
     "mocha": "10.8.2",

teddy.js

@@ -720,8 +720,8 @@ function cleanupStrayTeddyTags (dom) {
     const tags = dom('[teddydeferredonelineconditional], include, arg, if, unless, elseif, elseunless, else, loop, cache')
     if (tags.length > 0) {
       for (const el of tags) {
-        if (browser) el.name = el.nodeName?.toLowerCase()
-        if (el.name === 'include' || el.name === 'arg' || el.name === 'if' || el.name === 'unless' || el.name === 'elseif' || el.name === 'elseunless' || el.name === 'else' || el.name === 'loop' || el.name === 'cache') {
+        const tagName = browser ? el.nodeName?.toLowerCase() : el.name
+        if (tagName === 'include' || tagName === 'arg' || tagName === 'if' || tagName === 'unless' || tagName === 'elseif' || tagName === 'elseunless' || tagName === 'else' || tagName === 'loop' || tagName === 'cache') {
           dom(el).remove()
         }
         if (browser) el.attribs = getAttribs(el)
@@ -831,8 +831,13 @@ function getOrSetObjectByDotNotation (obj, dotNotation, value) {
       else return obj[dotNotation[0]]
     }
     return false
-  } else return getOrSetObjectByDotNotation(obj[dotNotation[0]], dotNotation.slice(1), value)
+  } else {
+    if (browser) obj = caseInsensitiveLookup(obj, dotNotation[0])
+    else obj = obj[dotNotation[0]]
+    return getOrSetObjectByDotNotation(obj, dotNotation.slice(1), value)
+  }
   function caseInsensitiveLookup (obj, key) {
+    if (key === 'length') return obj.length
     const lowerCaseKey = key.toLowerCase()
     const normalizedObj = Object.keys(obj).reduce((acc, k) => {
       acc[k.toLowerCase()] = obj[k]

test/model.js

@@ -117,6 +117,14 @@ export default function makeModel () {
         }
       }
     ],
+    topObj: {
+      subObj: {
+        one: 1,
+        zero: 0,
+        emptyArray: [],
+        populatedArray: ['fds', 'hgf', 'jkf']
+      }
+    },
     nestedObj: {
       'Thing With Name 1': {
         'Subthing With Name 1': [

test/templates/conditionals/ifArrayLengthZero.html

@@ -0,0 +1,24 @@
+{!
+  should evaluate conditionals that examine array lengths correctly
+!}
+
+<p>{topObj.subObj.one}</p>
+<p>{topObj.subObj.zero}</p>
+<p>{topObj.subObj.emptyArray}</p>
+<p>{topObj.subObj.emptyArray.length}</p>
+<p>{topObj.subObj.populatedArray.length}</p>
+<if topObj.subObj.one="1">
+  <p>1 is present</p>
+</if>
+<if topObj.subObj.zero="0">
+  <p>0 is present</p>
+</if>
+<if topObj.subObj.emptyArray>
+  <p>emptyArray is present</p>
+</if>
+<if topObj.subObj.emptyArray.length="0">
+  <p>emptyArray length is 0</p>
+</if>
+<if topObj.subObj.populatedArray.length="3">
+  <p>populatedArray length is 3</p>
+</if>

test/tests.js

@@ -54,6 +54,12 @@ export default [
         run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
         expected: '<p>The variable \'something\' is present</p>'
       },
+      {
+        message: 'should evaluate conditionals that examine array lengths correctly (conditionals/ifArrayLengthZero.html)',
+        template: 'conditionals/ifArrayLengthZero',
+        run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
+        expected: '<p>1</p><p>0</p><p>false</p><p>0</p><p>3</p><p>1ispresent</p><p>0ispresent</p><p>emptyArraylengthis0</p><p>populatedArraylengthis3</p>'
+      },
       {
         message: 'should evaluate nested <unless> tag in the if (conditionals/unlessNestedIf.html)',
         template: 'conditionals/unlessNestedIf',