Adds @osdk/react

.changeset/six-doors-smoke.md

@@ -0,0 +1,2 @@
+---
+---

.monorepolint.config.mjs

@@ -78,6 +78,10 @@ const consumerCliPackages = [
   "@osdk/foundry-sdk-generator",
 ];
 
+const testWithHappyDomPackages = [
+  "@osdk/react",
+];
+
 /**
  * We don't want to allow `workspace:^` in our dependencies because our current release branch
  * strategy only allows for patch changes in the release branch and minors elsewhere.
@@ -278,6 +282,7 @@ const formattedGeneratorHelper = (contents, ext) => async (context) => {
  *   outDir: string
  *   commonjs?: boolean
  *   singlePackageName?: string
+ *   react?: boolean
  * }} opts
  * @returns {Parameters<import("@monorepolint/rules")["standardTsconfig"]>[0]["options"]}
  */
@@ -295,6 +300,7 @@ function getTsconfigOptions(baseTsconfigPath, opts) {
           : {}),
         rootDir: "src",
         outDir: opts.outDir,
+        ...(opts.react ? { jsx: "react" } : {}),
         ...(
           opts.singlePackageName
             ? {
@@ -319,6 +325,7 @@ function getTsconfigOptions(baseTsconfigPath, opts) {
  *  esmOnly?: boolean,
  *  customTsconfigExcludes?: string[],
  *  tsVersion?: typeof LATEST_TYPESCRIPT_DEP | "^4.9.5",
+ *  vitestEnvironment?: "happy-dom",
  *  skipTsconfigReferences?: boolean,
  *  aliasConsola?: boolean
  * }} options
@@ -337,6 +344,7 @@ function standardPackageRules(shared, options) {
           customTsconfigExcludes: options.customTsconfigExcludes,
           skipTsconfigReferences: options.skipTsconfigReferences,
           outDir: "build/esm",
+          react: options.vitestEnvironment === "happy-dom",
         },
       ),
     }),
@@ -497,7 +505,11 @@ function standardPackageRules(shared, options) {
               : ""
           }
               pool: "forks",
-              exclude: [...configDefaults.exclude, "**/build/**/*"],
+              exclude: [...configDefaults.exclude, "**/build/**/*"],${
+            options.vitestEnvironment
+              ? `\n            environment: "${options.vitestEnvironment}",`
+              : ""
+          }
             },
           });
 
@@ -594,8 +606,19 @@ NOTE: DO NOT EDIT THIS README BY HAND. It is generated by monorepolint.
     ...standardPackageRules({
       excludePackages: [
         ...nonStandardPackages,
+        ...testWithHappyDomPackages,
+      ],
+    }, {
+      esmOnly: true,
+      tsVersion: LATEST_TYPESCRIPT_DEP,
+    }),
+
+    ...standardPackageRules({
+      includePackages: [
+        ...testWithHappyDomPackages,
       ],
     }, {
+      vitestEnvironment: "happy-dom",
       esmOnly: true,
       tsVersion: LATEST_TYPESCRIPT_DEP,
     }),

examples/example-react-sdk-2.x/package.json

@@ -19,6 +19,7 @@
     "@osdk/client": "workspace:*",
     "@osdk/e2e.generated.catchall": "workspace:*",
     "@osdk/oauth": "workspace:*",
+    "@osdk/react": "workspace:*",
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^6.23.1"

examples/example-react-sdk-2.x/src/Home.tsx

@@ -2,7 +2,39 @@ import { $Objects, $Actions, $Queries } from "@osdk/e2e.generated.catchall";
 import css from "./Home.module.css";
 import Layout from "./Layout";
 
