@altertable/altertable-react 0.4.0 → 0.5.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/LICENSE +21 -0
- package/README.md +275 -0
- package/dist/index.d.mts +13 -9
- package/dist/index.d.ts +13 -9
- package/dist/index.js +2 -89
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -57
- package/dist/index.mjs.map +1 -1
- package/package.json +24 -43
- package/dist/index.global.js +0 -1674
- package/dist/index.global.js.map +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-present Altertable
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
# @altertable/altertable-react
|
|
2
|
+
|
|
3
|
+
React SDK for capturing and sending analytics events to Altertable with type-safe funnel tracking.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @altertable/altertable-js @altertable/altertable-react
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @altertable/altertable-js @altertable/altertable-react
|
|
11
|
+
# or
|
|
12
|
+
yarn add @altertable/altertable-js @altertable/altertable-react
|
|
13
|
+
# or
|
|
14
|
+
bun add @altertable/altertable-js @altertable/altertable-react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick Start
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import {
|
|
21
|
+
AltertableProvider,
|
|
22
|
+
useAltertable,
|
|
23
|
+
} from '@altertable/altertable-react';
|
|
24
|
+
import { altertable } from '@altertable/altertable-js';
|
|
25
|
+
|
|
26
|
+
// Initialize the core SDK
|
|
27
|
+
altertable.init('YOUR_API_KEY');
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<AltertableProvider client={altertable}>
|
|
32
|
+
<SignupPage />
|
|
33
|
+
</AltertableProvider>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function SignupPage() {
|
|
38
|
+
const { track } = useAltertable();
|
|
39
|
+
|
|
40
|
+
function handleStart() {
|
|
41
|
+
track('Signup Started', { source: 'homepage' });
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function handleSubmit(email: string) {
|
|
45
|
+
track('Signup Submitted', { email });
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<div>
|
|
50
|
+
<button onClick={() => handleStart()}>Start Signup</button>
|
|
51
|
+
<button onClick={() => handleSubmit('john.doe@example.com')}>
|
|
52
|
+
Submit
|
|
53
|
+
</button>
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
> [!NOTE]
|
|
60
|
+
>
|
|
61
|
+
> For **server-side rendering** (SSR), initialize in a [`useEffect()`](https://react.dev/reference/react/useEffect):
|
|
62
|
+
>
|
|
63
|
+
> ```tsx
|
|
64
|
+
> import { useEffect } from 'react';
|
|
65
|
+
> import { altertable } from '@altertable/altertable-js';
|
|
66
|
+
> import { AltertableProvider } from '@altertable/altertable-react';
|
|
67
|
+
>
|
|
68
|
+
> function App() {
|
|
69
|
+
> useEffect(() => {
|
|
70
|
+
> altertable.init('YOUR_API_KEY');
|
|
71
|
+
> }, []);
|
|
72
|
+
>
|
|
73
|
+
> return (
|
|
74
|
+
> <AltertableProvider client={altertable}>
|
|
75
|
+
> <SignupPage />
|
|
76
|
+
> </AltertableProvider>
|
|
77
|
+
> );
|
|
78
|
+
> }
|
|
79
|
+
> ```
|
|
80
|
+
|
|
81
|
+
## Features
|
|
82
|
+
|
|
83
|
+
- **Automatic page view tracking** – Captures page views automatically
|
|
84
|
+
- **Session management** – Handles visitor and session IDs automatically
|
|
85
|
+
- **Event queuing** – Queues events when offline or consent is pending
|
|
86
|
+
- **Privacy compliance** – Built-in tracking consent management
|
|
87
|
+
- **Multiple storage options** – localStorage, cookies, or both
|
|
88
|
+
- **Type-safe funnel tracking** – Define funnel steps with TypeScript for compile-time safety
|
|
89
|
+
- **React Hooks** – Easy-to-use Hooks for tracking events and managing funnels
|
|
90
|
+
- **Context provider** – Share Altertable instance across your React component tree
|
|
91
|
+
- **Zero dependencies** – Only depends on React and the core Altertable SDK
|
|
92
|
+
|
|
93
|
+
## API Reference
|
|
94
|
+
|
|
95
|
+
### Components
|
|
96
|
+
|
|
97
|
+
#### `<AltertableProvider>`
|
|
98
|
+
|
|
99
|
+
Provides the Altertable client to the React component tree.
|
|
100
|
+
|
|
101
|
+
**Props:**
|
|
102
|
+
|
|
103
|
+
| Parameter | Type | Required | Description |
|
|
104
|
+
| ---------- | ----------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
105
|
+
| `client` | [`Altertable`](https://github.com/altertable-ai/altertable-js/blob/main/packages/altertable-js/README.md#api-reference) | Yes | The Altertable client instance (see core SDK [API Reference](https://github.com/altertable-ai/altertable-js/blob/main/packages/altertable-js/README.md#api-reference)) |
|
|
106
|
+
| `children` | `ReactNode` | Yes | React children |
|
|
107
|
+
|
|
108
|
+
**Example:**
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import { AltertableProvider } from '@altertable/altertable-react';
|
|
112
|
+
import { altertable } from '@altertable/altertable-js';
|
|
113
|
+
|
|
114
|
+
altertable.init('YOUR_API_KEY');
|
|
115
|
+
|
|
116
|
+
function App() {
|
|
117
|
+
return (
|
|
118
|
+
<AltertableProvider client={altertable}>
|
|
119
|
+
<YourApp />
|
|
120
|
+
</AltertableProvider>
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Hooks
|
|
126
|
+
|
|
127
|
+
#### `useAltertable<TFunnelMapping>()`
|
|
128
|
+
|
|
129
|
+
Returns an object with tracking methods and funnel utilities.
|
|
130
|
+
|
|
131
|
+
**Type Parameters:**
|
|
132
|
+
|
|
133
|
+
| Parameter | Type | Required | Description |
|
|
134
|
+
| ---------------- | --------------------------------- | -------- | ------------------------------------------------------ |
|
|
135
|
+
| `TFunnelMapping` | [`FunnelMapping`](#funnelmapping) | No | Type mapping of funnel names to their step definitions |
|
|
136
|
+
|
|
137
|
+
**Returns:**
|
|
138
|
+
|
|
139
|
+
| Property | Type | Description |
|
|
140
|
+
| -------------------- | ---------------------------------------------------------------- | --------------------------- |
|
|
141
|
+
| `track` | `(event: string, properties?: EventProperties) => void` | Track a custom event |
|
|
142
|
+
| `identify` | `(userId: string, traits?: UserTraits) => void` | Identify a user |
|
|
143
|
+
| `updateTraits` | `(traits: UserTraits) => void` | Update user traits |
|
|
144
|
+
| `configure` | `(updates: Partial<AltertableConfig>) => void` | Update configuration |
|
|
145
|
+
| `getTrackingConsent` | `() => TrackingConsentType` | Get current consent state |
|
|
146
|
+
| `useFunnel` | `(funnelName: keyof TFunnelMapping) => { track: FunnelTracker }` | Get funnel-specific tracker |
|
|
147
|
+
|
|
148
|
+
**Example:**
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
function MyComponent() {
|
|
152
|
+
const { track, identify, useFunnel } = useAltertable<MyFunnelMapping>();
|
|
153
|
+
|
|
154
|
+
function handleClick() {
|
|
155
|
+
track('Button Clicked', { button: 'signup' });
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function handleLogin(userId: string) {
|
|
159
|
+
identify(userId, { email: 'user@example.com' });
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
return <button onClick={handleClick}>Click me</button>;
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
#### `useFunnel(funnelName)`
|
|
167
|
+
|
|
168
|
+
Returns a type-safe tracker for a specific funnel.
|
|
169
|
+
|
|
170
|
+
**Parameters:**
|
|
171
|
+
|
|
172
|
+
| Parameter | Type | Required | Description |
|
|
173
|
+
| ------------ | ---------------------- | -------- | ------------------------------- |
|
|
174
|
+
| `funnelName` | `keyof TFunnelMapping` | Yes | The name of the funnel to track |
|
|
175
|
+
|
|
176
|
+
**Returns:**
|
|
177
|
+
|
|
178
|
+
| Property | Type | Description |
|
|
179
|
+
| -------- | ----------------------------------------------------------------------- | ----------------------------- |
|
|
180
|
+
| `track` | `(stepName: FunnelStepName, properties?: FunnelStepProperties) => void` | Type-safe funnel step tracker |
|
|
181
|
+
|
|
182
|
+
**Example:**
|
|
183
|
+
|
|
184
|
+
```tsx
|
|
185
|
+
type SignupFunnelMapping = {
|
|
186
|
+
signup: [
|
|
187
|
+
{ name: 'signup_started'; properties: { source: string } },
|
|
188
|
+
{ name: 'signup_completed'; properties: { userId: string } },
|
|
189
|
+
];
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
function SignupPage() {
|
|
193
|
+
const { useFunnel } = useAltertable<SignupFunnelMapping>();
|
|
194
|
+
const { track } = useFunnel('signup');
|
|
195
|
+
|
|
196
|
+
function handleStart() {
|
|
197
|
+
track('Signup Started', { source: 'homepage' });
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
function handleComplete(userId: string) {
|
|
201
|
+
track('Signup Completed', { userId });
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
return (
|
|
205
|
+
<div>
|
|
206
|
+
<button onClick={() => handleStart()}>Start</button>
|
|
207
|
+
<button onClick={() => handleComplete('user123')}>Complete</button>
|
|
208
|
+
</div>
|
|
209
|
+
);
|
|
210
|
+
}
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
## Types
|
|
214
|
+
|
|
215
|
+
### `AltertableConfig`
|
|
216
|
+
|
|
217
|
+
Configuration options for the Altertable SDK. See the [core SDK documentation](https://github.com/altertable-ai/altertable-js/blob/main/packages/altertable-js/README.md#altertableconfig) for full details.
|
|
218
|
+
|
|
219
|
+
### `FunnelMapping`
|
|
220
|
+
|
|
221
|
+
Type mapping of funnel names to their step definitions.
|
|
222
|
+
|
|
223
|
+
```typescript
|
|
224
|
+
type FunnelMapping = Record<FunnelName, readonly FunnelStep[]>;
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
**Example:**
|
|
228
|
+
|
|
229
|
+
```typescript
|
|
230
|
+
import { type FunnelMapping } from '@altertable/altertable-react';
|
|
231
|
+
|
|
232
|
+
type MyFunnelMapping = {
|
|
233
|
+
signup: [
|
|
234
|
+
{ name: 'signup_started'; properties: { source: string } },
|
|
235
|
+
{ name: 'signup_completed'; properties: { userId: string } },
|
|
236
|
+
];
|
|
237
|
+
checkout: [
|
|
238
|
+
{ name: 'cart_viewed'; properties: { itemCount: number } },
|
|
239
|
+
{
|
|
240
|
+
name: 'purchase_completed';
|
|
241
|
+
properties: { orderId: string; amount: number };
|
|
242
|
+
},
|
|
243
|
+
];
|
|
244
|
+
} as const satisfies FunnelMapping;
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
### `FunnelStep`
|
|
248
|
+
|
|
249
|
+
Definition of a single funnel step.
|
|
250
|
+
|
|
251
|
+
```typescript
|
|
252
|
+
type FunnelStep = {
|
|
253
|
+
name: string;
|
|
254
|
+
properties?: FunnelStepProperties;
|
|
255
|
+
};
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
| Property | Type | Required | Description |
|
|
259
|
+
| ------------ | ---------------------- | -------- | --------------------------------- |
|
|
260
|
+
| `name` | `string` | Yes | The name of the funnel step |
|
|
261
|
+
| `properties` | `FunnelStepProperties` | No | Expected properties for this step |
|
|
262
|
+
|
|
263
|
+
### `FunnelTracker`
|
|
264
|
+
|
|
265
|
+
Type-safe tracker for a specific funnel.
|
|
266
|
+
|
|
267
|
+
```typescript
|
|
268
|
+
type FunnelTracker = {
|
|
269
|
+
track: (stepName: FunnelStepName, properties?: FunnelStepProperties) => void;
|
|
270
|
+
};
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
## License
|
|
274
|
+
|
|
275
|
+
[MIT](./LICENSE)
|
package/dist/index.d.mts
CHANGED
|
@@ -7,22 +7,26 @@ interface AltertableProviderProps {
|
|
|
7
7
|
}
|
|
8
8
|
declare function AltertableProvider({ client, children, }: AltertableProviderProps): React.JSX.Element;
|
|
9
9
|
|
|
10
|
+
type FunnelName = string;
|
|
10
11
|
type FunnelStep = {
|
|
11
|
-
name:
|
|
12
|
-
properties
|
|
12
|
+
name: FunnelName;
|
|
13
|
+
properties?: Record<string, any>;
|
|
13
14
|
};
|
|
14
|
-
type
|
|
15
|
-
type FunnelStepProperties<T extends readonly FunnelStep[], N extends
|
|
15
|
+
type FunnelStepName<T extends readonly FunnelStep[]> = T[number]['name'];
|
|
16
|
+
type FunnelStepProperties<T extends readonly FunnelStep[], N extends FunnelStepName<T>> = Extract<T[number], {
|
|
16
17
|
name: N;
|
|
17
18
|
}>['properties'];
|
|
18
|
-
type FunnelMapping = Record<
|
|
19
|
+
type FunnelMapping = Record<FunnelName, readonly FunnelStep[]>;
|
|
19
20
|
|
|
20
21
|
declare function useAltertable<T extends FunnelMapping>(): {
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
configure: any;
|
|
23
|
+
getTrackingConsent: any;
|
|
24
|
+
identify: any;
|
|
25
|
+
track: <Steps extends T[keyof T] = T[keyof T]>(eventName: FunnelStepName<Steps>, properties?: FunnelStepProperties<Steps, typeof eventName>) => void;
|
|
26
|
+
updateTraits: any;
|
|
23
27
|
useFunnel: <FunnelName extends keyof T>(_funnelName: FunnelName) => {
|
|
24
|
-
track: (
|
|
28
|
+
track: (eventName: FunnelStepName<T[FunnelName]>, properties?: FunnelStepProperties<T[FunnelName], FunnelStepName<T[FunnelName]>>) => void;
|
|
25
29
|
};
|
|
26
30
|
};
|
|
27
31
|
|
|
28
|
-
export { AltertableProvider, type FunnelMapping, type FunnelStep, type
|
|
32
|
+
export { AltertableProvider, type FunnelMapping, type FunnelStep, type FunnelStepName, type FunnelStepProperties, useAltertable };
|
package/dist/index.d.ts
CHANGED
|
@@ -7,22 +7,26 @@ interface AltertableProviderProps {
|
|
|
7
7
|
}
|
|
8
8
|
declare function AltertableProvider({ client, children, }: AltertableProviderProps): React.JSX.Element;
|
|
9
9
|
|
|
10
|
+
type FunnelName = string;
|
|
10
11
|
type FunnelStep = {
|
|
11
|
-
name:
|
|
12
|
-
properties
|
|
12
|
+
name: FunnelName;
|
|
13
|
+
properties?: Record<string, any>;
|
|
13
14
|
};
|
|
14
|
-
type
|
|
15
|
-
type FunnelStepProperties<T extends readonly FunnelStep[], N extends
|
|
15
|
+
type FunnelStepName<T extends readonly FunnelStep[]> = T[number]['name'];
|
|
16
|
+
type FunnelStepProperties<T extends readonly FunnelStep[], N extends FunnelStepName<T>> = Extract<T[number], {
|
|
16
17
|
name: N;
|
|
17
18
|
}>['properties'];
|
|
18
|
-
type FunnelMapping = Record<
|
|
19
|
+
type FunnelMapping = Record<FunnelName, readonly FunnelStep[]>;
|
|
19
20
|
|
|
20
21
|
declare function useAltertable<T extends FunnelMapping>(): {
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
configure: any;
|
|
23
|
+
getTrackingConsent: any;
|
|
24
|
+
identify: any;
|
|
25
|
+
track: <Steps extends T[keyof T] = T[keyof T]>(eventName: FunnelStepName<Steps>, properties?: FunnelStepProperties<Steps, typeof eventName>) => void;
|
|
26
|
+
updateTraits: any;
|
|
23
27
|
useFunnel: <FunnelName extends keyof T>(_funnelName: FunnelName) => {
|
|
24
|
-
track: (
|
|
28
|
+
track: (eventName: FunnelStepName<T[FunnelName]>, properties?: FunnelStepProperties<T[FunnelName], FunnelStepName<T[FunnelName]>>) => void;
|
|
25
29
|
};
|
|
26
30
|
};
|
|
27
31
|
|
|
28
|
-
export { AltertableProvider, type FunnelMapping, type FunnelStep, type
|
|
32
|
+
export { AltertableProvider, type FunnelMapping, type FunnelStep, type FunnelStepName, type FunnelStepProperties, useAltertable };
|
package/dist/index.js
CHANGED
|
@@ -1,90 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
var
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
-
|
|
29
|
-
// src/index.ts
|
|
30
|
-
var index_exports = {};
|
|
31
|
-
__export(index_exports, {
|
|
32
|
-
AltertableProvider: () => AltertableProvider,
|
|
33
|
-
useAltertable: () => useAltertable
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(index_exports);
|
|
36
|
-
|
|
37
|
-
// src/AltertableProvider.tsx
|
|
38
|
-
var import_altertable_js = require("@altertable/altertable-js");
|
|
39
|
-
var import_react = __toESM(require("react"));
|
|
40
|
-
var AltertableContext = (0, import_react.createContext)(import_altertable_js.altertable);
|
|
41
|
-
AltertableContext.displayName = "AltertableContext";
|
|
42
|
-
function AltertableProvider({
|
|
43
|
-
client,
|
|
44
|
-
children
|
|
45
|
-
}) {
|
|
46
|
-
return /* @__PURE__ */ import_react.default.createElement(AltertableContext.Provider, { value: client }, children);
|
|
47
|
-
}
|
|
48
|
-
function useAltertableContext() {
|
|
49
|
-
return (0, import_react.useContext)(AltertableContext);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// src/useAltertable.ts
|
|
53
|
-
var import_react2 = require("react");
|
|
54
|
-
|
|
55
|
-
// src/constants.ts
|
|
56
|
-
var PROPERTY_LIB = "$lib";
|
|
57
|
-
var PROPERTY_LIB_VERSION = "$lib_version";
|
|
58
|
-
|
|
59
|
-
// src/useAltertable.ts
|
|
60
|
-
function useAltertable() {
|
|
61
|
-
const altertable2 = useAltertableContext();
|
|
62
|
-
const track = (0, import_react2.useCallback)(
|
|
63
|
-
(step, properties) => {
|
|
64
|
-
altertable2.track(step, {
|
|
65
|
-
...properties,
|
|
66
|
-
// The React library needs to override the lib properties coming from
|
|
67
|
-
// the core library
|
|
68
|
-
[PROPERTY_LIB]: "@altertable/altertable-react",
|
|
69
|
-
[PROPERTY_LIB_VERSION]: "0.4.0"
|
|
70
|
-
});
|
|
71
|
-
},
|
|
72
|
-
[altertable2]
|
|
73
|
-
);
|
|
74
|
-
const useFunnel = (0, import_react2.useCallback)(
|
|
75
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
76
|
-
(_funnelName) => ({
|
|
77
|
-
track
|
|
78
|
-
}),
|
|
79
|
-
[track]
|
|
80
|
-
);
|
|
81
|
-
return (0, import_react2.useMemo)(
|
|
82
|
-
() => ({
|
|
83
|
-
identify: altertable2.identify,
|
|
84
|
-
track,
|
|
85
|
-
useFunnel
|
|
86
|
-
}),
|
|
87
|
-
[altertable2, track, useFunnel]
|
|
88
|
-
);
|
|
89
|
-
}
|
|
1
|
+
/*! @altertable/altertable-react 0.5.1 | MIT License | Altertable | https://github.com/altertable-ai/altertable-js */
|
|
2
|
+
var x=Object.create;var i=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},s=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of _(t))!A.call(e,n)&&n!==r&&i(e,n,{get:()=>t[n],enumerable:!(l=P(t,n))||l.enumerable});return e};var R=(e,t,r)=>(r=e!=null?x(T(e)):{},s(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),y=e=>s(i({},"__esModule",{value:!0}),e);var C={};N(C,{AltertableProvider:()=>m,useAltertable:()=>d});module.exports=y(C);var u=require("@altertable/altertable-js"),o=R(require("react")),p=(0,o.createContext)(u.altertable);p.displayName="AltertableContext";function m({client:e,children:t}){return o.default.createElement(p.Provider,{value:e},t)}function b(){return(0,o.useContext)(p)}var a=require("react");var c="$lib",f="$lib_version";function d(){let e=b(),t=(0,a.useCallback)((l,n={})=>{e.track(l,{...n,[c]:"@altertable/altertable-react",[f]:"0.5.1"})},[e]),r=(0,a.useCallback)(l=>({track:t}),[t]);return(0,a.useMemo)(()=>({configure:e.configure.bind(e),getTrackingConsent:e.getTrackingConsent.bind(e),identify:e.identify.bind(e),track:t,updateTraits:e.updateTraits.bind(e),useFunnel:r}),[e,t,r])}
|
|
90
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/AltertableProvider.tsx","../src/useAltertable.ts","../src/constants.ts"],"sourcesContent":["export { AltertableProvider } from './AltertableProvider';\nexport
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/AltertableProvider.tsx","../src/useAltertable.ts","../src/constants.ts"],"sourcesContent":["export { AltertableProvider } from './AltertableProvider';\nexport type * from './types';\nexport { useAltertable } from './useAltertable';\n","import { type Altertable, altertable } from '@altertable/altertable-js';\nimport React, { createContext, type ReactNode, useContext } from 'react';\n\nconst AltertableContext = createContext<Altertable>(altertable);\nAltertableContext.displayName = 'AltertableContext';\n\ninterface AltertableProviderProps {\n client: Altertable;\n children: ReactNode;\n}\n\nexport function AltertableProvider({\n client,\n children,\n}: AltertableProviderProps) {\n return (\n <AltertableContext.Provider value={client}>\n {children}\n </AltertableContext.Provider>\n );\n}\n\nexport function useAltertableContext() {\n return useContext(AltertableContext);\n}\n","import { useCallback, useMemo } from 'react';\n\nimport { useAltertableContext } from './AltertableProvider';\nimport { PROPERTY_LIB, PROPERTY_LIB_VERSION } from './constants';\nimport { FunnelMapping, FunnelStepName, FunnelStepProperties } from './types';\n\nexport function useAltertable<T extends FunnelMapping>() {\n const altertable = useAltertableContext();\n\n const track = useCallback(\n <Steps extends T[keyof T] = T[keyof T]>(\n eventName: FunnelStepName<Steps>,\n properties: FunnelStepProperties<Steps, typeof eventName> = {}\n ) => {\n altertable.track(eventName, {\n ...properties,\n // The React library needs to override the lib properties coming from\n // the core library\n [PROPERTY_LIB]: __LIB__,\n [PROPERTY_LIB_VERSION]: __LIB_VERSION__,\n });\n },\n [altertable]\n );\n\n const useFunnel = useCallback(\n <FunnelName extends keyof T>(_funnelName: FunnelName) => ({\n track: track<T[FunnelName]>,\n }),\n [track]\n );\n\n return useMemo(\n () => ({\n configure: altertable.configure.bind(altertable),\n getTrackingConsent: altertable.getTrackingConsent.bind(altertable),\n identify: altertable.identify.bind(altertable),\n track,\n updateTraits: altertable.updateTraits.bind(altertable),\n useFunnel,\n }),\n [altertable, track, useFunnel]\n );\n}\n","export const PROPERTY_LIB = '$lib';\nexport const PROPERTY_LIB_VERSION = '$lib_version';\n"],"mappings":";6iBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,EAAA,kBAAAC,IAAA,eAAAC,EAAAJ,GCAA,IAAAK,EAA4C,qCAC5CC,EAAiE,oBAE3DC,KAAoB,iBAA0B,YAAU,EAC9DA,EAAkB,YAAc,oBAOzB,SAASC,EAAmB,CACjC,OAAAC,EACA,SAAAC,CACF,EAA4B,CAC1B,OACE,EAAAC,QAAA,cAACJ,EAAkB,SAAlB,CAA2B,MAAOE,GAChCC,CACH,CAEJ,CAEO,SAASE,GAAuB,CACrC,SAAO,cAAWL,CAAiB,CACrC,CCxBA,IAAAM,EAAqC,iBCA9B,IAAMC,EAAe,OACfC,EAAuB,eDK7B,SAASC,GAAyC,CACvD,IAAMC,EAAaC,EAAqB,EAElCC,KAAQ,eACZ,CACEC,EACAC,EAA4D,CAAC,IAC1D,CACHJ,EAAW,MAAMG,EAAW,CAC1B,GAAGC,EAGH,CAACC,CAAY,EAAG,+BAChB,CAACC,CAAoB,EAAG,OAC1B,CAAC,CACH,EACA,CAACN,CAAU,CACb,EAEMO,KAAY,eACaC,IAA6B,CACxD,MAAON,CACT,GACA,CAACA,CAAK,CACR,EAEA,SAAO,WACL,KAAO,CACL,UAAWF,EAAW,UAAU,KAAKA,CAAU,EAC/C,mBAAoBA,EAAW,mBAAmB,KAAKA,CAAU,EACjE,SAAUA,EAAW,SAAS,KAAKA,CAAU,EAC7C,MAAAE,EACA,aAAcF,EAAW,aAAa,KAAKA,CAAU,EACrD,UAAAO,CACF,GACA,CAACP,EAAYE,EAAOK,CAAS,CAC/B,CACF","names":["index_exports","__export","AltertableProvider","useAltertable","__toCommonJS","import_altertable_js","import_react","AltertableContext","AltertableProvider","client","children","React","useAltertableContext","import_react","PROPERTY_LIB","PROPERTY_LIB_VERSION","useAltertable","altertable","useAltertableContext","track","eventName","properties","PROPERTY_LIB","PROPERTY_LIB_VERSION","useFunnel","_funnelName"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,58 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import React, { createContext, useContext } from "react";
|
|
4
|
-
var AltertableContext = createContext(altertable);
|
|
5
|
-
AltertableContext.displayName = "AltertableContext";
|
|
6
|
-
function AltertableProvider({
|
|
7
|
-
client,
|
|
8
|
-
children
|
|
9
|
-
}) {
|
|
10
|
-
return /* @__PURE__ */ React.createElement(AltertableContext.Provider, { value: client }, children);
|
|
11
|
-
}
|
|
12
|
-
function useAltertableContext() {
|
|
13
|
-
return useContext(AltertableContext);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// src/useAltertable.ts
|
|
17
|
-
import { useCallback, useMemo } from "react";
|
|
18
|
-
|
|
19
|
-
// src/constants.ts
|
|
20
|
-
var PROPERTY_LIB = "$lib";
|
|
21
|
-
var PROPERTY_LIB_VERSION = "$lib_version";
|
|
22
|
-
|
|
23
|
-
// src/useAltertable.ts
|
|
24
|
-
function useAltertable() {
|
|
25
|
-
const altertable2 = useAltertableContext();
|
|
26
|
-
const track = useCallback(
|
|
27
|
-
(step, properties) => {
|
|
28
|
-
altertable2.track(step, {
|
|
29
|
-
...properties,
|
|
30
|
-
// The React library needs to override the lib properties coming from
|
|
31
|
-
// the core library
|
|
32
|
-
[PROPERTY_LIB]: "@altertable/altertable-react",
|
|
33
|
-
[PROPERTY_LIB_VERSION]: "0.4.0"
|
|
34
|
-
});
|
|
35
|
-
},
|
|
36
|
-
[altertable2]
|
|
37
|
-
);
|
|
38
|
-
const useFunnel = useCallback(
|
|
39
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
40
|
-
(_funnelName) => ({
|
|
41
|
-
track
|
|
42
|
-
}),
|
|
43
|
-
[track]
|
|
44
|
-
);
|
|
45
|
-
return useMemo(
|
|
46
|
-
() => ({
|
|
47
|
-
identify: altertable2.identify,
|
|
48
|
-
track,
|
|
49
|
-
useFunnel
|
|
50
|
-
}),
|
|
51
|
-
[altertable2, track, useFunnel]
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
export {
|
|
55
|
-
AltertableProvider,
|
|
56
|
-
useAltertable
|
|
57
|
-
};
|
|
1
|
+
/*! @altertable/altertable-react 0.5.1 | MIT License | Altertable | https://github.com/altertable-ai/altertable-js */
|
|
2
|
+
import{altertable as u}from"@altertable/altertable-js";import m,{createContext as b,useContext as c}from"react";var r=b(u);r.displayName="AltertableContext";function f({client:e,children:t}){return m.createElement(r.Provider,{value:e},t)}function l(){return c(r)}import{useCallback as p,useMemo as d}from"react";var a="$lib",i="$lib_version";function x(){let e=l(),t=p((o,s={})=>{e.track(o,{...s,[a]:"@altertable/altertable-react",[i]:"0.5.1"})},[e]),n=p(o=>({track:t}),[t]);return d(()=>({configure:e.configure.bind(e),getTrackingConsent:e.getTrackingConsent.bind(e),identify:e.identify.bind(e),track:t,updateTraits:e.updateTraits.bind(e),useFunnel:n}),[e,t,n])}export{f as AltertableProvider,x as useAltertable};
|
|
58
3
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AltertableProvider.tsx","../src/useAltertable.ts","../src/constants.ts"],"sourcesContent":["import { type Altertable, altertable } from '@altertable/altertable-js';\nimport React, { createContext,
|
|
1
|
+
{"version":3,"sources":["../src/AltertableProvider.tsx","../src/useAltertable.ts","../src/constants.ts"],"sourcesContent":["import { type Altertable, altertable } from '@altertable/altertable-js';\nimport React, { createContext, type ReactNode, useContext } from 'react';\n\nconst AltertableContext = createContext<Altertable>(altertable);\nAltertableContext.displayName = 'AltertableContext';\n\ninterface AltertableProviderProps {\n client: Altertable;\n children: ReactNode;\n}\n\nexport function AltertableProvider({\n client,\n children,\n}: AltertableProviderProps) {\n return (\n <AltertableContext.Provider value={client}>\n {children}\n </AltertableContext.Provider>\n );\n}\n\nexport function useAltertableContext() {\n return useContext(AltertableContext);\n}\n","import { useCallback, useMemo } from 'react';\n\nimport { useAltertableContext } from './AltertableProvider';\nimport { PROPERTY_LIB, PROPERTY_LIB_VERSION } from './constants';\nimport { FunnelMapping, FunnelStepName, FunnelStepProperties } from './types';\n\nexport function useAltertable<T extends FunnelMapping>() {\n const altertable = useAltertableContext();\n\n const track = useCallback(\n <Steps extends T[keyof T] = T[keyof T]>(\n eventName: FunnelStepName<Steps>,\n properties: FunnelStepProperties<Steps, typeof eventName> = {}\n ) => {\n altertable.track(eventName, {\n ...properties,\n // The React library needs to override the lib properties coming from\n // the core library\n [PROPERTY_LIB]: __LIB__,\n [PROPERTY_LIB_VERSION]: __LIB_VERSION__,\n });\n },\n [altertable]\n );\n\n const useFunnel = useCallback(\n <FunnelName extends keyof T>(_funnelName: FunnelName) => ({\n track: track<T[FunnelName]>,\n }),\n [track]\n );\n\n return useMemo(\n () => ({\n configure: altertable.configure.bind(altertable),\n getTrackingConsent: altertable.getTrackingConsent.bind(altertable),\n identify: altertable.identify.bind(altertable),\n track,\n updateTraits: altertable.updateTraits.bind(altertable),\n useFunnel,\n }),\n [altertable, track, useFunnel]\n );\n}\n","export const PROPERTY_LIB = '$lib';\nexport const PROPERTY_LIB_VERSION = '$lib_version';\n"],"mappings":";AAAA,OAA0B,cAAAA,MAAkB,4BAC5C,OAAOC,GAAS,iBAAAC,EAA+B,cAAAC,MAAkB,QAEjE,IAAMC,EAAoBF,EAA0BF,CAAU,EAC9DI,EAAkB,YAAc,oBAOzB,SAASC,EAAmB,CACjC,OAAAC,EACA,SAAAC,CACF,EAA4B,CAC1B,OACEN,EAAA,cAACG,EAAkB,SAAlB,CAA2B,MAAOE,GAChCC,CACH,CAEJ,CAEO,SAASC,GAAuB,CACrC,OAAOL,EAAWC,CAAiB,CACrC,CCxBA,OAAS,eAAAK,EAAa,WAAAC,MAAe,QCA9B,IAAMC,EAAe,OACfC,EAAuB,eDK7B,SAASC,GAAyC,CACvD,IAAMC,EAAaC,EAAqB,EAElCC,EAAQC,EACZ,CACEC,EACAC,EAA4D,CAAC,IAC1D,CACHL,EAAW,MAAMI,EAAW,CAC1B,GAAGC,EAGH,CAACC,CAAY,EAAG,+BAChB,CAACC,CAAoB,EAAG,OAC1B,CAAC,CACH,EACA,CAACP,CAAU,CACb,EAEMQ,EAAYL,EACaM,IAA6B,CACxD,MAAOP,CACT,GACA,CAACA,CAAK,CACR,EAEA,OAAOQ,EACL,KAAO,CACL,UAAWV,EAAW,UAAU,KAAKA,CAAU,EAC/C,mBAAoBA,EAAW,mBAAmB,KAAKA,CAAU,EACjE,SAAUA,EAAW,SAAS,KAAKA,CAAU,EAC7C,MAAAE,EACA,aAAcF,EAAW,aAAa,KAAKA,CAAU,EACrD,UAAAQ,CACF,GACA,CAACR,EAAYE,EAAOM,CAAS,CAC/B,CACF","names":["altertable","React","createContext","useContext","AltertableContext","AltertableProvider","client","children","useAltertableContext","useCallback","useMemo","PROPERTY_LIB","PROPERTY_LIB_VERSION","useAltertable","altertable","useAltertableContext","track","useCallback","eventName","properties","PROPERTY_LIB","PROPERTY_LIB_VERSION","useFunnel","_funnelName","useMemo"]}
|
package/package.json
CHANGED
|
@@ -1,65 +1,46 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@altertable/altertable-react",
|
|
3
|
-
"version": "0.4.0",
|
|
4
3
|
"description": "React SDK to capture and send events to Altertable.",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
4
|
+
"version": "0.5.1",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"homepage": "https://github.com/altertable-ai/altertable-js",
|
|
7
|
+
"repository": "altertable-ai/altertable-js",
|
|
8
|
+
"author": {
|
|
9
|
+
"name": "Altertable",
|
|
10
|
+
"url": "https://altertable.ai"
|
|
11
|
+
},
|
|
10
12
|
"keywords": [
|
|
11
13
|
"analytics",
|
|
12
14
|
"track",
|
|
13
|
-
"react",
|
|
14
15
|
"altertable"
|
|
15
16
|
],
|
|
16
|
-
"scripts": {
|
|
17
|
-
"dev": "rollup -c --configPlugin typescript --watch",
|
|
18
|
-
"clean": "rm -rf dist",
|
|
19
|
-
"lint": "eslint src --ext ts",
|
|
20
|
-
"build": "tsup",
|
|
21
|
-
"test": "vitest --environment=jsdom --watch=false",
|
|
22
|
-
"test:watch": "vitest --environment=jsdom"
|
|
23
|
-
},
|
|
24
17
|
"files": [
|
|
25
18
|
"dist"
|
|
26
19
|
],
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
"sideEffects": false,
|
|
21
|
+
"main": "dist/index.js",
|
|
22
|
+
"module": "dist/index.mjs",
|
|
23
|
+
"typings": "dist/index.d.ts",
|
|
24
|
+
"scripts": {
|
|
25
|
+
"dev": "tsup --watch --env.mode development",
|
|
26
|
+
"build": "tsup --env.mode production",
|
|
27
|
+
"clean": "rm -rf dist",
|
|
28
|
+
"typecheck": "tsc --noEmit",
|
|
29
|
+
"lint": "eslint src --ext ts",
|
|
30
|
+
"lint:fix": "bun run lint --fix",
|
|
31
|
+
"test": "vitest",
|
|
32
|
+
"test:watch": "vitest --watch"
|
|
30
33
|
},
|
|
31
|
-
"author": "Altertable AI Team",
|
|
32
|
-
"license": "MIT",
|
|
33
|
-
"homepage": "https://github.com/altertable-ai/altertable-js#readme",
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@altertable/altertable-js": "^0.
|
|
38
|
+
"@altertable/altertable-js": "^0.5.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@testing-library/
|
|
42
|
-
"@testing-library/react": "^16.2.0",
|
|
43
|
-
"@types/node": "^22.13.0",
|
|
41
|
+
"@testing-library/react": "^16.3.0",
|
|
44
42
|
"@types/react": "^19.0.8",
|
|
45
|
-
"@typescript-eslint/eslint-plugin": "^8.22.0",
|
|
46
|
-
"@typescript-eslint/parser": "^8.22.0",
|
|
47
|
-
"eslint": "^8.57.0",
|
|
48
|
-
"eslint-config-love": "^84.0.0",
|
|
49
|
-
"eslint-config-prettier": "^10.0.1",
|
|
50
|
-
"eslint-plugin-import": "^2.29.1",
|
|
51
|
-
"eslint-plugin-n": "^17.15.1",
|
|
52
|
-
"eslint-plugin-prettier": "^5.2.1",
|
|
53
|
-
"eslint-plugin-promise": "^7.2.1",
|
|
54
|
-
"jsdom": "^26.0.0",
|
|
55
|
-
"lint-staged": "^15.2.2",
|
|
56
|
-
"prettier": "3.5.0",
|
|
57
43
|
"react": "^19.0.0",
|
|
58
|
-
"react-dom": "^19.0.0"
|
|
59
|
-
"ts-node": "^10.9.2",
|
|
60
|
-
"tslib": "^2.6.2",
|
|
61
|
-
"tsup": "^8.3.6",
|
|
62
|
-
"typescript": "^5.7.3",
|
|
63
|
-
"vitest": "^3.0.4"
|
|
44
|
+
"react-dom": "^19.0.0"
|
|
64
45
|
}
|
|
65
46
|
}
|