GithubHelp home page GithubHelp logo

require Macro does nothing about nunjucks-loader HOT 6 CLOSED

at0g avatar at0g commented on September 21, 2024
require Macro does nothing

from nunjucks-loader.

Comments (6)

at0g avatar at0g commented on September 21, 2024

This is expected behaviour - try importing and using the macro within a nunjucks template, then import and render the template in javascript.

eg.

{# filename: template-using-macro.njk #}
{% import './macro.njk' as macro %}

{{ macro.toggler(expanded=true, controlsId: 'nav') }}

// filename: app.js
import template from './template-using-macro.njk';

const html = template.render();
console.log(html)

from nunjucks-loader.

jamesgorrie avatar jamesgorrie commented on September 21, 2024

Problem is I want the JS to be able to create macros...

from nunjucks-loader.

at0g avatar at0g commented on September 21, 2024

Problem is I want the JS to be able to create macros

create or call? I presume call right?

if you want to call macro's from js, simple answer is you can't - AFAIK nunjucks does not support this - the macros need to be imported into a nunjucks template and then the template is rendered.

eg.

var app = express();

nunjucks.configure('views', {
    autoescape: true,
    express: app
});

app.get('/', function(req, res) {
    res.render('macro.njk'); // this won't work
});

If what you want is a callable template function that takes arguments, why not just use a template and pass the data context? You can then import and render the template from js.

from nunjucks-loader.

jamesgorrie avatar jamesgorrie commented on September 21, 2024

create or call? I presume call right?

Right.

Problem being that you can't do this on the client and the server with the same code, removing any niceness of being isomorphic.

e.g.

{# template-with-macro.njk #}
<button>
  {% if (expanded) %}
  <span>Hide content</span>
  {% endif %}
  {% if (!expanded) %}
  <span>Show content</span>
  {% endif %}
</button>

With the JS API, we're good:

include template from 'template-with-macro.njk';

// Pseudo code
onEvent((ev) => {
  template.render({ expanded: ev.expanded });
});

But then I can't call that template file in the HTML template:

<html><body>
{% include "template-with-macro.njk" %}
</body></html>

Although reading about it - it's probably more something to do with Nunjucks' include / macro pattern - as people are talking about here - than with the loader.

from nunjucks-loader.

jamesgorrie avatar jamesgorrie commented on September 21, 2024

Supposing this isn't an issue with the loader.

from nunjucks-loader.

daniel-thisnow avatar daniel-thisnow commented on September 21, 2024

i at least got as far as knowing my problem may be fixed by import & macro.... but I'm still a long way away

from nunjucks-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.