Related "Quick tip #002": Reason why "jsmin" is not renamable and why it is a filter and not a transform

[ssgstarter]

May I ask the following two questions related to "Quick tip #2":

What is the reason for why "jsmin" is not renameable?
I had tried but it was broken afterwards.

Why is the solution not a transform like "htmlmin" but a filter?
Is it possible to make a comparison between filters and transforms for better understanding?

[kleinfreund]

1. The name of the filter can be chosen. An example:

   const UglifyJS = require("uglify-js");
   eleventyConfig.addFilter("strawberry", function(code) {
       let minified = UglifyJS.minify(code);
       if( minified.error ) {
           console.log("UglifyJS error: ", minified.error);
           return code;
       }
   
       return minified.code;
   });

   Now, the filter is called strawberry.

   <script>{{ js | strawberry | safe }}</script>

2. The difference between a filter and a transform is this: Filters work inside templates to transform any kind of string and transforms work on the output of templates (e.g. HTML files). The name filter is not good because no filtering is done. So both filters and transforms transform their input. However, transforms work on complete files (e.g. HTML files like the htmlmin transform) and filters work on smaller pieces of content (e.g. the content of a script tag like in the example above).

   Note that filters are a concept specific to templating languages like Liquid or Nunjucks while transforms are an Eleventy feature.

[ssgstarter]

Many thanks for the hints.

Related 1): I replaced the name the same way but it crashed then.

Related 2): I see. It seems to be a question of timing which to choose. Then, is it possible to transform a JS file with a transform because it is also a complete file?

[kleinfreund]

Regarding 1: Is there an error? This particular piece of code requires that you install the NPM package uglify-js. Maybe that’s what’s missing?

Regarding 2: Kind of. Eleventy’s transforms work on the output of templates; however, JavaScript files are most likely not treated as templates in your projects. Most people have them in some directory (e.g js/) and copy them to the output as passthrough copies.

[ssgstarter]

Regarding 1)
With the code of "quick tip #2" and no further installation it worked.
After renaming and explicit installation it also works now. Great but why?

Regarding 2)
In my case, I do not copy the JS files but I concatenate and minify them as mentioned in the "QUICK TIP #5". That works perfekt.
Because of the concatenation the JS file is not finished and needs a filter and not a transform´, I guess. Am I right?

[kleinfreund]

Because of the concatenation the JS file is not finished and needs a filter and not a transform´, I guess. Am I right?

Exactly. With that technique, you’re pulling the CSS files into a template where using filter is appropriate.

After renaming and explicit installation it also works now. Great but why?

Are you wondering why you have to explicitly install that package? If so, that’s how NPM packages work in general. Eleventy itself is an NPM package and can only be used if either install it globally on your computer or locally into your project.

Or do you have a different question? Let me know. :)

[ssgstarter]

Thank you very much, @kleinfreund

The reason why I am wondering is that uglify-js worked before renaming and without having installed it.

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

Thank you @kleinfreund!