@shipfox/client-shell 0.2.0 → 1.0.0

package/test/external/fixture/src/app.fixture.tsx

@@ -1,13 +1,16 @@
-import '@testing-library/jest-dom/vitest';
 import {getLoadedConfig} from '@shipfox/client-config';
-import type {ProviderProbeEntry} from '@shipfox/client-shell-fixture-feature';
 import {QueryClient} from '@tanstack/react-query';
 import {createMemoryHistory} from '@tanstack/react-router';
-import {act, render, screen, waitFor} from '@testing-library/react';
-import {createClientAppElement} from './main.js';
-import {router} from './shipfox-app.gen.js';
+import {flushSync} from 'react-dom';
+import {createRoot, type Root} from 'react-dom/client';
+import {auth, ClientApp, workspaceSetup} from './main';
+import {readProviderEvidence, resetProviderEvidence} from './provider';
+import {router} from './shipfox-app.gen';
 
-test('proves the external composition contract', async () => {
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
   window.matchMedia = vi.fn((query: string) => ({
     matches: false,
     media: query,
@@ -19,54 +22,83 @@ test('proves the external composition contract', async () => {
     dispatchEvent: vi.fn(() => false),
   }));
   window.scrollTo = vi.fn();
+  resetProviderEvidence();
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  flushSync(() => root.unmount());
+  container.remove();
+});
+
+function mountClient(): void {
+  flushSync(() => root.render(<ClientApp />));
+}
+
+function heading(name: string): Element | undefined {
+  return [...container.querySelectorAll('h1, h2, h3')].find(
+    (element) => element.textContent?.trim() === name,
+  );
+}
+
+test('reports a missing external config fragment', async () => {
   window.__SHIPFOX_CONFIG__ = undefined;
-  const missingConfig = render(createClientAppElement(), {reactStrictMode: true});
 
-  expect(await screen.findByRole('heading', {name: 'Configuration error'})).toBeVisible();
-  expect(screen.getByText('fixtureGreeting')).toBeVisible();
-  missingConfig.unmount();
+  mountClient();
+
+  await vi.waitFor(() => expect(heading('Configuration error')).toBeDefined());
+  expect(container.textContent).toContain('externalGreeting');
+});
 
-  window.__SHIPFOX_CONFIG__ = {FIXTURE_GREETING: 'Hello from the fixture'};
-  let providers: readonly ProviderProbeEntry[] = [];
+test('renders the explicit default-route replacement', async () => {
+  window.__SHIPFOX_CONFIG__ = {EXTERNAL_GREETING: 'Hello from the external fixture'};
   router.update({
-    history: createMemoryHistory({initialEntries: ['/workspaces/workspace/insights']}),
+    history: createMemoryHistory({initialEntries: ['/auth/login']}),
+    context: {auth: undefined, queryClient: undefined},
   });
-  render(
-    createClientAppElement({
-      onProviders: (entries) => {
-        providers = entries;
-      },
-    }),
-    {reactStrictMode: true},
-  );
+  await router.load();
 
-  expect(await screen.findByRole('heading', {name: 'Overridden insights'})).toBeVisible();
-  expect(screen.queryByRole('heading', {name: 'Toy insights'})).not.toBeInTheDocument();
-  expect(screen.getAllByRole('tab').map((tab) => tab.textContent)).toEqual([
-    'Insights first',
-    'Insights second',
-  ]);
-  await waitFor(() => expect(providers.map(({id}) => id)).toEqual(['toy-feature', 'app-feature']));
-  const queryClients = providers.map(({queryClient}) => queryClient);
-  expect(queryClients).toHaveLength(2);
-  expect(queryClients[0]).toBeInstanceOf(QueryClient);
-  expect(queryClients[1]).toBe(queryClients[0]);
-  expect(getLoadedConfig<{fixtureGreeting: string}>().fixtureGreeting).toBe(
-    'Hello from the fixture',
-  );
+  mountClient();
+
+  await vi.waitFor(() => expect(heading('External login')).toBeDefined());
+  expect(heading('Log in')).toBeUndefined();
+});
 
-  await act(() =>
-    router.navigate({
-      to: '/workspaces/$wid/settings/primary',
-      params: {wid: 'workspace'},
+test('renders the external route, provider order, navigation, settings, and config', async () => {
+  window.__SHIPFOX_CONFIG__ = {EXTERNAL_GREETING: 'Hello from the external fixture'};
+  router.update({
+    history: createMemoryHistory({
+      initialEntries: ['/workspaces/workspace/settings/external'],
     }),
-  );
+    context: {auth, queryClient: new QueryClient(), workspaceSetup},
+  });
+  await router.load();
+  mountClient();
 
-  expect(await screen.findByRole('heading', {name: 'Toy settings'})).toBeVisible();
+  await vi.waitFor(() => expect(heading('External settings')).toBeDefined());
+  expect(
+    [...container.querySelectorAll('[role="tab"]')].map((tab) => tab.textContent?.trim()),
+  ).toEqual(['Projects', 'External', 'Settings']);
   expect(
-    Array.from(
-      screen.getByRole('navigation', {name: 'Workspace settings'}).querySelectorAll('a'),
-      (link) => link.textContent,
-    ),
-  ).toEqual(['Primary settings', 'Secondary settings']);
+    [...container.querySelectorAll('[aria-label="Workspace settings"] a')]
+      .map((link) => link.textContent?.trim())
+      .slice(0, 3),
+  ).toEqual(['Members', 'External', 'Runners']);
+  expect(container.querySelector('[aria-label="External provider order"]')?.textContent).toBe(
+    'outer > inner',
+  );
+  expect(container.textContent).toContain('Hello from the external fixture');
+  await vi.waitFor(() => expect(readProviderEvidence().map(({id}) => id)).toEqual(['outer', 'inner']));
+  const providers = readProviderEvidence();
+  expect(providers[1]?.queryClient).toBe(providers[0]?.queryClient);
+  expect(providers[1]?.store).toBe(providers[0]?.store);
+  expect(providers.map(({externalGreeting}) => externalGreeting)).toEqual([
+    'Hello from the external fixture',
+    'Hello from the external fixture',
+  ]);
+  expect(getLoadedConfig<{externalGreeting: string}>().externalGreeting).toBe(
+    'Hello from the external fixture',
+  );
 });

package/test/external/fixture/src/features/external-settings.tsx

@@ -0,0 +1,19 @@
+import {getLoadedConfig} from '@shipfox/client-config';
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {useProviderOrder} from '../provider';
+
+function ExternalSettings() {
+  const providerOrder = useProviderOrder();
+  const config = getLoadedConfig<{externalGreeting: string}>();
+  return (
+    <section>
+      <h1>External settings</h1>
+      <p>{config.externalGreeting}</p>
+      <output aria-label="External provider order">{providerOrder.join(' > ')}</output>
+    </section>
+  );
+}
+
+const route = defineRoute({component: ExternalSettings});
+
+export default route;

package/test/external/fixture/src/features/login-override.tsx

@@ -0,0 +1,9 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+
+function ExternalLogin() {
+  return <h1>External login</h1>;
+}
+
+const route = defineRoute({component: ExternalLogin});
+
+export default route;

package/test/external/fixture/src/features.collision.ts

@@ -1,15 +1,15 @@
+import {defaultFeatures} from '@shipfox/client-features';
 import {defineClientFeature} from '@shipfox/client-shell';
-import {toyFeature} from '@shipfox/client-shell-fixture-feature';
 
 const collisionFeature = defineClientFeature({
   id: 'fixture.unapproved-collision',
   routes: [
     {
-      path: '/workspaces/$wid/insights',
-      parent: 'workspaceLayout',
-      impl: './features/override-impl',
+      path: '/auth/login',
+      parent: 'root',
+      impl: './features/login-override',
     },
   ],
 });
 
-export const features = [toyFeature, collisionFeature];
+export const features = [...defaultFeatures(), collisionFeature];

package/test/external/fixture/src/features.ts

@@ -1,4 +1,50 @@
-import {toyFeature} from '@shipfox/client-shell-fixture-feature';
-import {overrideFeature} from './features/override';
+import {defaultFeatures} from '@shipfox/client-features';
+import {defineClientFeature} from '@shipfox/client-shell';
+import {z} from 'zod';
+import {ExternalProviderInner, ExternalProviderOuter} from './provider';
 
-export const features = [toyFeature, overrideFeature];
+export const externalConfigShape = {
+  externalGreeting: z.string(),
+};
+
+export const externalFeature = defineClientFeature({
+  id: 'fixture.external',
+  routes: [
+    {
+      path: '/auth/login',
+      parent: 'root',
+      override: true,
+      impl: './features/login-override',
+    },
+    {
+      path: '/workspaces/$wid/settings/external',
+      parent: 'workspaceSettings',
+      impl: './features/external-settings',
+    },
+  ],
+  providers: [
+    {id: 'fixture-provider-outer', Component: ExternalProviderOuter},
+    {id: 'fixture-provider-inner', Component: ExternalProviderInner},
+  ],
+  navigation: [
+    {
+      id: 'nav.external',
+      scope: 'workspace',
+      label: 'External',
+      to: '/workspaces/$wid/settings/external',
+      order: 150,
+    },
+  ],
+  settingsSections: [
+    {
+      id: 'settings.external',
+      pathSegment: 'external',
+      label: 'External',
+      icon: 'settings3Line',
+      order: 150,
+    },
+  ],
+  configShape: externalConfigShape,
+});
+
+export const features = [...defaultFeatures(), externalFeature];

package/test/external/fixture/src/link-typecheck.tsx

@@ -1,10 +1,10 @@
-import {Link, useSearch} from '@tanstack/react-router';
+import {Link, useParams} from '@tanstack/react-router';
 
-export function InsightsLink() {
-  const search = useSearch({from: '/workspaces/$wid/insights'});
+export function ExternalSettingsLink() {
+  const params = useParams({from: '/workspaces/$wid/settings/external'});
   return (
-    <Link to="/workspaces/$wid/insights" params={{wid: 'workspace'}} search={{view: search.view}}>
-      Insights
+    <Link to="/workspaces/$wid/settings/external" params={{wid: params.wid}}>
+      External settings
     </Link>
   );
 }

package/test/external/fixture/src/main.tsx

@@ -1,4 +1,86 @@
+import {
+  ConfigErrorScreen,
+  getWindowRuntimeConfig,
+  loadConfig,
+  setLoadedConfig,
+} from '@shipfox/client-config';
+import {
+  authStateAtom,
+  ChromeProvider,
+  type AuthState,
+  type AuthStateValue,
+  mergeConfigShapes,
+  type RouterContext,
+} from '@shipfox/client-shell/runtime';
+import {ShellProviders} from '@shipfox/client-shell/testing';
+import {QueryClient} from '@tanstack/react-query';
+import {Outlet, RouterProvider} from '@tanstack/react-router';
+import {createStore} from 'jotai';
+import {useState} from 'react';
 import {createRoot} from 'react-dom/client';
+import {features} from './features';
+import {router} from './shipfox-app.gen';
+
+const authState: AuthState = {
+  status: 'authenticated',
+  workspaces: [{id: 'workspace', name: 'External workspace', membershipId: 'membership'}],
+};
+
+export const auth: AuthStateValue = {
+  ...authState,
+  isLoading: false,
+  isAuthenticated: true,
+  hasWorkspace: true,
+  workspaces: authState.workspaces ?? [],
+};
+
+export const workspaceSetup: NonNullable<RouterContext['workspaceSetup']> = async () => ({
+  hideProjectNavigation: false,
+});
+
+function FixtureProjectBreadcrumb() {
+  return null;
+}
+
+function FixtureProjectLayoutGuard() {
+  return <Outlet />;
+}
+
+export function ClientApp() {
+  const [queryClient] = useState(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),
+  );
+  const [store] = useState(() => {
+    const value = createStore();
+    // Linked mode has two Jotai type paths; Vite dedupes them to this store at runtime.
+    value.set(authStateAtom as never, authState);
+    return value;
+  });
+  const config = loadConfig(mergeConfigShapes(features), {
+    runtime: getWindowRuntimeConfig(),
+    build: import.meta.env,
+  });
+  if (!config.ok) return <ConfigErrorScreen errors={config.errors} />;
+  setLoadedConfig(config.config);
+
+  return (
+    <ChromeProvider
+      chrome={{
+        ProjectBreadcrumb: FixtureProjectBreadcrumb,
+        ProjectLayoutGuard: FixtureProjectLayoutGuard,
+      }}
+    >
+      <ShellProviders
+        features={features}
+        queryClient={queryClient}
+        store={store}
+        config={config.config}
+      >
+        <RouterProvider router={router} context={{auth, queryClient, workspaceSetup}} />
+      </ShellProviders>
+    </ChromeProvider>
+  );
+}
 
 const root = document.getElementById('root');
-if (root) createRoot(root).render(<h1>Shipfox client runtime fixture</h1>);
+if (root) createRoot(root).render(<ClientApp />);

package/test/external/fixture/src/provider.ts

@@ -0,0 +1,45 @@
+import {getLoadedConfig} from '@shipfox/client-config';
+import {type QueryClient, useQueryClient} from '@tanstack/react-query';
+import {type createStore, useStore} from 'jotai';
+import {createContext, createElement, type PropsWithChildren, useContext} from 'react';
+
+type Store = ReturnType<typeof createStore>;
+
+export interface ProviderEvidence {
+  id: string;
+  queryClient: QueryClient;
+  store: Store;
+  externalGreeting: string;
+}
+
+const ProviderOrderContext = createContext<readonly string[]>([]);
+const providerEvidence = new Map<string, ProviderEvidence>();
+
+function ExternalProvider({id, children}: PropsWithChildren<{id: string}>) {
+  const parentOrder = useContext(ProviderOrderContext);
+  const queryClient = useQueryClient();
+  const store = useStore();
+  const {externalGreeting} = getLoadedConfig<{externalGreeting: string}>();
+  providerEvidence.set(id, {id, queryClient, store, externalGreeting});
+  return createElement(ProviderOrderContext.Provider, {value: [...parentOrder, id]}, children);
+}
+
+export function ExternalProviderOuter({children}: PropsWithChildren) {
+  return createElement(ExternalProvider, {id: 'outer'}, children);
+}
+
+export function ExternalProviderInner({children}: PropsWithChildren) {
+  return createElement(ExternalProvider, {id: 'inner'}, children);
+}
+
+export function useProviderOrder(): readonly string[] {
+  return useContext(ProviderOrderContext);
+}
+
+export function readProviderEvidence(): readonly ProviderEvidence[] {
+  return [...providerEvidence.values()];
+}
+
+export function resetProviderEvidence(): void {
+  providerEvidence.clear();
+}

package/test/external/fixture/tsconfig.json

@@ -11,5 +11,5 @@
     "noEmit": true,
     "types": ["node", "vite/client", "vitest/globals"]
   },
-  "include": ["src/main.tsx", "types.ts", "vite.config.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "types.ts"]
 }

package/test/external/fixture/vite.config.ts

@@ -1,10 +1,21 @@
+import {shipfoxClientComposition} from '@shipfox/client-shell/vite';
 import react from '@vitejs/plugin-react';
 import {defineConfig} from 'vite';
 
-export default defineConfig({
+const config = defineConfig({
   build: {chunkSizeWarningLimit: 4_000},
-  plugins: [react()],
+  plugins: [
+    shipfoxClientComposition({
+      features:
+        process.env.SHIPFOX_COMPOSITION_COLLISION === '1'
+          ? './src/features.collision.ts'
+          : './src/features.ts',
+    }),
+    react(),
+  ],
   resolve: {
     dedupe: ['react', 'react-dom', '@tanstack/react-query', '@tanstack/react-router', 'jotai'],
   },
 });
+
+export default config;

package/test/external/fixture/vitest.config.ts

@@ -4,12 +4,14 @@ import {defineConfig} from 'vitest/config';
 export default defineConfig({
   plugins: [react()],
   resolve: {
+    conditions: ['default'],
     dedupe: ['react', 'react-dom', '@tanstack/react-query', '@tanstack/react-router', 'jotai'],
   },
+  ssr: {resolve: {conditions: ['default']}},
   test: {
     environment: 'jsdom',
     globals: true,
     include: ['src/app.fixture.tsx'],
-    server: {deps: {inline: true}},
+    server: {deps: {inline: [/@shipfox/, /@radix-ui/, /framer-motion/]}},
   },
 });