@cadence-ab/react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { CadenceClient } from '@cadence/sdk';
+export { CadenceClient } from '@cadence/sdk';
+
+interface CadenceProviderProps {
+    sdkKey: string;
+    apiUrl?: string;
+    userId?: string;
+    attributes?: Record<string, unknown>;
+    children: ReactNode;
+}
+declare function CadenceProvider({ sdkKey, apiUrl, userId, attributes, children, }: CadenceProviderProps): react_jsx_runtime.JSX.Element;
+
+interface UseCadenceVariantResult {
+    variant: string;
+    isLoading: boolean;
+}
+declare function useCadenceVariant(experimentName: string): UseCadenceVariantResult;
+
+interface UseTrackingResult {
+    trackConversion: (name: string, properties?: Record<string, unknown>) => void;
+    track: (name: string, properties?: Record<string, unknown>) => void;
+}
+declare function useTrackConversion(): UseTrackingResult;
+
+interface UseFeatureFlagResult {
+    enabled: boolean;
+    value: unknown;
+    isLoading: boolean;
+}
+declare function useFeatureFlag(featureKey: string, defaultValue?: unknown): UseFeatureFlagResult;
+
+interface CadenceContextValue {
+    client: CadenceClient | null;
+    isReady: boolean;
+}
+
+declare function useCadence(): CadenceContextValue;
+
+export { type CadenceContextValue, CadenceProvider, type CadenceProviderProps, type UseCadenceVariantResult, type UseFeatureFlagResult, type UseTrackingResult, useCadence, useCadenceVariant, useFeatureFlag, useTrackConversion };

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { CadenceClient } from '@cadence/sdk';
+export { CadenceClient } from '@cadence/sdk';
+
+interface CadenceProviderProps {
+    sdkKey: string;
+    apiUrl?: string;
+    userId?: string;
+    attributes?: Record<string, unknown>;
+    children: ReactNode;
+}
+declare function CadenceProvider({ sdkKey, apiUrl, userId, attributes, children, }: CadenceProviderProps): react_jsx_runtime.JSX.Element;
+
+interface UseCadenceVariantResult {
+    variant: string;
+    isLoading: boolean;
+}
+declare function useCadenceVariant(experimentName: string): UseCadenceVariantResult;
+
+interface UseTrackingResult {
+    trackConversion: (name: string, properties?: Record<string, unknown>) => void;
+    track: (name: string, properties?: Record<string, unknown>) => void;
+}
+declare function useTrackConversion(): UseTrackingResult;
+
+interface UseFeatureFlagResult {
+    enabled: boolean;
+    value: unknown;
+    isLoading: boolean;
+}
+declare function useFeatureFlag(featureKey: string, defaultValue?: unknown): UseFeatureFlagResult;
+
+interface CadenceContextValue {
+    client: CadenceClient | null;
+    isReady: boolean;
+}
+
+declare function useCadence(): CadenceContextValue;
+
+export { type CadenceContextValue, CadenceProvider, type CadenceProviderProps, type UseCadenceVariantResult, type UseFeatureFlagResult, type UseTrackingResult, useCadence, useCadenceVariant, useFeatureFlag, useTrackConversion };

package/dist/index.js

@@ -0,0 +1,141 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CadenceClient: () => import_sdk2.CadenceClient,
+  CadenceProvider: () => CadenceProvider,
+  useCadence: () => useCadence,
+  useCadenceVariant: () => useCadenceVariant,
+  useFeatureFlag: () => useFeatureFlag,
+  useTrackConversion: () => useTrackConversion
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/CadenceProvider.tsx
+var import_react2 = require("react");
+var import_sdk = require("@cadence/sdk");
+
+// src/context.ts
+var import_react = require("react");
+var CadenceContext = (0, import_react.createContext)({
+  client: null,
+  isReady: false
+});
+
+// src/CadenceProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CadenceProvider({
+  sdkKey,
+  apiUrl,
+  userId,
+  attributes,
+  children
+}) {
+  const [state, setState] = (0, import_react2.useState)({
+    client: null,
+    isReady: false
+  });
+  (0, import_react2.useEffect)(() => {
+    const newClient = new import_sdk.CadenceClient({ sdkKey, apiUrl, userId, attributes });
+    let cancelled = false;
+    newClient.ready().then(() => {
+      if (!cancelled) {
+        setState({ client: newClient, isReady: true });
+      }
+    });
+    return () => {
+      cancelled = true;
+      newClient.destroy();
+    };
+  }, [sdkKey, apiUrl, userId, attributes]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CadenceContext.Provider, { value: state, children });
+}
+
+// src/useCadenceVariant.ts
+var import_react3 = require("react");
+function useCadenceVariant(experimentName) {
+  const { client, isReady } = (0, import_react3.useContext)(CadenceContext);
+  const variant = (0, import_react3.useMemo)(() => {
+    if (!isReady || !client) return "control";
+    return client.getVariant(experimentName);
+  }, [isReady, client, experimentName]);
+  return {
+    variant,
+    isLoading: !isReady
+  };
+}
+
+// src/useTrackConversion.ts
+var import_react4 = require("react");
+function useTrackConversion() {
+  const { client } = (0, import_react4.useContext)(CadenceContext);
+  const trackConversion = (0, import_react4.useCallback)(
+    (name, properties) => {
+      client?.trackConversion(name, properties);
+    },
+    [client]
+  );
+  const track = (0, import_react4.useCallback)(
+    (name, properties) => {
+      client?.track(name, properties);
+    },
+    [client]
+  );
+  return { trackConversion, track };
+}
+
+// src/useFeatureFlag.ts
+var import_react5 = require("react");
+function useFeatureFlag(featureKey, defaultValue = null) {
+  const { client, isReady } = (0, import_react5.useContext)(CadenceContext);
+  const { enabled, value } = (0, import_react5.useMemo)(() => {
+    if (!isReady || !client) {
+      return { enabled: false, value: defaultValue };
+    }
+    return {
+      enabled: client.isFeatureEnabled(featureKey),
+      value: client.getFeatureValue(featureKey, defaultValue)
+    };
+  }, [isReady, client, featureKey, defaultValue]);
+  return {
+    enabled,
+    value,
+    isLoading: !isReady
+  };
+}
+
+// src/useCadence.ts
+var import_react6 = require("react");
+function useCadence() {
+  return (0, import_react6.useContext)(CadenceContext);
+}
+
+// src/index.ts
+var import_sdk2 = require("@cadence/sdk");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CadenceClient,
+  CadenceProvider,
+  useCadence,
+  useCadenceVariant,
+  useFeatureFlag,
+  useTrackConversion
+});

