@anansi/core 0.11.1 → 0.13.0

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/DocumentComponent.tsx

@@ -30,7 +30,12 @@ export default function Document({
     const policy = {
       ...csPolicy,
     };
-    if (nonce) {
+    if (
+      nonce &&
+      // nonces negate 'unsafe-inline' so do not add it if that directive exists
+      (!policy['script-src'] ||
+        !policy['script-src'].includes("'unsafe-inline'"))
+    ) {
       if (typeof policy['script-src'] === 'string') {
         policy['script-src'] = [policy['script-src'], `'nonce-${nonce}'`];
       } else {

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

@@ -6,7 +6,7 @@ import type { ServerProps, ResolveProps } from './types';
 import type { Policy } from './csp';
 import Document from './DocumentComponent';
 
-type NeededProps = {
+type NeededNext = {
   matchedRoutes: Route<any>[];
   title?: string;
   scripts?: React.ReactNode[];
@@ -19,10 +19,10 @@ export default function DocumentSpout(options: {
   charSet?: string;
   csPolicy?: Policy;
 }) {
-  return function <T extends NeededProps>(
-    next: (props: ServerProps) => Promise<T>,
+  return function <N extends NeededNext, I extends ServerProps>(
+    next: (props: I) => Promise<N>,
   ) {
-    return async (props: ServerProps) => {
+    return async (props: I) => {
       const nextProps = await next(props);
 
       const publicPath = props.clientManifest.publicPath;

package/src/spouts/document.tsx

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

package/src/spouts/json.server.tsx

@@ -1,12 +1,8 @@
 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';
 
-type NeededProps = {
+type NeededNext = {
   initData?: Record<string, () => unknown>;
   scripts?: React.ReactNode[];
 } & ResolveProps;
@@ -14,10 +10,10 @@ type NeededProps = {
 export default function JSONSpout({
   id = 'anansi-json',
 }: { id?: string } = {}) {
-  return function <T extends NeededProps>(
-    next: (props: ServerProps) => Promise<T>,
+  return function <N extends NeededNext, I extends ServerProps>(
+    next: (props: I) => Promise<N>,
   ) {
-    return async (props: ServerProps) => {
+    return async (props: I) => {
       const nextProps = await next(props);
 
       const scripts: React.ReactNode[] = nextProps.scripts ?? [];

package/src/spouts/json.tsx

@@ -1,25 +1,20 @@
-import React from 'react';
-import type { Route } from '@anansi/router';
-
 import type { ResolveProps } from './types';
 
-type NeededProps = ResolveProps;
+type NeededNext = ResolveProps;
 
 export default function JSONSpout({
   id = 'anansi-json',
 }: { id?: string } = {}) {
-  return function <T extends NeededProps>(
-    next: (initData: Record<string, unknown>) => Promise<T>,
+  return function <N extends NeededNext, I extends Record<string, unknown>>(
+    next: (props: I & { initData: Record<string, unknown> }) => Promise<N>,
   ) {
-    return async () => {
+    return async (props: I) => {
       const initData = getDatafromDOM(id);
-      const nextProps = await next(initData);
-
-      return nextProps;
+      return await next({ ...props, initData });
     };
   };
 }
 function getDatafromDOM(id: string): Record<string, unknown> {
-  const element = document.querySelector(`#${id}`);
-  return element?.innerHTML ? JSON.parse(element?.innerHTML) : undefined;
+  const element: HTMLScriptElement | null = document.querySelector(`#${id}`);
+  return element?.text ? JSON.parse(element?.text) : undefined;
 }

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,33 +1,42 @@
-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;
+type NeededNext = { initData?: Record<string, () => unknown> } & ResolveProps;
 
 export default function restHooksSpout(
   options: {
     getManagers: () => Manager[];
   } = { getManagers: () => [new NetworkManager()] },
 ) {
-  return function <T extends NeededProps>(
-    next: (props: ServerProps) => Promise<T>,
+  return function <N extends NeededNext, I extends ServerProps>(
+    next: (
+      props: I & { controller: Controller; store: Store<State<unknown>> },
+    ) => Promise<N>,
   ) {
-    return async (props: ServerProps) => {
+    return async (props: I) => {
       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>,
+        // TODO: figure out how to only inject in next and not have to also put here
+        controller,
+        store,
       };
     };
   };

package/src/spouts/restHooks.tsx

@@ -7,20 +7,20 @@ import {
 
 import type { ResolveProps } from './types';
 
-type NeededProps = ResolveProps;
+type NeededNext = ResolveProps;
 
 export default function restHooksSpout(
   options: {
     getManagers: () => Manager[];
   } = { getManagers: () => [new NetworkManager()] },
 ) {
-  return function <T extends NeededProps>(
-    next: (initData: Record<string, unknown>) => Promise<T>,
+  return function <N extends NeededNext, I extends Record<string, unknown>>(
+    next: (props: I) => Promise<N>,
   ) {
-    return async (initData: Record<string, unknown>) => {
-      const data = initData.resthooks as State<unknown>;
+    return async (props: I & { initData: Record<string, unknown> }) => {
+      const data = props.initData.resthooks as State<unknown>;
 
-      const nextProps = await next(initData);
+      const nextProps = await next(props);
 
       return {
         ...nextProps,

package/src/spouts/router.server.tsx

@@ -4,7 +4,7 @@ import { createMemoryHistory } from 'history';
 
 import type { ResolveProps, ServerProps, CreateRouter } from './types';
 
-type NeededProps = ResolveProps;
+type NeededNext = ResolveProps;
 
 export default function routerSpout<ResolveWith>(options: {
   resolveWith?: any;
@@ -24,24 +24,35 @@ export default function routerSpout<ResolveWith>(options: {
       );
     };
 
-  return function <T extends NeededProps>(
-    next: (props: ServerProps) => Promise<T>,
+  return function <N extends NeededNext, I extends ServerProps>(
+    next: (
+      props: I & {
+        matchedRoutes: Route<ResolveWith>[];
+        router: RouteController<Route<ResolveWith, any>>;
+      },
+    ) => Promise<N>,
   ) {
-    return async (props: ServerProps) => {
+    return async (props: I) => {
       const url = props.req.url || '';
       const router = options.createRouter(
         createMemoryHistory({ initialEntries: [url] }),
       );
       const matchedRoutes: Route<ResolveWith>[] = router.getMatchedRoutes(url);
 
-      const nextProps = await next(props);
+      const nextProps = await next({
+        ...props,
+        matchedRoutes,
+        router,
+      });
 
       const Router = createRouteComponent(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,
-        app: <Router>{nextProps.app}</Router>,
       };
     };
   };

package/src/spouts/router.tsx

@@ -5,7 +5,7 @@ import type { Update } from 'history';
 
 import type { ResolveProps, CreateRouter } from './types';
 
-type NeededProps = ResolveProps;
+type NeededNext = ResolveProps;
 
 export default function routerSpout<ResolveWith>(options: {
   resolveWith?: any;
@@ -30,15 +30,15 @@ export default function routerSpout<ResolveWith>(options: {
       );
     };
 
-  return function <T extends NeededProps>(
-    next: (initData: Record<string, unknown>) => Promise<T>,
+  return function <N extends NeededNext, I extends Record<string, unknown>>(
+    next: (initData: Record<string, unknown>) => Promise<N>,
   ) {
-    return async (initData: Record<string, unknown>) => {
+    return async (props: I) => {
       const history = createBrowserHistory();
       const router = options.createRouter(history);
       const matchedRoutes = router.getMatchedRoutes(history.location.pathname);
 
-      const nextProps = await next(initData);
+      const nextProps = await next(props);
 
       const Router = createRouteComponent(router);
       return {