crisper
crisper copied to clipboard
PolymerLabs
Running crisper on HTML imports (e.g., Polymer files) produces a full HTML tree
crisper (2.0.1) seems to always outputs HTML as a well-formed document, <html> tags and all -- even if the input file is just <script>foo;</script>, like most files intended to be used as a link rel="import" target.
This makes running crisper on Polymer element files a pain, because the result is a bunch of files which all think they're root HTML trees. This, in turn, breaks vulcanization's script ordering: Polymer/vulcanize#284
I think this boils down to what you're doing in https://github.com/Polymer/vulcanize/issues/284.
@ebidel, do you mean the other way around? I agree Polymer/vulcanize#284 is a weird case, and I only ran into it because of this issue here.
Or is your point that one should vulcanize first, then run crisper, not vice versa?
I meant that some of your issue might be what you're putting in imports. You're including a full html document with <body> tag. That doesnt make sense in an import.
I agree with you. It's the same reason why crisper's behavior is inconvenient: its output doesn't make sense in an import.
So feel free to close that bug as WAI if that makes sense.
To clarify, this bug (Running crisper on HTML imports (e.g., Polymer files) produces a full HTML tree) is described in more detail below:
Suppose I have a Polymer component x-test.html.
<link rel="import" href="paper-button/paper-button.html">
<dom-module id="x-test">
<template><div></div></template>
<script>Polymer({is: 'x-test'});</script>
</dom-module>
That's fine, and other HTML files can import that. Now let's remove the inline script to avoid CSP issues:
crisper -h out.html -j out.js -s x-test.html
That creates an HTML document with a <body> tag, so my component no longer makes sense:
<html><head><script src="out.js" defer=""></script><link rel="import" href="paper-button/paper-button.html">
</head><body><dom-module id="x-test">
<template><div></div></template>
</dom-module>
</body></html>
^ That behavior is what this bug refers to.
IIRC, vulcanize/crisper does this to make polyfill'd browsers like IE happy. I believe it also does things like stick a hidden attribute on the body so there's no possibility of visual FOUC. @azakus will know more of the dirty details.
FWIW, that out.html is still valid. Remember, HTML Imports are just HTML documents. In your example, someone can import out.html and use your element just as they could before. I don't understand what you mean by they "all think they're root files". HTML import documents are separate from the main page, even if they contain all the stuff in out.html.
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
I had this same issue with using crisper to process Shopify templates and snippets in a build process for Shopify. The parser, parse5, supports parsing fragments. I updated my local crisper definition to support that. I will submit a pull request.
Would love to see this pull request get accepted. While it works as said above, it's simply unnecessary kb we'll have to load in our files to have the html/body tags in there.
