humanbehavior-js 0.5.16 → 0.5.17
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/README.md +86 -37
- package/package.json +8 -11
- package/packages/browser/dist/cdn.d.ts +8 -0
- package/packages/browser/dist/cdn.d.ts.map +1 -0
- package/packages/browser/dist/cdn.js +2 -0
- package/packages/browser/dist/cdn.js.map +1 -0
- package/packages/browser/dist/index.js +12099 -1
- package/packages/browser/dist/index.js.map +1 -1
- package/packages/browser/dist/index.min.js +2 -0
- package/packages/browser/dist/index.min.js.map +1 -0
- package/packages/browser/dist/index.mjs +12080 -1
- package/packages/browser/dist/index.mjs.map +1 -1
- package/packages/browser/dist/index.umd.js +12113 -0
- package/packages/browser/dist/index.umd.js.map +1 -0
- package/packages/browser/dist/module.cjs.d.ts +10 -0
- package/packages/browser/dist/module.cjs.d.ts.map +1 -0
- package/packages/browser/dist/module.es.d.ts +10 -0
- package/packages/browser/dist/module.es.d.ts.map +1 -0
- package/packages/browser/dist/module.js +2 -0
- package/packages/browser/dist/module.js.map +1 -0
package/README.md
CHANGED
|
@@ -2,38 +2,78 @@
|
|
|
2
2
|
|
|
3
3
|
This is the modular version of the HumanBehavior JavaScript SDK, organized into separate packages for better maintainability and tree-shaking.
|
|
4
4
|
|
|
5
|
+
## Quick Start
|
|
6
|
+
|
|
7
|
+
### Simple Installation (Recommended)
|
|
8
|
+
|
|
9
|
+
The easiest way to get started is with the main package:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install humanbehavior-js
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
This gives you everything you need to start recording user sessions and events. The package automatically includes:
|
|
16
|
+
- Core session recording functionality
|
|
17
|
+
- Automatic event tracking
|
|
18
|
+
- User identification
|
|
19
|
+
- Data redaction
|
|
20
|
+
- Session persistence
|
|
21
|
+
|
|
22
|
+
### Basic Usage
|
|
23
|
+
|
|
24
|
+
```javascript
|
|
25
|
+
import { HumanBehaviorTracker } from 'humanbehavior-js';
|
|
26
|
+
|
|
27
|
+
const tracker = HumanBehaviorTracker.init('your-api-key');
|
|
28
|
+
tracker.start();
|
|
29
|
+
```
|
|
30
|
+
|
|
5
31
|
## Package Structure
|
|
6
32
|
|
|
7
|
-
###
|
|
33
|
+
### Main Package
|
|
8
34
|
|
|
9
|
-
-
|
|
10
|
-
- **`humanbehavior-js`** - Main browser SDK (re-exports from core)
|
|
35
|
+
- **`humanbehavior-js`** - Complete SDK with all features (recommended for most users)
|
|
11
36
|
|
|
12
|
-
### Framework Integrations
|
|
37
|
+
### Framework Integrations (Optional)
|
|
13
38
|
|
|
14
|
-
|
|
15
|
-
- **`@humanbehavior/vue`** - Vue.js plugin
|
|
16
|
-
- **`@humanbehavior/svelte`** - Svelte integration
|
|
17
|
-
- **`@humanbehavior/remix`** - Remix.js integration
|
|
18
|
-
- **`@humanbehavior/angular`** - Angular integration
|
|
39
|
+
These packages provide framework-specific optimizations and are **completely optional**:
|
|
19
40
|
|
|
20
|
-
|
|
41
|
+
- **`@humanbehavior/react`** - React hooks and context (or use `humanbehavior-js/react`)
|
|
42
|
+
- **`@humanbehavior/vue`** - Vue.js plugin (or use `humanbehavior-js/vue`)
|
|
43
|
+
- **`@humanbehavior/svelte`** - Svelte integration (or use `humanbehavior-js/svelte`)
|
|
44
|
+
- **`@humanbehavior/remix`** - Remix.js integration (or use `humanbehavior-js/remix`)
|
|
45
|
+
- **`@humanbehavior/angular`** - Angular integration (or use `humanbehavior-js/angular`)
|
|
21
46
|
|
|
22
|
-
|
|
47
|
+
### Advanced Packages
|
|
23
48
|
|
|
24
|
-
|
|
49
|
+
- **`@humanbehavior/core`** - Core SDK functionality (for advanced users)
|
|
50
|
+
- **`@humanbehavior/wizard`** - Installation wizard and CLI tools
|
|
25
51
|
|
|
26
|
-
|
|
27
|
-
- **`@humanbehavior-tooling/rollup-utils`** - Shared Rollup build utilities
|
|
52
|
+
## Installation Options
|
|
28
53
|
|
|
29
|
-
|
|
54
|
+
### Option 1: Single Package (Simplest)
|
|
30
55
|
|
|
31
|
-
### Main SDK
|
|
32
56
|
```bash
|
|
33
57
|
npm install humanbehavior-js
|
|
34
58
|
```
|
|
35
59
|
|
|
36
|
-
|
|
60
|
+
Then import framework features as needed:
|
|
61
|
+
|
|
62
|
+
```javascript
|
|
63
|
+
// Core functionality
|
|
64
|
+
import { HumanBehaviorTracker } from 'humanbehavior-js';
|
|
65
|
+
|
|
66
|
+
// React features (if needed)
|
|
67
|
+
import { useHumanBehavior } from 'humanbehavior-js/react';
|
|
68
|
+
|
|
69
|
+
// Vue features (if needed)
|
|
70
|
+
import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Option 2: Framework-Specific Packages
|
|
74
|
+
|
|
75
|
+
If you prefer separate packages for better tree-shaking:
|
|
76
|
+
|
|
37
77
|
```bash
|
|
38
78
|
# React
|
|
39
79
|
npm install @humanbehavior/react
|
|
@@ -51,9 +91,10 @@ npm install @humanbehavior/remix
|
|
|
51
91
|
npm install @humanbehavior/angular
|
|
52
92
|
```
|
|
53
93
|
|
|
54
|
-
## Usage
|
|
94
|
+
## Usage Examples
|
|
95
|
+
|
|
96
|
+
### Basic Usage (Vanilla JS)
|
|
55
97
|
|
|
56
|
-
### Basic Usage (Browser)
|
|
57
98
|
```javascript
|
|
58
99
|
import { HumanBehaviorTracker } from 'humanbehavior-js';
|
|
59
100
|
|
|
@@ -62,22 +103,26 @@ tracker.start();
|
|
|
62
103
|
```
|
|
63
104
|
|
|
64
105
|
### React Integration
|
|
106
|
+
|
|
65
107
|
```jsx
|
|
66
|
-
import {
|
|
67
|
-
|
|
68
|
-
function
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
108
|
+
import { useHumanBehavior } from 'humanbehavior-js/react';
|
|
109
|
+
|
|
110
|
+
function MyComponent() {
|
|
111
|
+
const tracker = useHumanBehavior();
|
|
112
|
+
|
|
113
|
+
const handleClick = () => {
|
|
114
|
+
tracker.customEvent('button_clicked');
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
return <button onClick={handleClick}>Click me</button>;
|
|
74
118
|
}
|
|
75
119
|
```
|
|
76
120
|
|
|
77
121
|
### Vue Integration
|
|
122
|
+
|
|
78
123
|
```javascript
|
|
79
124
|
import { createApp } from 'vue';
|
|
80
|
-
import { HumanBehaviorPlugin } from '
|
|
125
|
+
import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';
|
|
81
126
|
|
|
82
127
|
const app = createApp(App);
|
|
83
128
|
app.use(HumanBehaviorPlugin, {
|
|
@@ -86,8 +131,9 @@ app.use(HumanBehaviorPlugin, {
|
|
|
86
131
|
```
|
|
87
132
|
|
|
88
133
|
### Svelte Integration
|
|
134
|
+
|
|
89
135
|
```javascript
|
|
90
|
-
import { humanBehaviorStore } from '
|
|
136
|
+
import { humanBehaviorStore } from 'humanbehavior-js/svelte';
|
|
91
137
|
|
|
92
138
|
const tracker = humanBehaviorStore.init('your-api-key');
|
|
93
139
|
```
|
|
@@ -118,11 +164,13 @@ npm run dev
|
|
|
118
164
|
|
|
119
165
|
This modular structure provides several benefits:
|
|
120
166
|
|
|
121
|
-
1. **
|
|
122
|
-
2. **
|
|
123
|
-
3. **
|
|
124
|
-
4. **
|
|
125
|
-
5. **
|
|
167
|
+
1. **Simple Start**: Install just `humanbehavior-js` and everything works
|
|
168
|
+
2. **Progressive Enhancement**: Add framework-specific features as needed
|
|
169
|
+
3. **Tree-shaking**: Only import what you need
|
|
170
|
+
4. **Framework-specific optimizations**: Each framework package is optimized for its target
|
|
171
|
+
5. **Better maintainability**: Clear separation of concerns
|
|
172
|
+
6. **Reduced bundle size**: Smaller packages for specific use cases
|
|
173
|
+
7. **Easier testing**: Isolated packages are easier to test
|
|
126
174
|
|
|
127
175
|
## Migration from v1
|
|
128
176
|
|
|
@@ -132,10 +180,11 @@ The API remains the same, but the import paths have changed:
|
|
|
132
180
|
// Old
|
|
133
181
|
import { HumanBehaviorTracker } from 'humanbehavior-js';
|
|
134
182
|
|
|
135
|
-
// New
|
|
183
|
+
// New - Same as before!
|
|
136
184
|
import { HumanBehaviorTracker } from 'humanbehavior-js';
|
|
137
|
-
|
|
138
|
-
|
|
185
|
+
|
|
186
|
+
// Or for framework-specific features
|
|
187
|
+
import { useHumanBehavior } from 'humanbehavior-js/react';
|
|
139
188
|
```
|
|
140
189
|
|
|
141
190
|
## Contributing
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "humanbehavior-js",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.17",
|
|
4
4
|
"description": "SDK for HumanBehavior session and event recording",
|
|
5
5
|
"private": false,
|
|
6
6
|
"packageManager": "npm@10.0.0",
|
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
"browser": "packages/browser/dist/index.min.js",
|
|
13
13
|
"module": "packages/browser/dist/index.mjs",
|
|
14
14
|
"types": "packages/browser/dist/index.d.ts",
|
|
15
|
+
"unpkg": "packages/browser/dist/index.min.js",
|
|
16
|
+
"jsdelivr": "packages/browser/dist/index.min.js",
|
|
15
17
|
"files": [
|
|
16
18
|
"packages/browser/dist",
|
|
17
19
|
"packages/react/dist",
|
|
@@ -56,21 +58,11 @@
|
|
|
56
58
|
"require": "./packages/browser/dist/index.js",
|
|
57
59
|
"types": "./packages/browser/dist/index.d.ts"
|
|
58
60
|
},
|
|
59
|
-
"./core": {
|
|
60
|
-
"import": "./packages/core/dist/index.mjs",
|
|
61
|
-
"require": "./packages/core/dist/index.js",
|
|
62
|
-
"types": "./packages/core/dist/index.d.ts"
|
|
63
|
-
},
|
|
64
61
|
"./react": {
|
|
65
62
|
"import": "./packages/react/dist/index.mjs",
|
|
66
63
|
"require": "./packages/react/dist/index.js",
|
|
67
64
|
"types": "./packages/react/dist/index.d.ts"
|
|
68
65
|
},
|
|
69
|
-
"./react/index": {
|
|
70
|
-
"import": "./packages/react/dist/index.mjs",
|
|
71
|
-
"require": "./packages/react/dist/index.js",
|
|
72
|
-
"types": "./packages/react/dist/index.d.ts"
|
|
73
|
-
},
|
|
74
66
|
"./vue": {
|
|
75
67
|
"import": "./packages/vue/dist/index.mjs",
|
|
76
68
|
"require": "./packages/vue/dist/index.js",
|
|
@@ -91,6 +83,11 @@
|
|
|
91
83
|
"require": "./packages/angular/dist/index.js",
|
|
92
84
|
"types": "./packages/angular/dist/index.d.ts"
|
|
93
85
|
},
|
|
86
|
+
"./core": {
|
|
87
|
+
"import": "./packages/core/dist/index.mjs",
|
|
88
|
+
"require": "./packages/core/dist/index.js",
|
|
89
|
+
"types": "./packages/core/dist/index.d.ts"
|
|
90
|
+
},
|
|
94
91
|
"./wizard": {
|
|
95
92
|
"import": "./packages/wizard/dist/index.mjs",
|
|
96
93
|
"require": "./packages/wizard/dist/index.js",
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CDN entry point for HumanBehavior SDK
|
|
3
|
+
* This file is specifically designed for IIFE builds used in CDN/script tags
|
|
4
|
+
*/
|
|
5
|
+
import { HumanBehaviorTracker } from '@humanbehavior/core';
|
|
6
|
+
export { HumanBehaviorTracker };
|
|
7
|
+
export default HumanBehaviorTracker;
|
|
8
|
+
//# sourceMappingURL=cdn.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/entrypoints/cdn.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAgB1D,OAAO,EAAE,oBAAoB,EAAE,CAAA;AAC/B,eAAe,oBAAoB,CAAA"}
|