expanding comments proposal #717
Description
Currently there are two ways to make comments // and /**/ 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 js 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 js 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.
EDIT: We can "use strict comments"; to prevent web breakage
Example ES2015 code
<!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
<!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>