A Function.tag proposal?

Andrea Giammarchi andrea.giammarchi at gmail.com
Mon Jun 22 12:39:53 UTC 2020


btw, in case somebody reads this issue, this is the current workaround:

```js
const tag = (raw, ...values) => String.raw({raw}, ...values);
```

it's still better than my dummy tag (hopefully at least on performance),
but as it's becoming more common than ever, it'd be great to have
`String.tag` doing exactly that.

Best Regards


On Mon, Jun 22, 2020 at 2:30 PM Andrea Giammarchi <
andrea.giammarchi at gmail.com> wrote:

> It doesn't work. There's been a lengthy discussion here
> https://github.com/mjbvz/vscode-lit-html/issues/14 and comments are not
> welcome in most tools, but even GitHub fails at highlighting the string,
> and no intellisense works within comments.
>
> The simplest request considered as "increased JS complexity" also feels a
> bit of an exaggeration: there are various use cases, and I wouldn't have
> proposed this if useless.
>
> Although, `String.tag` instead of `String.raw` seems like a welcome
> compromise, actually even more semantic, so the proposal would be to add a
> tag that does exactly what `String.raw` does without escaping sequences.
>
> As there is already an identical function that is a footgun for the
> described use-case, I don't see any extra complexity in having `String.tag`.
>
> Best Regards.
>
> On Mon, Jun 22, 2020 at 2:00 PM Bruno Macabeus <bruno.macabeus at gmail.com>
> wrote:
>
>> You could just use comments in order to provide metainformations to your
>> developer tools instead of adding a new feature on language.
>>
>> const style = /*css*/`
>>   body {
>>     color: green;
>>   }
>> `;
>>
>> const node = /*html*/`
>>   <div>hello world</div>
>> `;
>>
>> Or an even better solution is change your highlight to firstly try to match a HTML, if fail try to match CSS, if fail match as a plain string.
>>
>> IMHO it isn't necessary to increase the complexity of JS to do that.
>>
>>
>> On Mon, 22 Jun 2020 at 12:02, François REMY <
>> francois.remy.dev at outlook.com> wrote:
>>
>>> What exactly are you proposing to do differently than String.raw?
>>>
>>>
>>> https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/string/raw
>>>
>>> Sent from my phone
>>> ------------------------------
>>> *From:* es-discuss <es-discuss-bounces at mozilla.org> on behalf of Andrea
>>> Giammarchi <andrea.giammarchi at gmail.com>
>>> *Sent:* Monday, June 22, 2020 12:24:13 PM
>>> *To:* es-discuss at mozilla.org <es-discuss at mozilla.org>
>>> *Subject:* A Function.tag proposal?
>>>
>>> This is something somehow bothering developers and tools, sooner or
>>> later, the need for a no-op template literal tag function that just returns
>>> the string as is.
>>>
>>> The current workaround to have highlights, proper content minification,
>>> etc, is the following one:
>>>
>>> ```js
>>>
>>> import css from 'dummy-tag';import html from 'dummy-tag';
>>> const style = css`  body {    color: green;  }`;
>>> const node = html`  <div>hello world</div>`;
>>>
>>> ```
>>>
>>> but as irrelevant as the dummy-tag code is, in size, it's a dependency,
>>> and a function that can't get easily optimized, due the nature of the tag
>>> signature.
>>>
>>> ### Proposal
>>>
>>> Provide a static `Function.tag` which internally flattens out any
>>> template literal content.
>>>
>>> ```js
>>>
>>> const css = Function.tag;
>>> const html = Function.tag;
>>>
>>> const style = css`  body {    color: green;  }`;
>>> const node = html`  <div>hello world</div>`;
>>>
>>> ```
>>>
>>> Internally it will place eventual interpolations within template chunks,
>>> and return a string.
>>>
>>> ```js
>>> Function.tag`1${2}3` === '123';
>>> ```
>>>
>>> That's it. Thoughts?
>>>
>>> Best Regards
>>>
>>>
>>>
>>> _______________________________________________
>>> 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/20200622/45eeb9f0/attachment.html>


More information about the es-discuss mailing list