pathon v2 RFC

1-example.js

// workflow.js
import {
  createReactCreator,
  child,
  // updateQueue is list of updates priority
  // `updateQueue` from `immutablePreset` have `compute` property
  // you must use it if you want change react own state before other reactions
  updateQueue
} from "pathon/immutablePreset";

// the react - is function.
// If you calls it trigger `1` part subscribers queue and further
const createReact = createReactCreator(updateQueue);

const loadStates = {
  init: "initial",
  req: "request",
  get: "load",
  err: "error"
};

const data = createReact({ list: [{ value: null }] });
const list = child(data, "list");
const firstListItem = child(data, "0");

const load = createReact([loadStates.init]);


// type Target = React
// type PatternMatch = number(===) | string(===) | null(===) | (Object | array)(shallowEqual()) | Function (predicate)
// type Callback = Function
// `.when` accept (Target, Callback) or (Target, PatternMatch, Callback)
data
  .when(load, [loadStates.get], ([, list]) => data({ list }))
  .when(load, [loadStates.err], () => data({ list: [] }));

load
  // you can move this boilerplate to the function if needed
  .when(load.compute, undefined, () => load([loadStates.req]))
  .when(load, [loadStates.req], async () => {
    try {
      load([loadStates.get, await fetch()]);
    } catch (error) {
      load([loadStates.err, error]);
    }
  });

// Component.js
load();

2-immutablePreset.js

import { reactQueueTracker } from "pathon";

function immutableMerge(prevState, newValue) {
  /**/
}

function isNotEqual(newState, prevState) {
  return newState !== prevState;
}

export function createReactCreator(updateQueue) {
  const newCreateReact = reactQueueTracker(updateQueue);

  return initialState => {
    const newReact = newCreateReact(initialState);
    newReact.when(
      // subscribe to any update
      newReact.format,
      // miss unnecessary updates
      isNotEqual,
      // formatting new value to state type format
      // for example lets imagine us preset is works like React.Component.setState and immutable
      // so if `newValue` is `{ v2: true }` and `prevState` is `{ v1: true }`
      // then we must to receive new link to `{ v1: true, v2: true }` value
      // furthermore preset may work with Set, Map and any other data types
      // you can manually change or write your own presets
      (newValue, prevState) => newReact(immutableMerge(prevState, newValue)) // TODO: `newReact.child` for avoidance unnecessary predicate calls ?
    );
    return newReact;
  };
}

export function child(parentReact, key) {
  const initialState = parentReact.get()[key];
  // `createReact` from another react saves queue execution sequence
  const react = parentReact.createReact(initialState);

  const predicate = (newParentState, prevParentState) => {
    let newState;
    try {
      newState = newParentState[key];
    } catch (error) {
      parentReact.off(callback);
      return false;
    }
    return newState !== prevParentState[key];
  };

  const callback = newState => {
    react(newState[key]);
  };

  parentReact.when(
    // type Target = React
    // type PatternMatch = number(===) | string(===) | null(===) | (Object | array)(shallowEqual()) | Function (predicate)
    // type Callback = Function
    // (Target, Callback) | (Target, PatternMatch, Callback)
    parentReact.child,
    // subscribe only to changed value
    predicate,
    // current "child" react will update all it self children
    // wait when parent react update it self other children
    // then parent react update it self parent subscribers
    // then parent react update it self compute subscribers
    // then current react update it self compute subscribers
    // then parent react update it self subscribers
    // then current react update it self subscribers
    callback
  );

  // subscribe parent to child updates
  react.when(react.parent, isNotEqual, parentReact);

  return react;
}

// react updates
// calls every parts of queue subscribers
// start by `1`
// after that calls the [just] react subscribers (like `4` part of queue)
export const updateQueue = {
  format: 0,
  child: 1,
  parent: 2,
  compute: 3
};

targets:

• small weight
• DI
• easy abstraction
• small api
• flexible and extensible
• glitch free
• observable friendly
• recursive friendly