@anansi/core 0.20.44 → 0.21.0

package/src/spouts/__tests__/navigator.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * @jest-environment jsdom
+ */
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+
+import {
+  NavigatorContext,
+  parseAcceptLanguage,
+  useNavigator,
+  type NavigatorProperties,
+} from '../navigator.context';
+
+describe('parseAcceptLanguage', () => {
+  it('should parse a simple language header', () => {
+    const result = parseAcceptLanguage('en-US');
+    expect(result.language).toBe('en-US');
+    expect(result.languages).toEqual(['en-US']);
+  });
+
+  it('should parse multiple languages without quality factors', () => {
+    const result = parseAcceptLanguage('en-US, fr, de');
+    expect(result.language).toBe('en-US');
+    expect(result.languages).toEqual(['en-US', 'fr', 'de']);
+  });
+
+  it('should sort languages by quality factor', () => {
+    const result = parseAcceptLanguage('en-US;q=0.7, fr;q=0.9, de;q=0.8');
+    expect(result.language).toBe('fr');
+    expect(result.languages).toEqual(['fr', 'de', 'en-US']);
+  });
+
+  it('should handle mixed quality factors (some with, some without)', () => {
+    const result = parseAcceptLanguage('en-US, fr;q=0.9, de;q=0.8');
+    expect(result.language).toBe('en-US');
+    expect(result.languages).toEqual(['en-US', 'fr', 'de']);
+  });
+
+  it('should handle a realistic Accept-Language header', () => {
+    const result = parseAcceptLanguage('en-US,en;q=0.9,es;q=0.8,fr;q=0.7');
+    expect(result.language).toBe('en-US');
+    expect(result.languages).toEqual(['en-US', 'en', 'es', 'fr']);
+  });
+
+  it('should return default "en" for undefined header', () => {
+    const result = parseAcceptLanguage(undefined);
+    expect(result.language).toBe('en');
+    expect(result.languages).toEqual(['en']);
+  });
+
+  it('should return default "en" for empty header', () => {
+    const result = parseAcceptLanguage('');
+    expect(result.language).toBe('en');
+    expect(result.languages).toEqual(['en']);
+  });
+
+  it('should handle whitespace in header', () => {
+    const result = parseAcceptLanguage('  en-US  ,  fr  ;  q=0.5  ');
+    expect(result.language).toBe('en-US');
+    expect(result.languages).toEqual(['en-US', 'fr']);
+  });
+
+  it('should handle q=1 explicitly', () => {
+    const result = parseAcceptLanguage('en-US;q=1, fr;q=0.5');
+    expect(result.language).toBe('en-US');
+    expect(result.languages).toEqual(['en-US', 'fr']);
+  });
+
+  it('should handle wildcard language', () => {
+    const result = parseAcceptLanguage('en-US, *;q=0.1');
+    expect(result.language).toBe('en-US');
+    expect(result.languages).toEqual(['en-US', '*']);
+  });
+});
+
+describe('useNavigator', () => {
+  it('should return navigator properties when used within context', () => {
+    const navigatorProps: NavigatorProperties = {
+      language: 'fr-FR',
+      languages: ['fr-FR', 'en-US'],
+    };
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <NavigatorContext value={navigatorProps}>{children}</NavigatorContext>
+    );
+
+    const { result } = renderHook(() => useNavigator(), { wrapper });
+
+    expect(result.current.language).toBe('fr-FR');
+    expect(result.current.languages).toEqual(['fr-FR', 'en-US']);
+  });
+
+  it('should throw when used outside context', () => {
+    // Suppress console.error for this test since we expect an error
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+
+    expect(() => {
+      renderHook(() => useNavigator());
+    }).toThrow('useNavigator must be used within a NavigatorProvider');
+
+    consoleSpy.mockRestore();
+  });
+});

package/src/spouts/antd.server.tsx

@@ -18,11 +18,6 @@ export default function antdSpout(): ServerSpout<
       /* webpackIgnore: true */ '@ant-design/cssinjs'
     );
     const cache = createCache();
