Change syntax

[DrSensor]

The old syntax has quite a problem when used in site generator that still rely on XML parser 😭 (legacy of polyglot markup and XHTML5)

Here is the new syntax

<render-scope>
  <link href=module.js>

  <template shadowrootmode=closed>
    <button disabled ~ !disabled
            #ref=button
            @click=increment .value=count>
      Count: <span ~ #text=count>0</span>
    </button>
    <input inputmode=numeric type=number
           disabled ~ !disabled
           @change=set .value=count>

    <button disabled ~ !disabled #init=magic>Magic</button>
  </template>
</render-scope>

module.js

/** @this HTMLElementButton */
export function magic() {
  const text = new Text("")
  this.onclick = () => text.value += this.textContent
  this.append(text)
}

export default class {
  accessor count = 0
  increment() { this.count++ }

  /** @type HTMLElementButton */ button

  constructor() {
    let count = 10
    this.button.addEventListener("click", function() {
      console.log(count--)
      console.debug(this + "")
    })
  }
}