search

webdiscus / html-bundler-webpack-plugin

Renders Eta, EJS, Handlebars, Nunjucks, Pug, Twig templates "out of the box". Uses HTML template as entry point. Resolves source files of scripts, styles, images in HTML. Supports for Vue.
ISC License
119 stars 12 forks source link

Commented out markup causes files to be included #41

Closed SteffenBlake closed 8 months ago

SteffenBlake commented 8 months ago

Current behaviour

Commented out markup on .ejs (and potential .html files by extension) are parsed as if they are not commented out.

Expected behaviour

Commented out markup should be ignored by the bundler for treeshaking, and should not cause script/style references to be processed and compiled if they are inside of comments.

Reproduction Example

https://github.com/SteffenBlake/html-bundler-webpack-plugin-bug-examples/blob/29131635a37f9be1bd0e9187734d609d3178da99/src/views/home.ejs#L4

If you comment out the line like so:

<!-- <script src="./home.js" defer="defer"></script> -->

The Bundler will still pickup the js file and parse it and produce it as an output in the /dist folder.

Environment

SteffenBlake commented 8 months ago

I will note, this may not be an issues with this specific plugin and could very well be something upstream or downstream, but I thought since I was adding some tickets I would include one for this behavior, just in case it might be solvable, thanks for your time!

webdiscus commented 8 months ago

Hello @SteffenBlake,

thanks for the issue.

Yes, I know. It is not a bug, it is the "feature". In the plugin is used very fast and simple parser of references in tag attributes. Determining whether a tag is commented out is a complex and slow operation.

Workaround

To disable parsing of an default attribute, just add to the attribute name a prefix, e.g. src -> x-src:

<!-- <script x-src="./home.js" defer="defer"></script> -->

I know it's not an elegant solution to keep both the comment tag and the rename attribute in mind. But it works. It is so indeed.

See please the default attributes.

SteffenBlake commented 8 months ago

Works for me!

webdiscus commented 2 months ago

Hello @SteffenBlake

I found a solution to commented out one or more tags without resolving in attributes.

By defaults is used the Eta templating engine, therefore you can use the templating comments <%/* ... */%>:

<html>
  <head>
    <title>Test</title>
    <%/* <link rel="stylesheet href="./style.scss" /> Single line comment w/o resolving */%>
  </head>
  <body>
    <h1>Hello World!</h1>
    <%/*
      Multi line comment w/o resolving
      <img src="./image1.png" />
      <img src="./image2.png" />
    */%>
  </body>
</html>

Note

If you use a templating engine then should be used engine specific comment