isaacplmann

const stepMachine = Machine({
  id: 'step',
  initial: 'step1',
  states: {
    step1: {},
    step2: {}
  }
});

const parentMachine = Machine(

isaacplmann

const selectionMachine = Machine(
  {
    id: 'selection',
    context: {
      selectedIndex: undefined,
    },
    initial: 'unselected',
    states: {
      unselected: {
        on: {

isaacplmann

const selectionMachine = Machine(
  {
    id: 'selection',
    context: {
      selectedIndex: undefined,
    },
    initial: 'unselected',
    states: {
      unselected: {
        on: {

isaacplmann

const fetchDataMachine = Machine({
  id: 'fetchData',
  context: { data: undefined },
  initial: 'idle',
  states: {
    idle: {
      on: { FETCH: 'pending'}
    },
    pending: {
      on: {

isaacplmann

const fetchMachine = Machine({
  id: 'fetch',
  initial: 'idle',
  states: {
    idle: {
      on: { FETCH: 'pending'}
    },
    pending: {
      on: {
        RESOLVE: 'fulfilled',

isaacplmann

const matchingMachine = Machine(
  {
    id: 'matching',
    context: { choiceOneIndex: undefined, choiceTwoIndex: undefined },
    initial: 'answering',
    states: {
      answering: {
        type: 'parallel',
        states: {
          choiceOne: {

isaacplmann

@Component({
  selector: 'theme-provider',
  template: `
    <ngx-data-provider key="theme" [data]="{ theme: theme, setTheme: setTheme }">
      <ng-content></ng-content>
    </ngx-data-provider>`,
})
export class ThemeProvider {
  setTheme = theme => this.theme = theme;
  theme = 'dark';

isaacplmann

const {Provider, Consumer: ThemeConsumer} = React.createContext()

class ThemeProvider extends React.Component {
  setTheme = theme => this.setState({theme})
  state = {theme: 'dark', setTheme: this.setTheme}
  render() {
    return <Provider value={this.state} {...this.props} />
  }
}

isaacplmann

	Parent Must Control	Parent Can Control	Child Controls
Logic	?	State Reducer	?
View	Controlled Component	Controllable Component	Uncontrolled Component

isaacplmann

{
  "name": "upgrade-to6",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",