Quickstart

Typed routes

import {
  Link,
  Route,
  RoutingContext,
  RouterRenderer,
  createRouter,
  getResourcePage,
} from '@plumile/router';

const routes: Route<any, any, any>[] = [
  {
    path: '/',
    resourcePage: getResourcePage('Home', () => import('./pages/Home')),
  },
];

const { context } = createRouter(routes);

export function App() {
  return (
    <RoutingContext.Provider value={context}>
      <Link to="/">Home</Link>
      <RouterRenderer fallback={<div>Loading...</div>} />
    </RoutingContext.Provider>
  );
}

This mirrors the package README: define routes, create a router context, provide that context, then render links and the active route.

URL filters

import {
  defineSchema,
  numberField,
  parse,
  setFilter,
  stringify,
  stringField,
} from '@plumile/filter-query';

const schema = defineSchema({
  page: numberField(),
  title: stringField(['contains']),
});

const { filters, diagnostics } = parse('page=2&title.contains=agent', schema);
const next = setFilter(filters, schema, 'page', 'eq', 3);
const query = stringify(next, schema);

Check diagnostics before trusting user-provided search strings. Serialization uses stable schema and operator ordering.