GithubHelp home page GithubHelp logo

twig-loader's Introduction

twig-loader Build Status

Webpack loader for compiling Twig.js templates. This loader will allow you to require Twig.js views to your code.

Installation

npm install twig-loader

Usage

Webpack 2 and later

Documentation: Using loaders

module.exports = {
  //...

  module: {
    rules: [
      {
        test: /\.twig$/,
        use: {
          loader: 'twig-loader',
          options: {
              // See options section below
          },
        }
      }
    ]
  },

  node: {
      fs: "empty" // avoids error messages
  }
};

Webpack 1

Documentation: Using loaders

module.exports = {
    //...

    module: {
        rules: [
            {
                test: /\.twig$/,
                loader: "twig-loader",
                options: {
                    // See options section below
                },
            }
        ]
    },

    node: {
        fs: "empty" // avoids error messages
    }
};

Options

  • twigOptions: optional; a map of options to be passed through to Twig. Example: {autoescape: true}

Loading templates

{# File: dialog.html.twig #}
<p>{{title}}</p>
// File: app.js
var template = require("dialog.html.twig");
// => returns pre-compiled template as a function and automatically includes Twig.js to your project

var html = template({title: 'dialog title'});
// => Render the view with the given context

When you extend another view, it will also be added as a dependency. All twig functions that refer to additional templates are supported: import, include, extends & embed.

Dynamic templates and registering at runtime

twig-loader will only resolve static paths in your templates, according to your webpack configuration. When you want to use dynamic templates or aliases, they cannot be resolved by webpack, and will be left untouched in your template. It is up to you to make sure those templates are available in Twig at runtime by registering them yourself:

var twig = require('twig').twig
twig({
  id: 'your-custom-template-id,
  data: '<p>your template here</p>',
  allowInlineIncludes: true,
  rethrow: true
});

Or more advanced when using webpack.context:

var twig = require('twig').twig

var context = require.context('./templates/', true, /\.twig$/)
context.keys().forEach(key => {
  var template = context(key);
  twig({
    id: key, // key will be relative from `./templates/`
    data: template.tokens, // tokens are exported on the template function
    allowInlineIncludes: true,
    rethrow: true
  });
});

Changelog

0.4.1 / 2018-06-12

  • Upgrade mocha to fix security vulnerability warning

0.4.0 / 2018-05-17

  • Add ablity to pass options to twig (PR #39)

0.3.1 / 2017-11-08

  • Update to Twig.js 1.10, fixes #29

0.3.0 / 2017-02-19

  • replace full path with a hash and implement mapcache for id/path resolution, fixes #12

0.2.4 / 2016-12-29

0.2.3 / 2016-06-11

  • Improve watch operation (rebuilding of modules)
  • Refactoring so compiler and the loader are in seperate modules
  • Add Twig as peer dependency

0.2.2 / 2016-06-03

  • Add embed support
  • Update Twig.js version

0.2.1 / 2016-04-18

  • Improve import support (#8)
  • Rethrow exceptions when they occur during rendering to improve testing

0.2.0 / 2016-01-21

  • Add support for import statements (useful for Macro's)
  • Correctly resolve dependencies from include/import/extend statements with relative path support: [#3] and [#5]
  • CHANGE: No longer add the .twig file extension. After upgrading twig-loader, you may need to update your files and add .twig manually

twig-loader's People

Contributors

benjamminf avatar dependabot[bot] avatar dragorww avatar dubbs avatar holmey avatar krikke26 avatar mathieuzimmo avatar pmaeria avatar thanarie avatar tremby avatar webberig avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

twig-loader's Issues

how install this twig-loader?

doc like this:

npm i twig-loader

but i need install twig

npm i twig twig-loader

i try install for devDependencies, it work.

npm i twig twig-loader -D

i think doc should write right for install way.

How to use Namespacing with TwigJS in webpack ?

Hi,

I am facing a strange bug.

I try to use Express Webpack + + + HMR Twig .

I try to define a namespace like that :

app.set('twig options', {
    strict_variables: false,
    namespaces: { 'pmd': './src/views/' }
});

and then use in template as :

{% extends 'pmd::layout.html.twig' %}

But when the server is started I have to generate a module error with Twig file and correct it. And after that all wwork like a charm ...

From terminal :

➜  StarterPack git:(feature/SP-01) ✗ npm run server

> [email protected] server /Users/eplouvie/Projects/Labs/StarterPack
> node server.js

[BS] Proxying: http://localhost:9000
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://172.19.11.8:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://172.19.11.8:3001
 ------------------------------------
[BS] Watching files...
webpack built 8e3ee2f107e8e2989358 in 3810ms
Version: webpack 1.13.1
Time: 3810ms
                      Asset     Size  Chunks             Chunk Names
    ./assets/img/sample.jpg   355 kB          [emitted]
./assets/img/background.jpg  79.1 kB          [emitted]
             assets/main.js  1.06 MB       0  [emitted]  main
webpack: bundle is now VALID.
[BS] File changed: src/views/components/home/config.js
webpack: bundle is now INVALID.
webpack: wait until bundle finished: /
webpack building...
webpack built 6e8a6eeea1660c993edd in 1538ms
Version: webpack 1.13.1
Time: 1538ms
                               Asset      Size  Chunks             Chunk Names
             ./assets/img/sample.jpg    355 kB          [emitted]
         ./assets/img/background.jpg   79.1 kB          [emitted]
                      assets/main.js   1.75 MB       0             main
0.8e3ee2f107e8e2989358.hot-update.js    693 kB       0             main
8e3ee2f107e8e2989358.hot-update.json  36 bytes

ERROR in ./src/views/components/home/index.html.twig
Module not found: Error: Cannot resolve module 'pmd::layout.html.twig' in /Users/eplouvie/Projects/Labs/StarterPack/src/views/components/home
 @ ./src/views/components/home/index.html.twig 3:0-32
webpack: bundle is now VALID.
[BS] File changed: src/views/components/home/config.js
webpack: bundle is now INVALID.
webpack: wait until bundle finished: /
webpack building...
webpack built 28bee64d6516158bfb95 in 425ms
Version: webpack 1.13.1
Time: 425ms
                               Asset      Size  Chunks             Chunk Names
             ./assets/img/sample.jpg    355 kB
         ./assets/img/background.jpg   79.1 kB
                      assets/main.js   1.06 MB       0  [emitted]  main
8e3ee2f107e8e2989358.hot-update.json  35 bytes          [emitted]
webpack: bundle is now VALID.

I have try to force reload with :

bundler.plugin('done', function (stats) {
     browserSync.reload();
});

And with Express 3 or Nodemon.

So I think there a loading/init problem when using namespacing.

What can i do to make that properly ?

Thanks.

If needed, you can checkout all my project : https://github.com/ethyde/StarterPack/tree/feature/SP-01

Unable to include twig files outside project path

Problem/motivation

I would like to include twig files outside the project path, but currently it’s not possible, because twig resolves to wrong path with those files.

An example:
Root for project where I use twig-loader is /some/path/my_project.
I can import twig file from /some/path/my_project/templates/template.twig.
I can’t import twig file from /some/path/templates/template.twig and will get an error like:

ERROR in ../templates/template.twig
Module not found: Error: Can't resolve 'twig' in ‘/some/path/my_project’
 @ ../templates/template.twig 3:11-26
 …

Proposed resolution

Use stringifyRequest (https://github.com/webpack/loader-utils#stringifyrequest) from loader-utils to get path to twig in https://github.com/zimmo-be/twig-loader/blob/master/lib/loader.js#L33.

pass twig compile params

i use cross render twig (php and js).
in php twig by default enable autoescape, in twig.js it need enable.

i create fork witch path and use them.

How to add it params in twig-loader?

  1. i can make pr with my path
    or
  2. pass param from loader options and create pr

Rethrow exceptions

I'm having trouble writing tests because Twig is blackholing exceptions. Fortunately, there's an option rethrow that will do the trick. Need to figure out if I can make this configurable for BC reasons...

Does webpack 2 supported?

I want to migrate from gulp to webpack 2. Does twig-loader supports webpack 2 already?
Thank you.

Module build fails after updating to 0.5.0

After updating to 0.5.0 module builds fail with the following message:

    Module build failed (from ./node_modules/twig-loader/index.js):
    TypeError: Cannot read property 'context' of undefined
        at Object.module.exports (/app/user/node_modules/twig-loader/lib/loader.js:25:63)

Rendering not work

First problem is the really bad introductions. I have no idea, how I should implement, the app.js.

In my test, I import app.js in my index.js.

Is it possible, to create a demo and redescribe the render process? @webberig

TwigException: Unable to find template file <hash> using webpack resolve

Instead of using relative paths in includes in twig files we define a base path for resolving files in webpack resolve modules config.

Then we can write include 'path/to/file.twig' instead of '../../../file.twig' in one context and '../file.twig' in another context.

However, when doing this webpack build crash with following message:

ERROR in Template execution failed: TwigException: Unable to find template file 4a3a762861ed317664eb1c1814e583128a01b7c98ab3dff85c81c19f205b14e9138bcc288a085991f6f13a3fcc4eb883cd3e984abaa13f5353799ac8e3350bdb

ERROR in   Error: Unable to find template file 4a3a762861ed317664eb1c1814e583128a01b7c98ab3dff85c81c19f205b14e9138bcc288a085991f6f13a3fcc4e  b883cd3e984abaa13f5353799ac8e3350bdb


ERROR in Template execution failed: TwigException: Unable to find template file cf0210d582a43343c2e99ae79fb557adf71168a044b412308a365be5af4a9d32dc511b91d584bb547ab8f3da0453d19e2ba01ae3b47baa9dac9b45489aacb543

ERROR in   Error: Unable to find template file cf0210d582a43343c2e99ae79fb557adf71168a044b412308a365be5af4a9d32dc511b91d584bb547ab8f3da0453  d19e2ba01ae3b47baa9dac9b45489aacb543

Any ideas?

{% include %} inside {% set %} does not work :(

I'm using Storybook.js + Twig.js (this setup: https://github.com/JungleMinds/JM_Basic-Twig-Project)

And {% include %} inside {% set %} does not work at all:

{% set content %}
  {% include '../../gallery/gallery-preview.twig' %}
{% endset %}

See source here: https://github.com/highweb/bricks-examples/blob/7536ee4ac057c0a6ff7e005d01a6682d086e00ed/gallery-carousel/gallery-carousel.twig#L16

Getting "Unable to find template file ../../gallery/gallery-preview.twig" error.

Any suggestions/ideas? Is it something related to #26?

Disable caching

Hi,

I'm trying to build some pages with webpack and twig-loader. However, webpack watch mode does not do a proper job. After messing around, I found out that all files are emitted correctly, but the payload is the same. I think it happens because of twig's cache and I would like to disable it, for development purpose. How can I achieve that? From the sources, it's not obvious to me.

Thanks.

support resolve.alias

in webpack.config.js

module.exports = {
...
    resolve: {
        alias: {
            '@app': 'frontend',
        },
    }
...
}
//test.js
var tpl require('@app/app/test.twig');
console.log(tpl());

it work if twig file not include '@app';

{# test.twig #}
{% include '@app/app/test2.twig' %}

in build.js

/***/ 79:
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(80);

    var twig = __webpack_require__(81).twig,
        template = twig({id:"/Users/DragorWW/frontend/app/test.twig", 
data:[{"type":"raw","value":"as "},{"type":"logic","token":{"type":"Twig.logic.type.include","only":false,"includeMissing":false,"stack":[
{"type":"Twig.expression.type.string","value":"/Users/DragorWW/@app/app/test2.twig"}]}
}], allowInlineIncludes: true});

    module.exports = function(context) { return template.render(context); }

/***/ },

/***/ 80:
/***/ function(module, exports, __webpack_require__) {

    var twig = __webpack_require__(81).twig,
        template = twig({id:"/Users/DragorWW/frontend/app/test2.twig", data:[{"type":"raw","value":"asddd"}], allowInlineIncludes: true});

    module.exports = function(context) { return template.render(context); }

/***/ },

not safe use absolute path as id template

after compile twig, in js id contain my absolute path file, it not safe

twig({id:"/var/www/project/frontend/components/block/template.twig" ...

twig-loader index.js issue string

var id = require.resolve(this.resource)

Resolve paths

I get an error when I want to extend a template file from another directory.

Folder structure:

templates
↳ layouts
  ↳ _base.twig
↳ home
  ↳ _entry.twig

Content for templates/home/_entry.twig:

{% extends 'layouts/_base' %}

{% block content %}
{% endblock %}

Error Message:

ERROR in ./templates/home/_entry.twig (./node_modules/html-webpack-plugin/lib/loader.js!./templates/home/_entry.twig)
Module not found: Error: Can't resolve 'layouts/_base' in '/Users/user/Projects/noyb/templates/home' @ ./templates/home/_entry.twig (./node_modules/html-webpack-plugin/lib/loader.js!./templates/home/_entry.twig) 1:0-24

Craft CMS (which uses Twig) does not complain about my setup.

I would love to keep my twig files untouched. Is there any way that twig-loader resolves all files inside a default_path (even without using namespaces)

Base option in loader's config

It would be nice to have base option in loader's config in order to be able to set twig templates base path. This request is similar to this in twig.js.

Work with HtmlWebpackPlugin

Hello,
I try to extract a dist index.html file (to use with critical webpack after), with HtmlWebpackPlugin and twig-loader.
My config :

 module: {
        loaders: [
            { test: /\.twig$/, loader: "twig-loader" }
...
plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve('./app/Resources/views/default/') + '/index.html.twig',
            filename: path.resolve('./web/dist/') + '/index.html',
            inject: true
        }),

It seem twig-loader does not do the thing, because in my generated index.html I've alway the extends, blocks, assets, .. tags.

Any ideas ?

Thanks,
Mathieu

Look into include

Hi,

I was thinking of looking into supporting include and import. Is it anything blocking these features?

Error while including twig-loader in Laravel Webpack (mix)

The error message

error  in ./resources/assets/js/admin/htk/message.twig

Module parse failed: /Users/jurriendokter/Development/holland-toolkit/resources/assets/js/admin/htk/message.twig Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <div class="row large-12 columns">
|     <div class="callout {{ type }}" data-closable>
|         <h6>{{ title }}</h6>

 @ ./resources/assets/js/admin/htk/messages.js 2:17-42
 @ ./resources/assets/js/admin/holland-toolkit.js
 @ ./resources/assets/js/admin/bootstrap.js
 @ ./resources/assets/js/admin.js
 @ multi ./resources/assets/js/admin.js

My config:

mix.webpackConfig({
        module: {
            loaders: [
                { test: /\.twig$/, loader: 'twig-loader' }
            ]
        },
        node: {
            fs: "empty"
        }
    })
   // ... some js / sass calls
   .version()
;

The line in question: const messageTpl = require('./message.twig');

I have googled, but yet to find an answer, could you perhaps aid me?

I did try const messageTpl = require('twig!./message.twig'); but that crashes my build with the following message.

                       throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
                        ^

Error: Module '/Users/jurriendokter/Development/holland-toolkit/node_modules/twig/twig.min.js' is not a loader (must have normal or pitch function)
    at loadLoader (/Users/jurriendokter/Development/holland-toolkit/node_modules/loader-runner/lib/loadLoader.js:35:10)
    at iteratePitchingLoaders (/Users/jurriendokter/Development/holland-toolkit/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users/jurriendokter/Development/holland-toolkit/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/NormalModule.js:179:3)
    at NormalModule.build (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/NormalModule.js:268:15)
    at Compilation.buildModule (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/Compilation.js:142:10)
    at factoryCallback (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/Compilation.js:325:11)
    at factory (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/NormalModuleFactory.js:253:5)
    at applyPluginsAsyncWaterfall (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/NormalModuleFactory.js:99:14)
    at /Users/jurriendokter/Development/holland-toolkit/node_modules/tapable/lib/Tapable.js:204:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/jurriendokter/Development/holland-toolkit/node_modules/tapable/lib/Tapable.js:208:13)
    at resolver (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/NormalModuleFactory.js:74:11)
    at process.nextTick (/Users/jurriendokter/Development/holland-toolkit/node_modules/webpack/lib/NormalModuleFactory.js:205:8)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

Filters and functions

Right now, i'm trying add twig on my vue.js environment, but i see myself stuck on this fog.
Can i adding some filters or functions like bellow

{{ var|filter }} 
{{ function(var) }} 

Spaceless tag deprecated.

The spaceless tag in "node_modules/twig-loader/test/fixtures/from/template.html.twig" at line 19 is deprecated since Twig 2.7, use the "spaceless" filter with the "apply" tag instead.

Support custom tag

I use my custom tag, how to extend twig-loader compiler, for add custom parser ?

twig.twig

{% mytag 'test1' %}
   {% include 'asd2' %}
{% endmytag %}

Dynamic include and pre-register templates

TLDR;

  • When using dynamic includes the loader breaks --- could ignore it and leave the original value.
  • The loader always tries to replace and resolve the passed value for include (even when it cannot be resolved by webpack / doesn't exist on disk), so when you want to use pre-registered templates (at runtime), Twig cannot find them and require will give an error --- could check webpack resolve and only replace/require when can be resolved

Dynamic includes

I've been trying to find a way to make dynamic includes work.

{% for block in blocks %}
  {% include './blocks/' ~ block.name ~ '.twig' %}
  {% include block.name %}
{% endfor %}

First of all, the above fails horribly since an undefined value is passed here (binary and dynamic tokens), and will later error if that value is passed in JSON.parse.

The current code only can deal with a single string value as include path.

If you look at this from the webpack point of view it sort of makes sense. It's not really possible to require and bundle a dynamic path, since that path is only know during runtime. For this you would need to create a require context (that bundles all available matches to the pattern), but that only works when you manually pass that dynamic string in a webpack.context line, and that is also not possible when working with dynamic strings for the tokens. Also it might complicate things even more.

Pre-register templates

So after that I started looking into how templates are resolved, which is by creating a hash of the filepath, so the registered template can be found later when it is included.
This means that if I know the 'dynamic' values that will come out of the expression beforehand, I could register twig templates manually (by creating a webpack context myself), so they are all available at runtime.

E.g., if I would execute this code before I would render my main template:

var template = twig({
	id: './blocks/block1/twig',
	data: 'foo bar',
	allowInlineIncludes: true,
	rethrow: true
});

And the block.name in the example above would be "block1", the include {% include './blocks/' ~ block.name ~ '.twig' %} would resolve at runtime, and the template would be available.

So I think that if it would just ignore dynamic values and let them be handled at runtime, the above scenario could work.

Use webpack resolve instead of path.resolve

Another thing, when we are passing strings, I think we could improve that scenario case as well.
Currently it's making use of path.resolve, but instead if we would pass the loaderApi from the loader.js to the compiler instance (by using a factory function), it could use the resolve method on that:

loaderApi.resolve(loaderApi.context, token.value, function (err, result) {
  // push to includes array & update token value
}

Now only paths that can be resolved will be added as requires, so unknown paths will not throw runtime require errors, and left to be dealt by Twig itself . This allows us to register any named template and use that string in an include.

Async loader

Implementing this change also requires the compiler to be async (due to the resolve being async, the sync version will throw webpack errors when the webpack filesystem is not in sync), but that's not really possible.
I looked at how the handlebars-loader handles this, and they seem to do a multipass compilation until all the resolves are completed.

We might be able to do the same thing if we keep a map of all the resolved paths based on their token.value. On the first pass we could start the resolve and keep the original token value, and on the second pass it would ignore the hash-like values it already replaced on the first pass, and update the token values with the resolved values from the map.

Final words

Please let me know how you feel about the above, and if I'm on the right track here. Would it be useful to start a PR with a (reference) implementation, or a waste of time if will not be used?

In #20 it was mentioned that it's better to use the webpack resolve for things like namespace paths, but I think the above is something different (since it would need totally skip the require in some cases and leave the original value).

Filtre Trans not working

Hello, i'm using twig-loader, and i need to use translation in my twig view, but i got this message error
message: 'Unable to find filter trans', name: 'TwigException', type: 'TwigException'

<p>{{ title }}</p> <p>{{ 'yes' | trans({}, 'global') }}</p>

did you have the same probleme ?

How to pass rendered output through to another loader?

I want to render a template via the twig-loader and then pass the HTML generated through to html-loader so that any referenced images are imported (and so passed through my other loaders, such as url-loader), then output the result to a file. I've tried various combinations of extract-loader, apply-loader, twig-loader, html-loader, file-loader, and html-webpack-plugin but can't get anything working. The error messages are incredibly cryptic.

I don't mind if the twig file is an entry point or if it's referenced via html-webpack-plugin, or I just import the various page templates from a JS entry point. In any of those cases I'd need some way to pass context data to each template.

It looks like this was previously asked elsewhere but with no response.

Unable to include twig component

When I try to include twig component I receive the following error:

Unable to find template file @molecules/inline/inline.twig. TypeError: fs.statSync is not a function

    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "webpack": "^4",
    "webpack-cli": "^4.7.2",
    "@storybook/react": "^6.3.0-rc.11",

web pack config :

use: [
          {
            loader: 'twig-loader',
            options: {
              twigOptions: {
                allowInlineIncludes: true,
                namespaces: {
                  icons: path.resolve(__dirname, 'images/icons'),
                  base: path.resolve(__dirname, 'components/00-base'),
                  atoms: path.resolve(__dirname, 'components/01-atoms'),
                  molecules: path.resolve(__dirname, 'components/02-molecules'),
                  organisms: path.resolve(__dirname, 'components/03-organisms'),
                  templates: path.resolve(__dirname, 'components/04-templates'),
                },
              },
            },
          },
        ],

Combine with other loaders

First of all, I really (really!) like your loader, and if I'm able to overcome this issue I'll have a team of 5 developers happy.

So, this loader transforms Twig files to a js function, that you have to call to obtain the html. And what should be extra nice is something that transforms from twig to html (as I understood that a twig loader would do). But, in that case, given how it's implemented right now, you miss the oportunity to pass Twig
variables to it.

What I propose, and tell me how that sounds, is being able to set those variables directly from the loader config, like...

//webpack.config.js

//...
module: {
  loaders: [
    test: /\.twig$/,
    loader: 'twig'
  ]
},
twigLoader: {
  variables: {
    var1: "value 1",
    var2: "value 2"
  }
}

(I proposed this because the sassLoader has a config option that works like this, but any alternative similar to that is good enough.

That will allow to pipe the loader results to the html loader, or a Plugin that generates an Html file (which is what I'm looking for).

If, there is a better way to achieve this result, please, I'm a backend dev who's trying to figure out the frontend world (and it's a little overwhelming, haha).

How to use with webpack encore, set directory for templates

I've added the following to webpack.config.js:

Encore
    .addLoader({
        test: /\.twig$/,
        use: {
            loader: 'twig-loader',
            options: {
                // See options section below
            },
        },
    })

And the example code to app.js:

const template = require('work.html.twig');
console.log(template);
const html = template({title: 'dialog title'});

I'm getting the error that work.html.twig cannot be found, so I figure I'm missing something in 'context' which would provide a path. Where should the .html.twig files go?

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.