Skip to content

Laravel Mix extension to compile Twig templates to HTML

License

Notifications You must be signed in to change notification settings

webrgp/laravel-mix-twig

Repository files navigation

laravel-mix-twig

npm npm GitHub issues GitHub license

Laravel Mix extension to compile Twig templates to HTML

Usage

Install the extension:

npm install @webrgp/laravel-mix-twig --save-dev

Then require and configure the extension within your webpack.mix.js.

Simple configuration

const mix = require('laravel-mix')
require('@webrgp/laravel-mix-twig')

// mix.twig('your source folder', 'your dist or public folder', {your advance configuration})
mix.twig('src/templates', 'public')

Underscore to ignore

Files or folders prefixed with an underscore are ignored from html output. This is a handy feature for ignoring component and layout files.

Ignored files:
/_components/header.twig
/_layouts/base.twig
/_include.twig

Options

Name Type Default Description
files * string `` Paths to your twig source files (supports minimatch)
OR
An array of objects to pass to html-webpack-plugin
fileBase * string `` The base path to your template folder
options object {} Customizations options

* = Required

These are the folowing options you can pass:

Data

Set global variables like this:

mix.twig('src/templates', 'public', {
  data: {
    msg: 'Hello World'
  }
})

That will be available to all templates:

<h1>{{ msg }}<h1/>

Debug & Trace

Enables debug or trace info logging (defaults to false)

mix.twig('src/templates', 'public', {
  debug: true,
  trace: true
})

Functions

Custom functions can be added through { functions: [ [String, Callback] ] }

For example, a function that repeats a string could look like:

mix.twig('src/templates', 'public', {
  functions: [
    [
      'repeat',
      function (value, times) {
        return new Array(times + 1).join(value)
      }
    ]
  ]
})

And you can use it in a template like:

{{ repeat("_.", 10) }}
{# output: _._._._._._._._._._. #}

Filters

Custom filters can be added through { filters: [ [String, Callback] ] }

For example, if you wanted to add a filter that reversed words in a sentence, you could do the following:

mix.twig('src/templates', 'public', {
  filters: [
    [
      'backwords',
      function (stringValue) {
        return stringValue.split(' ').reverse().join(' ')
      }
    ]
  ]
})

Then, in your templates you can use:

{{ "a quick brown fox"|backwords }}
{# outputs: fox brown quick a #}

Custom filters with arguments are also supported:

mix.twig('src/templates', 'public', {
  filters: [
    [
      'catify',
      function (value, args) {
        return args.reduce(
          (newString, toCatify) => newString.replace(toCatify, 'cat'),
          value
        )
      }
    ]
  ]
})
{{ "the quick brown fox jumps over the lazy dog"|catify('fox', 'dog') }}
{# outputs: the quick brown cat jumps over the lazy cat #}

Extends Twig with new tags types

Custom tags can be added through { extend: [ function(Twig) ] } where the Twig argument is Twig.js's internal object. Read more here.

Formatting

You can format the rendered output by passing the format option with either minify, pretty or unstyled (default).

mix.twig('src/templates', 'public', {
  format: 'minify'
})

Built in helpers

For pratical purposes, I've included the following custom functions and filters that can be overwritten using the functions and filters options.

Name Description
mix The {{ mix(string) }} function returns the related entry in mix-manifest.json file.

About

Laravel Mix extension to compile Twig templates to HTML

Resources

License

Stars

Watchers

Forks

Packages

No packages published