@vexillo/react-sdk 1.0.0

package/dist/index.cjs

@@ -0,0 +1,92 @@
+"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 src_exports = {};
+__export(src_exports, {
+  VexilloProvider: () => VexilloProvider,
+  useFlag: () => useFlag
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var VexilloContext = (0, import_react.createContext)(null);
+function VexilloProvider({
+  baseUrl,
+  apiKey,
+  fallbacks = {},
+  children
+}) {
+  const [flags, setFlags] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    fetch(`${baseUrl}/api/flags`, {
+      headers: { Authorization: `Bearer ${apiKey}` }
+    }).then((res) => {
+      if (!res.ok) {
+        throw new Error(
+          `Vexillo: API responded with status ${res.status} ${res.statusText}`
+        );
+      }
+      return res.json();
+    }).then((data) => {
+      if (cancelled) return;
+      const map = {};
+      for (const f of data.flags) {
+        map[f.key] = f.enabled;
+      }
+      setFlags(map);
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(
+        err instanceof Error ? err : new Error(`Vexillo: unexpected error \u2014 ${String(err)}`)
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiKey, baseUrl]);
+  if (error) throw error;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VexilloContext.Provider, { value: { flags, fallbacks }, children });
+}
+function useVexilloContext() {
+  const ctx = (0, import_react.useContext)(VexilloContext);
+  if (ctx === null) {
+    throw new Error("useFlag must be called inside a <VexilloProvider>.");
+  }
+  return ctx;
+}
+
+// src/use-flag.ts
+function useFlag(key) {
+  var _a;
+  const { flags, fallbacks } = useVexilloContext();
+  if (flags !== null && key in flags) {
+    return flags[key];
+  }
+  return (_a = fallbacks[key]) != null ? _a : false;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VexilloProvider,
+  useFlag
+});

package/dist/index.d.cts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+interface VexilloProviderProps {
+    /** Base URL of your Vexillo deployment (e.g. "https://vexillo.example.com") */
+    baseUrl: string;
+    /** SDK API key for the target environment */
+    apiKey: string;
+    /** Environment slug — stored in context for consumer reference */
+    environment: string;
+    /** Flag values used before the fetch resolves and for unknown keys */
+    fallbacks?: Record<string, boolean>;
+    children: ReactNode;
+}
+declare function VexilloProvider({ baseUrl, apiKey, fallbacks, children, }: VexilloProviderProps): ReactNode;
+
+/**
+ * Returns the current boolean value for a feature flag key.
+ *
+ * - Before the provider's fetch resolves (including SSR), returns the value
+ *   from `fallbacks`, or `false` if the key is absent.
+ * - After the fetch resolves, returns the live value from the API, falling
+ *   back to `fallbacks[key] ?? false` for keys not present in the response.
+ * - Throws if called outside a `<VexilloProvider>`.
+ */
+declare function useFlag(key: string): boolean;
+
+export { VexilloProvider, type VexilloProviderProps, useFlag };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+interface VexilloProviderProps {
+    /** Base URL of your Vexillo deployment (e.g. "https://vexillo.example.com") */
+    baseUrl: string;
+    /** SDK API key for the target environment */
+    apiKey: string;
+    /** Environment slug — stored in context for consumer reference */
+    environment: string;
+    /** Flag values used before the fetch resolves and for unknown keys */
+    fallbacks?: Record<string, boolean>;
+    children: ReactNode;
+}
+declare function VexilloProvider({ baseUrl, apiKey, fallbacks, children, }: VexilloProviderProps): ReactNode;
+
+/**
+ * Returns the current boolean value for a feature flag key.
+ *
+ * - Before the provider's fetch resolves (including SSR), returns the value
+ *   from `fallbacks`, or `false` if the key is absent.
+ * - After the fetch resolves, returns the live value from the API, falling
+ *   back to `fallbacks[key] ?? false` for keys not present in the response.
+ * - Throws if called outside a `<VexilloProvider>`.
+ */
+declare function useFlag(key: string): boolean;
+
+export { VexilloProvider, type VexilloProviderProps, useFlag };

package/dist/index.js

@@ -0,0 +1,69 @@
+// src/provider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var VexilloContext = createContext(null);
+function VexilloProvider({
+  baseUrl,
+  apiKey,
+  fallbacks = {},
+  children
+}) {
+  const [flags, setFlags] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    fetch(`${baseUrl}/api/flags`, {
+      headers: { Authorization: `Bearer ${apiKey}` }
+    }).then((res) => {
+      if (!res.ok) {
+        throw new Error(
+          `Vexillo: API responded with status ${res.status} ${res.statusText}`
+        );
+      }
+      return res.json();
+    }).then((data) => {
+      if (cancelled) return;
+      const map = {};
+      for (const f of data.flags) {
+        map[f.key] = f.enabled;
+      }
+      setFlags(map);
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(
+        err instanceof Error ? err : new Error(`Vexillo: unexpected error \u2014 ${String(err)}`)
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiKey, baseUrl]);
+  if (error) throw error;
+  return /* @__PURE__ */ jsx(VexilloContext.Provider, { value: { flags, fallbacks }, children });
+}
+function useVexilloContext() {
+  const ctx = useContext(VexilloContext);
+  if (ctx === null) {
+    throw new Error("useFlag must be called inside a <VexilloProvider>.");
+  }
+  return ctx;
+}
+
+// src/use-flag.ts
+function useFlag(key) {
+  var _a;
+  const { flags, fallbacks } = useVexilloContext();
+  if (flags !== null && key in flags) {
+    return flags[key];
+  }
+  return (_a = fallbacks[key]) != null ? _a : false;
+}
+export {
+  VexilloProvider,
+  useFlag
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@vexillo/react-sdk",
+  "version": "1.0.0",
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "jsdom": "^26",
+    "react": "^19",
+    "react-dom": "^19",
+    "tsup": "^8",
+    "typescript": "^5",
+    "vitest": "^3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}