RafalFilipek

pure(
  compose(
    lifecycle({
      componentWillMount: () => {
        console.log(this, this.state, this.props); // function _class, undefined, undefined
      },
      componentDidMount: () => {
        console.log(this, this.state, this.props); // function _class, undefined, undefined
      },
    })

RafalFilipek

interface Window {
  Promise: PromiseConstructor;
}

declare var require: {
    (path: string): any;
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

RafalFilipek

type Letter {
  value: String
  code: Int
}

type Word {
  value: String,
  letters: [Letter],
}

RafalFilipek

import React from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';

const fontSizes = {
  small: 10,
  medium: 15,
  big: 20,
};

RafalFilipek

<div>
  <p>
    My twitter account: <a href="https://twitter.com/rafalfilipek">rafal</a>
  </p>
</div>

RafalFilipek

import { css } from 'emotion';
import styled from 'react-emotion';

const box = props => css`
composes:
  ${display(props)}
  ${flex(props)}
  ${direction(props)}
  ${alignItems(props)}
  ${alignSelf(props)}

RafalFilipek

In this example I have two base classes foo and bar.

const foo = css`
  color: red;
`;

const bar = css`
color: blue;
`;

RafalFilipek

alert(x)

RafalFilipek

const suflerMachine = Machine({
  initial: "types",
  states: {
    types: {
      on: {
        SELECT_TYPE: {
          target: "processes",
          actions: [
            assign({
              typeId: (_context, event) => event.id

RafalFilipek

/**
 * xstate - 4.7.0-rc.6
 * typescript - 3.7.2
 */
import React from "react";
import { createMachine, assign } from "xstate";
import { useMachine } from "@xstate/react";

interface Context {
  name?: string;