+// import { useOsdkClient } from "@osdk/react";
+// import React from "react";
+// import { Osdk } from "@osdk/client";
+
 function Home() {
+
+  // const client = useOsdkClient();
+
+  // const [objects, setObjects] = React.useState<$Objects.Todo.OsdkInstance[]>();
+  // const [isLoading, setIsLoading] = React.useState(true);
+
+  // React.useEffect(() => {
+  //   client($Objects.Todo).fetchPage().then((page) => {
+  //     setObjects(page.data);
+  //     setIsLoading(false);
+  //   });
+  // }, []);
+
+  // if (isLoading) {
+  //   return <Layout>Loading...</Layout>;
+  // } else {
+  //   return (
+  //     <Layout>
+  //       <ul>
+  //       {objects?.map((o) => (
+  //         <li>{o.$primaryKey} - {o.$title}</li>
+  //       ))}
+  //       </ul>
+  //     </Layout>
+  //   )
+  // }
+
+
   const objectApiNames = Object.keys($Objects);
   const actionApiNames = Object.keys($Actions);
   const queryApiNames = Object.keys($Queries);

examples/example-react-sdk-2.x/src/createClientAndAuth.ts

@@ -0,0 +1,49 @@
+import "./index.css";
+import type { Client } from "@osdk/client";
+import { createClient } from "@osdk/client";
+import { $ontologyRid } from "@osdk/e2e.generated.catchall";
+import { createPublicOauthClient } from "@osdk/oauth";
+
+function checkEnv(
+  value: string | undefined,
+  name: string,
+): asserts value is string {
+  if (value == null) {
+    throw new Error(`Missing environment variable: ${name}`);
+  }
+}
+
+export default function createClientAndAuth() {
+  const url = import.meta.env.VITE_FOUNDRY_API_URL;
+  const clientId = import.meta.env.VITE_FOUNDRY_CLIENT_ID;
+  const redirectUrl = import.meta.env.VITE_FOUNDRY_REDIRECT_URL;
+  const scopes = [
+      "api:ontologies-read",
+      "api:ontologies-write",
+  ];
+
+  checkEnv(url, "VITE_FOUNDRY_API_URL");
+  checkEnv(clientId, "VITE_FOUNDRY_CLIENT_ID");
+  checkEnv(redirectUrl, "VITE_FOUNDRY_REDIRECT_URL");
+
+  const auth = createPublicOauthClient(
+    clientId,
+    url,
+    redirectUrl,
+    true,
+    undefined,
+    window.location.toString(),
+    scopes,
+  );
+
+  /**
+  * Initialize the client to interact with the Ontology SDK
+  */
+  const client: Client = createClient(
+    url,
+    $ontologyRid,
+    auth,
+  );
+
+  return { client, auth }
+}

examples/example-react-sdk-2.x/src/main.tsx

@@ -1,24 +1,14 @@
+import { OsdkProvider } from "@osdk/react";
 import ReactDOM from "react-dom/client";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import AuthCallback from "./AuthCallback";
-import Home from "./Home";
+import { RouterProvider } from "react-router-dom";
+import createClientAndAuth from "./createClientAndAuth";
 import "./index.css";
+import { router } from "./router";
 
-const router = createBrowserRouter(
-  [
-    {
-      path: "/",
-      element: <Home />,
-    },
-    {
-      // This is the route defined in your application's redirect URL
-      path: "/auth/callback",
-      element: <AuthCallback />,
-    },
-  ],
-  { basename: import.meta.env.BASE_URL },
-);
+const { client } = createClientAndAuth();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <RouterProvider router={router} />,
+  <OsdkProvider client={client}>
+    <RouterProvider router={router} />,
+  </OsdkProvider>,
 );

examples/example-react-sdk-2.x/src/router.tsx

@@ -0,0 +1,18 @@
+import { createBrowserRouter } from "react-router-dom";
+import AuthCallback from "./AuthCallback";
+import Home from "./Home";
+
+export const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      element: <Home />,
+    },
+    {
+      // This is the route defined in your application's redirect URL
+      path: "/auth/callback",
+      element: <AuthCallback />,
+    },
+  ],
+  { basename: import.meta.env.BASE_URL },
+);

packages/create-app.template.react.beta/templates/package.json.hbs

