@opendatalabs/connect-js 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# @opendatalabs/connect-js
+
+`@opendatalabs/connect-js` is the JavaScript SDK for launching hosted Open Data Labs Connect flows.
+
+It is designed around the same trust split used by embedded products like Stripe Connect and Plaid Link:
+
+- your server uses a secret Open Data Labs API key
+- your frontend uses a public app ID
+- your backend creates short-lived Connect sessions
+
+## Installation
+
+```bash
+npm install @opendatalabs/connect-js
+```
+
+## React usage
+
+```tsx
+import { OpenDataLabsProvider } from "@opendatalabs/connect-js/react";
+
+<OpenDataLabsProvider
+  appId={process.env.NEXT_PUBLIC_ODL_APP_ID}
+  createSession={async ({ source, scopes, appId }) => {
+    const response = await fetch("/api/connect-session", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ source, scopes, appId }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to create Connect session");
+    }
+
+    return response.json();
+  }}
+>
+  <App />
+</OpenDataLabsProvider>
+```
+
+## Server usage
+
+```ts
+import { createConnectSession } from "@opendatalabs/connect-js/server";
+
+const session = await createConnectSession(
+  "https://api.opendatalabs.com/api/v1",
+  process.env.OPENDATALABS_API_KEY!,
+  {
+    appId: process.env.ODL_APP_ID,
+    source: "instagram",
+    origin: "https://app.example.com",
+  }
+);
+```
+
+## Requirements
+
+- Keep your API key on the server.
+- Use an app-scoped public `appId` in the browser.
+- Add each embedding domain in the Open Data Labs dashboard before creating sessions for it.

package/dist/chunk-JEDKJQ3M.js

@@ -0,0 +1,41 @@
+// src/core/client.ts
+function listenForConnectMessages(connectUrl, events) {
+  const expectedOrigin = new URL(connectUrl).origin;
+  const handler = (event) => {
+    if (event.origin !== expectedOrigin) {
+      return;
+    }
+    const type = event.data?.type;
+    if (type === "ready") {
+      events.onReady?.();
+    } else if (type === "success") {
+      events.onSuccess?.({
+        connectionId: event.data?.connectionId,
+        data: event.data?.data
+      });
+    } else if (type === "demo-data") {
+      events.onSuccess?.({
+        connectionId: event.data?.connectionId ?? "",
+        data: event.data?.data
+      });
+    } else if (type === "exit") {
+      events.onExit?.();
+    }
+  };
+  window.addEventListener("message", handler);
+  return () => window.removeEventListener("message", handler);
+}
+function createConnectIframe(session) {
+  const iframe = document.createElement("iframe");
+  iframe.src = session.connectUrl;
+  iframe.style.width = "100%";
+  iframe.style.height = "100%";
+  iframe.style.border = "0";
+  return iframe;
+}
+
+export {
+  listenForConnectMessages,
+  createConnectIframe
+};
+//# sourceMappingURL=chunk-JEDKJQ3M.js.map

package/dist/chunk-JEDKJQ3M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/client.ts"],"sourcesContent":["import type { ConnectEvents, ConnectSession } from \"./types\";\n\nexport function listenForConnectMessages(\n  connectUrl: string,\n  events: ConnectEvents\n) {\n  const expectedOrigin = new URL(connectUrl).origin;\n\n  const handler = (event: MessageEvent) => {\n    if (event.origin !== expectedOrigin) {\n      return;\n    }\n\n    const type = event.data?.type;\n    if (type === \"ready\") {\n      events.onReady?.();\n    } else if (type === \"success\") {\n      events.onSuccess?.({\n        connectionId: event.data?.connectionId,\n        data: event.data?.data,\n      });\n    } else if (type === \"demo-data\") {\n      events.onSuccess?.({\n        connectionId: event.data?.connectionId ?? \"\",\n        data: event.data?.data,\n      });\n    } else if (type === \"exit\") {\n      events.onExit?.();\n    }\n  };\n\n  window.addEventListener(\"message\", handler);\n  return () => window.removeEventListener(\"message\", handler);\n}\n\nexport function createConnectIframe(session: ConnectSession) {\n  const iframe = document.createElement(\"iframe\");\n  iframe.src = session.connectUrl;\n  iframe.style.width = \"100%\";\n  iframe.style.height = \"100%\";\n  iframe.style.border = \"0\";\n  return iframe;\n}\n"],"mappings":";AAEO,SAAS,yBACd,YACA,QACA;AACA,QAAM,iBAAiB,IAAI,IAAI,UAAU,EAAE;AAE3C,QAAM,UAAU,CAAC,UAAwB;AACvC,QAAI,MAAM,WAAW,gBAAgB;AACnC;AAAA,IACF;AAEA,UAAM,OAAO,MAAM,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,aAAO,UAAU;AAAA,IACnB,WAAW,SAAS,WAAW;AAC7B,aAAO,YAAY;AAAA,QACjB,cAAc,MAAM,MAAM;AAAA,QAC1B,MAAM,MAAM,MAAM;AAAA,MACpB,CAAC;AAAA,IACH,WAAW,SAAS,aAAa;AAC/B,aAAO,YAAY;AAAA,QACjB,cAAc,MAAM,MAAM,gBAAgB;AAAA,QAC1C,MAAM,MAAM,MAAM;AAAA,MACpB,CAAC;AAAA,IACH,WAAW,SAAS,QAAQ;AAC1B,aAAO,SAAS;AAAA,IAClB;AAAA,EACF;AAEA,SAAO,iBAAiB,WAAW,OAAO;AAC1C,SAAO,MAAM,OAAO,oBAAoB,WAAW,OAAO;AAC5D;AAEO,SAAS,oBAAoB,SAAyB;AAC3D,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,MAAM,QAAQ;AACrB,SAAO,MAAM,QAAQ;AACrB,SAAO,MAAM,SAAS;AACtB,SAAO,MAAM,SAAS;AACtB,SAAO;AACT;","names":[]}

