Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

underscore-template-loader

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

underscore-template-loader - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

test/templates/dynamic-attribute-with-root.html
test/templates/dynamic-attribute.html
test/templates/output/dynamic-attribute-with-root.txt
test/templates/output/dynamic-attribute.txt

110

lib/attributeParser.js

@@ -6,2 +6,35 @@ var path = require('path');

try {
var _ = require('underscore');
} catch (e) {
var _ = require('lodash');
}
// Reminder: path.isAbsolute is not available in 0.10.x
var pathIsAbsolute = function (attrValue) {
return path.resolve(attrValue) == path.normalize(attrValue);
};
// Checks whether a string contains a template expression
var isTemplate = function (content) {
// Test against regex list
var interpolateTest = _.templateSettings.interpolate.test(content);
if (interpolateTest) {
_.templateSettings.interpolate.lastIndex = 0;
return true;
}
var evaluateTest = _.templateSettings.evaluate.test(content);
if (evaluateTest) {
_.templateSettings.evaluate.lastIndex = 0;
return true;
}
var escapeTest = _.templateSettings.escape.test(content);
_.templateSettings.escape.lastIndex = 0;
return escapeTest;
};
// AttributeContext class

@@ -24,32 +57,41 @@ var AttributeContext = function (isRelevantTagAttr, usid, root) {

this.matches.reverse();
this.matches.forEach(function (match) {
// Ignore if path is absolute and no root path has been defined
// Reminder: path.isAbsolute is not available in 0.10.x
if ((path.resolve(match.value) == path.normalize(match.value)) && self.root === undefined) {
return;
}
if (isTemplate(match.value)) {
// Replate template if a "root" option has been defined
if (pathIsAbsolute(match.value) && self.root != undefined) {
var x = content.pop();
content.push(x.substr(match.start + match.length));
content.push(match.expression);
content.push(x.substr(0, match.start));
}
} else {
// Ignore if path is absolute and no root path has been defined
if (pathIsAbsolute(match.value) && self.root === undefined) {
return;
}
// Ignore if is a URL
if (!loaderUtils.isUrlRequest(match.value, self.root)) {
return;
}
// Ignore if is a URL
if (!loaderUtils.isUrlRequest(match.value, self.root)) {
return;
}
var uri = url.parse(match.value);
if (uri.hash !== null && uri.hash !== undefined) {
uri.hash = null;
match.value = uri.format();
match.length = match.value.length;
}
var uri = url.parse(match.value);
if (uri.hash !== null && uri.hash !== undefined) {
uri.hash = null;
match.value = uri.format();
match.length = match.value.length;
}
do {
var ident = self.ident();
} while (self.data[ident]);
do {
var ident = self.ident();
} while (self.data[ident]);
self.data[ident] = match;
self.data[ident] = match;
var x = content.pop();
content.push(x.substr(match.start + match.length));
content.push(ident);
content.push(x.substr(0, match.start));
var x = content.pop();
content.push(x.substr(match.start + match.length));
content.push(ident);
content.push(x.substr(0, match.start));
}
});

@@ -64,2 +106,3 @@

var self = this;
return content.replace(regex, function (match) {

@@ -69,3 +112,6 @@ if (!self.data[match]) {

}
var url = (self.data[match].value);
var url = self.data[match].value;
// Make resource available through file-loader
var fallbackLoader = require.resolve('../file-loader.js') + '?url=' + encodeURIComponent(url);

@@ -78,2 +124,5 @@ return "' + require(" + JSON.stringify(fallbackLoader + '!' + loaderUtils.urlToRequest(url, self.root)) + ") + '";

var processMatch = function (match, strUntilValue, name, value, index) {
var self = this;
var expression = value;
if (!this.isRelevantTagAttr(this.currentTag, name)) {

@@ -83,6 +132,15 @@ return;

// Try and set "root" directory when a dynamic attribute is found
if (isTemplate(value)) {
if (pathIsAbsolute(value) && self.root != undefined) {
// Generate new value for replacement
expression = loaderUtils.urlToRequest(value, self.root);
}
}
this.matches.push({
start: index + strUntilValue.length,
length: value.length,
value: value
value: value,
expression: expression
});

@@ -89,0 +147,0 @@ };

2

package.json
{
"name": "underscore-template-loader",
"version": "0.7.0",
"version": "0.7.1",
"description": "An Underscore and Lodash template loader for Webpack",

@@ -5,0 +5,0 @@ "main": "index.js",

167

README.md

@@ -6,12 +6,9 @@ underscore-template-loader

<br>
###Changelog
### Changelog
<br>
* 0.7.0: Enable _.templateSettings.imports support (thx @kmck).
* 0.7.1: FIX: Check if attribute contains a template expression before replacing it.
<br>
###Installation
### Installation
<br>
```bash

@@ -21,9 +18,6 @@ npm install underscore-template-loader

<br>
Make sure you have the `underscore` or `lodash` package installed.
<br>
###Usage
### Usage
<br>
```javascript

@@ -40,6 +34,26 @@ module.exports = {

<br>
####Loading templates
#### Template engine
<br>
You can specify an engine to specify the library used when you call underscore methods inside the template if you don't want to rely on the global `_` that is used by default.
```javascript
module.exports = {
//...
module: {
loaders: [
{
test: /\.html$/,
loader: "underscore-template-loader",
query: {
engine: 'lodash',
}
}
]
}
};
```
#### Loading templates
```html

@@ -50,3 +64,2 @@ <!-- File: hello.html -->

<br>
```javascript

@@ -57,13 +70,10 @@ var compiled = require('./hello.html');

<br>
####Prepending filename comment
#### Prepending filename comment
<br>
When debugging a large single page app with the DevTools, it's often hard to find the template that contains a bug. With the following config a HTML comment is prepended to the template with the relative path in it (e.g. `<!-- view/user/edit.html -->`).
<br>
```javascript
module.exports = {
//...
module: {

@@ -83,10 +93,10 @@ loaders: [

<br>
####Template settings
#### Template settings
<br>
You can override the delimiters used to determine data to injected (HTML-escaped or not) or code to evaluate in the templates.
```javascript
module.exports = {
//...
module: {

@@ -99,5 +109,5 @@ loaders: [

query: {
interpolate : '\\{\\[(.+?)\\]\\}',
interpolate: '\\{\\[(.+?)\\]\\}',
evaluate: '\\{%([\\s\\S]+?)%\\}',
escape : '\\{\\{(.+?)\\}\\}'
escape: '\\{\\{(.+?)\\}\\}'
}

@@ -110,9 +120,48 @@ }

<br>
####Images
#### Template imports
<br>
[`_.templateSettings.imports`](https://lodash.com/docs#templateSettings-imports) automatically includes variables or functions in your templates. This is useful when you have utility functions that you want to make available to all templates without explicitly passing them in every time the template is used.
```html
<!-- File: hello.html -->
<p><%= greet(name) %></p>
```
```javascript
var _ = require('lodash');
// Imports must be defined before the template is required
_.templateSettings.imports = {
greet: function(name) {
return 'Hello, ' + name + '!';
},
};
var compiled = require('./hello.html');
return compiled({name: "world"});
```
This is enabled by default when `lodash` is the engine used, but can be explicitly toggled using `withImports` option.
```javascript
module.exports = {
//...
module: {
loaders: [
//...
{
test: /\.html$/,
loader: "underscore-template-loader",
query: {
withImports: true,
}
}
]
}
};
```
#### Images
In order to load images you must install either the *file-loader* or the *url-loader* package.
<br>
```javascript

@@ -132,3 +181,2 @@ module.exports = {

<br>
```html

@@ -142,6 +190,4 @@ <!-- Require image using file-loader -->

<br>
Images with an absolute path are not translated unless a `root` option is defined
<br>
```html

@@ -155,3 +201,2 @@ <!-- Using root = undefined => no translation -->

<br>
In order to deactivate image processing define `attributes` as an empty array.

@@ -177,3 +222,2 @@

<br>
You could also add which attributes need to be processed in the form of pairs *tag:attribute*.

@@ -200,15 +244,10 @@

<br>
###Macros
### Macros
<br>
Macros allow additional features like including templates or inserting custom text in compiled templates.
<br>
####The *require* macro
#### The *require* macro
<br>
The `require` macro expects a path to a underscore template. The macro is then translated into a webpack require expression that evaluates the template using the same arguments.
<br>
```html

@@ -225,6 +264,4 @@ <h4>Profile</h4>

<br>
####The *include* macro
#### The *include* macro
<br>
While the `require` macro expects a resource that returns a function, the `include` macro can be used for resources that return plain text. For example, we can include text loaded through the `html-loader` directly in our template.

@@ -241,6 +278,4 @@

<br>
####*br* and *nl*
#### *br* and *nl*
<br>
The `br` and `nl` macros insert a `<br>` tag and a new line respectively. They accept a optional argument with the amount of strings to insert.

@@ -255,9 +290,6 @@

<br>
####Custom macros
#### Custom macros
<br>
We can include additional macros by defining them in the webpack configuration file. Remember that the value returned by a macro is inserted as plain javascript, so in order to insert a custom text we need to use nested quotes. For example, let's say that we want a macro that includes a copyright string in our template.
<br>
```javascript

@@ -274,3 +306,3 @@ // File: webpack.config.js

},
macros: {

@@ -284,6 +316,4 @@ copyright: function () {

<br>
We then invoke this macro from within the template as usual.
<br>
```html

@@ -295,13 +325,10 @@ <footer>

<br>
####Disabling macros
#### Disabling macros
<br>
You can disable macros if you are a bit unsure about their usage or just simply want faster processing. This is achieved by setting the `parseMacros` options to false.
<br>
```javascript
module.exports = {
// ...
module: {

@@ -322,9 +349,6 @@ loaders: {

<br>
####Arguments
#### Arguments
<br>
Macros can accept an arbitrary number of arguments. Only boolean, strings and numeric types are supported.
<br>
```javascript

@@ -341,3 +365,3 @@ // File: webpack.config.js

},
macros: {

@@ -351,3 +375,2 @@ header: function (size, content) {

<br>
```html

@@ -360,9 +383,6 @@ @header(1, 'Welcome')

<br>
####Escaping
#### Escaping
<br>
Macro expressions can be escaped with the `\` character.
<br>
```html

@@ -374,6 +394,4 @@ @br(3)

<br>
Translates to
<br>
```html

@@ -385,11 +403,8 @@ <br><br><br>

<br>
####Known issues
#### Known issues
<br>
* Trying to use different template settings (interpolate, escape, evaluate) for different extensions. Underscore / Lodash template settings are defined globally.
<br>
###License
### License
Released under the MIT license.

21

test/loaderTest.js

@@ -138,2 +138,23 @@ var fs = require('fs');

it('should leave dynamic attributes unaltered', function (done) {
testTemplate(loader, 'dynamic-attribute.html', {
query: {
}
}, function (output) {
assert.equal(output, loadOutput('dynamic-attribute.txt'));
done();
});
});
it('should leave dynamic attributes unaltered with root', function (done) {
testTemplate(loader, 'dynamic-attribute-with-root.html', {
query: {
root: '/bar'
}
}, function (output) {
assert.equal(output, loadOutput('dynamic-attribute-with-root.txt'));
done();
});
});
// FIXME: Changing the underscore tags changes it globally

@@ -140,0 +161,0 @@ it('should allow custom underscore tags', function (done) {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc