update readme

README.md

@@ -1,6 +1,108 @@
 etpl-loader
 ===========
 
+[![NPM version](https://img.shields.io/npm/v/etpl-loader.svg)](https://www.npmjs.com/package/etpl-loader)
+[![NPM downloads](https://img.shields.io/npm/dm/etpl-loader.svg)](https://www.npmjs.com/package/etpl-loader)
+[![Build Status](https://travis-ci.org/d-band/etpl-loader.svg?branch=master)](https://travis-ci.org/d-band/etpl-loader)
+[![Coverage Status](https://coveralls.io/repos/github/d-band/etpl-loader/badge.svg?branch=master)](https://coveralls.io/github/d-band/etpl-loader?branch=master)
+[![Dependency Status](https://david-dm.org/d-band/etpl-loader.svg)](https://david-dm.org/d-band/etpl-loader)
+
+## Install
+
 ```
 npm i etpl-loader -S
-```
+```
+
+## Usage
+
+**index.tpl**
+```
+<p><%=name%></p>
+<p><%=email%></p>
+<ul>
+  <%for (var i=0; i<skills.length; i++) {var skill = skills[i];%>
+  <li><%-skill%></li>
+  <%}%>
+</ul>
+<div>
+  <%projects.forEach((project) => {%>
+  <div>
+    <h3><%-project.name%></h3>
+    <p><%=project.description%></p>
+  </div>
+  <%});%>
+</div>
+<%include('footer.tpl')%>
+```
+
+**footer.tpl**
+```
+<div>Copyright © <%=site.year%>&nbsp;<%=site.name%>. All Rights Reserved.</div>
+```
+
+**index.js**
+```
+import tpl from './index.tpl';
+
+window.ENCODE = (str) => {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+};
+
+document.getElementById('root').innerHTML = tpl({
+  name: 'hello',
+  email: 'hello@example.com',
+  skills: [
+    '<a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>',
+    '<a href="https://www.oracle.com/java/">Java</a>',
+    '<a href="https://en.wikipedia.org/wiki/C%2B%2B">C++</a>',
+    '<a href="https://golang.org">Go</a>'
+  ],
+  projects: [{
+    name: '<a href="https://github.com/d-band/etpl-loader">etpl-loader</a>',
+    description: 'Ejs template webpack loader.'
+  }, {
+    name: '<a href="https://github.com/d-band/dool">dool</a>',
+    description: 'Build tool based on webpack.'
+  }, {
+    name: '<a href="https://github.com/d-band/yax">yax</a>',
+    description: 'Yet another store using redux.'
+  }],
+  site: {
+    name: 'D-Band',
+    year: '2018'
+  }
+});
+```
+
+**webpack.config.js**
+```
+module.exports = {
+  module: {
+    rules: [{
+      test: /\.tpl$/,
+      use: 'etpl-loader'
+    }]
+  }
+}
+```
+
+## Options
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|**`globals`|`{Array}`|`['window', 'console']`|Global variables|
+|**`encode`|`{String}`|`'ENCODE'`|Encode function name|
+
+## Report a issue
+
+* [All issues](https://github.com/d-band/etpl-loader/issues)
+* [New issue](https://github.com/d-band/etpl-loader/issues/new)
+
+## License
+
+etpl-loader is available under the terms of the MIT License.

src/index.js

@@ -5,7 +5,7 @@ import preParse from './preParse';
 function ejsPlugin (babel, options) {
   const { types: t } = babel;
   const globals = options.globals || ['window', 'console'];
-  const escapeFun = options.escape || 'ESCAPE';
+  const encodeFun = options.encode || 'ENCODE';
   return {
     visitor: {
       AssignmentExpression (path) {
@@ -23,8 +23,8 @@ function ejsPlugin (babel, options) {
             ReferencedIdentifier (p) {
               const v = p.node.name;
               if (isGlobal(v) && globals.indexOf(v) < 0) {
-                if (v === 'ESCAPE_FUNCTION') {
-                  p.node.name = escapeFun;
+                if (v === 'ENCODE_FUNCTION') {
+                  p.node.name = encodeFun;
                 } else {
                   p.node.name = `data.${v}`;
                 }

src/preParse.js

@@ -15,7 +15,7 @@ function format (str, filePath) {
       if (first === '-') {
         return `';out+=(${unescape(code.slice(1))});out+='`;
       } else if (first === '=') {
-        return `';out+=ESCAPE_FUNCTION(${unescape(code.slice(1))});out+='`;
+        return `';out+=ENCODE_FUNCTION(${unescape(code.slice(1))});out+='`;
       } else {
         const match = code.match(/^include\((.+)?\)$/);
         if (match) {

test/expects/escape/index.js → test/expects/encode/index.js

@@ -106,20 +106,20 @@ console.log(_template_tpl__WEBPACK_IMPORTED_MODULE_0___default()({
 
 module.exports = function (data) {
   var out = '<p>';
-  out += window.escape(data.name);
+  out += window.encode(data.name);
   out += '</p><p>';
   out += data.code;
   out += '</p>';
 
   for (var i = 0; i < 10; i++) {
     out += '<span>';
-    out += window.escape(i);
+    out += window.encode(i);
     out += '</span>';
   }
 
   data.list.forEach(function (item) {
     out += ' <div>';
-    out += window.escape(item);
+    out += window.encode(item);
     out += '</div>';
   });
   return out;

test/expects/include/index.js

@@ -106,23 +106,23 @@ console.log(_template_tpl__WEBPACK_IMPORTED_MODULE_0___default()({
 
 module.exports = function (data) {
   var out = '<p>';
-  out += ESCAPE(data.name);
+  out += ENCODE(data.name);
   out += '</p><p>';
   out += data.code;
   out += '</p>';
 
   for (var i = 0; i < 10; i++) {
     out += '<span>';
-    out += ESCAPE(i);
+    out += ENCODE(i);
     out += '</span>';
   }
 
   data.list.forEach(function (item) {
     out += ' <div>';
-    out += ESCAPE(item);
+    out += ENCODE(item);
     out += '</div>';
   });
-  out += ESCAPE(data.footer);
+  out += ENCODE(data.footer);
   return out;
 };
 

test/expects/simple/index.js

@@ -90,39 +90,75 @@
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _template_tpl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-/* harmony import */ var _template_tpl__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_template_tpl__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _index_tpl__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var _index_tpl__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_index_tpl__WEBPACK_IMPORTED_MODULE_0__);
 
 
-console.log(_template_tpl__WEBPACK_IMPORTED_MODULE_0___default()({
+window.ENCODE = (str) => {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+};
+
+document.getElementById('root').innerHTML = _index_tpl__WEBPACK_IMPORTED_MODULE_0___default()({
   name: 'hello',
-  code: 'world',
-  list: ['a', 'b', 'c']
-}));
+  email: 'hello@example.com',
+  skills: [
+    '<a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>',
+    '<a href="https://www.oracle.com/java/">Java</a>',
+    '<a href="https://en.wikipedia.org/wiki/C%2B%2B">C++</a>',
+    '<a href="https://golang.org">Go</a>'
+  ],
+  projects: [{
+    name: '<a href="https://github.com/d-band/etpl-loader">etpl-loader</a>',
+    description: 'Ejs template webpack loader.'
+  }, {
+    name: '<a href="https://github.com/d-band/dool">dool</a>',
+    description: 'Build tool based on webpack.'
+  }, {
+    name: '<a href="https://github.com/d-band/yax">yax</a>',
+    description: 'Yet another store using redux.'
+  }],
+  site: {
+    name: 'D-Band',
+    year: '2018'
+  }
+});
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports) {
 
 module.exports = function (data) {
   var out = '<p>';
-  out += ESCAPE(data.name);
+  out += ENCODE(data.name);
   out += '</p><p>';
-  out += data.code;
-  out += '</p>';
+  out += ENCODE(data.email);
+  out += '</p><ul> ';
 
-  for (var i = 0; i < 10; i++) {
-    out += '<span>';
-    out += ESCAPE(i);
-    out += '</span>';
+  for (var i = 0; i < data.skills.length; i++) {
+    var skill = data.skills[i];
+    out += ' <li>';
+    out += skill;
+    out += '</li> ';
   }
 
-  data.list.forEach(function (item) {
-    console.log(item);
-    out += ' <div>';
-    out += ESCAPE(item);
-    out += '</div>';
+  out += '</ul><div> ';
+  data.projects.forEach(project => {
+    out += ' <div> <h3>';
+    out += project.name;
+    out += '</h3> <p>';
+    out += ENCODE(project.description);
+    out += '</p> </div> ';
   });
+  out += '</div><div>Copyright © ';
+  out += ENCODE(data.site.year);
+  out += '&nbsp;';
+  out += ENCODE(data.site.name);
+  out += '. All Rights Reserved.</div>';
   return out;
 };
 

test/fixtures/simple/footer.tpl

@@ -0,0 +1 @@
+<div>Copyright © <%=site.year%>&nbsp;<%=site.name%>. All Rights Reserved.</div>

test/fixtures/simple/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Simple</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="dist/index.js"></script>
+</body>
+</html>

test/fixtures/simple/index.js

@@ -1,7 +1,35 @@
-import tpl from './template.tpl';
+import tpl from './index.tpl';
 
-console.log(tpl({
+window.ENCODE = (str) => {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+};
+
+document.getElementById('root').innerHTML = tpl({
   name: 'hello',
-  code: 'world',
-  list: ['a', 'b', 'c']
-}));
+  email: 'hello@example.com',
+  skills: [
+    '<a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>',
+    '<a href="https://www.oracle.com/java/">Java</a>',
+    '<a href="https://en.wikipedia.org/wiki/C%2B%2B">C++</a>',
+    '<a href="https://golang.org">Go</a>'
+  ],
+  projects: [{
+    name: '<a href="https://github.com/d-band/etpl-loader">etpl-loader</a>',
+    description: 'Ejs template webpack loader.'
+  }, {
+    name: '<a href="https://github.com/d-band/dool">dool</a>',
+    description: 'Build tool based on webpack.'
+  }, {
+    name: '<a href="https://github.com/d-band/yax">yax</a>',
+    description: 'Yet another store using redux.'
+  }],
+  site: {
+    name: 'D-Band',
+    year: '2018'
+  }
+});

test/fixtures/simple/index.tpl

@@ -0,0 +1,16 @@
+<p><%=name%></p>
+<p><%=email%></p>
+<ul>
+  <%for (var i=0; i<skills.length; i++) {var skill = skills[i];%>
+  <li><%-skill%></li>
+  <%}%>
+</ul>
+<div>
+  <%projects.forEach((project) => {%>
+  <div>
+    <h3><%-project.name%></h3>
+    <p><%=project.description%></p>
+  </div>
+  <%});%>
+</div>
+<%include('footer.tpl')%>