<commit_before>/* eslint-disable max-len */
// based on https://github.com/ryanseddon/react-frame-component

import React from 'react';
import path from 'path';

const createHtml = (componentPath, dest, userFiles, injectTags) => (
  `<!DOCTYPE html>
  <html style="height: 100%; width: 100%; margin: 0; padding: 0;">
    <body style="height: 100%; width: 100%; margin: 0; padding: 0;">
      <div
        id="root"
        style="
          display: flex;
          justify-content: center;
          align-items: center;
        "
      ></div>
      <script>
        window.PLUGIN_NAME = 'react';
        window.COMPONENT_PATH = '${componentPath}';
        window.COMPONENT_DATA = undefined;
      </script>
      ${(injectTags) ? injectTags.join('\n') : ''}
      <style>
        ${userFiles && userFiles.styles.join('\n')}
      </style>
      <script>
        ${userFiles && userFiles.scripts.join('\n')}
      </script>
      <script src="${(dest) ? `/${path.join(dest, 'client-bundle.js')}` : 'client-bundle.js'}"></script>
      <script src="${(dest) ? `/${path.join(dest, 'user-bundle.js')}` : 'user-bundle.js'}"></script>
    </body>
  </html>
  `
);

class IFrame extends React.Component {

  componentDidMount() {
    const doc = this.iframe.contentDocument;
    doc.open();
    // eslint-disable-next-line max-len
    doc.write(createHtml(this.props.componentPath, this.props.dest, this.props.userFiles, this.props.injectTags));
    doc.close();

    this.iframe.contentWindow.INITIAL_COMPONENT_DATA = this.props.variationProps;
  }

  componentWillReceiveProps(props) {
    if (this.iframe.contentWindow.UPDATE_COMPONENT) {
      this.iframe.contentWindow.UPDATE_COMPONENT(props.variationProps);
    }<commit_msg>move injectTags as well as styles into the head<commit_after>/* eslint-disable max-len */
// based on https://github.com/ryanseddon/react-frame-component

import React from 'react';
import path from 'path';

const createHtml = (componentPath, dest, userFiles, injectTags) => (
  `<!DOCTYPE html>
  <html style="height: 100%; width: 100%; margin: 0; padding: 0;">
    <head>
      ${(injectTags) ? injectTags.join('\n') : ''}
      <style>
        ${userFiles && userFiles.styles.join('\n')}
      </style>
    </head>
    <body style="height: 100%; width: 100%; margin: 0; padding: 0;">
      <div
        id="root"
        style="
          display: flex;
          justify-content: center;
          align-items: center;
        "
      ></div>
      <script>
        window.PLUGIN_NAME = 'react';
        window.COMPONENT_PATH = '${componentPath}';
        window.COMPONENT_DATA = undefined;
      </script>
      <script>
        ${userFiles && userFiles.scripts.join('\n')}
      </script>
      <script src="${(dest) ? `/${path.join(dest, 'client-bundle.js')}` : 'client-bundle.js'}"></script>
      <script src="${(dest) ? `/${path.join(dest, 'user-bundle.js')}` : 'user-bundle.js'}"></script>
    </body>
  </html>
  `
);

class IFrame extends React.Component {

  componentDidMount() {
    const doc = this.iframe.contentDocument;
    doc.open();
    // eslint-disable-next-line max-len
    doc.write(createHtml(this.props.componentPath, this.props.dest, this.props.userFiles, this.props.injectTags));
    doc.close();

    this.iframe.contentWindow.INITIAL_COMPONENT_DATA = this.props.variationProps;
  }

  componentWillReceiveProps(props) {
    if (this.iframe.contentWindow.UPDATE_COMPONENT) {
      this.iframe.contentWindow.UPDATE_COMPONENT(props.variationProps);
    }
{'fraction_non_alphanumeric': 0.1706066647678724, 'fraction_numerical': 0.009114212475078326, 'mean_word_length': 2.954954954954955, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 41, 'https://': 2, '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': '4623939', 'n_tokens_mistral': 1178, 'n_tokens_neox': 1132, 'n_words': 214}