Parcel: 馃悰 Tags that do not belong to HTML should be ignored
For services rendered as the template file, the template engine <%%>,{{}} marker package should be ignored, but the label disrupted
馃捇 Demo Code
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
<link href="./style.css">
</head>
<body>
<h1>Welcome : </h1>
<% if(data){ %>
<p><%=data%></p>
<%}else{%>
<p><%=request.session._flash||' Error '%></p>
<%}%>
</body>
<script src="./index.js"></script>
</html>
馃 Expected Behavior
<!DOCTYPE html> <html> <head> <title><%=title%></title> <link href="/dist/1fb0a95e00274611850900f80a9d9d1e.css"> </head> <body> <h1>Welcome : </h1> <% if(data){ %> <p><%=data%></p> <%}else{%> <p><%=request.session._flash||' Error ' %></p> <%}%> </body> <script src="/dist/e2e07bfc7be96fd730ba9a0cd2160e84.js"></script> </html>
馃槸 Current Behavior
<!DOCTYPE html> <html> <head> <title><%=title%></%=title%></title> <link href="/dist/1fb0a95e00274611850900f80a9d9d1e.css"> </head> <body> <h1>Welcome : </h1> <% if(data){="" %=""> <p><%=data%></%=data%></p> <%}else{%> <p><%=request.session._flash||' Error="" '%=""></%=request.session._flash||'></p> <%}%> </%}%></%}else{%></%></body> <script src="/dist/e2e07bfc7be96fd730ba9a0cd2160e84.js"></script> </html>
馃拋 Possible Solution
parcel build test/demo.html -d ./test/dist/ --mangle-tag=<%%>,{{}}
馃實 My Environment
| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.4.1 |
| Node | v8.8.0 |
| npm/Yarn | Yarn |
| Operating System | MacOS 10.12.6 |
Bug
highsea
👍1
All 12 comments
maybe we can add add custom tags for {{}} and <% %> in HTMLAsset when parsing and rendering HTML file to solve this issue
okyantoro
on 13 Jan 2018
If i'm not mistaken this is probably related to the postHTML processing we do, and i'm pretty sure there is an option to ignore certain syntaxes or to make processing less strict in postHTML. I'll try fix it or look for related code, so someone else can take a look.
Related code:
https://github.com/parcel-bundler/parcel/blob/master/src/assets/HTMLAsset.js#L69
Maybe https://github.com/parcel-bundler/parcel/blob/master/src/assets/HTMLAsset.js#L34
DeMoorJasper
on 13 Jan 2018
Yes, it's an effect of postHTML:
posthtml = require('posthtml');
const html = `
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
</head>
<body>
</body>
`
const result = posthtml()
.process(html, { sync: true })
.html
console.log(result)
Will output
<!DOCTYPE html>
<html>
<head>
<title><%=title%></%=title%></title>
</head>
<body>
</body>
</html>
Now, the harder part. There doesn't seem to be an option to disable this and no plugin for that kind of ignore.
I would be interested in writing a posthtml plugin that would take a list of templates and ignore processing of tags matching them. If you would like that approach, let me know.
maciej-ka
on 17 Jan 2018
@maciej-ka i've looked into this as well, that will probably be the best solution, feel free to take a go at this
DeMoorJasper
on 17 Jan 2018
Turned out that posthtml plugin can only transform AST while the closing of tag happens inside posthtml-renderer. There is an option to define tags that don't need closing (like <br>) however it supports only strings (and a tagname in this case is %=varname%).
I submitted PR that would allow regexp in renderer options. With that we could:
const posthtmlRender = require('posthtml-render');
posthtml([plugin()]).process(html, {render: (tree) => render(tree, {singleTags: [/^%.*%$/]})})
Awesome work @maciej-ka , hope they merge it soonish :)
DeMoorJasper
on 17 Jan 2018
🎉1
Question: why are you processing template files with Parcel? Shouldn't you be running them through the template engine first? Should we support an asset type for that template engine?
I'm just worried that these aren't really valid HTML. How do we decide which tags to support? The tags might conflict between different template engines. We can't possibly support them all by default, without explicit asset types for them I don't think.
devongovett
on 26 Jan 2018
Closing, since there has been no response.
devongovett
on 20 Feb 2018
The