@anansi/core

@anansi/core

The itsy bitsy spider crawled up the water spout. Down came the rain, and washed the spider out. Out came the sun, and dried up all the rain, and the itsy bitsy spider went up the spout again

Entry

yarn start-anansi./src/index.tsx

This script uses two entry points for client/server.

index.server.tsx

import { useController } from 'rest-hooks';
import {
  laySpouts,
  documentSpout,
  restHooksSpout,
  prefetchSpout,
  routerSpout,
} from '@anansi/core/server';

import app from 'app';

import { createRouter } from './routing';

const appSpout = () => Promise.resolve({ app });

const spouts = prefetchSpout('controller')(
  documentSpout({ title: 'anansi' })(
    restHooksSpout()(
      routerSpout({ useResolveWith: useController, createRouter })(appSpout),
    ),
  ),
);

export default laySpouts(spouts);

index.tsx

import { useController } from 'rest-hooks';
import {
  floodSpouts,
  documentSpout,
  restHooksSpout,
  routerSpout,
} from '@anansi/core';

import app from 'app';

import { createRouter } from './routing';

const appSpout = () => Promise.resolve({ app });

const spouts = documentSpout({ title: 'anansi' })(
  restHooksSpout()(
    routerSpout({ useResolveWith: useController, createRouter })(appSpout),
  ),
);

floodSpouts(spouts);

Anansi can quickly traverse spouts setup by a user.

The server lays the spouts for anansi to travel in. Once delivered to the client, the spouts can be flooded (hydration).

In both cases, we need the route and application data.