@shipfox/client-shell 0.2.0

package/test/fixtures/features.ts

@@ -0,0 +1,56 @@
+import {defineClientFeature} from '#contract.js';
+
+export const features = [
+  defineClientFeature({
+    id: 'shipfox.projects',
+    routes: [
+      {
+        path: '/workspaces/$wid/projects/$pid/overview',
+        parent: 'projectLayout',
+        impl: '#test/default-route-impl.js',
+      },
+      {
+        path: '/workspaces/$wid/settings/members',
+        parent: 'workspaceSettings',
+        impl: '#test/default-route-impl.js',
+      },
+    ],
+    navigation: [
+      {
+        id: 'projects',
+        scope: 'workspace',
+        label: 'Projects',
+        to: '/workspaces/$wid/projects/$pid/overview',
+        order: 100,
+      },
+    ],
+    settingsSections: [
+      {id: 'members', pathSegment: 'members', label: 'Members', icon: 'users', order: 100},
+    ],
+  }),
+  defineClientFeature({
+    id: 'acme.insights',
+    routes: [
+      {
+        path: '/workspaces/$wid/insights',
+        parent: 'workspaceLayout',
+        impl: '#test/named-route-impl.js',
+      },
+      {
+        path: '/workspaces/$wid/projects/$pid/overview',
+        parent: 'projectLayout',
+        override: true,
+        impl: '#test/search-route-impl.js',
+      },
+    ],
+    navigation: [
+      {
+        id: 'insights',
+        scope: 'workspace',
+        label: 'Insights',
+        to: '/workspaces/$wid/insights',
+        order: 200,
+      },
+    ],
+  }),
+] as const;

package/test/named-route-impl.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+
+export default defineRoute({component: () => <div>Named route</div>});

package/test/not-route-impl.ts

@@ -0,0 +1 @@
+export const value = 'not a route implementation';

package/test/render.tsx

@@ -0,0 +1,67 @@
+import {QueryClient} from '@tanstack/react-query';
+import {createMemoryHistory, createRouter, Outlet, RouterProvider} from '@tanstack/react-router';
+import {render} from '@testing-library/react';
+import {createStore} from 'jotai';
+import {composeRoutes} from '#compose/compose-routes.js';
+import type {ClientFeature} from '#contract.js';
+import {assembleRouteTree, type ResolveRouteImpl} from '#runtime/assemble-route-tree.js';
+import {type AuthStateValue, authStateAtom} from '#runtime/auth.js';
+import {ChromeProvider, type ChromeSlots} from '#runtime/chrome-context.js';
+import {ShellProviderStack} from '#runtime/provider-stack.js';
+import {navigationEntries, settingsEntries} from '#runtime/registries.js';
+
+export async function renderComposedShell({
+  features,
+  initialPath,
+  resolveImpl,
+}: {
+  features: readonly ClientFeature[];
+  initialPath: string;
+  resolveImpl: ResolveRouteImpl;
+}): Promise<{
+  router: unknown;
+  queryClient: QueryClient;
+  store: ReturnType<typeof createStore>;
+}> {
+  const routeTree = await assembleRouteTree(composeRoutes(features), {
+    resolveImpl,
+    navigation: navigationEntries(features),
+    settingsSections: settingsEntries(features),
+  });
+  const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
+  const store = createStore();
+  const auth: AuthStateValue = {
+    status: 'authenticated',
+    workspaces: [{id: 'workspace', name: 'Workspace', membershipId: 'membership'}],
+    isLoading: false,
+    isAuthenticated: true,
+    hasWorkspace: true,
+  };
+  const chrome: ChromeSlots = {
+    ProjectBreadcrumb: () => null,
+    ProjectLayoutGuard: Outlet,
+  };
+  store.set(authStateAtom, auth);
+  const router = createRouter({
+    history: createMemoryHistory({initialEntries: [initialPath]}),
+    routeTree,
+    context: {
+      auth,
+      queryClient,
+      workspaceSetup: async () => ({hideProjectNavigation: false}),
+    },
+  });
+  render(
+    <ChromeProvider chrome={chrome}>
+      <ShellProviderStack
+        features={features}
+        queryClient={queryClient}
+        store={store}
+        auth={{effects: false}}
+      >
+        <RouterProvider router={router} />
+      </ShellProviderStack>
+    </ChromeProvider>,
+  );
+  return {router, queryClient, store};
+}

