<commit_before>import React, { Component, PropTypes } from 'react'
import StyleContainer from './StyleContainer'
import resolveStyles from '../../core/dom/resolver'
import _ from 'lodash'

const contextType = { _lookConfig: PropTypes.object }
/**
 * Root wrapper that wraps your whole application
 * It renders the global CSS styles and passes the config down
 */
export default class LookRoot extends Component {
  static childContextTypes = contextType;
  static contextTypes = contextType;

  getChildContext() {
    return {
      _lookConfig: _.merge({ }, this.props.config, {
        _resolveStyles: resolveStyles
      })
    }
  }

  render() {
    const { config, ...otherProps } = this.props

    return (
      <div {...otherProps}>
        {this.props.children}
        <StyleComponent userAgent={config.userAgent} />
      </div>
    )
  }
}


/**
 * StyleComponent is used to render static CSS markup
 * into a <style> element so CSS styles are rendered correctly
 * it listens for changes of the global style container
 */
class StyleComponent extends Component {
  constructor(props) {
    super(...arguments)
    const css = StyleContainer.renderStaticStyles(props.userAgent) // eslint-disable-line
    this.state = { css: css }

    this.updateStyles = this.updateStyles.bind(this, props.userAgent)
  }

  componentDidMount() {
    this._isMounted = true
    this._changeListener = StyleContainer.subscribe(this.updateStyles)
  }

  componentWillUnmount() {
    this._isMounted = false
    this._changeListener.unsubscribe()
  }

  updateStyles(userAgent) {
    const css = StyleContainer.renderStaticStyles(userAgent) // eslint-disable-line
    // Delay change listener until Component is mounted
    setTimeout(() => {
      this._isMounted && this.setState({ css: css })
    }, 0)
  }

  render() {
    const innerHTML = { __html: this.state.css }
    return <style dangerouslySetInnerHTML={innerHTML} />
  }
}
<commit_msg>#202 pushing directly to dom to prevent false rendering<commit_after>import React, { Component, PropTypes } from 'react'
import StyleContainer from './StyleContainer'
import resolveStyles from '../../core/dom/resolver'
import _ from 'lodash'

const contextType = { _lookConfig: PropTypes.object }
/**
 * Root wrapper that wraps your whole application
 * It renders the global CSS styles and passes the config down
 */
export default class LookRoot extends Component {
  static childContextTypes = contextType;
  static contextTypes = contextType;

  getChildContext() {
    return {
      _lookConfig: _.merge({ }, this.props.config, {
        _resolveStyles: resolveStyles
      })
    }
  }

  render() {
    const { config, ...otherProps } = this.props

    return (
      <div {...otherProps}>
        {this.props.children}
        <StyleComponent userAgent={config.userAgent} />
      </div>
    )
  }
}


/**
 * StyleComponent is used to render static CSS markup
 * into a <style> element so CSS styles are rendered correctly
 * it listens for changes of the global style container
 */
class StyleComponent extends Component {
  constructor(props) {
    super(...arguments)
    const css = StyleContainer.renderStaticStyles(props.userAgent) // eslint-disable-line
    this.state = { css: css }

    this.updateStyles = this.updateStyles.bind(this, props.userAgent)
  }

  componentDidMount() {
    this._isMounted = true
    this._changeListener = StyleContainer.subscribe(this.updateStyles)
  }

  componentWillUnmount() {
    this._isMounted = false
    this._changeListener.unsubscribe()
  }

  updateStyles(userAgent) {
    const css = StyleContainer.renderStaticStyles(userAgent) // eslint-disable-line
    if (!this._isMounted) {
      // If not mounted, just push state change as it does not render multiple times
      this.setState({ css: css })
    } else {
      // After the element got mounted we manually change the CSS
      // because calling setState within the current render is invalid
      // Helps to directly change the styles to fix #202
      // https://github.com/rofrischmann/react-look/issues/202
      // TODO: Compare innerHMTL vs. insertRule according performance
      this.refs.sheet.innerHTML = css
    }
  }

  render() {
    const innerHTML = { __html: this.state.css }
    return <style ref="sheet" dangerouslySetInnerHTML={innerHTML} />
  }
}

{'fraction_non_alphanumeric': 0.10320942045716924, 'fraction_numerical': 0.0023089355806972986, 'mean_word_length': 3.161383285302594, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 14, 'https://': 1, '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': '3800121', 'n_tokens_mistral': 1212, 'n_tokens_neox': 1203, 'n_words': 350}