Design qEffect API

[mhevery]

Components have a need for composability. qEffect should provide such a solution.

Example

Code example is worth a thousand words!

Imagine you have a piece of code that reports mouse position. A pseudo-code may look like this:

interface MousePosition {
  x: number;
  y: number;
}

const useMousePosition = qEffect<{}, MousePosition>({
  onMount: () => ({ x: 0, y: 0 }),
  listen: {
    ['on:document:mousemove']: qHook((_, state: MousePosition) => {
      const mEvent = useEvent<MouseEvent>();
      state.x = mEvent.x;
      state.y = mEvent.y;
    }),
  },
});

Such code can then be used like so:

export const Header = qComponent<{}, { mouse: MousePosition }>({
  onMount: qHook(() => ({ mouse: useMousePosition({}) })),
  onRender: qHook((_, { mouse }) => (
    <span>
      {mouse.x}, {mouse.y}
    </span>
  )),
});

Goals

• The effect should be initialized on server and survive serialization to the client.
• The effect should be hydrated independently from the component using it.
• The effect should be composable (used by other effects)