@anansi/core 0.20.44 → 0.21.1

package/lib/spouts/navigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigator.d.ts","sourceRoot":"","sources":["../../src/spouts/navigator.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI,WAAW,CAAC;IACpD,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC,CA0BD"}

package/lib/spouts/navigator.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { NavigatorContext } from './navigator.context.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function navigatorSpout() {
+  return next => async props => {
+    const nextProps = await next(props);
+    const navigatorProps = await props.getInitialData('navigator').catch(e => {
+      console.warn('Navigator initial data could not load, using client navigator. Error:', e);
+      return {
+        language: navigator.language,
+        languages: [...navigator.languages]
+      };
+    });
+    return {
+      ...nextProps,
+      navigator: navigatorProps,
+      app: /*#__PURE__*/_jsx(NavigatorContext, {
+        value: navigatorProps,
+        children: nextProps.app
+      })
+    };
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIk5hdmlnYXRvckNvbnRleHQiLCJqc3giLCJfanN4IiwibmF2aWdhdG9yU3BvdXQiLCJuZXh0IiwicHJvcHMiLCJuZXh0UHJvcHMiLCJuYXZpZ2F0b3JQcm9wcyIsImdldEluaXRpYWxEYXRhIiwiY2F0Y2giLCJlIiwiY29uc29sZSIsIndhcm4iLCJsYW5ndWFnZSIsIm5hdmlnYXRvciIsImxhbmd1YWdlcyIsImFwcCIsInZhbHVlIiwiY2hpbGRyZW4iXSwic291cmNlcyI6WyIuLi8uLi9zcmMvc3BvdXRzL25hdmlnYXRvci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgTmF2aWdhdG9yQ29udGV4dCB9IGZyb20gJy4vbmF2aWdhdG9yLmNvbnRleHQuanMnO1xuaW1wb3J0IHR5cGUgeyBOYXZpZ2F0b3JQcm9wZXJ0aWVzIH0gZnJvbSAnLi9uYXZpZ2F0b3IuY29udGV4dC5qcyc7XG5pbXBvcnQgdHlwZSB7IENsaWVudFNwb3V0IH0gZnJvbSAnLi90eXBlcy5qcyc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIG5hdmlnYXRvclNwb3V0KCk6IENsaWVudFNwb3V0PHtcbiAgZ2V0SW5pdGlhbERhdGE6IChrZXk6IHN0cmluZykgPT4gUHJvbWlzZTxhbnk+O1xufT4ge1xuICByZXR1cm4gbmV4dCA9PiBhc3luYyBwcm9wcyA9PiB7XG4gICAgY29uc3QgbmV4dFByb3BzID0gYXdhaXQgbmV4dChwcm9wcyk7XG4gICAgY29uc3QgbmF2aWdhdG9yUHJvcHM6IE5hdmlnYXRvclByb3BlcnRpZXMgPSBhd2FpdCBwcm9wc1xuICAgICAgLmdldEluaXRpYWxEYXRhKCduYXZpZ2F0b3InKVxuICAgICAgLmNhdGNoKGUgPT4ge1xuICAgICAgICBjb25zb2xlLndhcm4oXG4gICAgICAgICAgJ05hdmlnYXRvciBpbml0aWFsIGRhdGEgY291bGQgbm90IGxvYWQsIHVzaW5nIGNsaWVudCBuYXZpZ2F0b3IuIEVycm9yOicsXG4gICAgICAgICAgZSxcbiAgICAgICAgKTtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICBsYW5ndWFnZTogbmF2aWdhdG9yLmxhbmd1YWdlLFxuICAgICAgICAgIGxhbmd1YWdlczogWy4uLm5hdmlnYXRvci5sYW5ndWFnZXNdLFxuICAgICAgICB9O1xuICAgICAgfSk7XG5cbiAgICByZXR1cm4ge1xuICAgICAgLi4ubmV4dFByb3BzLFxuICAgICAgbmF2aWdhdG9yOiBuYXZpZ2F0b3JQcm9wcyxcbiAgICAgIGFwcDogKFxuICAgICAgICA8TmF2aWdhdG9yQ29udGV4dCB2YWx1ZT17bmF2aWdhdG9yUHJvcHN9PlxuICAgICAgICAgIHtuZXh0UHJvcHMuYXBwfVxuICAgICAgICA8L05hdmlnYXRvckNvbnRleHQ+XG4gICAgICApLFxuICAgIH07XG4gIH07XG59XG4iXSwibWFwcGluZ3MiOiJBQUFBLE9BQU9BLEtBQUssTUFBTSxPQUFPO0FBRXpCLFNBQVNDLGdCQUFnQixRQUFRLHdCQUF3QjtBQUFDLFNBQUFDLEdBQUEsSUFBQUMsSUFBQTtBQUkxRCxlQUFlLFNBQVNDLGNBQWNBLENBQUEsRUFFbkM7RUFDRCxPQUFPQyxJQUFJLElBQUksTUFBTUMsS0FBSyxJQUFJO0lBQzVCLE1BQU1DLFNBQVMsR0FBRyxNQUFNRixJQUFJLENBQUNDLEtBQUssQ0FBQztJQUNuQyxNQUFNRSxjQUFtQyxHQUFHLE1BQU1GLEtBQUssQ0FDcERHLGNBQWMsQ0FBQyxXQUFXLENBQUMsQ0FDM0JDLEtBQUssQ0FBQ0MsQ0FBQyxJQUFJO01BQ1ZDLE9BQU8sQ0FBQ0MsSUFBSSxDQUNWLHVFQUF1RSxFQUN2RUYsQ0FDRixDQUFDO01BQ0QsT0FBTztRQUNMRyxRQUFRLEVBQUVDLFNBQVMsQ0FBQ0QsUUFBUTtRQUM1QkUsU0FBUyxFQUFFLENBQUMsR0FBR0QsU0FBUyxDQUFDQyxTQUFTO01BQ3BDLENBQUM7SUFDSCxDQUFDLENBQUM7SUFFSixPQUFPO01BQ0wsR0FBR1QsU0FBUztNQUNaUSxTQUFTLEVBQUVQLGNBQWM7TUFDekJTLEdBQUcsZUFDRGQsSUFBQSxDQUFDRixnQkFBZ0I7UUFBQ2lCLEtBQUssRUFBRVYsY0FBZTtRQUFBVyxRQUFBLEVBQ3JDWixTQUFTLENBQUNVO01BQUcsQ0FDRTtJQUV0QixDQUFDO0VBQ0gsQ0FBQztBQUNIIiwiaWdub3JlTGlzdCI6W119

package/lib/spouts/navigator.server.d.ts

@@ -0,0 +1,10 @@
+import type { ServerSpout } from './types.js';
+type NeededNext = {
+    initData?: Record<string, () => unknown>;
+};
+export default function navigatorSpout(): ServerSpout<Record<string, unknown>, {
+    language: string;
+    languages: readonly string[];
+}, NeededNext>;
+export {};
+//# sourceMappingURL=navigator.server.d.ts.map

package/lib/spouts/navigator.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigator.server.d.ts","sourceRoot":"","sources":["../../src/spouts/navigator.server.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI,WAAW,CACnD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAClD,UAAU,CACX,CA0BA"}

package/lib/spouts/navigator.server.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { NavigatorContext, parseAcceptLanguage } from './navigator.context.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function navigatorSpout() {
+  return next => async props => {
+    const acceptLanguage = props.req.headers['accept-language'];
+    const header = typeof acceptLanguage === 'string' ? acceptLanguage : acceptLanguage == null ? void 0 : acceptLanguage[0];
+    const navigatorProps = parseAcceptLanguage(header);
+    const nextProps = await next({
+      ...props,
+      ...navigatorProps
+    });
+    return {
+      ...nextProps,
+      ...navigatorProps,
+      initData: {
+        ...nextProps.initData,
+        navigator: () => navigatorProps
+      },
+      app: /*#__PURE__*/_jsx(NavigatorContext, {
+        value: navigatorProps,
+        children: nextProps.app
+      })
+    };
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIk5hdmlnYXRvckNvbnRleHQiLCJwYXJzZUFjY2VwdExhbmd1YWdlIiwianN4IiwiX2pzeCIsIm5hdmlnYXRvclNwb3V0IiwibmV4dCIsInByb3BzIiwiYWNjZXB0TGFuZ3VhZ2UiLCJyZXEiLCJoZWFkZXJzIiwiaGVhZGVyIiwibmF2aWdhdG9yUHJvcHMiLCJuZXh0UHJvcHMiLCJpbml0RGF0YSIsIm5hdmlnYXRvciIsImFwcCIsInZhbHVlIiwiY2hpbGRyZW4iXSwic291cmNlcyI6WyIuLi8uLi9zcmMvc3BvdXRzL25hdmlnYXRvci5zZXJ2ZXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IE5hdmlnYXRvckNvbnRleHQsIHBhcnNlQWNjZXB0TGFuZ3VhZ2UgfSBmcm9tICcuL25hdmlnYXRvci5jb250ZXh0LmpzJztcbmltcG9ydCB0eXBlIHsgU2VydmVyU3BvdXQgfSBmcm9tICcuL3R5cGVzLmpzJztcblxudHlwZSBOZWVkZWROZXh0ID0ge1xuICBpbml0RGF0YT86IFJlY29yZDxzdHJpbmcsICgpID0+IHVua25vd24+O1xufTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gbmF2aWdhdG9yU3BvdXQoKTogU2VydmVyU3BvdXQ8XG4gIFJlY29yZDxzdHJpbmcsIHVua25vd24+LFxuICB7IGxhbmd1YWdlOiBzdHJpbmc7IGxhbmd1YWdlczogcmVhZG9ubHkgc3RyaW5nW10gfSxcbiAgTmVlZGVkTmV4dFxuPiB7XG4gIHJldHVybiBuZXh0ID0+IGFzeW5jIHByb3BzID0+IHtcbiAgICBjb25zdCBhY2NlcHRMYW5ndWFnZSA9IHByb3BzLnJlcS5oZWFkZXJzWydhY2NlcHQtbGFuZ3VhZ2UnXTtcbiAgICBjb25zdCBoZWFkZXIgPVxuICAgICAgdHlwZW9mIGFjY2VwdExhbmd1YWdlID09PSAnc3RyaW5nJyA/IGFjY2VwdExhbmd1YWdlIDogYWNjZXB0TGFuZ3VhZ2U/LlswXTtcbiAgICBjb25zdCBuYXZpZ2F0b3JQcm9wcyA9IHBhcnNlQWNjZXB0TGFuZ3VhZ2UoaGVhZGVyKTtcblxuICAgIGNvbnN0IG5leHRQcm9wcyA9IGF3YWl0IG5leHQoe1xuICAgICAgLi4ucHJvcHMsXG4gICAgICAuLi5uYXZpZ2F0b3JQcm9wcyxcbiAgICB9KTtcblxuICAgIHJldHVybiB7XG4gICAgICAuLi5uZXh0UHJvcHMsXG4gICAgICAuLi5uYXZpZ2F0b3JQcm9wcyxcbiAgICAgIGluaXREYXRhOiB7XG4gICAgICAgIC4uLm5leHRQcm9wcy5pbml0RGF0YSxcbiAgICAgICAgbmF2aWdhdG9yOiAoKSA9PiBuYXZpZ2F0b3JQcm9wcyxcbiAgICAgIH0sXG4gICAgICBhcHA6IChcbiAgICAgICAgPE5hdmlnYXRvckNvbnRleHQgdmFsdWU9e25hdmlnYXRvclByb3BzfT5cbiAgICAgICAgICB7bmV4dFByb3BzLmFwcH1cbiAgICAgICAgPC9OYXZpZ2F0b3JDb250ZXh0PlxuICAgICAgKSxcbiAgICB9O1xuICB9O1xufVxuIl0sIm1hcHBpbmdzIjoiQUFBQSxPQUFPQSxLQUFLLE1BQU0sT0FBTztBQUV6QixTQUFTQyxnQkFBZ0IsRUFBRUMsbUJBQW1CLFFBQVEsd0JBQXdCO0FBQUMsU0FBQUMsR0FBQSxJQUFBQyxJQUFBO0FBTy9FLGVBQWUsU0FBU0MsY0FBY0EsQ0FBQSxFQUlwQztFQUNBLE9BQU9DLElBQUksSUFBSSxNQUFNQyxLQUFLLElBQUk7SUFDNUIsTUFBTUMsY0FBYyxHQUFHRCxLQUFLLENBQUNFLEdBQUcsQ0FBQ0MsT0FBTyxDQUFDLGlCQUFpQixDQUFDO0lBQzNELE1BQU1DLE1BQU0sR0FDVixPQUFPSCxjQUFjLEtBQUssUUFBUSxHQUFHQSxjQUFjLEdBQUdBLGNBQWMsb0JBQWRBLGNBQWMsQ0FBRyxDQUFDLENBQUM7SUFDM0UsTUFBTUksY0FBYyxHQUFHVixtQkFBbUIsQ0FBQ1MsTUFBTSxDQUFDO0lBRWxELE1BQU1FLFNBQVMsR0FBRyxNQUFNUCxJQUFJLENBQUM7TUFDM0IsR0FBR0MsS0FBSztNQUNSLEdBQUdLO0lBQ0wsQ0FBQyxDQUFDO0lBRUYsT0FBTztNQUNMLEdBQUdDLFNBQVM7TUFDWixHQUFHRCxjQUFjO01BQ2pCRSxRQUFRLEVBQUU7UUFDUixHQUFHRCxTQUFTLENBQUNDLFFBQVE7UUFDckJDLFNBQVMsRUFBRUEsQ0FBQSxLQUFNSDtNQUNuQixDQUFDO01BQ0RJLEdBQUcsZUFDRFosSUFBQSxDQUFDSCxnQkFBZ0I7UUFBQ2dCLEtBQUssRUFBRUwsY0FBZTtRQUFBTSxRQUFBLEVBQ3JDTCxTQUFTLENBQUNHO01BQUcsQ0FDRTtJQUV0QixDQUFDO0VBQ0gsQ0FBQztBQUNIIiwiaWdub3JlTGlzdCI6W119

package/lib/spouts/prefetch.server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prefetch.server.d.ts","sourceRoot":"","sources":["../../src/spouts/prefetch.server.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE5D,KAAK,WAAW,CAAC,SAAS,IAAI;IAC5B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,eAAe,CAAC;CAC/B,GAAG,YAAY,CAAC;AAEjB,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,IAE5D,SAAS,EACT,CAAC,SAAS,WAAW,CAAC,SAAS,CAAC,EAChC,CAAC,SAAS,WAAW,EAErB,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CACzB,GACG,CAAC,IAAI,CAAC,GAAG,SAAS,GACpB,GAAG,CAAC,CACN,MAEa,OAAO,CAAC,gBAJjB,CAAC,0BA2BT"}
+{"version":3,"file":"prefetch.server.d.ts","sourceRoot":"","sources":["../../src/spouts/prefetch.server.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE5D,KAAK,WAAW,CAAC,SAAS,IAAI;IAC5B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,eAAe,CAAC;CAC/B,GAAG,YAAY,CAAC;AAEjB,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,IAE5D,SAAS,EACT,CAAC,SAAS,WAAW,CAAC,SAAS,CAAC,EAChC,CAAC,SAAS,WAAW,EAErB,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CACzB,GACG,CAAC,IAAI,CAAC,GAAG,SAAS,GACpB,GAAG,CAAC,CACN,MAEa,OAAO,CAAC,gBAJjB,CAAC,0BA+BT"}

package/lib/spouts/prefetch.server.js

@@ -5,6 +5,11 @@ export default function prefetchSpout(field) {
       try {
         const toFetch = [];
         nextProps.matchedRoutes.forEach(route => {
+          var _route$component;
+          // Preload lazy component so it's ready for SSR render
+          if (typeof ((_route$component = route.component) == null ? void 0 : _route$component.preload) === 'function') {
+            toFetch.push(route.component.preload());
+          }
           if (typeof route.resolveData === 'function') {
             toFetch.push(route.resolveData(nextProps[field], route, nextProps.searchParams));
           }
@@ -17,4 +22,4 @@ export default function prefetchSpout(field) {
     };
   };
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJwcmVmZXRjaFNwb3V0IiwiZmllbGQiLCJuZXh0IiwicHJvcHMiLCJuZXh0UHJvcHMiLCJ0b0ZldGNoIiwibWF0Y2hlZFJvdXRlcyIsImZvckVhY2giLCJyb3V0ZSIsInJlc29sdmVEYXRhIiwicHVzaCIsInNlYXJjaFBhcmFtcyIsIlByb21pc2UiLCJhbGwiLCJlIiwiY29uc29sZSIsImVycm9yIl0sInNvdXJjZXMiOlsiLi4vLi4vc3JjL3Nwb3V0cy9wcmVmZXRjaC5zZXJ2ZXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJvdXRlIH0gZnJvbSAnQGFuYW5zaS9yb3V0ZXInO1xuXG5pbXBvcnQgdHlwZSB7IFJlc29sdmVQcm9wcywgU2VydmVyUHJvcHMgfSBmcm9tICcuL3R5cGVzLmpzJztcblxudHlwZSBOZWVkZWRQcm9wczxSb3V0ZVdpdGg+ID0ge1xuICBtYXRjaGVkUm91dGVzOiBSb3V0ZTxSb3V0ZVdpdGg+W107XG4gIHNlYXJjaFBhcmFtczogVVJMU2VhcmNoUGFyYW1zO1xufSAmIFJlc29sdmVQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gcHJlZmV0Y2hTcG91dDxGIGV4dGVuZHMgc3RyaW5nPihmaWVsZDogRikge1xuICByZXR1cm4gZnVuY3Rpb24gPFxuICAgIFJvdXRlV2l0aCxcbiAgICBOIGV4dGVuZHMgTmVlZGVkUHJvcHM8Um91dGVXaXRoPixcbiAgICBJIGV4dGVuZHMgU2VydmVyUHJvcHMsXG4gID4oXG4gICAgbmV4dDogKHByb3BzOiBJKSA9PiBQcm9taXNlPFxuICAgICAge1xuICAgICAgICBbSyBpbiBGXTogUm91dGVXaXRoO1xuICAgICAgfSAmIE5cbiAgICA+LFxuICApIHtcbiAgICByZXR1cm4gYXN5bmMgKHByb3BzOiBJKSA9PiB7XG4gICAgICBjb25zdCBuZXh0UHJvcHMgPSBhd2FpdCBuZXh0KHByb3BzKTtcblxuICAgICAgdHJ5IHtcbiAgICAgICAgY29uc3QgdG9GZXRjaDogUHJvbWlzZTx1bmtub3duPltdID0gW107XG4gICAgICAgIG5leHRQcm9wcy5tYXRjaGVkUm91dGVzLmZvckVhY2gocm91dGUgPT4ge1xuICAgICAgICAgIGlmICh0eXBlb2Ygcm91dGUucmVzb2x2ZURhdGEgPT09ICdmdW5jdGlvbicpIHtcbiAgICAgICAgICAgIHRvRmV0Y2gucHVzaChcbiAgICAgICAgICAgICAgcm91dGUucmVzb2x2ZURhdGEoXG4gICAgICAgICAgICAgICAgbmV4dFByb3BzW2ZpZWxkXSxcbiAgICAgICAgICAgICAgICByb3V0ZSxcbiAgICAgICAgICAgICAgICBuZXh0UHJvcHMuc2VhcmNoUGFyYW1zLFxuICAgICAgICAgICAgICApLFxuICAgICAgICAgICAgKTtcbiAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgICAgICBhd2FpdCBQcm9taXNlLmFsbCh0b0ZldGNoKTtcbiAgICAgIH0gY2F0Y2ggKGUpIHtcbiAgICAgICAgY29uc29sZS5lcnJvcihlKTtcbiAgICAgIH1cbiAgICAgIHJldHVybiBuZXh0UHJvcHM7XG4gICAgfTtcbiAgfTtcbn1cbiJdLCJtYXBwaW5ncyI6IkFBU0EsZUFBZSxTQUFTQSxhQUFhQSxDQUFtQkMsS0FBUSxFQUFFO0VBQ2hFLE9BQU8sVUFLTEMsSUFJQyxFQUNEO0lBQ0EsT0FBTyxNQUFPQyxLQUFRLElBQUs7TUFDekIsTUFBTUMsU0FBUyxHQUFHLE1BQU1GLElBQUksQ0FBQ0MsS0FBSyxDQUFDO01BRW5DLElBQUk7UUFDRixNQUFNRSxPQUEyQixHQUFHLEVBQUU7UUFDdENELFNBQVMsQ0FBQ0UsYUFBYSxDQUFDQyxPQUFPLENBQUNDLEtBQUssSUFBSTtVQUN2QyxJQUFJLE9BQU9BLEtBQUssQ0FBQ0MsV0FBVyxLQUFLLFVBQVUsRUFBRTtZQUMzQ0osT0FBTyxDQUFDSyxJQUFJLENBQ1ZGLEtBQUssQ0FBQ0MsV0FBVyxDQUNmTCxTQUFTLENBQUNILEtBQUssQ0FBQyxFQUNoQk8sS0FBSyxFQUNMSixTQUFTLENBQUNPLFlBQ1osQ0FDRixDQUFDO1VBQ0g7UUFDRixDQUFDLENBQUM7UUFDRixNQUFNQyxPQUFPLENBQUNDLEdBQUcsQ0FBQ1IsT0FBTyxDQUFDO01BQzVCLENBQUMsQ0FBQyxPQUFPUyxDQUFDLEVBQUU7UUFDVkMsT0FBTyxDQUFDQyxLQUFLLENBQUNGLENBQUMsQ0FBQztNQUNsQjtNQUNBLE9BQU9WLFNBQVM7SUFDbEIsQ0FBQztFQUNILENBQUM7QUFDSCIsImlnbm9yZUxpc3QiOltdfQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJwcmVmZXRjaFNwb3V0IiwiZmllbGQiLCJuZXh0IiwicHJvcHMiLCJuZXh0UHJvcHMiLCJ0b0ZldGNoIiwibWF0Y2hlZFJvdXRlcyIsImZvckVhY2giLCJyb3V0ZSIsIl9yb3V0ZSRjb21wb25lbnQiLCJjb21wb25lbnQiLCJwcmVsb2FkIiwicHVzaCIsInJlc29sdmVEYXRhIiwic2VhcmNoUGFyYW1zIiwiUHJvbWlzZSIsImFsbCIsImUiLCJjb25zb2xlIiwiZXJyb3IiXSwic291cmNlcyI6WyIuLi8uLi9zcmMvc3BvdXRzL3ByZWZldGNoLnNlcnZlci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUm91dGUgfSBmcm9tICdAYW5hbnNpL3JvdXRlcic7XG5cbmltcG9ydCB0eXBlIHsgUmVzb2x2ZVByb3BzLCBTZXJ2ZXJQcm9wcyB9IGZyb20gJy4vdHlwZXMuanMnO1xuXG50eXBlIE5lZWRlZFByb3BzPFJvdXRlV2l0aD4gPSB7XG4gIG1hdGNoZWRSb3V0ZXM6IFJvdXRlPFJvdXRlV2l0aD5bXTtcbiAgc2VhcmNoUGFyYW1zOiBVUkxTZWFyY2hQYXJhbXM7XG59ICYgUmVzb2x2ZVByb3BzO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBwcmVmZXRjaFNwb3V0PEYgZXh0ZW5kcyBzdHJpbmc+KGZpZWxkOiBGKSB7XG4gIHJldHVybiBmdW5jdGlvbiA8XG4gICAgUm91dGVXaXRoLFxuICAgIE4gZXh0ZW5kcyBOZWVkZWRQcm9wczxSb3V0ZVdpdGg+LFxuICAgIEkgZXh0ZW5kcyBTZXJ2ZXJQcm9wcyxcbiAgPihcbiAgICBuZXh0OiAocHJvcHM6IEkpID0+IFByb21pc2U8XG4gICAgICB7XG4gICAgICAgIFtLIGluIEZdOiBSb3V0ZVdpdGg7XG4gICAgICB9ICYgTlxuICAgID4sXG4gICkge1xuICAgIHJldHVybiBhc3luYyAocHJvcHM6IEkpID0+IHtcbiAgICAgIGNvbnN0IG5leHRQcm9wcyA9IGF3YWl0IG5leHQocHJvcHMpO1xuXG4gICAgICB0cnkge1xuICAgICAgICBjb25zdCB0b0ZldGNoOiBQcm9taXNlPHVua25vd24+W10gPSBbXTtcbiAgICAgICAgbmV4dFByb3BzLm1hdGNoZWRSb3V0ZXMuZm9yRWFjaChyb3V0ZSA9PiB7XG4gICAgICAgICAgLy8gUHJlbG9hZCBsYXp5IGNvbXBvbmVudCBzbyBpdCdzIHJlYWR5IGZvciBTU1IgcmVuZGVyXG4gICAgICAgICAgaWYgKHR5cGVvZiByb3V0ZS5jb21wb25lbnQ/LnByZWxvYWQgPT09ICdmdW5jdGlvbicpIHtcbiAgICAgICAgICAgIHRvRmV0Y2gucHVzaChyb3V0ZS5jb21wb25lbnQucHJlbG9hZCgpKTtcbiAgICAgICAgICB9XG4gICAgICAgICAgaWYgKHR5cGVvZiByb3V0ZS5yZXNvbHZlRGF0YSA9PT0gJ2Z1bmN0aW9uJykge1xuICAgICAgICAgICAgdG9GZXRjaC5wdXNoKFxuICAgICAgICAgICAgICByb3V0ZS5yZXNvbHZlRGF0YShcbiAgICAgICAgICAgICAgICBuZXh0UHJvcHNbZmllbGRdLFxuICAgICAgICAgICAgICAgIHJvdXRlLFxuICAgICAgICAgICAgICAgIG5leHRQcm9wcy5zZWFyY2hQYXJhbXMsXG4gICAgICAgICAgICAgICksXG4gICAgICAgICAgICApO1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICAgIGF3YWl0IFByb21pc2UuYWxsKHRvRmV0Y2gpO1xuICAgICAgfSBjYXRjaCAoZSkge1xuICAgICAgICBjb25zb2xlLmVycm9yKGUpO1xuICAgICAgfVxuICAgICAgcmV0dXJuIG5leHRQcm9wcztcbiAgICB9O1xuICB9O1xufVxuIl0sIm1hcHBpbmdzIjoiQUFTQSxlQUFlLFNBQVNBLGFBQWFBLENBQW1CQyxLQUFRLEVBQUU7RUFDaEUsT0FBTyxVQUtMQyxJQUlDLEVBQ0Q7SUFDQSxPQUFPLE1BQU9DLEtBQVEsSUFBSztNQUN6QixNQUFNQyxTQUFTLEdBQUcsTUFBTUYsSUFBSSxDQUFDQyxLQUFLLENBQUM7TUFFbkMsSUFBSTtRQUNGLE1BQU1FLE9BQTJCLEdBQUcsRUFBRTtRQUN0Q0QsU0FBUyxDQUFDRSxhQUFhLENBQUNDLE9BQU8sQ0FBQ0MsS0FBSyxJQUFJO1VBQUEsSUFBQUMsZ0JBQUE7VUFDdkM7VUFDQSxJQUFJLFNBQUFBLGdCQUFBLEdBQU9ELEtBQUssQ0FBQ0UsU0FBUyxxQkFBZkQsZ0JBQUEsQ0FBaUJFLE9BQU8sTUFBSyxVQUFVLEVBQUU7WUFDbEROLE9BQU8sQ0FBQ08sSUFBSSxDQUFDSixLQUFLLENBQUNFLFNBQVMsQ0FBQ0MsT0FBTyxDQUFDLENBQUMsQ0FBQztVQUN6QztVQUNBLElBQUksT0FBT0gsS0FBSyxDQUFDSyxXQUFXLEtBQUssVUFBVSxFQUFFO1lBQzNDUixPQUFPLENBQUNPLElBQUksQ0FDVkosS0FBSyxDQUFDSyxXQUFXLENBQ2ZULFNBQVMsQ0FBQ0gsS0FBSyxDQUFDLEVBQ2hCTyxLQUFLLEVBQ0xKLFNBQVMsQ0FBQ1UsWUFDWixDQUNGLENBQUM7VUFDSDtRQUNGLENBQUMsQ0FBQztRQUNGLE1BQU1DLE9BQU8sQ0FBQ0MsR0FBRyxDQUFDWCxPQUFPLENBQUM7TUFDNUIsQ0FBQyxDQUFDLE9BQU9ZLENBQUMsRUFBRTtRQUNWQyxPQUFPLENBQUNDLEtBQUssQ0FBQ0YsQ0FBQyxDQUFDO01BQ2xCO01BQ0EsT0FBT2IsU0FBUztJQUNsQixDQUFDO0VBQ0gsQ0FBQztBQUNIIiwiaWdub3JlTGlzdCI6W119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anansi/core",
-  "version": "0.20.44",
+  "version": "0.21.1",
   "description": "React 19 Framework",
   "homepage": "https://github.com/ntucker/anansi/tree/master/packages/core#readme",
   "repository": {
@@ -81,7 +81,7 @@
     "react-dom": "19.2.0"
   },
   "dependencies": {
-    "@anansi/router": "^0.10.18",
+    "@anansi/router": "^0.10.19",
     "@babel/runtime-corejs3": "^7.26.0",
     "chalk": "^4.1.2",
     "compression": "^1.8.1",

package/src/index.server.ts

@@ -6,6 +6,9 @@ export { default as routerSpout } from './spouts/router.server.js';
 export { default as prefetchSpout } from './spouts/prefetch.server.js';
 export { default as JSONSpout } from './spouts/json.server.js';
 export { default as appSpout } from './spouts/app.server.js';
+export { default as navigatorSpout } from './spouts/navigator.server.js';
+export { useNavigator } from './spouts/navigator.context.js';
+export type { NavigatorProperties } from './spouts/navigator.context.js';
 export type { ServerProps } from './spouts/types.js';
 export type { ServerSpout as Spout } from './spouts/types.js';
 export * from './scripts/types.js';

package/src/index.ts

@@ -4,5 +4,9 @@ export { default as dataClientSpout } from './spouts/dataClient.js';
 export { default as routerSpout } from './spouts/router.js';
 export { default as JSONSpout } from './spouts/json.js';
 export { default as appSpout } from './spouts/app.js';
+export { default as navigatorSpout } from './spouts/navigator.js';
+export { default as antdSpout } from './spouts/antd.js';
+export { useNavigator } from './spouts/navigator.context.js';
+export type { NavigatorProperties } from './spouts/navigator.context.js';
 export type { ServerProps } from './spouts/types.js';
 export type { ClientSpout as Spout } from './spouts/types.js';

package/src/laySpouts.tsx

@@ -2,6 +2,7 @@ import crypto from 'crypto';
 import type { JSX } from 'react';
 import { renderToPipeableStream as reactRender } from 'react-dom/server';
 
+import { getErrorStatus } from './scripts/ssrErrorHandler.js';
 import type { Render } from './scripts/types.js';
 import type { ServerProps } from './spouts/types.js';
 
@@ -21,25 +22,28 @@ export default function laySpouts(
       const { app } = await spouts({ clientManifest, req, res, nonce });
 
       let didError = false;
+      let lastError: unknown;
       const { pipe, abort } = reactRender(app, {
         nonce,
         //bootstrapScripts: assets.filter(asset => asset.endsWith('.js')),
         onShellReady() {
           //managers.forEach(manager => manager.cleanup());
           // If something errored before we started streaming, we set the error code appropriately.
-          res.statusCode = didError ? 500 : 200;
+          res.statusCode = didError ? getErrorStatus(lastError) : 200;
           res.setHeader('Content-type', 'text/html');
           pipe(res);
         },
-        onShellError() {
+        onShellError(e: unknown) {
           didError = true;
-          res.statusCode = 500;
+          lastError = e;
+          res.statusCode = getErrorStatus(e);
           pipe(res);
         },
-        onError(e: any) {
+        onError(e: unknown) {
           didError = true;
+          lastError = e;
           console.error(e);
-          res.statusCode = 500;
+          res.statusCode = getErrorStatus(e);
           //pipe(res); Removing this avoids, "React currently only supports piping to one writable stream."
           if (onError) onError(e);
         },

package/src/scripts/__tests__/ssrErrorHandler.test.ts

@@ -0,0 +1,249 @@
+import {
+  escapeHtml,
+  getErrorStatus,
+  renderErrorPage,
+} from '../ssrErrorHandler';
+
+describe('ssrErrorHandler', () => {
+  describe('getErrorStatus', () => {
+    it('should return 500 for null', () => {
+      expect(getErrorStatus(null)).toBe(500);
+    });
+
+    it('should return 500 for undefined', () => {
+      expect(getErrorStatus(undefined)).toBe(500);
+    });
+
+    it('should return 500 for plain Error without status', () => {
+      expect(getErrorStatus(new Error('test'))).toBe(500);
+    });
+
+    it('should return 500 for string error', () => {
+      expect(getErrorStatus('something went wrong')).toBe(500);
+    });
+
+    it('should return 500 for number error', () => {
+      expect(getErrorStatus(42)).toBe(500);
+    });
+
+    it('should extract numeric status from error object', () => {
+      expect(getErrorStatus({ status: 404, message: 'Not Found' })).toBe(404);
+      expect(getErrorStatus({ status: 429, message: 'Rate Limited' })).toBe(
+        429,
+      );
+      expect(
+        getErrorStatus({ status: 503, message: 'Service Unavailable' }),
+      ).toBe(503);
+    });
+
+    it('should extract string status from error object', () => {
+      expect(getErrorStatus({ status: '404', message: 'Not Found' })).toBe(404);
+      expect(getErrorStatus({ status: '500', message: 'Error' })).toBe(500);
+    });
+
+    it('should return 500 for invalid numeric status codes', () => {
+      expect(getErrorStatus({ status: 99 })).toBe(500); // too low
+      expect(getErrorStatus({ status: 600 })).toBe(500); // too high
+      expect(getErrorStatus({ status: -1 })).toBe(500); // negative
+      expect(getErrorStatus({ status: 0 })).toBe(500); // zero
+    });
+
+    it('should return 500 for invalid string status codes', () => {
+      expect(getErrorStatus({ status: '99' })).toBe(500); // too low
+      expect(getErrorStatus({ status: '600' })).toBe(500); // too high
+      expect(getErrorStatus({ status: 'abc' })).toBe(500); // not a number
+      expect(getErrorStatus({ status: '' })).toBe(500); // empty string
+    });
+
+    it('should return 500 for non-number/string status values', () => {
+      expect(getErrorStatus({ status: null })).toBe(500);
+      expect(getErrorStatus({ status: undefined })).toBe(500);
+      expect(getErrorStatus({ status: {} })).toBe(500);
+      expect(getErrorStatus({ status: [] })).toBe(500);
+      expect(getErrorStatus({ status: true })).toBe(500);
+    });
+
+    it('should work with Error objects that have status property', () => {
+      const error = new Error('Rate Limited') as Error & { status: number };
+      error.status = 429;
+      expect(getErrorStatus(error)).toBe(429);
+    });
+
+    it('should handle boundary values', () => {
+      expect(getErrorStatus({ status: 100 })).toBe(100); // min valid
+      expect(getErrorStatus({ status: 599 })).toBe(599); // max valid
+    });
+  });
+
+  describe('escapeHtml', () => {
+    it('should escape ampersands', () => {
+      expect(escapeHtml('foo & bar')).toBe('foo & bar');
+    });
+
+    it('should escape less than', () => {
+      expect(escapeHtml('<script>')).toBe('&lt;script&gt;');
+    });
+
+    it('should escape greater than', () => {
+      expect(escapeHtml('a > b')).toBe('a &gt; b');
+    });
+
+    it('should escape double quotes', () => {
+      expect(escapeHtml('say "hello"')).toBe('say &quot;hello&quot;');
+    });
+
+    it('should escape single quotes', () => {
+      expect(escapeHtml("it's")).toBe('it&#039;s');
+    });
+
+    it('should escape multiple special characters', () => {
+      expect(escapeHtml('<script>alert("xss")</script>')).toBe(
+        '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;',
+      );
+    });
+
+    it('should return empty string for empty input', () => {
+      expect(escapeHtml('')).toBe('');
+    });
+
+    it('should not modify strings without special characters', () => {
+      expect(escapeHtml('hello world')).toBe('hello world');
+    });
+  });
+
+  describe('renderErrorPage', () => {
+    it('should render basic error page with status code', () => {
+      const html = renderErrorPage(new Error('Test error'), '/test', 500);
+
+      expect(html).toContain('<!DOCTYPE html>');
+      expect(html).toContain('<title>500 - Server Error</title>');
+      expect(html).toContain('<h1>500 - Server Error</h1>');
+      expect(html).toContain('Test error');
+      expect(html).toContain('/test');
+    });
+
+    it('should render different status codes', () => {
+      const html404 = renderErrorPage({ message: 'Not Found' }, '/page', 404);
+      const html429 = renderErrorPage({ message: 'Rate Limited' }, '/api', 429);
+
+      expect(html404).toContain('<title>404 - Server Error</title>');
+      expect(html404).toContain('<h1>404 - Server Error</h1>');
+      expect(html429).toContain('<title>429 - Server Error</title>');
+      expect(html429).toContain('<h1>429 - Server Error</h1>');
+    });
+
+    it('should escape URL in output', () => {
+      const html = renderErrorPage(
+        new Error('error'),
+        '/test?foo=<script>',
+        500,
+      );
+
+      expect(html).toContain('&lt;script&gt;');
+      expect(html).not.toContain('<script>');
+    });
+
+    it('should escape error message in output', () => {
+      const html = renderErrorPage(
+        new Error('<script>alert("xss")</script>'),
+        '/test',
+        500,
+      );
+
+      expect(html).toContain('&lt;script&gt;');
+      expect(html).not.toContain('<script>alert');
+    });
+
+    it('should show stack trace when showStack is true', () => {
+      const error = new Error('Test error');
+      const html = renderErrorPage(error, '/test', 500, { showStack: true });
+
+      expect(html).toContain('<pre class="stack">');
+      expect(html).toContain('Error: Test error');
+    });
+
+    it('should hide stack trace when showStack is false', () => {
+      const error = new Error('Test error');
+      const html = renderErrorPage(error, '/test', 500, { showStack: false });
+
+      expect(html).not.toContain('<pre class="stack">');
+    });
+
+    it('should hide stack trace by default', () => {
+      const error = new Error('Test error');
+      const html = renderErrorPage(error, '/test', 500);
+
+      expect(html).not.toContain('<pre class="stack">');
+    });
+
+    it('should show badge when provided', () => {
+      const html = renderErrorPage(new Error('error'), '/test', 500, {
+        badge: 'DEV MODE',
+      });
+
+      expect(html).toContain('<span class="badge">DEV MODE</span>');
+    });
+
+    it('should not show badge when not provided', () => {
+      const html = renderErrorPage(new Error('error'), '/test', 500);
+
+      expect(html).not.toContain('class="badge"');
+    });
+
+    it('should show hint when provided', () => {
+      const html = renderErrorPage(new Error('error'), '/test', 500, {
+        hint: 'Try again later',
+      });
+
+      expect(html).toContain('<p class="hint">Try again later</p>');
+    });
+
+    it('should not show hint when not provided', () => {
+      const html = renderErrorPage(new Error('error'), '/test', 500);
+
+      expect(html).not.toContain('class="hint"');
+    });
+
+    it('should escape badge text', () => {
+      const html = renderErrorPage(new Error('error'), '/test', 500, {
+        badge: '<script>alert("xss")</script>',
+      });
+
+      expect(html).toContain('&lt;script&gt;');
+      expect(html).not.toContain('<script>alert');
+    });
+
+    it('should escape hint text', () => {
+      const html = renderErrorPage(new Error('error'), '/test', 500, {
+        hint: '<script>alert("xss")</script>',
+      });
+
+      expect(html).toContain('&lt;script&gt;');
+      expect(html).not.toContain('<script>alert');
+    });
+
+    it('should handle string errors', () => {
+      const html = renderErrorPage('Something went wrong', '/test', 500);
+
+      expect(html).toContain('Something went wrong');
+    });
+
+    it('should handle object errors without message', () => {
+      const html = renderErrorPage({ code: 'ERR_001' }, '/test', 500);
+
+      expect(html).toContain('[object Object]');
+    });
+
+    it('should include retry link with correct URL', () => {
+      const html = renderErrorPage(new Error('error'), '/my-page', 500);
+
+      expect(html).toContain('<a href="/my-page">Retry</a>');
+    });
+
+    it('should escape retry link URL', () => {
+      const html = renderErrorPage(new Error('error'), '/page?a=1&b=2', 500);
+
+      expect(html).toContain('href="/page?a=1&amp;b=2"');
+    });
+  });
+});

package/src/scripts/serve.ts

@@ -10,12 +10,12 @@ import diskFs from 'fs';
 import { Server, IncomingMessage, ServerResponse } from 'http';
 import ora from 'ora';
 import path from 'path';
-import { promisify } from 'util';
 import webpack from 'webpack';
 
 import 'cross-fetch/dist/node-polyfill.js';
 import getProxyMiddlewares from './getProxyMiddlewares.js';
 import { getWebpackConfig } from './getWebpackConfig.js';
+import { getErrorStatus, renderErrorPage } from './ssrErrorHandler.js';
 import { Render } from './types.js';
 
 // run directly from node
@@ -45,7 +45,6 @@ export default async function serve(
     webpackConfig({}, { mode: 'production' }),
   );
 
-  const readFile = promisify(diskFs.readFile);
   let server: Server | undefined;
 
   function handleErrors<
@@ -57,12 +56,25 @@ export default async function serve(
     return async function (
       req: Request | IncomingMessage,
       res: Response | ServerResponse,
-      next: NextFunction,
+      _next: NextFunction,
     ) {
       try {
         return await fn(req, res);
-      } catch (x) {
-        next(x);
+      } catch (error: unknown) {
+        console.error('SSR rendering error:', error);
+
+        // Return error response with status from error if available
+        const expressRes = res as express.Response;
+        if (!expressRes.headersSent) {
+          const statusCode = getErrorStatus(error);
+          expressRes.status(statusCode);
+          expressRes.setHeader('Content-Type', 'text/html');
+          expressRes.send(
+            renderErrorPage(error, req.url ?? '/', statusCode, {
+              showStack: process.env.NODE_ENV !== 'production',
+            }),
+          );
+        }
       }
     };
   }
@@ -104,7 +116,7 @@ export default async function serve(
           ) {
             try {
               res.sendFile(assetPath);
-            } catch (e) {
+            } catch (_e) {
               return next();
             }
           } else {

package/src/scripts/ssrErrorHandler.ts

@@ -0,0 +1,98 @@
+/**
+ * Utilities for handling SSR errors gracefully
+ */
+
+/**
+ * Extract HTTP status code from an error object.
+ * Looks for a `status` property that is a number or parseable string.
+ * Returns 500 if no valid status found.
+ */
+export function getErrorStatus(error: unknown): number {
+  if (error && typeof error === 'object' && 'status' in error) {
+    const status = (error as { status: unknown }).status;
+    if (typeof status === 'number' && status >= 100 && status < 600) {
+      return status;
+    }
+    if (typeof status === 'string') {
+      const parsed = parseInt(status, 10);
+      if (!isNaN(parsed) && parsed >= 100 && parsed < 600) {
+        return parsed;
+      }
+    }
+  }
+  return 500;
+}
+
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+export function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+export interface RenderErrorPageOptions {
+  /** Show stack trace in output */
+  showStack?: boolean;
+  /** Additional hint message to display */
+  hint?: string;
+  /** Badge text to display (e.g., "DEV MODE") */
+  badge?: string;
+}
+
+/**
+ * Render an HTML error page for SSR failures
+ */
+export function renderErrorPage(
+  error: unknown,
+  url: string,
+  statusCode: number,
+  options: RenderErrorPageOptions = {},
+): string {
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  const stack = error instanceof Error ? error.stack : undefined;
+  const { showStack = false, hint, badge } = options;
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${statusCode} - Server Error</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
+    .container { max-width: 800px; width: 100%; }
+    h1 { color: #ff6b6b; font-size: 2.5rem; margin-bottom: 1rem; }
+    .badge { display: inline-block; background: #4ecdc4; color: #1a1a2e; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; margin-bottom: 1rem; }
+    .url { color: #888; font-size: 0.9rem; margin-bottom: 1.5rem; word-break: break-all; }
+    .message { background: #16213e; border-left: 4px solid #ff6b6b; padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; margin-bottom: 1.5rem; }
+    .message code { color: #ff6b6b; font-size: 1.1rem; }
+    .stack { background: #0f0f23; border-radius: 8px; padding: 1.5rem; overflow-x: auto; font-family: 'Monaco', 'Menlo', monospace; font-size: 0.85rem; line-height: 1.6; color: #aaa; white-space: pre-wrap; word-break: break-word; }
+    .retry { margin-top: 2rem; }
+    .retry a { color: #4ecdc4; text-decoration: none; padding: 0.75rem 1.5rem; border: 2px solid #4ecdc4; border-radius: 6px; display: inline-block; transition: all 0.2s; }
+    .retry a:hover { background: #4ecdc4; color: #1a1a2e; }
+    .hint { margin-top: 1.5rem; color: #888; font-size: 0.9rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    ${badge ? `<span class="badge">${escapeHtml(badge)}</span>` : ''}
+    <h1>${statusCode} - Server Error</h1>
+    <p class="url">Error rendering: ${escapeHtml(url)}</p>
+    <div class="message">
+      <code>${escapeHtml(errorMessage)}</code>
+    </div>
+    ${showStack && stack ? `<pre class="stack">${escapeHtml(stack)}</pre>` : ''}
+    <div class="retry">
+      <a href="${escapeHtml(url)}">Retry</a>
+    </div>
+    ${hint ? `<p class="hint">${escapeHtml(hint)}</p>` : ''}
+  </div>
+</body>
+</html>`;
+}

package/src/scripts/startDevserver.ts

@@ -20,6 +20,7 @@ import WebpackDevServer from 'webpack-dev-server';
 import 'cross-fetch/dist/node-polyfill.js';
 import { createHybridRequire } from './createHybridRequire.js';
 import { getWebpackConfig } from './getWebpackConfig.js';
+import { getErrorStatus, renderErrorPage } from './ssrErrorHandler.js';
 import { BoundRender } from './types.js';
 
 // run directly from node
@@ -117,12 +118,27 @@ export default async function startDevServer(
     return async function (
       req: Request | IncomingMessage,
       res: Response | ServerResponse,
-      next: NextFunction,
+      _next: NextFunction,
     ) {
       try {
         return await fn(req, res);
-      } catch (x) {
-        next(x);
+      } catch (error: unknown) {
+        log.error('SSR rendering error:', error);
+
+        // Return error response with status from error if available
+        const expressRes = res as any;
+        if (!expressRes.headersSent) {
+          const statusCode = getErrorStatus(error);
+          expressRes.status(statusCode);
+          expressRes.setHeader('Content-Type', 'text/html');
+          expressRes.send(
+            renderErrorPage(error, req.url ?? '/', statusCode, {
+              showStack: true,
+              badge: 'DEV MODE',
+              hint: 'The dev server is still running. Fix the error and retry, or check the console for more details.',
+            }),
+          );
+        }
       }
     };
   }