@ttoss/react-feature-flags 0.4.11 → 0.4.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +105 -0
- package/dist/index.d.cts +39 -0
- package/dist/index.d.mts +39 -0
- package/dist/index.mjs +70 -0
- package/package.json +6 -6
- package/dist/esm/index.js +0 -73
- package/dist/index.d.ts +0 -27
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, {
|
|
3
|
+
value: 'Module'
|
|
4
|
+
});
|
|
5
|
+
//#region \0rolldown/runtime.js
|
|
6
|
+
var __create = Object.create;
|
|
7
|
+
var __defProp = Object.defineProperty;
|
|
8
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
9
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
10
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
11
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
15
|
+
key = keys[i];
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except) {
|
|
17
|
+
__defProp(to, key, {
|
|
18
|
+
get: (k => from[k]).bind(null, key),
|
|
19
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return to;
|
|
25
|
+
};
|
|
26
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
27
|
+
value: mod,
|
|
28
|
+
enumerable: true
|
|
29
|
+
}) : target, mod));
|
|
30
|
+
|
|
31
|
+
//#endregion
|
|
32
|
+
let react = require("react");
|
|
33
|
+
let react$1 = __toESM(react, 1);
|
|
34
|
+
react = __toESM(react);
|
|
35
|
+
let react_error_boundary = require("react-error-boundary");
|
|
36
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
|
|
38
|
+
//#region src/FeatureFlagsProvider.tsx
|
|
39
|
+
const FeatureFlagsContext = react.createContext({
|
|
40
|
+
features: [],
|
|
41
|
+
setFeatures: () => {}
|
|
42
|
+
});
|
|
43
|
+
const FeatureFlagsProvider = ({
|
|
44
|
+
children,
|
|
45
|
+
loadFeatures
|
|
46
|
+
}) => {
|
|
47
|
+
const [features, setFeatures] = react.useState([]);
|
|
48
|
+
react.useEffect(() => {
|
|
49
|
+
loadFeatures?.().then(features => {
|
|
50
|
+
return setFeatures(features);
|
|
51
|
+
});
|
|
52
|
+
}, [loadFeatures]);
|
|
53
|
+
return /* @__PURE__ */(0, react_jsx_runtime.jsx)(FeatureFlagsContext.Provider, {
|
|
54
|
+
value: {
|
|
55
|
+
features,
|
|
56
|
+
setFeatures
|
|
57
|
+
},
|
|
58
|
+
children
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
//#endregion
|
|
63
|
+
//#region src/useFeatureFlag.ts
|
|
64
|
+
const useFeatureFlag = name => {
|
|
65
|
+
const {
|
|
66
|
+
features
|
|
67
|
+
} = react$1.useContext(FeatureFlagsContext);
|
|
68
|
+
return features.includes(name);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
//#endregion
|
|
72
|
+
//#region src/FeatureFlag.tsx
|
|
73
|
+
const FeatureFlag = ({
|
|
74
|
+
name,
|
|
75
|
+
children,
|
|
76
|
+
fallback = null,
|
|
77
|
+
errorFallback = null
|
|
78
|
+
}) => {
|
|
79
|
+
if (!useFeatureFlag(name)) return fallback;
|
|
80
|
+
return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_error_boundary.ErrorBoundary, {
|
|
81
|
+
fallback: errorFallback,
|
|
82
|
+
children
|
|
83
|
+
});
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
//#endregion
|
|
87
|
+
//#region src/useUpdateFeatures.ts
|
|
88
|
+
/**
|
|
89
|
+
* If you want to update the feature flags on React environment
|
|
90
|
+
* (after the initial render and providers), you can use this hook.
|
|
91
|
+
*/
|
|
92
|
+
const useUpdateFeatures = () => {
|
|
93
|
+
const {
|
|
94
|
+
setFeatures
|
|
95
|
+
} = react$1.useContext(FeatureFlagsContext);
|
|
96
|
+
return {
|
|
97
|
+
updateFeatures: setFeatures
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
//#endregion
|
|
102
|
+
exports.FeatureFlag = FeatureFlag;
|
|
103
|
+
exports.FeatureFlagsProvider = FeatureFlagsProvider;
|
|
104
|
+
exports.useFeatureFlag = useFeatureFlag;
|
|
105
|
+
exports.useUpdateFeatures = useUpdateFeatures;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/FeatureFlag.d.ts
|
|
5
|
+
interface FeatureFlagProps {
|
|
6
|
+
name: FeatureFlags;
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
fallback?: React.ReactNode;
|
|
9
|
+
errorFallback?: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
declare const FeatureFlag: ({
|
|
12
|
+
name,
|
|
13
|
+
children,
|
|
14
|
+
fallback,
|
|
15
|
+
errorFallback
|
|
16
|
+
}: FeatureFlagProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region src/FeatureFlagsProvider.d.ts
|
|
19
|
+
declare const FeatureFlagsProvider: ({
|
|
20
|
+
children,
|
|
21
|
+
loadFeatures
|
|
22
|
+
}: {
|
|
23
|
+
children: React.ReactNode;
|
|
24
|
+
loadFeatures?: () => Promise<FeatureFlags[]>;
|
|
25
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
//#endregion
|
|
27
|
+
//#region src/useFeatureFlag.d.ts
|
|
28
|
+
declare const useFeatureFlag: (name: FeatureFlags) => boolean;
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/useUpdateFeatures.d.ts
|
|
31
|
+
/**
|
|
32
|
+
* If you want to update the feature flags on React environment
|
|
33
|
+
* (after the initial render and providers), you can use this hook.
|
|
34
|
+
*/
|
|
35
|
+
declare const useUpdateFeatures: () => {
|
|
36
|
+
updateFeatures: (features: FeatureFlags[]) => void;
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { FeatureFlag, FeatureFlagsProvider, useFeatureFlag, useUpdateFeatures };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/FeatureFlag.d.ts
|
|
5
|
+
interface FeatureFlagProps {
|
|
6
|
+
name: FeatureFlags;
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
fallback?: React.ReactNode;
|
|
9
|
+
errorFallback?: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
declare const FeatureFlag: ({
|
|
12
|
+
name,
|
|
13
|
+
children,
|
|
14
|
+
fallback,
|
|
15
|
+
errorFallback
|
|
16
|
+
}: FeatureFlagProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region src/FeatureFlagsProvider.d.ts
|
|
19
|
+
declare const FeatureFlagsProvider: ({
|
|
20
|
+
children,
|
|
21
|
+
loadFeatures
|
|
22
|
+
}: {
|
|
23
|
+
children: React.ReactNode;
|
|
24
|
+
loadFeatures?: () => Promise<FeatureFlags[]>;
|
|
25
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
//#endregion
|
|
27
|
+
//#region src/useFeatureFlag.d.ts
|
|
28
|
+
declare const useFeatureFlag: (name: FeatureFlags) => boolean;
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/useUpdateFeatures.d.ts
|
|
31
|
+
/**
|
|
32
|
+
* If you want to update the feature flags on React environment
|
|
33
|
+
* (after the initial render and providers), you can use this hook.
|
|
34
|
+
*/
|
|
35
|
+
declare const useUpdateFeatures: () => {
|
|
36
|
+
updateFeatures: (features: FeatureFlags[]) => void;
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { FeatureFlag, FeatureFlagsProvider, useFeatureFlag, useUpdateFeatures };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { ErrorBoundary } from "react-error-boundary";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region src/FeatureFlagsProvider.tsx
|
|
7
|
+
const FeatureFlagsContext = React.createContext({
|
|
8
|
+
features: [],
|
|
9
|
+
setFeatures: () => {}
|
|
10
|
+
});
|
|
11
|
+
const FeatureFlagsProvider = ({
|
|
12
|
+
children,
|
|
13
|
+
loadFeatures
|
|
14
|
+
}) => {
|
|
15
|
+
const [features, setFeatures] = React.useState([]);
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
loadFeatures?.().then(features => {
|
|
18
|
+
return setFeatures(features);
|
|
19
|
+
});
|
|
20
|
+
}, [loadFeatures]);
|
|
21
|
+
return /* @__PURE__ */jsx(FeatureFlagsContext.Provider, {
|
|
22
|
+
value: {
|
|
23
|
+
features,
|
|
24
|
+
setFeatures
|
|
25
|
+
},
|
|
26
|
+
children
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region src/useFeatureFlag.ts
|
|
32
|
+
const useFeatureFlag = name => {
|
|
33
|
+
const {
|
|
34
|
+
features
|
|
35
|
+
} = React.useContext(FeatureFlagsContext);
|
|
36
|
+
return features.includes(name);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
//#endregion
|
|
40
|
+
//#region src/FeatureFlag.tsx
|
|
41
|
+
const FeatureFlag = ({
|
|
42
|
+
name,
|
|
43
|
+
children,
|
|
44
|
+
fallback = null,
|
|
45
|
+
errorFallback = null
|
|
46
|
+
}) => {
|
|
47
|
+
if (!useFeatureFlag(name)) return fallback;
|
|
48
|
+
return /* @__PURE__ */jsx(ErrorBoundary, {
|
|
49
|
+
fallback: errorFallback,
|
|
50
|
+
children
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
//#endregion
|
|
55
|
+
//#region src/useUpdateFeatures.ts
|
|
56
|
+
/**
|
|
57
|
+
* If you want to update the feature flags on React environment
|
|
58
|
+
* (after the initial render and providers), you can use this hook.
|
|
59
|
+
*/
|
|
60
|
+
const useUpdateFeatures = () => {
|
|
61
|
+
const {
|
|
62
|
+
setFeatures
|
|
63
|
+
} = React.useContext(FeatureFlagsContext);
|
|
64
|
+
return {
|
|
65
|
+
updateFeatures: setFeatures
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
//#endregion
|
|
70
|
+
export { FeatureFlag, FeatureFlagsProvider, useFeatureFlag, useUpdateFeatures };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/react-feature-flags",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.13",
|
|
4
4
|
"description": "React Feature Flags",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"feature-flags",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@types/react": "^19.2.14",
|
|
34
34
|
"jest": "^30.3.0",
|
|
35
|
-
"react": "^19.2.
|
|
36
|
-
"
|
|
37
|
-
"@ttoss/
|
|
38
|
-
"@ttoss/
|
|
35
|
+
"react": "^19.2.6",
|
|
36
|
+
"tsdown": "^0.22.0",
|
|
37
|
+
"@ttoss/config": "^1.37.13",
|
|
38
|
+
"@ttoss/test-utils": "^4.2.13"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": ">=16.8.0"
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"provenance": true
|
|
46
46
|
},
|
|
47
47
|
"scripts": {
|
|
48
|
-
"build": "
|
|
48
|
+
"build": "tsdown",
|
|
49
49
|
"test": "jest --projects tests/unit"
|
|
50
50
|
}
|
|
51
51
|
}
|
package/dist/esm/index.js
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __name = (target, value) => __defProp(target, "name", {
|
|
4
|
-
value,
|
|
5
|
-
configurable: true
|
|
6
|
-
});
|
|
7
|
-
|
|
8
|
-
// src/FeatureFlag.tsx
|
|
9
|
-
import * as React3 from "react";
|
|
10
|
-
import { ErrorBoundary } from "react-error-boundary";
|
|
11
|
-
|
|
12
|
-
// src/useFeatureFlag.ts
|
|
13
|
-
import * as React2 from "react";
|
|
14
|
-
|
|
15
|
-
// src/FeatureFlagsProvider.tsx
|
|
16
|
-
import * as React from "react";
|
|
17
|
-
var FeatureFlagsContext = /* @__PURE__ */React.createContext({
|
|
18
|
-
features: [],
|
|
19
|
-
setFeatures: /* @__PURE__ */__name(() => {}, "setFeatures")
|
|
20
|
-
});
|
|
21
|
-
var FeatureFlagsProvider = /* @__PURE__ */__name(({
|
|
22
|
-
children,
|
|
23
|
-
loadFeatures
|
|
24
|
-
}) => {
|
|
25
|
-
const [features, setFeatures] = React.useState([]);
|
|
26
|
-
React.useEffect(() => {
|
|
27
|
-
loadFeatures?.().then(features2 => {
|
|
28
|
-
return setFeatures(features2);
|
|
29
|
-
});
|
|
30
|
-
}, [loadFeatures]);
|
|
31
|
-
return /* @__PURE__ */React.createElement(FeatureFlagsContext.Provider, {
|
|
32
|
-
value: {
|
|
33
|
-
features,
|
|
34
|
-
setFeatures
|
|
35
|
-
}
|
|
36
|
-
}, children);
|
|
37
|
-
}, "FeatureFlagsProvider");
|
|
38
|
-
|
|
39
|
-
// src/useFeatureFlag.ts
|
|
40
|
-
var useFeatureFlag = /* @__PURE__ */__name(name => {
|
|
41
|
-
const {
|
|
42
|
-
features
|
|
43
|
-
} = React2.useContext(FeatureFlagsContext);
|
|
44
|
-
return features.includes(name);
|
|
45
|
-
}, "useFeatureFlag");
|
|
46
|
-
|
|
47
|
-
// src/FeatureFlag.tsx
|
|
48
|
-
var FeatureFlag = /* @__PURE__ */__name(({
|
|
49
|
-
name,
|
|
50
|
-
children,
|
|
51
|
-
fallback = null,
|
|
52
|
-
errorFallback = null
|
|
53
|
-
}) => {
|
|
54
|
-
const isEnabled = useFeatureFlag(name);
|
|
55
|
-
if (!isEnabled) {
|
|
56
|
-
return fallback;
|
|
57
|
-
}
|
|
58
|
-
return /* @__PURE__ */React3.createElement(ErrorBoundary, {
|
|
59
|
-
fallback: errorFallback
|
|
60
|
-
}, children);
|
|
61
|
-
}, "FeatureFlag");
|
|
62
|
-
|
|
63
|
-
// src/useUpdateFeatures.ts
|
|
64
|
-
import * as React4 from "react";
|
|
65
|
-
var useUpdateFeatures = /* @__PURE__ */__name(() => {
|
|
66
|
-
const {
|
|
67
|
-
setFeatures
|
|
68
|
-
} = React4.useContext(FeatureFlagsContext);
|
|
69
|
-
return {
|
|
70
|
-
updateFeatures: setFeatures
|
|
71
|
-
};
|
|
72
|
-
}, "useUpdateFeatures");
|
|
73
|
-
export { FeatureFlag, FeatureFlagsProvider, useFeatureFlag, useUpdateFeatures };
|
package/dist/index.d.ts
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
interface FeatureFlagProps {
|
|
5
|
-
name: FeatureFlags;
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
fallback?: React.ReactNode;
|
|
8
|
-
errorFallback?: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
declare const FeatureFlag: ({ name, children, fallback, errorFallback, }: FeatureFlagProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
|
|
11
|
-
|
|
12
|
-
declare const FeatureFlagsProvider: ({ children, loadFeatures, }: {
|
|
13
|
-
children: React.ReactNode;
|
|
14
|
-
loadFeatures?: () => Promise<FeatureFlags[]>;
|
|
15
|
-
}) => react_jsx_runtime.JSX.Element;
|
|
16
|
-
|
|
17
|
-
declare const useFeatureFlag: (name: FeatureFlags) => boolean;
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* If you want to update the feature flags on React environment
|
|
21
|
-
* (after the initial render and providers), you can use this hook.
|
|
22
|
-
*/
|
|
23
|
-
declare const useUpdateFeatures: () => {
|
|
24
|
-
updateFeatures: (features: FeatureFlags[]) => void;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export { FeatureFlag, FeatureFlagsProvider, useFeatureFlag, useUpdateFeatures };
|