Using CSS selectors for targeting elements

[sudo-vaibhav]

It would be great if we could just specify the CSS selector of the tag we wanna insert the partial in. for example I have a blog signup section that I wanna reuse in multiple pages. But all of those pages have many section tags. My hack for making it work was putting a partial in the aside tag and another partial in the article tag but this way I will quickly run out of tags. If we can develop a way of just targeting DOM elements by their CSS selector(more preferable) or by XPATH, it would highly increase the scope of this plugin.

[sudo-vaibhav]

Also @colbyfayock why don't we try DOMParser. Its a feature of js that I encountered while working on chrome extensions in another unrelated project. Essentialy what it allows you to do is to read a string(even a file) and then treat it as if its a proper DOM tree. Then we can do insertAdjacentHTML (another useful js function). Are you getting what I am trying to say? It can optimise our approach by manifolds if what I think makes sense. We can target and insert our partial with surgical precision this way. It sounds like a much better approach than doing regex matching which will drive us insane at some point if you keep trying to accommodate changes by requesters like you did for me recently.

var parser = new DOMParser(); var doc = parser.parseFromString(templateFileAsAString, "text/html"); var element = doc.querySelector(SelectorOfTagToTarget);

SelectorOfTagToTarget is the new option we might wanna add to the HTMLWebpackPartials plugin object to get surgical precision

Then we can do:
element.insertAdjacentHTML("afterbegin",partial) // this afterbegin would resemble your high priority option

Here are the relevant links for your reference just in case 😄 :

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

[colbyfayock]

that sounds pretty great! i hadnt heard of that before

my only concern is whether or not that's available on Node? i can check and see

If it's not, there might be a package

I agree its probably better to use a package given its getting slightly more complicated, was hoping to keep it slim before, but using a tool for that would probably make it more reliable

i've used https://cheerio.js.org/ before - looks like that wraps https://github.com/fb55/htmlparser2/

as far as contributing goes, if you're interested in giving this (or something else) a shot, i would recommend:

• Fork the repo to your own account
• Try to get the project running locally. You can test this by running yarn test (after yarn install)
• Make your changes
• i typically run webpack directly in each example project to work on it
• then you would push your changes to your forked repo
• and finally create a pull request here :)

totally understand if its a lot, i could probably get to this at some point somewhat soon

[sudo-vaibhav]

I will work on this new feature. I would love to add value to this repo. I think my previous experience with DOMParser will help us.

[sudo-vaibhav]

I have added a pull request ( #32 ) with some code that expresses the direction I'm thinking. Of course, you understand the code base much better than me. The tests are failing but the difference in my output and what the tests expect is not that much. Can you see my code and help me out? Try console logging what my output is in the injectPartial function in util.js

some local testing should help you. I think the major issue right now is that " , ' , & and other unicode characters are being serialised as & and < etc.

[sudo-vaibhav]

in some examples, you haven't specified template filename, but still the partial insertion works. So the readme says that this defaults to index.html, but I did not find the index.html either in the directory, does the webpack HTML plugin generate a boilerplate HTML file in this case?

[colbyfayock]

yup! exactly. HTML Webpack Plugin by default will generate that index.html template. That's actually the ultimate goal here, to not have to use that file, but I still want to make sure it works even when someone does.

The hope is someone doesn't have to create and maintain an index.html file, instead, they only have to worry about managing the partials that get injected.

While you're digging around, feel free to update the docs to make that more clear :)

[sudo-vaibhav]

also where are you inserting the variables? the options object is never used in the inject partial

[sudo-vaibhav]

@colbyfayock I am glad to report that the partial injection is finally working as expected. I will add an example and test cases and you can check it out then.

[sudo-vaibhav]

After doing what we have done, do we really need to pay special attention to that meta tag use case exception in examples? We have changed the way we inject so that shouldn't matter as it did before. I don't understand if it's important to keep it in tests and examples.

[colbyfayock]

Yay thats awesome that you got things working

Good question about the meta tag. so the goal with the meta tag snippet in the code is that we want make sure we inject any of the partials AFTER the meta charset tag, as if im not mistaken, there could be issues loading the page and / or scripts if not loaded that way https://www.w3.org/International/questions/qa-html-encoding-declarations

I think that might be something we need to additionally account for in the code that's no longer there in the pull request right?

[sudo-vaibhav]

I'll have a look into the meta tag issue

[tarponjargon]

+1 on this feature. One nice workaround I've found is using custom html tags like:

<header-include></header-include>

and replace like:

	{
		path: "./src/partials/header.html",
		template_filename: "*",
		location: "header-include",
		priority: "replace",
	},

That way it's declarative in the html that "PARTIAL GOES HERE", without having to write a comment. Similar traditional include syntax (like PHP) or even Vue Components.

You also don't need to worry about your partial having a parent ("div-itis" i guess)

This is a really nice plugin. Glad I found it. Thanks for your work!