@flipfeatureflag/react 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { FlipFlagClient, FlipFlagClientOptions, SdkFlagEvaluation, FlagsStatus } from '@flipfeatureflag/core';
+export { FlipFlagClient, FlipFlagClientOptions } from '@flipfeatureflag/core';
+
+interface FlipFlagProviderProps {
+    client?: FlipFlagClient;
+    config?: FlipFlagClientOptions;
+}
+declare function FlipFlagProvider({ client, config, children }: PropsWithChildren<FlipFlagProviderProps>): react_jsx_runtime.JSX.Element;
+declare function useFlipFlagClient(): FlipFlagClient;
+declare function useFlagsStatus(): FlagsStatus;
+declare function useFlag(flagKey: string, defaultValue?: boolean): boolean;
+declare function useVariant(flagKey: string, defaultValue?: SdkFlagEvaluation["value"]): SdkFlagEvaluation;
+declare function useAllFlags(): Record<string, SdkFlagEvaluation>;
+
+export { FlipFlagProvider, useAllFlags, useFlag, useFlagsStatus, useFlipFlagClient, useVariant };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { FlipFlagClient, FlipFlagClientOptions, SdkFlagEvaluation, FlagsStatus } from '@flipfeatureflag/core';
+export { FlipFlagClient, FlipFlagClientOptions } from '@flipfeatureflag/core';
+
+interface FlipFlagProviderProps {
+    client?: FlipFlagClient;
+    config?: FlipFlagClientOptions;
+}
+declare function FlipFlagProvider({ client, config, children }: PropsWithChildren<FlipFlagProviderProps>): react_jsx_runtime.JSX.Element;
+declare function useFlipFlagClient(): FlipFlagClient;
+declare function useFlagsStatus(): FlagsStatus;
+declare function useFlag(flagKey: string, defaultValue?: boolean): boolean;
+declare function useVariant(flagKey: string, defaultValue?: SdkFlagEvaluation["value"]): SdkFlagEvaluation;
+declare function useAllFlags(): Record<string, SdkFlagEvaluation>;
+
+export { FlipFlagProvider, useAllFlags, useFlag, useFlagsStatus, useFlipFlagClient, useVariant };

package/dist/index.js

@@ -0,0 +1,135 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  FlipFlagClient: () => import_core.FlipFlagClient,
+  FlipFlagProvider: () => FlipFlagProvider,
+  useAllFlags: () => useAllFlags,
+  useFlag: () => useFlag,
+  useFlagsStatus: () => useFlagsStatus,
+  useFlipFlagClient: () => useFlipFlagClient,
+  useVariant: () => useVariant
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = __toESM(require("react"));
+var import_js = require("@flipfeatureflag/js");
+var import_core = require("@flipfeatureflag/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FlipFlagContext = import_react.default.createContext(null);
+var FlipFlagStatusContext = import_react.default.createContext({ ready: false });
+function FlipFlagProvider({ client, config, children }) {
+  const { resolvedClient, ownsClient } = (0, import_react.useMemo)(() => {
+    if (client) {
+      return { resolvedClient: client, ownsClient: false };
+    }
+    if (!config) {
+      throw new Error("flipFeatureFlagProvider requires client or config");
+    }
+    return { resolvedClient: (0, import_js.createClient)(config), ownsClient: true };
+  }, [client, config]);
+  const [status, setStatus] = (0, import_react.useState)(resolvedClient.getStatus());
+  (0, import_react.useEffect)(() => {
+    let mounted = true;
+    const handleUpdate = () => {
+      if (mounted) {
+        setStatus(resolvedClient.getStatus());
+      }
+    };
+    resolvedClient.on("ready", handleUpdate);
+    resolvedClient.on("update", handleUpdate);
+    resolvedClient.on("error", handleUpdate);
+    void resolvedClient.start();
+    return () => {
+      mounted = false;
+      resolvedClient.off("ready", handleUpdate);
+      resolvedClient.off("update", handleUpdate);
+      resolvedClient.off("error", handleUpdate);
+      if (ownsClient) {
+        resolvedClient.stop();
+      }
+    };
+  }, [resolvedClient, ownsClient]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FlipFlagContext.Provider, { value: resolvedClient, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FlipFlagStatusContext.Provider, { value: status, children }) });
+}
+function useFlipFlagClient() {
+  const client = import_react.default.useContext(FlipFlagContext);
+  if (!client) {
+    throw new Error("useFlipFlagClient must be used within flipFeatureFlagProvider");
+  }
+  return client;
+}
+function useFlagsStatus() {
+  return import_react.default.useContext(FlipFlagStatusContext);
+}
+function useFlag(flagKey, defaultValue = false) {
+  const client = useFlipFlagClient();
+  const [value, setValue] = (0, import_react.useState)(() => client.isEnabled(flagKey, defaultValue));
+  (0, import_react.useEffect)(() => {
+    const update = () => {
+      setValue(client.isEnabled(flagKey, defaultValue));
+    };
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client, flagKey, defaultValue]);
+  return value;
+}
+function useVariant(flagKey, defaultValue = false) {
+  const client = useFlipFlagClient();
+  const [variant, setVariant] = (0, import_react.useState)(() => client.getVariant(flagKey, defaultValue));
+  (0, import_react.useEffect)(() => {
+    const update = () => {
+      setVariant(client.getVariant(flagKey, defaultValue));
+    };
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client, flagKey, defaultValue]);
+  return variant;
+}
+function useAllFlags() {
+  const client = useFlipFlagClient();
+  const [flags, setFlags] = (0, import_react.useState)(() => client.getAllFlags());
+  (0, import_react.useEffect)(() => {
+    const update = () => setFlags(client.getAllFlags());
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client]);
+  return flags;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlipFlagClient,
+  FlipFlagProvider,
+  useAllFlags,
+  useFlag,
+  useFlagsStatus,
+  useFlipFlagClient,
+  useVariant
+});

