1.1.3

- Added `<!--# escape comments -->`.
- Updated dependencies.

Author: kethinov

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 - Put your changes here...
 
+## 1.1.3
+
+- Added `<!--# escape comments -->`.
+- Updated dependencies.
+
 ## 1.1.2
 
 - Added `teddy.clearTemplates()` method to clear the template cache.

README.md

@@ -91,7 +91,7 @@ Display a variable by simply writing `{varName}` anywhere in the template. You c
 
 All variable names are case-insensitive, both in `{varName}` form and when referenced in Teddy tags described below. This is to comply with the rules of HTML grammar which mandate that HTML tags and attributes be case insensitive.
 
-HTML entities such as `<`, `>`, `&`, `'`, and `"` will be escaped by default as a safeguard against [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting). If you want to deliberately escape some text or some HTML, then wrap it in an `<escape>` tag like this: `<escape><p>hello</p></escape>` which will output: `&lt;p&gt;hello&lt;/p&gt;`.
+HTML entities such as `<`, `>`, `&`, `'`, and `"` will be escaped by default as a safeguard against [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting). If you want to deliberately escape some text or some HTML, then wrap it in an `<escape>` tag like `<escape><p>hello</p></escape>` or an escape comment like `<!--#<p>hello</p>-->` which will output: `&lt;p&gt;hello&lt;/p&gt;`.
 
 If you need to suppress this escaping in certain scenarios, write your variable like this: `{varName|s}`.
 

package-lock.json

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

package.json

@@ -71,7 +71,7 @@ function loadTemplate (template) {
   }
 }
 
-// remove teddy {! comments !} and <!--! comments -->
+// remove teddy {! comments !} and <!--! comments -->; also replace <!--# content --> with <escape>content</escape>
 function removeTeddyComments (renderedTemplate) {
   let oldTemplate
   do {
@@ -91,6 +91,13 @@ function removeTeddyComments (renderedTemplate) {
       return renderedTemplate
     }
     for (let i = 0; i < vars.length; i++) renderedTemplate = renderedTemplate.replace(`<!--!${vars[i]}-->`, '')
+
+    try {
+      vars = matchByDelimiter(renderedTemplate, '<!--#', '-->')
+    } catch (e) {
+      return renderedTemplate
+    }
+    for (let i = 0; i < vars.length; i++) renderedTemplate = renderedTemplate.replace(`<!--#${vars[i]}-->`, `<escape>${vars[i]}</escape>`)
   } while (oldTemplate !== renderedTemplate)
   return renderedTemplate
 }
