30:[] 2e:{"title":"Sugar strings","cells":[{"id":0,"value":"md`# Sugar strings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`**Sugar strings** is a small experimental module to enhance ES6 string interpolation syntax adding tests and loops. This could be useful to remove lots of syntax when using the HTML template literal here on Observable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"data = ['apples', 'oranges', 'lemons', 'pears']","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`Examples:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"html`I really like ${data[0]}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"html`

${(d) => d.toUpperCase()}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`## Public functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`### $if\n\\`$if(test) : String\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$$if = (test) => (literals, ...substitutions) => test ? _funtag(literals, substitutions)() : ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`**$if** Outputs the template string only if the provided test is truthy:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$$if(4%2 == 0)`Even!`","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"$$if(5%2 == 0)`Even!`","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`*(You can use the ternary operator instead if you want an else branch)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### $each\n\\`$each(data, separator='') : String\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$$each = (data, separator='') => (literals, ...substitutions) => data.map(_funtag(literals, substitutions)).join(separator)","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`**$each** repeates the template string for each element in the given array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$$each(data)``","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`You can join the strings with a custom separator if you pass it as a second parameter:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$$each(data,' ')``","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`String interpolation also accepts a function, which is called for each datum in the array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$$each(data,' ')` d.toUpperCase()}!>`","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`You can use **$each** with the HTML template literal:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html`\n

Test: ${(d) => d}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Internal functions\nThis is an implementation of a \"passthrough\" tag function modified to also accept functions of a datum as substitutions (see: https://leanpub.com/understandinges6/read#defining-tags):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"_funtag = (literals, substitutions) => function(d, index) {\n let result = \"\"\n\n // run the loop only for the substitution count\n for (let i = 0; i < substitutions.length; i++) {\n result += literals[i]\n result += typeof substitutions[i] === \"function\" ? substitutions[i](d, index) : substitutions[i]\n }\n\n // add the last literal\n result += literals[literals.length - 1]\n\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}