@anansi/core 0.9.0 → 0.11.1

package/src/index.server.ts

@@ -3,3 +3,4 @@ export { default as documentSpout } from './spouts/document.server';
 export { default as restHooksSpout } from './spouts/restHooks.server';
 export { default as routerSpout } from './spouts/router.server';
 export { default as prefetchSpout } from './spouts/prefetch.server';
+export { default as JSONSpout } from './spouts/json.server';

package/src/index.ts

@@ -2,3 +2,4 @@ export { default as floodSpouts } from './floodSpouts';
 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';

package/src/laySpouts.tsx

@@ -1,4 +1,5 @@
 import { renderToPipeableStream as reactRender } from 'react-dom/server';
+import crypto from 'crypto';
 
 import { Render } from './scripts/types';
 import { ServerProps } from './spouts/types';
@@ -10,7 +11,9 @@ export default function laySpouts(
   { timeoutMS = 200 }: { timeoutMS?: number } = {},
 ) {
   const render: Render = async (clientManifest, req, res) => {
-    const { app } = await spouts({ 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,
@@ -31,6 +34,7 @@ type Options = {|
 |};
   */
       {
+        nonce,
         //bootstrapScripts: assets.filter(asset => asset.endsWith('.js')),
         onShellReady() {
           //managers.forEach(manager => manager.cleanup());

package/src/scripts/startDevserver.ts

@@ -7,13 +7,12 @@ import webpack, { MultiCompiler } from 'webpack';
 import { createFsFromVolume, Volume } from 'memfs';
 import { Server, IncomingMessage, ServerResponse } from 'http';
 import type { NextFunction } from 'express';
-import { patchRequire } from 'fs-monkey';
 import tmp from 'tmp';
 import sourceMapSupport from 'source-map-support';
 import { ufs } from 'unionfs';
 import WebpackDevServer from 'webpack-dev-server';
-import importFresh from 'import-fresh';
 import logging from 'webpack/lib/logging/runtime';
+import { createFsRequire } from 'fs-require';
 
 import 'cross-fetch/polyfill';
 import { BoundRender } from './types';
@@ -47,7 +46,7 @@ export default function startDevServer(
   const fs = createFsFromVolume(volume);
   ufs.use(diskFs).use(fs as any);
 
-  patchRequire(ufs);
+  const fsRequire = createFsRequire(ufs);
   const readFile = promisify(ufs.readFile);
   let server: Server | undefined;
 
@@ -90,10 +89,7 @@ export default function startDevServer(
       { mode: 'development', target: 'node' },
     ),
   ] as const;
-  // only have one output for server so we can avoid cached modules
-  webpackConfigs[1].plugins.push(
-    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-  );
+
   // initialize the webpack compiler
   const compiler: MultiCompiler = webpack(webpackConfigs);
 
@@ -122,12 +118,12 @@ export default function startDevServer(
     };
   }
 
-  const initRender:
+  let initRender:
     | { args: Parameters<BoundRender>; resolve: () => void }[]
     | undefined = [];
   let render: BoundRender = (...args) =>
     new Promise(resolve => {
-      initRender.push({ args, resolve });
+      initRender?.push({ args, resolve });
     });
 
   function importRender(stats: webpack.Stats[]) {
@@ -147,19 +143,29 @@ export default function startDevServer(
     // ASSETS
     const clientManifest = clientStats.toJson();
 
+    const serverEntry = getServerBundle(serverStats);
+    // reload modules
+    Object.keys(fsRequire.cache).forEach(key => {
+      delete fsRequire.cache[key];
+    });
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    render = (fsRequire(serverEntry) as any).default.bind(
+      undefined,
+      clientManifest,
+    );
     // SERVER SIDE ENTRYPOINT
     if (Array.isArray(initRender)) {
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      render = (require(getServerBundle(serverStats)) as any).default.bind(
-        undefined,
-        clientManifest,
-      );
-      initRender.forEach(init => render(...init.args).then(init.resolve));
-    } else {
-      render = (importFresh(getServerBundle(serverStats)) as any).default.bind(
-        undefined,
-        clientManifest,
-      );
+      initRender.forEach(async init => {
+        try {
+          log.info('Resolving queued requests');
+          await render(...init.args);
+          init.resolve();
+        } catch (e) {
+          log.error('Error when attempting to render queued requests');
+          log.error(e);
+        }
+      });
+      initRender = undefined;
     }
   }
 
@@ -201,6 +207,13 @@ export default function startDevServer(
           }),
         );
 
+        if (webpackConfigs[0].devServer?.setupMiddlewares) {
+          return webpackConfigs[0].devServer.setupMiddlewares(
+            middlewares,
+            devServer,
+          );
+        }
+
         return middlewares;
       },
     },

package/src/spouts/DocumentComponent.tsx

@@ -1,10 +1,16 @@
+import type { Policy } from './csp';
+import { buildPolicy } from './csp';
+
 type Props = {
   children: React.ReactNode;
   assets: { href: string; as?: string; rel?: string }[];
   head: React.ReactNode;
+  scripts: React.ReactNode;
   title: string;
   rootId: string;
   charSet: string;
+  csPolicy?: Policy;
+  nonce?: string | undefined;
 };
 
 export default function Document({
@@ -14,11 +20,32 @@ export default function Document({
   title,
   rootId,
   charSet,
+  csPolicy,
+  nonce,
+  scripts,
 }: Props) {
+  let cspMeta: null | React.ReactNode = null;
+  if (csPolicy) {
+    // add nonce to policy
+    const policy = {
+      ...csPolicy,
+    };
+    if (nonce) {
+      if (typeof policy['script-src'] === 'string') {
+        policy['script-src'] = [policy['script-src'], `'nonce-${nonce}'`];
+      } else {
+        policy['script-src'] = [...policy['script-src'], `'nonce-${nonce}'`];
+      }
+    }
+    cspMeta = (
+      <meta httpEquiv="Content-Security-Policy" content={buildPolicy(policy)} />
+    );
+  }
   return (
     <html>
       <head>
         <meta charSet={charSet} />
+        {cspMeta}
         {head}
         {assets.map((asset, i) => (
           <link key={i} rel="preload" {...asset} />
@@ -27,12 +54,7 @@ export default function Document({
       </head>
       <body>
         <div id={rootId}>{children}</div>
-        {/* this ensures the client can hydrate the assets prop */}
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `assetManifest = ${JSON.stringify(assets)};`,
-          }}
-        />
+        {scripts}
         {assets
           .filter(({ href }) => href.endsWith('.js'))
           .map(({ href }, i) => (
@@ -54,4 +76,5 @@ Document.defaultProps = {
   ),
   charSet: 'utf-8',
   rootId: 'anansi-root',
+  scripts: null,
 };

package/src/spouts/csp.ts

@@ -0,0 +1,25 @@
+export interface Policy {
+  [directive: string]: string | string[];
+}
+
+// TODO: memoize this
+export function buildPolicy(policyObj: Policy) {
+  return Object.keys(policyObj)
+    .map(key => {
+      const val = Array.isArray(policyObj[key])
+        ? [...new Set(policyObj[key]).values()].filter(v => v).join(' ')
+        : policyObj[key];
+
+      // move strict dynamic to the end of the policy if it exists to be backwards compatible with csp2
+      // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic
+      if (typeof val === 'string' && val.includes("'strict-dynamic'")) {
+        const newVal = `${val
+          .replace(/\s?'strict-dynamic'\s?/gi, ' ')
+          .trim()} 'strict-dynamic'`;
+        return `${key} ${newVal}`;
+      }
+
+      return `${key} ${val}`;
+    })
+    .join('; ');
+}

package/src/spouts/document.server.tsx

@@ -3,18 +3,21 @@ 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 = {
   matchedRoutes: Route<any>[];
   title?: string;
+  scripts?: React.ReactNode[];
 } & ResolveProps;
 
 export default function DocumentSpout(options: {
   head?: React.ReactNode;
   title: string;
-  rootId: string;
+  rootId?: string;
   charSet?: string;
+  csPolicy?: Policy;
 }) {
   return function <T extends NeededProps>(
     next: (props: ServerProps) => Promise<T>,
@@ -78,6 +81,9 @@ export default function DocumentSpout(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

@@ -12,9 +12,11 @@ export default function documentSpout(options: {
   head?: React.ReactNode;
   title: string;
 }) {
-  return function <T extends NeededProps>(next: () => Promise<T>) {
-    return async () => {
-      const nextProps = await next();
+  return function <T extends NeededProps>(
+    next: (initData: Record<string, unknown>) => Promise<T>,
+  ) {
+    return async (initData: Record<string, unknown>) => {
+      const nextProps = await next(initData);
 
       return nextProps;
     };

package/src/spouts/json.server.tsx

@@ -0,0 +1,77 @@
+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 = {
+  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);
+
+      const scripts: React.ReactNode[] = nextProps.scripts ?? [];
+      /*
+      Object.entries(nextProps.initData ?? {}).forEach(([key, data]) => {
+        try {
+          const encoded = JSON.stringify(data);
+          scripts.push(
+            <script
+              key={key}
+              id={`${id}-${key}`}
+              type="application/json"
+              dangerouslySetInnerHTML={{
+                __html: encoded,
+              }}
+              nonce={props.nonce}
+            />,
+          );
+        } catch (e) {
+          // TODO: Use unified logging
+          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 />);
+
+      return {
+        ...nextProps,
+        scripts,
+      };
+    };
+  };
+}

package/src/spouts/json.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Route } from '@anansi/router';
+
+import type { ResolveProps } from './types';
+
+type NeededProps = ResolveProps;
+
+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;
+    };
+  };
+}
+function getDatafromDOM(id: string): Record<string, unknown> {
+  const element = document.querySelector(`#${id}`);
+  return element?.innerHTML ? JSON.parse(element?.innerHTML) : undefined;
+}

package/src/spouts/restHooks.server.tsx

@@ -1,9 +1,9 @@
 import { Manager, NetworkManager } from '@rest-hooks/core';
-import { createPersistedStore } from '@rest-hooks/ssr';
 
+import { createPersistedStore } from './rhHelp';
 import type { ResolveProps, ServerProps } from './types';
 
-type NeededProps = ResolveProps;
+type NeededProps = { initData?: Record<string, () => unknown> } & ResolveProps;
 
 export default function restHooksSpout(
   options: {
@@ -14,7 +14,7 @@ export default function restHooksSpout(
     next: (props: ServerProps) => Promise<T>,
   ) {
     return async (props: ServerProps) => {
-      const [ServerCacheProvider, controller] = createPersistedStore(
+      const [ServerCacheProvider, controller, store] = createPersistedStore(
         options.getManagers(),
       );
 
@@ -23,6 +23,10 @@ export default function restHooksSpout(
       return {
         ...nextProps,
         controller,
+        initData: {
+          ...nextProps.initData,
+          resthooks: () => store.getState(),
+        },
         app: <ServerCacheProvider>{nextProps.app}</ServerCacheProvider>,
       };
     };

package/src/spouts/restHooks.tsx

@@ -1,5 +1,9 @@
-import { CacheProvider, Manager, NetworkManager } from '@rest-hooks/core';
-import { ServerDataComponent, getDatafromDOM } from '@rest-hooks/ssr';
+import {
+  CacheProvider,
+  Manager,
+  NetworkManager,
+  State,
+} from '@rest-hooks/core';
 
 import type { ResolveProps } from './types';
 
@@ -10,18 +14,19 @@ export default function restHooksSpout(
     getManagers: () => Manager[];
   } = { getManagers: () => [new NetworkManager()] },
 ) {
-  return function <T extends NeededProps>(next: () => Promise<T>) {
-    return async () => {
-      const data = getDatafromDOM();
+  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>;
 
-      const nextProps = await next();
+      const nextProps = await next(initData);
 
       return {
         ...nextProps,
         app: (
           <CacheProvider initialState={data} managers={options.getManagers()}>
             {nextProps.app}
-            <ServerDataComponent data={data} />
           </CacheProvider>
         ),
       };

package/src/spouts/rhHelp.tsx

@@ -0,0 +1,37 @@
+import { ExternalCacheProvider, PromiseifyMiddleware } from 'rest-hooks';
+import {
+  Controller,
+  createReducer,
+  initialState,
+  Manager,
+  applyManager,
+  NetworkManager,
+} from '@rest-hooks/core';
+import { createStore, applyMiddleware } from 'redux';
+
+// TODO: Rework this and upstream to rest hooks
+export function createPersistedStore(managers?: Manager[]) {
+  const controller = new Controller();
+  managers = managers ?? [new NetworkManager()];
+  const reducer = createReducer(controller);
+  const enhancer = applyMiddleware(
+    ...applyManager(managers, controller),
+    PromiseifyMiddleware as any,
+  );
+  const store = createStore(reducer, initialState as any, enhancer);
+  managers.forEach(manager => manager.init?.(store.getState()));
+
+  const selector = (state: any) => state;
+  function ServerCacheProvider({ children }: { children: React.ReactNode }) {
+    return (
+      <ExternalCacheProvider
+        store={store}
+        selector={selector}
+        controller={controller}
+      >
+        {children}
+      </ExternalCacheProvider>
+    );
+  }
+  return [ServerCacheProvider, controller, store] as const;
+}

package/src/spouts/router.tsx

@@ -1,6 +1,7 @@
 import { Route, RouteProvider, RouteController } from '@anansi/router';
 import React from 'react';
 import { createBrowserHistory } from 'history';
+import type { Update } from 'history';
 
 import type { ResolveProps, CreateRouter } from './types';
 
@@ -10,6 +11,7 @@ export default function routerSpout<ResolveWith>(options: {
   resolveWith?: any;
   useResolveWith: () => ResolveWith;
   createRouter: CreateRouter<ResolveWith>;
+  onChange?: (update: Update, callback: () => void | undefined) => void;
 }) {
   const createRouteComponent = (
     router: RouteController<Route<ResolveWith, any>>,
@@ -18,19 +20,25 @@ export default function routerSpout<ResolveWith>(options: {
       const resolveWith = options.useResolveWith();
 
       return (
-        <RouteProvider router={router} resolveWith={resolveWith}>
+        <RouteProvider
+          router={router}
+          resolveWith={resolveWith}
+          onChange={options.onChange}
+        >
           {children}
         </RouteProvider>
       );
     };
 
-  return function <T extends NeededProps>(next: () => Promise<T>) {
-    return async () => {
+  return function <T extends NeededProps>(
+    next: (initData: Record<string, unknown>) => Promise<T>,
+  ) {
+    return async (initData: Record<string, unknown>) => {
       const history = createBrowserHistory();
       const router = options.createRouter(history);
       const matchedRoutes = router.getMatchedRoutes(history.location.pathname);
 
-      const nextProps = await next();
+      const nextProps = await next(initData);
 
       const Router = createRouteComponent(router);
       return {

package/src/spouts/types.ts

@@ -9,6 +9,7 @@ export type ServerProps = {
   req: Request | IncomingMessage;
   res: Response | ServerResponse;
   clientManifest: StatsCompilation;
+  nonce: string;
 };
 
 /* Baseline expectations of return value */