Skip to content

Add lists, tables, tiles, a router and JSON requests to the TypeScript package - #202

Merged
djthorpe merged 2 commits into
mainfrom
djt/1112/list
Nov 12, 2026
Merged

djthorpe merged 2 commits into
mainfrom
djt/1112/list

Conversation

@djthorpe

@djthorpe djthorpe commented Nov 12, 2026 •

Copy link
Copy Markdown
Member

Adds the pieces every server's frontend needs for its lists. They were first written in an app built on this package, and used there for about ten lists.

Module What it has
/api request, a JSON request, beside requestStream. It throws an ApiError when the response isn't ok, and returns undefined for an empty body.
/list ListController: a list an API returns a page at a time ({ count, body })
/list/view gs-table: a Carbon data table of a list's page
/list/tiles gs-tiles: a row of tiles of a list, with an optional "all" tile first, of which one is chosen. It fires gs-tile-select with the tile's value.
/router Router: shows the page of the location's hash, with parameters (#database/shop)

ListController:

  • Pages, sorted by the server.
  • reset for when a filter changes.
  • It follows a ChangesController's changes to its tables, and is unavailable while the server can't be reached.
  • It keeps the open item current, or closes it on a 404.

gs-table:

  • A column with a sort key sorts the list when its header is clicked. Carbon's own sorting, which only sorts the rows on the page, is turned off.
  • Pagination, and a skeleton until the first page loads. The skeleton always has a header, because Carbon's re-renders forever without one.
  • Rows open their items.

Also:

  • Docs: README sections on lists and routing, with examples.
  • Tests: for request, ListController (load, last page, reset, sort, the open item, errors) and parseRoute. 42 pass.
  • Dependencies: lit and @carbon/web-components stay optional peer dependencies, needed only by the views.

The app's header and side navigation, and a helper that opens a list's item in a panel, stay in the app until a second app uses them.

…t package

- api: request, a JSON request, beside requestStream
- list: ListController, of a list an API returns a page at a time, sorted
  by the server, which follows its changes, and keeps its open item current
- list/view: gs-table, a Carbon data table of a list's page, with sortable
  columns and pagination, whose rows open their items
- list/tiles: gs-tiles, a row of tiles of a list, after one for all of
  them, of which one is chosen
- router: Router, which shows the page of the location's hash

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings November 12, 2026 17:54

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Unresolved issues allow stale responses to overwrite pagination, filtered results, and selection, leave newly created lists incorrectly available during outages, and prevent keyboard-only users from opening items.

4 open issues
What changed in this PR

This PR expands the TypeScript package with reusable list controllers and views, JSON requests, and hash-based routing for server frontends.

Changes:

  • Adds paginated, server-sorted lists with change-stream integration and selected-item refresh.
  • Adds Carbon table and tile views, plus a hash router with route parameters.
  • Exports the new modules and adds documentation and tests.
File Description
frontend/​test/​router.test.ts Tests route parsing and parameter decoding.
frontend/​test/​request.test.ts Tests JSON requests, errors, and empty responses.
frontend/​test/​list.test.ts Tests list loading, pagination, sorting, selection, and errors.
frontend/​src/​router/​router.ts Implements hash parsing and page visibility routing.
frontend/​src/​router/​index.ts Exports the router API.
frontend/​src/​list/​view.ts Adds the sortable, paginated Carbon table view.
frontend/​src/​list/​tiles.ts Adds selectable tiles with selection events.
frontend/​src/​list/​index.ts Exports the list controller and types.
frontend/​src/​list/​controller.ts Manages list pages, sorting, selection, and change updates.
frontend/​src/​api/​request.ts Adds the JSON request helper.
frontend/​src/​api/​index.ts Exports the request helper and options.
frontend/​README.md Documents lists, views, and routing with examples.
frontend/​package.json Exposes list and router package entry points.

Review effort: Balanced

Comment thread frontend/src/list/controller.ts Resolved
Comment thread frontend/src/list/controller.ts Resolved
Comment thread frontend/src/list/controller.ts Resolved
Comment thread frontend/src/list/view.ts Resolved
…eyboard

- ListController has a generation, which a reset, page, page size or sort
  changes, so a response to an earlier one isn't shown, nor changes the
  page, and the list is loaded again
- An item which is opened, or closed, while the open one is loaded again
  stays as it is
- A list made while the changes can't be watched is unavailable from the
  start, with ChangesController's new started
- gs-table's rows have a button as their first cell, so they open from
  the keyboard, and its empty message is across the table

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@djthorpe djthorpe self-assigned this Nov 12, 2026
@djthorpe
djthorpe merged commit e189d6a into main Nov 12, 2026
2 checks passed
@djthorpe
djthorpe deleted the djt/1112/list branch November 12, 2026 18:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants