UI/Effects code splitting pattern
- [read the original article](https://dev.to/thekashey/sidecar-for-a-code-splitting-1o8g) to understand concepts behind.
- [read how Google](https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3) split view and logic.
- [watch how Facebook](https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/) defers "interactivity" effects.
## Terminology:
- `sidecar` - non UI component, which may carry effects for a paired UI component.
- `UI` - UI component, which interactivity is moved to a `sidecar`.
`UI` is a _view_, `sidecar` is the _logic_ for it. Like Batman(UI) and his sidekick Robin(effects).
## Concept
- a `package` exposes __3 entry points__ using a [nested `package.json` format](https://github.com/theKashey/multiple-entry-points-example):
- default aka `combination`, and lets hope tree shaking will save you
- `UI`, with only UI part
- `sidecar`, with all the logic
- > `UI` + `sidecar` === `combination`. The size of `UI+sidecar` might a bit bigger than size of their `combination`.
Use [size-limit](https://github.com/ai/size-limit) to control their size independently.
- package uses a `medium` to talk with own sidecar, breaking explicit dependency.
- if package depends on another _sidecar_ package:
- it shall export dependency side car among own sidecar.
- package imports own sidecar via `medium`, thus able to export multiple sidecars via one export.
- final consumer uses `sidecar` or `useSidecar` to combine pieces together.
## Rules
- `UI` components might use/import any other `UI` components
- `sidecar` could use/import any other `sidecar`
That would form two different code branches, you may load separately - UI first, and effect sidecar later.
That also leads to a obvious consequence - __one sidecar may export all sidecars__.
- to decouple `sidecars` from module exports, and be able to pick "the right" one at any point
you have to use `exportSidecar(medium, component)` to export it, and use the same `medium` to import it back.
- this limitation is for __libraries only__, as long as in the usercode you might
dynamically import whatever and whenever you want.
- `useMedium` is always async - action would be executed in a next tick, or on the logic load.
- `sidecar` is always async - is does not matter have you loaded logic or not - component would be
rendered at least in the next tick.
> except `medium.read`, which synchronously read the data from a medium,
and `medium.assingSyncMedium` which changes `useMedium` to be sync.
## SSR and usage tracking
Sidecar pattern is clear:
- you dont need to use/render any `sidecars` on server.
- you dont have to load `sidecars` prior main render.
Thus - no usage tracking, and literally no SSR. It's just skipped.
# API
## createMedium()
- Type: Util. Creates shared effect medium for algebraic effect.
- Goal: To decouple modules from each other.
- Usage: `use` in UI side, and `assign` from side-car. All effects would be executed.
- Analog: WeakMap, React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
```js
const medium = createMedium(defaultValue);
const cancelCb = medium.useMedium(someData);
// like
useEffect(() => medium.useMedium(someData), []);
medium.assignMedium(someDataProcessor)
// createSidecarMedium is a helper for createMedium to create a "sidecar" symbol
const effectCar = createSidecarMedium();
```
> ! For consistence `useMedium` is async - sidecar load status should not affect function behavior,
thus effect would be always executed at least in the "next tick". You may alter
this behavior by using `medium.assingSyncMedium`.
## exportSidecar(medium, component)
- Type: HOC
- Goal: store `component` inside `medium` and return external wrapper
- Solving: decoupling module exports to support exporting multiple sidecars via a single entry point.
- Usage: use to export a `sidecar`
- Analog: WeakMap
```js
import {effectCar} from './medium';
import {EffectComponent} from './Effect';
// !!! - to prevent Effect from being imported
// `effectCar` medium __have__ to be defined in another file
// const effectCar = createSidecarMedium();
export default exportSidecar(effectCar, EffectComponent);
```
## sidecar(importer)
- Type: HOC
- Goal: React.lazy analog for code splitting, but does not require `Suspense`, might provide error failback.
- Usage: like React.lazy to load a side-car component.
- Analog: React.Lazy
```js
import {sidecar} from "use-sidecar";
const Sidecar = sidecar(() => import('./sidecar'), 