@@ -14,7 +14,8 @@
   "dependencies": {
     "{{osdkPackage}}": "latest",
     "@osdk/client": "{{clientVersion}}",
-    "@osdk/oauth": "^1.0.0"
+    "@osdk/oauth": "^1.0.0",
+    "@osdk/react": "^0.2.1"
   },
   "devDependencies": {
     "@types/node": "latest"

packages/create-app.template.react.beta/templates/src/Home.tsx.hbs

@@ -2,7 +2,39 @@ import { $Objects, $Actions, $Queries } from "{{osdkPackage}}";
 import css from "./Home.module.css";
 import Layout from "./Layout";
 
+// import { useOsdkClient } from "@osdk/react";
+// import React from "react";
+// import { Osdk } from "@osdk/client";
+
 function Home() {
+
+  // const client = useOsdkClient();
+
+  // const [objects, setObjects] = React.useState<$Objects.Todo.OsdkInstance[]>();
+  // const [isLoading, setIsLoading] = React.useState(true);
+
+  // React.useEffect(() => {
+  //   client($Objects.Todo).fetchPage().then((page) => {
+  //     setObjects(page.data);
+  //     setIsLoading(false);
+  //   });
+  // }, []);
+
+  // if (isLoading) {
+  //   return <Layout>Loading...</Layout>;
+  // } else {
+  //   return (
+  //     <Layout>
+  //       <ul>
+  //       {objects?.map((o) => (
+  //         <li>{o.$primaryKey} - {o.$title}</li>
+  //       ))}
+  //       </ul>
+  //     </Layout>
+  //   )
+  // }
+
+
   const objectApiNames = Object.keys($Objects);
   const actionApiNames = Object.keys($Actions);
   const queryApiNames = Object.keys($Queries);

packages/create-app.template.react.beta/templates/src/createClientAndAuth.ts.hbs

@@ -0,0 +1,54 @@
+import "./index.css";
+import type { Client } from "@osdk/client";
+import { createClient } from "@osdk/client";
+import { $ontologyRid } from "@osdk/e2e.generated.catchall";
+import { createPublicOauthClient } from "@osdk/oauth";
+
+function checkEnv(
+  value: string | undefined,
+  name: string,
+): asserts value is string {
+  if (value == null) {
+    throw new Error(`Missing environment variable: ${name}`);
+  }
+}
+
+export default function createClientAndAuth() {
+  const url = import.meta.env.VITE_FOUNDRY_API_URL;
+  const clientId = import.meta.env.VITE_FOUNDRY_CLIENT_ID;
+  const redirectUrl = import.meta.env.VITE_FOUNDRY_REDIRECT_URL;
+  {{#if scopes}}
+  const scopes = [
+    {{#each scopes}}
+      "{{this}}",
+    {{/each}}
+  ];
+  {{/if}}
+
+  checkEnv(url, "VITE_FOUNDRY_API_URL");
+  checkEnv(clientId, "VITE_FOUNDRY_CLIENT_ID");
+  checkEnv(redirectUrl, "VITE_FOUNDRY_REDIRECT_URL");
+
+  const auth = createPublicOauthClient(
+    clientId,
+    url,
+    redirectUrl,
+    {{#if scopes}}
+    true,
+    undefined,
+    window.location.toString(),
+    scopes,
+    {{/if}}
+  );
+
+  /**
+  * Initialize the client to interact with the Ontology SDK
+  */
+  const client: Client = createClient(
+    url,
+    $ontologyRid,
+    auth,
+  );
+
+  return { client, auth }
+}

packages/create-app.template.react.beta/templates/src/main.tsx

@@ -1,24 +1,14 @@
+import { OsdkProvider } from "@osdk/react";
 import ReactDOM from "react-dom/client";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import AuthCallback from "./AuthCallback";
-import Home from "./Home";
+import { RouterProvider } from "react-router-dom";
+import createClientAndAuth from "./createClientAndAuth";
 import "./index.css";
+import { router } from "./router";
 
-const router = createBrowserRouter(
-  [
-    {
-      path: "/",
-      element: <Home />,
-    },
-    {
-      // This is the route defined in your application's redirect URL
-      path: "/auth/callback",
-      element: <AuthCallback />,
-    },
-  ],
-  { basename: import.meta.env.BASE_URL },
-);
+const { client } = createClientAndAuth();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <RouterProvider router={router} />,
+  <OsdkProvider client={client}>
+    <RouterProvider router={router} />,
+  </OsdkProvider>,
 );

packages/create-app.template.react.beta/templates/src/router.tsx

@@ -0,0 +1,18 @@
+import { createBrowserRouter } from "react-router-dom";
+import AuthCallback from "./AuthCallback";
+import Home from "./Home";
+
+export const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      element: <Home />,
+    },
+    {
+      // This is the route defined in your application's redirect URL
+      path: "/auth/callback",
+      element: <AuthCallback />,
+    },
+  ],
+  { basename: import.meta.env.BASE_URL },
+);