diff --git a/README.md b/README.md index e091111..a7dc0ba 100644 --- a/README.md +++ b/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

Hello, ${name}

``` **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 +// ["

Hello, ", "

", raw: ["

Hello, ", "

"]] +// ["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 +//

Hello, world

+``` + +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 `

Hello, ${this.name}

` 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 +

Hello, ${this.name}

+``` + +**main.js** +``` javascript +const template = require('./template.html'); + +class Hello { + name = 'Den!'; + _template; + + constructor() { + this._template = template; + + console.log(this._template()); //

Hello, Den!

+ } +} ``` \ No newline at end of file diff --git a/index.js b/index.js index b44ccdb..a284288 100644 --- a/index.js +++ b/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; }; diff --git a/package.json b/package.json index b0c5c50..fa5cfca 100644 --- a/package.json +++ b/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" + } }