react Architecture Docs
Home / Class/ Hydration Class — react Architecture

Hydration Class — react Architecture

Architecture documentation for the Hydration class in index.js from the react codebase.

Class javascript BabelCompiler

Entity Profile

Dependency Diagram

graph TD
  5da5f467_94f5_8e23_e6c0_4c29950d8542["Hydration"]
  24f91f3d_8b7d_3d1b_d51b_544e9e2c6143["index.js"]
  5da5f467_94f5_8e23_e6c0_4c29950d8542 -->|defined in| 24f91f3d_8b7d_3d1b_d51b_544e9e2c6143
  32bb023a_bc39_4e39_99f9_1633b1e1e311["componentDidMount()"]
  5da5f467_94f5_8e23_e6c0_4c29950d8542 -->|method| 32bb023a_bc39_4e39_99f9_1633b1e1e311
  a51c6b33_8f88_7567_280e_9211d0029aba["componentWillUnmount()"]
  5da5f467_94f5_8e23_e6c0_4c29950d8542 -->|method| a51c6b33_8f88_7567_280e_9211d0029aba
  fab813e3_12c8_f97c_4ba0_4d6f53b355b8["render()"]
  5da5f467_94f5_8e23_e6c0_4c29950d8542 -->|method| fab813e3_12c8_f97c_4ba0_4d6f53b355b8

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/hydration/index.js lines 15–128

class Hydration extends React.Component {
  state = {
    error: null,
    code: SAMPLE_CODE,
    hydrate: true,
    version: initialVersion,
  };

  ready = false;

  componentDidMount() {
    window.addEventListener('message', this.handleMessage);
  }

  componentWillUnmount() {
    window.removeEventListener('message', this.handleMessage);
  }

  handleMessage = event => {
    var data = JSON.parse(event.data);

    switch (data.type) {
      case 'ready':
        this.ready = true;
        this.injectCode();
        break;
      default:
        throw new Error(
          'Editor Error: Unrecognized message "' + data.type + '"'
        );
    }
  };

  injectCode = () => {
    try {
      this.send({
        type: 'code',
        payload: compile(this.state.code),
      });

      this.setState({error: null});
    } catch (error) {
      this.setState({error});
    }
  };

  send = message => {
    if (this.ready) {
      this.frame.contentWindow.postMessage(JSON.stringify(message), '*');
    }
  };

  setFrame = frame => {
    this.frame = frame;
  };

  setCode = code => {
    this.setState({code}, this.injectCode);
  };

  setCheckbox = event => {
    this.setState({
      [event.target.name]: event.target.checked,
    });
  };

  setVersion = version => {
    this.setState({version});
  };

  render() {
    const {code, error, hydrate, version} = this.state;
    const src =
      '/renderer.html?' + qs.stringify({hydrate, ...reactPaths(version)});

    return (
      <div className="hydration">
        <header className="hydration-options">
          <label htmlFor="hydrate">
            <input
              id="hydrate"

Domain

Defined In

Source

Frequently Asked Questions

What is the Hydration class?
Hydration is a class in the react codebase, defined in fixtures/dom/src/components/fixtures/hydration/index.js.
Where is Hydration defined?
Hydration is defined in fixtures/dom/src/components/fixtures/hydration/index.js at line 15.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free