<commit_before>/** @babel */
/** @jsx etch.dom */

const etch = require('etch')

/**
 * An Etch component to display a list of packages
 *
 * @param props should have a key 'packages' which is a list of package
 *        names to display
 */
export default class PkgListComponent {
  constructor (props) {
    this.props = props || {}
    this.element = <div className='package-list' />
    etch.initialize(this)
  }

  // Required: The `render` method returns a virtual DOM tree representing the
  // current state of the component. Etch will call `render` to build and update
  // the component's associated DOM element. Babel is instructed to call the
  // `etch.dom` helper in compiled JSX expressions by the `@jsx` pragma above.
  /**
   * Returns the package list in <div><ul> structure
   */
  render () {
    let litems = []
    const pkgs = this.props.packages || []
    for (let pkg of pkgs) {
      litems.push(<li>{pkg}</li>)
    }
    if (litems.length === 0) {
      this.element = <div className='alert alert-info loading-area icon icon-hourglass'>Loading packages…</div>
    } else {
      this.element = <div className='package-list'>
        <ul>
          {litems}
        </ul>
      </div>
    }
    return this.element
  }

  // Required: Update the component with new properties
  update (props) {
    this.props = props || {}
    return etch.update(this)
  }

  get count () {
    const pkgs = this.props.packages || []
    return pkgs.length
  }

  async destroy () {
    await etch.destroy(this)
    this.props = null
  }
}
<commit_msg>correctly pass through className props<commit_after>/** @babel */
/** @jsx etch.dom */

import etch from 'etch'
import log4js from 'log4js'

const logger = log4js.getLogger('pkg-list-component')
logger.level = 'warn'

/**
 * An Etch component to display a list of packages
 *
 * @param props should have a key 'packages' which is a list of package
 *        names to display
 */
export default class PkgListComponent {
  constructor (props) {
    this.props = props || {}
    this.element = <div className='package-list' />
    etch.initialize(this)
  }

  // Required: The `render` method returns a virtual DOM tree representing the
  // current state of the component. Etch will call `render` to build and update
  // the component's associated DOM element. Babel is instructed to call the
  // `etch.dom` helper in compiled JSX expressions by the `@jsx` pragma above.
  /**
   * Returns the package list in <div><ul> structure
   */
  render () {
    let litems = []
    const pkgs = this.props.packages || []
    for (let pkg of pkgs) {
      litems.push(<li>{pkg}</li>)
    }
    if (litems.length === 0) {
      logger.debug(this.props)
      let placeholderClasses = 'alert alert-info loading-area icon icon-hourglass'
      if (this.props['className']) {
        placeholderClasses = `${placeholderClasses} ${this.props['className']}`
      }
      this.element = <div className={placeholderClasses}>Loading packages…</div>
    } else {
      logger.debug(this.props)
      let pkgListClasses = 'package-list'
      if (this.props['className']) {
        pkgListClasses = `${this.props['className']} package-list`
      }
      this.element = <div className={pkgListClasses}>
        <ul>
          {litems}
        </ul>
      </div>
    }
    return this.element
  }

  // Required: Update the component with new properties
  update (props) {
    this.props = props || {}
    return etch.update(this)
  }

  get count () {
    const pkgs = this.props.packages || []
    return pkgs.length
  }

  async destroy () {
    await etch.destroy(this)
    this.props = null
  }
}

{'fraction_non_alphanumeric': 0.12760702524698134, 'fraction_numerical': 0.0013721185510428102, 'mean_word_length': 2.652304609218437, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, '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': '3594066', 'n_tokens_mistral': 1115, 'n_tokens_neox': 1079, 'n_words': 344}