expanding comments proposal

Gert Cuykens gert.cuykens at gmail.com
Thu Oct 20 17:14:24 UTC 2016


Currently there are two ways to make comments `//` and `/**/` in
Ecma262. I think if Ecma262 has a broader way of implementing comments
it can open up the door for third party type checkers and leave the
burden onto others without the need for transpiling.

I am looking into how close ES20XX syntax for example compares to
typescript syntax. A Ecma262 compiler doesn't need to look at the
typings at all, just be smart enough to ignore typings. Is the Ecma262
community willing to look at a few syntax notations that a Ecma262
parser should ignore?

If there is no objection at first look I am going to put in the effort
to try to cover a complete syntax that extends `//` and `/**/` so
others can use that to implement for example a type checker? Notice
that I am not asking for type checking itself, just expanding `//` and
`/**/` that makes it possible for others to do for example type
checking and maintain a clean syntax look of their code.

## Example ES2015 code

```html
<!DOCTYPE html>
<html >

<head>
  <title>Test</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0" />
</head>

<body>
  <template>
    <style>
      :host {
          display: block;
          box-sizing: border-box;
          border: 1px solid red;
          margin: 13px 0;
          padding: 0 17px;
      }
    </style>
    <p>Test <slot></slot></p>
  </template>
  <script>
    class HelloWorld extends HTMLElement {
      constructor() {
        super()
        const t = document.querySelector('template')
        const instance = t.content.cloneNode(true)
        const shadowRoot = this.attachShadow({ mode: 'open' })
        shadowRoot.appendChild(instance)
      }
    }
    customElements.define('hello-world', HelloWorld)
  </script>
  <hello-world>Hello World</hello-world>
</body>
</html>
```

## Example typescript code

```html
<!DOCTYPE html>
<html >

<head>
  <title>Test</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0" />
</head>

<body>
  <template>
    <style>
      :host {
          display: block;
          box-sizing: border-box;
          border: 1px solid red;
          margin: 13px 0;
          padding: 0 17px;
      }
    </style>
    <p>Test <slot></slot></p>
  </template>
  <script type="ts/module">
    class HelloWorld extends HTMLElement {
      constructor() {
        super()
        const t:type1 = document.querySelector('template')
        const instance:type2 = t.content.cloneNode(true)
        const shadowRoot:type3 = this.attachShadow({ mode: 'open' })
        shadowRoot.appendChild(instance)
      }
    }
    customElements.define('hello-world', HelloWorld)
  </script>
  <hello-world>Hello World</hello-world>
</body>
</html>
```


More information about the es-discuss mailing list