Adding a the "adopt" keyword to the JSX syntax

adopt-syntax.js

// I'm suggesting we add a new "adopt X from <Y />" syntax to the JSX language
// it would de-sugar to render prop children, but look and read better than
// what we currently have. For example:

// 1.
// this sugar
function MyComponent(props) {
  adopt foo from <Bar />;
  return <div>{foo}</div>;
}

// compiles to
function MyComponent(props) {
  return <Bar>{foo => <div>{foo}</div>}</Bar>
}

// 2.
// with the new context API without sugar
const ThemeContext = React.createContext('light');

class Title extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => (
          <h1 style={{color: theme === 'light' ? '#000' : '#fff'}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

// with "adopt" sugar
const ThemeContext = React.createContext('light');

class Title extends React.Component {
  render() {
    adopt theme from <ThemeContext.Consumer />;
    return (
      <h1 style={{color: theme === 'light' ? '#000' : '#fff'}}>
        {this.props.children}
      </h1>
    );
  }
}
  
// 3.
// how we might handle state without classes
const State = React.createState({
  title: "",
});

class Title extends React.Component {
  render() {
    adopt { state } from <State
      initialState={() => ({
        return { title: this.props.title || "Hello world" }; 
      })}
      deriveStateFromProps={state => {
        // ...
      }}
      shouldUpdate={state => {
        // ...
      }}
      didMount={state => {
        // ...
      }}
      didUpdate={state => {
        // ...
      }}
      willUnmount={state => {
        // ...
      }}
    />;
    return <div>{state.title}</div>
  }
}


// 4.
// how we might handle state without classes and need refs
const State = React.createState({
  divRef: null,
});

class Title extends React.Component {
  render() {
    adopt { state } from <State 
      initialState={() => ({
        divRef: React.createRef(),
      })}
      didMount={state => {
        state.divRef.value.focus();
      }}
    />;
    return <input type="text" ref={state.divRef} />
  }
}