From f2c189cc62a271a5340d5819ee58183e5baa099e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 6 Sep 2026 03:52:14 +0000
Subject: [PATCH] docs(example): teach ObjectView from plugin-view, not the
 phantom ObjectRenderer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`examples/byo-backend-console/README.md` taught `ObjectRenderer` from
`@object-ui/app-shell` in three snippets (six sites). No export of any package
in this repository bears that name, so the import does not resolve — and it is
the copy-paste starting point for the bring-your-own-backend path.

A bare rename to `@object-ui/app-shell`'s `ObjectView` was measured and
rejected: that component reads `objectName` from the router via `useParams`,
needs an `objects` metadata array, and types its whole props surface as `any`,
so a wrong prop raises nothing at build time. Measured here: the bare-rename
form type-checks clean (tsc exit 0, zero diagnostics) while staying broken at
runtime.

The spelling that works is `ObjectView` from `@object-ui/plugin-view`, in the
shape this example's own `src/App.tsx` already runs: a `schema` of
`type: 'object-view'` carrying `objectName`, plus the `dataSource` prop its
type requires. The snippets now show where that data source comes from —
directly in the App.tsx mirror, and via `useDataSource()` from
`@object-ui/providers` inside `DataSourceProvider` for the generic ones.

Verified by transcribing all three snippets into a scratch .tsx inside the
example (not committed) and running the example's own `tsc --noEmit` against
the built `dist/index.d.ts` of each package: green, with the scratch file and
those dist types proven present in the 3002-file program via `--listFiles`.
Three planted errors each turned it red and were restored by hash.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013uAaxiwgYDybsTNV9xwa1M
---
 examples/byo-backend-console/README.md | 74 +++++++++++++++++++++-----
 1 file changed, 60 insertions(+), 14 deletions(-)

diff --git a/examples/byo-backend-console/README.md b/examples/byo-backend-console/README.md
index aa706a88a1..6a0cdfcc10 100644
--- a/examples/byo-backend-console/README.md
+++ b/examples/byo-backend-console/README.md
@@ -8,7 +8,8 @@ This example demonstrates how third-party systems can integrate ObjectUI compone
 
 - ✅ Custom routing with React Router
 - ✅ Custom data adapter (mock REST API, not ObjectStack)
-- ✅ Using `@object-ui/app-shell` for rendering
+- ✅ Using `@object-ui/app-shell` for the page shell
+- ✅ Using `@object-ui/plugin-view` for object views (`ObjectView`)
 - ✅ Using `@object-ui/providers` for context
 - ✅ No console dependencies
 - ✅ ~100 lines of integration code
@@ -57,10 +58,13 @@ const mockDataSource = {
 
 ### 2. App Shell (`src/App.tsx`)
 
-Uses `@object-ui/app-shell` components:
+Uses `@object-ui/app-shell` for the shell and `@object-ui/plugin-view` for the
+object view:
 
 ```tsx
-import { AppShell, ObjectRenderer } from '@object-ui/app-shell';
+import { Routes, Route, useParams } from 'react-router-dom';
+import { AppShell } from '@object-ui/app-shell';
+import { ObjectView } from '@object-ui/plugin-view';
 import { ThemeProvider, DataSourceProvider } from '@object-ui/providers';
 
 function App() {
@@ -69,13 +73,27 @@ function App() {
       <DataSourceProvider dataSource={mockDataSource}>
         <AppShell sidebar={<MySidebar />}>
           <Routes>
-            <Route path="/:object" element={<ObjectRenderer />} />
+            <Route path="/:objectName" element={<ObjectPage />} />
           </Routes>
         </AppShell>
       </DataSourceProvider>
     </ThemeProvider>
   );
 }
+
+// `ObjectView` takes the object name in its schema, not from the router, and
+// its `dataSource` prop is required by the type. So a route renders a small
+// component of your own, not the view directly.
+function ObjectPage() {
+  const { objectName } = useParams<{ objectName: string }>();
+
+  return (
+    <ObjectView
+      schema={{ type: 'object-view', objectName: objectName || '' }}
+      dataSource={mockDataSource}
+    />
+  );
+}
 ```
 
 ### 3. Custom Routing (`src/router.tsx`)
@@ -83,12 +101,31 @@ function App() {
 Full control over routes - no predefined structure:
 
 ```tsx
-<Routes>
-  <Route path="/" element={<Home />} />
-  <Route path="/contacts" element={<ObjectRenderer objectName="contact" />} />
-  <Route path="/accounts" element={<ObjectRenderer objectName="account" />} />
-  {/* Your custom routes */}
-</Routes>
+import { useDataSource } from '@object-ui/providers';
+
+function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/contacts" element={<ObjectListPage objectName="contact" />} />
+      <Route path="/accounts" element={<ObjectListPage objectName="account" />} />
+      {/* Your custom routes */}
+    </Routes>
+  );
+}
+
+// One small component per object. Inside `DataSourceProvider`, `useDataSource()`
+// supplies the data source that `ObjectView` requires.
+function ObjectListPage({ objectName }: { objectName: string }) {
+  const dataSource = useDataSource();
+
+  return (
+    <ObjectView
+      schema={{ type: 'object-view', objectName }}
+      dataSource={dataSource}
+    />
+  );
+}
 ```
 
 ## Customization Examples
@@ -99,15 +136,24 @@ Full control over routes - no predefined structure:
 // app/layout.tsx
 import { AppShell } from '@object-ui/app-shell';
 
-export default function RootLayout({ children }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return <AppShell sidebar={<Sidebar />}>{children}</AppShell>;
 }
 
 // app/[object]/page.tsx
-import { ObjectRenderer } from '@object-ui/app-shell';
+'use client';
+import { ObjectView } from '@object-ui/plugin-view';
+import { useDataSource } from '@object-ui/providers';
+
+export default function ObjectPage({ params }: { params: { object: string } }) {
+  const dataSource = useDataSource();
 
-export default function ObjectPage({ params }) {
-  return <ObjectRenderer objectName={params.object} />;
+  return (
+    <ObjectView
+      schema={{ type: 'object-view', objectName: params.object }}
+      dataSource={dataSource}
+    />
+  );
 }
 ```