@devcycle/react-client-sdk - npm Package Compare versions

Comparing version 1.22.4 to 1.23.0

index.cjs.js

@@ -19,2 +19,7 @@ 'use strict';
 });
+const debugContextDefaults = {
+    showConditionalBorders: false,
+    borderColor: '#ff6347',
+};
+const debugContext = react.createContext(debugContextDefaults);
 
@@ -90,2 +95,3 @@ const initializeDevCycleClient = (sdkKey, user = { isAnonymous: true }, options) => {
 function DevCycleProvider(props) {
+    var _a, _b;
     const { config } = props;
@@ -135,5 +141,6 @@ const { user, options } = config;
     }, [sdkKey, user, options]);
+    const mergedDebugOptions = Object.assign({}, debugContextDefaults, (_b = (_a = props.config.options) === null || _a === void 0 ? void 0 : _a.reactDebug) !== null && _b !== void 0 ? _b : {});
     return (jsxRuntime.jsx(Provider, { value: { client: clientRef.current }, children: jsxRuntime.jsx(initializedContext.Provider, { value: {
                 isInitialized: isInitialized || clientRef.current.isInitialized,
-            }, children: props.children }) }));
+            }, children: jsxRuntime.jsx(debugContext.Provider, { value: mergedDebugOptions, children: props.children }) }) }));
 }
