api_binding_ui 3.0.0 → 3.1.0

package/README.md

@@ -9,7 +9,7 @@ Spec: [`spec/FRAMEWORK.md`](spec/FRAMEWORK.md). Agent rules: [`SKILL.md`](SKILL.
 1. **Ids.** Every bindable component gets `componentId="<product>.<screen>[.<sub-screen>].<component>"`, e.g. `collections.worklist.add-notes.submit`.
 2. **Register.** List kinds, screens and components in `bindings.json`.
 3. **Client.** Run Orval on the same OpenAPI file (see below).
-4. **Bind.** `npx api-binding studio bindings.json` opens the studio on http://localhost:5180. Edits save to the file.
+4. **Bind.** In a Vite app, add the dev plugin (below) and click **Bind API** on any screen. Elsewhere, `npx api-binding studio bindings.json` opens it on http://localhost:5180. Edits save to the file.
 5. **Generate.** `npx api-binding generate bindings.json` writes one hook per screen into `output.dir`.
 6. **Wire once.** Each screen calls its hook:
 
@@ -28,6 +28,20 @@ const options = api.notesType.options.bound ? api.notesType.options.data ?? [] :
 
 Rebinding changes only the hook bodies; the hook's types come from the registry, so call sites stay put.
 
+## Dev plugin (Vite)
+
+```ts
+// vite.config.ts
+import { bindingStudio } from "api_binding_ui/vite";
+
+export default defineConfig({ plugins: [/* …, */ bindingStudio()] });   // reads ./bindings.json
+```
+
+- `vite dev` only (`apply: "serve"`); `vite build` output contains nothing from it. Keep `api_binding_ui` a devDependency.
+- Adds a floating **Bind API** button to every HTML page (SPA and server-rendered). It opens the studio over the app on the screen being shown, found from the `data-component-id` attributes on the page; an open dialog wins over its page.
+- **Alt+click** any component to open the studio on it; holding Alt outlines components.
+- The studio is served by the dev server under `/__binding/`, which reads and writes `bindings.json` and fetches the docs server-side. Writes are same-origin only.
+
 ## bindings.json
 
 ```jsonc

package/SKILL.md

@@ -9,7 +9,7 @@ Spec: `node_modules/api_binding_ui/spec/FRAMEWORK.md`. The app never imports `ap
 
 ## Never
 
-- Import `api_binding_ui` from app code, or add a binding runtime, provider or manifest to the app.
+- Import `api_binding_ui` from app code, or add a binding runtime, provider or manifest to the app. The only allowed use is `bindingStudio()` from `api_binding_ui/vite` in `vite.config.ts`, with the package as a devDependency.
 - Edit files under the Orval output or `src/api/screens`. They start with `// @generated`; regenerate instead.
 - Call APIs from screens other than through the generated screen hook.
 - Add hardcoded option lists, rows or values an API should provide.