Supports custom formatters in browsers (#947)

palantir · Nov 19, 2024 · 14624f7 · 14624f7
1 parent 11088aa
commit 14624f7
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 0 deletions.
diff --git a/.changeset/hip-colts-jog.md b/.changeset/hip-colts-jog.md
@@ -0,0 +1,5 @@
+---
+"@osdk/client": patch
+---
+
+Supports custom formatters in browser
diff --git a/packages/client/src/object/convertWireToOsdkObjects/createOsdkObject.ts b/packages/client/src/object/convertWireToOsdkObjects/createOsdkObject.ts
@@ -73,6 +73,65 @@ const objectPrototypeCache = createClientCache(
   },
 );
 
+if (process.env.NODE_ENV !== "production") {
+  const installed = Symbol();
+  const gw: any = typeof window === "undefined" ? global : window;
+  if (!(installed in gw)) {
+    gw[installed] = true;
+
+    gw.devtoolsFormatters ??= [];
+    gw.devtoolsFormatters.push({
+      header: function(object: any) {
+        const raw = object[RawObject];
+        if (raw == null) return null;
+
+        return [
+          "div",
+          {},
+
+          `Osdk.Instance<${raw.$apiName}> { $primaryKey:`,
+          ["object", { object: raw.$primaryKey }],
+          `, $title:`,
+          ["object", { object: raw.$title }],
+          `, ... }`,
+        ];
+      },
+      hasBody: function(object: any) {
+        return object[RawObject] != null;
+      },
+      body: function(object: any) {
+        const raw = object[RawObject];
+        if (raw == null) return null;
+
+        return [
+          "ol",
+          {
+            style: `
+            list-style-type: none;
+            padding-left: 0;
+            margin-top: 0;
+            margin-left: 18px
+          `,
+          },
+          ["li", {}, "$raw:", ["object", { object: raw }]],
+          // ...Object.keys(raw).map(key => {
+          //   return [
+          //     "li",
+          //     {},
+          //     [
+          //       "span",
+          //       { style: "color: #888888" },
+          //       `${key}: `,
+          //     ],
+          //     ["object", { object: raw[key] }], // ["span", {}, `${key}: `]],
+          //   ];
+          // }),
+        ];
+      },
+    });
+  }
+}
+
 /** @internal */
 export function createOsdkObject<
   Q extends FetchedObjectTypeDefinition,

diff --git a/packages/e2e.sandbox.todoapp/src/App.tsx b/packages/e2e.sandbox.todoapp/src/App.tsx
@@ -7,6 +7,9 @@ function App() {
   const { todos, isLoading, toggleComplete, error, isValidating, createTodo } =
     useTodos();
 
+  if (todos) {
+    console.log(todos[0]);
+  }
   return (
     <main className="flex min-h-screen flex-col items-center p-24 ">
       <h1 className="mb-6 text-xl">Todos</h1>