1.0.1

- Fixed a bug that caused client-side Teddy to try to fetch resources from the server inappropriately while parsing the template.
- Updated dependencies.

Author: kethinov

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 - Put your changes here...
 
+## 1.0.1
+
+- Fixed a bug that caused client-side Teddy to try to fetch resources from the server inappropriately while parsing the template.
+- Updated dependencies.
+
 ## 1.0.0
 
 - Added support for a new `<!--! server-side comments -->` syntax.

cheerioPolyfill.js

@@ -102,15 +102,16 @@ function parseTeddyDOMFromString (html) {
     } else {
       // handle tags
       const [fullMatch, tagName, attrString] = match
+      const lowerCaseTagName = tagName.toLowerCase()
       const isClosingTag = fullMatch.startsWith('</')
       if (isClosingTag) {
-        if (selfClosingTags.has(tagName.toLowerCase())) {
+        if (selfClosingTags.has(lowerCaseTagName)) {
           // 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()) {
+          if (openTags.length > 0 && openTags[openTags.length - 1] === lowerCaseTagName) {
             openTags.pop()
             dom.pop()
           }
@@ -141,7 +142,24 @@ function parseTeddyDOMFromString (html) {
         // apply attributes to the element
         for (const [name, value] of attrMap) {
           try {
-            element.setAttribute(name, value || '')
+            // replace elements with `src` attributes with `data-teddy-defer-attr-src` so the browser doesn't try to prefetch the asset
+            // this is needed because the value of the `src` attribute could be a {teddyVariable} and that fetch won't resolve
+            switch (lowerCaseTagName) {
+              case 'img':
+              case 'video':
+              case 'audio':
+              case 'iframe':
+              case 'script':
+                if (name === 'src') element.setAttribute('data-teddy-defer-attr-src', value) // replace src with data-teddy-defer-attr-src
+                else element.setAttribute(name, value || '')
+                break
+              case 'link':
+                if (name === 'href') element.setAttribute('data-teddy-defer-attr-href', value) // replace src with data-teddy-defer-attr-href
+                else element.setAttribute(name, value || '')
+                break
+              default:
+                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.')
           }
@@ -151,9 +169,9 @@ 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('/>')) {
+        if (!selfClosingTags.has(lowerCaseTagName) && !fullMatch.endsWith('/>')) {
           dom.push(element)
-          openTags.push(tagName.toLowerCase())
+          openTags.push(lowerCaseTagName)
         }
       }
     }

package-lock.json

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

package.json

@@ -1265,8 +1265,13 @@ function render (template, model, callback) {
     renderedTemplate = renderedTemplate.replace(`<noteddy id="${blockId}"></noteddy>`, () => model._noTeddyBlocks[blockId])
   }
 
-  // fix double-encoding html entity bug in client-side mode
-  if (browser) renderedTemplate = reverseDoubleEncodedEntities(renderedTemplate)
+  if (browser) {
+    // fix double-encoding html entity bug in client-side mode
+    renderedTemplate = reverseDoubleEncodedEntities(renderedTemplate)
+
+    // now that we're done with the render, reset data-teddy-defer-attr-src and data-teddy-defer-attr-href to native attributes
+    renderedTemplate = renderedTemplate.replaceAll('data-teddy-defer-attr-src', 'src').replaceAll('data-teddy-defer-attr-href', 'href')
+  }
 
   // cache the template
   if (cacheKey === 'none') {

teddy.js

@@ -106,6 +106,7 @@ export default function makeModel () {
     templateLiteralWithNonexistentVar: '${nonexistentVar}', // eslint-disable-line
     inlineStyles: 'body { font-family: sans-serif; }',
     inlineScript: 'console.log("hello")',
+    imgSrc: 'hello.jpg',
     complexJSONString: '{"content":{"appTitle":"Some App","pageTitle":"{content.appTitle}"},"currentYear":1858,"mainDomain":"localhost:43711","NODE_ENV":"development"}',
     obj: {
       one: {

test/model.js

@@ -0,0 +1,6 @@
+{!
+  should render img tags correctly
+!}
+
+<img src="something.jpg">
+<img src="{imgSrc}">

test/templates/misc/imgSrc.html

@@ -1658,6 +1658,12 @@ export default [
         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>'
       },
+      {
+        message: 'should render img tags correctly (misc/imgSrc.html)',
+        template: 'misc/imgSrc',
+        run: async (teddy, template, model, assert, expected) => assert(teddy.render(template, model), expected),
+        expected: '<img src="something.jpg"><img src="hello.jpg">'
+      },
       {
         message: 'should parse embedded script tag correctly (misc/scriptWithEmptyObject.html)',
         template: 'misc/scriptWithEmptyObject',