RFC: variant

[sergeysova]

Select a target event by value from a store or event.

const $move = createStore("left");
const moveLeft = createEvent();
const moveRight = createEvent();

variant({
  source: $move,
  target: {
    left: moveLeft,
    right: moveRight,
  }
})

When the value of the store will be left, event moveLeft will be triggered. If right — moveRight.

---

Select property from object with key:

const $move = createStore({ position: "left" });
const moveLeft = createEvent();
const moveRight = createEvent();

variant({
  source: $move,
  key: "position",
  target: {
    left: moveLeft,
    right: moveRight,
  }
})

---

Transform value before trigger target:

const $move = createStore({ position: "left" });
const moveLeft = createEvent();
const moveRight = createEvent();

variant({
  source: $move,
  key: "position",
  fn: (state) => state.position.length,
  target: {
    left: moveLeft, // triggered with 4
    right: moveRight, // triggered with 5
  }
})

---

Get key with function:

const $move = createStore({ position: "left" });
const moveLeft = createEvent();
const moveRight = createEvent();

variant({
  source: $move,
  key: (state) => state.position === 'left',
  target: {
    true: moveLeft,
    false: moveRight,
  }
})

---

With clock:

const timer = createEvent();
const setLight = createEvent<'green' | 'yellow' | 'red'>();

const $light = restore(setLight, 'green')

variant({
  source: $light,
  clock: timer,
  target: {
    green: setLight.prepend(() => 'yellow'),
    yellow: setLight.prepend(() => 'red'),
    red: setLight.prepend(() => 'green'),
  },
})

[doasync]

You can get key from store:

const $move = createStore({ distance: 0 });
const $direction = createStore('left')

const moveLeft = createEvent();
const moveRight = createEvent();

variant({
  source: $move,
  key: $direction,
  target: {
    left: moveLeft,
    right: moveRight,
  }
})

[doasync]

Variant itself returns undefined (void)

[doasync]

There can be a default case (__), if the key is not found in the target object.

variant({
  source: $account,
  key: 'kind',
  target: {
    admin: adminAccount,
    user: userAccount,
    __: guestAccount,
  },
})

[sergeysova]

I think it is better to create field default:

variant({
  source: $account,
  key: 'kind',
  target: {
    admin: adminAccount,
    user: userAccount,
  },
  default: guestAccount,
})

[doasync]

Here is a comparison with split:

const message = createEvent()

const bob = createEvent()
const alice = createEvent()
const guest = createEvent()

variant({
  source: message, 
  key: 'user',
  target: { bob, alice, __: guest }),
})

bob.watch(({text}) => {
  console.log('[bob]: ', text)
})
alice.watch(({text}) => {
  console.log('[alice]: ', text)
})

message({user: 'bob', text: 'Hello'})
// => [bob]: Hello
message({user: 'alice', text: 'Hi bob'})
// => [alice]: Hi bob

/* default case, triggered if no one condition met */
guest.watch(({text}) => {
  console.log('[guest]: ', text)
})
message({user: 'unregistered', text: 'hi'})
// => [guest]: hi

Compare with split:

const message = createEvent()

const messageByAuthor = split(message, {
  bob: ({user}) => user === 'bob',
  alice: ({user}) => user === 'alice',
})
messageByAuthor.bob.watch(({text}) => {
  console.log('[bob]: ', text)
})
messageByAuthor.alice.watch(({text}) => {
  console.log('[alice]: ', text)
})

message({user: 'bob', text: 'Hello'})
// => [bob]: Hello
message({user: 'alice', text: 'Hi bob'})
// => [alice]: Hi bob

/* default case, triggered if no one condition met */
const {__: guest} = messageByAuthor
guest.watch(({text}) => {
  console.log('[guest]: ', text)
})
message({user: 'unregistered', text: 'hi'})
// => [guest]: hi

[doasync]

variant is a better version of other approaches, if you want to switch by key and already have targets created:

variant({
  source: message, 
  key: 'user',
  target: { bob, alice },
  fallback: guest,
})

With guards:

guard({
  source: message,
  filter: ({user}) => user === 'alice',
  target: alice,
});

guard({
  source: message,
  filter: ({user}) => user === 'bob',
  target: bob,
});

guard({
  source: message,
  filter: ({user}) => user !== 'alice' && user !== 'bob',
  target: guest,
});

With forwards + filters:

forward({
  from: message.filter({ fn: ({user}) => user === 'alice' }),
  to: alice,
})

forward({
  from: message.filter({ fn: ({user}) => user === 'bob' }),
  to: bob,
})

forward({
  from: message.filter({ fn: ({user}) => user !== 'alice' && user !== 'bob' }),
  to: guest,
})

P.S. guard could have fallback as well:

guard({
  source: message,
  filter: ({user}) => user === 'alice',
  target: alice,
  fallback: notAlice
});

[doasync]

Check this out:

variant({
  source: sample(page, nextPage),
  target: createApi(page, {
    '/intro': () => '/article',
    '/article': () => '/pricing',
    '/pricing': () => '/signup',
  })
})

[doasync]

target can be renamed to cases:

variant({
  source: uploadFx.done,
  key: gate.status,
  cases: {
    true: $uploadResult,
    false: showNotification.prepend(() => “uploaded!”)
  }
})

[doasync]

Variant implementation for effector

export function variant({ source, key, cases, clock, fn }) {
  const keyReader = typeof key === 'function'
    ? key
    : is.store(key)
      ? () => String(key.getState())
      : value => String(value[key])
  if (clock || fn) {
    source = sample({ source, ...clock && { clock }, fn })
  }
  let defaultCase = false
  for (const caseName in cases) {
    if (caseName === '__') {
      defaultCase = true
      continue
    }
    guard({
      source,
      filter: value => keyReader(value) === caseName,
      target: cases[caseName],
    })
  }
  if (defaultCase) {
    const namedCases = Object.keys(cases)
    guard({
      source,
      filter: value => !namedCases.includes(keyReader(value)),
      target: cases.__,
    })
  }
}

https://gist.github.com/doasync/afae239f1214ea9b9acc434c39d5d149

[doasync]

Work in progress...

[sergeysova]

What about to close this issue and PR, because effector released split https://effector.now.sh/docs/api/effector/split

The second option rename this method and change its purpose

[sergeysova]

variant({
  source: sample($light, timer),
  matches: {
    green: setLight.prepend(() => 'yellow'),
    yellow: setLight.prepend(() => 'red'),
    red: setLight.prepend(() => 'green'),
  },
})

Can be replaced with:

split({
  source: timer,
  match: $light,
  cases: {
    green: setLight.prepend(() => 'yellow'),
    yellow: setLight.prepend(() => 'red'),
    red: setLight.prepend(() => 'green'),
  },
})