package/dist/index.mjs

@@ -0,0 +1,94 @@
+// src/index.tsx
+import React, { useEffect, useMemo, useState } from "react";
+import { createClient as createBrowserClient } from "@flipfeatureflag/js";
+import { FlipFlagClient } from "@flipfeatureflag/core";
+import { jsx } from "react/jsx-runtime";
+var FlipFlagContext = React.createContext(null);
+var FlipFlagStatusContext = React.createContext({ ready: false });
+function FlipFlagProvider({ client, config, children }) {
+  const { resolvedClient, ownsClient } = useMemo(() => {
+    if (client) {
+      return { resolvedClient: client, ownsClient: false };
+    }
+    if (!config) {
+      throw new Error("flipFeatureFlagProvider requires client or config");
+    }
+    return { resolvedClient: createBrowserClient(config), ownsClient: true };
+  }, [client, config]);
+  const [status, setStatus] = useState(resolvedClient.getStatus());
+  useEffect(() => {
+    let mounted = true;
+    const handleUpdate = () => {
+      if (mounted) {
+        setStatus(resolvedClient.getStatus());
+      }
+    };
+    resolvedClient.on("ready", handleUpdate);
+    resolvedClient.on("update", handleUpdate);
+    resolvedClient.on("error", handleUpdate);
+    void resolvedClient.start();
+    return () => {
+      mounted = false;
+      resolvedClient.off("ready", handleUpdate);
+      resolvedClient.off("update", handleUpdate);
+      resolvedClient.off("error", handleUpdate);
+      if (ownsClient) {
+        resolvedClient.stop();
+      }
+    };
+  }, [resolvedClient, ownsClient]);
+  return /* @__PURE__ */ jsx(FlipFlagContext.Provider, { value: resolvedClient, children: /* @__PURE__ */ jsx(FlipFlagStatusContext.Provider, { value: status, children }) });
+}
+function useFlipFlagClient() {
+  const client = React.useContext(FlipFlagContext);
+  if (!client) {
+    throw new Error("useFlipFlagClient must be used within flipFeatureFlagProvider");
+  }
+  return client;
+}
+function useFlagsStatus() {
+  return React.useContext(FlipFlagStatusContext);
+}
+function useFlag(flagKey, defaultValue = false) {
+  const client = useFlipFlagClient();
+  const [value, setValue] = useState(() => client.isEnabled(flagKey, defaultValue));
+  useEffect(() => {
+    const update = () => {
+      setValue(client.isEnabled(flagKey, defaultValue));
+    };
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client, flagKey, defaultValue]);
+  return value;
+}
+function useVariant(flagKey, defaultValue = false) {
+  const client = useFlipFlagClient();
+  const [variant, setVariant] = useState(() => client.getVariant(flagKey, defaultValue));
+  useEffect(() => {
+    const update = () => {
+      setVariant(client.getVariant(flagKey, defaultValue));
+    };
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client, flagKey, defaultValue]);
+  return variant;
+}
+function useAllFlags() {
+  const client = useFlipFlagClient();
+  const [flags, setFlags] = useState(() => client.getAllFlags());
+  useEffect(() => {
+    const update = () => setFlags(client.getAllFlags());
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client]);
+  return flags;
+}
+export {
+  FlipFlagClient,
+  FlipFlagProvider,
+  useAllFlags,
+  useFlag,
+  useFlagsStatus,
+  useFlipFlagClient,
+  useVariant
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@flipfeatureflag/react",
+  "version": "0.1.1",
+  "description": "flipFeatureFlag React SDK",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "dependencies": {
+    "@flipfeatureflag/core": "0.1.0",
+    "@flipfeatureflag/js": "0.1.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,115 @@
+import React, { PropsWithChildren, useEffect, useMemo, useState } from "react";
+import { FlipFlagClient, FlipFlagClientOptions, FlagsStatus, SdkFlagEvaluation } from "@flipfeatureflag/core";
+import { createClient as createBrowserClient } from "@flipfeatureflag/js";
+
+interface FlipFlagProviderProps {
+  client?: FlipFlagClient;
+  config?: FlipFlagClientOptions;
+}
+
+const FlipFlagContext = React.createContext<FlipFlagClient | null>(null);
+const FlipFlagStatusContext = React.createContext<FlagsStatus>({ ready: false });
+
+export function FlipFlagProvider({ client, config, children }: PropsWithChildren<FlipFlagProviderProps>) {
+  const { resolvedClient, ownsClient } = useMemo(() => {
+    if (client) {
+      return { resolvedClient: client, ownsClient: false };
+    }
+    if (!config) {
+      throw new Error("flipFeatureFlagProvider requires client or config");
+    }
+    return { resolvedClient: createBrowserClient(config), ownsClient: true };
+  }, [client, config]);
+
+  const [status, setStatus] = useState<FlagsStatus>(resolvedClient.getStatus());
+
+  useEffect(() => {
+    let mounted = true;
+
+    const handleUpdate = () => {
+      if (mounted) {
+        setStatus(resolvedClient.getStatus());
+      }
+    };
+
+    resolvedClient.on("ready", handleUpdate);
+    resolvedClient.on("update", handleUpdate);
+    resolvedClient.on("error", handleUpdate);
+
+    void resolvedClient.start();
+
+    return () => {
+      mounted = false;
+      resolvedClient.off("ready", handleUpdate);
+      resolvedClient.off("update", handleUpdate);
+      resolvedClient.off("error", handleUpdate);
+      if (ownsClient) {
+        resolvedClient.stop();
+      }
+    };
+  }, [resolvedClient, ownsClient]);
+
+  return (
+    <FlipFlagContext.Provider value={resolvedClient}>
+      <FlipFlagStatusContext.Provider value={status}>{children}</FlipFlagStatusContext.Provider>
+    </FlipFlagContext.Provider>
+  );
+}
+
+export function useFlipFlagClient(): FlipFlagClient {
+  const client = React.useContext(FlipFlagContext);
+  if (!client) {
+    throw new Error("useFlipFlagClient must be used within flipFeatureFlagProvider");
+  }
+  return client;
+}
+
+export function useFlagsStatus(): FlagsStatus {
+  return React.useContext(FlipFlagStatusContext);
+}
+
+export function useFlag(flagKey: string, defaultValue = false): boolean {
+  const client = useFlipFlagClient();
+  const [value, setValue] = useState(() => client.isEnabled(flagKey, defaultValue));
+
+  useEffect(() => {
+    const update = () => {
+      setValue(client.isEnabled(flagKey, defaultValue));
+    };
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client, flagKey, defaultValue]);
+
+  return value;
+}
+
+export function useVariant(flagKey: string, defaultValue: SdkFlagEvaluation["value"] = false): SdkFlagEvaluation {
+  const client = useFlipFlagClient();
+  const [variant, setVariant] = useState(() => client.getVariant(flagKey, defaultValue));
+
+  useEffect(() => {
+    const update = () => {
+      setVariant(client.getVariant(flagKey, defaultValue));
+    };
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client, flagKey, defaultValue]);
+
+  return variant;
+}
+
+export function useAllFlags(): Record<string, SdkFlagEvaluation> {
+  const client = useFlipFlagClient();
+  const [flags, setFlags] = useState(() => client.getAllFlags());
+
+  useEffect(() => {
+    const update = () => setFlags(client.getAllFlags());
+    client.on("update", update);
+    return () => client.off("update", update);
+  }, [client]);
+
+  return flags;
+}
+
+export type { FlipFlagClientOptions } from "@flipfeatureflag/core";
+export { FlipFlagClient } from "@flipfeatureflag/core";

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}