Skip to content

Commit

Permalink
Copied PR WearyMonkey#64
Browse files Browse the repository at this point in the history
  • Loading branch information
stevenvachon committed Oct 24, 2018
1 parent 70629fe commit 6f498be
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 14 deletions.
30 changes: 19 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ or [raw-loader](https://github.com/webpack-contrib/raw-loader). This gives you t

[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)

ngTemplate loader will export the path of the HTML file, so you can use require directly AngularJS with templateUrl parameters e.g.
ngTemplate loader will export the path of the HTML file, so you can use require directly AngularJS with templateUrl parameters e.g.

``` javascript
var templateUrl = require('ngtemplate!html!./test.html');
Expand All @@ -30,7 +30,7 @@ app.directive('testDirective', function() {

To remove the extra `require`, check out the [Baggage Example](#baggage-example) below.

ngTemplate creates a JS module that initialises the $templateCache with the HTML under the file path e.g.
ngTemplate creates a JS module that initialises the $templateCache with the HTML under the file path e.g.

``` javascript
require('!ngtemplate?relativeTo=/projects/test/app!html!file.html');
Expand Down Expand Up @@ -90,10 +90,10 @@ require('!ngtemplate?module=myTemplates&relativeTo=/projects/test/app!html!file.

### Parameter Interpolation

`module`, `relativeTo` and `prefix` parameters are interpolated using
`module`, `relativeTo` and `prefix` parameters are interpolated using
[Webpack's standard interpolation rules](https://github.com/webpack/loader-utils#interpolatename).
Interpolation regular expressions can be passed using the extra parameters `moduleRegExp`, `relativeToRegExp`
and `prefixRegExp` which apply to single parameters, or `regExp` which will apply to all three parameters.
Interpolation regular expressions can be passed using the extra parameters `moduleRegExp`, `relativeToRegExp`
and `prefixRegExp` which apply to single parameters, or `regExp` which will apply to all three parameters.


### Path Separators (Or using on Windows)
Expand All @@ -108,6 +108,14 @@ and `prefixRegExp` which apply to single parameters, or `regExp` which will appl

Make sure you use the same path separator for the `prefix` and `relativeTo` parameters, all templateUrls and in your webpack.config.js file.

### Export formats

There are different export formats available:

```module.exports``` (default, cjs format). "myTemplateUrl" becomes ```module.exports = "myTemplateUrl";```
```exports.default``` (when ```exportAsDefault``` param is set, es6to5 format). "myTemplateUrl" becomes ```exports.default = "myTemplateUrl";```
```export default``` (when ```exportAsEs6Default``` param is set, es6 format). "myTemplateUrl" becomes ```export default "myTemplateUrl";```

### Using with npm requires

This module relies on angular being available on `window` object. However, in cases angular is connected from `node_modules` via `require('angular')`, option to force this module to get the angular should be used:
Expand Down Expand Up @@ -174,7 +182,7 @@ templates.keys().forEach(function(key) {

## Baggage Example

ngTemplate loader works well with the [Baggage Loader](https://github.com/deepsweet/baggage-loader) to remove all those
ngTemplate loader works well with the [Baggage Loader](https://github.com/deepsweet/baggage-loader) to remove all those
extra HTML and CSS requires. See an example of a directive and webpack.config.js below. Or take a look at more complete
example in the examples/baggage folder.

Expand All @@ -197,9 +205,9 @@ and a webpack.config.js for webpack 1 like:
module.exports = {
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'baggage?[file].html&[file].css'
{
test: /\.js$/,
loader: 'baggage?[file].html&[file].css'
}
],
loaders: [
Expand All @@ -218,8 +226,8 @@ For webpack 2 like:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
{
test: /\.js$/,
enforce: 'pre',
use: [{ loader:'baggage?[file].html&[file].css' }]
},
Expand Down
15 changes: 12 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ module.exports = function (content) {
var pathSep = options.pathSep || '/';
var resource = this.resource;
var pathSepRegex = new RegExp(escapeRegExp(path.sep), 'g');

var exportAsEs6Default = options.exportAsEs6Default;
var exportAsDefault = options.exportAsDefault;
// if a unix path starts with // we treat is as an absolute path e.g. //Users/wearymonkey
// if we're on windows, then we ignore the / prefix as windows absolute paths are unique anyway e.g. C:\Users\wearymonkey
if (relativeTo[0] === '/') {
Expand Down Expand Up @@ -45,19 +46,27 @@ module.exports = function (content) {
.replace(new RegExp(escapeRegExp(pathSep) + '+', 'g'), pathSep);
var html;

if (content.match(/^module\.exports/)) {
if (content.match(/(?:^module\.exports)|(?:^export\s+default)|(?:^exports.default)/)) {
var firstQuote = findQuote(content, false);
var secondQuote = findQuote(content, true);
html = content.substr(firstQuote, secondQuote - firstQuote + 1);
} else {
html = content;
}

var exportsString = "module.exports =";

if (exportAsDefault) {
exportsString = "exports.default =";
} else if (exportAsEs6Default) {
exportsString = "export default";
}

return "var path = '"+jsesc(filePath)+"';\n" +
"var html = " + html + ";\n" +
(requireAngular ? "var angular = require('angular');\n" : "window.") +
"angular.module('" + ngModule + "').run(['$templateCache', function(c) { c.put(path, html) }]);\n" +
"module.exports = path;";
exportsString + " path;";

function getAndInterpolateOption(optionKey, def) {
return options[optionKey]
Expand Down

0 comments on commit 6f498be

Please sign in to comment.