@@ -222,16 +229,16 @@ function parseIncludes (dom, model, dynamic) {
         const hasFalse = contents.includes(' false=')
         const hasLoop = contents.includes('</loop>')
         const hasInline = contents.includes('</inline>')
-        const hasEscape = contents.includes('</escape>')
+        const hasEscape = contents.includes('</escape>') || contents.includes('<!--#')
         const hasSelected = contents.includes(' selected-value=') || contents.includes(' checked-value=')
+        if (hasEscape) contents = parseEscapes(contents)
         let localDom
         if (hasNoteddy || hasNoparse || hasPre) {
           localDom = cheerioLoad(contents, cheerioOptions)
           localDom = tagNoParseBlocks(localDom, localModel)
           contents = localDom.html()
         }
         localDom = cheerioLoad(parseVars(contents, localModel), cheerioOptions)
-        if (hasEscape) localDom = parseEscapes(localDom, localModel)
         if (hasIf || hasUnless) localDom = parseConditionals(localDom, localModel)
         if (hasTrue || hasFalse) localDom = parseOneLineConditionals(localDom, localModel)
         if (hasLoop) localDom = parseLoops(localDom, localModel)
@@ -631,6 +638,8 @@ function parseLoops (dom, model) {
           const hasNoteddyLoopContents = loopContents.includes('</noteddy>')
           const hasNoparseLoopContents = loopContents.includes('</noparse>')
           const hasPreLoopContents = loopContents.includes('</pre>')
+          const hasEscape = loopContents.includes('</escape>') || loopContents.includes('<!--#')
+          if (hasEscape) loopContents = parseEscapes(loopContents)
           if (hasNoteddyLoopContents || hasNoparseLoopContents || hasPreLoopContents) {
             let localDom = cheerioLoad(loopContents, cheerioOptions)
             localDom = tagNoParseBlocks(localDom, localModel)
@@ -645,10 +654,8 @@ function parseLoops (dom, model) {
           const hasFalse = localMarkup.includes(' false=')
           const hasLoop = localMarkup.includes('</loop>')
           const hasInline = localMarkup.includes('</inline>')
-          const hasEscape = localMarkup.includes('</escape>')
           const hasSelected = localMarkup.includes(' selected-value=') || localMarkup.includes(' checked-value=')
           let localDom = cheerioLoad(localMarkup || '', cheerioOptions)
-          if (hasEscape) localDom = parseEscapes(localDom, localModel)
           if (hasNoteddy || hasNoparse) localDom = tagNoParseBlocks(localDom, localModel)
           if (hasIf || hasUnless) localDom = parseConditionals(localDom, localModel)
           if (hasTrue || hasFalse) localDom = parseOneLineConditionals(localDom, localModel)
@@ -700,19 +707,8 @@ function parseInlines (dom, model) {
 }
 
 // render <escape> tags
-function parseEscapes (dom, model) {
-  let parsedTags
-  do {
-    parsedTags = 0
-    const tags = dom('escape')
-    if (tags.length > 0) {
-      for (const el of tags) {
-        dom(el).replaceWith(escapeEntities(dom(el).html()))
-        parsedTags++
-      }
-    }
-  } while (parsedTags)
-  return dom
+function parseEscapes (templateString) {
+  return templateString.replace(/<escape>(.*?)<\/escape>/gs, (_, content) => escapeEntities(content.trim()))
 }
 
 // render `selected-value` and `checked-value` attributes
@@ -1240,6 +1236,9 @@ function render (template, model, callback) {
     })
   }
 
+  const hasEscape = renderedTemplate.includes('</escape>') || renderedTemplate.includes('<!--#')
+  if (hasEscape) renderedTemplate = parseEscapes(renderedTemplate)
+
   dom = cheerioLoad(renderedTemplate || '', cheerioOptions)
   let oldTemplate
   let passes = 0
@@ -1261,15 +1260,13 @@ function render (template, model, callback) {
     const hasInclude = renderedTemplate.includes('</include>')
     const hasLoop = renderedTemplate.includes('</loop>')
     const hasInline = renderedTemplate.includes('</inline>')
-    const hasEscape = renderedTemplate.includes('</escape>')
     const hasSelected = renderedTemplate.includes(' selected-value=') || renderedTemplate.includes(' checked-value=')
     oldTemplate = renderedTemplate || ''
     if (passes > 1) {
       dom = cheerioLoad(renderedTemplate || '', cheerioOptions)
       if (parseDynamicIncludes) dom = parseIncludes(dom, model, true)
     }
     if (hasCache) dom = replaceCacheElements(dom, model)
-    if (hasEscape) dom = parseEscapes(dom, model)
     if (hasNoteddy || hasNoparse || hasPre) dom = tagNoParseBlocks(dom, model)
     if (hasIf || hasUnless) dom = parseConditionals(dom, model)
     if (hasTrue || hasFalse) dom = parseOneLineConditionals(dom, model)

teddy.js

@@ -0,0 +1,8 @@
+{!
+  should escape HTML entities present in <!--# escape --> tags
+!}
+
+<div>
+  <code><!--#<p>--></code>
+  <code><!--#<script>--></code>
+</div>

test/templates/misc/escapeComment.html

@@ -13,6 +13,11 @@
       should not render this loop
       <loop through='objects' key='k' val='v'>
     -->
+    <div>
+      <!--#
+        <p>hello</p>
+      -->
+    </div>
     <p>test</p>
   </loop>
 </div>

test/templates/misc/serverSideCommentsWithTeddyCode.html

@@ -894,6 +894,12 @@ export default [
         run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
         expected: '<div>&lt;p&gt;hello&lt;/p&gt;</div>'
       },
+      {
+        message: 'should escape HTML entities present in <!--# escape --> comments (misc/escapeComment.html)',
+        template: 'misc/escapeComment',
+        run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
+        expected: '<div><code>&lt;p&gt;</code><code>&lt;script&gt;</code></div>'
+      },
       {
         message: 'should render <pre> tags correctly (misc/preTag.html)',
         template: 'misc/preTag',
@@ -1674,7 +1680,7 @@ export default [
         message: 'should not render Teddy code in server-side comments in loops (misc/serverSideCommentsWithTeddyCode.html)',
         template: 'misc/serverSideCommentsWithTeddyCode',
         run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
-        expected: '<div><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>'
+        expected: '<div><p>test</p><div>&lt;p&gt;hello&lt;/p&gt;</div><p>test</p><p>test</p><div>&lt;p&gt;hello&lt;/p&gt;</div><p>test</p><p>test</p><div>&lt;p&gt;hello&lt;/p&gt;</div><p>test</p></div>'
       },
       {
         message: 'should render img tags correctly (misc/imgSrc.html)',