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>
```
_______________________________________________
es-discuss mailing list
[email protected]
https://mail.mozilla.org/listinfo/es-discuss
