Parcel: 🙋 feature request: html partials

Created on 28 Feb 2018 · 9Comments · Source: parcel-bundler/parcel

When working on larger html-files it would be great if we can split them up into partials, maybe by using an include directive. How about something as following?

<html>
<head>
...
</head>
<body>
  <div class="container">
    <!-- @include header.html -->
    <!-- @include about-us.html -->
    <!-- @include testimonials.html -->
  </div>
</body>
</html>

Feature RFC

Source

mdings

👍22 ❤2

Most helpful comment

This could be done using posthtml-include I think. Just create a .posthtmlrc file like this one in the tests: https://github.com/parcel-bundler/parcel/blob/master/test/integration/posthtml/.posthtmlrc.js

devongovett on 1 Mar 2018

👍8 🎉6

All 9 comments

Wow this would actually be a really cool feature!!! 👍 😃

Did you just make up the @include syntax, or is this an established convention from elsewhere? Is there already some existing web spec/api on how html includes should work?

I tried looking into link rel=‘import’ (see: Article and Spec), but it seems pretty cumbersome to use, so I think what you’re proposing would actually be incredibly useful for people writing direct html without using view libraries like React/Angular.

We should also discuss if we want to add this to Parcel’s core, or if it would be better of separated into its own plugin.

davidnagli on 1 Mar 2018

devongovett on 1 Mar 2018

👍8 🎉6

Did you just make up the @include syntax, or is this an established convention from elsewhere? Is there already some existing web spec/api on how html includes should work?

I think I've seen this before with codekit. Not sure if there is an existing spec for it. Anyway, I will try using posthtml-include for now and see how that works out.

mdings on 1 Mar 2018

This is not working. The tag is just used as-in the generated output.

Input:

index.html

<!doctype html>
<html>
<body>
    <include src="title.html"></include>
</body>
</html>

title.html

<h1>Hello world</h1>

Output:

<!doctype html>
<html>
<body>
    <include src="title.html"></include>
</body>
</html>

Expected output:

<!doctype html>
<html>
<body>
    <h1>Hello world</h1>
</body>
</html>

mdings on 1 Mar 2018

Did you create a .posthtmlrc with posthtml-included as a plug-in?

davidnagli on 1 Mar 2018

Oh wait. I actually created .posthtmlrc.js but didn't export the config object.. Sorry, never mind. Works perfectly 👯

edit: there is no live reload on the partial files though

mdings on 1 Mar 2018

@devongovett Is there any intention to support this in a sense of being actually usable? As @mdings mentioned, this way there is no auto reload. And even worse, in CI processes it will fail to recognize to build these, if you do not clear the cache.

wzrdtales on 12 Mar 2018

👍12

For me it worked with .posthtmlrc.js as in tests. My parcel configuration is based on https://github.com/azu/parcel-typescript-example

gitowiec on 17 Jul 2018

This could be done using posthtml-include I think. Just create a .posthtmlrc file like this one in the tests: https://github.com/parcel-bundler/parcel/blob/master/test/integration/posthtml/.posthtmlrc.js

The new url for this is https://github.com/parcel-bundler/parcel/blob/v2/packages/core/integration-tests/test/integration/posthtml/.posthtmlrc.js in case it saves you any time search for it like me :P