@hyphen/react-sdk 0.5.0 → 1.0.1
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.js +25 -19
- package/package.json +22 -23
- package/dist/index.cjs +0 -98
- package/dist/index.d.cts +0 -71
package/dist/index.js
CHANGED
|
@@ -1,14 +1,24 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
|
|
4
1
|
// src/index.ts
|
|
5
2
|
import { Toggle as Toggle2 } from "@hyphen/browser-sdk";
|
|
6
3
|
|
|
7
4
|
// src/toggle-provider.tsx
|
|
8
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
createContext,
|
|
7
|
+
useMemo,
|
|
8
|
+
useEffect
|
|
9
|
+
} from "react";
|
|
9
10
|
import { Toggle } from "@hyphen/browser-sdk";
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
|
12
|
+
var ToggleContext = createContext(null);
|
|
13
|
+
function ToggleProvider({
|
|
14
|
+
children,
|
|
15
|
+
publicApiKey,
|
|
16
|
+
applicationId,
|
|
17
|
+
environment,
|
|
18
|
+
defaultContext,
|
|
19
|
+
horizonUrls,
|
|
20
|
+
defaultTargetKey
|
|
21
|
+
}) {
|
|
12
22
|
const toggle = useMemo(() => {
|
|
13
23
|
return new Toggle({
|
|
14
24
|
publicApiKey,
|
|
@@ -29,38 +39,34 @@ function ToggleProvider({ children, publicApiKey, applicationId, environment, de
|
|
|
29
39
|
useEffect(() => {
|
|
30
40
|
return () => {
|
|
31
41
|
};
|
|
32
|
-
}, [
|
|
33
|
-
|
|
34
|
-
]);
|
|
35
|
-
return /* @__PURE__ */ React.createElement(ToggleContext.Provider, {
|
|
36
|
-
value: toggle
|
|
37
|
-
}, children);
|
|
42
|
+
}, [toggle]);
|
|
43
|
+
return /* @__PURE__ */ jsx(ToggleContext.Provider, { value: toggle, children });
|
|
38
44
|
}
|
|
39
|
-
__name(ToggleProvider, "ToggleProvider");
|
|
40
45
|
|
|
41
46
|
// src/use-toggle.tsx
|
|
42
47
|
import { useContext } from "react";
|
|
43
48
|
function useToggle() {
|
|
44
49
|
const toggle = useContext(ToggleContext);
|
|
45
50
|
if (!toggle) {
|
|
46
|
-
throw new Error(
|
|
51
|
+
throw new Error(
|
|
52
|
+
"useToggle must be used within a ToggleProvider. Wrap your component tree with <ToggleProvider> or use withToggleProvider()."
|
|
53
|
+
);
|
|
47
54
|
}
|
|
48
55
|
return toggle;
|
|
49
56
|
}
|
|
50
|
-
__name(useToggle, "useToggle");
|
|
51
57
|
|
|
52
58
|
// src/with-toggle-provider.tsx
|
|
59
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
53
60
|
function withToggleProvider(options) {
|
|
54
61
|
return function(Component) {
|
|
55
|
-
const WrappedComponent =
|
|
56
|
-
return /* @__PURE__ */
|
|
57
|
-
}
|
|
62
|
+
const WrappedComponent = (props) => {
|
|
63
|
+
return /* @__PURE__ */ jsx2(ToggleProvider, { ...options, children: /* @__PURE__ */ jsx2(Component, { ...props }) });
|
|
64
|
+
};
|
|
58
65
|
const componentName = Component.displayName || Component.name || "Component";
|
|
59
66
|
WrappedComponent.displayName = `withToggleProvider(${componentName})`;
|
|
60
67
|
return WrappedComponent;
|
|
61
68
|
};
|
|
62
69
|
}
|
|
63
|
-
__name(withToggleProvider, "withToggleProvider");
|
|
64
70
|
export {
|
|
65
71
|
Toggle2 as Toggle,
|
|
66
72
|
ToggleContext,
|
package/package.json
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hyphen/react-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Hyphen SDK for React",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "dist/index.cjs",
|
|
7
6
|
"module": "dist/index.js",
|
|
8
7
|
"exports": {
|
|
9
8
|
".": {
|
|
10
9
|
"import": "./dist/index.js",
|
|
11
|
-
"
|
|
10
|
+
"types": "./dist/index.d.ts"
|
|
12
11
|
}
|
|
13
12
|
},
|
|
14
13
|
"types": "dist/index.d.ts",
|
|
@@ -23,39 +22,39 @@
|
|
|
23
22
|
"author": "Team Hyphen <hello@hyphen.ai>",
|
|
24
23
|
"license": "MIT",
|
|
25
24
|
"devDependencies": {
|
|
26
|
-
"@biomejs/biome": "
|
|
27
|
-
"@faker-js/faker": "
|
|
28
|
-
"@swc/core": "
|
|
29
|
-
"@testing-library/react": "
|
|
30
|
-
"@types/node": "
|
|
31
|
-
"@types/react": "
|
|
32
|
-
"@vitest/coverage-v8": "
|
|
33
|
-
"dotenv": "
|
|
34
|
-
"
|
|
35
|
-
"react": "
|
|
36
|
-
"react-dom": "
|
|
37
|
-
"rimraf": "
|
|
38
|
-
"tsd": "
|
|
39
|
-
"tsup": "
|
|
40
|
-
"typescript": "
|
|
41
|
-
"vitest": "
|
|
25
|
+
"@biomejs/biome": "2.3.8",
|
|
26
|
+
"@faker-js/faker": "10.1.0",
|
|
27
|
+
"@swc/core": "1.15.3",
|
|
28
|
+
"@testing-library/react": "16.3.0",
|
|
29
|
+
"@types/node": "24.10.1",
|
|
30
|
+
"@types/react": "19.2.7",
|
|
31
|
+
"@vitest/coverage-v8": "4.0.15",
|
|
32
|
+
"dotenv": "17.2.3",
|
|
33
|
+
"happy-dom": "20.0.11",
|
|
34
|
+
"react": "19.2.1",
|
|
35
|
+
"react-dom": "19.2.1",
|
|
36
|
+
"rimraf": "6.1.2",
|
|
37
|
+
"tsd": "0.33.0",
|
|
38
|
+
"tsup": "8.5.1",
|
|
39
|
+
"typescript": "5.9.3",
|
|
40
|
+
"vitest": "4.0.15"
|
|
42
41
|
},
|
|
43
42
|
"files": [
|
|
44
43
|
"dist",
|
|
45
44
|
"LICENSE"
|
|
46
45
|
],
|
|
47
46
|
"dependencies": {
|
|
48
|
-
"@hyphen/browser-sdk": "
|
|
49
|
-
"hookified": "
|
|
47
|
+
"@hyphen/browser-sdk": "1.0.3",
|
|
48
|
+
"hookified": "1.13.0"
|
|
50
49
|
},
|
|
51
50
|
"peerDependencies": {
|
|
52
|
-
"react": "^18.0.0"
|
|
51
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
53
52
|
},
|
|
54
53
|
"scripts": {
|
|
55
54
|
"lint": "biome check --write --error-on-warnings",
|
|
56
55
|
"test": "pnpm lint && vitest run --coverage",
|
|
57
56
|
"test:ci": "biome check --error-on-warnings && vitest run --coverage",
|
|
58
|
-
"build": "rimraf ./dist && tsup src/index.ts --format
|
|
57
|
+
"build": "rimraf ./dist && tsup src/index.ts --format esm --dts",
|
|
59
58
|
"clean": "rimraf ./dist pnpm-lock.yaml node_modules coverage"
|
|
60
59
|
}
|
|
61
60
|
}
|
package/dist/index.cjs
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
-
|
|
21
|
-
// src/index.ts
|
|
22
|
-
var index_exports = {};
|
|
23
|
-
__export(index_exports, {
|
|
24
|
-
Toggle: () => import_browser_sdk2.Toggle,
|
|
25
|
-
ToggleContext: () => ToggleContext,
|
|
26
|
-
ToggleProvider: () => ToggleProvider,
|
|
27
|
-
useToggle: () => useToggle,
|
|
28
|
-
withToggleProvider: () => withToggleProvider
|
|
29
|
-
});
|
|
30
|
-
module.exports = __toCommonJS(index_exports);
|
|
31
|
-
var import_browser_sdk2 = require("@hyphen/browser-sdk");
|
|
32
|
-
|
|
33
|
-
// src/toggle-provider.tsx
|
|
34
|
-
var import_react = require("react");
|
|
35
|
-
var import_browser_sdk = require("@hyphen/browser-sdk");
|
|
36
|
-
var ToggleContext = /* @__PURE__ */ (0, import_react.createContext)(null);
|
|
37
|
-
function ToggleProvider({ children, publicApiKey, applicationId, environment, defaultContext, horizonUrls, defaultTargetKey }) {
|
|
38
|
-
const toggle = (0, import_react.useMemo)(() => {
|
|
39
|
-
return new import_browser_sdk.Toggle({
|
|
40
|
-
publicApiKey,
|
|
41
|
-
applicationId,
|
|
42
|
-
environment,
|
|
43
|
-
defaultContext,
|
|
44
|
-
horizonUrls,
|
|
45
|
-
defaultTargetKey
|
|
46
|
-
});
|
|
47
|
-
}, [
|
|
48
|
-
publicApiKey,
|
|
49
|
-
applicationId,
|
|
50
|
-
environment,
|
|
51
|
-
defaultContext,
|
|
52
|
-
horizonUrls,
|
|
53
|
-
defaultTargetKey
|
|
54
|
-
]);
|
|
55
|
-
(0, import_react.useEffect)(() => {
|
|
56
|
-
return () => {
|
|
57
|
-
};
|
|
58
|
-
}, [
|
|
59
|
-
toggle
|
|
60
|
-
]);
|
|
61
|
-
return /* @__PURE__ */ React.createElement(ToggleContext.Provider, {
|
|
62
|
-
value: toggle
|
|
63
|
-
}, children);
|
|
64
|
-
}
|
|
65
|
-
__name(ToggleProvider, "ToggleProvider");
|
|
66
|
-
|
|
67
|
-
// src/use-toggle.tsx
|
|
68
|
-
var import_react2 = require("react");
|
|
69
|
-
function useToggle() {
|
|
70
|
-
const toggle = (0, import_react2.useContext)(ToggleContext);
|
|
71
|
-
if (!toggle) {
|
|
72
|
-
throw new Error("useToggle must be used within a ToggleProvider. Wrap your component tree with <ToggleProvider> or use withToggleProvider().");
|
|
73
|
-
}
|
|
74
|
-
return toggle;
|
|
75
|
-
}
|
|
76
|
-
__name(useToggle, "useToggle");
|
|
77
|
-
|
|
78
|
-
// src/with-toggle-provider.tsx
|
|
79
|
-
function withToggleProvider(options) {
|
|
80
|
-
return function(Component) {
|
|
81
|
-
const WrappedComponent = /* @__PURE__ */ __name((props) => {
|
|
82
|
-
return /* @__PURE__ */ React.createElement(ToggleProvider, options, /* @__PURE__ */ React.createElement(Component, props));
|
|
83
|
-
}, "WrappedComponent");
|
|
84
|
-
const componentName = Component.displayName || Component.name || "Component";
|
|
85
|
-
WrappedComponent.displayName = `withToggleProvider(${componentName})`;
|
|
86
|
-
return WrappedComponent;
|
|
87
|
-
};
|
|
88
|
-
}
|
|
89
|
-
__name(withToggleProvider, "withToggleProvider");
|
|
90
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
91
|
-
0 && (module.exports = {
|
|
92
|
-
Toggle,
|
|
93
|
-
ToggleContext,
|
|
94
|
-
ToggleProvider,
|
|
95
|
-
useToggle,
|
|
96
|
-
withToggleProvider
|
|
97
|
-
});
|
|
98
|
-
/* v8 ignore next -- @preserve */
|
package/dist/index.d.cts
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { ToggleOptions, Toggle } from '@hyphen/browser-sdk';
|
|
2
|
-
export { Toggle, ToggleOptions } from '@hyphen/browser-sdk';
|
|
3
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
-
import { ReactNode, Context, ComponentType } from 'react';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Props for the ToggleProvider component
|
|
8
|
-
* Extends ToggleOptions from @hyphen/browser-sdk
|
|
9
|
-
*/
|
|
10
|
-
interface ToggleProviderProps extends ToggleOptions {
|
|
11
|
-
/**
|
|
12
|
-
* React children to be wrapped by the provider
|
|
13
|
-
*/
|
|
14
|
-
children: ReactNode;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* React Context for the Toggle instance
|
|
19
|
-
*/
|
|
20
|
-
declare const ToggleContext: Context<Toggle | null>;
|
|
21
|
-
/**
|
|
22
|
-
* Provider component that creates and provides a Toggle instance to the React tree
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* ```tsx
|
|
26
|
-
* <ToggleProvider publicApiKey="public_..." applicationId="my-app">
|
|
27
|
-
* <App />
|
|
28
|
-
* </ToggleProvider>
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
declare function ToggleProvider({ children, publicApiKey, applicationId, environment, defaultContext, horizonUrls, defaultTargetKey, }: ToggleProviderProps): react_jsx_runtime.JSX.Element;
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Hook to access the Toggle instance from the ToggleProvider
|
|
35
|
-
*
|
|
36
|
-
* @throws {Error} If used outside of a ToggleProvider
|
|
37
|
-
* @returns {Toggle} The Toggle instance from the provider
|
|
38
|
-
*
|
|
39
|
-
* @example
|
|
40
|
-
* ```tsx
|
|
41
|
-
* function MyComponent() {
|
|
42
|
-
* const toggle = useToggle();
|
|
43
|
-
* const isEnabled = toggle.getBoolean('my-feature', false);
|
|
44
|
-
*
|
|
45
|
-
* return <div>{isEnabled ? 'Feature enabled' : 'Feature disabled'}</div>;
|
|
46
|
-
* }
|
|
47
|
-
* ```
|
|
48
|
-
*/
|
|
49
|
-
declare function useToggle(): Toggle;
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Higher-order component that wraps a component with ToggleProvider
|
|
53
|
-
*
|
|
54
|
-
* @param options - Configuration options for the Toggle instance
|
|
55
|
-
* @returns A function that wraps a component with ToggleProvider
|
|
56
|
-
*
|
|
57
|
-
* @example
|
|
58
|
-
* ```tsx
|
|
59
|
-
* export default withToggleProvider({
|
|
60
|
-
* publicApiKey: "public_...",
|
|
61
|
-
* applicationId: "my-app",
|
|
62
|
-
* environment: "production",
|
|
63
|
-
* defaultContext: {
|
|
64
|
-
* user: { id: "user-123" }
|
|
65
|
-
* }
|
|
66
|
-
* })(App);
|
|
67
|
-
* ```
|
|
68
|
-
*/
|
|
69
|
-
declare function withToggleProvider(options: ToggleOptions): <P extends object>(Component: ComponentType<P>) => ComponentType<P>;
|
|
70
|
-
|
|
71
|
-
export { ToggleContext, ToggleProvider, type ToggleProviderProps, useToggle, withToggleProvider };
|