Allow any quoted string to be multiline?

kai zhu kaizhu256 at gmail.com
Fri Dec 15 18:35:14 UTC 2017


> On Friday, December 15, 2017 2:48:00 PM CET Isiah Meadows wrote:
>> There are ES5 newline escapes. However, it'd be nice if I didn't have
>> to resort to templates just for multiline strings. Note: it wouldn't
>> actually simplify parsing by much - either you're handling the case
>> and remapping CR/CRLF to NL, or you're handling the case and throwing
>> an error.

es5 multiline escapes (with newline) are perfectly adequate. here’s are several real-world examples and screenshots of multi-line templates using es5 escapes

https://github.com/kaizhu256/node-utility2/blob/2017.9.15/lib.utility2.js#L1114 <https://github.com/kaizhu256/node-utility2/blob/2017.9.15/lib.utility2.js#L1114>
https://github.com/kaizhu256/node-swgg/blob/2017.7.24/lib.swgg.js#L1323 <https://github.com/kaizhu256/node-swgg/blob/2017.7.24/lib.swgg.js#L1323>
https://github.com/kaizhu256/node-istanbul-lite/blob/2017.5.27/lib.istanbul.js#L1996 <https://github.com/kaizhu256/node-istanbul-lite/blob/2017.5.27/lib.istanbul.js#L1996>

