<div dir="ltr"><div>Naveen, please read more about template literals tags, thanks.</div><div><br></div><div><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates</a></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Mon, Aug 19, 2019 at 12:16 PM Naveen Chawla <<a href="mailto:naveen.chwl@gmail.com">naveen.chwl@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">HTML tags? Afraid I still don't get that aspect. Perhaps my reading style is not matching your writing style. I understood everything else. I would still need a really simple example(/s) completed with sample input data from start to finish (for tags).<div><br></div><div>Anyway from what I'm seeing so far I think "weave" is a better name than "joinWith".</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Mon, 19 Aug 2019 at 09:56, Andrea Giammarchi <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>A lot of libraries flatten template tags for a reason or another. The JSX oriented `htm` project [1], as example, does that to obtain a single key, since TypeScript has broken template literals, and avoiding duplicated work per same literal is a common template tag based libraries use case.</div><div><br></div><div>Here the code: <a href="https://github.com/developit/htm/blob/master/src/index.mjs#L25-L31" target="_blank">https://github.com/developit/htm/blob/master/src/index.mjs#L25-L31</a></div><div><br></div><div>That could be `template[0].length + '-' + template.joinWith(template.map(chunk => chunk.length + '-'))`</div><div><br></div><div>Dummy no-op functions (this is only an example <a href="https://github.com/WebReflection/i18n-dummy/blob/master/esm/main.js" target="_blank">https://github.com/WebReflection/i18n-dummy/blob/master/esm/main.js</a>) are also common, + I've used myself the pattern over and over in various occasions, where you can use a generic function either as regular or as a tag.</div><div><br></div><div>Accordingly, the simplification would be handy already, and extra use cases, as the one used with the date separator, or any other similar one, shows possible new ways to easily join arbitrary amount of data.</div><div><br></div><div>Because of these previous points, I've thought proposing this was worth a shot.<br></div><div><br></div><div>[1] <a href="https://github.com/developit/htm" target="_blank">https://github.com/developit/htm</a></div><br></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, Aug 16, 2019 at 10:00 PM Jordan Harband <<a href="mailto:ljharb@gmail.com" target="_blank">ljharb@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Can you elaborate a bit more on how this is a *common* case in the wider ecosystem?</div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, Aug 16, 2019 at 5:29 AM Andrea Giammarchi <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>early reply .... "which otehr cases"? this is just an example:</div><div><br></div><div>[2019, 08, 16, 14, 28, 30].map(i => i < 10 ? ('0' + i) : i).joinWith('--T::.');<br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, Aug 16, 2019 at 2:24 PM Andrea Giammarchi <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>`this ${Symbol('throws')} an error`, so anything that cannot be represented as string should throw too, as it is for `[1, 2, 3].join(Symbol())`.</div><div><br></div><div>In few words, everything described as parameter for the `Array.prototype.join(param)` should be described as the iterable value, nothng new to add, nothing different to expect.</div><div><br></div><div>The template literal as is returns a string, but if you use tags, as functions, you deal with an array and a collection or extra values (0 to template.length - 1).</div><div><br></div><div>The current way to flatten a template via tag, used already in various projects for a reason or another, is the following one:</div><div><br></div><div>```js</div><div><span class="gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-901oao gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-16my406 gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-1qd0xha gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-ad9z0x gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-bcqeeo gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-qvutc0">function tag2str(template) {</span></div><div><span class="gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-901oao gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-16my406 gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-1qd0xha gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-ad9z0x gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-bcqeeo gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-qvutc0">  let str = template[0];</span></div><div><span class="gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-901oao gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-16my406 gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-1qd0xha gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-ad9z0x gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-bcqeeo gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-qvutc0">  for (let i = 1, t = template.length; i < t; i++)</span></div><div><span class="gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-901oao gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-16my406 gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-1qd0xha gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-ad9z0x gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-bcqeeo gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-qvutc0">    str += arguments[i] + template[i];</span></div><div><span class="gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-901oao gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-16my406 gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-1qd0xha gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-ad9z0x gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-bcqeeo gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-qvutc0">  return str;</span></div><div><span class="gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-901oao gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-css-16my406 gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-1qd0xha gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-ad9z0x gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-bcqeeo gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-r-qvutc0">}</span></div><div>```<br></div><div><br></div><div>I am proposing to simplify this common case with something that could be used for other cases too.<br></div><div><br></div><div><br></div><div><br></div><div><br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, Aug 16, 2019 at 1:17 PM Naveen Chawla <<a href="mailto:naveen.chwl@gmail.com" target="_blank">naveen.chwl@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Cool.<div><br></div><div>I get it now apart from the "templated string" example. I'm not very knowledgable about templated strings but on the face it looks like 'a${x}b${y}' already inserts x and y into the string, so I'm not sure what else is happening with your proposed method? Clearly I've missed something.</div><div><br></div><div>Apart from that, how would you handle arrays that whose values are not all strings?</div><div><br></div><div>For naming is still think "weave" would be OK from what I know so far</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, 16 Aug 2019 at 11:08, Andrea Giammarchi <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>given an array, it joins it through the values of the iterable argument, without ever resulting to undefined</div><div><br></div><div>['a', 'b', 'c'].joinWith(['-']) would produce "a-b-c"</div><br><div>['a', 'b', 'c'].joinWith([1, 2]) would produce "a1b2c"<div><br></div><div>['a', 'b', 'c'].joinWith('012') would produce "a0b1c"</div><div>note the string, as iterable, is acceptable too</div><div><br></div><div>const tag = (template, ...values) => template.joinWith(values);</div><div>tag`a${Math.random()}b${Math.random()}`; would fill the gap between a and b, or b and c, with the value returned by the two Math.random()</div><div><br></div><div>['a', 'b', 'c', 'd'].joinWith('01'); would produce "a0b1c0d" so that there's never an `undefined<br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, Aug 16, 2019 at 12:01 PM Naveen Chawla <<a href="mailto:naveen.chwl@gmail.com" target="_blank">naveen.chwl@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">I'm just not seeing what it's supposed to do. If you could give a brief explanation of the array method, and the string method then of course I would get it. I know it would seem obvious to you from the examples alone, it's just not to me.</div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, 16 Aug 2019 at 08:32, Andrea Giammarchi <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>Just to re-state: zip from lowdash, does **not** do what my proposed method does ... anything that won't produce the following result is not what I'm proposing</div><br><div><span class="gmail-m_-6783661269267991867gmail-m_8621973696031388615gmail-m_7011102872406735215gmail-m_1114520389483325974gmail-m_-9203167699720191342gmail-m_-4768803411757966304gmail-m_3286930923975228254gmail-m_-3252800813123468851gmail-m_2088145230228471687gmail-m_2243312729164488012gmail-im">console.log(['a', 'b', 'c', 'd'].joinWith([1, 2]));<br>// a1b2c1d<br><br>function tag2str(template, ...values) {<br>  return template.joinWith(values);<br>}<br><br>tag2str`a${1}b${2}c`;<br>// "a1b2c"</span></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, Aug 16, 2019 at 5:57 AM Isiah Meadows <<a href="mailto:isiahmeadows@gmail.com" target="_blank">isiahmeadows@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">For that, I'd rather see an `interleave` that just rotates through all<br>
its arguments. It'd be basically sugar for `.zip().flat()`, but an<br>
implementation could optimize the heck out of it. (In particular, they<br>
could iterate through them one-by-one and only allocate once, not in<br>
the hot loop, so it'd be fast.)<br>
<br>
I at one point had it in my list of wishlist proposals, but it somehow<br>
disappeared. I've since recreated it:<br>
<a href="https://github.com/isiahmeadows/es-stdlib-proposals/blob/master/proposals/array/interleave.md" rel="noreferrer" target="_blank">https://github.com/isiahmeadows/es-stdlib-proposals/blob/master/proposals/array/interleave.md</a><br>
<br>
-----<br>
<br>
Isiah Meadows<br>
<a href="mailto:contact@isiahmeadows.com" target="_blank">contact@isiahmeadows.com</a><br>
<a href="http://www.isiahmeadows.com" rel="noreferrer" target="_blank">www.isiahmeadows.com</a><br>
<br>
<br>
On Thu, Aug 15, 2019 at 1:12 PM Andrea Giammarchi<br>
<<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br>
><br>
> That;s not useful for template literals tags though<br>
><br>
> _.zip(['a', 'b', 'c'], [1, 2]);<br>
> [["a", 1], ["b", 2], ["c", undefined]]<br>
><br>
> it basically does nothing I've proposed ... any other name suggestion?<br>
><br>
> On Thu, Aug 15, 2019 at 3:40 PM Michał Wadas <<a href="mailto:michalwadas@gmail.com" target="_blank">michalwadas@gmail.com</a>> wrote:<br>
>><br>
>> <a href="https://lodash.com/docs/#zip" rel="noreferrer" target="_blank">https://lodash.com/docs/#zip</a><br>
>> <a href="https://docs.python.org/3/library/functions.html#zip" rel="noreferrer" target="_blank">https://docs.python.org/3/library/functions.html#zip</a><br>
>><br>
>> On Thu, 15 Aug 2019, 15:34 Andrea Giammarchi, <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br>
>>><br>
>>> the suggested name is just ... suggested, I don't have strong opinion on it, it just `join` values through other values<br>
>>> what's `Array.zip` ? I've no idea<br>
>>><br>
>>><br>
>>> On Thu, Aug 15, 2019 at 12:53 PM Michał Wadas <<a href="mailto:michalwadas@gmail.com" target="_blank">michalwadas@gmail.com</a>> wrote:<br>
>>>><br>
>>>> I would rather see Array.zip, it covers this use case.<br>
>>>><br>
>>>> On Thu, 15 Aug 2019, 10:50 Andrea Giammarchi, <<a href="mailto:andrea.giammarchi@gmail.com" target="_blank">andrea.giammarchi@gmail.com</a>> wrote:<br>
>>>>><br>
>>>>><br>
>>>>> I wonder if there's any interest in adding another handy Array method as joinWith could be:<br>
>>>>><br>
>>>>> ```js<br>
>>>>> // proposal example<br>
>>>>> Array.prototype.joinWith = function (values) {<br>
>>>>>   const {length} = this;<br>
>>>>>   if (length < 2)<br>
>>>>>     return this.join('');<br>
>>>>>   const out = [this[0]];<br>
>>>>>   const len = values.length;<br>
>>>>>   for (let i = 1; i < length; i++) {<br>
>>>>>     console.log(i, len);<br>
>>>>>     out.push(values[(i - 1) % len], this[i]);<br>
>>>>>   }<br>
>>>>>   return out.join('');<br>
>>>>> };<br>
>>>>> ```<br>
>>>>><br>
>>>>> The goal is to simplify joining array entries through not the same value, example:<br>
>>>>><br>
>>>>> ```js<br>
>>>>> console.log(['a', 'b', 'c', 'd'].joinWith([1, 2]));<br>
>>>>> // a1b2c1d<br>
>>>>><br>
>>>>> function tag2str(template, ...values) {<br>
>>>>>   return template.joinWith(values);<br>
>>>>> }<br>
>>>>><br>
>>>>> tag2str`a${1}b${2}c`;<br>
>>>>> // "a1b2c"<br>
>>>>> ```<br>
>>>>><br>
>>>>> Throughts?<br>
>>>>> _______________________________________________<br>
>>>>> es-discuss mailing list<br>
>>>>> <a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
>>>>> <a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
><br>
> _______________________________________________<br>
> es-discuss mailing list<br>
> <a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
> <a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
</blockquote></div>
_______________________________________________<br>
es-discuss mailing list<br>
<a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
</blockquote></div>
</blockquote></div>
</blockquote></div>
</blockquote></div>
</blockquote></div>
_______________________________________________<br>
es-discuss mailing list<br>
<a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
</blockquote></div>
</blockquote></div>
</blockquote></div>
</blockquote></div>