moyus / laravel-mix-nunjucks

Laravel Mix extension to compile Nunjucks templates

laravel-mix-nunjucks

Laravel Mix extension to compile Nunjucks templates with markdown and front-matter support

Install

npm install laravel-mix-nunjucks --save-dev

Features

This extension performs following tasks

• Collect files name not start with _ or under _* directory
• Extract front-matter data and assigns to a page variable
• If file is markdown, render markdown first
• Finally, render nunjucks to html

Usage

const mix = require('laravel-mix')
require('laravel-mix-nunjucks')

mix.njk('resources/views/', 'public/', {
  // ext: '.html',
  // data: {},
  // marked: null,
  // envOptions: null,
  // manageEnv: (nunjucks) => {},
})

• ext - Extension for compiled templates, pass null or empty string if yo don't want any extension
• data - Data passed to template
• block - Name of content block in your parent template
• marked - Custom options for marked
• envOptions - These are options provided for nunjucks Environment. More info here.
• manageEnv - Hook for managing environment before compilation. Useful for adding custom filters, globals, etc

For more info about nunjucks, check https://mozilla.github.io/nunjucks/api.html

laravel-mix-nunjucks's Issues

I had a few problems when using your extension

Проблема была в функции run(), а именно в формате пути. Два последних она возвращала с двумя косыми чертами.

Помогло дублирование replace, как у первой строки

Path problems on Windows

When using Windows, Nunjuck files will not compile unless in "watch" mode.
I tracked down the issue to be caused by the globby package which does not match for windows paths with backslashes.

Using this.from.path().replace(/\\/g, '/') as pattern for globby, will work as a workaround until the folks at globby fix it on their end.

What do you think?

Files in 'hidden' directories are still rendered

Hello,

I ran into the issue that your extension also rendered files within a _* directory, and I guess that's an Windows only (with node.js v18.0.0) issue due to the path separator \ passed to globby. At least I could fix it by adding the path replacement regex, on the patterns, on the remaining 2 ones as well:

    const patterns = [
      this.from.path().replace(/\\/g, '/'),
      "!" + path.posix.join(this.base.replace(/\\/g, '/'), `**/_**/*`),
      "!" + path.posix.join(this.base.replace(/\\/g, '/'), `**/_*`),
    ];

I guess this should be better placed directly in the constructor, where this.base gets assigned.

Thanks for your extension.

File watching broken in 1.2.0

There is another problem in ver. 1.2.0:

ReferenceError: destFile is not defined at NunjucksTask.onChange

Canging
destFile.delete(); to distFile.delete(); seems to fix it.
Did not test directories though.

Files versioning not working in production mode

Hi,

I had some issues on my project using mix.version() and {% mix '/js/app.js' %}.
The versioning was working fine on dev mode ('mix watch'), but not on production ('npx mix --production').

One of my colleague figured out that downgrading the laravel-mix-nunjucks version from 1.1.0 to 0.3.0 would solved the issue, and make the versioning work for both dev and production mode.

So there's probably something in the newest versions of your package that's preventing files versioning from working correctly, could you please have a look at it?

Thank you!

mix.postCss files trigger njk compilation incrementally on save

Hey there !

Looks like each css file save (inside mix.postCss) compiles nunjucks * how many times you saved.

1st save = 1 compile

2nd save = 2 compiles (same njk gets compiled 2 times)

3rd save = 3 compiles (same njk gets compiled 3 times)

and so on.

I first noticed it using tailwind, but it's reproducible with a plain css.
I added inside tests folder.
(master...sueharaluke:laravel-mix-nunjucks:master)
Steps to reproduce:

• npm run test:watch
• Save /tests/css/style.css

For now, I downgraded to version 1.2.0-beta.1 (which didn't have this problem, but compiles _partials to html).

Thanks !

Includes not triggering compile

Looks like the latest version 1.2.3 isn't compiling when only includes/partials change.
As a work around, I'm using [email protected] that was suggested in issue #8.
But using underscore on directory name is not enough, I need to use on the file name as well, otherwise includes/partials also get compiled as html files.

Just a heads up.
Thanks for the plugin !

Files not compiling

Hi,

The files are not compiling if a partial is change. Can you please look into this.

Thanks in advance and thanks for great extension

laravel-mix-nunjucks runs too late

I'm using a html minification plugin minify-html-webpack-plugin as well, but unfortunately it couldn't minify the generated html files because laravel-mix-nunjucks haven't finsihed the process yet. We digged into the code, and noticed that in RenderNunjucksTask.js there is a this.renderAll = debounce(this.renderAll) which causes the delay.
So by modifying these lines it started to work:

class RenderNunjucksTask extends Task {
  constructor (data) {
    super(data);

    this.options = Object.assign({
      ext: '.html',
      data: {},
      block: 'content',
      marked: null,
      envOptions: null,
      manageEnv: null,
    }, data.options);

    // this.renderAll = debounce(this.renderAll);

and remogin async and await

render(src, dest) {
    //await Promise.resolve();

Can I have a change request for this or any other solution?

How manageEnv works?

I need to pass 'development' or 'production' to environment, like mix.inProduction() ? 'production' : 'development'. But don't know how that works with manageEnv.

I have something like this (the mentioned part is wrong of course):

mix.njk(paths.src.templates, (mix.inProduction() ? paths.dist.base : paths.temp.base), {
        ext: '.html',
        data: require('./data.json'),
        envOptions: {
            lstripBlocks: true,
            autoescape: true,
            trimBlocks: true
        },
        manageEnv: {
            'environment': mix.inProduction() ? 'production' : 'development'
        }
    });