```javascript
// init lib istanbul.report.templates.foot
/* jslint-ignore-begin */
...

// init lib istanbul.report.templates.head
// 2014-07-04T07:47:53Z
// https://github.com/gotwarlost/istanbul/blob/v0.2.16/lib/report/templates/head.txt <https://github.com/gotwarlost/istanbul/blob/v0.2.16/lib/report/templates/head.txt>
local['head.txt'] = '\
<!doctype html>\n\
<html lang="en">\n\
<head>\n\
    <title>Code coverage report for {{entity}}</title>\n\
    <meta charset="utf-8">\n\
    <style>\n\
        body, html {\n\
            margin:0; padding: 0;\n\
        }\n\
        body {\n\
            font-family: Arial, Helvetica;\n\
            font-size: 10pt;\n\
        }\n\
        div.header, div.footer {\n\
            background: #eee;\n\
            padding: 1em;\n\
        }\n\
        div.header {\n\
            height: 160px;\n\
            padding: 0 1em 0 1em;\n\
            z-index: 100;\n\
            position: fixed;\n\
            top: 0;\n\
            border-bottom: 1px solid #666;\n\
            width: 100%;\n\
        }\n\
        div.footer {\n\
            border-top: 1px solid #666;\n\
        }\n\
        div.body {\n\
            margin-top: 170px;\n\
        }\n\
        div.meta {\n\
            font-size: 90%;\n\
            text-align: center;\n\
        }\n\
        h1, h2, h3 {\n\
            font-weight: normal;\n\
        }\n\
        h1 {\n\
            font-size: 12pt;\n\
        }\n\
        h2 {\n\
            font-size: 10pt;\n\
        }\n\
        pre {\n\
            font-family: Menlo, Monaco, Consolas, Courier New, monospace;\n\
            margin: 0;\n\
            padding: 0;\n\
            font-size: 14px;\n\
            tab-size: 2;\n\
        }\n\
\n\
        div.path { font-size: 110%; }\n\
        div.path a:link, div.path a:visited { color: #000; }\n\
        table.coverage { border-collapse: collapse; margin:0; padding: 0 }\n\
\n\
        table.coverage td {\n\
            margin: 0;\n\
            padding: 0;\n\
            color: #111;\n\
            vertical-align: top;\n\
        }\n\
        table.coverage td.line-count {\n\
            width: 50px;\n\
            text-align: right;\n\
            padding-right: 5px;\n\
        }\n\
        table.coverage td.line-coverage {\n\
            color: #777 !important;\n\
            text-align: right;\n\
            border-left: 1px solid #666;\n\
            border-right: 1px solid #666;\n\
        }\n\
\n\
        table.coverage td.text {\n\
        }\n\
\n\
        table.coverage td span.cline-any {\n\
            display: inline-block;\n\
            padding: 0 5px;\n\
            width: 40px;\n\
        }\n\
        table.coverage td span.cline-neutral {\n\
            background: #eee;\n\
        }\n\
        table.coverage td span.cline-yes {\n\
            background: #b5d592;\n\
            color: #999;\n\
        }\n\
        table.coverage td span.cline-no {\n\
            background: #fc8c84;\n\
        }\n\
\n\
        .cstat-yes { color: #111; }\n\
        .cstat-no { background: #fc8c84; color: #111; }\n\
        .fstat-no { background: #ffc520; color: #111 !important; }\n\
        .cbranch-no { background:  yellow !important; color: #111; }\n\
\n\
        .cstat-skip { background: #ddd; color: #111; }\n\
        .fstat-skip { background: #ddd; color: #111 !important; }\n\
        .cbranch-skip { background: #ddd !important; color: #111; }\n\
\n\
        .missing-if-branch {\n\
            display: inline-block;\n\
            margin-right: 10px;\n\
            position: relative;\n\
            padding: 0 4px;\n\
            background: black;\n\
            color: yellow;\n\
        }\n\
\n\
        .skip-if-branch {\n\
            display: none;\n\
            margin-right: 10px;\n\
            position: relative;\n\
            padding: 0 4px;\n\
            background: #ccc;\n\
            color: white;\n\
        }\n\
\n\
        .missing-if-branch .typ, .skip-if-branch .typ {\n\
            color: inherit !important;\n\
        }\n\
\n\
        .entity, .metric { font-weight: bold; }\n\
        .metric { display: inline-block; border: 1px solid #333; padding: 0.3em; background: white; }\n\
        .metric small { font-size: 80%; font-weight: normal; color: #666; }\n\
\n\
        div.coverage-summary table { border-collapse: collapse; margin: 3em; font-size: 110%; }\n\
        div.coverage-summary td, div.coverage-summary table  th { margin: 0; padding: 0.25em 1em; border-top: 1px solid #666; border-bottom: 1px solid #666; }\n\
        div.coverage-summary th { text-align: left; border: 1px solid #666; background: #eee; font-weight: normal; }\n\
        div.coverage-summary th.file { border-right: none !important; }\n\
        div.coverage-summary th.pic { border-left: none !important; text-align: right; }\n\
        div.coverage-summary th.pct { border-right: none !important; }\n\
        div.coverage-summary th.abs { border-left: none !important; text-align: right; }\n\
        div.coverage-summary td.pct { text-align: right; border-left: 1px solid #666; }\n\
        div.coverage-summary td.abs { text-align: right; font-size: 90%; color: #444; border-right: 1px solid #666; }\n\
        div.coverage-summary td.file { text-align: right; border-left: 1px solid #666; white-space: nowrap;  }\n\
        div.coverage-summary td.pic { min-width: 120px !important;  }\n\
        div.coverage-summary a:link { color: #000; }\n\
        div.coverage-summary a:visited { color: #333; }\n\
        div.coverage-summary tfoot td { border-top: 1px solid #666; }\n\
\n\
        div.coverage-summary .yui3-datatable-sort-indicator, div.coverage-summary .dummy-sort-indicator {\n\
            height: 10px;\n\
            width: 7px;\n\
            display: inline-block;\n\
            margin-left: 0.5em;\n\
        }\n\
        div.coverage-summary .yui3-datatable-sort-indicator {\n\
            background: no-repeat scroll 0 0 transparent;\n\
        }\n\
        div.coverage-summary .yui3-datatable-sorted .yui3-datatable-sort-indicator {\n\
            background-position: 0 -20px;\n\
        }\n\
        div.coverage-summary .yui3-datatable-sorted-desc .yui3-datatable-sort-indicator {\n\
            background-position: 0 -10px;\n\
        }\n\
\n\
        .high { background: #b5d592 !important; }\n\
        .medium { background: #ffe87c !important; }\n\
        .low { background: #fc8c84 !important; }\n\
\n\
        span.cover-fill, span.cover-empty {\n\
            display:inline-block;\n\
            border:1px solid #444;\n\
            background: white;\n\
            height: 12px;\n\
        }\n\
        span.cover-fill {\n\
            background: #ccc;\n\
            border-right: 1px solid #444;\n\
        }\n\
        span.cover-empty {\n\
            background: white;\n\
            border-left: none;\n\
        }\n\
        span.cover-full {\n\
            border-right: none !important;\n\
        }\n\
        pre.prettyprint {\n\
            border: none !important;\n\
            padding: 0 !important;\n\
            margin: 0 !important;\n\
        }\n\
        .com { color: #999 !important; }\n\
        .ignore-none { color: #999; font-weight: normal; }\n\
\n\
    </style>\n\
</head>\n\
<body>\n\
<div class="header {{reportClass}}">\n\
    <h1 style="font-weight: bold;">\n\
        <a href="{{env.npm_package_homepage}}">{{env.npm_package_name}} (v{{env.npm_package_version}})</a>\n\
    </h1>\n\
    <h1>Code coverage report for <span class="entity">{{entity}}</span></h1>\n\
    <h2>\n\
        {{#with metrics.statements}}\n\
        Statements: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span>     \n\
        {{/with}}\n\
        {{#with metrics.branches}}\n\
        Branches: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span>     \n\
        {{/with}}\n\
        {{#with metrics.functions}}\n\
        Functions: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span>     \n\
        {{/with}}\n\
        {{#with metrics.lines}}\n\
        Lines: <span class="metric">{{pct}}% <small>({{covered}} / {{total}})</small></span>     \n\
        {{/with}}\n\
        Ignored: <span class="metric">{{#show_ignores metrics}}{{/show_ignores}}</span>     \n\
    </h2>\n\
    {{{pathHtml}}}\n\
</div>\n\
<div class="body">\n\
';
/* jslint-ignore-end */
```

