CMS Development

japeterson
Member

How to prevent a JavaScript file from being parsed through Hubl

I am including a JavaScript library on a site I'm working on. This library seems to use a few string templates for replacing content. However, the format it uses is the same as Hubl: {{somename}}.  In doing so, I'm guessing it's the strings in that use the {{ }}. Because, when I look at the source code in browser, those parts of the string just be  

 

I am including the file in my template using: 

 

 

{{ require_js(get_asset_url('../../js/vendor.js')) }}

 

 

And for an example, the JS original code has:

// Base template for layout
    baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' +
      '<div class="fancybox-bg"></div>' +
      '<div class="fancybox-inner">' +
      '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' +
      '<div class="fancybox-toolbar">{{buttons}}</div>' +
      '<div class="fancybox-navigation">{{arrows}}</div>' +
      '<div class="fancybox-stage"></div>' +
      '<div class="fancybox-caption"><div class="fancybox-caption__body"></div></div>' +
      "</div>" +
      "</div>",

 

And the actual output of that becomes:

baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1"><div class="fancybox-bg"></div><div class="fancybox-inner"><div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div><div class="fancybox-toolbar"></div><div class="fancybox-navigation"></div><div class="fancybox-stage"></div><div class="fancybox-caption"><div class="fancybox-caption__body"></div></div></div></div>',

 

How would I turn this functionality off? I don't need this JavaScript file parsed through Hubl.

 

The only similar issue I could find was here (https://community.hubspot.com/t5/CMS-Development/How-to-escape-inside-CSS-and-JS-files/td-p/201137). It suggested wrapping the JavaScript in 

{% raw %}

However, this JavaScript is included in my project from an NPM package and concatenated with other vendor libraries through a build process. So, I can't edit the JavaScript file to wrap it the raw tag.

 

To make sure I check all the boxes from the community guidelines:

  1. Public links to the page(s) or template(s) you are working on
    - I can't provide links, since it's a client project I don't have persmission to share
  2. Please provide formatted code you are working on
    - Provided above
  3. What resources you have consulted already
    - I've tried finding anything I can in the documentation and searching the community. The only thing I could find was the link I provided above (which doesn't help my case).
  4. Level of coding experience
    - I am still pretty new Hubspot, but years of experience with everything else - HTML, CSS, JavaScript.

Thanks!

0 Upvotes
5 Replies 5
japeterson
Member

How to prevent a JavaScript file from being parsed through Hubl

I did just figure out a work-around. As part of my build process I contactenated a javascript file that only has {% raw %} in it, then all the vendor files I want, and finally a javascript file that only has {% endraw %}. So, when it's all concatenated together the vendor.js file has the raw start at the begining and the endraw at the end. This fixed the issue I was having.

 

However, I would still be interested in an official way to prevent JavaScript files from being parsed by Hubl.

dperolio
Contributor | Partner
Contributor | Partner

How to prevent a JavaScript file from being parsed through Hubl

Thank you sir, I just ran into this issue while importing a module asset JS file. I didn't even know those got parsed for HubL. 😲

 

Prepending and appending {% raw %} and {% endraw %} respectively to the JS file worked fine though (besides the syntax highlighting). I agree there should be a "proper" way to flag JS files to prevent them from being parsed for HubL though.

0 Upvotes
jmclaren
HubSpot Employee
HubSpot Employee

How to prevent a JavaScript file from being parsed through Hubl

😉

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

How to prevent a JavaScript file from being parsed through Hubl

Hey @japeterson 

 

Could you use ecape_jinjava filter?

{{ require_js(get_asset_url('../../js/vendor.js'))|escape_jinjava }}

Docs here

 

Not sure if it'll work but worth a shot.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
japeterson
Member

How to prevent a JavaScript file from being parsed through Hubl

Thanks for the suggestion. It doesn't seem to work in this instance. The require_js just creates the script tag that links to a JavaScript file. The content of that JavaScript file is what is transformed. So, it seems to be happening to the script file before it's even loaded on the page.

0 Upvotes