mde / ejs

Embedded JavaScript templates -- http://ejs.co
Apache License 2.0
7.66k stars 834 forks source link

Client True includes are not getting imports recursively #746

Open kylecribbs opened 10 months ago

kylecribbs commented 10 months ago
let data = {}
let str = "<%= include('./src/main/resources/ejs_templates/imports/imports.ejs');%>";
var fn = ejs.compile(str, {client:true});

var rendered = fn(data, null, function(path, d){
    // include callback logic
    var includedTemplate = fileReader.test3(path);
    print(includedTemplate)
    return includedTemplate;
}, null);

imports.ejs

<%= include('./src/main/resources/ejs_templates/list/list-view.ejs');%>
<script type="text/javascript" src="/js/bootstrap/bootstrap.bundle.min.js"></script>

<link href="/css/custom-ui/header.css" rel="stylesheet">
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="stylesheet" src="/css/bootstrap/select/bootstrap-select.min.css">
<script type="text/javascript" src="/js/bootstrap/select/bootstrap-select.min.js"></script>

<script type="text/javascript" src="/js/ag-grid/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" src="/ag-grid/ag-grid.css">
<link rel="stylesheet" src="/css/ag-grid/ag-theme-alpine.css">

<script src="/js/ckeditor/inspector.js"></script>
<script src="/js/popper/popper.min.js"></script>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/monaco/vs/loader.js"></script>

output is:

<%= include('./src/main/resources/ejs_templates/list/list-view.ejs');%>
<script type="text/javascript" src="/js/bootstrap/bootstrap.bundle.min.js"></script>

<link href="/css/custom-ui/header.css" rel="stylesheet">
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="stylesheet" src="/css/bootstrap/select/bootstrap-select.min.css">
<script type="text/javascript" src="/js/bootstrap/select/bootstrap-select.min.js"></script>

<script type="text/javascript" src="/js/ag-grid/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" src="/ag-grid/ag-grid.css">
<link rel="stylesheet" src="/css/ag-grid/ag-theme-alpine.css">

<script src="/js/ckeditor/inspector.js"></script>
<script src="/js/popper/popper.min.js"></script>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/monaco/vs/loader.js"></script>
eMTyMe commented 4 months ago

The problem very likely lies with the ejs tags you are using. This is actually one of the things mentioned in the documentation. The correct use of include requires the raw output tag <%-, or else the HTML might double escape.

<%- include('./src/main/resources/ejs_templates/imports/imports.ejs');%>

EDIT: ok I also just saw that they have it in the docs like so

let str = "Hello <%= include('file', {person: 'John'}); %>",
      fn = ejs.compile(str, {client: true});

fn(data, null, function(path, d){ // include callback
  // path -> 'file'
  // d -> {person: 'John'}
  // Put your code here
  // Return the contents of file as a string
}); // returns rendered string

but I guess it's dependent on what is inside the included file, <%- for html and '<%=' for just ejs files? Absolutely not sure on this, needs some testing.