package/test/search-route-impl.tsx

@@ -0,0 +1,7 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+
+export default defineRoute({
+  component: () => <div>Search route</div>,
+  validateSearch: (search: Record<string, unknown>) =>
+    ({tab: search.tab === 'activity' ? 'activity' : 'overview'}) as const,
+});

package/test/setup.ts

@@ -0,0 +1,3 @@
+import {installClientDomTestEnv} from '@shipfox/client-test-setup';
+
+installClientDomTestEnv();

package/test/typecheck/shipfox-app.gen.ts

@@ -0,0 +1,85 @@
+// GENERATED by @shipfox/client-shell/vite. Do not edit.
+// biome-ignore-all format: generated code has stable, reviewable output.
+// biome-ignore-all assist/source/organizeImports: generated imports follow route order.
+import {createRoute, createRouter} from '@tanstack/react-router';
+import {buildAnchorSkeleton, isRouteImpl, type RouteImpl, type RouterContext} from '@shipfox/client-shell/runtime';
+import route0Impl from "#test/search-route-impl.js";
+import route1Impl from "#test/default-route-impl.js";
+import route2Impl from "#test/named-route-impl.js";
+
+function routeOptions<T extends RouteImpl>(routeImpl: T, impl: string, path: string): T['options'] {
+  if (!isRouteImpl(routeImpl)) {
+    throw new TypeError(`Route implementation "${impl}" for "${path}" must export default defineRoute(...).`);
+  }
+  return routeImpl.options;
+}
+
+const skeleton = buildAnchorSkeleton({
+  navigation: [
+    {
+      "id": "projects",
+      "scope": "workspace",
+      "label": "Projects",
+      "to": "/workspaces/$wid/projects/$pid/overview",
+      "order": 100
+    },
+    {
+      "id": "insights",
+      "scope": "workspace",
+      "label": "Insights",
+      "to": "/workspaces/$wid/insights",
+      "order": 200
+    }
+  ],
+  settingsSections: [
+    {
+      "id": "members",
+      "pathSegment": "members",
+      "label": "Members",
+      "icon": "users",
+      "order": 100
+    }
+  ],
+});
+
+const route0 = createRoute({
+  getParentRoute: () => skeleton.projectLayout,
+  path: "/overview",
+  ...routeOptions(route0Impl, "#test/search-route-impl.js", "/workspaces/$wid/projects/$pid/overview"),
+});
+
+const route1 = createRoute({
+  getParentRoute: () => skeleton.workspaceSettings,
+  path: "/members",
+  ...routeOptions(route1Impl, "#test/default-route-impl.js", "/workspaces/$wid/settings/members"),
+});
+
+const route2 = createRoute({
+  getParentRoute: () => skeleton.workspaceLayout,
+  path: "/insights",
+  ...routeOptions(route2Impl, "#test/named-route-impl.js", "/workspaces/$wid/insights"),
+});
+
+const projectLayout = skeleton.projectLayout.addChildren([route0]);
+const workspaceSettings = skeleton.workspaceSettings.addChildren([route1]);
+const workspaceLayout = skeleton.workspaceLayout.addChildren([
+  route2,
+  projectLayout,
+  workspaceSettings,
+]);
+
+export const routeTree = skeleton.rootRoute.addChildren([
+  workspaceLayout,
+]);
+
+export const router = createRouter({
+  routeTree,
+  context: {auth: undefined, queryClient: undefined} satisfies RouterContext,
+  scrollRestoration: true,
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}

package/test/typecheck/types.tsx

@@ -0,0 +1,18 @@
+import {Link, useSearch} from '@tanstack/react-router';
+import './shipfox-app.gen.js';
+
+export function CompositionTypes(): React.ReactNode {
+  const search = useSearch({from: '/workspaces/$wid/projects/$pid/overview'});
+  const tab: 'activity' | 'overview' = search.tab;
+
+  return (
+    <>
+      <Link to="/workspaces/$wid/insights" params={{wid: 'workspace'}}>
+        Insights
+      </Link>
+      <span>{tab}</span>
+      {/* @ts-expect-error The generated route tree rejects unknown paths. */}
+      <Link to="/not-a-route">Missing route</Link>
+    </>
+  );
+}

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@shipfox/ts-config/react",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "customConditions": ["workspace-source"]
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.tsx", "**/*.test.ts"]
+}