dc7290 / template-ejs-loader

ejs-loader with webpack5 support. Chain it to html-loader and use it with html-webpack-plugin.
MIT License
24 stars 3 forks source link

it is not fully supported when passing variable as parameter to ejs include function #16

Closed mizok closed 2 years ago

mizok commented 2 years ago

Describe the bug

I am not sure if this should be regarded as a bug. I found this problem last week, this happened when I used include within a for or forEach loop in ejs, just like this:

<%
  const fs = require('fs');
   fs.readdirSync('./src/ejs-partial').forEach((filename)=>{ %>

   <% const filePath = `src/${filename}`%>

   <%- include(filePath)%>

  <%
   }) 
%>

the problem was that webpack devserver did not recognize those partial ejs files as dependency, and I thought I could tell the reason, bc we were actually using regex to detect all include function inside ejs files, which means passing variable to include function is not fully supported.

But I still have no idea how to fix this..., I saw there was a includer option in the ejs npm package, which is capable of customize the original include function , but I am not sure If using includer is a good way to go. (gonna need a test for this I guess :( )

includer Custom function to handle EJS includes, receives (originalPath, parsedPath) parameters, where originalPath is the path in include as-is and parsedPath is the previously resolved path. Should return an object { filename, template }, you may return only one of the properties, where filename is the final parsed path and template is the included content.

https://www.npmjs.com/package/ejs

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
    1. Click on '....'
  2. Scroll down to '....'
  3. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Version

I guess it is all version :/

Additional context Add any other context about the problem here.

mizok commented 2 years ago

The problem is that it is not supported when using variable in include function in ejs.

@dc7290 Obviously the reason is bc we are using regex to get the included files, but I am not sure if there is any way for this condition.

dc7290 commented 2 years ago

@mizok This is a difficult problem.

This is because we are using a combination of ejs and webpack mechanisms, and it is difficult to incorporate the dependencies that ejs internals recognize.

For now, I came up with the following solution.

  1. Add a function that allows users to add dependencies to the functions available in the ejs file.
  2. When you use a variable in the include path, register it with that function.

We think the drawback is that it forces the user to do a somewhat tedious task.

mizok commented 2 years ago
  1. Add a function that allows users to add dependencies to the functions available in the ejs file.
  2. When you use a variable in the include path, register it with that function.

It is tedious to me... you are right.