ha2-middleware-stack-formatter.js

export default actionStack => {
  if (actionStack.length === 1 && actionStack[0][0] === "state") {
    console.log(
      "%cinitial state",
      "color: #4CAF50; font-weight: bold;",
      actionStack[0][1].nextState
    );
  } else {
    const groupTitle = actionStack
      .slice(1)
      .reverse()
      .reduce(
        ({ names, formats }, [type, action]) => {
          if (type === "event")
            return {
              names: names.concat(`%con${action.event.type}%c`),
              formats: formats.concat([
                "color: #fc618d; font-weight: bold;",
                "color: inherit"
              ])
            };
          else if (type === "effect")
            return {
              names: names.concat(`%c${action.effect.name}%c`),
              formats: formats.concat([
                "color: #fd9353; font-weight: bold;",
                "color: inherit"
              ])
            };
          else if (type === "subscription")
            return {
              names: names.concat(`%c${action.subscription.name}%c`),
              formats: formats.concat([
                "color: #fd9353; font-weight: bold;",
                "color: inherit"
              ])
            };
          else if (type === "action")
            return {
              names: names.concat(`%c${action.action.name}%c`),
              formats: formats.concat([
                "color: #34a3ea; font-weight: bold;",
                "color: inherit"
              ])
            };
        },
        { names: [], formats: [] }
      );
    console.groupCollapsed(
      groupTitle.names.join(" -> "),
      ...groupTitle.formats
    );
    actionStack.map(([type, action]) => {
      if (type === "event") {
        console.log(
          `%con${action.event.type}`,
          "color: #fc618d; font-weight: bold;",
          action.event
        );
      } else if (type === "effect") {
        console.log(
          `%c${action.effect.name}`,
          "color: #fd9353; font-weight: bold;",
          action.props
        );
      } else if (type === "subscription") {
        console.log(
          `%c${action.subscription.name}`,
          "color: #fd9353; font-weight: bold;",
          action.props
        );
      } else if (type === "action") {
        console.log(
          `%c${action.action.name}`,
          "color: #34a3ea; font-weight: bold;",
          ...(action.data ? [action.data] : [])
        );
      } else if (type === "state") {
        console.log(
          "%cprev state",
          "color: #9E9E9E; font-weight: bold;",
          action.prevState
        );
        console.log(
          "%cnext state",
          "color: #4CAF50; font-weight: bold;",
          action.nextState
        );
      }
    });
    console.groupEnd();
  }
}