<commit_before>const {h, createNode, Component} = petitDom

class Counter extends Component {
  constructor(props) {
    super(props)
    this.count = 0
    this.inc = () => {
      this.count++
      this.updateUI(this.onInc)
    }
    this.remove = () => this.props.onRemove(this.props.id)
  }

  onMount() {
    console.log('Counter mounted', this.props.id, this.domNode)
  }

  onUnmount() {
    console.log('Counter unmounted', this.props.id, this.domNode)
  }

  onInc() {
    console.log('Counter incremented', this.props.id, this.domNode)
  }

  render() {
    return h('p', null,
      h('button', {onclick: this.inc}, '+'),
      h('button', {onclick: this.remove}, 'X'),
      'Counter #', this.props.id,': ', this.count
    )
  }
}

class App extends Component {

  constructor(props) {
    super(props)
    this.counters = []
    this.uid = 1
    this.addCounter = () => {
      this.counters.push(this.uid++)
      this.updateUI()
    }
    this.removeCounter = id => {
      this.counters = this.counters.filter(it => it !== id)
      this.updateUI()
    }
  }

  onMount() {
    console.log('App mounted', this.domNode)
    this.addCounter()
  }

  render() {
    return h('div', null,
      h('h1', null,  'counters demo'),
      h('button', {onclick: this.addCounter}, 'Add Counter'),
      this.counters.map(id => (
        h(Counter, {id, onRemove: this.removeCounter})
      ))
    )
  }
}

const vel = h(App)
document.body.appendChild(createNode(vel))
<commit_msg>component example<commit_after><!doctype html>
<html lang="en">
<head>
  <title>petit-dom Hello example</title>
</head>
<body>

  <script src="../../dist/petit-dom.dev.js"></script>
  <script>
    const {h, createNode, Component} = petitDom

    class Counter extends Component {
      constructor(props) {
        super(props)
        this.count = 0
        this.inc = () => {
          this.count++
          this.updateUI(this.onInc)
        }
        this.remove = () => this.props.onRemove(this.props.id)
      }

      onMount() {
        console.log('Counter mounted', this.props.id, this.domNode)
      }

      onUnmount() {
        console.log('Counter unmounted', this.props.id, this.domNode)
      }

      onInc() {
        console.log('Counter incremented', this.props.id, this.domNode)
      }

      render() {
        return h('p', null,
          h('button', {onclick: this.inc}, '+'),
          h('button', {onclick: this.remove}, 'X'),
          'Counter #', this.props.id,': ', this.count
        )
      }
    }

    class App extends Component {

      constructor(props) {
        super(props)
        this.counters = []
        this.uid = 1
        this.addCounter = () => {
          this.counters.push(this.uid++)
          this.updateUI()
        }
        this.removeCounter = id => {
          this.counters = this.counters.filter(it => it !== id)
          this.updateUI()
        }
      }

      onMount() {
        console.log('App mounted', this.domNode)
        this.addCounter()
      }

      render() {
        return h('div', null,
          h('h1', null,  'counters demo'),
          h('button', {onclick: this.addCounter}, 'Add Counter'),
          this.counters.map(id => (
            h(Counter, {id, onRemove: this.removeCounter})
          ))
        )
      }
    }

    document.body.appendChild(createNode(h(App)))

  </script>
</body>

</html>

{'fraction_non_alphanumeric': 0.16775147928994083, 'fraction_numerical': 0.0017751479289940828, 'mean_word_length': 2.113259668508287, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 28, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4100614', 'n_tokens_mistral': 1140, 'n_tokens_neox': 1105, 'n_words': 200}