Template strings as a template language.

Herby Vojčík herby at mailbox.sk
Tue Sep 15 12:02:10 UTC 2015



Andrea Giammarchi wrote:
> 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

Oh, I meant it other way, my dense communication again produce a 
misunderstanding, I meant something like "well, one can make regexp as 
well using eval('/'+aString.replace(/\//g, '\\/')+'/') or so, but there 
still is new Regexp there. So, having string-to-regexp in language, 
maybe we can as well have string-to-template.

> 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
> <mailto: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
>     <mailto: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
>         <mailto: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
>>         <mailto: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
>>             <mailto: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
>>>             <mailto: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
>>>                 <mailto: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
>>>>                 <mailto: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
>>>>                     <mailto: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
>>>>                         <mailto: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
>>>>>                         <mailto:isiahmeadows at gmail.com>
>>>>>                         Sent: ‎9/‎13/‎2015 4:15 PM
>>>>>                         To: Mark S. Miller <mailto:erights at google.com>
>>>>>                         Cc: Bob Myers <mailto:rtm at gol.com>;
>>>>>                         es-discuss <mailto: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
>>>>>                         <mailto:erights at google.com>> wrote:
>>>>>                         >
>>>>>                         >
>>>>>                         > On Sun, Sep 13, 2015 at 8:58 AM, Bob Myers
>>>>>                         <rtm at gol.com <mailto: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
>>>>>                         <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
>>>>>                         <http://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
>>>>>                         <mailto: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
>>>>>                         <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
>>>>>                         <mailto: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 <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
>>>>>                         <mailto: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
>>>>>                         <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
>>>>>                         <mailto:es-discuss at mozilla.org>
>>>>>                         https://mail.mozilla.org/listinfo/es-discuss
>>>>
>>>>                         _______________________________________________
>>>>                         es-discuss mailing list
>>>>                         es-discuss at mozilla.org
>>>>                         <mailto:es-discuss at mozilla.org>
>>>>                         https://mail.mozilla.org/listinfo/es-discuss
>>>>
>>>>
>>>>
>>>
>>
>         ------------------------------------------------------------------------
>
>         es-discuss mailing list
>         es-discuss at mozilla.org  <mailto:es-discuss at mozilla.org>
>         https://mail.mozilla.org/listinfo/es-discuss
>
>


More information about the es-discuss mailing list