How to use ferp - 10 common examples

const { updateLogger } = require('./updateLogger.js');

const { batch, defer, none } = ferp.effects;

const readFile = (file, errorMessage, successMessage) => defer(new Promise((done) => {
  fs.readFile(file, { encoding: 'utf-8' }, (err, data) => {
    if (err) {
      done({ type: errorMessage, file, err });
    } else {
      done({ type: successMessage, file, data });
    }
  });
}));

ferp.app({
  init: [
    null,
    batch([
      readFile(path.resolve(__dirname, './hello-world.txt'), 'READ_ERR', 'READ_OK'),
      readFile(path.resolve(__dirname, './hello-world.txt.garbage'), 'READ_ERR', 'READ_OK'),
    ]),
  ],

  update: updateLogger((message, state) => {
    switch (message.type) {
      case 'READ_OK':
        // Can do something with message.data
        return [state, none()];

      case 'READ_ERR':
        // Can do something with message.err

const http = require('http');
const ferp = require('ferp');

const { router } = require('./router.js');
const { serverSubscription } = require('./subscription.js');

const { defer, none } = ferp.effects;

const responseEffect = ({ response }, status, json) => defer(new Promise((done) => {
  response.writeHead(status, { 'Content-Type': 'application/json' });
  response.end(JSON.stringify(json), () => done(none()));
}));

const showState = (message, state) => [state, responseEffect(message, 200, state.logs)];
const fourOhFour = (message, state) => [state, responseEffect(message, 404, { error: 'not found' })];

const main = () => ferp.app({
  init: [{ logs: [] }, none()],

  update: router({
    'GET /': showState,
    'GET /not-found': fourOhFour,
  }),

const ferp = require('ferp');

const { updateLogger } = require('../common/updateLogger.js');

const { delay, none } = ferp.effects;

const update = (_, state) => {
  const nextState = state + 1;
  return [
    nextState,
    nextState < 5 ? delay(null, 1000) : none(),
  ];
};

const main = () => ferp.app({
  init: [
    0,
    delay(null, 1000),
  ],

  update: updateLogger(update),

const ferp = require('ferp');

const { updateLogger } = require('./updateLogger.js');

const { every } = ferp.subscriptions;

const { none } = ferp.effects;

ferp.app({
  init: [
    0,
    none(),
  ],

  update: updateLogger((_, state) => {
    const nextState = state + 1;
    return [
      nextState,
      none(),
    ];
  }),

  subscribe: state => [

const ferp = require('ferp');
const { h, patch } = require('superfine');

const { superfineEffect } = require('./superfineEffect.js');

const { none } = ferp.effects;

const view = (state, dispatch) => (
  h('div', null, [
    h(
      'div',
      {
        style: {
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
        },
      },
      [
        h('button', { type: 'button', onclick: () => dispatch({ type: 'SET', value: state.value - 1 }) }, '-'),
        h('h1', { style: { width: '200px', textAlign: 'center' } }, state.value),

update: (message, state) => {
    const result = appReducer(view)(message, state);
    switch (message.type) {
      case 'KEY_DOWN':
        return withMoreEffects(result)([
          effectForKeyEvent(true, message.key, state.players),
        ]);

      case 'KEY_UP':
        return withMoreEffects(result)([
          effectForKeyEvent(false, message.key, state.players),
        ]);

      case 'TICK':
        return withMoreEffects(result)([
          ferp.effects.raf({ type: 'TICK' }, message.timestamp),
          gamePadEffect(state.gamePads),
        ]);

      case 'RENDER':
        return result;

      default:
        return withMoreEffects(result)([
          { type: 'RENDER', view },
        ]);
    }
  },

const { patch } = require('superfine');

const { defer, none } = require('ferp').effects;

const vdomReducer = view => players => (message, state) => {
  switch (message.type) {
    case 'RENDER':
      return (() => {
        let dispatch = () => {};
        const eventPromise = new Promise((resolve) => {
          dispatch = resolve;
        });
        return [
          Object.assign({}, state, {
            node: patch(
              state.node,
              view(
                players,
                (playerId, sourceType) => {

const ferp = require('ferp');
const { appReducer, initialState } = require('./reducers/appReducer.js');
const { keyboardSubscription } = require('./subscriptions/keyboardSubscription.js'); const { inputEffect } = require('./effects/inputEffect.js');
const { gamePadEffect } = require('./effects/gamePadEffect.js');
const { view } = require('./view.js');

const { batch, defer, none } = ferp.effects;

const effectForKeyEvent = (isKeyDown, key, players) => {
  const mapping = {
    wasd: {
      w: 'up',
      s: 'down',
      a: 'left',
      d: 'right',
    },
    arrows: {
      ArrowUp: 'up',
      ArrowDown: 'down',
      ArrowLeft: 'left',
      ArrowRight: 'right',
    },
  };

const ferp = require('ferp');

const { none } = ferp.effects;

const playerReducer = id => (message, state) => {
  if (message.playerId !== id) return [state, none()];
  switch (message.type) {
    case 'SOURCE_CHANGE':
      return [
        Object.assign({}, state, {
          sourceType: message.sourceType,
          gamePadIndex: null,
          up: false,
          down: false,
          left: false,
          right: false,
        }),
        none(),
      ];

const ferp = require('ferp');
const { playerReducer } = require('./playerReducer.js');
const { updatesCollectionToStateEffects } = require('./helper.js');

const { none } = ferp.effects;

const clamp = (max, value) => Math.min(Math.max(0, value), max);

const integrate = (player, delta) => {
  if (!delta) return player;
  const speed = 9;
  const xDiff = (player.left ? -speed : 0) + (player.right ? speed : 0);
  const yDiff = (player.up ? -speed : 0) + (player.down ? speed : 0);

  return Object.assign({}, player, {
    x: clamp(800, player.x + (xDiff * delta / 100)),
    y: clamp(300, player.y + (yDiff * delta / 100)),
  });
};

const playersReducer = (message, state) => {