Use ES6 template strings instead of JSON.stringify()

[Mevrael]

I can't use variables inside imported html templates because right now you are using JSON.stringify() on the content.

template.html:

<div>
  ${name}
</div>

js:

var name = 'John';

import tpl from './template.html';

console.log(tpl);

Does not works, it prints to console ${name} not John. If I replace

code: 'export default ' + JSON.stringify(code) + ';',

to

code: 'export default `' + code + '`;',

everything works.

[TrySound]

@Mevrael I think the idea of using local-global which will be executed in child module is incorrect and conflicts with the idea of modules. Template literal is not template angine. It should work only in current scope. Any module has different scope.

[Mevrael]

Indeed. What do you think about exporting functions with data parameter? So transpiled and bunlded code would look like

var template = function(data) {
   return '<div>' + data.name + '</div>';
}

[Mevrael]

May be add an option for this.

Probably there could be also an option to pass a callback to format code before returning it.

[TrySound]

@Mevrael The idea of this plugin is loading only strings which can be passed in template engines. For example angular requires only template string and processes it inside. You can create own template plugin (but choose please sensible name).

[TrySound]

Plugins should be atomic and do only one thing.

[Mevrael]

Adding some new options would not break this idea.

Instead of

str({
  extensions: ['.html']
}),

there could be:

function parser(content) {
   content = content.replace(),
   ...
   // format template for any framework or template engine instead of doing it in browser
}

str({
  extensions: ['.html', '.php'],
  format: 'template-closure',
  parser: parser
}),

[TrySound]

@Mevrael The name of this plugins is string, not template. I can add only some transform option for example to minify html.

[Mevrael]

Exactly, it's name is string and string > template since template is a subclass of string. String is a general data type.

And you just said about minification yourself, this breaks your minimalistic atomic philosophy.

[TrySound]

@Mevrael It's about minification special type not js. Okay how do you wanna pass data to string? It should return function in this case. This plugin exports only strings.

[Mevrael]

as I said if I wanna use another format I pass it to options

import tpl from './template.html';

let user = ...

let data = {
   user: user
};

console.log(tpl(data));

[TrySound]

Oh, you still about template syntax. I can't do this. Plugins should return es5 stuff. Templates is not about that.

[TrySound]

@Mevrael Use custom plugin for this case.

[Mevrael]

There is tool called Babel and plugin for rollup also...

Anyway thank you for conversation, I'll made my own plugin for general use cases.

[TrySound]

Babel should process only user script, not generated.