Parcel: HTML import support?

[zeakd]

🙋 feature request

Hi.
I just think about it, How about HTML import support for parcel? it would be better import way for html assets

💻 Examples

<link rel='import' src='./partial.html' />
<link rel='import' src='./Button.vue' />

[mohsen1]

I'm curious why you need this? AFAIK Polymer was the only user of HTML Imports but they are moving away from it.

[zeakd]

@mohsen1 It comes from when considering markdown support problem. I agree markdown should be transpiled to html, but to parse markdown to html, MarkdownAsset should have layout(html, head, body, meta..) and renderer. Parcel doesn't have a way to pass these options, and there are no .markdownrc spec.

IMO, lack of importing and manipulating way of html caused these problems. posthtml-include do something similar but it can't make ast of assets. I thought <link rel='import> can give flexibility to parcel in bundling time. for example

main.html

...
  <div>
    <link rel='import href='./hello.html' />
  </div>
...

hello.html

<div class='md'>
  <link rel='import' href='./hello.md' />
</div>
...
<script>
  const marked = require('marked');
  const link = document.querySelector('link[rel="import"]');
  const mdWrapper = document.querySelector('.md');
  mdWrapper.innerHTML = marked(link.innerHTML);
  ...
</script>

result main.html

<div>
  <div class='md'>
     <!-- some parsed markdown contents-->
  </div>
</div>

Well, this is just rough sketch and should be developed more. main idea is inside <script> would be excuted in bundling time then user can manipulate html easily without magic. This can be used to inject some parameters to template engines, import .vue as web-component, etc.

[jluisgarcia]

I was just thinking the same.
Having a separate piece of html for a header, for example. And being able to import it, is a feature that Parcel fans will love.

[jdanyow]

Duplicate of #178, #293?

I think polymer abandoned HTML imports and the spec died https://caniuse.com/#feat=imports

Here's a way to import markdown with posthtml:

<article class="markdown-body" md>
  <include src="./README.md"></include>
</article>

source, .posthtmlrc.js

PR to make parcel's watcher observe posthtml included files: #1355

[buckle2000]

Maybe you need pug?

[jluisgarcia]

Pug is an option. But it involves learning a new syntax.
Best option is being able to include Html fragments "out of the box" with parcel.
It would be so nice for navigation, etc.

[GrosSacASac]

Hi, several authors from the webcomponents spec are considering html modules instead of html imports (120+ comments discussion)

The good news is that html modules would be very close to es modules, so the same algorithms that resolve imports and exports for es modules could be reused.

Another benefit of html modules over html imports is that , in the code , the import is not split across two different places.

[devongovett]

Going to close this since the HTML import spec is obsolete. See @jdanyow's post above for how to do this with PostHTML.

[jluisgarcia]

that´s ok.
I will be using PHP includes. Definitely not going to use PostHTML in any case.
It would've been a feature on parcel's side to stand out of the crowd
Pity

[rhildred]

@jdanyow's comment about postHtml worked a treat!