package/dist/core/index.d.ts

@@ -0,0 +1,25 @@
+interface CreateSessionOptions {
+    source: string;
+    scopes?: string[];
+    redirectUrl?: string;
+    origin?: string;
+    appId?: string;
+}
+interface ConnectSession {
+    connectionId: string;
+    connectToken: string;
+    connectUrl: string;
+}
+interface ConnectEvents {
+    onReady?: () => void;
+    onSuccess?: (payload: {
+        connectionId: string;
+        data?: unknown;
+    }) => void;
+    onExit?: () => void;
+}
+
+declare function listenForConnectMessages(connectUrl: string, events: ConnectEvents): () => void;
+declare function createConnectIframe(session: ConnectSession): HTMLIFrameElement;
+
+export { type ConnectEvents, type ConnectSession, type CreateSessionOptions, createConnectIframe, listenForConnectMessages };

package/dist/core/index.js

@@ -0,0 +1,9 @@
+import {
+  createConnectIframe,
+  listenForConnectMessages
+} from "../chunk-JEDKJQ3M.js";
+export {
+  createConnectIframe,
+  listenForConnectMessages
+};
+//# sourceMappingURL=index.js.map

package/dist/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { ConnectEvents, ConnectSession, CreateSessionOptions, createConnectIframe, listenForConnectMessages } from './core/index.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+import {
+  createConnectIframe,
+  listenForConnectMessages
+} from "./chunk-JEDKJQ3M.js";
+export {
+  createConnectIframe,
+  listenForConnectMessages
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/react/index.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface OpenDataLabsConfig {
+    appId?: string;
+    createSession: (input: {
+        source: string;
+        scopes?: string[];
+        redirectUrl?: string;
+        origin?: string;
+        appId?: string;
+    }) => Promise<{
+        connectionId: string;
+        connectToken: string;
+        connectUrl: string;
+    }>;
+}
+interface OpenDataLabsProviderProps extends OpenDataLabsConfig {
+    children: ReactNode;
+}
+declare function OpenDataLabsProvider({ children, ...value }: OpenDataLabsProviderProps): react_jsx_runtime.JSX.Element;
+declare function useOpenDataLabs(): OpenDataLabsConfig;
+
+declare function useConnect(): (input: {
+    source: string;
+    scopes?: string[];
+    redirectUrl?: string;
+    origin?: string;
+}) => Promise<{
+    connectionId: string;
+    connectToken: string;
+    connectUrl: string;
+}>;
+
+export { type OpenDataLabsConfig, OpenDataLabsProvider, type OpenDataLabsProviderProps, useConnect, useOpenDataLabs };

package/dist/react/index.js

@@ -0,0 +1,36 @@
+// src/react/provider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var ConnectContext = createContext(null);
+function OpenDataLabsProvider({
+  children,
+  ...value
+}) {
+  return /* @__PURE__ */ jsx(ConnectContext.Provider, { value, children });
+}
+function useOpenDataLabs() {
+  const context = useContext(ConnectContext);
+  if (!context) {
+    throw new Error("useOpenDataLabs must be used within OpenDataLabsProvider");
+  }
+  return context;
+}
+
+// src/react/use-connect.ts
+import { useCallback } from "react";
+function useConnect() {
+  const { createSession, appId } = useOpenDataLabs();
+  return useCallback(
+    (input) => createSession({
+      ...input,
+      appId
+    }),
+    [appId, createSession]
+  );
+}
+export {
+  OpenDataLabsProvider,
+  useConnect,
+  useOpenDataLabs
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/provider.tsx","../../src/react/use-connect.ts"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\nexport interface OpenDataLabsConfig {\n  appId?: string;\n  createSession: (input: {\n    source: string;\n    scopes?: string[];\n    redirectUrl?: string;\n    origin?: string;\n    appId?: string;\n  }) => Promise<{\n    connectionId: string;\n    connectToken: string;\n    connectUrl: string;\n  }>;\n}\n\nexport interface OpenDataLabsProviderProps extends OpenDataLabsConfig {\n  children: ReactNode;\n}\n\nconst ConnectContext = createContext<OpenDataLabsConfig | null>(null);\n\nexport function OpenDataLabsProvider({\n  children,\n  ...value\n}: OpenDataLabsProviderProps) {\n  return <ConnectContext.Provider value={value}>{children}</ConnectContext.Provider>;\n}\n\nexport function useOpenDataLabs() {\n  const context = useContext(ConnectContext);\n  if (!context) {\n    throw new Error(\"useOpenDataLabs must be used within OpenDataLabsProvider\");\n  }\n  return context;\n}\n","import { useCallback } from \"react\";\nimport { useOpenDataLabs } from \"./provider\";\n\nexport function useConnect() {\n  const { createSession, appId } = useOpenDataLabs();\n\n  return useCallback(\n    (input: {\n      source: string;\n      scopes?: string[];\n      redirectUrl?: string;\n      origin?: string;\n    }) =>\n      createSession({\n        ...input,\n        appId,\n      }),\n    [appId, createSession]\n  );\n}\n"],"mappings":";AAAA,SAAS,eAAe,kBAAkC;AA2BjD;AANT,IAAM,iBAAiB,cAAyC,IAAI;AAE7D,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,SAAO,oBAAC,eAAe,UAAf,EAAwB,OAAe,UAAS;AAC1D;AAEO,SAAS,kBAAkB;AAChC,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AACA,SAAO;AACT;;;ACpCA,SAAS,mBAAmB;AAGrB,SAAS,aAAa;AAC3B,QAAM,EAAE,eAAe,MAAM,IAAI,gBAAgB;AAEjD,SAAO;AAAA,IACL,CAAC,UAMC,cAAc;AAAA,MACZ,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,IACH,CAAC,OAAO,aAAa;AAAA,EACvB;AACF;","names":[]}

