mfrachet

import React from "react";

let IDS = 0;
const loaded = {};

export const lazy = modulePathResolver => {
  const id = IDS++;

  return props => {
    const LoadedComponent = loaded[id];

mfrachet

const element = document.createElement("div");
const childElement = document.createElement("span");
childElement.textContent = "Hello world"

element.appendChild(childElement);

mfrachet

import transduce from "ningo/transduce";

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const isEven = x => x % 2 === 0;
const double = x => x * 2;

const doubleEven = transduce()
  .map(double) // runs second
  .filter(isEven); // runs first

mfrachet

const isEven = x => x % 2 === 0;
const double = x => x * 2;

const array = [1, 2, 3, 4, 5];

const doubleEven = array.filter(isEven).map(double); // doubleEven is [4, 8]

mfrachet

const isEven = x => x % 2 === 0;
const double = x => x * 2;

const array = [1, 2, 3, 4, 5];

const evenNumber = array.filter(isEven);
const doubleEven = evenNumber.map(double); // doubleEven is [4, 8]

mfrachet

let cache;

export const customFetch = url => /* we already implemented this */

export const fetchWithCache = url =>
  window
    .fetch(url)
    .then(res => res.json())
    .then(data => {
      cache = data;

mfrachet

export const FiberHoc = ComponentDefinition => (props = {}) => {
  let vNode;

  try {
    vNode = ComponentDefinition(props);
  } catch (e) {
    vNode = props.fallback(props); // mandatory if you need to see something on the screen before your content

    fetchWithCache(e.value).then(() => {
      const nextNode = ComponentDefinition(props);

mfrachet

export const customFetch = url => {
  if (cache) {
    return cache
  }

  throw { type: 'type', url }
}

mfrachet

export const Pokemon = () => {
  const bulbasaur = customFetch("https://pokeapi.co/api/v2/pokemon/1/");

  return <div>{bulbasaur.name}</div>;
};

mfrachet

const secondIndirection = () => {
  // bulbasaur is the pokemon with id=1
  const { name } = propagate pokemonById(1);

  console.log(`Hello ${name}`);
};

// Only aims to show that it's not only one level deep
const firstIndirection = () => secondIndirection();