function id(v) { return v }
class C {
  @id x = y
}

class C {
  // префикс # указывает на приватность переменной-поля
  #x = y
  get x() { return this.#x }
  set x(v) { this.#x = v }
}

class C {
  @id x = this.y
  @id y
}
new C // TypeError

// расширение .mjs указывает на файл-модуль
import { logged } from './logged.mjs'
class C {
  @logged
  m(arg) {
    this.#x = arg
  }
  @logged
  set #x(value) { }
}
new C().m(1)
// запуск m с аргументами 1
// запуск set #x с аргументами 1
// завершение set #x
// завершение m

// logged.mjs
export function logged(f) {
  // получаем название функции
  const name = f.name
  function wrapped(...args) {
    // сообщаем о запуске функции
    console.log(`запуск ${name} с аргументами ${args.join(', ')}`)
    // получаем результат выполнения функции
    const ret = f.call(this, ...args)
    // сообщаем о завершении функции
    console.log(`завершение ${name}`)
    // возвращаем результат
    return ret
  }
  // Object.defineProperty() определяет новое или изменяет существующее свойство объекта
  // https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
  Object.defineProperty(wrapped, 'name', { value: name, configurable: true })
  // возвращаем обертку
  return wrapped
}

let x_setter
class C {
  m(arg) {
    this.#x = arg
  }
  static #x_setter(value) { }
  // предложение - статические блоки инициализации класса (class static initialization blocks)
  // https://github.com/tc39/proposal-class-static-block
  static { x_setter = C.#x_setter }
  set #x(value) { return x_setter.call(this, value) }
}
C.prototype.m = logged(C.prototype.m, { kind: "method", name: "m", isStatic: false })
x_setter = logged(x_setter, {kind: "setter", isStatic: false})

import { defineElement } from './defineElement.js'
@defineElement('my-class')
class MyClass extends HTMLElement { }

// defineElement.mjs
export function defineElement(name, options) {
  return klass => {
    customElements.define(name, klass, options); return klass
  }
}

// добавление метаданных к классу
@annotate({x: 'y'}) @annotate({v: 'w'}) class C {
  // добавление метаданных к методу
  @annotate({a: 'b'}) method() { }
  // добавление метаданных к полю
  @annotate({c: 'd'}) field
}
C[Symbol.metadata].class.x                    // 'y'
C[Symbol.metadata].class.v                    // 'w'
// методы, предоставляемые классом, являются распределенными или совместными,
C[Symbol.metadata].prototype.methods.method.a // 'b'
// а поля собственными
C[Symbol.metadata].instance.fields.field.c    // 'd'

function annotate(metadata) {
  return (_, context) => {
    context.metadata = metadata
    return _
  }
}

import {tracked} from './tracked.mjs'
class Element {
  @tracked counter = 0
  increment() { this.counter++ }
  render() { console.log(counter) }
}
const e = new Element()
e.increment() // в консоль выводится 1
e.increment() // 2

// tracked.mjs
export function tracked({ get, set }) {
  return {
    get,
    set(value) {
      if (get.call(this) !== value) {
        set.call(this, value)
        this.render()
      }
    }
  }
}

import { PrivateKey } from './private-key.mjs'
let key = new PrivateKey()
export class Box {
  @key.show #contents
}
export function setBox(box, contents) {
  return key.set(box, contents)
}
export function getBox(box) {
  return key.get(box)
}

// private-key.mjs
export class PrivateKey {
#get
#set
show({ get, set }) {
  assert(this.#get === undefined && this.#set === undefined)
  this.#get = get
  this.#set = set
  return { get, set }
}
get(obj) {
  return this.#get.call(obj)
}
set(obj, value) {
  return this.#set.call(obj, value)
}
}

import { deprecated } from './deprecated.mjs'
export class MyClass {
  @deprecated field
  @deprecated method() { }
  otherMethod() { }
}

function wrapDeprecated(fn) {
  let name = fn.name
  function method(...args) {
    console.warn(`код ${name} признан устаревшим`)
    return fn.call(this, ...args)
  }
  Object.defineProperty(method, 'name', { value: name, configurable: true })
  return method
}
export function deprecated(element, { kind }) {
  switch (kind) {
    case 'method':
    case 'getter':
    case 'setter':
      return wrapDeprecated(element)
    case 'field': {
      let { get, set } = element
      return { get: wrapDeprecated(get), set: wrapDeprecated(set) }
    }
    default:
      // включая 'class'
      throw new Error(`${kind} является недопустимой целью @deprecated`)
  }
}

class MyClass extends WithActions(HTMLElement) {
  @on('click') clickHandler() {}
}

// у нас может быть несколько обработчиков с одинаковыми именами,
// поэтому используется Symbol
// https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol
const handler = Symbol('handler')
function on(eventName) {
  return (method, context) => {
    context.metadata = { [handler]: eventName }
    return method
  }
}
class MetadataLookupCache {
  // в качестве ключей используются объекты,
  // во избежание утечек памяти используется WeakMap
  // https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
  #map = new WeakMap()
  #name
  constructor(name) { this.#name = name }
  get(newTarget) {
    let data = this.#map.get(newTarget)
    if (data === undefined) {
      data = []
      let klass = newTarget
      while (klass !== null && !(this.#name in klass)) {
        for (const [name, { [this.#name]: eventName }] of Object.entries(klass[Symbol.metadata].instance.methods)) {
          if (eventName !== undefined) {
            data.push({ name, eventName })
          }
        }
        klass = klass.__proto__
      }
      this.#map.set(newTarget, data)
    }
    return data
  }
}
const handlersMap = new MetadataLookupCache(handler)
function WithActions(superClass) {
  return class C extends superClass {
    constructor(...args) {
      super(...args)
      const handlers = handlersMap.get(new.target, C)
      for (const { name, eventName } of handlers) {
        this.addEventListener(eventName, this[name].bind(this))
      }
    }
  }
}

class C extends WithBoundMethod(Object) {
  #x = 1
  @bound method() { return this.#x }
}
const c = new C()
const m = c.method
m() // 1, а не TypeError

const boundName = Symbol('boundName')
function bound(method, context) {
  context.metadata = { [boundName]: true }
  return method
}
const boundMap = new MetadataLookupCache(boundName)
function WithBoundMethods(superClass) {
  return class C extends superClass {
    constructor(...args) {
      super(...args)
      const names = boundMap.get(new.target, C)
      for (const { name } of names) {
        this[name] = this[name].bind(this)
      }
    }
  }
}

class MyElement extends HTMLElement {
  @init: on('click') clickHandler()
}

function on(eventName) {
  return (method, context) => {
    assert(context.kind === 'init-method')
    return { method, initialize() { this.addEventListener(eventName, method) } }
  }
}

class C {
  #x = 1
  @init: bound method() { return this.#x }
}
const c = new C()
const m = c.method
m() // 1, а не TypeError

function bound(method, { kind, name }) {
  assert(kind === 'init-method')
  return { method, initialize() { this[name] = this[name].bind(this) } }
}