A first plugin

Create a plugin with the starter:

npm create @relatude/plugin@latest stock
cd stock
npm install

While the packages are in prerelease, ask for @relatude/plugin@alpha instead of @latest. The new folder holds:

File	Holds
`package.json`	the scripts below; `@relatude/sdk`, `@relatude/ui` and `@relatude/plugin-kit` at the starter's version; `vite`, `typescript`, `react`, `@types/react`
`vite.config.mjs`	the build: `relatudePlugin()` from `@relatude/plugin-kit`
`tsconfig.json`	TypeScript's settings (below)
`src/index.tsx`	the plugin: a menu item and a blade
`README.md`, `.gitignore`	how to develop and deploy it; `node_modules/` and `dist/` kept out of git

import { defineConfig } from 'vite';
import { relatudePlugin } from '@relatude/plugin-kit';

export default defineConfig(relatudePlugin());

relatudePlugin() builds src/index.tsx into one ES module, dist/index.js, with a source map, and leaves the six shared modules out of it. relatudePlugin({ entry, outDir, sourcemap }) changes those defaults. The installed packages give the plugin its types and its build only: when it runs, React, the SDK and the components are the interface's.

Replace src/index.tsx with a menu item that opens a blade:

import { definePlugin, type BladeProps } from '@relatude/sdk';
import { Blade, EmptyState } from '@relatude/ui';

function StockBlade(props: BladeProps) {
  return (
    <Blade title="Stock" icon="package" onClose={props.close}>
      <EmptyState icon="package" title="Nothing here yet" />
    </Blade>
  );
}

export default definePlugin({
  name: 'stock',
  version: '1.0.0',
  sdk: '^1.0',
  contributes: {
    nav: [{ id: 'stock', title: 'Stock', icon: 'package', opens: 'stock.list', order: 25 }],
    blades: [{ id: 'stock.list', component: StockBlade, width: 560 }],
  },
});

Script	Does
`npm run dev`	builds the plugin on every save and serves it to the CMS (below)
`npm run typecheck`	checks the types of the whole project (`tsc --noEmit`)
`npm run build`	builds `dist/` for deployment