package/dist/server/index.d.ts

@@ -0,0 +1,13 @@
+declare function createConnectSession(apiBaseUrl: string, apiKey: string, body: {
+    source: string;
+    scopes?: string[];
+    redirectUrl?: string;
+    origin?: string;
+    appId?: string;
+}): Promise<{
+    connectionId: string;
+    connectToken: string;
+    connectUrl: string;
+}>;
+
+export { createConnectSession };

package/dist/server/index.js

@@ -0,0 +1,20 @@
+// src/server/index.ts
+async function createConnectSession(apiBaseUrl, apiKey, body) {
+  const response = await fetch(`${apiBaseUrl}/connect/sessions`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error(data.message || "Failed to create connect session");
+  }
+  return data;
+}
+export {
+  createConnectSession
+};
+//# sourceMappingURL=index.js.map

package/dist/server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/server/index.ts"],"sourcesContent":["export async function createConnectSession(\n  apiBaseUrl: string,\n  apiKey: string,\n  body: {\n    source: string;\n    scopes?: string[];\n    redirectUrl?: string;\n    origin?: string;\n    appId?: string;\n  }\n) {\n  const response = await fetch(`${apiBaseUrl}/connect/sessions`, {\n    method: \"POST\",\n    headers: {\n      Authorization: `Bearer ${apiKey}`,\n      \"Content-Type\": \"application/json\",\n    },\n    body: JSON.stringify(body),\n  });\n\n  const data = await response.json();\n  if (!response.ok) {\n    throw new Error(data.message || \"Failed to create connect session\");\n  }\n\n  return data as {\n    connectionId: string;\n    connectToken: string;\n    connectUrl: string;\n  };\n}\n"],"mappings":";AAAA,eAAsB,qBACpB,YACA,QACA,MAOA;AACA,QAAM,WAAW,MAAM,MAAM,GAAG,UAAU,qBAAqB;AAAA,IAC7D,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,eAAe,UAAU,MAAM;AAAA,MAC/B,gBAAgB;AAAA,IAClB;AAAA,IACA,MAAM,KAAK,UAAU,IAAI;AAAA,EAC3B,CAAC;AAED,QAAM,OAAO,MAAM,SAAS,KAAK;AACjC,MAAI,CAAC,SAAS,IAAI;AAChB,UAAM,IAAI,MAAM,KAAK,WAAW,kCAAkC;AAAA,EACpE;AAEA,SAAO;AAKT;","names":[]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@opendatalabs/connect-js",
+  "version": "1.0.0",
+  "description": "JavaScript SDK for embedding Open Data Labs Connect flows",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "pack:check": "node ../../scripts/assert-connect-package.mjs"
+  },
+  "homepage": "https://dev.opendatalabs.com/docs",
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
+}