@anansi/core 0.11.2 → 0.14.0

package/src/index.ts

@@ -3,3 +3,6 @@ export { default as documentSpout } from './spouts/document';
 export { default as restHooksSpout } from './spouts/restHooks';
 export { default as routerSpout } from './spouts/router';
 export { default as JSONSpout } from './spouts/json';
+export { default as appSpout } from './spouts/app';
+export { ServerProps } from './spouts/types';
+export { ClientSpout as Spout } from './spouts/types';

package/src/laySpouts.tsx

@@ -8,32 +8,19 @@ export default function laySpouts(
   spouts: (props: ServerProps) => Promise<{
     app: JSX.Element;
   }>,
-  { timeoutMS = 200 }: { timeoutMS?: number } = {},
+  {
+    timeoutMS = 200,
+    onError,
+  }: { timeoutMS?: number; onError?: (error: unknown) => void } = {},
 ) {
   const render: Render = async (clientManifest, req, res) => {
     const nonce = crypto.randomBytes(16).toString('base64');
 
-    const { app } = await spouts({ clientManifest, req, res, nonce });
-    let didError = false;
-    const { pipe, abort } = reactRender(
-      app,
-      /*
-      This is not documented, so included the types here for reference:
-type Options = {|
-  identifierPrefix?: string,
-  namespaceURI?: string,
-  nonce?: string,
-  bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
-  progressiveChunkSize?: number,
-  onShellReady?: () => void,
-  onShellError?: () => void,
-  onAllReady?: () => void,
-  onError?: (error: mixed) => void,
-|};
-  */
-      {
+    try {
+      const { app } = await spouts({ clientManifest, req, res, nonce });
+
+      let didError = false;
+      const { pipe, abort } = reactRender(app, {
         nonce,
         //bootstrapScripts: assets.filter(asset => asset.endsWith('.js')),
         onShellReady() {
@@ -48,17 +35,24 @@ type Options = {|
           res.statusCode = 500;
           pipe(res);
         },
-        onError(x: any) {
+        onError(e: any) {
           didError = true;
-          console.error(x);
+          console.error(e);
           res.statusCode = 500;
           //pipe(res); Removing this avoids, "React currently only supports piping to one writable stream."
+          if (onError) onError(e);
         },
-      },
-    );
-    // Abandon and switch to client rendering if enough time passes.
-    // Try lowering this to see the client recover.
-    setTimeout(abort, timeoutMS);
+      });
+      // Abandon and switch to client rendering if enough time passes.
+      // Try lowering this to see the client recover.
+      setTimeout(
+        () => (abort as any)(`Timeout of ${timeoutMS}ms exceeded`),
+        timeoutMS,
+      );
+    } catch (e: unknown) {
+      if (onError) onError(e);
+      throw e;
+    }
   };
   return render;
 }

package/src/scripts/startDevserver.ts

@@ -134,8 +134,12 @@ export default function startDevServer(
     ) {
       log.error('Errors for client build: ' + clientStats.compilation.errors);
       log.error('Errors for server build: ' + serverStats.compilation.errors);
-      // TODO: handle more gracefully
-      process.exit(-1);
+      // first time, rather than re-render
+      if (Array.isArray(initRender)) {
+        process.exit(-1);
+      }
+      log.error('Above compiler errors blocking reload');
+      return;
     } else {
       log.info('Launching SSR');
     }

package/src/spouts/app.server.tsx

@@ -0,0 +1,8 @@
+import { ServerProps } from './types';
+
+const appSpout =
+  (app: JSX.Element) =>
+  <P extends ServerProps>(props: P) =>
+    Promise.resolve({ ...props, app });
+
+export default appSpout;

package/src/spouts/app.tsx

@@ -0,0 +1,6 @@
+const appSpout =
+  (app: JSX.Element) =>
+  <P extends Record<string, unknown>>(props: P) =>
+    Promise.resolve({ ...props, app });
+
+export default appSpout;

package/src/spouts/document.server.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import type { Route } from '@anansi/router';
 import { StatsChunkGroup } from 'webpack';
 
-import type { ServerProps, ResolveProps } from './types';
+import type { ServerSpout } from './types';
 import type { Policy } from './csp';
 import Document from './DocumentComponent';
 
-type NeededProps = {
+type NeededNext = {
   matchedRoutes: Route<any>[];
   title?: string;
   scripts?: React.ReactNode[];
-} & ResolveProps;
+};
 
 export default function DocumentSpout(options: {
   head?: React.ReactNode;
@@ -18,77 +18,73 @@ export default function DocumentSpout(options: {
   rootId?: string;
   charSet?: string;
   csPolicy?: Policy;
-}) {
-  return function <T extends NeededProps>(
-    next: (props: ServerProps) => Promise<T>,
-  ) {
-    return async (props: ServerProps) => {
-      const nextProps = await next(props);
+}): ServerSpout<Record<string, unknown>, Record<string, unknown>, NeededNext> {
+  return next => async props => {
+    const nextProps = await next(props);
 
-      const publicPath = props.clientManifest.publicPath;
+    const publicPath = props.clientManifest.publicPath;
 
-      if (
-        Object.keys(props.clientManifest?.entrypoints ?? {}).length < 1 ||
-        publicPath === undefined
-      )
-        throw new Error('Manifest missing entries needed');
+    if (
+      Object.keys(props.clientManifest?.entrypoints ?? {}).length < 1 ||
+      publicPath === undefined
+    )
+      throw new Error('Manifest missing entries needed');
 
-      // TODO: consider using this package for build stats in future:
-      // https://github.com/facebook/react/tree/main/packages/react-server-dom-webpack
-      const assetMap = (assets: { name: string; size?: number }[]) =>
-        assets.map(({ name }) => `${publicPath}${name}`);
+    // TODO: consider using this package for build stats in future:
+    // https://github.com/facebook/react/tree/main/packages/react-server-dom-webpack
+    const assetMap = (assets: { name: string; size?: number }[]) =>
+      assets.map(({ name }) => `${publicPath}${name}`);
 
-      const assetList: string[] = [];
-      Object.values(props.clientManifest?.entrypoints ?? {}).forEach(
-        entrypoint => {
-          assetList.push(...assetMap(entrypoint.assets ?? []));
-        },
-      );
-      new Set(
-        assetMap(
-          Object.values(props.clientManifest.namedChunkGroups ?? {})
-            .filter(({ name }) =>
-              nextProps.matchedRoutes.some(route => name?.includes(route.name)),
-            )
-            .flatMap(chunk => [
-              ...(chunk.assets ?? []),
-              // any chunk preloads
-              ...childrenAssets(chunk),
-            ]),
-        ),
-      ).forEach(asset => assetList.push(asset));
+    const assetList: string[] = [];
+    Object.values(props.clientManifest?.entrypoints ?? {}).forEach(
+      entrypoint => {
+        assetList.push(...assetMap(entrypoint.assets ?? []));
+      },
+    );
+    new Set(
+      assetMap(
+        Object.values(props.clientManifest.namedChunkGroups ?? {})
+          .filter(({ name }) =>
+            nextProps.matchedRoutes.some(route => name?.includes(route.name)),
+          )
+          .flatMap(chunk => [
+            ...(chunk.assets ?? []),
+            // any chunk preloads
+            ...childrenAssets(chunk),
+          ]),
+      ),
+    ).forEach(asset => assetList.push(asset));
 
-      // find additional assets to preload based on matched route
-      const assets: {
-        href: string;
-        as?: string | undefined;
-        rel?: string | undefined;
-      }[] = assetList
-        .filter(asset => !asset.endsWith('.hot-update.js'))
-        .map(asset =>
-          asset.endsWith('.css')
-            ? { href: asset, rel: 'stylesheet' }
-            : asset.endsWith('.js')
-            ? { href: asset, as: 'script' }
-            : { href: asset },
-        );
+    // find additional assets to preload based on matched route
+    const assets: {
+      href: string;
+      as?: string | undefined;
+      rel?: string | undefined;
+    }[] = assetList
+      .filter(asset => !asset.endsWith('.hot-update.js'))
+      .map(asset =>
+        asset.endsWith('.css')
+          ? { href: asset, rel: 'stylesheet' }
+          : asset.endsWith('.js')
+          ? { href: asset, as: 'script' }
+          : { href: asset },
+      );
 
-      return {
-        ...nextProps,
-        app: (
-          <Document
-            {...options}
-            title={nextProps.title ?? options.title}
-            assets={assets}
-            rootId={options.rootId}
-            nonce={props.nonce}
-            csPolicy={options.csPolicy}
-            scripts={nextProps.scripts}
-          >
-            {nextProps.app}
-          </Document>
-        ),
-      };
+    return {
+      ...nextProps,
+      app: (
+        <Document
+          {...options}
+          title={nextProps.title ?? options.title}
+          assets={assets}
+          rootId={options.rootId}
+          nonce={props.nonce}
+          csPolicy={options.csPolicy}
+          scripts={nextProps.scripts}
+        >
+          {nextProps.app}
+        </Document>
+      ),
     };
   };
 }

package/src/spouts/document.tsx

@@ -1,24 +1,15 @@
 import React from 'react';
 import type { Route } from '@anansi/router';
 
-import type { ResolveProps } from './types';
-
-type NeededProps = {
-  matchedRoutes: Route<any>[];
-  title?: string;
-} & ResolveProps;
+import type { ClientSpout } from './types';
 
 export default function documentSpout(options: {
   head?: React.ReactNode;
   title: string;
-}) {
-  return function <T extends NeededProps>(
-    next: (initData: Record<string, unknown>) => Promise<T>,
-  ) {
-    return async (initData: Record<string, unknown>) => {
-      const nextProps = await next(initData);
+}): ClientSpout {
+  return next => async props => {
+    const nextProps = await next(props);
 
-      return nextProps;
-    };
+    return nextProps;
   };
 }

package/src/spouts/json.server.tsx

@@ -1,27 +1,24 @@
 import React from 'react';
-import type { Route } from '@anansi/router';
-import { StatsChunkGroup } from 'webpack';
 
-import type { ServerProps, ResolveProps } from './types';
-import type { Policy } from './csp';
-import Document from './DocumentComponent';
+import type { ServerSpout } from './types';
 
-type NeededProps = {
+type NeededNext = {
   initData?: Record<string, () => unknown>;
   scripts?: React.ReactNode[];
-} & ResolveProps;
+};
 
 export default function JSONSpout({
   id = 'anansi-json',
-}: { id?: string } = {}) {
-  return function <T extends NeededProps>(
-    next: (props: ServerProps) => Promise<T>,
-  ) {
-    return async (props: ServerProps) => {
-      const nextProps = await next(props);
+}: { id?: string } = {}): ServerSpout<
+  Record<string, unknown>,
+  Record<string, unknown>,
+  NeededNext
+> {
+  return next => async props => {
+    const nextProps = await next(props);
 
-      const scripts: React.ReactNode[] = nextProps.scripts ?? [];
-      /*
+    const scripts: React.ReactNode[] = nextProps.scripts ?? [];
+    /*
       Object.entries(nextProps.initData ?? {}).forEach(([key, data]) => {
         try {
           const encoded = JSON.stringify(data);
@@ -41,37 +38,36 @@ export default function JSONSpout({
           console.error(e);
         }
       });*/
-      const Script = () => {
-        try {
-          const data: any = {};
-          Object.entries(nextProps.initData ?? {}).forEach(([key, getData]) => {
-            data[key] = getData();
-          });
-          const encoded = JSON.stringify(data);
-          return (
-            <script
-              key={id}
-              id={id}
-              type="application/json"
-              dangerouslySetInnerHTML={{
-                __html: encoded,
-              }}
-              nonce={props.nonce}
-            />
-          );
-        } catch (e) {
-          // TODO: Use unified logging
-          console.error('Error serializing json');
-          console.error(e);
-          return null;
-        }
-      };
-      scripts.push(<Script />);
+    const Script = () => {
+      try {
+        const data: any = {};
+        Object.entries(nextProps.initData ?? {}).forEach(([key, getData]) => {
+          data[key] = getData();
+        });
+        const encoded = JSON.stringify(data);
+        return (
+          <script
+            key={id}
+            id={id}
+            type="application/json"
+            dangerouslySetInnerHTML={{
+              __html: encoded,
+            }}
+            nonce={props.nonce}
+          />
+        );
+      } catch (e) {
+        // TODO: Use unified logging
+        console.error('Error serializing json');
+        console.error(e);
+        return null;
+      }
+    };
+    scripts.push(<Script />);
 
-      return {
-        ...nextProps,
-        scripts,
-      };
+    return {
+      ...nextProps,
+      scripts,
     };
   };
 }

package/src/spouts/json.tsx

@@ -1,22 +1,14 @@
-import React from 'react';
-import type { Route } from '@anansi/router';
-
-import type { ResolveProps } from './types';
-
-type NeededProps = ResolveProps;
+import type { ClientSpout } from './types';
 
 export default function JSONSpout({
   id = 'anansi-json',
-}: { id?: string } = {}) {
-  return function <T extends NeededProps>(
-    next: (initData: Record<string, unknown>) => Promise<T>,
-  ) {
-    return async () => {
-      const initData = getDatafromDOM(id);
-      const nextProps = await next(initData);
-
-      return nextProps;
-    };
+}: { id?: string } = {}): ClientSpout<
+  Record<string, unknown>,
+  { initData: Record<string, unknown> }
+> {
+  return next => async props => {
+    const initData = getDatafromDOM(id);
+    return { ...(await next({ ...props, initData })), initData };
   };
 }
 function getDatafromDOM(id: string): Record<string, unknown> {

package/src/spouts/prefetch.server.tsx

@@ -7,14 +7,18 @@ type NeededProps<RouteWith> = {
 } & ResolveProps;
 
 export default function prefetchSpout<F extends string>(field: F) {
-  return function <RouteWith, T extends NeededProps<RouteWith>>(
-    next: (props: ServerProps) => Promise<
+  return function <
+    RouteWith,
+    N extends NeededProps<RouteWith>,
+    I extends ServerProps,
+  >(
+    next: (props: I) => Promise<
       {
         [K in F]: RouteWith;
-      } & T
+      } & N
     >,
   ) {
-    return async (props: ServerProps) => {
+    return async (props: I) => {
       const nextProps = await next(props);
 
       try {

package/src/spouts/restHooks.server.tsx

@@ -1,34 +1,39 @@
-import { Manager, NetworkManager } from '@rest-hooks/core';
+import { Controller, Manager, NetworkManager, State } from '@rest-hooks/core';
+import type { Store } from 'redux';
 
 import { createPersistedStore } from './rhHelp';
-import type { ResolveProps, ServerProps } from './types';
-
-type NeededProps = { initData?: Record<string, () => unknown> } & ResolveProps;
+import type { ServerSpout } from './types';
 
 export default function restHooksSpout(
   options: {
     getManagers: () => Manager[];
   } = { getManagers: () => [new NetworkManager()] },
-) {
-  return function <T extends NeededProps>(
-    next: (props: ServerProps) => Promise<T>,
-  ) {
-    return async (props: ServerProps) => {
-      const [ServerCacheProvider, controller, store] = createPersistedStore(
-        options.getManagers(),
-      );
+): ServerSpout<
+  Record<string, unknown>,
+  { controller: Controller; store: Store<State<unknown>> },
+  { initData?: Record<string, () => unknown> }
+> {
+  return next => async props => {
+    const [ServerCacheProvider, controller, store] = createPersistedStore(
+      options.getManagers(),
+    );
 
-      const nextProps = await next(props);
+    const nextProps = await next({
+      ...props,
+      controller,
+      store,
+    });
 
-      return {
-        ...nextProps,
-        controller,
-        initData: {
-          ...nextProps.initData,
-          resthooks: () => store.getState(),
-        },
-        app: <ServerCacheProvider>{nextProps.app}</ServerCacheProvider>,
-      };
+    return {
+      ...nextProps,
+      initData: {
+        ...nextProps.initData,
+        resthooks: () => store.getState(),
+      },
+      app: <ServerCacheProvider>{nextProps.app}</ServerCacheProvider>,
+      // TODO: figure out how to only inject in next and not have to also put here
+      controller,
+      store,
     };
   };
 }

package/src/spouts/restHooks.tsx

@@ -5,31 +5,25 @@ import {
   State,
 } from '@rest-hooks/core';
 
-import type { ResolveProps } from './types';
-
-type NeededProps = ResolveProps;
+import type { ClientSpout } from './types';
 
 export default function restHooksSpout(
   options: {
     getManagers: () => Manager[];
   } = { getManagers: () => [new NetworkManager()] },
-) {
-  return function <T extends NeededProps>(
-    next: (initData: Record<string, unknown>) => Promise<T>,
-  ) {
-    return async (initData: Record<string, unknown>) => {
-      const data = initData.resthooks as State<unknown>;
+): ClientSpout<{ initData: Record<string, unknown> }> {
+  return next => async props => {
+    const data = props.initData.resthooks as State<unknown>;
 
-      const nextProps = await next(initData);
+    const nextProps = await next(props);
 
-      return {
-        ...nextProps,
-        app: (
-          <CacheProvider initialState={data} managers={options.getManagers()}>
-            {nextProps.app}
-          </CacheProvider>
-        ),
-      };
+    return {
+      ...nextProps,
+      app: (
+        <CacheProvider initialState={data} managers={options.getManagers()}>
+          {nextProps.app}
+        </CacheProvider>
+      ),
     };
   };
 }

package/src/spouts/router.server.tsx

@@ -2,15 +2,19 @@ import { Route, RouteProvider, RouteController } from '@anansi/router';
 import React from 'react';
 import { createMemoryHistory } from 'history';
 
-import type { ResolveProps, ServerProps, CreateRouter } from './types';
-
-type NeededProps = ResolveProps;
+import type { CreateRouter, ServerSpout } from './types';
 
 export default function routerSpout<ResolveWith>(options: {
   resolveWith?: any;
   useResolveWith: () => ResolveWith;
   createRouter: CreateRouter<ResolveWith>;
-}) {
+}): ServerSpout<
+  Record<string, unknown>,
+  {
+    matchedRoutes: Route<ResolveWith>[];
+    router: RouteController<Route<ResolveWith, any>>;
+  }
+> {
   const createRouteComponent = (
     router: RouteController<Route<ResolveWith, any>>,
   ) =>
@@ -24,25 +28,27 @@ export default function routerSpout<ResolveWith>(options: {
       );
     };
 
-  return function <T extends NeededProps>(
-    next: (props: ServerProps) => Promise<T>,
-  ) {
-    return async (props: ServerProps) => {
-      const url = props.req.url || '';
-      const router = options.createRouter(
-        createMemoryHistory({ initialEntries: [url] }),
-      );
-      const matchedRoutes: Route<ResolveWith>[] = router.getMatchedRoutes(url);
+  return next => async props => {
+    const url = props.req.url || '';
+    const router = options.createRouter(
+      createMemoryHistory({ initialEntries: [url] }),
+    );
+    const matchedRoutes: Route<ResolveWith>[] = router.getMatchedRoutes(url);
+
+    const nextProps = await next({
+      ...props,
+      matchedRoutes,
+      router,
+    });
 
-      const nextProps = await next(props);
+    const Router = createRouteComponent(router);
 
-      const Router = createRouteComponent(router);
-      return {
-        ...nextProps,
-        matchedRoutes,
-        router,
-        app: <Router>{nextProps.app}</Router>,
-      };
+    return {
+      ...nextProps,
+      app: <Router>{nextProps.app}</Router>,
+      // TODO: figure out how to only inject in next and not have to also put here
+      matchedRoutes,
+      router,
     };
   };
 }