@anansi/core 0.8.0 → 0.11.0

package/src/scripts/serve.ts

@@ -11,6 +11,7 @@ import compress from 'compression';
 
 import 'cross-fetch/polyfill';
 import { Render } from './types';
+import getProxyMiddlewares from './getProxyMiddlewares';
 
 // run directly from node
 if (require.main === module) {
@@ -23,12 +24,26 @@ if (require.main === module) {
   serve(entrypoint);
 }
 
-export default function serve(entrypoint: string) {
+export default function serve(
+  entrypoint: string,
+  options: { serveAssets?: boolean; serveProxy?: boolean } = {},
+) {
   const PORT = process.env.PORT || 8080;
 
   const loader = ora('Initializing').start();
 
-  const manifestPath = getManifestPathFromWebpackconfig();
+  const webpackConfig: (
+    env: any,
+    argv: any,
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+  ) => webpack.Configuration = require(require.resolve(
+    // TODO: use normal resolution algorithm to find webpack file
+    path.join(process.cwd(), 'webpack.config'),
+  ));
+
+  const manifestPath = getManifestPathFromWebpackconfig(
+    webpackConfig({}, { mode: 'production' }),
+  );
 
   const readFile = promisify(diskFs.readFile);
   let server: Server | undefined;
@@ -67,23 +82,53 @@ export default function serve(entrypoint: string) {
     wrappingApp.use(compress());
 
     // ASSETS
-    const assetRoute = async (req: Request | IncomingMessage, res: any) => {
-      const filename =
-        req.url?.substr((process.env.WEBPACK_PUBLIC_PATH as string).length) ??
-        '';
-      const assetPath = path.join(clientManifest.outputPath ?? '', filename);
+    if (options.serveAssets) {
+      wrappingApp.use(
+        async (
+          req: Request | IncomingMessage,
+          res: any,
+          next: NextFunction,
+        ) => {
+          const filename =
+            req.url?.substr(
+              (process.env.WEBPACK_PUBLIC_PATH as string).length,
+            ) ?? '';
+          const assetPath = path.join(
+            clientManifest.outputPath ?? '',
+            filename,
+          );
+
+          if (
+            diskFs.existsSync(assetPath) &&
+            !diskFs.lstatSync(assetPath).isDirectory()
+          ) {
+            try {
+              const fileContent = (await readFile(assetPath)).toString();
+              res.contentType(filename);
+              res.send(fileContent);
+            } catch (e) {
+              return next();
+            }
+          } else {
+            next();
+          }
+        },
+      );
+    }
 
-      try {
-        const fileContent = (await readFile(assetPath)).toString();
-        res.contentType(filename);
-        res.send(fileContent);
-      } catch (e) {
-        res.status(404);
-        res.send(e);
-        return;
+    // PROXIES
+    if (options.serveProxy) {
+      const devConfig: webpack.Configuration = webpackConfig(
+        {},
+        { mode: 'development' },
+      );
+      if (devConfig.devServer?.proxy) {
+        const middlewares = getProxyMiddlewares(devConfig.devServer?.proxy);
+        if (middlewares) {
+          wrappingApp.use(...middlewares.map(({ middleware }) => middleware));
+        }
       }
-    };
-    wrappingApp.get(`${process.env.WEBPACK_PUBLIC_PATH}*`, assetRoute);
+    }
 
     // SERVER SIDE RENDERING
     // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -91,6 +136,7 @@ export default function serve(entrypoint: string) {
       process.cwd(),
       entrypoint,
     )).default;
+
     wrappingApp.get(
       '/*',
       handleErrors(async function (req: any, res: any) {
@@ -147,12 +193,9 @@ export default function serve(entrypoint: string) {
   });
 }
 
-function getManifestPathFromWebpackconfig() {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const webpackConfig: webpack.Configuration = require(require.resolve(
-    // TODO: use normal resolution algorithm to find webpack file
-    path.join(process.cwd(), 'webpack.config'),
-  ))({}, { mode: 'production' });
+function getManifestPathFromWebpackconfig(
+  webpackConfig: webpack.Configuration,
+) {
   const manifestFilename: string =
     (
       webpackConfig?.plugins?.find(plugin => {

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';
@@ -21,8 +20,6 @@ import { BoundRender } from './types';
 // run directly from node
 if (require.main === module) {
   const entrypoint = process.argv[2];
-  //process.env.WEBPACK_PUBLIC_HOST = `http://localhost:${PORT}`; this breaks compatibility with stackblitz
-  process.env.WEBPACK_PUBLIC_PATH = '/assets/';
 
   if (!entrypoint) {
     console.log(`Usage: start-anansi <entrypoint-file>`);
@@ -49,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;
 
@@ -92,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);
 
@@ -124,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[]) {
@@ -149,19 +143,20 @@ 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 = undefined;
     }
   }
 
@@ -169,13 +164,6 @@ export default function startDevServer(
     // write to memory filesystem so we can import
     {
       ...webpackConfigs[0].devServer,
-      /*client: {
-        ...webpackConfigs[0].devServer?.client,
-        webSocketURL: {
-          ...webpackConfigs[0].devServer?.client.webSocketURL,
-          port: 8080,
-        },
-      },*/
       devMiddleware: {
         ...webpackConfigs[0]?.devServer?.devMiddleware,
         outputFileSystem: {

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,19 +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;
-  charSet?: string;
+  scripts?: React.ReactNode[];
 } & ResolveProps;
 
 export default function DocumentSpout(options: {
   head?: React.ReactNode;
   title: string;
-  rootId: string;
-  charSet: string;
+  rootId?: string;
+  charSet?: string;
+  csPolicy?: Policy;
 }) {
   return function <T extends NeededProps>(
     next: (props: ServerProps) => Promise<T>,
@@ -79,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 */