State Management

index.html

<div id="app"></div>

playground.json

{
  "scripts": [
    "react",
    "react-dom"
  ],
  "styles": [
    "font-awesome"
  ]
}

script.js

console.clear();

/**
|--------------------------------------------------
| pipeHookFunctions
|--------------------------------------------------
*/

const pipe = (fns, index = 0, context = {}) => {
  const currentFunc = fns[index];
  const contextResult = currentFunc(context);
  const nextIndex = index + 1;
  if (fns[nextIndex]) {
    return pipe(fns, nextIndex, contextResult);
  }
  return contextResult;
};

const pipeHookFunctions = (...fns) => {
  return (...args) 
};

// const pipeHookFunctions = (...fns) => {
//   return fns.reduce(
//     (f, g) => {
//       return (context) => {
//         return g(f(context))
//       }
//     }
//   )
// };

/**
|--------------------------------------------------
| createState
|--------------------------------------------------
*/

const createState = (initialvalue) => {
  let value = initialvalue;

  return {
    getValue: () => {
      return value;
    },
    setValue: (update) => {
      if (typeof update === "function") return value = update(value);
      return value = update;
    }
  }
};

/**
|--------------------------------------------------
| createHookedObject
|--------------------------------------------------
*/

const noop = (x) => x;

const createHookedState = (state, config) => {

  const pipes = {
    getValue: {
      before: pipeHookFunctions(...(config.before.getValue || [noop])),
      after: pipeHookFunctions(...(config.after.getValue || [noop]))
    },
    setValue: {
      before: pipeHookFunctions(...(config.before.setValue || [noop])),
      after: pipeHookFunctions(...(config.after.setValue || [noop]))
    }
  }

  return {
    getValue: () => {
      const beforeContext = { type: 'before' };
      const beforePipeResult = pipes.getValue.before(beforeContext);

      const value = state.getValue();

      const afterContext = { type: 'after', value: value };
      const afterPipeResult = pipes.getValue.after(afterContext);

      return afterPipeResult.value;
    },
    setValue: (...args) => {
      const beforeContext = { type: 'before' };
      const beforePipeResult = pipes.setValue.before(beforeContext);

      const value = state.setValue(...args);

      const afterContext = { type: 'after', value: value };
      const afterPipeResult = pipes.setValue.after(afterContext);

      console.log(afterPipeResult);

      return afterPipeResult.value;
    }
  }
}

/**
|--------------------------------------------------
| Playground
|--------------------------------------------------
*/

const counter = createState(0);
const hooks = {
  before: {
    setValue: [
      (context) => {
        return context;
      }
    ]
  },
  after: {
    setValue: [
      (context) => {
        return context;
      }
    ]
  }
};
const hookedCounter = createHookedState(counter, hooks);

const increment = (val) => val + 1;

hookedCounter.setValue(10)
console.log(hookedCounter.getValue())
// hookedCounter.setValue(increment)
// console.log(hookedCounter.getValue())

style.css

body {
    font-family: 'Helvetica';
}