live web-demo of Istanbul coverage-report rendered in browser from es5 multiline templates
http://kaizhu256.github.io/node-istanbul-lite/build..beta..travis-ci.org/app/ <http://kaizhu256.github.io/node-istanbul-lite/build..beta..travis-ci.org/app/>


various html input-elements rendered from es5 multiline escape templates @ http://kaizhu256.github.io/node-swgg/build..beta..travis-ci.org/app/#!swgg_id_x_test_parametersDefault_1 <http://kaizhu256.github.io/node-swgg/build..beta..travis-ci.org/app/#!swgg_id_x_test_parametersDefault_1>

> On Dec 15, 2017, at 8:53 PM, kdex <kdex at kdex.de <mailto:kdex at kdex.de>> wrote:
> 
> Sorry to be pedantic here, but:
> 
> ```js
> "this\
> right\
> here"
> ```
> 
> aren't escaped newlines; that would be "\n".
> Those up there are line continuations. :)
> 
> On Friday, December 15, 2017 2:48:00 PM CET Isiah Meadows wrote:
>> There are ES5 newline escapes. However, it'd be nice if I didn't have
>> to resort to templates just for multiline strings. Note: it wouldn't
>> actually simplify parsing by much - either you're handling the case
>> and remapping CR/CRLF to NL, or you're handling the case and throwing
>> an error.
>> 
>> ```js
>> // ES5 escaped newlines
>> 'a multi-\
>> line string'
>> ```
>> -----
>> 
>> Isiah Meadows
>> me at isiahmeadows.com <mailto:me at isiahmeadows.com>
>> 
>> Looking for web consulting? Or a new website?
>> Send me an email and we can get started.
>> www.isiahmeadows.com
>> 
>> On Fri, Dec 15, 2017 at 8:43 AM, J Decker <d3ck0r at gmail.com> wrote:
>>> If any string were allowed to be multi-line it would not break any
>>> existing
>>> code, and it would simplify parsing strings.
>>> 
>>> 'a multi-
>>> line string'
>>> 
>>> Maybe this is a question... why not allow line spanning with single and
>>> double quoted strings?
>>> 
>>> _______________________________________________
>>> 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 <mailto: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/20171216/2906f0fa/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2017-12-16 at 1.12.19 AM.png
Type: image/png
Size: 346278 bytes
Desc: not available
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20171216/2906f0fa/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: desktop.png
Type: image/png
Size: 251978 bytes
Desc: not available
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20171216/2906f0fa/attachment-0003.png>


More information about the es-discuss mailing list