an exclusionary rule, made structural. a plugin does not render a screen: it
contributes panels and says how they are arranged, and the shell renders
WorkspaceView around them.
web/panels.ts appRegistryMetas — at least one panel
web/layout.ts defaultLayout — how they are arranged
both required the moment web/ exists, and missing either is refused at discovery
by name and with the reason. tested:
probeplug: has a web/ directory but is missing web/layout.ts.
Every plugin route renders a Workspace: contribute panels and a layout,
not a screen.
there is deliberately no way to export a component. one that could would be free
to render a bare div, a full-page form, or its own navigation, and the platform
would become a shell hosting strangers' layouts rather than one application.
non-compliance is not so much refused as unrepresentable — there is nowhere to
put a screen.
the shell registers <prefix> and <prefix>/:section, exactly as the core screens
do, so a plugin's sections stay addressable and cmd-clickable, and panels read
useParams independently rather than passing state between themselves.
appTypes.allowed is pinned to that plugin's own keys, so a persisted layout
naming something else falls back instead of rendering another plugin's panel
inside this screen.
the example plugin is rebuilt to model it — two panels, a layout, one of them
calling its own /api/example/ping through useClient — because the reference
implementation is what everyone copies.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
17 lines
768 B
TypeScript
17 lines
768 B
TypeScript
import type { LayoutNode } from 'officerdev';
|
|
|
|
// How this plugin's panels are arranged. The shell renders `WorkspaceView` with this as the default and
|
|
// persists the user's version per plugin, so this is the starting arrangement rather than a fixed one.
|
|
//
|
|
// Every `appType` here must be a key from `panels.ts` — `appTypes.allowed` is pinned to them, so a
|
|
// mismatch falls back rather than rendering another plugin's panel inside this screen.
|
|
export const defaultLayout: LayoutNode = {
|
|
type: 'group',
|
|
id: 'example-root',
|
|
direction: 'horizontal',
|
|
children: [
|
|
{ node: { type: 'panel', id: 'example-overview', appType: 'example-overview' }, size: 40 },
|
|
{ node: { type: 'panel', id: 'example-detail', appType: 'example-detail' }, size: 60 },
|
|
],
|
|
};
|