Importing html into html

[ismay]

On duojs.org metalsmith is used to generate the html, and I myself use assemble. What I like about assemble is the way it allows me to break my html up into reusable components.

Since I can't currently manage my .hbs components with duo I'm using bower and the grunt assemble plugin. This works, but I think it would be awesome to be able to use duo for managing my html imports! Maybe a logical syntax for importing html would be the new html imports spec:

<link rel="import" href="/imports/heart.html">
<!-- from https://w3c.github.io/webcomponents/spec/imports/ -->

Now I'm sure all of you have already done a lot of thinking on this, so I'm curious what the duo community thinks of html (and related dialects) imports, and what people think of this idea. I think that it would be awesome if duo could parse my html and import remote dependencies (let alone compile it)!

---

Not sure if this is a duplicate of https://github.com/duojs/duo/issues/171, but I feel that that was more about asset management in general and less about html templating and imports. Otherwise, feel free to close this.

[ismay]

Maybe a package like https://github.com/addyosmani/oust could be useful to parse the html for imports?

[sankargorthi]

duo-handlebars seems to work just fine so far. No partials, maybe.

[sankargorthi]

https://github.com/dominicbarnes/duo-handlebars

[ismay]

@sankargorthi I've seen that plugin, but If I understand correctly it's main purpose is to make .hbs templates available for use in .js right? Because what I'm suggesting has more to do with managing .html dependencies:

• parsing html (or .hbs) for imports
• fetching remote dependencies (this is the most important part for me, it would bring all my dependency management in duo's territory: html, js and css)

So the .js isn't touched during all of this. From what I understand the plugin that you linked to is meant to be used more for the html part of ui components, right? But what I'm looking for is a way to manage my .html (and .hbs) dependencies that will be built into a complete, multipage, static website (by Assemble).

Right now I have to use bower for this, and it's a little awkward (and error prone) to use three package managers when developing (duo, npm, bower). I'd love to just work with duo and npm and import my components straight from my html (or .hbs).

[ismay]

Now I might be completely misunderstanding this, and not seeing that what I'm trying to do is already possible with duo. It's just that I couldn't find a way to do this from researching it myself.

[matthewmueller]

Right now Duo doesn't support using HTML files as entries (unless there's a transform that turns it into JS or CSS.

I know we had plans to add HTML support in the past, but I'm not sure that it could be done cleanly, given that servers can serve pretty much whatever path they want for the <link>, <script>, <img> etc.

[ismay]

@MatthewMueller

unless there's a transform that turns it into JS or CSS

I was thinking about adding JS style imports to a HBS template, but that won't work since HBS doesn't allow you to embed raw JS.

I know we had plans to add HTML support in the past, but I'm not sure that it could be done cleanly

I can understand that. Seems like it could be messy.

So do you think duo can play a role in this scenario at all? Because basically I'm looking for a clean way to manage my components (which also consist of HTML/HBS), and I'm trying to avoid mixing and matching different methodologies. Because that can be potentially confusing and lead to a bit of a mess.

I could just put an empty index.css in components that only consist of HTML, and have Duo download the components by importing the empty css file. But that seems hacky. I could always just use Bower, but I'm trying to come up with a good solution that uses Duo's workflow. Any ideas for a good way to solve this using Duo?

[ismay]

Ok, if I just completely bypass the parsing and building of .html, and just focus on the fetching of remote .hbs dependencies (without css or js) with Duo, which is the core of this issue.

Basically, even if I could specify the remote .hbs dependencies as "files" assets in their respective component.json, it is impossible to fetch them with Duo if they're not referenced in either a .js or a .css entry point. Is that right?

Or can I still use a local component.json to define and download those deps somehow?