createDesign

If you want to use the same design for multiple states, but still get the same TypeScript support while you construct the design object, you can use the createDesign function.

const design = createDesign({ ... })

The createDesign function doesn’t do anything special—it just returns the same object that you’ve passed to the function. Its only purpose is to provide type support as you construct a design.

However, having a separate design object might be useful in certain circumstances—and it’s much easier to write a state with type support than without it.

const design = createDesign({
  data: {
    score: 0,
    lives: 3,
  },
  on: { ... },
})

function createStateWithCustomScore(score) {
  return createState({
    ...design,
    data: {
      ...design.data,
      score,
    },
  })
}

function createStateWithCustomLives(lives) {
  return createState({
    ...design,
    data: {
      ...design.data,
      lives,
    },
  })
}