Template strings as a template language.

Andrea Giammarchi andrea.giammarchi at gmail.com
Tue Sep 15 10:21:22 UTC 2015


Yet it doesn't play well with i18n since arguments passed to the IIFE would
still come from the current local scope. RegExp would play nicer but it
can't do fancy inline JS evaluation, example:

```js
String.prototype.template = function (o) {
  return this.replace(/\$\{(.+?)\}/g, function ($0,  $1) {
    return  o[$1];
  });
};

'Helo ${name}!'.template({name: 'World'});
```

That could also work combined with template strings so that HTML could be
written like

```js
`<a href="/?search=\${query}">click</a>`.template({query:
encodeURIComponent('hope')});
```

But it's not so cool and footgun prone to remember the `\${...}` escape. Oh
well, not sure how this thread will end up. Maybe there's nothing to do,
let's stick with tooling and libraries :-)

Regards


On Tue, Sep 15, 2015 at 11:05 AM, Herby Vojčík <herby at mailbox.sk> wrote:

> OTOH, it is a question if it is wprth it at all, as we have IIFEs and
> maybe will have do expressions, so you can stick anything to template
> string anyway. OTYOH, new Regexp had its merits....
>
> Dňa 15. septembra 2015 7:24:26 CEST používateľ Thomas <
> thomasjamesfoster at bigpond.com> napísal:
>
>> With all due respect to your solution (it works, and it works well), it's
>> far from ideal to be relying upon `with` and Function. I guess what I'm
>> trying to get at is - wouldn't it be better to think about having a built
>> in version that didn't use with or eval (should be easy enough)? I sense
>> that you're not confident about it being successful in that sense, but a
>> built in function for this trumps with and Function any day of the week.
>>
>> Thomas
>>
>> On 15 Sep 2015, at 3:42 AM, Andrea Giammarchi <
>> andrea.giammarchi at gmail.com> wrote:
>>
>> nobody here raised the minimal interest in what I've achieved with those
>> few lines of code, I rather had people saying "with statement? ewww" or
>> similar reactions about Function like yours ... I don't think as proposal
>> would ever make it, it's too easy to polyfill so I'd expect many - 1
>>
>> ¯\_(ツ)_/¯
>>
>> On Mon, Sep 14, 2015 at 5:23 PM, Thomas <thomasjamesfoster at bigpond.com>
>> wrote:
>>
>>> Sorry, I sent that before I saw your other explanation.
>>>
>>> On a second look that function does work pretty well. The use of
>>> Function still means strings are being evaluated at runtime, but I agree
>>> that it's safer/better than eval (though I'm not sure why CSP would still
>>> like it over eval).
>>>
>>> Have you any plans to make the String.prototype.template function a
>>> proposal?
>>>
>>> Thomas
>>>
>>> On 15 Sep 2015, at 1:52 AM, Andrea Giammarchi <
>>> andrea.giammarchi at gmail.com> wrote:
>>>
>>> again, Function **is** better and different than eval, but I see this
>>> conversation is bringing nothing so I'll just stop explaining.
>>>
>>> Regards
>>>
>>> On Mon, Sep 14, 2015 at 3:47 PM, Thomas <thomasjamesfoster at bigpond.com>
>>> wrote:
>>>
>>>> Doesn't the code in that gist create functions at runtime from strings?
>>>> If so that's not any better than eval.
>>>>
>>>> On 14 Sep 2015, at 8:50 PM, Andrea Giammarchi <
>>>> andrea.giammarchi at gmail.com> wrote:
>>>>
>>>> sorry, early send (I think it was a ctrl+return ? ) ... I was saying ..
>>>>
>>>> without using eval and already discussed months ago:
>>>> https://gist.github.com/WebReflection/8f227532143e63649804
>>>>
>>>> it's based on the glorious `with` statement and it works like a charm
>>>>
>>>> Regards
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> On Mon, Sep 14, 2015 at 11:49 AM, Andrea Giammarchi <
>>>> andrea.giammarchi at gmail.com> wrote:
>>>>
>>>>> without using eval, discussed already months ago
>>>>>
>>>>>
>>>>> On Mon, Sep 14, 2015 at 6:03 AM, Thomas <thomasjamesfoster at bigpond.com
>>>>> > wrote:
>>>>>
>>>>>> For those interested, this gist better shows what's being discussed:
>>>>>> https://gist.github.com/thomasfoster96/193e7c08aae499f810a1
>>>>>>
>>>>>> Ron: Yes, that's already possible - but tagged template strings don't
>>>>>> really offer much of an advantage over a function as far as templating goes
>>>>>> (IMHO).
>>>>>>
>>>>>> Thomas
>>>>>>
>>>>>> On 14 Sep 2015, at 11:04 AM, Ron Buckton <Ron.Buckton at microsoft.com>
>>>>>> wrote:
>>>>>>
>>>>>> This is theoretically possible:
>>>>>>
>>>>>> ```
>>>>>> let t = $template`
>>>>>>   ${$item.permalink}
>>>>>>   ${$each($item.comments)`
>>>>>>     ${$parent.permalink}
>>>>>>     ${$if($item.title)`
>>>>>>       ${$parent.permalink}
>>>>>>     `}
>>>>>>   `}
>>>>>> `;
>>>>>> let s = t(data);
>>>>>> ```
>>>>>>
>>>>>> ...given an adequate implementation using proxies (to create bindings
>>>>>> for e.g. `$item.permalink` for later evaluation) and tagged template
>>>>>> functions. Whether or not this would make for a reasonable implementation
>>>>>> is left to the reader.
>>>>>>
>>>>>> Ron
>>>>>> ------------------------------
>>>>>> From: Isiah Meadows <isiahmeadows at gmail.com>
>>>>>> Sent: ‎9/‎13/‎2015 4:15 PM
>>>>>> To: Mark S. Miller <erights at google.com>
>>>>>> Cc: Bob Myers <rtm at gol.com>; es-discuss <es-discuss at mozilla.org>
>>>>>> Subject: Re: Template strings as a template language.
>>>>>>
>>>>>> On Sun, Sep 13, 2015 at 7:09 PM, Mark S. Miller <erights at google.com>
>>>>>> wrote:
>>>>>> >
>>>>>> >
>>>>>> > On Sun, Sep 13, 2015 at 8:58 AM, Bob Myers <rtm at gol.com> wrote:
>>>>>> >>
>>>>>> >> Templating languages typically "compile" templates into functions
>>>>>> through
>>>>>> >> various lexical transformations.
>>>>>> >>
>>>>>> >> Consider a template file foo.tem:
>>>>>> >>
>>>>>> >> ```
>>>>>> >> My name is ${
>>>>>> https://na01.safelinks.protection.outlook.com/?url=this.name&data=01%7c01%7cron.buckton%40microsoft.com%7ce705066eae3849ee21f008d2bc913033%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=CY6YpX1n5jLScYGX2W1tIi2ndGlA7WI8ZTJUZjDL2Gw%3d
>>>>>> }.
>>>>>> >> ```
>>>>>> >>
>>>>>> >> Lexically transform this into
>>>>>> >>
>>>>>> >> ```
>>>>>> >> function foo() {
>>>>>> >>   return `My name is ${this.name|}.`;
>>>>>> >> }
>>>>>> >>
>>>>>> >> Then invoke the template as eg
>>>>>> >>
>>>>>> >> ```
>>>>>> >> foo.call({name: 'Bob'})
>>>>>> >> ```
>>>>>> >>
>>>>>> >> Having said that, I doubt if ES6 template strings serve as a
>>>>>> useful basis
>>>>>> >> for a full-fledged templating system. To take just one basic
>>>>>> example, how
>>>>>> >> would one implement the equivalent of `{{#if}}`?
>>>>>> >
>>>>>> >
>>>>>> > What does `{{#if}}` mean?
>>>>>> >
>>>>>>
>>>>>> An example from Handlebars' website (which is likely where he drew the
>>>>>> syntax from):
>>>>>>
>>>>>> ```
>>>>>> {{permalink}}
>>>>>> {{#each comments}}
>>>>>>   {{../permalink}}
>>>>>>
>>>>>>   {{#if title}}
>>>>>>     {{../permalink}}
>>>>>>   {{/if}}
>>>>>> {{/each}}
>>>>>> ```
>>>>>>
>>>>>>
>>>>>>
>>>>>> >>
>>>>>> >>
>>>>>> >> Bob
>>>>>> >>
>>>>>> >>
>>>>>> >> _______________________________________________
>>>>>> >> es-discuss mailing list
>>>>>> >> es-discuss at mozilla.org
>>>>>> >>
>>>>>> https://na01.safelinks.protection.outlook.com/?url=https%3a%2f%2fmail.mozilla.org%2flistinfo%2fes-discuss&data=01%7c01%7cron.buckton%40microsoft.com%7ce705066eae3849ee21f008d2bc913033%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=Vk9C%2fonHktgLCsW%2f395PrpBWefRcs6XFqJk7HTVbunE%3d
>>>>>> >>
>>>>>> >
>>>>>> >
>>>>>> >
>>>>>> > --
>>>>>> >     Cheers,
>>>>>> >     --MarkM
>>>>>> >
>>>>>> > _______________________________________________
>>>>>> > es-discuss mailing list
>>>>>> > es-discuss at mozilla.org
>>>>>> >
>>>>>> https://na01.safelinks.protection.outlook.com/?url=https%3a%2f%2fmail.mozilla.org%2flistinfo%2fes-discuss&data=01%7c01%7cron.buckton%40microsoft.com%7ce705066eae3849ee21f008d2bc913033%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=Vk9C%2fonHktgLCsW%2f395PrpBWefRcs6XFqJk7HTVbunE%3d
>>>>>> >
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Isiah Meadows
>>>>>> _______________________________________________
>>>>>> es-discuss mailing list
>>>>>> es-discuss at mozilla.org
>>>>>>
>>>>>> https://na01.safelinks.protection.outlook.com/?url=https%3a%2f%2fmail.mozilla.org%2flistinfo%2fes-discuss&data=01%7c01%7cron.buckton%40microsoft.com%7ce705066eae3849ee21f008d2bc913033%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=Vk9C%2fonHktgLCsW%2f395PrpBWefRcs6XFqJk7HTVbunE%3d
>>>>>>
>>>>>> _______________________________________________
>>>>>> es-discuss mailing list
>>>>>> es-discuss at mozilla.org
>>>>>> https://mail.mozilla.org/listinfo/es-discuss
>>>>>>
>>>>>>
>>>>>> _______________________________________________
>>>>>> es-discuss mailing list
>>>>>> es-discuss at mozilla.org
>>>>>> https://mail.mozilla.org/listinfo/es-discuss
>>>>>>
>>>>>>
>>>>>
>>>>
>>>
>> ------------------------------
>>
>> es-discuss mailing list
>> es-discuss at mozilla.org
>> https://mail.mozilla.org/listinfo/es-discuss
>>
>>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20150915/82c5e0dc/attachment-0001.html>


More information about the es-discuss mailing list