-
-    const nextProps = await next(props);
-
-    const scripts: React.ReactNode[] = nextProps.scripts ?? [];
-
     const AntdSheets = (): JSX.Element => {
       return (
         <script
@@ -32,6 +27,11 @@ export default function antdSpout(): ServerSpout<
         />
       );
     };
+
+    const nextProps = await next(props);
+
+    const scripts: React.ReactNode[] = nextProps.scripts ?? [];
+
     // unfortunately we have to inject this after the entire content has streamed in or it doesn't correctly populate
     // see: https://github.com/ant-design/cssinjs/issues/79
     scripts.push(<AntdSheets key="antd-sheets" />);

package/src/spouts/antd.tsx

@@ -0,0 +1,15 @@
+import type { ClientSpout } from './types.js';
+
+export default function antdSpout(): ClientSpout {
+  return next => async props => {
+    const { createCache, StyleProvider } = await import('@ant-design/cssinjs');
+    const cache = createCache();
+
+    const nextProps = await next(props);
+
+    return {
+      ...nextProps,
+      app: <StyleProvider cache={cache}>{nextProps.app}</StyleProvider>,
+    };
+  };
+}

package/src/spouts/navigator.context.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext } from 'react';
+
+export interface NavigatorProperties {
+  language: string;
+  languages: readonly string[];
+}
+
+export const NavigatorContext = createContext<NavigatorProperties | undefined>(
+  undefined,
+);
+
+export function useNavigator(): NavigatorProperties {
+  const context = useContext(NavigatorContext);
+  if (context === undefined) {
+    throw new Error('useNavigator must be used within a NavigatorProvider');
+  }
+  return context;
+}
+
+export function parseAcceptLanguage(header: string | undefined): {
+  language: string;
+  languages: readonly string[];
+} {
+  if (!header) {
+    return { language: 'en', languages: ['en'] };
+  }
+
+  const parsed = header
+    .split(',')
+    .map(part => {
+      const [lang, qPart] = part.trim().split(';');
+      const q = qPart ? parseFloat(qPart.replace('q=', '')) : 1;
+      return { lang: lang.trim(), q };
+    })
+    .sort((a, b) => b.q - a.q)
+    .map(({ lang }) => lang);
+
+  return {
+    language: parsed[0] ?? 'en',
+    languages: parsed.length > 0 ? parsed : ['en'],
+  };
+}

package/src/spouts/navigator.server.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { NavigatorContext, parseAcceptLanguage } from './navigator.context.js';
+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
+> {
+  return next => async props => {
+    const acceptLanguage = props.req.headers['accept-language'];
+    const header =
+      typeof acceptLanguage === 'string' ? acceptLanguage : acceptLanguage?.[0];
+    const navigatorProps = parseAcceptLanguage(header);
+
+    const nextProps = await next({
+      ...props,
+      ...navigatorProps,
+    });
+
+    return {
+      ...nextProps,
+      ...navigatorProps,
+      initData: {
+        ...nextProps.initData,
+        navigator: () => navigatorProps,
+      },
+      app: (
+        <NavigatorContext value={navigatorProps}>
+          {nextProps.app}
+        </NavigatorContext>
+      ),
+    };
+  };
+}

package/src/spouts/navigator.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { NavigatorContext } from './navigator.context.js';
+import type { NavigatorProperties } from './navigator.context.js';
+import type { ClientSpout } from './types.js';
+
+export default function navigatorSpout(): ClientSpout<{
+  getInitialData: (key: string) => Promise<any>;
+}> {
+  return next => async props => {
+    const nextProps = await next(props);
+    const navigatorProps: NavigatorProperties = 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: (
+        <NavigatorContext value={navigatorProps}>
+          {nextProps.app}
+        </NavigatorContext>
+      ),
+    };
+  };
+}

package/src/spouts/prefetch.server.tsx

@@ -25,6 +25,10 @@ export default function prefetchSpout<F extends string>(field: F) {
       try {
         const toFetch: Promise<unknown>[] = [];
         nextProps.matchedRoutes.forEach(route => {
+          // Preload lazy component so it's ready for SSR render
+          if (typeof route.component?.preload === 'function') {
+            toFetch.push(route.component.preload());
+          }
           if (typeof route.resolveData === 'function') {
             toFetch.push(
               route.resolveData(