@@ -179,4 +186,54 @@ /**
 
+const RenderIfEnabled = (props) => {
+    let targetValue;
+    let defaultValue;
+    if ('targetValue' in props) {
+        targetValue = props.targetValue;
+        defaultValue = props.defaultValue;
+    }
+    else {
+        targetValue = true;
+        defaultValue = false;
+    }
+    const variableValue = useVariableValue(props.variableKey, defaultValue);
+    const debugSettings = react.useContext(debugContext);
+    if (variableValue === targetValue) {
+        if (debugSettings.showConditionalBorders) {
+            return (jsxRuntime.jsxs("div", { style: {
+                    border: `2px solid ${debugSettings.borderColor}`,
+                    position: 'relative',
+                }, className: `devcycle-conditional-border devcycle-conditional-border-${props.variableKey}`, children: [jsxRuntime.jsxs("a", { style: {
+                            position: 'absolute',
+                            cursor: 'pointer',
+                            right: '-2px',
+                            top: '-2.5rem',
+                            color: 'white',
+                            fontSize: '1.5rem',
+                            padding: '2px 5px',
+                            backgroundColor: `${debugSettings.borderColor}`,
+                        }, target: '_blank', href: `https://app.devcycle.com/r/variables/${props.variableKey}`, rel: "noreferrer", children: [props.variableKey, ": ", JSON.stringify(variableValue)] }), props.children] }));
+        }
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
+    }
+    return null;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const SwapComponents = (OldComponent, NewComponent, variableKey) => {
+    const DevCycleConditionalComponent = (props) => {
+        const variableValue = useVariableValue(variableKey, false);
+        if (variableValue) {
+            return jsxRuntime.jsx(NewComponent, { ...props });
+        }
+        else {
+            return jsxRuntime.jsx(OldComponent, { ...props });
+        }
+    };
+    return DevCycleConditionalComponent;
+};
+
 exports.DVCProvider = DVCProvider;
 exports.DevCycleProvider = DevCycleProvider;
+exports.RenderIfEnabled = RenderIfEnabled;
+exports.SwapComponents = SwapComponents;
 exports.asyncWithDVCProvider = asyncWithDVCProvider;
@@ -183,0 +240,0 @@ exports.useDVCClient = useDVCClient;

index.esm.js

@@ -1,2 +0,2 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
@@ -11,2 +11,7 @@ import { initializeDevCycle } from '@devcycle/js-client-sdk';
 });
+const debugContextDefaults = {
+    showConditionalBorders: false,
+    borderColor: '#ff6347',
+};
+const debugContext = createContext(debugContextDefaults);
 
@@ -82,2 +87,3 @@ const initializeDevCycleClient = (sdkKey, user = { isAnonymous: true }, options) => {
 function DevCycleProvider(props) {
+    var _a, _b;
     const { config } = props;
@@ -127,5 +133,6 @@ const { user, options } = config;
     }, [sdkKey, user, options]);
+    const mergedDebugOptions = Object.assign({}, debugContextDefaults, (_b = (_a = props.config.options) === null || _a === void 0 ? void 0 : _a.reactDebug) !== null && _b !== void 0 ? _b : {});
     return (jsx(Provider, { value: { client: clientRef.current }, children: jsx(initializedContext.Provider, { value: {
                 isInitialized: isInitialized || clientRef.current.isInitialized,
-            }, children: props.children }) }));
+            }, children: jsx(debugContext.Provider, { value: mergedDebugOptions, children: props.children }) }) }));
 }
@@ -171,2 +178,50 @@ /**
 
-export { DVCProvider, DevCycleProvider, asyncWithDVCProvider, useDVCClient, useDVCVariable, useDevCycleClient, useIsDVCInitialized, useIsDevCycleInitialized, useVariable, useVariableValue, withDVCProvider, withDevCycleProvider };
+const RenderIfEnabled = (props) => {
+    let targetValue;
+    let defaultValue;
+    if ('targetValue' in props) {
+        targetValue = props.targetValue;
+        defaultValue = props.defaultValue;
+    }
+    else {
+        targetValue = true;
+        defaultValue = false;
+    }
+    const variableValue = useVariableValue(props.variableKey, defaultValue);
+    const debugSettings = useContext(debugContext);
+    if (variableValue === targetValue) {
+        if (debugSettings.showConditionalBorders) {
+            return (jsxs("div", { style: {
+                    border: `2px solid ${debugSettings.borderColor}`,
+                    position: 'relative',
+                }, className: `devcycle-conditional-border devcycle-conditional-border-${props.variableKey}`, children: [jsxs("a", { style: {
+                            position: 'absolute',
+                            cursor: 'pointer',
+                            right: '-2px',
+                            top: '-2.5rem',
+                            color: 'white',
+                            fontSize: '1.5rem',
+                            padding: '2px 5px',
+                            backgroundColor: `${debugSettings.borderColor}`,
+                        }, target: '_blank', href: `https://app.devcycle.com/r/variables/${props.variableKey}`, rel: "noreferrer", children: [props.variableKey, ": ", JSON.stringify(variableValue)] }), props.children] }));
+        }
+        return jsx(Fragment, { children: props.children });
+    }
+    return null;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const SwapComponents = (OldComponent, NewComponent, variableKey) => {
+    const DevCycleConditionalComponent = (props) => {
+        const variableValue = useVariableValue(variableKey, false);
+        if (variableValue) {
+            return jsx(NewComponent, { ...props });
+        }
+        else {
+            return jsx(OldComponent, { ...props });
+        }
+    };
+    return DevCycleConditionalComponent;
+};
+
+export { DVCProvider, DevCycleProvider, RenderIfEnabled, SwapComponents, asyncWithDVCProvider, useDVCClient, useDVCVariable, useDevCycleClient, useIsDVCInitialized, useIsDevCycleInitialized, useVariable, useVariableValue, withDVCProvider, withDevCycleProvider };

package.json

 {
   "name": "@devcycle/react-client-sdk",
-  "version": "1.22.4",
+  "version": "1.23.0",
   "description": "The DevCycle React SDK used for feature management.",
@@ -30,4 +30,4 @@ "author": "DevCycle <[e-mail]>",
   "dependencies": {
-    "@devcycle/js-client-sdk": "^1.24.4",
-    "@devcycle/types": "^1.12.3",
+    "@devcycle/js-client-sdk": "^1.25.0",
+    "@devcycle/types": "^1.13.0",
     "hoist-non-react-statics": "^3.3.2"
@@ -34,0 +34,0 @@ },

src/context.d.ts

@@ -15,1 +15,7 @@ /// <reference types="react" />
 export declare const initializedContext: import("react").Context<InitializedContext>;
+export type DebugContext = {
+    showConditionalBorders: boolean;
+    borderColor: string;
+};
+export declare const debugContextDefaults: DebugContext;
+export declare const debugContext: import("react").Context<DebugContext>;

src/index.d.ts

@@ -10,2 +10,4 @@ import asyncWithDVCProvider from './asyncDVCProvider';
 export type { DevCycleClient, DVCClient, DevCycleUser, DVCUser, DVCVariableValue, DVCVariable, DevCycleEvent, DevCycleOptions, DVCEvent, } from '@devcycle/js-client-sdk';
+export * from './RenderIfEnabled';
+export * from './SwapComponents';
 export { DevCycleProvider, DVCProvider, useDevCycleClient, useDVCClient, useVariable, useVariableValue, useDVCVariable, asyncWithDVCProvider, withDevCycleProvider, withDVCProvider, useIsDevCycleInitialized, useIsDVCInitialized, };

src/types.d.ts

@@ -8,6 +8,18 @@ import type { DevCycleOptions, DevCycleUser } from '@devcycle/js-client-sdk';
 };
+type OptionsWithDebug = DevCycleOptions & {
+    reactDebug?: {
+        /**
+         * Show borders around components that are conditionally rendered using the RenderIf helper
+         */
+        showConditionalBorders?: boolean;
+        /**
+         * Hex color string for the border color to show around conditional components
+         */
+        borderColor?: string;
+    };
+};
 export type ProviderConfig = (WithSDKKey | WithEnvironmentKey) & {
     user?: DevCycleUser;
-    options?: DevCycleOptions;
+    options?: OptionsWithDebug;
 };
 export {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26276

increased by32.75%

Number of package files

22

increased by10%

Lines of code

610

increased by30.34%

Dependency changes

• Updated@devcycle/js-client-sdk@^1.25.0

• Updated@devcycle/types@^1.13.0