Ractive parsing through scripts
Closed this issue · 12 comments
In our project, we have certain use of the {{ and }}. While there's an option to change delimiters for the template, it's not related (just sayin') :D
Anyways, when rvc parses the component using Ractive.parse() that coincidentally contains text that has {{ and }}, like say in a string variable.
Ractive.parse('<div class="component">foo</div><script>var someVar = "{{non-template-thing}}";</script>');It returns with a dissected script:
{
"v": 1,
"t": [{
"t": 7,
"e": "div",
"a": {
"class": "component"
},
"f": ["foo"]
}, {
"t": 7,
"e": "script",
"f": ["var someVar = \"", {
"t": 2,
"x": {
"r": ["non", "template", "thing"],
"s": "${0}-${1}-${2}"
}
}, "\";"]
}]
}It even dissects it when the script is like
var someVar = '{{' + text + '}}';And I end up with , [object Object] , for that variable instead of {{non-template-thing}}, which I intend to have. Is this intended behavior? For stuff that has text that coincidentally uses the {{ and }}, Ractive.parse seem to break them.
Ractive treats script and style tags as normal text and I think that is correct, as long as these tags are inside the template. However, with component loaders, the script isn't part of the template, so it should be left untouched. Not sure if there is an easy way to do that though.
In the meantime, you can temporarily change delimiters for the script:
{{=<% %>=}} // set delimiters to <% and %>
<script>...</script>
<%={{ }}=%> // set delimiters back to {{ and }}
It's also parsing & as & and other special characters embedded in the script.
@fskreuz Have fixed that one.
👍
@Rich-Harris Just noticed there is interpolate option which can be used to prevent interpolating script and style elements, but it doesn't work.
@MartinKolarik yes, this needs to be documented - will add an issue. It works if you use directly with Ractive.parse(), but the option isn't passed through from the constructor:
- http://jsfiddle.net/rich_harris/S2Ku4/ (works)
- http://jsfiddle.net/rich_harris/p4H8v/ (doesn't)
Will look into it...
@Rich-Harris I did try it with Ractive.parse(), just a little different script:
Ractive.parse('<script>{{foo}}</script>', { interpolate: { script: false } });@MartinKolarik Ah, good catch - so it's testing for a mustache first and never getting to the 'don't interpolate this, we're inside a script tag' bit that happens inside a text block. Hmm.
@fskreuz I've just published version 0.2.3 of rvc, which should fix your issue (which was caused by rcu, which is sort of an interface between Ractive.parse() and component loaders like rvc). Thanks for raising.
Just to clarify, pending the docs update, the interpolate option works like so:
Ractive.parse( template, {
interpolate: { script: false, style: false }
});Will keep this issue open until we've dealt with those other things
Awesome 👍
@Rich-Harris I updated ractive load, can you publish to npm?
Done, thanks. We'll have to transfer ownership of these npm packages to a shared account so that I'm not a bottleneck if I'm somewhere beyond the internet.