# art-template-loader

> art-template loader for webpack

Latest version **1.4.3** (published 2017-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install art-template-loader
pnpm add art-template-loader
yarn add art-template-loader
bun add art-template-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.3 |
| Published | 2017-06-05 |
| First published | 2016-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 108 |
| Maintainers | aui |

## Links

- npm: https://www.npmjs.com/package/art-template-loader
- Repository: https://github.com/aui/art-template-loader
- Homepage: https://github.com/aui/art-template-loader#readme
- Issues: https://github.com/aui/art-template-loader/issues
- npm.io page: https://npm.io/package/art-template-loader

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Recent versions

- 1.4.3 (latest) — 2017-06-05
- 1.4.2 — 2017-05-06
- 1.4.1 — 2017-05-04
- 1.3.0 — 2017-05-01
- 1.2.2 — 2017-04-24
- 1.2.1 — 2017-04-23
- 1.2.0 — 2017-04-22
- 1.1.0 — 2017-04-20
- 1.0.0 — 2017-04-18
- 0.3.0 — 2017-04-16
- 0.3.0-beta4 — 2017-04-15
- 0.3.0-beta3 — 2017-04-15
- 0.3.0-beta2 — 2017-04-15
- 0.3.0-beta1 — 2017-04-14
- 0.3.0-beta — 2017-04-14
- … 7 more at https://npm.io/package/art-template-loader/versions

## README

# art-template-loader

[![NPM Version](https://img.shields.io/npm/v/art-template-loader.svg)](https://npmjs.org/package/art-template-loader)
[![Node.js Version](https://img.shields.io/node/v/art-template-loader.svg)](http://nodejs.org/download/)

[art-template](https://github.com/aui/art-template) loader for webpack

## Install

```shell
npm install art-template
npm install art-template-loader --save-dev
```

## Usage

By default every local `<img src="image.png">` is required (`require('./image.png')`). You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`).

You can specify which attribute combination should be processed by this loader via the query parameter `htmlResourceRules`. (Default: `htmlResourceRules=[/\bsrc="([^"]*)"/]`)

To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in `htmlResourceRules=false`.

## Examples

```js
module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.jpg$/,
            loader: "file-loader"
        }, {
            test: /\.png$/,
            loader: "url-loader?mimetype=image/png"
        }, {
            test: /\.art$/,
            loader: "art-template-loader",
            options: {
                // art-template options (if necessary)
                // @see https://github.com/aui/art-template
            }
        }]
    },
    // ...
}
```

```html
<% include('./header.art') %>

<% if (user) { %>
  <h2><%= user.name %></h2>
  <p><img src="./octocat.png" alt="octocat"></p>
<% } %>

<% include('./footer.art') %>
```

[More](https://github.com/aui/art-template-loader/tree/master/example)

## 'Root-relative' URLs

For urls that start with a `/`, the default behavior is to not translate them.
If a `htmlResourceRoot` query parameter is set, however, it will be prepended to the url
and then translated.

With the same configuration as above:

``` html
<!-- file.art -->
<img src="/image.jpg">
```

```js
require("html-loader!./file.art");

// => '<img  src="/image.jpg">'
```

```js
require("html-loader?htmlResourceRoot=.!./file.art");

// => '<img  src="http://cdn.example.com/49eba9f/a992ca.jpg">'
```

## Filter

Add filter:

```js
var runtime = require('art-template/lib/runtime');
runtime.dateFormat = function(){ /*[...]*/ };
var html = require('./index.art');
```

Use filter:

```html
{{time | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
```

## Debug

Support `SourceMap`:

```shell
webpack --debug
```

![debug](https://cloud.githubusercontent.com/assets/1791748/25306107/55b2afba-27b9-11e7-903b-4700ac47a4d3.png)

## Options

You can pass [art-template options](https://github.com/aui/art-template)
using standard webpack [loader options](https://webpack.js.org/configuration/module/#useentry).

---
_Source: https://npm.io/package/art-template-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._