CodingDive

/**
 * This is a gist with small route template helpers for people using a component structure as seen below.
 * Inside your start/routes.js file
 * Example:
 * ```
 * require(routeTemplate("Authentication"));
 * require(nestedRouteTemplate("Payment", "PayPal"));
 * ```
 app/
 ├── Components/

CodingDive

import Ember from 'ember';
import { inject as service } from '@ember/service';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  myService: service(),
});

CodingDive

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

CodingDive

const lightSwitchMachine = Machine({
  id: 'lightSwitch',
  initial: 'inactive',
  states: {
    inactive: {
      on: {
        TOGGLE: 'active'
      }
    },
    active: {

CodingDive

  const videoChatMachine = Machine({
    id: 'videoChat',
    initial: 'audioDisabledVideoDisabled',
    states: {
      audioDisabledVideoDisabled: {
        on: {
          ENABLE_VIDEO: 'audioDisabledVideoEnabled',
          ENABLE_AUDIO: 'audioEnabledVideoDisabled'
        }
      },

CodingDive

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

CodingDive

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

CodingDive

import { useMachine } from '@xstate/react'
const { sendNotification } = useContext(notificationContext)
const [state, send] = useMachine(
  fetchMachine.withConfig({
    actions: {
      sendErrorNotification: (ctx, e) => {
        sendNotification(NOTIFICATION_SEVERITY.ERROR, e.data.message);
      },
    },
  }),

CodingDive

const thermostatMachine = Machine({
  id: 'thermostat',
  initial: 'inactive',
  context: {
    temperature: 20,
  },
  states: {
    inactive: {
      on: {
        POWER_TOGGLE: 'active'

CodingDive

const thermostatMachine = Machine({
  id: 'thermostat',
  initial: 'inactive',
  context: {
    temperature: 20,
  },
  states: {
    inactive: {
      on: {
        POWER_TOGGLE: 'active'