@mergedapp/feature-flags 0.1.0

package/dist/react.js

@@ -0,0 +1,213 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/react/provider.tsx
+import { createContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+var FeatureFlagContext = /* @__PURE__ */ createContext(null);
+function createFeatureFlagLoadState(params) {
+  return {
+    status: params.status,
+    isLoading: params.status === "loading",
+    isReady: params.status === "ready",
+    error: params.error ?? params.runtimeStatus.lastError,
+    source: params.runtimeStatus.source,
+    isStale: params.runtimeStatus.isStale,
+    lastSuccessfulRefreshAt: params.runtimeStatus.lastSuccessfulRefreshAt,
+    tokenExpiresAt: params.runtimeStatus.tokenExpiresAt
+  };
+}
+__name(createFeatureFlagLoadState, "createFeatureFlagLoadState");
+function shouldRenderFeatureFlagLoadingFallback(params) {
+  return params.blockUntilReady && params.loadState.isLoading;
+}
+__name(shouldRenderFeatureFlagLoadingFallback, "shouldRenderFeatureFlagLoadingFallback");
+function createSnapshotStore(params) {
+  let cachedFlags = params.initialFlags ?? params.client.getSnapshot();
+  let hasObservedClientUpdate = false;
+  function areSnapshotsEqual(left, right) {
+    if (left.length !== right.length) {
+      return false;
+    }
+    for (let index = 0; index < left.length; index++) {
+      const leftFlag = left[index];
+      const rightFlag = right[index];
+      if (leftFlag?.id !== rightFlag?.id || leftFlag?.name !== rightFlag?.name || leftFlag?.type !== rightFlag?.type || leftFlag?.teamId !== rightFlag?.teamId || leftFlag?.enabled !== rightFlag?.enabled || JSON.stringify(leftFlag?.value) !== JSON.stringify(rightFlag?.value)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  __name(areSnapshotsEqual, "areSnapshotsEqual");
+  return {
+    subscribe(onStoreChange) {
+      return params.client.subscribe(() => {
+        hasObservedClientUpdate = true;
+        onStoreChange();
+      });
+    },
+    getSnapshot() {
+      const current = params.client.getSnapshot();
+      const shouldAdoptClientSnapshot = current.length > 0 || !params.initialFlags || hasObservedClientUpdate;
+      if (shouldAdoptClientSnapshot && !areSnapshotsEqual(current, cachedFlags)) {
+        cachedFlags = current;
+      }
+      return cachedFlags;
+    },
+    getServerSnapshot() {
+      return params.initialFlags ?? [];
+    }
+  };
+}
+__name(createSnapshotStore, "createSnapshotStore");
+function FeatureFlagProvider(props) {
+  const { client, blockUntilReady, loadingFallback, initialFlags, children } = props;
+  const [status, setStatus] = useState(initialFlags ? "ready" : "loading");
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let isDisposed = false;
+    setStatus(initialFlags ? "ready" : "loading");
+    setError(null);
+    client.initialize().then(() => {
+      if (isDisposed) {
+        return;
+      }
+      setStatus("ready");
+    }).catch((initializationError) => {
+      if (isDisposed) {
+        return;
+      }
+      setStatus("error");
+      setError(initializationError instanceof Error ? initializationError : new Error("Unknown feature flag initialization error."));
+    });
+    return () => {
+      isDisposed = true;
+      client.destroy();
+    };
+  }, [
+    client,
+    initialFlags
+  ]);
+  const snapshotStore = useMemo(() => createSnapshotStore({
+    client,
+    initialFlags
+  }), [
+    client,
+    initialFlags
+  ]);
+  const flags = useSyncExternalStore(snapshotStore.subscribe, snapshotStore.getSnapshot, snapshotStore.getServerSnapshot);
+  const runtimeStatus = useSyncExternalStore(client.subscribe, client.getStatus.bind(client), client.getStatus.bind(client));
+  const loadState = useMemo(() => createFeatureFlagLoadState({
+    status,
+    error,
+    runtimeStatus
+  }), [
+    error,
+    runtimeStatus,
+    status
+  ]);
+  const value = useMemo(() => ({
+    client,
+    flags,
+    loadState
+  }), [
+    client,
+    flags,
+    loadState
+  ]);
+  if (shouldRenderFeatureFlagLoadingFallback({
+    blockUntilReady,
+    loadState
+  })) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, loadingFallback ?? null);
+  }
+  return /* @__PURE__ */ React.createElement(FeatureFlagContext.Provider, {
+    value
+  }, children);
+}
+__name(FeatureFlagProvider, "FeatureFlagProvider");
+
+// src/react/hooks.ts
+import { useContext } from "react";
+function useFeatureFlagContext() {
+  const context = useContext(FeatureFlagContext);
+  if (!context) {
+    throw new Error("Feature flag hooks and components must be used within a <FeatureFlagProvider>.");
+  }
+  return context;
+}
+__name(useFeatureFlagContext, "useFeatureFlagContext");
+function resolveFlagFromContext(params) {
+  return params.flags.find((flag) => flag.id === params.idOrName || flag.name === params.idOrName) ?? params.client.getFlag(params.idOrName);
+}
+__name(resolveFlagFromContext, "resolveFlagFromContext");
+function useFeatureFlagStatus() {
+  const { loadState } = useFeatureFlagContext();
+  return loadState;
+}
+__name(useFeatureFlagStatus, "useFeatureFlagStatus");
+function createTypedHooks() {
+  function TypedFeatureFlagProvider(props) {
+    return FeatureFlagProvider(props);
+  }
+  __name(TypedFeatureFlagProvider, "TypedFeatureFlagProvider");
+  function typedUseFeatureFlag(name) {
+    const { client, flags } = useFeatureFlagContext();
+    const flag = resolveFlagFromContext({
+      client,
+      flags,
+      idOrName: name
+    });
+    return {
+      enabled: flag?.enabled ?? false,
+      value: flag?.value
+    };
+  }
+  __name(typedUseFeatureFlag, "typedUseFeatureFlag");
+  function typedUseFeatureFlags() {
+    const { flags } = useFeatureFlagContext();
+    return flags;
+  }
+  __name(typedUseFeatureFlags, "typedUseFeatureFlags");
+  function typedUseFeatureFlagClient() {
+    const { client } = useFeatureFlagContext();
+    return client;
+  }
+  __name(typedUseFeatureFlagClient, "typedUseFeatureFlagClient");
+  function typedUseFeatureFlagStatus() {
+    return useFeatureFlagStatus();
+  }
+  __name(typedUseFeatureFlagStatus, "typedUseFeatureFlagStatus");
+  const TypedFeatureFlag = /* @__PURE__ */ __name((props) => {
+    const { children, fallback, loading, matchValue, name } = props;
+    const status = typedUseFeatureFlagStatus();
+    const { enabled, value } = typedUseFeatureFlag(name);
+    if (status.isLoading) {
+      return loading ?? fallback ?? null;
+    }
+    const shouldRenderChildren = typeof matchValue === "undefined" ? enabled : Object.is(value, matchValue);
+    if (!shouldRenderChildren) {
+      return fallback ?? null;
+    }
+    if (typeof children === "function") {
+      return children({
+        enabled,
+        value,
+        status
+      });
+    }
+    return children;
+  }, "TypedFeatureFlag");
+  return {
+    FeatureFlagProvider: TypedFeatureFlagProvider,
+    FeatureFlag: TypedFeatureFlag,
+    useFeatureFlag: typedUseFeatureFlag,
+    useFeatureFlags: typedUseFeatureFlags,
+    useFeatureFlagClient: typedUseFeatureFlagClient,
+    useFeatureFlagStatus: typedUseFeatureFlagStatus
+  };
+}
+__name(createTypedHooks, "createTypedHooks");
+export {
+  FeatureFlagProvider,
+  createTypedHooks
+};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@mergedapp/feature-flags",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Type-safe client SDK for Merged feature flags with ES256 JWT verification",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lubeorg/lube-monorepo",
+    "directory": "packages/feature-flags-sdk"
+  },
+  "homepage": "https://github.com/lubeorg/lube-monorepo/tree/main/packages/feature-flags-sdk",
+  "bugs": {
+    "url": "https://github.com/lubeorg/lube-monorepo/issues"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "merged-ff": "./dist/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "jose": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@repo/types-v2": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^3.0.5"
+  }
+}