airandopal

const stripeElement = {
  id: "stripeElement",
  initial: "empty",
  states: {
    empty: {
      on: {
        // this might need conditions
        SE_CHANGE: "noError"
      }
    },

airandopal

const machine = Machine({
  id: 'fetch',
  initial: 'idle',
  states: {
    idle: {
      type: 'atomic',
      on: {
        FETCH: 'pending'
      }
    },

airandopal

 // todo: maybe its not me, maybe its the state chart? bc on done shouldnt be aaccessible until its in complete... see this guid - https://github.com/davidkpiano/xstate/issues/196, seem like it shold be gray and with red emoji until the final state is reached? 
 // todo: Handle on change scenarios - either back to empty, or changes to no error, error, or complete
 // todo: ON CHANGE, if event contains complete, then send complete event
 // is there a way to send a general event that doesnt move states? like on change vs the four below.
 //           onChange={e => {
          //   send('SELECT', { name: e.target.value });
          // }}
 // ON CHANGE vs ERROR NO ERROR COMPLETE EMPTY events - on change it will send one of these four events.
// wait ok on change of the field, it doesnt send an event to the machine but it does evaluate the data and send particular event. i think this is a bad pattern though because you cant know that from reading the state chart, so then use guards instead on the change

airandopal

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

airandopal

const emailStates = {
  initial: "noError",
  states: {
    noError: {},
    error: {
      initial: "empty",
      states: {
        empty: {},
        badFormat: {},
        noAccount: {}

airandopal

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

airandopal

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

airandopal

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

airandopal

Hi!

This is an example of how to use [Rollup] with external dependencies, without hard-coding them.

It reads your installed NPM dependencies and treats them as external to Rollup. They still get bundled, but not as ES2015.

Make sure you have a .babelrc or a "babel":{} section in your package.json.