<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'carbon-components-react';
import classnames from 'classnames';

import CodeExample from '../CodeExample/CodeExample';

const forEach = Array.prototype.forEach;

/**
 * The UI to show live code as well as its source.
 */
class ComponentExample extends Component {
  static propTypes = {
    /**
     * The source code.
     */
    htmlFile: PropTypes.string,

    /**
     * The component name.
     */
    component: PropTypes.string,

    /**
     * The component variant name.
     */
    variant: PropTypes.string,

    /**
     * `true` to hide "view full render" link.
     */
    hideViewFullRender: PropTypes.bool,

    /**
     * `true` to use `<iframe>`.
     */
    useIframe: PropTypes.bool,

    /**
     * The slug of the CodePen link.
     */
    codepenSlug: PropTypes.string,
  };

  componentDidMount() {
    this._instantiateComponents();
  }

  componentWillUpdate({ component }) {
    const { component: prevComponent } = this.props;
    if (prevComponent !== component) {
      this._releaseComponents();
    }
  }

  componentDidUpdate({ component }) {
    const { component: prevComponent } = this.props;
    if (prevComponent !== component) {
      this._instantiateComponents();
    }
  }

  componentWillUnmount() {
    this._releaseComponents();
  }

  /**
   * The container where the live demo HTML code should be put into.
   * @type {HTMLElement}
   * @private
   */
  _container = null;<commit_msg>chore(devenv): instantiate/release components as component markup is updated (#649)<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'carbon-components-react';
import classnames from 'classnames';

import CodeExample from '../CodeExample/CodeExample';

const forEach = Array.prototype.forEach;

/**
 * The UI to show live code as well as its source.
 */
class ComponentExample extends Component {
  static propTypes = {
    /**
     * The source code.
     */
    htmlFile: PropTypes.string,

    /**
     * The component name.
     */
    component: PropTypes.string,

    /**
     * The component variant name.
     */
    variant: PropTypes.string,

    /**
     * `true` to hide "view full render" link.
     */
    hideViewFullRender: PropTypes.bool,

    /**
     * `true` to use `<iframe>`.
     */
    useIframe: PropTypes.bool,

    /**
     * The slug of the CodePen link.
     */
    codepenSlug: PropTypes.string,
  };

  componentDidMount() {
    this._instantiateComponents();
  }

  componentWillUpdate({ component, htmlFile }) {
    const { component: prevComponent, htmlFile: prevHtmlFile } = this.props;
    if (prevComponent !== component || prevHtmlFile !== htmlFile) {
      this._releaseComponents();
    }
  }

  componentDidUpdate({ component, htmlFile }) {
    const { component: prevComponent, htmlFile: prevHtmlFile } = this.props;
    if (prevComponent !== component || prevHtmlFile !== htmlFile) {
      this._instantiateComponents();
    }
  }

  componentWillUnmount() {
    this._releaseComponents();
  }

  /**
   * The container where the live demo HTML code should be put into.
   * @type {HTMLElement}
   * @private
   */
  _container = null;
{'fraction_non_alphanumeric': 0.1244674376141205, 'fraction_numerical': 0.0009129640900791236, 'mean_word_length': 2.752283105022831, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, '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': '5273156', 'n_tokens_mistral': 962, 'n_tokens_neox': 943, 'n_words': 259}