gevgeny

function observable(target: any, propertyKey: string): PropertyDecorator {
  return {
    get(): any {
      return this._value;
    },
    set(value: any) {
      console.log(`Gotcha! value is ${value}.`);
      this._value = value;
    },
  };

gevgeny

function observable(target, propertyKey) {
  console.log(`decorate ${propertyKey}`);
  return {
    get() {},
    set() {},
  };
}

class State {

gevgeny

function observable(target: any, propertyKey: string): PropertyDecorator {
  console.log(`decorate ${propertyKey}`);
  
  // This is property descriptor
  return {
    get() {},
    set() {},
  };
}

gevgeny

function observable(target, propertyKey) {
  console.log(`decorate ${propertyKey}`);
}

class State {

}

observable(State.prototype, "foo");

gevgeny

function observable(target: any, propertyKey: string) {
  console.log(`decorate ${propertyKey}`);
}

class State {
  @observable foo;
}

gevgeny

StyledComponent.componentId = componentId;
StyledComponent.target = TargetComponent;

gevgeny

const myStyled = (TargetComponent) => (strs, ...exprs) => class extends React.Component {
  interpolateStyle() {
    const style = exprs.reduce((result, expr, index) => {
      const isFunc = typeof expr === 'function';
      const value = isFunc ? expr(this.props) : expr;
      
      return result + value + strs[index + 1];
    }, strs[0]);

    this.element.setAttribute('style', style);

gevgeny

const myStyled = (TargetComponent) => ([style]) => class extends React.Component {
  componentDidMount() {
    this.element.setAttribute('style', style);
  }

  render() {
    return (
      <TargetComponent {...this.props} ref={element => this.element = element } />
    );
  }

gevgeny

const Button = styled('button')([
  'color: coral;' +
  'padding: 0.25rem 1rem;' + 
  'border: solid 2px coral;' +
  'border-radius: 3px;' +
  'margin: 0.5rem;' +
  'font-size: 1rem;'
]);

gevgeny

const Button = styled.button`
  color: coral; 
  padding: 0.25rem 1rem; 
  border: solid 2px coral; 
  border-radius: 3px;
  margin: 0.5rem;
  font-size: 1rem;
`;