Merge pull request #708 from kethinov/0.6.19

0.6.19

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 - Put your changes here...
 
+## 0.6.19
+
+- Made client-side Teddy parser a bit more tolerant of bad markup.
+
 ## 0.6.18
 
 - Fixed a bug which caused client-side Teddy to rename yet more form elements accidentally.

cheerioPolyfill.js

@@ -73,8 +73,9 @@ function parseTeddyDOMFromString (html) {
   const selfClosingTags = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'])
   const root = document.createElement('body')
   const dom = [root]
+  const openTags = [] // stack to track open tags
   const tagAndCommentRegex = /<\/?([a-zA-Z0-9]+)([^>]*)>|<!--([\s\S]*?)-->/g
-  const attrRegex = /([a-zA-Z0-9-:._]+)(?:=(["'])(.*?)\2)?/g
+  const attrRegex = /([a-zA-Z0-9-:._]+)(?:=(["'])(.*?)\2|([^>\s]+))?/g
   let lastIndex = 0
   let match
 
@@ -97,8 +98,19 @@ function parseTeddyDOMFromString (html) {
       // handle tags
       const [fullMatch, tagName, attrString] = match
       const isClosingTag = fullMatch.startsWith('</')
-      if (isClosingTag) dom.pop() // pop the list if it's a closing tag
-      else {
+      if (isClosingTag) {
+        if (selfClosingTags.has(tagName.toLowerCase())) {
+          // convert incorrect closing tag for self-closing tag to self-closing tag
+          const element = document.createElement(tagName)
+          dom[dom.length - 1].appendChild(element)
+        } else {
+          // check if the closing tag matches the most recent open tag
+          if (openTags.length > 0 && openTags[openTags.length - 1] === tagName.toLowerCase()) {
+            openTags.pop()
+            dom.pop()
+          }
+        }
+      } else {
         // create a new element
         const element = document.createElement(tagName)
 
@@ -107,7 +119,7 @@ function parseTeddyDOMFromString (html) {
         const attrMap = new Map()
         while ((attrMatch = attrRegex.exec(attrString)) !== null) {
           const attrName = attrMatch[1]
-          const attrValue = attrMatch[3]
+          const attrValue = attrMatch[3] || attrMatch[4] || ''
 
           // handle duplicate attributes for special tags
           if (attrMap.has(attrName)) {
@@ -134,7 +146,10 @@ function parseTeddyDOMFromString (html) {
         dom[dom.length - 1].appendChild(element)
 
         // push the new element to the dom if it's not self-closing
-        if (!selfClosingTags.has(tagName.toLowerCase()) && !fullMatch.endsWith('/>')) dom.push(element)
+        if (!selfClosingTags.has(tagName.toLowerCase()) && !fullMatch.endsWith('/>')) {
+          dom.push(element)
+          openTags.push(tagName.toLowerCase())
+        }
       }
     }
 

package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/teddy/graphs/contributors"
     }
   ],
-  "version": "0.6.18",
+  "version": "0.6.19",
   "files": [
     "dist"
   ],

test/templates/conditionals/oneLineValueVarsNoQuotes.html

@@ -0,0 +1,5 @@
+{!
+  should evaluate one line if "if-something.something={something}" as false and remove attributes
+!}
+
+<option value='{something}' if-something.something={something} true='selected'>{something}</option>

test/templates/misc/badTag.html

@@ -0,0 +1,6 @@
+{!
+  should render html with a bad tag correctly
+!}
+
+<p>hello</br>world1</p>
+<p>hello</li>world2</p>

test/tests.js

@@ -264,6 +264,12 @@ export default [
         run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
         expected: '<option value="Some content">Some content</option>'
       },
+      {
+        message: 'should evaluate one line if "if-something.something={something}" as false and remove attributes (conditionals/oneLineValueVarsNoQuotes.html)',
+        template: 'conditionals/oneLineValueVarsNoQuotes',
+        run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
+        expected: '<option value="Some content">Some content</option>'
+      },
       {
         message: 'should evaluate <option> elements with the middle one selected (conditionals/oneLineValueVarsLooped.html)',
         template: 'conditionals/oneLineValueVarsLooped',
@@ -1568,6 +1574,12 @@ export default [
         run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
         expected: '<p>0</p>'
       },
+      {
+        message: 'should render html with a bad tag correctly (misc/badTag.html)',
+        template: 'misc/badTag',
+        run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
+        expected: '<p>hello<br>world1</p><p>helloworld2</p>'
+      },
       {
         message: 'should not render Teddy code in server-side comments in loops (misc/serverSideCommentsWithTeddyCode.html)',
         template: 'misc/serverSideCommentsWithTeddyCode',