package/dist/index.mjs

@@ -0,0 +1,109 @@
+// src/CadenceProvider.tsx
+import { useEffect, useState } from "react";
+import { CadenceClient } from "@cadence/sdk";
+
+// src/context.ts
+import { createContext } from "react";
+var CadenceContext = createContext({
+  client: null,
+  isReady: false
+});
+
+// src/CadenceProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function CadenceProvider({
+  sdkKey,
+  apiUrl,
+  userId,
+  attributes,
+  children
+}) {
+  const [state, setState] = useState({
+    client: null,
+    isReady: false
+  });
+  useEffect(() => {
+    const newClient = new CadenceClient({ sdkKey, apiUrl, userId, attributes });
+    let cancelled = false;
+    newClient.ready().then(() => {
+      if (!cancelled) {
+        setState({ client: newClient, isReady: true });
+      }
+    });
+    return () => {
+      cancelled = true;
+      newClient.destroy();
+    };
+  }, [sdkKey, apiUrl, userId, attributes]);
+  return /* @__PURE__ */ jsx(CadenceContext.Provider, { value: state, children });
+}
+
+// src/useCadenceVariant.ts
+import { useContext, useMemo } from "react";
+function useCadenceVariant(experimentName) {
+  const { client, isReady } = useContext(CadenceContext);
+  const variant = useMemo(() => {
+    if (!isReady || !client) return "control";
+    return client.getVariant(experimentName);
+  }, [isReady, client, experimentName]);
+  return {
+    variant,
+    isLoading: !isReady
+  };
+}
+
+// src/useTrackConversion.ts
+import { useContext as useContext2, useCallback } from "react";
+function useTrackConversion() {
+  const { client } = useContext2(CadenceContext);
+  const trackConversion = useCallback(
+    (name, properties) => {
+      client?.trackConversion(name, properties);
+    },
+    [client]
+  );
+  const track = useCallback(
+    (name, properties) => {
+      client?.track(name, properties);
+    },
+    [client]
+  );
+  return { trackConversion, track };
+}
+
+// src/useFeatureFlag.ts
+import { useContext as useContext3, useMemo as useMemo2 } from "react";
+function useFeatureFlag(featureKey, defaultValue = null) {
+  const { client, isReady } = useContext3(CadenceContext);
+  const { enabled, value } = useMemo2(() => {
+    if (!isReady || !client) {
+      return { enabled: false, value: defaultValue };
+    }
+    return {
+      enabled: client.isFeatureEnabled(featureKey),
+      value: client.getFeatureValue(featureKey, defaultValue)
+    };
+  }, [isReady, client, featureKey, defaultValue]);
+  return {
+    enabled,
+    value,
+    isLoading: !isReady
+  };
+}
+
+// src/useCadence.ts
+import { useContext as useContext4 } from "react";
+function useCadence() {
+  return useContext4(CadenceContext);
+}
+
+// src/index.ts
+import { CadenceClient as CadenceClient2 } from "@cadence/sdk";
+export {
+  CadenceClient2 as CadenceClient,
+  CadenceProvider,
+  useCadence,
+  useCadenceVariant,
+  useFeatureFlag,
+  useTrackConversion
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@cadence-ab/react",
+  "version": "1.0.0",
+  "description": "React hooks and provider for CADENCE A/B Testing",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "dependencies": {
+    "@cadence/sdk": "file:../sdk"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}