added a new model for usage a scope

README.md

@@ -12,66 +12,89 @@ The `template-literals-loader` is a module for webpack to use [Template literals
 
 
 
-If you want to use this module with new browsers you can just setting webpack. If you will use it with old ES5 only support browsers you have to include babel loader or some other ES2015 loader that supports template strings.
+If you want to use this module with new browsers you can just setting webpack.
 
-**webpack.config.js**  for ES5 support
+**webpack.config.js**
 ``` javascript
 ...
 {
-    test: /\.js.html?$/,
-    use: [
-        {
-            loader: 'babel-loader'
-        },
-        {
-            loader: 'template-literals-loader'
-        },
-    ]
+    test: /\.html?$/,
+    loader: "template-literals-loader"
 },
 ...
-};
 ```
 
-**webpack.config.js** for ES2015 and later support
-``` javascript
-...
-{
-    test: /\.js.html?$/,
-    use: [
-        {
-            loader: 'template-literals-loader'
-        },
-    ]
-},
-...
-};
-```
+## Examples
+
 
-**template.js.html**
+**template.html**
 ``` html
 <h1>Hello, ${name}</h1>
 ```
 
 **main.js**  with tagged template literals
 ``` javascript
-let template = require('./template.js.html');
+const template = require('./template.html');
 
-function myTag(chunks, ...interpolations) {
+function myTagFunc(chunks, ...interpolations) {
   console.log(chunks);
   console.log(interpolations);
 }
 
-template({name: 'world'}, myTag);
+const config = { 
+  scope: {name: 'world'}, // optional
+  tag: myTagFunc          // optional
+};
+
+template(config);
 ```
 
+The result:
+
+``` javascript
+// ["<h1>Hello, ", "</h1>", raw: ["<h1>Hello, ", "</h1>"]]
+// ["world"]
+```
+
+
 **main.js**  without tagged template literals
 ``` javascript
-let template = require('./template.js.html');
+const template = require('./template.html');
+
+const config = { 
+  scope: {name: 'world'}, 
+};
+console.log(template(config));
+```
+
+The result:
+
+``` javascript
+// <h1>Hello, world</h1>
+```
+
+You can set a config or not. If you don't use the config.scope it will use current [[Scope]]. I.e. in a tepmplate you will have to write `<h1>Hello, ${this.name}</h1>` and set  the `name` variable in your code.
 
-function myTag(chunks, ...interpolations) {
-  console.log(chunks);
-  console.log(interpolations);
-}
 
-console.log(template({name: 'world'}));
+Usage with a class:
+
+**template.html**
+``` html
+<h1>Hello, ${this.name}</h1>
+```
+
+**main.js** 
+``` javascript
+const template = require('./template.html');
+
+class Hello {
+  name = 'Den!';
+  _template;
+
+  constructor() {
+    this._template = template;
+
+    console.log(this._template()); //<h1>Hello, Den!</h1>
+  }
+}
 ```

index.js

@@ -2,6 +2,25 @@
 	MIT License http://www.opensource.org/licenses/mit-license.php
 	Author Den Sumbaev @sumbad
 */
+var compile = require("es6-templates").compile;
+
+
 module.exports = function(template) {
-	return 'module.exports=function(scope, callbackTag){ if(callbackTag) {return callbackTag`' + template + '`} else {return `' + template + '`}};';	
+  var exportsString = "module.exports = ";
+  var content = compile('tag`' + template + '`').code;
+
+  var f = `function(config) {
+    function normal (template, ...expressions) {
+      return template.reduce((accumulator, part, i) => {
+        return accumulator + expressions[i - 1] + part
+      })
+    }
+    var config = config || {};
+    var scope = config.scope || {};
+    var tag = config.tag || normal;
+    var keys = Object.keys(scope).join(',');
+    var tagFunc = new Function('tag,'+keys, 'return ' + ${JSON.stringify(content.toString())});
+	  return  config.scope ? tagFunc(tag, ...Object.values(scope)) : tagFunc.apply(this, [tag]);
+  }`;
+  return exportsString + f;
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "template-literals-loader",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "module for webpack",
   "main": "index.js",
   "scripts": {
@@ -21,5 +21,8 @@
   "bugs": {
     "url": "https://github.com/sumbad/template-literals-loader/issues"
   },
-  "homepage": "https://github.com/sumbad/template-literals-loader#readme"
+  "homepage": "https://github.com/sumbad/template-literals-loader#readme",
+  "dependencies": {
+    "es6-templates": "^0.2.2"
+  }
 }