<commit_before>- name: Components
  comparisons:
  - label: Define Component
    frameworks:
      react:
        js: class Polyglot extends React.Component
      angular2:
        js: "@Component({})class Polyglot {}"
      angular1:
        js: module.component('polyglot', {})
      polymer:
        js: class Polyglot extends HTMLElement
      vue:
        js: class Polyglot extends Vue

- name: Component communication
  comparisons:
  - label: One-way data binding
    frameworks:
      react: <Child foo={bar} />
      angular2: <Child [foo]="bar" />
      angular1: <Child foo='scope.bar' />
      polymer: '<Child foo="{{ bar }}" />'
      vue: <Child :foo='bar' />
  - label: String literal prop
    frameworks:
      react: <Child foo='bar' />
      angular2: <Child foo='bar' />
      angular1: <Child foo='bar' />
      polymer: <Child foo='bar' />
      vue: <Child foo='bar' />
  - label: Two-way data binding
    frameworks:
      react:
        js: // not supported
      angular2: <Child [(foo)]="bar" />
      angular1: <input ng-model="foo" />
      polymer:
      vue: <input v-model="foo" />
  - label: Prop validation
    frameworks:
      react:
        js: "propTypes: {}"
      angular2:
      angular1:
      polymer:
        js: "properties: {}"
      vue:
        js: "props: {}"

- name: Component lifecycle methods
  comparisons:
  - label: Initialized
    frameworks:
      react: componentWillMount
      angular2: ngOnInit
      angular1: $onInit()
      polymer: created
      vue: created
  - label: DOM Ready
    frameworks:
      react: componentDidMount
      angular2: ngAfterContentInit
      angular1: $postLink
      polymer: ready
      vue: ready
  - label: On prop change
    frameworks:<commit_msg>More data<commit_after>- name: Components
  comparisons:
  - label: Define Component
    frameworks:
      react:
        js: class Polyglot extends React.Component
      angular2:
        js: "@Component({})class Polyglot {}"
      angular1:
        js: module.component('polyglot', {})
      polymer:
        js: class Polyglot extends HTMLElement
      vue:
        js: class Polyglot extends Vue

- name: Component communication
  comparisons:
  - label: One-way data binding
    frameworks:
      react: <Child foo={bar} />
      angular2: <Child [foo]="bar" />
      angular1: <Child foo='scope.bar' />
      polymer: '<Child foo="{{ bar }}" />'
      vue: <Child :foo='bar' />
  - label: String literal prop
    frameworks:
      react: <Child foo='bar' />
      angular2: <Child foo='bar' />
      angular1: <Child foo='bar' />
      polymer: <Child foo='bar' />
      vue: <Child foo='bar' />
  - label: Two-way data binding
    frameworks:
      react:
        js: // not supported
      angular2: <Child [(foo)]="bar" />
      angular1: <input ng-model="foo" />
      polymer:
      vue: <input v-model="foo" />
  - label: Prop validation key
    frameworks:
      react:
        js: "propTypes: {}"
      angular2:
      angular1:
      polymer:
        js: "properties: {}"
      vue:
        js: "props: {}"
  - label: Prop validate Number
    frameworks:
      react:
        js: "myNum: React.PropTypes.number"
      angular2:
        js: "@Input() myNum: number;"
      angular1:
      polymer:
        js: "myNum: Number"
      vue:
        js: "myNum: Number"
  - label: Prop validate String
    frameworks:
      react:
        js: "myStr: React.PropTypes.string"
      angular2:
        js: "@Input() myStr: string;"
      angular1:
      polymer:
        js: "myStr: String"
      vue:
        js: "myStr: String"
  - label: Prop validate union
    frameworks:
      react:
      angular2:
        js: "@Input() myVar: string | number;"
      angular1:
      polymer:
      vue:
        js: "myVar: [String, Number]"

- name: Component lifecycle methods
  comparisons:
  - label: Initialized
    frameworks:
      react: componentWillMount
      angular2: ngOnInit
      angular1: $onInit()
      polymer: created
      vue: created
  - label: DOM Ready
    frameworks:
      react: componentDidMount
      angular2: ngAfterContentInit
      angular1: $postLink
      polymer: ready
      vue: ready
  - label: On prop change
    frameworks:
{'fraction_non_alphanumeric': 0.1221192682347351, 'fraction_numerical': 0.008077928248990259, 'mean_word_length': 2.0842490842490844, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, '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': '726555', 'n_tokens_mistral': 1320, 'n_tokens_neox': 1290, 'n_words': 364}