React Router 8

let adopted:
  | { version: string | number; access: Access<AdminSubject, AdminObjects> }
  | undefined;
 
/**
 * Adopts a matrix that arrived over the wire.
 *
 * `parseMatrix` and not `hydratePolicy`: the document is foreign input, and the
 * closed mode is what makes an unknown permission a refusal rather than a throw
 * inside a loader.
 */
export function adoptMatrix(
  matrix: Matrix,
): Access<AdminSubject, AdminObjects> {
  const { version } = matrix;
  if (version !== undefined && adopted?.version === version) {
    return adopted.access;
  }
  const access = parseMatrix<AdminSubject, AdminObjects, AdminPermission>(
    matrix,
  );
  if (version !== undefined) adopted = { version, access };
  return access;
}

export const loadPageView: MiddlewareFunction<Response> = async ({
  context,
}) => {
  const correlationId = newCorrelationId();
  context.set(correlationContext, correlationId);
 
  const subject = demoSubject();
  context.set(subjectContext, subject);
 
  let contract: Promise<Awaited<ReturnType<typeof readAccess>>> | undefined;
  context.set(
    accessContext,
    () => (contract ??= readAccess(correlationId, subject)),
  );
 
  let pending: Promise<ShelfSnapshot> | undefined;
  context.set(
    shelfContext,
    () => (pending ??= readShelf(correlationId, subject)),
  );
};

export const subjectContext = createContext<AdminSubject>({
  id: 'anonymous',
  roles: [],
  shop: '',
});

const subject = context.get(subjectContext);
const access = await context.get(accessContext)();
 
if (!allows(access.capabilities(subject), 'telemetry.read')) {
  return {
    refused: true,
    unavailable: undefined,
    figures: [],
    items: defineLedgerItems([]),
  };
}

import { hydratePolicy } from '@evanion/acl';
 
const access = hydratePolicy({
  version: 'orders@7',
  permissions: [
    { key: 'question.read', object: 'question', action: 'read', rules: [] },
  ],
});
 
// The server sends `access.matrix`; the client rebuilds from it.
const payload = JSON.parse(
  JSON.stringify(access.matrix),
) as typeof access.matrix;
hydratePolicy(payload).version; // -> 'orders@7'
 
// The construction site states what it is actually running. The option wins,
// and the frozen `matrix` carries the winner.
const vetoed = hydratePolicy(payload, { version: 'orders@7+veto@41' });
vetoed.version; // -> 'orders@7+veto@41'
vetoed.matrix.version; // -> 'orders@7+veto@41'

export default function Shell({ loaderData }: Route.ComponentProps) {
  const { session, matrix, navItems, sidebarItems, now, unavailable } =
    loaderData;
 
  // Rebuilt when the document's version changes and not per render: the parse
  // validates, deep-clones and deep-freezes. See `adoptMatrix`.
  const access = useMemo(() => adoptMatrix(matrix), [matrix]);
  const context = useMemo(() => ({ now }), [now]);
 
  return (
    <ComposeProvider
      providers={[
        provider(PolicyProvider, {
          access,
          subject: session.subject,
          context,
        }),
        provider(SessionProvider, { session }),
        provider(ThemeProvider, { initialDensity: 'comfortable' }),
        CartProvider,
      ]}
    >
      <Chrome
        navItems={navItems}
        sidebarItems={sidebarItems}
        unavailable={unavailable}
      />
    </ComposeProvider>
  );
}

// A convenience, and the whole of what this decision does: it chooses between
// the form and a sentence. The action above decides again and is what stops a
// write. The shop slug is the only member the rule reads, so it is the only
// one stated.
const mayDeclare = useCan('game', 'declare', { shop: row.shop }).allowed;

const decision = access.canFields(
  subject,
  'game',
  'declare',
  game,
  'write',
  proposed,
);
if (!decision.action.allowed) return refusal(decision.action.reason);
 
// Only what the decision marks allowed. Filtering the bag by hand on
// `!== 'denied'` would write the unevaluable fields and every key the decision
// does not carry, which is the mass-assignment shape a submitted form has.
const writable = pickAllowedFields(decision, proposed);
if (typeof writable['availability'] !== 'string') {
  return {
    refused: true,
    error:
      'The contract does not allow this title’s availability to be written.',
  };
}
 
setShelfPolicy(urn, state as Availability);
return { declared: state as Availability };

/** The request context the shell's middleware would have built. */
function contextFor(subject: AdminSubject): RouterContextProvider {
  const context = new RouterContextProvider();
  context.set(correlationContext, 'admin-test');
  context.set(subjectContext, subject);
  context.set(accessContext, async () => access);
  context.set(shelfContext, async () => ({ rows: [] }));
  return context;
}
 
/** A form submission at the availability form's URL, whoever sent it. */
function declaring(urn: string, fields: Record<string, string>): Request {
  const body = new FormData();
  for (const [name, value] of Object.entries(fields)) body.append(name, value);
  return new Request(`http://admin.test/shelf/${urn}`, {
    method: 'POST',
    body,
  });
}
 
/**
 * Calls the route's action the way the router would, and the way anything else
 * that reaches the URL does.
 *
 * The cast goes through `unknown` because the generated argument type carries
 * the route's match tree, which the action itself reads none of. What it does
 * read is stated in full: the request, the urn, and a context the middleware
 * would have filled.
 */
function callAction(subject: AdminSubject, urn: string, request: Request) {
  return action({
    request,
    params: { urn },
    context: contextFor(subject),
  } as unknown as Parameters<typeof action>[0]);
}

it('refuses a title another shop lists, and writes nothing', async () => {
  const result = await callAction(
    operator,
    GOTHENBURG_URN,
    declaring(GOTHENBURG_URN, {
      intent: 'declare',
      availability: 'out of print',
    }),
  );
 
  expect(result).toMatchObject({ refused: true });
  expect(readShelfPolicy()[GOTHENBURG_URN]).toBeUndefined();
});

/**
 * A stub router rather than a `StaticRouter`, because the availability form is
 * a `<Form>` and that component reads the data router's submit.
 */
function titleFor(subject: AdminSubject, row: Game): string {
  const Stub = createRoutesStub([
    {
      path: '/shelf/:urn',
      Component: () => (
        <PolicyProvider
          access={access}
          subject={subject}
          context={{ now: '2026-09-17T09:00:00.000Z' }}
        >
          <SessionProvider
            session={{
              operator: 'Ines',
              shop: 'Baize',
              correlationId: 'admin-test',
              subject,
            }}
          >
            <CartProvider>
              <Title
                {...({
                  loaderData: {
                    row: {
                      urn: row.urn,
                      title: row.title,
                      mechanisms: row.mechanisms,
                      players: row.players,
                      playtime: row.playtime,
                      complexity: row.complexity,
                      quantity: 3,
                      availability: 'in stock',
                      declared: false,
                      shop: row.shop,
                    },
                  },
                } as Parameters<typeof Title>[0])}
              />
            </CartProvider>
          </SessionProvider>
        </PolicyProvider>
      ),
    },
  ]);
 
  return renderToStaticMarkup(<Stub initialEntries={['/shelf/x']} />);
}